Skip to content

Commit 1b0a5ce

Browse files
frossofrosso
committed
feat: Amazon Pay settings UI
1 parent 87a381e commit 1b0a5ce

File tree

10 files changed

+380
-0
lines changed

10 files changed

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