fix: PMs listed in disable confirmation modal (#8224)

Co-authored-by: Brett Shumaker <[email protected]>
Automattic · Feb 21, 2024 · 6a8974d · 6a8974d
1 parent 6a17f54
commit 6a8974d
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 119 deletions.
diff --git a/changelog/fix-disable-confirmation-modal-payment-methods-list b/changelog/fix-disable-confirmation-modal-payment-methods-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: list of payment methods in disable confirmation modal
diff --git a/client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.js b/client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.js
@@ -16,6 +16,7 @@ import { useEnabledPaymentMethodIds } from '../../data';
 import WizardContext from '../wizard/wrapper/context';
 import PaymentMethodIcon from '../../settings/payment-method-icon';
 import './setup-complete-task.scss';
+import paymentMethodsMap from 'wcpay/payment-methods-map';
 
 const SetupCompleteMessaging = () => {
 	const [ enabledPaymentMethods ] = useEnabledPaymentMethodIds();
@@ -61,7 +62,9 @@ const EnabledMethodsList = () => {
 		<ul className="wcpay-wizard-task__description-element setup-complete-task__enabled-methods-list">
 			{ enabledPaymentMethods.map( ( methodId ) => (
 				<li key={ methodId }>
-					<PaymentMethodIcon name={ methodId } showName={ false } />
+					<PaymentMethodIcon
+						Icon={ paymentMethodsMap[ methodId ].icon }
+					/>
 				</li>
 			) ) }
 		</ul>

diff --git a/client/disable-confirmation-modal/index.js b/client/disable-confirmation-modal/index.js
@@ -10,14 +10,30 @@ import interpolateComponents from '@automattic/interpolate-components';
  * Internal dependencies
  */
 import './styles.scss';
-import { useGetAvailablePaymentMethodIds } from '../data';
+import {
+	useEnabledPaymentMethodIds,
+	usePaymentRequestEnabledSettings,
+	useWooPayEnabledSettings,
+} from '../data';
 import PaymentMethodIcon from '../settings/payment-method-icon';
 import PaymentDeleteIllustration from '../components/payment-delete-illustration';
 import WooCardIcon from 'assets/images/cards/woo-card.svg?asset';
 import ConfirmationModal from '../components/confirmation-modal';
+import paymentMethodsMap from 'wcpay/payment-methods-map';
+import {
+	ApplePayIcon,
+	GooglePayIcon,
+	LinkIcon,
+	WooIcon,
+} from 'wcpay/payment-methods-icons';
 
 const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
-	const availablePaymentMethodIds = useGetAvailablePaymentMethodIds();
+	const [ enabledMethodIds ] = useEnabledPaymentMethodIds();
+	const [ isWooPayEnabled ] = useWooPayEnabledSettings();
+	const [ isPaymentRequestEnabled ] = usePaymentRequestEnabledSettings();
+	const isStripeLinkEnabled = Boolean(
+		enabledMethodIds.find( ( id ) => id === 'link' )
+	);
 
 	return (
 		<ConfirmationModal
@@ -91,11 +107,57 @@ const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
 				</strong>
 			</p>
 			<ul className="disable-confirmation-modal__payment-methods-list">
-				{ availablePaymentMethodIds.map( ( methodId ) => (
-					<li key={ methodId }>
-						<PaymentMethodIcon name={ methodId } showName />
+				{ enabledMethodIds
+					.filter( ( methodId ) => methodId !== 'link' )
+					.map( ( methodId ) => (
+						<li key={ methodId }>
+							<PaymentMethodIcon
+								Icon={ paymentMethodsMap[ methodId ].icon }
+								label={ paymentMethodsMap[ methodId ].label }
+							/>
+						</li>
+					) ) }
+				{ isPaymentRequestEnabled && (
+					<>
+						<li>
+							<PaymentMethodIcon
+								Icon={ GooglePayIcon }
+								label={ __(
+									'Google Pay',
+									'woocommerce-payments'
+								) }
+							/>
+						</li>
+						<li>
+							<PaymentMethodIcon
+								Icon={ ApplePayIcon }
+								label={ __(
+									'Apple Pay',
+									'woocommerce-payments'
+								) }
+							/>
+						</li>
+					</>
+				) }
+				{ isStripeLinkEnabled && (
+					<li>
+						<PaymentMethodIcon
+							Icon={ LinkIcon }
+							label={ __(
+								'Link by Stripe',
+								'woocommerce-payments'
+							) }
+						/>
 					</li>
-				) ) }
+				) }
+				{ isWooPayEnabled && (
+					<li>
+						<PaymentMethodIcon
+							Icon={ WooIcon }
+							label={ __( 'WooPay', 'woocommerce-payments' ) }
+						/>
+					</li>
+				) }
 			</ul>
 			<p>
 				{ interpolateComponents( {

diff --git a/client/disable-confirmation-modal/test/disable-confirmation-modal.test.js b/client/disable-confirmation-modal/test/disable-confirmation-modal.test.js
@@ -12,7 +12,11 @@ import userEvent from '@testing-library/user-event';
 import DisableConfirmationModal from '..';
 
 jest.mock( '../../data', () => ( {
-	useGetAvailablePaymentMethodIds: jest.fn().mockReturnValue( [] ),
+	useEnabledPaymentMethodIds: jest
+		.fn()
+		.mockReturnValue( [ [ 'card', 'giropay', 'link' ] ] ),
+	useWooPayEnabledSettings: jest.fn().mockReturnValue( [ true ] ),
+	usePaymentRequestEnabledSettings: jest.fn().mockReturnValue( [ true ] ),
 } ) );
 
 describe( 'DisableConfirmationModal', () => {

diff --git a/client/multi-currency/multi-currency-settings/enabled-currencies-list/delete-button.js b/client/multi-currency/multi-currency-settings/enabled-currencies-list/delete-button.js
@@ -9,6 +9,7 @@ import { useCallback, useState } from '@wordpress/element';
 import ConfirmationModal from 'wcpay/components/confirmation-modal';
 import CurrencyDeleteIllustration from 'wcpay/components/currency-delete-illustration';
 import PaymentMethodIcon from 'wcpay/settings/payment-method-icon';
+import paymentMethodsMap from 'wcpay/payment-methods-map';
 
 const DeleteButton = ( { code, label, symbol, onClick, className } ) => {
 	const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState(
@@ -100,8 +101,12 @@ const DeleteButton = ( { code, label, symbol, onClick, className } ) => {
 						{ dependentPaymentMethods.map( ( paymentMethod ) => (
 							<li key={ paymentMethod }>
 								<PaymentMethodIcon
-									name={ paymentMethod }
-									showName
+									Icon={
+										paymentMethodsMap[ paymentMethod ].icon
+									}
+									label={
+										paymentMethodsMap[ paymentMethod ].label
+									}
 								/>
 							</li>
 						) ) }

diff --git a/client/settings/general-settings/test/general-settings.test.js b/client/settings/general-settings/test/general-settings.test.js
@@ -7,26 +7,22 @@ import { fireEvent, render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import GeneralSettings from '..';
-import {
-	useDevMode,
-	useIsWCPayEnabled,
-	useTestMode,
-	useGetAvailablePaymentMethodIds,
-} from 'wcpay/data';
+import { useDevMode, useIsWCPayEnabled, useTestMode } from 'wcpay/data';
 
 jest.mock( 'wcpay/data', () => ( {
 	useDevMode: jest.fn(),
 	useIsWCPayEnabled: jest.fn(),
 	useTestMode: jest.fn(),
-	useGetAvailablePaymentMethodIds: jest.fn(),
+	useEnabledPaymentMethodIds: jest.fn().mockReturnValue( [ [ 'card' ] ] ),
+	useWooPayEnabledSettings: jest.fn().mockReturnValue( [ false ] ),
+	usePaymentRequestEnabledSettings: jest.fn().mockReturnValue( [ false ] ),
 } ) );
 
 describe( 'GeneralSettings', () => {
 	beforeEach( () => {
 		useDevMode.mockReturnValue( false );
 		useIsWCPayEnabled.mockReturnValue( [ false, jest.fn() ] );
 		useTestMode.mockReturnValue( [ false, jest.fn() ] );
-		useGetAvailablePaymentMethodIds.mockReturnValue( [ 'card' ] );
 	} );
 
 	it( 'renders', () => {

diff --git a/client/settings/payment-method-icon/index.js b/client/settings/payment-method-icon/index.js
@@ -9,16 +9,9 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import './style.scss';
-import paymentMethodsMap from '../../payment-methods-map';
 
-const PaymentMethodIcon = ( { name, showName } ) => {
-	const paymentMethod = paymentMethodsMap[ name ];
-
-	if ( ! paymentMethod ) {
-		return <></>;
-	}
-
-	const { label, icon: Icon } = paymentMethod;
+const PaymentMethodIcon = ( { Icon, label } ) => {
+	if ( ! Icon ) return null;
 
 	return (
 		<span
@@ -27,7 +20,7 @@ const PaymentMethodIcon = ( { name, showName } ) => {
 			) }
 		>
 			<Icon />
-			{ showName && (
+			{ label && (
 				<span className="woocommerce-payments__payment-method-icon__label">
 					{ label }
 				</span>

diff --git a/client/settings/payment-method-icon/test/index.js b/client/settings/payment-method-icon/test/index.js
@@ -9,108 +9,33 @@ import '@testing-library/jest-dom/extend-expect';
  * Internal dependencies
  */
 import PaymentMethodIcon from '..';
+import paymentMethodsMap from 'wcpay/payment-methods-map';
 
 describe( 'PaymentMethodIcon', () => {
-	test( 'renders BECS payment method icon', () => {
+	it( 'renders BECS payment method icon', () => {
 		const { container } = render(
-			<PaymentMethodIcon name="au_becs_debit" />
+			<PaymentMethodIcon
+				Icon={ paymentMethodsMap.au_becs_debit.icon }
+				label={ paymentMethodsMap.au_becs_debit.label }
+			/>
 		);
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
-
-	test( 'renders Bancontact payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="bancontact" /> );
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
-
-	test( 'renders EPS payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="eps" /> );
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
-
-	test( 'renders giropay payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="giropay" /> );
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
 
-	test( 'renders Sepa payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="sepa_debit" /> );
 		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'BECS Direct Debit' ) ).toBeInTheDocument();
 	} );
 
-	test( 'renders Sofort payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="sofort" /> );
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
-
-	test( 'renders p24 payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="p24" /> );
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
-
-	test( 'renders iDEAL payment method icon', () => {
-		const { container } = render( <PaymentMethodIcon name="ideal" /> );
-		expect( container.querySelector( 'img' ) ).toBeInTheDocument();
-	} );
-
-	test( 'renders BECS payment method icon and label', () => {
-		render( <PaymentMethodIcon name="au_becs_debit" showName /> );
-
-		const label = screen.queryByText( 'BECS Direct Debit' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders Bancontact payment method icon and label', () => {
-		render( <PaymentMethodIcon name="bancontact" showName /> );
-
-		const label = screen.queryByText( 'Bancontact' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders EPS payment method icon and label', () => {
-		render( <PaymentMethodIcon name="eps" showName /> );
-
-		const label = screen.queryByText( 'EPS' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders giropay payment method icon and label', () => {
-		render( <PaymentMethodIcon name="giropay" showName /> );
-
-		const label = screen.queryByText( 'giropay' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders Sepa payment method icon and label', () => {
-		render( <PaymentMethodIcon name="sepa_debit" showName /> );
-
-		const label = screen.queryByText( 'SEPA Direct Debit' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders Sofort payment method icon and label', () => {
-		render( <PaymentMethodIcon name="sofort" showName /> );
-
-		const label = screen.queryByText( 'Sofort' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders p24 payment method icon and label', () => {
-		render( <PaymentMethodIcon name="p24" showName /> );
-
-		const label = screen.queryByText( 'Przelewy24 (P24)' );
-		expect( label ).toBeInTheDocument();
-	} );
-
-	test( 'renders iDEAL payment method icon and label', () => {
-		render( <PaymentMethodIcon name="ideal" showName /> );
+	it( 'does not render the label, if not passed', () => {
+		render(
+			<PaymentMethodIcon Icon={ paymentMethodsMap.au_becs_debit.icon } />
+		);
 
-		const label = screen.queryByText( 'iDEAL' );
-		expect( label ).toBeInTheDocument();
+		expect(
+			screen.queryByText( 'BECS Direct Debit' )
+		).not.toBeInTheDocument();
 	} );
 
-	test( 'renders nothing when using an invalid icon name', () => {
-		const { container } = render( <PaymentMethodIcon name="wrong" /> );
+	it( "doesn't render anything, if the icon isn' provided", () => {
+		const { container } = render( <PaymentMethodIcon /> );
 
 		expect( container.firstChild ).toBeNull();
 	} );