add payment method components

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ExpressPaymentMethods from './express-payment-methods';
+
+const ExpressCheckoutContainer = ( { children } ) => {
+	return (
+		<div className="wc-component__checkout-container wc-component__container-with-border">
+			<div className="wc-component__text-overlay-on-border">
+				{ __( 'Express Checkout', 'woo-gutenberg-products-block' ) }
+			</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,38 @@
+/**
+ * External dependencies
+ */
+import { getExpressPaymentMethods } from '@woocommerce/blocks-registry';
+import { usePaymentData, usePaymentEvents } from '@woocommerce/base-hooks';
+
+const ExpressPaymentMethods = () => {
+	const [ paymentData ] = usePaymentData();
+	const { dispatch, select } = usePaymentEvents();
+	const paymentMethods = getExpressPaymentMethods();
+	const content =
+		paymentMethods.length > 0 ? (
+			Object.keys( paymentMethods ).map( ( slug ) => {
+				const ExpressPaymentMethod = paymentMethods[ slug ];
+				const paymentEvents = { dispatch, select };
+				return (
+					<li
+						key={ `paymentMethod_${ slug }` }
+						id={ `express-payment-method-${ slug }` }
+					>
+						<ExpressPaymentMethod
+							paymentData={ paymentData }
+							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,79 @@
+/**
+ * External dependencies
+ */
+import {
+	usePaymentData,
+	usePaymentEvents,
+	useActivePaymentMethod,
+} from '@woocommerce/base-hooks';
+import { getPaymentMethods } from '@woocommerce/blocks-registry';
+import { useCallback } from '@wordpress/element';
+import { find } from 'lodash';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Tabs from '../tabs';
+
+const createTabs = ( paymentMethods ) => {
+	return paymentMethods.map( ( { name, tab, ariaLabel } ) => {
+		return {
+			name,
+			title: tab,
+			ariaLabel,
+		};
+	} );
+};
+
+const paymentMethods = getPaymentMethods();
+
+const PaymentMethods = () => {
+	const [ paymentData ] = usePaymentData();
+	const { dispatch, select } = usePaymentEvents();
+	const {
+		activePaymentMethod,
+		setActivePaymentMethod,
+	} = useActivePaymentMethod();
+	const getRenderedTab = useCallback(
+		( selectedTab ) => {
+			const PaymentMethod = find( paymentMethods, { name: selectedTab } );
+			// @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
+					paymentData={ paymentData }
+					paymentEvents={ paymentEvents }
+				/>
+			);
+		},
+		[ paymentData, 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,19 @@
+.wc-component__container-with-border {
+	margin: auto;
+	border: 2px solid $gray-10;
+	border-radius: 5px;
+	padding: 10px;
+}
+
+.wc-component__container-with-border .wc-component__text-overlay-on-border {
+	position: relative;
+	top: -22px;
+	background-color: $white;
+	padding-left: $gap-small;
+	padding-right: $gap-small;
+	width: fit-content;
+}
+
+.wc-component__container-with-border .wc-component__container-content {
+	margin-top: -15px;
+}