feat: Amazon Pay settings UI

changelog/feat-amazon-pay-settings-ui

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: feat: add Amazon Pay settings UI behind feature flag
+
+

client/globals.d.ts

@@ -35,6 +35,7 @@ declare global {
 			isFRTReviewFeatureActive: boolean;
 			isDynamicCheckoutPlaceOrderButtonEnabled: boolean;
 			isAccountDetailsEnabled: boolean;
+			amazonPay: boolean;
 		};
 		accountFees: Record< string, any >;
 		fraudServices: unknown[];

client/payment-methods-icons.tsx

@@ -21,6 +21,7 @@ import DiscoverAsset from 'assets/images/cards/discover.svg?asset';
 import CBAsset from 'assets/images/cards/cb.svg?asset';
 import UnionPayAsset from 'assets/images/cards/unionpay.svg?asset';
 import LinkAsset from 'assets/images/payment-methods/link.svg?asset';
+import AmazonPayAsset from 'assets/images/payment-methods/amazon-pay.svg?asset';
 import './style.scss';
 
 const iconComponent = (
@@ -40,6 +41,10 @@ const iconComponent = (
 	/>
 );
 
+export const AmazonPayIcon = iconComponent(
+	AmazonPayAsset,
+	__( 'Amazon Pay', 'woocommerce-payments' )
+);
 export const AmericanExpressIcon = iconComponent(
 	AmexAsset,
 	__( 'American Express', 'woocommerce-payments' )

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

@@ -0,0 +1,188 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CardBody from '../card-body';
+import {
+	Card,
+	CheckboxControl,
+	BaseControl,
+	RadioControl,
+} from '@wordpress/components';
+import { usePaymentRequestButtonSize } from 'wcpay/data';
+import interpolateComponents from '@automattic/interpolate-components';
+
+const makeButtonSizeText = ( string ) =>
+	interpolateComponents( {
+		mixedString: string,
+		components: {
+			helpText: (
+				<span className="payment-method-settings__option-muted-text" />
+			),
+		},
+	} );
+
+const buttonSizeOptions = [
+	{
+		label: makeButtonSizeText(
+			__(
+				'Small {{helpText}}(40 px){{/helpText}}',
+				'woocommerce-payments'
+			)
+		),
+		value: 'small',
+	},
+	{
+		label: makeButtonSizeText(
+			__(
+				'Medium {{helpText}}(48 px){{/helpText}}',
+				'woocommerce-payments'
+			)
+		),
+		value: 'medium',
+	},
+	{
+		label: makeButtonSizeText(
+			__(
+				'Large {{helpText}}(55 px){{/helpText}}',
+				'woocommerce-payments'
+			)
+		),
+		value: 'large',
+	},
+];
+
+const GeneralSettings = () => {
+	const [ size, setSize ] = usePaymentRequestButtonSize();
+
+	return (
+		<CardBody className="wcpay-card-body">
+			<RadioControl
+				label={ __( 'Button size', 'woocommerce-payments' ) }
+				selected={ size }
+				options={ buttonSizeOptions }
+				onChange={ setSize }
+			/>
+		</CardBody>
+	);
+};
+
+const AmazonPaySettings = ( { section } ) => {
+	const [ isAmazonPayEnabled, setIsAmazonPayEnabled ] = useState( false );
+	const [ amazonPayLocations, setAmazonPayLocations ] = useState( [
+		'product',
+		'cart',
+		'checkout',
+	] );
+
+	const makeLocationChangeHandler = ( location ) => ( isChecked ) => {
+		if ( isChecked ) {
+			setAmazonPayLocations( [ ...amazonPayLocations, location ] );
+		} else {
+			setAmazonPayLocations(
+				amazonPayLocations.filter( ( name ) => name !== location )
+			);
+		}
+	};
+
+	return (
+		<Card>
+			{ section === 'enable' && (
+				<CardBody className="wcpay-card-body">
+					<div className="wcpay-payment-request-settings__enable">
+						<CheckboxControl
+							className="wcpay-payment-request-settings__enable__checkbox"
+							checked={ isAmazonPayEnabled }
+							onChange={ setIsAmazonPayEnabled }
+							label={ __(
+								'Enable Amazon Pay as an express payment button',
+								'woocommerce-payments'
+							) }
+							help={ __(
+								'Show Amazon Pay button on store pages for faster purchases. ' +
+									'Customers with Amazon accounts can use their stored payment information.',
+								'woocommerce-payments'
+							) }
+							__nextHasNoMarginBottom
+						/>
+						{ /* eslint-disable-next-line @wordpress/no-base-control-with-label-without-id */ }
+						<BaseControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+						>
+							<ul className="payment-request-settings__location">
+								<li>
+									<CheckboxControl
+										disabled={ ! isAmazonPayEnabled }
+										checked={
+											isAmazonPayEnabled &&
+											amazonPayLocations.includes(
+												'product'
+											)
+										}
+										onChange={ makeLocationChangeHandler(
+											'product'
+										) }
+										label={ __(
+											'Show on product page',
+											'woocommerce-payments'
+										) }
+										__nextHasNoMarginBottom
+									/>
+								</li>
+								<li>
+									<CheckboxControl
+										disabled={ ! isAmazonPayEnabled }
+										checked={
+											isAmazonPayEnabled &&
+											amazonPayLocations.includes(
+												'cart'
+											)
+										}
+										onChange={ makeLocationChangeHandler(
+											'cart'
+										) }
+										label={ __(
+											'Show on cart page',
+											'woocommerce-payments'
+										) }
+										__nextHasNoMarginBottom
+									/>
+								</li>
+								<li>
+									<CheckboxControl
+										disabled={ ! isAmazonPayEnabled }
+										checked={
+											isAmazonPayEnabled &&
+											amazonPayLocations.includes(
+												'checkout'
+											)
+										}
+										onChange={ makeLocationChangeHandler(
+											'checkout'
+										) }
+										label={ __(
+											'Show on checkout page',
+											'woocommerce-payments'
+										) }
+										__nextHasNoMarginBottom
+									/>
+								</li>
+							</ul>
+						</BaseControl>
+					</div>
+				</CardBody>
+			) }
+
+			{ section === 'general' && <GeneralSettings type="amazon" /> }
+		</Card>
+	);
+};
+
+export default AmazonPaySettings;

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

@@ -12,11 +12,13 @@ import './index.scss';
 import SettingsSection from '../settings-section';
 import PaymentRequestSettings from './payment-request-settings';
 import WooPaySettings from './woopay-settings';
+import AmazonPaySettings from './amazon-pay-settings';
 import SettingsLayout from '../settings-layout';
 import LoadableSettingsSection from '../loadable-settings-section';
 import SaveSettingsSection from '../save-settings-section';
 import ErrorBoundary from '../../components/error-boundary';
 import {
+	AmazonPayIcon,
 	ApplePayIcon,
 	GooglePayIcon,
 	WooIcon,
@@ -110,6 +112,42 @@ const methods = {
 		],
 		controls: ( props ) => <PaymentRequestSettings { ...props } />,
 	},
+	amazon_pay: {
+		title: 'Amazon Pay',
+		sections: [
+			{
+				section: 'enable',
+				description: () => (
+					<>
+						<div className="express-checkout-settings__icon">
+							<AmazonPayIcon />
+						</div>
+						<p>
+							{ __(
+								'Allow your customers to collect payments via Amazon Pay.',
+								'woocommerce-payments'
+							) }
+						</p>
+					</>
+				),
+			},
+			{
+				section: 'general',
+				description: () => (
+					<>
+						<h2>{ __( 'Settings', 'woocommerce-payments' ) }</h2>
+						<p>
+							{ __(
+								'Configure the display of Amazon Pay buttons on your store.',
+								'woocommerce-payments'
+							) }
+						</p>
+					</>
+				),
+			},
+		],
+		controls: ( props ) => <AmazonPaySettings { ...props } />,
+	},
 };
 
 const ExpressCheckoutSettings = ( { methodId } ) => {

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

@@ -225,4 +225,44 @@ describe( 'ExpressCheckout', () => {
 			)
 		).toBeInTheDocument();
 	} );
