Add/1427 style woopay express checkout button (#5153)

Author: brettshumaker

changelog/add-1427-style-woopay-express-checkout-button

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Updating the styling of the WooPay Express Checkout button which is currently behind a feature flag and not yet available to the public.
+
+

client/checkout/platform-checkout/express-button/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import ReactDOM from 'react-dom';
+
+/**
+ * Internal dependencies
+ */
+import { WoopayExpressCheckoutButton } from './woopay-express-checkout-button';
+
+const renderPlatformCheckoutExpressButton = () => {
+	const platformCheckoutContainer = document.getElementById(
+		'wcpay-platform-checkout-button'
+	);
+
+	if ( platformCheckoutContainer ) {
+		ReactDOM.render(
+			<WoopayExpressCheckoutButton
+				buttonSettings={ global.wcpayWooPayExpressParams.button }
+			/>,
+			platformCheckoutContainer
+		);
+	}
+};
+
+window.addEventListener( 'load', () => {
+	renderPlatformCheckoutExpressButton();
+} );

client/checkout/platform-checkout/express-button/woopay-express-checkout-button.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import WoopayIcon from './woopay-icon';
+
+export const WoopayExpressCheckoutButton = ( {
+	isPreview = false,
+	buttonSettings,
+} ) => {
+	const { type: buttonType, text, height, size, theme } = buttonSettings;
+
+	const initPlatformCheckout = ( e ) => {
+		e.preventDefault();
+
+		if ( isPreview ) {
+			return; // eslint-disable-line no-useless-return
+		}
+
+		// Add buton functionality.
+	};
+
+	return (
+		<button
+			key={ `${ buttonType }-${ theme }-${ size }` }
+			onClick={ initPlatformCheckout }
+			className="woopay-express-button"
+			data-type={ buttonType }
+			data-size={ size }
+			data-theme={ theme }
+			style={ { height: `${ height }px` } }
+		>
+			{ 'default' !== buttonType
+				? sprintf( __( `%s with`, 'woocommerce-payments' ), text )
+				: '' }
+			<WoopayIcon />
+		</button>
+	);
+};

client/checkout/platform-checkout/express-button/woopay-icon.js

@@ -121,3 +121,77 @@
 		}
 	}
 }
+
+.woopay-express-button {
+	font-size: 20px;
+	font-weight: normal;
+	font-family: 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial',
+		sans-serif;
+	line-height: 42px;
+	background: $white;
+	border: 1px solid $white;
+	color: $studio-woocommerce-purple-60;
+	width: 100%;
+	border-radius: 4px;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	svg {
+		fill: $studio-woocommerce-purple-60;
+		position: relative;
+		top: 1px;
+	}
+
+	&[data-theme='dark'] {
+		background: $studio-woocommerce-purple-60;
+		color: $white;
+
+		svg {
+			fill: $white;
+		}
+	}
+
+	&[data-theme='light-outline'] {
+		border-color: $studio-woocommerce-purple-60;
+	}
+
+	&[data-size='medium'] {
+		font-size: 25px;
+		line-height: 48px;
+
+		svg {
+			top: 2px;
+			width: auto;
+			height: 27px;
+		}
+	}
+
+	&[data-size='large'] {
+		font-size: 29px;
+		line-height: 56px;
+
+		svg {
+			top: 3px;
+			width: auto;
+			height: 32px;
+		}
+	}
+
+	&[data-type='buy'],
+	&[data-type='book'],
+	&[data-type='donate'] {
+		svg {
+			margin-left: 8px;
+		}
+
+		&[data-size='medium'],
+		&[data-size='large'] {
+			svg {
+				margin-left: 10px;
+			}
+		}
+	}
+}

client/checkout/platform-checkout/style.scss

@@ -134,21 +134,25 @@
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 42px;
-	background: #fff;
-	border: 1px solid #fff;
-	color: $studio-woocommerce-purple-70;
+	background: $white;
+	border: 1px solid $white;
+	color: $studio-woocommerce-purple-60;
 	width: 100%;
 	border-radius: 4px;
 	padding-top: 1px;
 	padding-bottom: 1px;
 
 	&[class*='dark'] {
-		background: $studio-woocommerce-purple-70;
-		color: #fff;
+		background: $studio-woocommerce-purple-60;
+		color: $white;
+
+		svg {
+			fill: $white;
+		}
 	}
 
 	&[class*='outline'] {
-		border-color: $studio-woocommerce-purple-70;
+		border-color: $studio-woocommerce-purple-60;
 	}
 
 	&[class*='medium'] {
@@ -160,4 +164,8 @@
 		font-size: 32px;
 		line-height: 56px;
 	}
+
+	svg {
+		fill: $studio-woocommerce-purple-60;
+	}
 }

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

@@ -27,7 +27,7 @@ import {
 	usePlatformCheckoutButtonTheme,
 	usePlatformCheckoutLocations,
 } from 'wcpay/data';
-import PlatformCheckoutButtonPreview from './platform-checkout-button-preview';
+import { WoopayExpressCheckoutButton } from 'wcpay/checkout/platform-checkout/express-button/woopay-express-checkout-button';
 
 const CUSTOM_MESSAGE_MAX_LENGTH = 100;
 
@@ -167,6 +167,43 @@ const PlatformCheckoutSettings = ( { section } ) => {
 		}
 	};
 
+	const getButtonSettings = () => {
+		let text = '';
+		switch ( buttonType ) {
+			case 'buy':
+				text = 'Buy';
+				break;
+			case 'donate':
+				text = 'Donate';
+				break;
+			case 'book':
+				text = 'Book';
+				break;
+			default:
+				text = '';
+		}
+
+		let height = 0;
+		switch ( size ) {
+			case 'medium':
+				height = 48;
+				break;
+			case 'large':
+				height = 56;
+				break;
+			default:
+				height = 40;
+		}
+
+		return {
+			type: buttonType,
+			text,
+			theme,
+			height,
+			size,
+		};
+	};
+
 	return (
 		<div className="platform-checkout-settings">
 			{ 'enable' === section && (
@@ -345,7 +382,10 @@ const PlatformCheckoutSettings = ( { section } ) => {
 							onChange={ setTheme }
 						/>
 						<p>{ __( 'Preview', 'woocommerce-payments' ) }</p>
-						<PlatformCheckoutButtonPreview />
+						<WoopayExpressCheckoutButton
+							isPreview={ true }
+							buttonSettings={ getButtonSettings() }
+						/>
 					</CardBody>
 				</Card>
 			) }

client/settings/express-checkout-settings/platform-checkout-button-preview.js

@@ -10,7 +10,6 @@ import { render, screen, within } from '@testing-library/react';
  */
 import ExpressCheckoutSettings from '..';
 import PaymentRequestButtonPreview from '../payment-request-button-preview';
-import PlatformCheckoutButtonPreview from '../platform-checkout-button-preview';
 
 jest.mock( '../../../data', () => ( {
 	useSettings: jest.fn().mockReturnValue( {} ),
@@ -47,9 +46,6 @@ jest.mock( '@wordpress/data', () => ( {
 jest.mock( '../payment-request-button-preview' );
 PaymentRequestButtonPreview.mockImplementation( () => '<></>' );
 
-jest.mock( '../platform-checkout-button-preview' );
-PlatformCheckoutButtonPreview.mockImplementation( () => '<></>' );
-
 jest.mock( '@stripe/react-stripe-js', () => ( {
 	Elements: jest.fn().mockReturnValue( null ),
 } ) );