Decoupled Multi-currency module from gateway dependencies (#9439)

Co-authored-by: Hector Lovo <[email protected]>
Co-authored-by: Rafael Zaleski <[email protected]>
Co-authored-by: Hector Lovo <[email protected]>

Author: 3 people

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.js

@@ -11,7 +11,13 @@ import { Icon, check } from '@wordpress/icons';
 import WizardTaskContext from './task/context';
 import './task-item.scss';
 
-const WizardTaskItem = ( { children, title, index, className } ) => {
+const WizardTaskItem = ( {
+	children,
+	title,
+	index,
+	className,
+	visibleDescription,
+} ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 
 	return (
@@ -39,6 +45,16 @@ const WizardTaskItem = ( { children, title, index, className } ) => {
 				</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/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/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

@@ -9,12 +9,12 @@ import { buildAjaxURL } from 'utils/express-checkout';
 import { getAppearance } from 'checkout/upe-styles';
 import {
 	getTargetElement,
-	getAppearanceType,
 	validateEmail,
 	appendRedirectionParams,
 	shouldSkipWooPay,
 	deleteSkipWooPayCookie,
 } 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';
 
 /**