Skip to content

Commit 679f804

Browse files
frossofrosso
authored
feat: Amazon Pay settings UI (#11132)
1 parent 1a6502e commit 679f804

File tree

10 files changed

+379
-0
lines changed

10 files changed

+379
-0
lines changed

‎assets/images/payment-methods/amazon-pay.svg‎

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Significance: patch
2+
Type: dev
3+
Comment: feat: add Amazon Pay settings UI behind feature flag
4+
5+

‎client/globals.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ declare global {
3535
isFRTReviewFeatureActive: boolean;
3636
isDynamicCheckoutPlaceOrderButtonEnabled: boolean;
3737
isAccountDetailsEnabled: boolean;
38+
amazonPay: boolean;
3839
};
3940
accountFees: Record< string, any >;
4041
fraudServices: unknown[];

‎client/payment-methods-icons.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import DiscoverAsset from 'assets/images/cards/discover.svg?asset';
2121
import CBAsset from 'assets/images/cards/cb.svg?asset';
2222
import UnionPayAsset from 'assets/images/cards/unionpay.svg?asset';
2323
import LinkAsset from 'assets/images/payment-methods/link.svg?asset';
24+
import AmazonPayAsset from 'assets/images/payment-methods/amazon-pay.svg?asset';
2425
import './style.scss';
2526

2627
const iconComponent = (
@@ -40,6 +41,10 @@ const iconComponent = (
4041
/>
4142
);
4243

44+
export const AmazonPayIcon = iconComponent(
45+
AmazonPayAsset,
46+
__( 'Amazon Pay', 'woocommerce-payments' )
47+
);
4348
export const AmericanExpressIcon = iconComponent(
4449
AmexAsset,
4550
__( 'American Express', 'woocommerce-payments' )

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

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import React, { useState } from 'react';
5+
import { __ } from '@wordpress/i18n';
6+
7+
/**
8+
* Internal dependencies
9+
*/
10+
import CardBody from '../card-body';
11+
import {
12+
Card,
13+
CheckboxControl,
14+
BaseControl,
15+
RadioControl,
16+
} from '@wordpress/components';
17+
import { usePaymentRequestButtonSize } from 'wcpay/data';
18+
import interpolateComponents from '@automattic/interpolate-components';
19+
20+
const makeButtonSizeText = ( string ) =>
21+
interpolateComponents( {
22+
mixedString: string,
23+
components: {
24+
helpText: (
25+
<span className="payment-method-settings__option-muted-text" />
26+
),
27+
},
28+
} );
29+
30+
const buttonSizeOptions = [
31+
{
32+
label: makeButtonSizeText(
33+
__(
34+
'Small {{helpText}}(40 px){{/helpText}}',
35+
'woocommerce-payments'
36+
)
37+
),
38+
value: 'small',
39+
},
40+
{
41+
label: makeButtonSizeText(
42+
__(
43+
'Medium {{helpText}}(48 px){{/helpText}}',
44+
'woocommerce-payments'
45+
)
46+
),
47+
value: 'medium',
48+
},
49+
{
50+
label: makeButtonSizeText(
51+
__(
52+
'Large {{helpText}}(55 px){{/helpText}}',
53+
'woocommerce-payments'
54+
)
55+
),
56+
value: 'large',
57+
},
58+
];
59+
60+
const GeneralSettings = () => {
61+
const [ size, setSize ] = usePaymentRequestButtonSize();
62+
63+
return (
64+
<CardBody className="wcpay-card-body">
65+
<RadioControl
66+
label={ __( 'Button size', 'woocommerce-payments' ) }
67+
selected={ size }
68+
options={ buttonSizeOptions }
69+
onChange={ setSize }
70+
/>
71+
</CardBody>
72+
);
73+
};
74+
75+
const AmazonPaySettings = ( { section } ) => {
76+
const [ isAmazonPayEnabled, setIsAmazonPayEnabled ] = useState( false );
77+
const [ amazonPayLocations, setAmazonPayLocations ] = useState( [
78+
'product',
79+
'cart',
80+
'checkout',
81+
] );
82+
83+
const makeLocationChangeHandler = ( location ) => ( isChecked ) => {
84+
if ( isChecked ) {
85+
setAmazonPayLocations( [ ...amazonPayLocations, location ] );
86+
} else {
87+
setAmazonPayLocations(
88+
amazonPayLocations.filter( ( name ) => name !== location )
89+
);
90+
}
91+
};
92+
93+
return (
94+
<Card>
95+
{ section === 'enable' && (
96+
<CardBody className="wcpay-card-body">
97+
<div className="wcpay-payment-request-settings__enable">
98+
<CheckboxControl
99+
className="wcpay-payment-request-settings__enable__checkbox"
100+
checked={ isAmazonPayEnabled }
101+
onChange={ setIsAmazonPayEnabled }
102+
label={ __(
103+
'Enable Amazon Pay as an express payment button',
104+
'woocommerce-payments'
105+
) }
106+
help={ __(
107+
'Show Amazon Pay button on store pages for faster purchases. ' +
108+
'Customers with Amazon accounts can use their stored payment information.',
109+
'woocommerce-payments'
110+
) }
111+
__nextHasNoMarginBottom
112+
/>
113+
{ /* eslint-disable-next-line @wordpress/no-base-control-with-label-without-id */ }
114+
<BaseControl
115+
__next40pxDefaultSize
116+
__nextHasNoMarginBottom
117+
>
118+
<ul className="payment-request-settings__location">
119+
<li>
120+
<CheckboxControl
121+
disabled={ ! isAmazonPayEnabled }
122+
checked={
123+
isAmazonPayEnabled &&
124+
amazonPayLocations.includes(
125+
'product'
126+
)
127+
}
128+
onChange={ makeLocationChangeHandler(
129+
'product'
130+
) }
131+
label={ __(
132+
'Show on product page',
133+
'woocommerce-payments'
134+
) }
135+
__nextHasNoMarginBottom
136+
/>
137+
</li>
138+
<li>
139+
<CheckboxControl
140+
disabled={ ! isAmazonPayEnabled }
141+
checked={
142+
isAmazonPayEnabled &&
143+
amazonPayLocations.includes(
144+
'cart'
145+
)
146+
}
147+
onChange={ makeLocationChangeHandler(
148+
'cart'
149+
) }
150+
label={ __(
151+
'Show on cart page',
152+
'woocommerce-payments'
153+
) }
154+
__nextHasNoMarginBottom
155+
/>
156+
</li>
157+
<li>
158+
<CheckboxControl
159+
disabled={ ! isAmazonPayEnabled }
160+
checked={
161+
isAmazonPayEnabled &&
162+
amazonPayLocations.includes(
163+
'checkout'
164+
)
165+
}
166+
onChange={ makeLocationChangeHandler(
167+
'checkout'
168+
) }
169+
label={ __(
170+
'Show on checkout page',
171+
'woocommerce-payments'
172+
) }
173+
__nextHasNoMarginBottom
174+
/>
175+
</li>
176+
</ul>
177+
</BaseControl>
178+
</div>
179+
</CardBody>
180+
) }
181+
182+
{ section === 'general' && <GeneralSettings /> }
183+
</Card>
184+
);
185+
};
186+
187+
export default AmazonPaySettings;

‎client/settings/express-checkout-settings/index.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ import './index.scss';
1212
import SettingsSection from '../settings-section';
1313
import PaymentRequestSettings from './payment-request-settings';
1414
import WooPaySettings from './woopay-settings';
15+
import AmazonPaySettings from './amazon-pay-settings';
1516
import SettingsLayout from '../settings-layout';
1617
import LoadableSettingsSection from '../loadable-settings-section';
1718
import SaveSettingsSection from '../save-settings-section';
1819
import ErrorBoundary from '../../components/error-boundary';
1920
import {
21+
AmazonPayIcon,
2022
ApplePayIcon,
2123
GooglePayIcon,
2224
WooIcon,
@@ -110,6 +112,42 @@ const methods = {
110112
],
111113
controls: ( props ) => <PaymentRequestSettings { ...props } />,
112114
},
115+
amazon_pay: {
116+
title: 'Amazon Pay',
117+
sections: [
118+
{
119+
section: 'enable',
120+
description: () => (
121+
<>
122+
<div className="express-checkout-settings__icon">
123+
<AmazonPayIcon />
124+
</div>
125+
<p>
126+
{ __(
127+
'Allow your customers to collect payments via Amazon Pay.',
128+
'woocommerce-payments'
129+
) }
130+
</p>
131+
</>
132+
),
133+
},
134+
{
135+
section: 'general',
136+
description: () => (
137+
<>
138+
<h2>{ __( 'Settings', 'woocommerce-payments' ) }</h2>
139+
<p>
140+
{ __(
141+
'Configure the display of Amazon Pay buttons on your store.',
142+
'woocommerce-payments'
143+
) }
144+
</p>
145+
</>
146+
),
147+
},
148+
],
149+
controls: ( props ) => <AmazonPaySettings { ...props } />,
150+
},
113151
};
114152

115153
const ExpressCheckoutSettings = ( { methodId } ) => {

‎client/settings/express-checkout/__tests__/index.test.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,4 +225,44 @@ describe( 'ExpressCheckout', () => {
225225
)
226226
).toBeInTheDocument();
227227
} );
228+
229+
it( 'should render Amazon Pay when the feature flag is enabled', () => {
230+
const context = {
231+
accountStatus: {},
232+
featureFlags: { woopay: true, amazonPay: true },
233+
};
234+
useGetAvailablePaymentMethodIds.mockReturnValue( [ 'link', 'card' ] );
235+
useEnabledPaymentMethodIds.mockReturnValue( [ [ 'card' ] ] );
236+
237+
render(
238+
<WCPaySettingsContext.Provider value={ context }>
239+
<ExpressCheckout />
240+
</WCPaySettingsContext.Provider>
241+
);
242+
243+
expect( screen.getByLabelText( 'Amazon Pay' ) ).toBeInTheDocument();
244+
expect( screen.getByLabelText( 'WooPay' ) ).toBeInTheDocument();
245+
expect( screen.getByLabelText( 'Link by Stripe' ) ).toBeInTheDocument();
246+
} );
247+
248+
it( 'should not render Amazon Pay by default', () => {
249+
const context = {
250+
accountStatus: {},
251+
featureFlags: { woopay: true },
252+
};
253+
useGetAvailablePaymentMethodIds.mockReturnValue( [ 'link', 'card' ] );
254+
useEnabledPaymentMethodIds.mockReturnValue( [ [ 'card' ] ] );
255+
256+
render(
257+
<WCPaySettingsContext.Provider value={ context }>
258+
<ExpressCheckout />
259+
</WCPaySettingsContext.Provider>
260+
);
261+
262+
expect(
263+
screen.queryByLabelText( 'Amazon Pay' )
264+
).not.toBeInTheDocument();
265+
expect( screen.getByLabelText( 'WooPay' ) ).toBeInTheDocument();
266+
expect( screen.getByLabelText( 'Link by Stripe' ) ).toBeInTheDocument();
267+
} );
228268
} );

0 commit comments

Comments
 (0)