introduce context for duplicates to be shared across PRBs & payment m…

…ethods
Automattic · Apr 16, 2024 · e6a5165 · e6a5165
1 parent 3a034dd
commit e6a5165
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 73 deletions.
diff --git a/client/components/payment-methods-list/payment-method.tsx b/client/components/payment-methods-list/payment-method.tsx
@@ -26,6 +26,7 @@ import Pill from '../pill';
 import InlineNotice from '../inline-notice';
 import './payment-method.scss';
 import DuplicateNotice from '../duplicate-notice';
+import DuplicatedPaymentMethodsContext from 'wcpay/settings/settings-manager/duplicated-payment-methods-context';
 
 interface PaymentMethodProps {
 	id: string;
@@ -45,9 +46,6 @@ interface PaymentMethodProps {
 	locked: boolean;
 	isPoEnabled: boolean;
 	isPoComplete: boolean;
-	duplicates: string[];
-	dismissedDuplicateNotices: string[];
-	setDismissedDuplicateNotices: ( notices: string[] ) => void;
 }
 
 const PaymentMethodLabel = ( {
@@ -120,9 +118,6 @@ const PaymentMethod = ( {
 	locked,
 	isPoEnabled,
 	isPoComplete,
-	duplicates,
-	dismissedDuplicateNotices,
-	setDismissedDuplicateNotices,
 }: PaymentMethodProps ): React.ReactElement => {
 	// We want to show a tooltip if PO is enabled and not yet complete. (We make an exception to not show this for card payments).
 	const isPoInProgress =
@@ -151,6 +146,11 @@ const PaymentMethod = ( {
 		isPoInProgress ||
 		upeCapabilityStatuses.REJECTED === status;
 	const shouldDisplayNotice = id === 'sofort';
+	const {
+		duplicates,
+		dismissedDuplicateNotices,
+		setDismissedDuplicateNotices,
+	} = useContext( DuplicatedPaymentMethodsContext );
 	const isDuplicate = duplicates.includes( id );
 
 	const needsOverlay =

diff --git a/client/components/payment-methods-list/test/payment-method.test.tsx b/client/components/payment-methods-list/test/payment-method.test.tsx
@@ -12,6 +12,7 @@ import { act } from 'react-dom/test-utils';
  * Internal dependencies
  */
 import PaymentMethod from '../payment-method';
+import DuplicatedPaymentMethodsContext from 'wcpay/settings/settings-manager/duplicated-payment-methods-context';
 
 describe( 'PaymentMethod', () => {
 	let checked = false;
@@ -44,9 +45,6 @@ describe( 'PaymentMethod', () => {
 				locked={ false }
 				isPoEnabled={ false }
 				isPoComplete={ false }
-				duplicates={ [] }
-				dismissedDuplicateNotices={ [] }
-				setDismissedDuplicateNotices={ jest.fn() }
 			/>
 		);
 	};
@@ -105,9 +103,6 @@ describe( 'PaymentMethod', () => {
 				required={ false }
 				isPoEnabled={ false }
 				isPoComplete={ false }
-				duplicates={ [] }
-				dismissedDuplicateNotices={ [] }
-				setDismissedDuplicateNotices={ jest.fn() }
 			/>
 		);
 	};
@@ -135,7 +130,7 @@ describe( 'PaymentMethod', () => {
 		jest.useRealTimers();
 	} );
 
-	const getComponentWithDuplicates = ( id: string, duplicates: string[] ) => (
+	const getDuplicateComponent = ( id: string ) => (
 		<PaymentMethod
 			label="Test Method"
 			id={ id }
@@ -150,14 +145,21 @@ describe( 'PaymentMethod', () => {
 			locked={ false }
 			isPoEnabled={ false }
 			isPoComplete={ false }
-			duplicates={ duplicates }
-			dismissedDuplicateNotices={ [] }
-			setDismissedDuplicateNotices={ setDismissedDuplicateNoticesMock }
 		/>
 	);
 
 	test( 'does not render DuplicateNotice if payment method is not in duplicates', () => {
-		render( getComponentWithDuplicates( 'card', [ 'ideal' ] ) );
+		render(
+			<DuplicatedPaymentMethodsContext.Provider
+				value={ {
+					duplicates: [ 'ideal' ],
+					dismissedDuplicateNotices: [],
+					setDismissedDuplicateNotices: setDismissedDuplicateNoticesMock,
+				} }
+			>
+				{ getDuplicateComponent( 'card' ) }
+			</DuplicatedPaymentMethodsContext.Provider>
+		);
 
 		expect(
 			screen.queryByText(
@@ -167,7 +169,17 @@ describe( 'PaymentMethod', () => {
 	} );
 
 	test( 'render DuplicateNotice if payment method is in duplicates', () => {
-		render( getComponentWithDuplicates( 'card', [ 'card' ] ) );
+		render(
+			<DuplicatedPaymentMethodsContext.Provider
+				value={ {
+					duplicates: [ 'card' ],
+					dismissedDuplicateNotices: [],
+					setDismissedDuplicateNotices: setDismissedDuplicateNoticesMock,
+				} }
+			>
+				{ getDuplicateComponent( 'card' ) }
+			</DuplicatedPaymentMethodsContext.Provider>
+		);
 
 		expect(
 			screen.queryByText(

diff --git a/client/payment-methods/index.js b/client/payment-methods/index.js
@@ -18,7 +18,6 @@ import {
 	useSelectedPaymentMethod,
 	useUnselectedPaymentMethod,
 	useAccountDomesticCurrency,
-	useGetDuplicatedPaymentMethodIds,
 } from 'wcpay/data';
 import PAYMENT_METHOD_IDS from './constants';
 
@@ -40,8 +39,6 @@ const PaymentMethods = () => {
 
 	const availablePaymentMethodIds = useGetAvailablePaymentMethodIds();
 
-	const duplicatedPaymentMethodIds = useGetDuplicatedPaymentMethodIds();
-
 	// We filter link payment method since this will be displayed in other section (express checkout).
 	// We further split the available methods into pay later and non-pay later methods to sort them in the required order later.
 	const availableNonPayLaterMethods = availablePaymentMethodIds.filter(
@@ -85,14 +82,6 @@ const PaymentMethods = () => {
 
 	const [ , updateUnselectedPaymentMethod ] = useUnselectedPaymentMethod();
 
-	const [
-		dismissedDuplicateNotices,
-		setDismissedDuplicateNotices,
-	] = useState( wcpaySettings.dismissedDuplicateNotices || [] );
-	const handleSetDismissedDuplicateNotices = ( skippedNotices ) => {
-		setDismissedDuplicateNotices( skippedNotices );
-	};
-
 	const completeDeleteAction = ( itemId ) => {
 		updateUnselectedPaymentMethod( itemId );
 		handleDeleteModalOpen( null );
@@ -228,15 +217,6 @@ const PaymentMethods = () => {
 											wcpaySettings?.progressiveOnboarding
 												?.isComplete
 										}
-										duplicates={
-											duplicatedPaymentMethodIds
-										}
-										dismissedDuplicateNotices={
-											dismissedDuplicateNotices
-										}
-										setDismissedDuplicateNotices={
-											handleSetDismissedDuplicateNotices
-										}
 									/>
 								);
 							}

diff --git a/client/payment-methods/test/index.js b/client/payment-methods/test/index.js
@@ -23,6 +23,7 @@ import {
 	useGetDuplicatedPaymentMethodIds,
 } from 'wcpay/data';
 import { upeCapabilityStatuses } from 'wcpay/additional-methods-setup/constants';
+import DuplicatedPaymentMethodsContext from 'wcpay/settings/settings-manager/duplicated-payment-methods-context';
 
 jest.mock( '@woocommerce/components', () => {
 	return {
@@ -420,8 +421,18 @@ describe( 'PaymentMethods', () => {
 	it( 'duplicate notices should not appear when dismissed', () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [ 'card' ] );
 		useGetDuplicatedPaymentMethodIds.mockReturnValue( [ 'card' ] );
-		global.wcpaySettings.dismissedDuplicateNotices = 'card';
-		render( <PaymentMethods /> );
+
+		render(
+			<DuplicatedPaymentMethodsContext.Provider
+				value={ {
+					duplicates: [ 'card' ],
+					dismissedDuplicateNotices: [ 'card' ],
+					setDismissedDuplicateNotices: jest.fn(),
+				} }
+			>
+				<PaymentMethods />
+			</DuplicatedPaymentMethodsContext.Provider>
+		);
 
 		expect(
 			screen.queryByText(
@@ -433,8 +444,18 @@ describe( 'PaymentMethods', () => {
 	it( 'duplicate notice should appear when not dismissed', () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [ 'card' ] );
 		useGetDuplicatedPaymentMethodIds.mockReturnValue( [ 'card' ] );
-		// global.wcpaySettings.dismissedDuplicateNotices = 'card';
-		render( <PaymentMethods /> );
+
+		render(
+			<DuplicatedPaymentMethodsContext.Provider
+				value={ {
+					duplicates: [ 'card' ],
+					dismissedDuplicateNotices: [],
+					setDismissedDuplicateNotices: jest.fn(),
+				} }
+			>
+				<PaymentMethods />
+			</DuplicatedPaymentMethodsContext.Provider>
+		);
 
 		expect(
 			screen.queryByText(

diff --git a/client/settings/express-checkout/apple-google-pay-item.tsx b/client/settings/express-checkout/apple-google-pay-item.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Button, CheckboxControl } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 
 /**
  * Internal dependencies
@@ -13,12 +13,12 @@ import { getPaymentMethodSettingsUrl } from '../../utils';
 import {
 	usePaymentRequestEnabledSettings,
 	useExpressCheckoutShowIncompatibilityNotice,
-	useGetDuplicatedPaymentMethodIds,
 } from 'wcpay/data';
 import { PaymentRequestEnabledSettingsHook } from './interfaces';
 import { ApplePayIcon, GooglePayIcon } from 'wcpay/payment-methods-icons';
 import { ExpressCheckoutIncompatibilityNotice } from 'wcpay/settings/settings-warnings/incompatibility-notice';
 import DuplicateNotice from 'wcpay/components/duplicate-notice';
+import DuplicatedPaymentMethodsContext from '../settings-manager/duplicated-payment-methods-context';
 
 const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 	const id = 'apple_pay_google_pay';
@@ -29,16 +29,12 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 	] = usePaymentRequestEnabledSettings() as PaymentRequestEnabledSettingsHook;
 
 	const showIncompatibilityNotice = useExpressCheckoutShowIncompatibilityNotice();
-	const duplicatedPaymentMethods = useGetDuplicatedPaymentMethodIds() as string[];
-	const isDuplicate = duplicatedPaymentMethods.includes( id );
-	const [
+	const {
+		duplicates,
 		dismissedDuplicateNotices,
 		setDismissedDuplicateNotices,
-	] = useState( wcpaySettings.dismissedDuplicateNotices || [] );
-
-	const handleSetDismissedDuplicateNotices = ( skippedNotices: string[] ) => {
-		setDismissedDuplicateNotices( skippedNotices );
-	};
+	} = useContext( DuplicatedPaymentMethodsContext );
+	const isDuplicate = duplicates.includes( id );
 
 	return (
 		<li
@@ -188,7 +184,7 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 					paymentMethod={ id }
 					dismissedDuplicateNotices={ dismissedDuplicateNotices }
 					setDismissedDuplicateNotices={
-						handleSetDismissedDuplicateNotices
+						setDismissedDuplicateNotices
 					}
 				/>
 			) }

diff --git a/client/settings/settings-manager/duplicated-payment-methods-context.tsx b/client/settings/settings-manager/duplicated-payment-methods-context.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { createContext } from 'react';
+
+const DuplicatedPaymentMethodsContext = createContext( {
+	duplicates: [] as string[],
+	dismissedDuplicateNotices: [] as string[],
+	setDismissedDuplicateNotices: () => null,
+} );
+
+export default DuplicatedPaymentMethodsContext;
diff --git a/client/settings/settings-manager/index.js b/client/settings/settings-manager/index.js
@@ -22,9 +22,14 @@ import Transactions from '../transactions';
 import Deposits from '../deposits';
 import LoadableSettingsSection from '../loadable-settings-section';
 import ErrorBoundary from '../../components/error-boundary';
-import { useDepositDelayDays, useSettings } from '../../data';
+import {
+	useDepositDelayDays,
+	useGetDuplicatedPaymentMethodIds,
+	useSettings,
+} from '../../data';
 import FraudProtection from '../fraud-protection';
 import { isDefaultSiteLanguage } from 'wcpay/utils';
+import DuplicatedPaymentMethodsContext from './duplicated-payment-methods-context';
 
 const PaymentMethodsDescription = () => (
 	<>
@@ -200,6 +205,11 @@ const SettingsManager = () => {
 		}
 	}, [ isLoading ] );
 
+	const [
+		dismissedDuplicateNotices,
+		setDismissedDuplicateNotices,
+	] = useState( wcpaySettings.dismissedDuplicateNotices || [] );
+
 	return (
 		<SettingsLayout>
 			<SettingsSection
@@ -212,26 +222,34 @@ const SettingsManager = () => {
 					</ErrorBoundary>
 				</LoadableSettingsSection>
 			</SettingsSection>
-			<SettingsSection
-				description={ PaymentMethodsDescription }
-				id="payment-methods"
+			<DuplicatedPaymentMethodsContext.Provider
+				value={ {
+					duplicates: useGetDuplicatedPaymentMethodIds(),
+					dismissedDuplicateNotices: dismissedDuplicateNotices,
+					setDismissedDuplicateNotices: setDismissedDuplicateNotices,
+				} }
 			>
-				<LoadableSettingsSection numLines={ 60 }>
-					<ErrorBoundary>
-						<PaymentMethods />
-					</ErrorBoundary>
-				</LoadableSettingsSection>
-			</SettingsSection>
-			<SettingsSection
-				id="express-checkouts"
-				description={ ExpressCheckoutDescription }
-			>
-				<LoadableSettingsSection numLines={ 20 }>
-					<ErrorBoundary>
-						<ExpressCheckout />
-					</ErrorBoundary>
-				</LoadableSettingsSection>
-			</SettingsSection>
+				<SettingsSection
+					description={ PaymentMethodsDescription }
+					id="payment-methods"
+				>
+					<LoadableSettingsSection numLines={ 60 }>
+						<ErrorBoundary>
+							<PaymentMethods />
+						</ErrorBoundary>
+					</LoadableSettingsSection>
+				</SettingsSection>
+				<SettingsSection
+					id="express-checkouts"
+					description={ ExpressCheckoutDescription }
+				>
+					<LoadableSettingsSection numLines={ 20 }>
+						<ErrorBoundary>
+							<ExpressCheckout />
+						</ErrorBoundary>
+					</LoadableSettingsSection>
+				</SettingsSection>
+			</DuplicatedPaymentMethodsContext.Provider>
 			<SettingsSection
 				description={ TransactionsDescription }
 				id="transactions"