Decoupled Multi-currency module (#9617)

Co-authored-by: Hector Lovo <hector.lovo@automattic.com>
Co-authored-by: Rafael Zaleski <rafaelzaleski@users.noreply.github.com>
Co-authored-by: Hector Lovo <lovohh@gmail.com>

changelog/fix-backwards-compat-mccy-instance

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Provide backwards-compatible method for retrieving the multi-currency instance.

changelog/multi-currency-v2

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Decoupled Multi-currency module from gateway dependencies.

client/additional-methods-setup/upe-preview-methods-selector/add-payment-methods-task.js

@@ -36,7 +36,7 @@ import PaymentMethodCheckbox from '../../components/payment-methods-checkboxes/p
 import { LoadableBlock } from '../../components/loadable';
 import LoadableSettingsSection from '../../settings/loadable-settings-section';
 import CurrencyInformationForMethods from './currency-information-for-methods';
-import { getMissingCurrenciesTooltipMessage } from 'wcpay/multi-currency/missing-currencies-message';
+import { getMissingCurrenciesTooltipMessage } from 'multi-currency/interface/functions';
 import { upeCapabilityStatuses, upeMethods } from '../constants';
 import paymentMethodsMap from '../../payment-methods-map';
 import ConfirmPaymentMethodActivationModal from 'wcpay/settings/payment-methods-list/activation-modal';

client/additional-methods-setup/upe-preview-methods-selector/currency-information-for-methods.js

@@ -9,11 +9,11 @@ import interpolateComponents from '@automattic/interpolate-components';
 /**
  * Internal dependencies
  */
+import { useAccountDomesticCurrency } from '../../data';
 import {
-	useAccountDomesticCurrency,
 	useCurrencies,
 	useEnabledCurrencies,
-} from '../../data';
+} from 'multi-currency/interface/data';
 import WCPaySettingsContext from '../../settings/wcpay-settings-context';
 import InlineNotice from 'components/inline-notice';
 import PaymentMethodsMap from '../../payment-methods-map';

client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js

@@ -22,25 +22,31 @@ import {
 	useEnabledPaymentMethodIds,
 	useGetPaymentMethodStatuses,
 	useSettings,
-	useCurrencies,
-	useEnabledCurrencies,
 	useManualCapture,
 	useAccountDomesticCurrency,
 } from '../../../data';
+import {
+	useCurrencies,
+	useEnabledCurrencies,
+} from 'multi-currency/interface/data';
+
 import WCPaySettingsContext from '../../../settings/wcpay-settings-context';
 import { upeCapabilityStatuses } from 'wcpay/additional-methods-setup/constants';
 
 jest.mock( '../../../data', () => ( {
 	useGetAvailablePaymentMethodIds: jest.fn(),
 	useEnabledPaymentMethodIds: jest.fn(),
 	useSettings: jest.fn(),
-	useCurrencies: jest.fn(),
-	useEnabledCurrencies: jest.fn(),
 	useGetPaymentMethodStatuses: jest.fn(),
 	useManualCapture: jest.fn(),
 	useAccountDomesticCurrency: jest.fn(),
 } ) );
 
