Decouple './client/multi-currency-setup'

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/data/index.ts

@@ -18,6 +18,8 @@ export * from './charges/hooks';
 export * from './timeline/hooks';
 export * from './disputes/hooks';
 export * from './settings/hooks';
+// TODO: Needs to be migrated. At the moment, there exist dependencies on these files.
+export * from 'multi-currency/data';
 export * from './card-readers/hooks';
 export * from './capital/hooks';
 export * from './documents/hooks';

client/index.js

@@ -23,7 +23,7 @@ import DisputesPage from 'disputes';
 import RedirectToTransactionDetails from 'disputes/redirect-to-transaction-details';
 import DisputeEvidencePage from 'disputes/evidence';
 import AdditionalMethodsPage from 'wcpay/additional-methods-setup';
-import MultiCurrencySetupPage from 'wcpay/multi-currency-setup';
+import { MultiCurrencySetupPage } from 'multi-currency/interface/components';
 import CardReadersPage from 'card-readers';
 import CapitalPage from 'capital';
 import OverviewPage from 'overview';

client/settings/payment-methods-section/__tests__/payment-methods-section.test.js

@@ -48,6 +48,11 @@ jest.mock( 'multi-currency/interface/data', () => ( {
 	useEnabledCurrencies: jest.fn().mockReturnValue( {} ),
 } ) );
 
+jest.mock( 'multi-currency/interface/data', () => ( {
+	useCurrencies: jest.fn().mockReturnValue( { isLoading: true } ),
+	useEnabledCurrencies: jest.fn().mockReturnValue( {} ),
+} ) );
+
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest
 		.fn()

client/vat/form/tasks/company-data-task.tsx

@@ -11,14 +11,14 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import React, { useContext, useEffect, useState } from 'react';
-import CollapsibleBody from 'wcpay/additional-methods-setup/wizard/collapsible-body';
-import WizardTaskItem from 'wcpay/additional-methods-setup/wizard/task-item';
-import WizardTaskContext from 'wcpay/additional-methods-setup/wizard/task/context';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
  */
+import CollapsibleBody from 'wcpay/additional-methods-setup/wizard/collapsible-body';
+import WizardTaskItem from 'wcpay/additional-methods-setup/wizard/task-item';
+import WizardTaskContext from 'wcpay/additional-methods-setup/wizard/task/context';
 import {
 	VatError,
 	VatFormOnCompleted,
@@ -97,6 +97,7 @@ export const CompanyDataTask = ( {
 				'woocommerce-payments'
 			) }
 			className={ null }
+			visibleDescription={ null }
 		>
 			<CollapsibleBody className={ null }>
 				<TextControl

client/vat/form/tasks/vat-number-task.tsx

@@ -11,14 +11,14 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useContext, useState } from 'react';
-import CollapsibleBody from 'wcpay/additional-methods-setup/wizard/collapsible-body';
-import WizardTaskItem from 'wcpay/additional-methods-setup/wizard/task-item';
-import WizardTaskContext from 'wcpay/additional-methods-setup/wizard/task/context';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
  */
+import CollapsibleBody from 'wcpay/additional-methods-setup/wizard/collapsible-body';
+import WizardTaskItem from 'wcpay/additional-methods-setup/wizard/task-item';
+import WizardTaskContext from 'wcpay/additional-methods-setup/wizard/task/context';
 import { VatError, VatFormOnCompleted, VatValidationResult } from '../../types';
 import '../style.scss';
 
@@ -160,6 +160,7 @@ export const VatNumberTask = ( {
 				getVatTaxIDName()
 			) }
 			className={ null }