+
+	it( 'should render Amazon Pay when the feature flag is enabled', () => {
+		const context = {
+			accountStatus: {},
+			featureFlags: { woopay: true, amazonPay: true },
+		};
+		useGetAvailablePaymentMethodIds.mockReturnValue( [ 'link', 'card' ] );
+		useEnabledPaymentMethodIds.mockReturnValue( [ [ 'card' ] ] );
+
+		render(
+			<WCPaySettingsContext.Provider value={ context }>
+				<ExpressCheckout />
+			</WCPaySettingsContext.Provider>
+		);
+
+		expect( screen.getByLabelText( 'Amazon Pay' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'WooPay' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Link by Stripe' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not render Amazon Pay by default', () => {
+		const context = {
+			accountStatus: {},
+			featureFlags: { woopay: true },
+		};
+		useGetAvailablePaymentMethodIds.mockReturnValue( [ 'link', 'card' ] );
+		useEnabledPaymentMethodIds.mockReturnValue( [ [ 'card' ] ] );
+
+		render(
+			<WCPaySettingsContext.Provider value={ context }>
+				<ExpressCheckout />
+			</WCPaySettingsContext.Provider>
+		);
+
+		expect(
+			screen.queryByLabelText( 'Amazon Pay' )
+		).not.toBeInTheDocument();
+		expect( screen.getByLabelText( 'WooPay' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Link by Stripe' ) ).toBeInTheDocument();
+	} );
 } );