Skip to content

Commit 6a8974d

Browse files
frossobrettshumaker
frosso
and
brettshumaker
authored
fix: PMs listed in disable confirmation modal (#8224)
Co-authored-by: Brett Shumaker <[email protected]>
1 parent 6a17f54 commit 6a8974d

File tree

8 files changed

+111
-119
lines changed

8 files changed

+111
-119
lines changed

‎changelog/fix-disable-confirmation-modal-payment-methods-list

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: patch
2+
Type: fix
3+
4+
fix: list of payment methods in disable confirmation modal

‎client/additional-methods-setup/upe-preview-methods-selector/setup-complete-task.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { useEnabledPaymentMethodIds } from '../../data';
1616
import WizardContext from '../wizard/wrapper/context';
1717
import PaymentMethodIcon from '../../settings/payment-method-icon';
1818
import './setup-complete-task.scss';
19+
import paymentMethodsMap from 'wcpay/payment-methods-map';
1920

2021
const SetupCompleteMessaging = () => {
2122
const [ enabledPaymentMethods ] = useEnabledPaymentMethodIds();
@@ -61,7 +62,9 @@ const EnabledMethodsList = () => {
6162
<ul className="wcpay-wizard-task__description-element setup-complete-task__enabled-methods-list">
6263
{ enabledPaymentMethods.map( ( methodId ) => (
6364
<li key={ methodId }>
64-
<PaymentMethodIcon name={ methodId } showName={ false } />
65+
<PaymentMethodIcon
66+
Icon={ paymentMethodsMap[ methodId ].icon }
67+
/>
6568
</li>
6669
) ) }
6770
</ul>

‎client/disable-confirmation-modal/index.js

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,30 @@ import interpolateComponents from '@automattic/interpolate-components';
1010
* Internal dependencies
1111
*/
1212
import './styles.scss';
13-
import { useGetAvailablePaymentMethodIds } from '../data';
13+
import {
14+
useEnabledPaymentMethodIds,
15+
usePaymentRequestEnabledSettings,
16+
useWooPayEnabledSettings,
17+
} from '../data';
1418
import PaymentMethodIcon from '../settings/payment-method-icon';
1519
import PaymentDeleteIllustration from '../components/payment-delete-illustration';
1620
import WooCardIcon from 'assets/images/cards/woo-card.svg?asset';
1721
import ConfirmationModal from '../components/confirmation-modal';
22+
import paymentMethodsMap from 'wcpay/payment-methods-map';
23+
import {
24+
ApplePayIcon,
25+
GooglePayIcon,
26+
LinkIcon,
27+
WooIcon,
28+
} from 'wcpay/payment-methods-icons';
1829

1930
const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
20-
const availablePaymentMethodIds = useGetAvailablePaymentMethodIds();
31+
const [ enabledMethodIds ] = useEnabledPaymentMethodIds();
32+
const [ isWooPayEnabled ] = useWooPayEnabledSettings();
33+
const [ isPaymentRequestEnabled ] = usePaymentRequestEnabledSettings();
34+
const isStripeLinkEnabled = Boolean(
35+
enabledMethodIds.find( ( id ) => id === 'link' )
36+
);
2137

2238
return (
2339
<ConfirmationModal
@@ -91,11 +107,57 @@ const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
91107
</strong>
92108
</p>
93109
<ul className="disable-confirmation-modal__payment-methods-list">
94-
{ availablePaymentMethodIds.map( ( methodId ) => (
95-
<li key={ methodId }>
96-
<PaymentMethodIcon name={ methodId } showName />
110+
{ enabledMethodIds
111+
.filter( ( methodId ) => methodId !== 'link' )
112+
.map( ( methodId ) => (
113+
<li key={ methodId }>
114+
<PaymentMethodIcon
115+
Icon={ paymentMethodsMap[ methodId ].icon }
116+
label={ paymentMethodsMap[ methodId ].label }
117+
/>
118+
</li>
119+
) ) }
120+
{ isPaymentRequestEnabled && (
121+
<>
122+
<li>
123+
<PaymentMethodIcon
124+
Icon={ GooglePayIcon }
125+
label={ __(
126+
'Google Pay',
127+
'woocommerce-payments'
128+
) }
129+
/>
130+
</li>
131+
<li>
132+
<PaymentMethodIcon
133+
Icon={ ApplePayIcon }
134+
label={ __(
135+
'Apple Pay',
136+
'woocommerce-payments'
137+
) }
138+
/>
139+
</li>
140+
</>
141+
) }
142+
{ isStripeLinkEnabled && (
143+
<li>
144+
<PaymentMethodIcon
145+
Icon={ LinkIcon }
146+
label={ __(
147+
'Link by Stripe',
148+
'woocommerce-payments'
149+
) }
150+
/>
97151
</li>
98-
) ) }
152+
) }
153+
{ isWooPayEnabled && (
154+
<li>
155+
<PaymentMethodIcon
156+
Icon={ WooIcon }
157+
label={ __( 'WooPay', 'woocommerce-payments' ) }
158+
/>
159+
</li>
160+
) }
99161
</ul>
100162
<p>
101163
{ interpolateComponents( {

‎client/disable-confirmation-modal/test/disable-confirmation-modal.test.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ import userEvent from '@testing-library/user-event';
1212
import DisableConfirmationModal from '..';
1313

1414
jest.mock( '../../data', () => ( {
15-
useGetAvailablePaymentMethodIds: jest.fn().mockReturnValue( [] ),
15+
useEnabledPaymentMethodIds: jest
16+
.fn()
17+
.mockReturnValue( [ [ 'card', 'giropay', 'link' ] ] ),
18+
useWooPayEnabledSettings: jest.fn().mockReturnValue( [ true ] ),
19+
usePaymentRequestEnabledSettings: jest.fn().mockReturnValue( [ true ] ),
1620
} ) );
1721

1822
describe( 'DisableConfirmationModal', () => {

‎client/multi-currency/multi-currency-settings/enabled-currencies-list/delete-button.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useCallback, useState } from '@wordpress/element';
99
import ConfirmationModal from 'wcpay/components/confirmation-modal';
1010
import CurrencyDeleteIllustration from 'wcpay/components/currency-delete-illustration';
1111
import PaymentMethodIcon from 'wcpay/settings/payment-method-icon';
12+
import paymentMethodsMap from 'wcpay/payment-methods-map';
1213

1314
const DeleteButton = ( { code, label, symbol, onClick, className } ) => {
1415
const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState(
@@ -100,8 +101,12 @@ const DeleteButton = ( { code, label, symbol, onClick, className } ) => {
100101
{ dependentPaymentMethods.map( ( paymentMethod ) => (
101102
<li key={ paymentMethod }>
102103
<PaymentMethodIcon
103-
name={ paymentMethod }
104-
showName
104+
Icon={
105+
paymentMethodsMap[ paymentMethod ].icon
106+
}
107+
label={
108+
paymentMethodsMap[ paymentMethod ].label
109+
}
105110
/>
106111
</li>
107112
) ) }

‎client/settings/general-settings/test/general-settings.test.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,22 @@ import { fireEvent, render, screen } from '@testing-library/react';
77
* Internal dependencies
88
*/
99
import GeneralSettings from '..';
10-
import {
11-
useDevMode,
12-
useIsWCPayEnabled,
13-
useTestMode,
14-
useGetAvailablePaymentMethodIds,
15-
} from 'wcpay/data';
10+
import { useDevMode, useIsWCPayEnabled, useTestMode } from 'wcpay/data';
1611

1712
jest.mock( 'wcpay/data', () => ( {
1813
useDevMode: jest.fn(),
1914
useIsWCPayEnabled: jest.fn(),
2015
useTestMode: jest.fn(),
21-
useGetAvailablePaymentMethodIds: jest.fn(),
16+
useEnabledPaymentMethodIds: jest.fn().mockReturnValue( [ [ 'card' ] ] ),
17+
useWooPayEnabledSettings: jest.fn().mockReturnValue( [ false ] ),
18+
usePaymentRequestEnabledSettings: jest.fn().mockReturnValue( [ false ] ),
2219
} ) );
2320

2421
describe( 'GeneralSettings', () => {
2522
beforeEach( () => {
2623
useDevMode.mockReturnValue( false );
2724
useIsWCPayEnabled.mockReturnValue( [ false, jest.fn() ] );
2825
useTestMode.mockReturnValue( [ false, jest.fn() ] );
29-
useGetAvailablePaymentMethodIds.mockReturnValue( [ 'card' ] );
3026
} );
3127

3228
it( 'renders', () => {

‎client/settings/payment-method-icon/index.js

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,9 @@ import classNames from 'classnames';
99
* Internal dependencies
1010
*/
1111
import './style.scss';
12-
import paymentMethodsMap from '../../payment-methods-map';
1312

14-
const PaymentMethodIcon = ( { name, showName } ) => {
15-
const paymentMethod = paymentMethodsMap[ name ];
16-
17-
if ( ! paymentMethod ) {
18-
return <></>;
19-
}
20-
21-
const { label, icon: Icon } = paymentMethod;
13+
const PaymentMethodIcon = ( { Icon, label } ) => {
14+
if ( ! Icon ) return null;
2215

2316
return (
2417
<span
@@ -27,7 +20,7 @@ const PaymentMethodIcon = ( { name, showName } ) => {
2720
) }
2821
>
2922
<Icon />
30-
{ showName && (
23+
{ label && (
3124
<span className="woocommerce-payments__payment-method-icon__label">
3225
{ label }
3326
</span>

‎client/settings/payment-method-icon/test/index.js

Lines changed: 16 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -9,108 +9,33 @@ import '@testing-library/jest-dom/extend-expect';
99
* Internal dependencies
1010
*/
1111
import PaymentMethodIcon from '..';
12+
import paymentMethodsMap from 'wcpay/payment-methods-map';
1213

1314
describe( 'PaymentMethodIcon', () => {
14-
test( 'renders BECS payment method icon', () => {
15+
it( 'renders BECS payment method icon', () => {
1516
const { container } = render(
16-
<PaymentMethodIcon name="au_becs_debit" />
17+
<PaymentMethodIcon
18+
Icon={ paymentMethodsMap.au_becs_debit.icon }
19+
label={ paymentMethodsMap.au_becs_debit.label }
20+
/>
1721
);
18-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
19-
} );
20-
21-
test( 'renders Bancontact payment method icon', () => {
22-
const { container } = render( <PaymentMethodIcon name="bancontact" /> );
23-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
24-
} );
25-
26-
test( 'renders EPS payment method icon', () => {
27-
const { container } = render( <PaymentMethodIcon name="eps" /> );
28-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
29-
} );
30-
31-
test( 'renders giropay payment method icon', () => {
32-
const { container } = render( <PaymentMethodIcon name="giropay" /> );
33-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
34-
} );
3522

36-
test( 'renders Sepa payment method icon', () => {
37-
const { container } = render( <PaymentMethodIcon name="sepa_debit" /> );
3823
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
24+
expect( screen.queryByText( 'BECS Direct Debit' ) ).toBeInTheDocument();
3925
} );
4026

41-
test( 'renders Sofort payment method icon', () => {
42-
const { container } = render( <PaymentMethodIcon name="sofort" /> );
43-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
44-
} );
45-
46-
test( 'renders p24 payment method icon', () => {
47-
const { container } = render( <PaymentMethodIcon name="p24" /> );
48-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
49-
} );
50-
51-
test( 'renders iDEAL payment method icon', () => {
52-
const { container } = render( <PaymentMethodIcon name="ideal" /> );
53-
expect( container.querySelector( 'img' ) ).toBeInTheDocument();
54-
} );
55-
56-
test( 'renders BECS payment method icon and label', () => {
57-
render( <PaymentMethodIcon name="au_becs_debit" showName /> );
58-
59-
const label = screen.queryByText( 'BECS Direct Debit' );
60-
expect( label ).toBeInTheDocument();
61-
} );
62-
63-
test( 'renders Bancontact payment method icon and label', () => {
64-
render( <PaymentMethodIcon name="bancontact" showName /> );
65-
66-
const label = screen.queryByText( 'Bancontact' );
67-
expect( label ).toBeInTheDocument();
68-
} );
69-
70-
test( 'renders EPS payment method icon and label', () => {
71-
render( <PaymentMethodIcon name="eps" showName /> );
72-
73-
const label = screen.queryByText( 'EPS' );
74-
expect( label ).toBeInTheDocument();
75-
} );
76-
77-
test( 'renders giropay payment method icon and label', () => {
78-
render( <PaymentMethodIcon name="giropay" showName /> );
79-
80-
const label = screen.queryByText( 'giropay' );
81-
expect( label ).toBeInTheDocument();
82-
} );
83-
84-
test( 'renders Sepa payment method icon and label', () => {
85-
render( <PaymentMethodIcon name="sepa_debit" showName /> );
86-
87-
const label = screen.queryByText( 'SEPA Direct Debit' );
88-
expect( label ).toBeInTheDocument();
89-
} );
90-
91-
test( 'renders Sofort payment method icon and label', () => {
92-
render( <PaymentMethodIcon name="sofort" showName /> );
93-
94-
const label = screen.queryByText( 'Sofort' );
95-
expect( label ).toBeInTheDocument();
96-
} );
97-
98-
test( 'renders p24 payment method icon and label', () => {
99-
render( <PaymentMethodIcon name="p24" showName /> );
100-
101-
const label = screen.queryByText( 'Przelewy24 (P24)' );
102-
expect( label ).toBeInTheDocument();
103-
} );
104-
105-
test( 'renders iDEAL payment method icon and label', () => {
106-
render( <PaymentMethodIcon name="ideal" showName /> );
27+
it( 'does not render the label, if not passed', () => {
28+
render(
29+
<PaymentMethodIcon Icon={ paymentMethodsMap.au_becs_debit.icon } />
30+
);
10731

108-
const label = screen.queryByText( 'iDEAL' );
109-
expect( label ).toBeInTheDocument();
32+
expect(
33+
screen.queryByText( 'BECS Direct Debit' )
34+
).not.toBeInTheDocument();
11035
} );
11136

112-
test( 'renders nothing when using an invalid icon name', () => {
113-
const { container } = render( <PaymentMethodIcon name="wrong" /> );
37+
it( "doesn't render anything, if the icon isn' provided", () => {
38+
const { container } = render( <PaymentMethodIcon /> );
11439

11540
expect( container.firstChild ).toBeNull();
11641
} );

0 commit comments

Comments
 (0)