+			visibleDescription={ null }
 		>
 			<p className="wcpay-wizard-task__description-element">
 				{ __(

multi-currency/client/data/actions.js

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal Dependencies
  */
-import { recordEvent } from 'multi-currency/interface/data';
+import { recordEvent } from 'multi-currency/interface/functions';
 import TYPES from './action-types';
 import { NAMESPACE, STORE_NAME } from './constants';
 

multi-currency/client/data/resolvers.js

@@ -34,7 +34,7 @@ export function* getCurrencies() {
 }
 
 /**
- * Retrieve single currency sttings from the site's REST API.
+ * Retrieve single currency settings from the site's REST API.
  *
  * @param {string} currencyCode The currency code to fetch settings for.
  */

multi-currency/client/data/selectors.js

@@ -13,7 +13,7 @@ const getMultiCurrencyState = ( state ) => {
 		return {};
 	}
 
-	return state.multiCurrency || {};
+	return state || {};
 };
 
 export const getCurrencies = ( state ) => {

multi-currency/client/interface/components.js

@@ -0,0 +1,19 @@
+/**
+ * Dependencies from WooPayments to MCCY.
+ */
+// wcpay/additional-methods-setup/*
+export { default as CollapsibleBody } from 'wcpay/additional-methods-setup/wizard/collapsible-body';
+export { default as Wizard } from 'wcpay/additional-methods-setup/wizard/wrapper';
+export { default as WizardTask } from 'wcpay/additional-methods-setup/wizard/task';
+export { default as WizardTaskItem } from 'wcpay/additional-methods-setup/wizard/task-item';
+export { default as WizardTaskList } from 'wcpay/additional-methods-setup/wizard/task-list';
+// wcpay/components/*
+export { default as Page } from 'wcpay/components/page';
+export { default as Search } from 'wcpay/components/search';
+export { LoadableBlock } from 'wcpay/components/loadable';
+
+/**
+ * Dependencies from MCCY to WooPayments.
+ */
+// multi-currency/setup
+export { default as MultiCurrencySetupPage } from 'multi-currency/setup';

multi-currency/client/interface/data.js

@@ -1,9 +1,10 @@
 /**
- * Importing 'tracks' from WooPayments and exporting.
+ * Dependencies from WooPayments to MCCY.
  */
-export { recordEvent } from 'wcpay/tracks';
+// wcpay/data
+export { useSettings, useMultiCurrency } from 'wcpay/data';
 
 /**
- * Importing data from MCCY and exporting.
+ * Dependencies from MCCY to WooPayments.
  */
 export { useCurrencies, useEnabledCurrencies } from 'multi-currency/data';

multi-currency/client/interface/functions.js

@@ -0,0 +1,9 @@
+/**
+ * Dependencies from WooPayments to MCCY.
+ */
+// wcpay/tracks
+export { recordEvent } from 'wcpay/tracks';
+// wcpay/settings
+export { default as WCPaySettingsContext } from 'wcpay/settings/wcpay-settings-context';
+// wcpay/additional-methods-setup/*
+export { default as WizardTaskContext } from 'wcpay/additional-methods-setup/wizard/task/context';

client/multi-currency-setup/index.js → multi-currency/client/setup/index.js

@@ -3,9 +3,9 @@
 /**
  * Internal dependencies
  */
-import Page from 'components/page';
 import MultiCurrencySetup from './tasks/multi-currency-setup';
-import WCPaySettingsContext from '../settings/wcpay-settings-context';
+import { Page } from 'multi-currency/interface/components';
+import { WCPaySettingsContext } from 'multi-currency/interface/functions';
 
 const MultiCurrencySetupPage = () => {
 	const { isSetupCompleted } = window.wcpaySettings.multiCurrencySetup;

client/multi-currency-setup/tasks/add-currencies-task/index.js → multi-currency/client/setup/tasks/add-currencies-task/index.js

@@ -10,23 +10,26 @@ import _ from 'lodash';
 /**
  * Internal dependencies
  */
-import WizardTaskContext from '../../../additional-methods-setup/wizard/task/context';
-import CollapsibleBody from '../../../additional-methods-setup/wizard/collapsible-body';
-import WizardTaskItem from '../../wizard/task-item';
+import { WizardTaskContext } from 'multi-currency/interface/functions';
+import {
+	CollapsibleBody,
+	Search,
+	LoadableBlock,
+	WizardTaskItem,
+} from 'multi-currency/interface/components';
 
 import {
 	useCurrencies,
 	useAvailableCurrencies,
 	useEnabledCurrencies,
 	useDefaultCurrency,
-} from 'wcpay/data';
+} from 'multi-currency/data';
 
 // eslint-disable-next-line max-len
-import EnabledCurrenciesModalCheckboxList from '../../../multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox-list';
-import EnabledCurrenciesModalCheckbox from '../../../multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox';
-import Search from 'components/search';
-
-import { LoadableBlock } from '../../../components/loadable';
+// TODO: Migrate to 'multi-currency/settings/enabled-currencies-list/modal-checkbox-list'.
+import EnabledCurrenciesModalCheckboxList from 'wcpay/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox-list';
+// TODO: Migrate to 'multi-currency/settings/enabled-currencies-list/modal-checkbox'.
+import EnabledCurrenciesModalCheckbox from 'wcpay/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox';
 
 import { recommendedCurrencyCodes, numberWords } from './constants';
 import {

client/multi-currency-setup/tasks/add-currencies-task/test/index.test.js → multi-currency/client/setup/tasks/add-currencies-task/test/index.test.js

@@ -9,23 +9,29 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import AddCurrenciesTask from '..';
+import { useSettings } from 'multi-currency/interface/data';
+import { WizardTaskContext } from 'multi-currency/interface/functions';
 import {
 	useCurrencies,
 	useAvailableCurrencies,
 	useDefaultCurrency,
 	useEnabledCurrencies,
-	useSettings,
-} from 'wcpay/data';
+} from 'multi-currency/data';
 
-import WizardTaskContext from '../../../../additional-methods-setup/wizard/task/context';
 import { recommendedCurrencyCodes } from '../constants';
 import { __ } from '@wordpress/i18n';
 
+// TODO: Remove this while we have a dependency on 'wcpay/multi-currency/preview-modal'.
 jest.mock( 'wcpay/data', () => ( {
+	useStoreSettings: jest.fn(),
+} ) );
+jest.mock( 'multi-currency/data', () => ( {
 	useCurrencies: jest.fn(),
 	useAvailableCurrencies: jest.fn(),
 	useDefaultCurrency: jest.fn(),
 	useEnabledCurrencies: jest.fn(),
+} ) );
+jest.mock( 'multi-currency/interface/data', () => ( {
 	useSettings: jest.fn(),
 } ) );
 

client/multi-currency-setup/tasks/multi-currency-setup.js → multi-currency/client/setup/tasks/multi-currency-setup.js

@@ -7,9 +7,11 @@ import { Card, CardBody } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import Wizard from '../../additional-methods-setup/wizard/wrapper';
-import WizardTask from '../../additional-methods-setup/wizard/task';
-import WizardTaskList from '../../additional-methods-setup/wizard/task-list';
+import {
+	Wizard,
+	WizardTask,
+	WizardTaskList,
+} from 'multi-currency/interface/components';
 import StoreSettingsTask from './store-settings-task';
 import SetupCompleteTask from './setup-complete-task';
 import AddCurrenciesTask from './add-currencies-task';