Add digital wallet settings fields (#1822)

Automattic · May 19, 2021 · 0d9035b · 0d9035b
1 parent 0a614ce
commit 0d9035b
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 13 deletions.
diff --git a/client/settings/payment-method-settings/digital-wallets-settings.js b/client/settings/payment-method-settings/digital-wallets-settings.js
@@ -2,13 +2,120 @@
 /**
  * External dependencies
  */
-import { Card, CardBody } from '@wordpress/components';
+import React, { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Button, Card, CardBody, RadioControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './index.scss';
 
 const DigitalWalletsSettings = () => {
+	const [ cta, setCta ] = useState( 'buy' );
+	const [ size, setSize ] = useState( 'default' );
+	const [ theme, setTheme ] = useState( 'dark' );
+
 	return (
-		<Card>
-			<CardBody>Digital Wallets placeholder.</CardBody>
-		</Card>
+		<>
+			<Card>
+				<CardBody>
+					<h4>{ __( 'Call to action', 'woocommerce-payments' ) }</h4>
+					<RadioControl
+						help={ __(
+							'Select a button label that fits best with the flow of purchase or payment experience on your store.',
+							'woocommerce-payments'
+						) }
+						selected={ cta }
+						options={ [
+							{
+								label: __(
+									'Only icon',
+									'woocommerce-payments'
+								),
+								value: 'only-icon',
+							},
+							{
+								label: __( 'Buy', 'woocommerce-payments' ),
+								value: 'buy',
+							},
+							{
+								label: __( 'Donate', 'woocommerce-payments' ),
+								value: 'donate',
+							},
+							{
+								label: __( 'Book', 'woocommerce-payments' ),
+								value: 'book',
+							},
+						] }
+						onChange={ setCta }
+					/>
+					<h4>{ __( 'Appearance', 'woocommerce-payments' ) }</h4>
+					<RadioControl
+						help={ __(
+							'Note that larger buttons are more suitable for mobile use.',
+							'woocommerce-payments'
+						) }
+						label={ __( 'Size', 'woocommerce-payments' ) }
+						selected={ size }
+						options={ [
+							{
+								label: __(
+									'Default (40 px)',
+									'woocommerce-payments'
+								),
+								value: 'default',
+							},
+							{
+								label: __(
+									'Medium (48 px)',
+									'woocommerce-payments'
+								),
+								value: 'medium',
+							},
+							{
+								label: __(
+									'Large (56 px)',
+									'woocommerce-payments'
+								),
+								value: 'large',
+							},
+						] }
+						onChange={ setSize }
+					/>
+					<RadioControl
+						help={ __(
+							// eslint-disable-next-line max-len
+							'Dark is recommended for white or light-colored backgrounds and light is recommended for dark or colored backgrounds.',
+							'woocommerce-payments'
+						) }
+						label={ __( 'Theme', 'woocommerce-payments' ) }
+						selected={ theme }
+						options={ [
+							{
+								label: __( 'Dark', 'woocommerce-payments' ),
+								value: 'dark',
+							},
+							{
+								label: __( 'Light', 'woocommerce-payments' ),
+								value: 'light',
+							},
+						] }
+						onChange={ setTheme }
+					/>
+				</CardBody>
+			</Card>
+			<div className="woocommerce-payments_digital-wallets__action">
+				<Button
+					isPrimary
+					onClick={ () => {
+						return false;
+					} }
+				>
+					{ __( 'Save changes', 'woocommerce-payments' ) }
+				</Button>
+			</div>
+		</>
 	);
 };
 

diff --git a/client/settings/payment-method-settings/index.js b/client/settings/payment-method-settings/index.js
@@ -1,5 +1,9 @@
 /** @format */
+/**
+ * External dependencies
+ */
 import { __ } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -25,12 +29,32 @@ const methods = {
 		controls: () => <GiropaySettings />,
 	},
 	woocommerce_payments_digital_wallets: {
-		title: 'Digital wallets & express payment methods',
+		title: '1-click checkouts',
 		description: () => (
 			<>
-				{ /* Whoever picks this up will need to translate these strings */ }
-				<h2>Digital wallets &amp; saved cards</h2>
-				<p>digital wallets description.</p>
+				<h2>{ __( '1-click checkouts', 'woocommerce-payments' ) }</h2>
+				<p>
+					{ __(
+						'Decide how buttons for digital wallets like Apple Pay and Google Pay are displayed in your store.',
+						'woocommerce-payments'
+					) }
+				</p>
+				<p>
+					<ExternalLink href="https://developer.apple.com/design/human-interface-guidelines/apple-pay/overview/introduction/">
+						{ __(
+							'View Apple Pay Guidelines',
+							'woocommerce-payments'
+						) }
+					</ExternalLink>
+				</p>
+				<p>
+					<ExternalLink href="https://developers.google.com/pay/api/web/guides/brand-guidelines">
+						{ __(
+							'View Google Pay Guidelines',
+							'woocommerce-payments'
+						) }
+					</ExternalLink>
+				</p>
 			</>
 		),
 		controls: () => <DigitalWalletsSettings />,

diff --git a/client/settings/payment-method-settings/index.scss b/client/settings/payment-method-settings/index.scss
@@ -5,3 +5,12 @@
 #wcpay-payment-method-settings-container {
 	margin-top: 24px;
 }
+
+.components-radio-control__input[type='radio']:checked::before {
+	box-sizing: border-box;
+}
+
+.woocommerce-payments_digital-wallets__action {
+	margin-top: 2em;
+	float: right;
+}
diff --git a/client/settings/payment-method-settings/test/digital-wallets-settings.js b/client/settings/payment-method-settings/test/digital-wallets-settings.js
@@ -11,11 +11,25 @@ import { render, screen } from '@testing-library/react';
 import DigitalWalletsSettings from '../digital-wallets-settings';
 
 describe( 'DigitalWalletsSettings', () => {
-	test( 'renders settings', () => {
+	test( 'renders settings with defaults', () => {
 		render( <DigitalWalletsSettings /> );
 
-		expect(
-			screen.queryByText( 'Digital Wallets placeholder.' )
-		).toBeInTheDocument();
+		// confirm settings headings
+		expect( screen.queryByText( 'Call to action' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Appearance' ) ).toBeInTheDocument();
+
+		// confirm radio button groups displayed
+		const [ ctaRadio, sizeRadio, themeRadio ] = screen.getAllByRole(
+			'radio'
+		);
+
+		expect( ctaRadio ).toBeInTheDocument();
+		expect( sizeRadio ).toBeInTheDocument();
+		expect( themeRadio ).toBeInTheDocument();
+
+		// confirm default values
+		expect( screen.getByLabelText( 'Buy' ) ).toBeChecked();
+		expect( screen.getByLabelText( 'Default (40 px)' ) ).toBeChecked();
+		expect( screen.getByLabelText( 'Dark' ) ).toBeChecked();
 	} );
 } );
diff --git a/client/settings/payment-method-settings/test/index.js b/client/settings/payment-method-settings/test/index.js
@@ -59,7 +59,7 @@ describe( 'PaymentMethodSettings', () => {
 		);
 
 		const heading = screen.queryByRole( 'heading', {
-			name: 'Digital wallets & saved cards',
+			name: '1-click checkouts',
 		} );
 		expect( heading ).toBeInTheDocument();
 	} );