add payment method wrapper components

These implement whatever payment methods are registered.

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

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * 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 = () => {
+	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,39 @@
+/**
+ * External dependencies
+ */
+import { getExpressPaymentMethods } from '@woocommerce/blocks-registry';
+import { useCheckoutData, usePaymentEvents } from '@woocommerce/base-hooks';
+
+const ExpressPaymentMethods = () => {
+	const [ checkoutData ] = useCheckoutData();
+	const { dispatch, select } = usePaymentEvents();
+	const paymentMethods = getExpressPaymentMethods();
+	const paymentMethodSlugs = Object.keys( paymentMethods );
+	const content =
+		paymentMethodSlugs.length > 0 ? (
+			paymentMethodSlugs.map( ( slug ) => {
+				const ExpressPaymentMethod = paymentMethods[ slug ];
+				const paymentEvents = { dispatch, select };
+				return (
+					<li
+						key={ `paymentMethod_${ slug }` }
+						id={ `express-payment-method-${ slug }` }
+					>
+						<ExpressPaymentMethod
+							checkoutData={ checkoutData }
+							paymentEvents={ 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,94 @@
+/**
+ * External dependencies
+ */
+import {
+	useCheckoutData,
+	usePaymentEvents,
+	useActivePaymentMethod,
+} from '@woocommerce/base-hooks';
+import { getPaymentMethods } from '@woocommerce/blocks-registry';
+import { useCallback } 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 { tab, ariaLabel } = paymentMethods[ key ];
+				return {
+					name: key,
+					title: tab,
+					ariaLabel,
+				};
+		  } )
+		: [ noPaymentMethodTab() ];
+};
+
+const paymentMethods = getPaymentMethods();
+
+const PaymentMethods = () => {
+	const [ checkoutData ] = useCheckoutData();
+	const { dispatch, select } = usePaymentEvents();
+	const {
+		activePaymentMethod,
+		setActivePaymentMethod,
+	} = useActivePaymentMethod();
+	const getRenderedTab = useCallback(
+		() => ( selectedTab ) => {
+			const PaymentMethod =
+				( paymentMethods[ selectedTab ] &&
+					paymentMethods[ selectedTab ].content ) ||
+				null;
+			// @todo if undefined return placeholder for no registered payment methods
+			if ( ! PaymentMethod ) {
+				return (
+					<p>
+						{ __(
+							'No payment methods setup',
+							'woo-gutenberg-products-block'
+						) }
+					</p>
+				);
+			}
+			const paymentEvents = { dispatch, select };
+			return (
+				<PaymentMethod
+					isActive
+					checkoutData={ checkoutData }
+					paymentEvents={ paymentEvents }
+				/>
+			);
+		},
+		[ checkoutData, dispatch, select ]
+	);
+	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: calc(100% / 2);
+		}
+	}
+}