Skip to content

Commit 79a2190

Browse files
frossofrosso
committed
feat: add amazon pay settings storage
1 parent 325a46d commit 79a2190

File tree

13 files changed

+466
-68
lines changed

13 files changed

+466
-68
lines changed

‎changelog/feat-amazon-pay-settings-storage‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: patch
2+
Type: add
3+
4+
feat: add Amazon Pay settings storage

‎client/data/settings/actions.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,10 @@ export function updateIsWooPayEnabled( isEnabled ) {
223223
return updateSettingsValues( { is_woopay_enabled: isEnabled } );
224224
}
225225

226+
export function updateIsAmazonPayEnabled( isEnabled ) {
227+
return updateSettingsValues( { is_amazon_pay_enabled: isEnabled } );
228+
}
229+
226230
export function updateIsWooPayGlobalThemeSupportEnabled( isEnabled ) {
227231
return updateSettingsValues( {
228232
is_woopay_global_theme_support_enabled: isEnabled,

‎client/data/settings/hooks.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,26 @@ export const useWooPayStoreLogo = () => {
569569
*/
570570
export const useWooPayLocations = makeExpressCheckoutLocationHook( 'woopay' );
571571

572+
/**
573+
* @return {import('wcpay/types/wcpay-data-settings-hooks').GenericSettingsHook<boolean>}
574+
*/
575+
export const useAmazonPayEnabledSettings = () => {
576+
const { updateIsAmazonPayEnabled } = useDispatch( STORE_NAME );
577+
578+
const isAmazonPayEnabled = useSelect( ( select ) =>
579+
select( STORE_NAME ).getIsAmazonPayEnabled()
580+
);
581+
582+
return [ isAmazonPayEnabled, updateIsAmazonPayEnabled ];
583+
};
584+
585+
/**
586+
* @return {import('wcpay/types/wcpay-data-settings-hooks').GenericSettingsHook<string[]>}
587+
*/
588+
export const useAmazonPayLocations = makeExpressCheckoutLocationHook(
589+
'amazon_pay'
590+
);
591+
572592
/**
573593
* @return {import('wcpay/types/wcpay-data-settings-hooks').GenericSettingsHook<string>}
574594
*/

‎client/data/settings/selectors.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,10 @@ export const getIsWooPayEnabled = ( state ) => {
186186
return getSettings( state ).is_woopay_enabled || false;
187187
};
188188

189+
export const getIsAmazonPayEnabled = ( state ) => {
190+
return getSettings( state ).is_amazon_pay_enabled || false;
191+
};
192+
189193
export const getIsWooPayGlobalThemeSupportEnabled = ( state ) => {
190194
return getSettings( state ).is_woopay_global_theme_support_enabled || false;
191195
};

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import React from 'react';
4+
import React, { useContext } from 'react';
55
import { Button } from '@wordpress/components';
66
import { __, sprintf } from '@wordpress/i18n';
77
import interpolateComponents from '@automattic/interpolate-components';
@@ -11,6 +11,7 @@ import interpolateComponents from '@automattic/interpolate-components';
1111
*/
1212
import './styles.scss';
1313
import {
14+
useAmazonPayEnabledSettings,
1415
useEnabledPaymentMethodIds,
1516
usePaymentRequestEnabledSettings,
1617
useWooPayEnabledSettings,
@@ -21,14 +22,19 @@ import WooCardIcon from 'assets/images/cards/woo-card.svg?asset';
2122
import ConfirmationModal from '../components/confirmation-modal';
2223
import paymentMethodsMap from 'wcpay/payment-methods-map';
2324
import { WooIconShort } from 'wcpay/payment-methods-icons';
25+
import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
2426

2527
const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
2628
const [ enabledMethodIds ] = useEnabledPaymentMethodIds();
2729
const [ isWooPayEnabled ] = useWooPayEnabledSettings();
2830
const [ isPaymentRequestEnabled ] = usePaymentRequestEnabledSettings();
31+
const [ isAmazonPayEnabled ] = useAmazonPayEnabledSettings();
2932
const isStripeLinkEnabled = Boolean(
3033
enabledMethodIds.find( ( id ) => id === 'link' )
3134
);
35+
const {
36+
featureFlags: { amazonPay: isAmazonPayFeatureFlagEnabled },
37+
} = useContext( WCPaySettingsContext );
3238

3339
return (
3440
<ConfirmationModal
@@ -116,6 +122,14 @@ const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
116122
</li>
117123
</>
118124
) }
125+
{ isAmazonPayEnabled && isAmazonPayFeatureFlagEnabled && (
126+
<li>
127+
<PaymentMethodIcon
128+
Icon={ paymentMethodsMap.amazon_pay.icon }
129+
label={ paymentMethodsMap.amazon_pay.label }
130+
/>
131+
</li>
132+
) }
119133
{ isStripeLinkEnabled && (
120134
<li>
121135
<PaymentMethodIcon

‎client/settings/express-checkout-settings/__tests__/amazon-pay-settings.test.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { render, screen } from '@testing-library/react';
5+
import userEvent from '@testing-library/user-event';
6+
7+
/**
8+
* Internal dependencies
9+
*/
10+
import AmazonPaySettings from '../amazon-pay-settings';
11+
import { useAmazonPayEnabledSettings, useAmazonPayLocations } from 'wcpay/data';
12+
13+
jest.mock( 'wcpay/data', () => ( {
14+
useAmazonPayEnabledSettings: jest.fn(),
15+
useAmazonPayLocations: jest.fn(),
16+
usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'medium' ] ),
17+
} ) );
18+
19+
describe( 'AmazonPaySettings', () => {
20+
beforeEach( () => {
21+
useAmazonPayEnabledSettings.mockReturnValue( [ true, jest.fn() ] );
22+
useAmazonPayLocations.mockReturnValue( [
23+
[ 'product', 'cart', 'checkout' ],
24+
jest.fn(),
25+
] );
26+
} );
27+
28+
it( 'triggers the update handler when the enable checkbox is clicked', async () => {
29+
const updateIsAmazonPayEnabledHandler = jest.fn();
30+
useAmazonPayEnabledSettings.mockReturnValue( [
31+
true,
32+
updateIsAmazonPayEnabledHandler,
33+
] );
34+
35+
render( <AmazonPaySettings section="enable" /> );
36+
37+
expect( updateIsAmazonPayEnabledHandler ).not.toHaveBeenCalled();
38+
39+
expect(
40+
screen.getByLabelText(
41+
'Enable Amazon Pay as an express payment button'
42+
)
43+
).toBeChecked();
44+
45+
userEvent.click(
46+
screen.getByLabelText(
47+
'Enable Amazon Pay as an express payment button'
48+
)
49+
);
50+
51+
expect( updateIsAmazonPayEnabledHandler ).toHaveBeenCalledWith( false );
52+
} );
53+
54+
it( 'renders location checkboxes as checked when locations are enabled', () => {
55+
useAmazonPayLocations.mockReturnValue( [
56+
[ 'product', 'cart', 'checkout' ],
57+
jest.fn(),
58+
] );
59+
60+
render( <AmazonPaySettings section="enable" /> );
61+
62+
expect(
63+
screen.getByLabelText( 'Show on checkout page' )
64+
).toBeChecked();
65+
expect( screen.getByLabelText( 'Show on product page' ) ).toBeChecked();
66+
expect( screen.getByLabelText( 'Show on cart page' ) ).toBeChecked();
67+
} );
68+
69+
it( 'renders location checkboxes as unchecked when locations are disabled', () => {
70+
useAmazonPayLocations.mockReturnValue( [ [], jest.fn() ] );
71+
72+
render( <AmazonPaySettings section="enable" /> );
73+
74+
expect(
75+
screen.getByLabelText( 'Show on checkout page' )
76+
).not.toBeChecked();
77+
expect(
78+
screen.getByLabelText( 'Show on product page' )
79+
).not.toBeChecked();
80+
expect(
81+
screen.getByLabelText( 'Show on cart page' )
82+
).not.toBeChecked();
83+
} );
84+
85+
it( 'disables location checkboxes when Amazon Pay is disabled', () => {
86+
useAmazonPayEnabledSettings.mockReturnValue( [ false, jest.fn() ] );
87+
88+
render( <AmazonPaySettings section="enable" /> );
89+
90+
expect(
91+
screen.getByLabelText(
92+
'Enable Amazon Pay as an express payment button'
93+
)
94+
).not.toBeChecked();
95+
expect(
96+
screen.getByLabelText( 'Show on checkout page' )
97+
).toBeDisabled();
98+
expect(
99+
screen.getByLabelText( 'Show on product page' )
100+
).toBeDisabled();
101+
expect( screen.getByLabelText( 'Show on cart page' ) ).toBeDisabled();
102+
} );
103+
104+
it( 'triggers the location update handler when location checkboxes are clicked', async () => {
105+
const updateAmazonPayLocationsHandler = jest.fn();
106+
useAmazonPayLocations.mockReturnValue( [
107+
[ 'product' ],
108+
updateAmazonPayLocationsHandler,
109+
] );
110+
111+
render( <AmazonPaySettings section="enable" /> );
112+
113+
expect( updateAmazonPayLocationsHandler ).not.toHaveBeenCalled();
114+
115+
userEvent.click( screen.getByLabelText( 'Show on checkout page' ) );
116+
expect( updateAmazonPayLocationsHandler ).toHaveBeenLastCalledWith(
117+
'checkout',
118+
true
119+
);
120+
121+
userEvent.click( screen.getByLabelText( 'Show on product page' ) );
122+
expect( updateAmazonPayLocationsHandler ).toHaveBeenLastCalledWith(
123+
'product',
124+
false
125+
);
126+
127+
userEvent.click( screen.getByLabelText( 'Show on cart page' ) );
128+
expect( updateAmazonPayLocationsHandler ).toHaveBeenLastCalledWith(
129+
'cart',
130+
true
131+
);
132+
} );
133+
134+
it( 'renders general settings section with button size options', () => {
135+
render( <AmazonPaySettings section="general" /> );
136+
137+
expect( screen.queryByText( 'Button size' ) ).toBeInTheDocument();
138+
139+
const radioButtons = screen.queryAllByRole( 'radio' );
140+
expect( radioButtons ).toHaveLength( 3 );
141+
} );
142+
} );

‎client/settings/express-checkout-settings/amazon-pay-settings.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import React, { useState } from 'react';
4+
import React from 'react';
55
import { __ } from '@wordpress/i18n';
66

77
/**
@@ -14,8 +14,13 @@ import {
1414
BaseControl,
1515
RadioControl,
1616
} from '@wordpress/components';
17-
import { usePaymentRequestButtonSize } from 'wcpay/data';
17+
import {
18+
usePaymentRequestButtonSize,
19+
useAmazonPayEnabledSettings,
20+
useAmazonPayLocations,
21+
} from 'wcpay/data';
1822
import interpolateComponents from '@automattic/interpolate-components';
23+
import ExpressCheckoutSettingsNotices from './express-checkout-settings-notices';
1924

2025
const makeButtonSizeText = ( string ) =>
2126
interpolateComponents( {
@@ -62,6 +67,7 @@ const GeneralSettings = () => {
6267

6368
return (
6469
<CardBody className="wcpay-card-body">
70+
<ExpressCheckoutSettingsNotices currentMethod="amazon_pay" />
6571
<RadioControl
6672
label={ __( 'Button size', 'woocommerce-payments' ) }
6773
selected={ size }
@@ -73,21 +79,17 @@ const GeneralSettings = () => {
7379
};
7480

7581
const AmazonPaySettings = ( { section } ) => {
76-
const [ isAmazonPayEnabled, setIsAmazonPayEnabled ] = useState( false );
77-
const [ amazonPayLocations, setAmazonPayLocations ] = useState( [
78-
'product',
79-
'cart',
80-
'checkout',
81-
] );
82+
const [
83+
isAmazonPayEnabled,
84+
updateIsAmazonPayEnabled,
85+
] = useAmazonPayEnabledSettings();
86+
const [
87+
amazonPayLocations,
88+
updateAmazonPayLocations,
89+
] = useAmazonPayLocations();
8290

8391
const makeLocationChangeHandler = ( location ) => ( isChecked ) => {
84-
if ( isChecked ) {
85-
setAmazonPayLocations( [ ...amazonPayLocations, location ] );
86-
} else {
87-
setAmazonPayLocations(
88-
amazonPayLocations.filter( ( name ) => name !== location )
89-
);
90-
}
92+
updateAmazonPayLocations( location, isChecked );
9193
};
9294

9395
return (
@@ -98,7 +100,7 @@ const AmazonPaySettings = ( { section } ) => {
98100
<CheckboxControl
99101
className="wcpay-payment-request-settings__enable__checkbox"
100102
checked={ isAmazonPayEnabled }
101-
onChange={ setIsAmazonPayEnabled }
103+
onChange={ updateIsAmazonPayEnabled }
102104
label={ __(
103105
'Enable Amazon Pay as an express payment button',
104106
'woocommerce-payments'

0 commit comments

Comments
 (0)