Add payment method api and components to checkout steps

assets/js/base/components/payment-methods/express-checkout.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useExpressPaymentMethods } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import ExpressPaymentMethods from './express-payment-methods';
+
+import './style.scss';
+
+const ExpressCheckoutContainer = ( { children } ) => {
+	return (
+		<div className="wc-component__checkout-container wc-component__container-with-border">
+			<div className="wc-component__text-overlay-on-border">
+				<strong>
+					{ __( 'Express checkout', 'woo-gutenberg-products-block' ) }
+				</strong>
+			</div>
+			<div className="wc-component__container-content">{ children }</div>
+		</div>
+	);
+};
+
+const ExpressCheckoutFormControl = () => {
+	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
+
+	// determine whether we even show this
+	// @todo if in the editor we probably would want to show a placeholder maybe?
+	if (
+		! isInitialized ||
+		( isInitialized && Object.keys( paymentMethods ).length === 0 )
+	) {
+		return null;
+	}
+
+	return (
+		<ExpressCheckoutContainer>
+			<p>
+				{ __(
+					'In a hurry? Use one of our express checkout options below:',
+					'woo-gutenberg-products-block'
+				) }
+			</p>
+			<ExpressPaymentMethods />
+		</ExpressCheckoutContainer>
+	);
+};
+
+export default ExpressCheckoutFormControl;

assets/js/base/components/payment-methods/express-payment-methods.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import {
+	useCheckoutData,
+	usePaymentEvents,
+	useExpressPaymentMethods,
+} from '@woocommerce/base-hooks';
+import { cloneElement } from '@wordpress/element';
+
+const ExpressPaymentMethods = () => {
+	const [ checkoutData ] = useCheckoutData();
+	const { dispatch, select } = usePaymentEvents();
+	// not implementing isInitialized here because it's utilized further
+	// up in the tree for express payment methods. We won't even get here if
+	// there's no payment methods after initialization.
+	const { paymentMethods } = useExpressPaymentMethods();
+	const paymentMethodSlugs = Object.keys( paymentMethods );
+	const content =
+		paymentMethodSlugs.length > 0 ? (
+			paymentMethodSlugs.map( ( slug ) => {
+				const expressPaymentMethod =
+					paymentMethods[ slug ].activeContent;
+				const paymentEvents = { dispatch, select };
+				return (
+					<li key={ slug } id={ `express-payment-method-${ slug }` }>
+						{ cloneElement( expressPaymentMethod, {
+							checkoutData,
+							paymentEvents,
+						} ) }
+					</li>
+				);
+			} )
+		) : (
+			<li key="noneRegistered">No registered Payment Methods</li>
+		);
+	return (
+		<ul className="wc-component__express-payment-event-buttons">
+			{ content }
+		</ul>
+	);
+};
+
+export default ExpressPaymentMethods;

assets/js/base/components/payment-methods/index.js

@@ -0,0 +1,3 @@
+export { default as PaymentMethods } from './payment-methods';
+export { default as ExpressPaymentMethods } from './express-payment-methods';
+export { default as ExpressCheckoutFormControl } from './express-checkout';