+jest.mock( 'multi-currency/interface/data', () => ( {
+	useCurrencies: jest.fn(),
+	useEnabledCurrencies: jest.fn(),
+} ) );
+
 jest.mock( '@wordpress/a11y', () => ( {
 	...jest.requireActual( '@wordpress/a11y' ),
 	speak: jest.fn(),

client/additional-methods-setup/upe-preview-methods-selector/test/currency-information-for-methods.test.js

@@ -7,18 +7,21 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
+import { useAccountDomesticCurrency } from '../../../data';
 import {
 	useCurrencies,
 	useEnabledCurrencies,
-	useAccountDomesticCurrency,
-} from 'wcpay/data';
+} from 'multi-currency/interface/data';
 import CurrencyInformationForMethods from '../currency-information-for-methods';
 import WCPaySettingsContext from '../../../settings/wcpay-settings-context';
 
-jest.mock( 'wcpay/data', () => ( {
+jest.mock( '../../../data', () => ( {
+	useAccountDomesticCurrency: jest.fn(),
+} ) );
+
+jest.mock( 'multi-currency/interface/data', () => ( {
 	useCurrencies: jest.fn(),
 	useEnabledCurrencies: jest.fn(),
-	useAccountDomesticCurrency: jest.fn(),
 } ) );
 
 jest.mock( '@wordpress/a11y', () => ( {

client/additional-methods-setup/wizard/task-item.scss

@@ -117,6 +117,22 @@
 		}
 	}
 
+	&__visible-description-element {
+		position: absolute;
+		margin-left: 40px;
+		margin-top: 0;
+		margin-bottom: 1em;
+
+		&.is-muted-color {
+			color: $gray-700;
+		}
+
+		.components-external-link svg {
+			width: 1em;
+			height: 1em;
+		}
+	}
+
 	.add-payment-methods-task {
 		&__payment-selector {
 			&-wrapper {

client/additional-methods-setup/wizard/task-item.tsx

@@ -16,13 +16,15 @@ interface WizardTaskItemProps {
 	title: string;
 	index: number;
 	className?: string;
+	visibleDescription?: string;
 }
 
 const WizardTaskItem: React.FC< WizardTaskItemProps > = ( {
 	children,
 	title,
 	index,
 	className,
+	visibleDescription,
 } ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 
@@ -51,6 +53,16 @@ const WizardTaskItem: React.FC< WizardTaskItemProps > = ( {
 				</div>
 				<span className="wcpay-wizard-task__title">{ title }</span>
 			</div>
+			{ visibleDescription && ! isActive && (
+				<span
+					className={ classNames(
+						'wcpay-wizard-task__visible-description-element',
+						'is-muted-color'
+					) }
+				>
+					{ visibleDescription }
+				</span>
+			) }
 			<div className="wcpay-wizard-task__body">{ children }</div>
 		</li>
 	);

client/capital/index.tsx

@@ -15,7 +15,10 @@ import Page from 'components/page';
 import { TestModeNotice } from 'components/test-mode-notice';
 import ErrorBoundary from 'components/error-boundary';
 import ActiveLoanSummary from 'components/active-loan-summary';
-import { formatExplicitCurrency, isZeroDecimalCurrency } from 'utils/currency';
+import {
+	formatExplicitCurrency,
+	isZeroDecimalCurrency,
+} from 'multi-currency/interface/functions';
 import { CapitalLoan } from 'data/capital/types';
 import ClickableCell from 'components/clickable-cell';
 import Chip from 'components/chip';

client/checkout/woopay/email-input-iframe.js

@@ -13,8 +13,8 @@ import {
 	appendRedirectionParams,
 	shouldSkipWooPay,
 	deleteSkipWooPayCookie,
-} from 'wcpay/checkout/woopay/utils';
-import { getAppearanceType } from 'wcpay/checkout/utils';
+} from './utils';
+import { getAppearanceType } from '../utils';
 
 export const handleWooPayEmailInput = async (
 	field,

client/components/account-balances/balance-block.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 /**
  * Internal dependencies
  */
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 import Loadable from 'components/loadable';
 
 /**

client/components/account-balances/index.tsx

@@ -23,7 +23,7 @@ import {
 } from './balance-tooltip';
 import { fundLabelStrings } from './strings';
 import { ClickTooltip } from '../tooltip';
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 import { useAllDepositsOverviews } from 'wcpay/data';
 import { useSelectedCurrency } from 'wcpay/overview/hooks';
 import './style.scss';

client/components/account-status/account-fees/expiration-bar.js

@@ -4,7 +4,7 @@
  * Internal dependencies
  */
 import ProgressBar from 'components/progress-bar';
-import { formatCurrency } from 'utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 
 const ExpirationBar = ( {
 	feeData: {

client/components/account-status/account-fees/expiration-description.js

@@ -10,7 +10,7 @@ import moment from 'moment';
 /**
  * Internal dependencies
  */
-import { formatCurrency } from 'utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 
 const ExpirationDescription = ( {
 	feeData: { volume_allowance: volumeAllowance, end_time: endTime, ...rest },

client/components/account-status/account-fees/index.js

@@ -10,7 +10,10 @@ import { __ } from '@wordpress/i18n';
  */
 import ExpirationBar from './expiration-bar';
 import ExpirationDescription from './expiration-description';
-import { formatCurrencyName, getCurrency } from 'utils/currency';
+import {
+	formatCurrencyName,
+	getCurrency,
+} from 'multi-currency/interface/functions';
 import {
 	formatAccountFeesDescription,
 	getCurrentBaseFee,

client/components/active-loan-summary/index.tsx

@@ -18,7 +18,7 @@ import { dateI18n } from '@wordpress/date';
 /**
  * Internal dependencies.
  */
-import { formatExplicitCurrency } from 'utils/currency';
+import { formatExplicitCurrency } from 'multi-currency/interface/functions';
 import Loadable from 'components/loadable';
 import { useActiveLoanSummary } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';

client/components/deposits-overview/index.tsx

@@ -16,7 +16,7 @@ import { getHistory } from '@woocommerce/navigation';
  * Internal dependencies.
  */
 import { getAdminUrl } from 'wcpay/utils';
-import { formatExplicitCurrency } from 'wcpay/utils/currency';
+import { formatExplicitCurrency } from 'multi-currency/interface/functions';
 import { recordEvent } from 'tracks';
 import Loadable from 'components/loadable';
 import { useSelectedCurrencyOverview } from 'wcpay/overview/hooks';

client/components/deposits-overview/recent-deposits-list.tsx

@@ -21,7 +21,7 @@ import './style.scss';
 import DepositStatusChip from 'components/deposit-status-chip';
 import { getDepositDate } from 'deposits/utils';
 import { CachedDeposit } from 'wcpay/types/deposits';
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 import { getDetailsURL } from 'wcpay/components/details-link';
 
 interface RecentDepositsProps {

client/components/disputed-order-notice/index.js

@@ -8,7 +8,7 @@ import { createInterpolateElement } from '@wordpress/element';
  * Internal dependencies
  */
 import InlineNotice from 'wcpay/components/inline-notice';
-import { formatExplicitCurrency } from 'utils/currency';
+import { formatExplicitCurrency } from 'multi-currency/interface/functions';
 import { reasons } from 'wcpay/disputes/strings';
 import { getDetailsURL } from 'wcpay/components/details-link';
 import {

client/components/payment-activity/payment-data-tile.tsx

@@ -9,7 +9,7 @@ import { recordEvent } from 'wcpay/tracks';
 /**
  * Internal dependencies
  */
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 import Loadable from '../loadable';
 import './style.scss';
 

client/components/welcome/currency-select.tsx

@@ -8,7 +8,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { useSelectedCurrency } from 'overview/hooks';
-import { getCurrency } from 'utils/currency';
+import { getCurrency } from 'multi-currency/interface/functions';
 import InlineLabelSelect from '../inline-label-select';
 import { recordEvent } from 'tracks';
 

client/data/deposits/actions.js

@@ -6,7 +6,7 @@
 import { apiFetch } from '@wordpress/data-controls';
 import { dispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-import { formatCurrency } from 'utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 
 /**
  * Internal Dependencies

client/data/index.ts

@@ -18,7 +18,6 @@ export * from './charges/hooks';
 export * from './timeline/hooks';
 export * from './disputes/hooks';
 export * from './settings/hooks';
-export * from './multi-currency';
 export * from './card-readers/hooks';
 export * from './capital/hooks';
 export * from './documents/hooks';

client/data/store.js

@@ -14,7 +14,6 @@ import * as charges from './charges';
 import * as timeline from './timeline';
 import * as disputes from './disputes';
 import * as settings from './settings';
-import * as multiCurrency from './multi-currency';
 import * as readers from './card-readers';
 import * as capital from './capital';
 import * as documents from './documents';
@@ -33,7 +32,6 @@ export const initStore = () =>
 			timeline: timeline.reducer,
 			disputes: disputes.reducer,
 			settings: settings.reducer,
-			multiCurrency: multiCurrency.reducer,
 			readers: readers.reducer,
 			capital: capital.reducer,
 			documents: documents.reducer,
@@ -49,7 +47,6 @@ export const initStore = () =>
 			...timeline.actions,
 			...disputes.actions,
 			...settings.actions,
-			...multiCurrency.actions,
 			...readers.actions,
 			...capital.actions,
 			...documents.actions,
@@ -66,7 +63,6 @@ export const initStore = () =>
 			...timeline.selectors,
 			...disputes.selectors,
 			...settings.selectors,
-			...multiCurrency.selectors,
 			...readers.selectors,
 			...capital.selectors,
 			...documents.selectors,
@@ -82,7 +78,6 @@ export const initStore = () =>
 			...timeline.resolvers,
 			...disputes.resolvers,
 			...settings.resolvers,
-			...multiCurrency.resolvers,
 			...readers.resolvers,
 			...capital.resolvers,
 			...documents.resolvers,

client/deposits/details/index.tsx

@@ -34,7 +34,10 @@ import Page from 'components/page';
 import ErrorBoundary from 'components/error-boundary';
 import { TestModeNotice } from 'components/test-mode-notice';
 import InlineNotice from 'components/inline-notice';
-import { formatCurrency, formatExplicitCurrency } from 'utils/currency';
+import {
+	formatCurrency,
+	formatExplicitCurrency,
+} from 'multi-currency/interface/functions';
 import { displayStatus } from '../strings';
 import './style.scss';
 

client/deposits/filters/index.js

@@ -8,7 +8,7 @@ import { getQuery } from '@woocommerce/navigation';
  * Internal dependencies
  */
 import { filters, advancedFilters } from './config';
-import { formatCurrencyName } from '../../utils/currency';
+import { formatCurrencyName } from 'multi-currency/interface/functions';
 
 export const DepositsFilters = ( props ) => {
 	const populateDepositCurrencies = ( filtersConfiguration ) => {

client/deposits/instant-deposits/index.tsx

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import './style.scss';
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatCurrency } from 'multi-currency/interface/functions';
 import InstantDepositModal from './modal';
 import { useInstantDeposit } from 'wcpay/data';
 import type * as AccountOverview from 'wcpay/types/account-overview';

client/deposits/instant-deposits/modal.tsx

@@ -11,7 +11,10 @@ import { createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { formatCurrency, formatExplicitCurrency } from 'utils/currency';
+import {
+	formatCurrency,
+	formatExplicitCurrency,
+} from 'multi-currency/interface/functions';
 import type * as AccountOverview from 'wcpay/types/account-overview';
 import './style.scss';
 

client/deposits/list/index.tsx

@@ -26,7 +26,10 @@ import { useDispatch } from '@wordpress/data';
 import { useDeposits, useDepositsSummary } from 'wcpay/data';
 import { useReportingExportLanguage } from 'data/index';
 import { displayType, displayStatus } from '../strings';
-import { formatExplicitCurrency, formatExportAmount } from 'utils/currency';
+import {
+	formatExplicitCurrency,
+	formatExportAmount,
+} from 'multi-currency/interface/functions';
 import DetailsLink, { getDetailsURL } from 'components/details-link';
 import ClickableCell from 'components/clickable-cell';
 import Page from '../../components/page';