assets/js/base/components/payment-methods/payment-methods.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import {
+	useCheckoutData,
+	usePaymentEvents,
+	useActivePaymentMethod,
+	usePaymentMethods,
+} from '@woocommerce/base-hooks';
+import { useCallback, cloneElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Tabs from '../tabs';
+
+const noPaymentMethodTab = () => {
+	const label = __( 'Not Existing', 'woo-gutenberg-products-block' );
+	return {
+		name: label,
+		label,
+		title: () => label,
+	};
+};
+
+const createTabs = ( paymentMethods ) => {
+	const paymentMethodsKeys = Object.keys( paymentMethods );
+	return paymentMethodsKeys.length > 0
+		? paymentMethodsKeys.map( ( key ) => {
+				const { label, ariaLabel } = paymentMethods[ key ];
+				return {
+					name: key,
+					title: () => label,
+					ariaLabel,
+				};
+		  } )
+		: [ noPaymentMethodTab() ];
+};
+
+const PaymentMethods = () => {
+	const [ checkoutData ] = useCheckoutData();
+	const { dispatch, select } = usePaymentEvents();
+	const { isInitialized, paymentMethods } = usePaymentMethods();
+	const {
+		activePaymentMethod,
+		setActivePaymentMethod,
+	} = useActivePaymentMethod();
+	const getRenderedTab = useCallback(
+		() => ( selectedTab ) => {
+			const paymentMethod =
+				( paymentMethods[ selectedTab ] &&
+					paymentMethods[ selectedTab ].activeContent ) ||
+				null;
+			const paymentEvents = { dispatch, select };
+			return paymentMethod
+				? cloneElement( paymentMethod, {
+						isActive: true,
+						checkoutData,
+						paymentEvents,
+				  } )
+				: null;
+		},
+		[ checkoutData, dispatch, select ]
+	);
+	if (
+		! isInitialized ||
+		( Object.keys( paymentMethods ).length === 0 && isInitialized )
+	) {
+		// @todo this can be a placeholder informing the user there are no
+		// payment methods setup?
+		return <div>No Payment Methods Initialized</div>;
+	}
+	return (
+		<Tabs
+			className="wc-component__payment-method-options"
+			onSelect={ ( tabName ) => setActivePaymentMethod( tabName ) }
+			tabs={ createTabs( paymentMethods ) }
+			initialTabName={ activePaymentMethod }
+			ariaLabel={ __(
+				'Payment Methods',
+				'woo-gutenberg-products-block'
+			) }
+		>
+			{ getRenderedTab() }
+		</Tabs>
+	);
+};
+
+export default PaymentMethods;

assets/js/base/components/payment-methods/style.scss

@@ -0,0 +1,38 @@
+.wc-component__container-with-border {
+	margin: auto;
+	border: 2px solid $black;
+	border-radius: 5px;
+	padding: 10px;
+	margin-bottom: $gap-large;
+
+	.wc-component__text-overlay-on-border {
+		position: relative;
+		top: -24px;
+		background-color: $white;
+		padding-left: $gap-small;
+		padding-right: $gap-small;
+		width: fit-content;
+		color: $black;
+	}
+
+	.wc-component__container-content {
+		margin-top: -15px;
+		padding-left: $gap-large;
+		padding-right: $gap-large;
+		padding-bottom: $gap;
+	}
+
+	.wc-component__express-payment-event-buttons {
+		list-style: none;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		> li {
+			display: inline-block;
+			width: 50%;
+		}
+	}
+}

assets/js/base/components/tabs/index.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import { useState } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const TabButton = ( {
+	tabId,
+	onClick,
+	children,
+	selected,
+	ariaLabel,
+	...rest
+} ) => {
+	return (
+		<button
+			role="tab"
+			type="button"
+			tabIndex={ selected ? null : -1 }
+			aria-selected={ selected }
+			aria-label={ ariaLabel }
+			id={ tabId }
+			onClick={ onClick }
+			{ ...rest }
+		>
+			<span className="wc-component__tab-item-content">{ children }</span>
+		</button>
+	);
+};
+
+const Tabs = ( {
+	className,
+	onSelect = () => null,
+	tabs,
+	activeClass = 'is-active',
+	initialTabName,
+	instanceId,
+	ariaLabel = __( 'Tabbed Content', 'woo-gutenberg-products-block' ),
+	children,
+} ) => {
+	const [ selected, setSelected ] = useState(
+		initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : '' )
+	);
+	if ( ! selected ) {
+		return null;
+	}
+	const handleClick = ( tabKey ) => {
+		setSelected( tabKey );
+		onSelect( tabKey );
+	};
+	const selectedTab = tabs.find( ( tab ) => tab.name === selected );
+	if ( ! selectedTab ) {
+		throw new Error( 'There is no available tab for the selected item' );
+	}
+	const selectedId = `${ instanceId }-${ selectedTab.name }`;
+	return (
+		<div className={ classnames( 'wc-component__tabs', className ) }>
+			<div
+				role="tablist"
+				aria-label={ ariaLabel }
+				className="wc-component__tab-list"
+			>
+				{ tabs.map( ( tab ) => (
+					<TabButton
+						className={ classnames(
+							'wc-component__tab-item',
+							tab.className,
+							{
+								[ activeClass ]: tab.name === selected,
+							}
+						) }
+						tabId={ `${ instanceId }-${ tab.name }` }
+						aria-controls={ `${ instanceId }-${ tab.name }-view` }
+						selected={ tab.name === selected }
+						key={ tab.name }
+						ariaLabel={ tab.ariaLabel || null }
+						onClick={ () => handleClick( tab.name ) }
+					>
+						{ tab.title() }
+					</TabButton>
+				) ) }
+			</div>
+			{ selectedTab && (
+				<div
+					aria-labelledby={ selectedId }
+					role="tabpanel"
+					id={ `${ selectedId }-view` }
+					className="wc-component__tab-content"
+					tabIndex="0"
+				>
+					{ children( selected ) }
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default withInstanceId( Tabs );

assets/js/base/components/tabs/style.scss

@@ -0,0 +1,35 @@
+.wc-component__tabs {
+	.wc-component__tab-list {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 100%;
+		> .wc-component__tab-item {
+			border: none;
+			flex: auto;
+			background: transparent;
+			padding: $gap-small $gap;
+			color: $black;
+			outline-offset: -1px;
+			transition: box-shadow 0.1s linear;
+			&.is-active {
+				box-shadow: inset 0 -3px $black;
+				font-weight: 600;
+				position: relative;
+			}
+			&:focus {
+				color: $black;
+				outline-offset: -1px;
+				outline: 1px dotted $gray-60;
+			}
+			.wc-component__tab-item-content {
+				width: fit-content;
+				display: block;
+				margin: auto;
+			}
+		}
+	}
+	.wc-component__tab-content {
+		padding: $gap;
+	}
+}