From c4a6dae6e413d8761c3fec02b2fd45c6e3b9b9fd Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 12:59:45 +0100
Subject: [PATCH 01/32] Separate button spinner to separate component for reuse

---
 packages/checkout/button/index.tsx   |  9 +++----
 packages/checkout/button/style.scss  | 40 +---------------------------
 packages/checkout/index.js           |  1 +
 packages/checkout/spinner/index.tsx  | 10 +++++++
 packages/checkout/spinner/style.scss | 37 +++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 45 deletions(-)
 create mode 100644 packages/checkout/spinner/index.tsx
 create mode 100644 packages/checkout/spinner/style.scss

diff --git a/packages/checkout/button/index.tsx b/packages/checkout/button/index.tsx
index 11e5d040300..bbf8cbd8283 100644
--- a/packages/checkout/button/index.tsx
+++ b/packages/checkout/button/index.tsx
@@ -4,10 +4,12 @@
 import { Button as WPButton } from 'wordpress-components';
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
+import Spinner from '../spinner';
 
 interface ButtonProps extends WPButton.ButtonProps {
 	className?: string;
@@ -35,12 +37,7 @@ const Button = ( {
 
 	return (
 		<WPButton className={ buttonClassName } { ...props }>
-			{ showSpinner && (
-				<span
-					className="wc-block-components-button__spinner"
-					aria-hidden="true"
-				/>
-			) }
+			{ showSpinner && <Spinner /> }
 			<span className="wc-block-components-button__text">
 				{ children }
 			</span>
diff --git a/packages/checkout/button/style.scss b/packages/checkout/button/style.scss
index 87fe932804d..a5ab1601f69 100644
--- a/packages/checkout/button/style.scss
+++ b/packages/checkout/button/style.scss
@@ -29,45 +29,7 @@
 			fill: currentColor;
 		}
 	}
-	.wc-block-components-button__spinner {
-		width: 1em;
-		height: 1em;
-		position: absolute;
-		top: 50%;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		margin-top: -0.5em;
-		color: inherit;
-		box-sizing: content-box;
-
-		&::after {
-			content: " ";
-			display: inline-block;
-			margin: 0 auto;
-			width: 1em;
-			height: 1em;
-			box-sizing: border-box;
-			transform-origin: 50% 50%;
-			transform: translateZ(0) scale(0.5);
-			backface-visibility: hidden;
-			border-radius: 50%;
-			border: 0.2em solid currentColor;
-			border-left-color: transparent;
-			animation: wc-block-components-button__spinner__animation 1s infinite linear;
-		}
-	}
-	.wc-block-components-button__spinner + .wc-block-components-button__text {
+	.wc-block-components-spinner + .wc-block-components-button__text {
 		visibility: hidden;
 	}
 }
-
-@keyframes wc-block-components-button__spinner__animation {
-	0% {
-		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
diff --git a/packages/checkout/index.js b/packages/checkout/index.js
index ef127425a8d..382947bcc8b 100644
--- a/packages/checkout/index.js
+++ b/packages/checkout/index.js
@@ -8,4 +8,5 @@ export { default as ExperimentalOrderShippingPackages } from './order-shipping-p
 export { default as Panel } from './panel';
 export { SlotFillProvider } from 'wordpress-components';
 export { default as Button } from './button';
+export { default as Spinner } from './spinner';
 export { default as Label } from './label';
diff --git a/packages/checkout/spinner/index.tsx b/packages/checkout/spinner/index.tsx
new file mode 100644
index 00000000000..51df32df25c
--- /dev/null
+++ b/packages/checkout/spinner/index.tsx
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Spinner = (): JSX.Element => {
+	return <span className="wc-block-components-spinner" aria-hidden="true" />;
+};
+
+export default Spinner;
diff --git a/packages/checkout/spinner/style.scss b/packages/checkout/spinner/style.scss
new file mode 100644
index 00000000000..f17e2ea8a96
--- /dev/null
+++ b/packages/checkout/spinner/style.scss
@@ -0,0 +1,37 @@
+.wc-block-components-spinner {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	color: inherit;
+	box-sizing: content-box;
+	text-align: center;
+	font-size: 1.25em;
+
+	&::after {
+		content: " ";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin: -0.5em 0 0 -0.5em;
+		width: 1em;
+		height: 1em;
+		box-sizing: border-box;
+		transform-origin: 50% 50%;
+		transform: translateZ(0) scale(0.5);
+		backface-visibility: hidden;
+		border-radius: 50%;
+		border: 0.2em solid currentColor;
+		border-left-color: transparent;
+		animation: wc-block-components-spinner__animation 1s infinite linear;
+	}
+}
+
+@keyframes wc-block-components-spinner__animation {
+	0% {
+		animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

From df3a5db0ac80f9471c38b3f60fb72f13417b4248 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 13:00:05 +0100
Subject: [PATCH 02/32] Use block checkout spinner in loading mask

---
 assets/js/base/components/loading-mask/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/base/components/loading-mask/index.js b/assets/js/base/components/loading-mask/index.js
index 1d3daf44b4a..b38df5f5cdb 100644
--- a/assets/js/base/components/loading-mask/index.js
+++ b/assets/js/base/components/loading-mask/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Spinner } from 'wordpress-components';
+import { Spinner } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies

From 8046fbb82f67d4bfb03e8d1c8793f0f9d729baff Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 13:00:25 +0100
Subject: [PATCH 03/32] Block pointer events within loading mask

---
 assets/js/base/components/loading-mask/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/js/base/components/loading-mask/style.scss b/assets/js/base/components/loading-mask/style.scss
index 11aedd02d7b..65197bad9ff 100644
--- a/assets/js/base/components/loading-mask/style.scss
+++ b/assets/js/base/components/loading-mask/style.scss
@@ -1,6 +1,7 @@
 .wc-block-components-loading-mask {
 	position: relative;
 	min-height: 18px + $gap;
+	pointer-events: none;
 
 	.components-spinner {
 		position: absolute;
@@ -12,5 +13,5 @@
 }
 
 .wc-block-components-loading-mask__children {
-	opacity: 0.5;
+	opacity: 0.25;
 }

From b89adac2f179caf97a98630b3323b85d3eddae4f Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:25:22 +0100
Subject: [PATCH 04/32] Give the useRef within useShallowEqual a default value

This prevents the potential of having an undefined value returned.
---
 assets/js/base/hooks/use-shallow-equal.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/assets/js/base/hooks/use-shallow-equal.ts b/assets/js/base/hooks/use-shallow-equal.ts
index d3e2e1910e7..a2536f181bd 100644
--- a/assets/js/base/hooks/use-shallow-equal.ts
+++ b/assets/js/base/hooks/use-shallow-equal.ts
@@ -13,12 +13,11 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  *
  * @param {*} value Value to keep the same if satisfies shallow equality.
  *
- * @return {*} The previous cached instance of the value if the current has
- *                 shallow equality with it.
+ * @return {*} The previous cached instance of the value if the current has  shallow equality with it.
  */
-export function useShallowEqual< T >( value: T ): T | undefined {
-	const ref = useRef< T >();
-	if ( ref.current === undefined || ! isShallowEqual( value, ref.current ) ) {
+export function useShallowEqual< T >( value: T ): T {
+	const ref = useRef< T >( value );
+	if ( ! isShallowEqual( value, ref.current ) ) {
 		ref.current = value;
 	}
 	return ref.current;

From 2a45339011ca7e942566f9d0cb07cb492d53a2db Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:25:58 +0100
Subject: [PATCH 05/32] State setter and dispatch are stable

These do not need to be used as dependencies.
---
 .../payment-method-data-context.tsx           | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index 03e641ab51b..cc55bd06eb3 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -129,32 +129,26 @@ export const PaymentMethodDataProvider = ( {
 				paymentMethodSlug,
 			} );
 		},
-		[ setActive, dispatch, dispatchCheckoutEvent ]
+		[ dispatchCheckoutEvent ]
 	);
 
 	const paymentMethodsDispatcher = useCallback<
 		PaymentMethodsDispatcherType
-	>(
-		( paymentMethods ) => {
-			dispatch(
-				setRegisteredPaymentMethods( paymentMethods as PaymentMethods )
-			);
-		},
-		[ dispatch ]
-	);
+	>( ( paymentMethods ) => {
+		dispatch(
+			setRegisteredPaymentMethods( paymentMethods as PaymentMethods )
+		);
+	}, [] );
 
 	const expressPaymentMethodsDispatcher = useCallback<
 		PaymentMethodsDispatcherType
-	>(
-		( paymentMethods ) => {
-			dispatch(
-				setRegisteredExpressPaymentMethods(
-					paymentMethods as PaymentMethods
-				)
-			);
-		},
-		[ dispatch ]
-	);
+	>( ( paymentMethods ) => {
+		dispatch(
+			setRegisteredExpressPaymentMethods(
+				paymentMethods as PaymentMethods
+			)
+		);
+	}, [] );
 
 	const paymentMethodsInitialized = usePaymentMethods(
 		paymentMethodsDispatcher
@@ -167,12 +161,9 @@ export const PaymentMethodDataProvider = ( {
 	const { setValidationErrors } = useValidationContext();
 	const { addErrorNotice, removeNotice } = useStoreNotices();
 	const { setShippingAddress } = useShippingDataContext();
-	const setShouldSavePayment = useCallback(
-		( shouldSave ) => {
-			dispatch( setShouldSavePaymentMethod( shouldSave ) );
-		},
-		[ dispatch ]
-	);
+	const setShouldSavePayment = useCallback( ( shouldSave ) => {
+		dispatch( setShouldSavePaymentMethod( shouldSave ) );
+	}, [] );
 
 	const customerPaymentMethods = useMemo( (): CustomerPaymentMethods => {
 		if ( isEditor ) {

From aaefe62a62c00f45b25cdb626bce521436b2bb09 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:26:53 +0100
Subject: [PATCH 06/32] Prevent re-renders of children when using loading mask.

This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place.
---
 .../js/base/components/loading-mask/index.js  | 24 +++++++++----------
 .../base/components/loading-mask/style.scss   |  8 +++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/assets/js/base/components/loading-mask/index.js b/assets/js/base/components/loading-mask/index.js
index b38df5f5cdb..d1a1ec15168 100644
--- a/assets/js/base/components/loading-mask/index.js
+++ b/assets/js/base/components/loading-mask/index.js
@@ -18,29 +18,29 @@ const LoadingMask = ( {
 	showSpinner = false,
 	isLoading = true,
 } ) => {
-	// If nothing is loading, just pass through the children.
-	if ( ! isLoading ) {
-		return children;
-	}
-
 	return (
 		<div
 			className={ classNames(
 				className,
-				'wc-block-components-loading-mask'
+				'wc-block-components-loading-mask',
+				{
+					'is-loading': isLoading,
+				}
 			) }
 		>
-			{ showSpinner && <Spinner /> }
+			{ isLoading && showSpinner && <Spinner /> }
 			<div
 				className="wc-block-components-loading-mask__children"
-				aria-hidden={ true }
+				aria-hidden={ isLoading }
 			>
 				{ children }
 			</div>
-			<span className="screen-reader-text">
-				{ screenReaderLabel ||
-					__( 'Loading…', 'woo-gutenberg-products-block' ) }
-			</span>
+			{ isLoading && (
+				<span className="screen-reader-text">
+					{ screenReaderLabel ||
+						__( 'Loading…', 'woo-gutenberg-products-block' ) }
+				</span>
+			) }
 		</div>
 	);
 };
diff --git a/assets/js/base/components/loading-mask/style.scss b/assets/js/base/components/loading-mask/style.scss
index 65197bad9ff..66bab5f46c8 100644
--- a/assets/js/base/components/loading-mask/style.scss
+++ b/assets/js/base/components/loading-mask/style.scss
@@ -1,4 +1,4 @@
-.wc-block-components-loading-mask {
+.wc-block-components-loading-mask.is-loading {
 	position: relative;
 	min-height: 18px + $gap;
 	pointer-events: none;
@@ -10,8 +10,8 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-}
 
-.wc-block-components-loading-mask__children {
-	opacity: 0.25;
+	.wc-block-components-loading-mask__children {
+		opacity: 0.25;
+	}
 }

From 1a473763a4abd99e1b3f50020f7d08872919886b Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:41:48 +0100
Subject: [PATCH 07/32] Use memoization to to prevent excessive express payment
 rerenders

---
 .../payment-methods/use-payment-methods.js    | 51 ++++++++++++++--
 .../js/base/context/hooks/use-store-events.ts | 13 ++++-
 .../express-payment-methods.js                | 58 ++++++++++++-------
 3 files changed, 95 insertions(+), 27 deletions(-)

diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-methods.js b/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
index 8b7932ba9df..7e9b60fe60d 100644
--- a/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
+++ b/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
 /**
  * Internal dependencies
  */
@@ -10,12 +16,49 @@ const usePaymentMethodState = ( express = false ) => {
 		paymentMethodsInitialized,
 		expressPaymentMethodsInitialized,
 	} = usePaymentMethodDataContext();
-	return express
-		? {
+
+	const currentState = useRef( {
+		paymentMethods,
+		isInitialized: paymentMethodsInitialized,
+	} );
+
+	const currentExpressState = useRef( {
+		paymentMethods: expressPaymentMethods,
+		isInitialized: expressPaymentMethodsInitialized,
+	} );
+
+	useEffect( () => {
+		if (
+			paymentMethodsInitialized !== currentState.current.isInitialized ||
+			! isShallowEqual(
+				paymentMethods,
+				currentState.current.paymentMethods
+			)
+		) {
+			currentState.current = {
+				paymentMethods,
+				isInitialized: paymentMethodsInitialized,
+			};
+		}
+	}, [ paymentMethods, paymentMethodsInitialized ] );
+
+	useEffect( () => {
+		if (
+			expressPaymentMethodsInitialized !==
+				currentExpressState.current.isInitialized ||
+			! isShallowEqual(
+				expressPaymentMethods,
+				currentExpressState.current.paymentMethods
+			)
+		) {
+			currentExpressState.current = {
 				paymentMethods: expressPaymentMethods,
 				isInitialized: expressPaymentMethodsInitialized,
-		  }
-		: { paymentMethods, isInitialized: paymentMethodsInitialized };
+			};
+		}
+	}, [ expressPaymentMethods, expressPaymentMethodsInitialized ] );
+
+	return express ? currentExpressState.current : currentState.current;
 };
 
 export const usePaymentMethods = () => usePaymentMethodState();
diff --git a/assets/js/base/context/hooks/use-store-events.ts b/assets/js/base/context/hooks/use-store-events.ts
index 84c1fa9fe8d..db0e9e3d0ab 100644
--- a/assets/js/base/context/hooks/use-store-events.ts
+++ b/assets/js/base/context/hooks/use-store-events.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { doAction } from '@wordpress/hooks';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +22,11 @@ export const useStoreEvents = (): {
 	dispatchCheckoutEvent: StoreEvent;
 } => {
 	const storeCart = useStoreCart();
+	const currentStoreCart = useRef( storeCart );
+
+	useEffect( () => {
+		currentStoreCart.current = storeCart;
+	}, [ storeCart ] );
 
 	const dispatchStoreEvent = useCallback( ( eventName, eventParams = {} ) => {
 		try {
@@ -39,11 +44,13 @@ export const useStoreEvents = (): {
 	const dispatchCheckoutEvent = useCallback(
 		( eventName, eventParams = {} ) => {
 			try {
+				const cartParam = currentStoreCart.current;
+
 				doAction(
 					`experimental__woocommerce_blocks-checkout-${ eventName }`,
 					{
 						...eventParams,
-						storeCart,
+						cartParam,
 					}
 				);
 			} catch ( e ) {
@@ -52,7 +59,7 @@ export const useStoreEvents = (): {
 				console.error( e );
 			}
 		},
-		[ storeCart ]
+		[]
 	);
 
 	return { dispatchStoreEvent, dispatchCheckoutEvent };
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index 60563981720..b1b40cec74d 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -10,6 +10,8 @@ import {
 	isValidElement,
 	useCallback,
 	useRef,
+	useMemo,
+	useEffect,
 } from '@wordpress/element';
 import {
 	useEditorContext,
@@ -33,6 +35,11 @@ const ExpressPaymentMethods = () => {
 	const { paymentMethods } = useExpressPaymentMethods();
 	const previousActivePaymentMethod = useRef( activePaymentMethod );
 	const previousPaymentMethodData = useRef( paymentMethodData );
+	const currentPaymentMethodInterface = useRef( paymentMethodInterface );
+
+	useEffect( () => {
+		currentPaymentMethodInterface.current = paymentMethodInterface;
+	}, [ paymentMethodInterface ] );
 
 	const onExpressPaymentClick = useCallback(
 		( paymentMethodId ) => () => {
@@ -48,32 +55,43 @@ const ExpressPaymentMethods = () => {
 			setPaymentStatus,
 		]
 	);
+
 	const onExpressPaymentClose = useCallback( () => {
 		setActivePaymentMethod( previousActivePaymentMethod.current );
 		if ( previousPaymentMethodData.current.isSavedToken ) {
 			setPaymentStatus().started( previousPaymentMethodData.current );
 		}
 	}, [ setActivePaymentMethod, setPaymentStatus ] );
-	const paymentMethodIds = Object.keys( paymentMethods );
-	const content =
-		paymentMethodIds.length > 0 ? (
-			paymentMethodIds.map( ( id ) => {
-				const expressPaymentMethod = isEditor
-					? paymentMethods[ id ].edit
-					: paymentMethods[ id ].content;
-				return isValidElement( expressPaymentMethod ) ? (
-					<li key={ id } id={ `express-payment-method-${ id }` }>
-						{ cloneElement( expressPaymentMethod, {
-							...paymentMethodInterface,
-							onClick: onExpressPaymentClick( id ),
-							onClose: onExpressPaymentClose,
-						} ) }
-					</li>
-				) : null;
-			} )
-		) : (
-			<li key="noneRegistered">No registered Payment Methods</li>
-		);
+
+	const content = useMemo( () => {
+		const entries = Object.entries( paymentMethods );
+
+		if ( ! entries.length ) {
+			return <li key="noneRegistered">No registered Payment Methods</li>;
+		}
+
+		return entries.map( ( [ id, paymentMethod ] ) => {
+			const expressPaymentMethod = isEditor
+				? paymentMethod.edit
+				: paymentMethod.content;
+			return isValidElement( expressPaymentMethod ) ? (
+				<li key={ id } id={ `express-payment-method-${ id }` }>
+					{ cloneElement( expressPaymentMethod, {
+						...currentPaymentMethodInterface.current,
+						onClick: onExpressPaymentClick( id ),
+						onClose: onExpressPaymentClose,
+					} ) }
+				</li>
+			) : null;
+		} );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		paymentMethods,
+		isEditor,
+		onExpressPaymentClick,
+		onExpressPaymentClose,
+	] );
+
 	return (
 		<PaymentMethodErrorBoundary isEditor={ isEditor }>
 			<ul className="wc-block-components-express-payment__event-buttons">

From e4c006fce34ccfb14dc160d470f4ba02290e811e Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:42:03 +0100
Subject: [PATCH 08/32] Wrap express payment in loading mask

---
 .../checkout-express-payment.js               | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
index 956b99e9eae..9fd46285a30 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
@@ -8,9 +8,11 @@ import {
 } from '@woocommerce/base-context/hooks';
 import {
 	StoreNoticesProvider,
+	useCheckoutContext,
 	useEditorContext,
 } from '@woocommerce/base-context';
 import Title from '@woocommerce/base-components/title';
+import LoadingMask from '@woocommerce/base-components/loading-mask';
 import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
 
 /**
@@ -20,6 +22,7 @@ import ExpressPaymentMethods from '../express-payment-methods';
 import './style.scss';
 
 const CheckoutExpressPayment = () => {
+	const { isCalculating, isProcessing } = useCheckoutContext();
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const { isEditor } = useEditorContext();
 	const { noticeContexts } = useEmitResponse();
@@ -42,32 +45,37 @@ const CheckoutExpressPayment = () => {
 
 	return (
 		<>
-			<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">
-				<div className="wc-block-components-express-payment__title-container">
-					<Title
-						className="wc-block-components-express-payment__title"
-						headingLevel="2"
-					>
-						{ __(
-							'Express checkout',
-							'woo-gutenberg-products-block'
-						) }
-					</Title>
-				</div>
-				<div className="wc-block-components-express-payment__content">
-					<StoreNoticesProvider
-						context={ noticeContexts.EXPRESS_PAYMENTS }
-					>
-						<p>
+			<LoadingMask
+				showSpinner={ true }
+				isLoading={ isCalculating || isProcessing }
+			>
+				<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">
+					<div className="wc-block-components-express-payment__title-container">
+						<Title
+							className="wc-block-components-express-payment__title"
+							headingLevel="2"
+						>
 							{ __(
-								'In a hurry? Use one of our express checkout options below:',
+								'Express checkout',
 								'woo-gutenberg-products-block'
 							) }
-						</p>
-						<ExpressPaymentMethods />
-					</StoreNoticesProvider>
+						</Title>
+					</div>
+					<div className="wc-block-components-express-payment__content">
+						<StoreNoticesProvider
+							context={ noticeContexts.EXPRESS_PAYMENTS }
+						>
+							<p>
+								{ __(
+									'In a hurry? Use one of our express checkout options below:',
+									'woo-gutenberg-products-block'
+								) }
+							</p>
+							<ExpressPaymentMethods />
+						</StoreNoticesProvider>
+					</div>
 				</div>
-			</div>
+			</LoadingMask>
 			<div className="wc-block-components-express-payment-continue-rule wc-block-components-express-payment-continue-rule--checkout">
 				{ __( 'Or continue below', 'woo-gutenberg-products-block' ) }
 			</div>

From c88dfa684a9da4a06d9a5bf4992b14b09ff0d2a0 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:53:21 +0100
Subject: [PATCH 09/32] Show loading state after submission

---
 .../checkout-express-payment.js               | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
index 9fd46285a30..d6ec67d2fb9 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
@@ -22,7 +22,14 @@ import ExpressPaymentMethods from '../express-payment-methods';
 import './style.scss';
 
 const CheckoutExpressPayment = () => {
-	const { isCalculating, isProcessing } = useCheckoutContext();
+	const {
+		isCalculating,
+		isProcessing,
+		isAfterProcessing,
+		isBeforeProcessing,
+		isComplete,
+		hasError,
+	} = useCheckoutContext();
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const { isEditor } = useEditorContext();
 	const { noticeContexts } = useEmitResponse();
@@ -43,11 +50,17 @@ const CheckoutExpressPayment = () => {
 		return null;
 	}
 
+	const waitingForProcessing =
+		isProcessing || isAfterProcessing || isBeforeProcessing;
+	const waitingForRedirect = isComplete && ! hasError;
+
 	return (
 		<>
 			<LoadingMask
-				showSpinner={ true }
-				isLoading={ isCalculating || isProcessing }
+				showSpinner={ isCalculating || waitingForProcessing }
+				isLoading={
+					isCalculating || waitingForProcessing || waitingForRedirect
+				}
 			>
 				<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">
 					<div className="wc-block-components-express-payment__title-container">

From 47e005aeb7d4c7182071484b215e6ed4231122df Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 17:58:41 +0100
Subject: [PATCH 10/32] remove eslint exclusion

---
 .../cart-checkout/payment-methods/express-payment-methods.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index b1b40cec74d..2617953cf80 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -84,7 +84,6 @@ const ExpressPaymentMethods = () => {
 				</li>
 			) : null;
 		} );
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		paymentMethods,
 		isEditor,

From c28052e000dd4eaca2d91d81ea224556df6cecb3 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 18:06:07 +0100
Subject: [PATCH 11/32] Move spinner to base components so it's available
 outside of the checkout package

---
 assets/js/base/components/loading-mask/index.js                 | 2 +-
 .../checkout => assets/js/base/components}/spinner/index.tsx    | 0
 .../checkout => assets/js/base/components}/spinner/style.scss   | 0
 packages/checkout/button/index.tsx                              | 2 +-
 packages/checkout/index.js                                      | 1 -
 5 files changed, 2 insertions(+), 3 deletions(-)
 rename {packages/checkout => assets/js/base/components}/spinner/index.tsx (100%)
 rename {packages/checkout => assets/js/base/components}/spinner/style.scss (100%)

diff --git a/assets/js/base/components/loading-mask/index.js b/assets/js/base/components/loading-mask/index.js
index d1a1ec15168..0c86a8752d1 100644
--- a/assets/js/base/components/loading-mask/index.js
+++ b/assets/js/base/components/loading-mask/index.js
@@ -4,12 +4,12 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Spinner } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import Spinner from '../spinner';
 
 const LoadingMask = ( {
 	children,
diff --git a/packages/checkout/spinner/index.tsx b/assets/js/base/components/spinner/index.tsx
similarity index 100%
rename from packages/checkout/spinner/index.tsx
rename to assets/js/base/components/spinner/index.tsx
diff --git a/packages/checkout/spinner/style.scss b/assets/js/base/components/spinner/style.scss
similarity index 100%
rename from packages/checkout/spinner/style.scss
rename to assets/js/base/components/spinner/style.scss
diff --git a/packages/checkout/button/index.tsx b/packages/checkout/button/index.tsx
index bbf8cbd8283..5a6df73ab76 100644
--- a/packages/checkout/button/index.tsx
+++ b/packages/checkout/button/index.tsx
@@ -4,12 +4,12 @@
 import { Button as WPButton } from 'wordpress-components';
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
+import Spinner from '@woocommerce/base-components/spinner';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import Spinner from '../spinner';
 
 interface ButtonProps extends WPButton.ButtonProps {
 	className?: string;
diff --git a/packages/checkout/index.js b/packages/checkout/index.js
index 382947bcc8b..ef127425a8d 100644
--- a/packages/checkout/index.js
+++ b/packages/checkout/index.js
@@ -8,5 +8,4 @@ export { default as ExperimentalOrderShippingPackages } from './order-shipping-p
 export { default as Panel } from './panel';
 export { SlotFillProvider } from 'wordpress-components';
 export { default as Button } from './button';
-export { default as Spinner } from './spinner';
 export { default as Label } from './label';

From ff03baa597d56f0c0f4f9558cf636669d9762a39 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 18:09:56 +0100
Subject: [PATCH 12/32] Avoid extra is-loading classname

---
 assets/js/base/components/loading-mask/index.js   | 14 ++++++--------
 assets/js/base/components/loading-mask/style.scss |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/assets/js/base/components/loading-mask/index.js b/assets/js/base/components/loading-mask/index.js
index 0c86a8752d1..1a9ec056b1f 100644
--- a/assets/js/base/components/loading-mask/index.js
+++ b/assets/js/base/components/loading-mask/index.js
@@ -20,17 +20,15 @@ const LoadingMask = ( {
 } ) => {
 	return (
 		<div
-			className={ classNames(
-				className,
-				'wc-block-components-loading-mask',
-				{
-					'is-loading': isLoading,
-				}
-			) }
+			className={ classNames( className, {
+				'wc-block-components-loading-mask': isLoading,
+			} ) }
 		>
 			{ isLoading && showSpinner && <Spinner /> }
 			<div
-				className="wc-block-components-loading-mask__children"
+				className={ classNames( {
+					'wc-block-components-loading-mask__children': isLoading,
+				} ) }
 				aria-hidden={ isLoading }
 			>
 				{ children }
diff --git a/assets/js/base/components/loading-mask/style.scss b/assets/js/base/components/loading-mask/style.scss
index 66bab5f46c8..4d07b98409f 100644
--- a/assets/js/base/components/loading-mask/style.scss
+++ b/assets/js/base/components/loading-mask/style.scss
@@ -1,4 +1,4 @@
-.wc-block-components-loading-mask.is-loading {
+.wc-block-components-loading-mask {
 	position: relative;
 	min-height: 18px + $gap;
 	pointer-events: none;

From a93e800c5908f1b0b630f588f8ea3eb3a6d163b3 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 18 May 2021 19:12:06 +0100
Subject: [PATCH 13/32] Update snaps/fix tests

---
 .../payment-methods/use-payment-methods.js    | 64 ++++++------------
 .../sidebar/test/__snapshots__/index.js.snap  | 67 +++++++++++--------
 2 files changed, 58 insertions(+), 73 deletions(-)

diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-methods.js b/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
index 7e9b60fe60d..7e48be3ed06 100644
--- a/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
+++ b/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { useShallowEqual } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -17,48 +16,25 @@ const usePaymentMethodState = ( express = false ) => {
 		expressPaymentMethodsInitialized,
 	} = usePaymentMethodDataContext();
 
-	const currentState = useRef( {
-		paymentMethods,
-		isInitialized: paymentMethodsInitialized,
-	} );
-
-	const currentExpressState = useRef( {
-		paymentMethods: expressPaymentMethods,
-		isInitialized: expressPaymentMethodsInitialized,
-	} );
-
-	useEffect( () => {
-		if (
-			paymentMethodsInitialized !== currentState.current.isInitialized ||
-			! isShallowEqual(
-				paymentMethods,
-				currentState.current.paymentMethods
-			)
-		) {
-			currentState.current = {
-				paymentMethods,
-				isInitialized: paymentMethodsInitialized,
-			};
-		}
-	}, [ paymentMethods, paymentMethodsInitialized ] );
-
-	useEffect( () => {
-		if (
-			expressPaymentMethodsInitialized !==
-				currentExpressState.current.isInitialized ||
-			! isShallowEqual(
-				expressPaymentMethods,
-				currentExpressState.current.paymentMethods
-			)
-		) {
-			currentExpressState.current = {
-				paymentMethods: expressPaymentMethods,
-				isInitialized: expressPaymentMethodsInitialized,
-			};
-		}
-	}, [ expressPaymentMethods, expressPaymentMethodsInitialized ] );
-
-	return express ? currentExpressState.current : currentState.current;
+	const currentPaymentMethods = useShallowEqual( paymentMethods );
+	const currentExpressPaymentMethods = useShallowEqual(
+		expressPaymentMethods
+	);
+	const currentPaymentMethodsInitialized = useShallowEqual(
+		paymentMethodsInitialized
+	);
+	const currentExpressPaymentMethodsInitialized = useShallowEqual(
+		expressPaymentMethodsInitialized
+	);
+
+	return {
+		paymentMethods: express
+			? currentExpressPaymentMethods
+			: currentPaymentMethods,
+		isInitialized: express
+			? currentExpressPaymentMethodsInitialized
+			: currentPaymentMethodsInitialized,
+	};
 };
 
 export const usePaymentMethods = () => usePaymentMethodState();
diff --git a/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap b/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap
index c1b54008764..c97d539f8a4 100644
--- a/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap
+++ b/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap
@@ -58,41 +58,50 @@ exports[`Testing checkout sidebar Shows rate percentages after tax lines if the
       hidden=""
     >
       <div
-        class="wc-block-components-totals-coupon__content"
+        class=""
       >
-        <form
-          class="wc-block-components-totals-coupon__form"
+        <div
+          aria-hidden="false"
+          class=""
         >
           <div
-            class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
+            class="wc-block-components-totals-coupon__content"
           >
-            <input
-              aria-describedby="wc-block-components-totals-coupon__input-0"
-              aria-label="Enter code"
-              autocapitalize="off"
-              autocomplete="off"
-              id="wc-block-components-totals-coupon__input-0"
-              type="text"
-              value=""
-            />
-            <label
-              for="wc-block-components-totals-coupon__input-0"
+            <form
+              class="wc-block-components-totals-coupon__form"
             >
-              Enter code
-            </label>
+              <div
+                class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
+              >
+                <input
+                  aria-describedby="wc-block-components-totals-coupon__input-0"
+                  aria-label="Enter code"
+                  autocapitalize="off"
+                  autocomplete="off"
+                  id="wc-block-components-totals-coupon__input-0"
+                  type="text"
+                  value=""
+                />
+                <label
+                  for="wc-block-components-totals-coupon__input-0"
+                >
+                  Enter code
+                </label>
+              </div>
+              <button
+                class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
+                disabled=""
+                type="submit"
+              >
+                <span
+                  class="wc-block-components-button__text"
+                >
+                  Apply
+                </span>
+              </button>
+            </form>
           </div>
-          <button
-            class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
-            disabled=""
-            type="submit"
-          >
-            <span
-              class="wc-block-components-button__text"
-            >
-              Apply
-            </span>
-          </button>
-        </form>
+        </div>
       </div>
     </div>
   </div>

From df6149f154b4c2a89242f0319ff3675e047da2e5 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 28 May 2021 17:59:52 +0100
Subject: [PATCH 14/32] Remove memorization of payment method content due to
 stale data

---
 .../express-payment-methods.js                | 67 +++++++++----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index 2617953cf80..06ffa476703 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useExpressPaymentMethods,
 	usePaymentMethodInterface,
@@ -10,8 +11,6 @@ import {
 	isValidElement,
 	useCallback,
 	useRef,
-	useMemo,
-	useEffect,
 } from '@wordpress/element';
 import {
 	useEditorContext,
@@ -35,11 +34,6 @@ const ExpressPaymentMethods = () => {
 	const { paymentMethods } = useExpressPaymentMethods();
 	const previousActivePaymentMethod = useRef( activePaymentMethod );
 	const previousPaymentMethodData = useRef( paymentMethodData );
-	const currentPaymentMethodInterface = useRef( paymentMethodInterface );
-
-	useEffect( () => {
-		currentPaymentMethodInterface.current = paymentMethodInterface;
-	}, [ paymentMethodInterface ] );
 
 	const onExpressPaymentClick = useCallback(
 		( paymentMethodId ) => () => {
@@ -63,33 +57,38 @@ const ExpressPaymentMethods = () => {
 		}
 	}, [ setActivePaymentMethod, setPaymentStatus ] );
 
-	const content = useMemo( () => {
-		const entries = Object.entries( paymentMethods );
-
-		if ( ! entries.length ) {
-			return <li key="noneRegistered">No registered Payment Methods</li>;
-		}
-
-		return entries.map( ( [ id, paymentMethod ] ) => {
-			const expressPaymentMethod = isEditor
-				? paymentMethod.edit
-				: paymentMethod.content;
-			return isValidElement( expressPaymentMethod ) ? (
-				<li key={ id } id={ `express-payment-method-${ id }` }>
-					{ cloneElement( expressPaymentMethod, {
-						...currentPaymentMethodInterface.current,
-						onClick: onExpressPaymentClick( id ),
-						onClose: onExpressPaymentClose,
-					} ) }
-				</li>
-			) : null;
-		} );
-	}, [
-		paymentMethods,
-		isEditor,
-		onExpressPaymentClick,
-		onExpressPaymentClose,
-	] );
+	/**
+	 * @todo Find a way to Memorize Express Payment Method Content
+	 *
+	 * Payment method content could potentially become a bottleneck if lots of logic is ran in the content component. It
+	 * Currently re-renders excessively but is not easy to useMemo because paymentMethodInterface could become stale.
+	 * paymentMethodInterface itself also updates on most renders.
+	 */
+	const entries = Object.entries( paymentMethods );
+	const content =
+		entries.length > 0 ? (
+			entries.map( ( [ id, paymentMethod ] ) => {
+				const expressPaymentMethod = isEditor
+					? paymentMethod.edit
+					: paymentMethod.content;
+				return isValidElement( expressPaymentMethod ) ? (
+					<li key={ id } id={ `express-payment-method-${ id }` }>
+						{ cloneElement( expressPaymentMethod, {
+							...paymentMethodInterface,
+							onClick: onExpressPaymentClick( id ),
+							onClose: onExpressPaymentClose,
+						} ) }
+					</li>
+				) : null;
+			} )
+		) : (
+			<li key="noneRegistered">
+				{ __(
+					'No registered Payment Methods',
+					'woo-gutenberg-products-block'
+				) }
+			</li>
+		);
 
 	return (
 		<PaymentMethodErrorBoundary isEditor={ isEditor }>

From 80203c944eccd2b1bd4e51888ffc509a03c04d69 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Wed, 9 Jun 2021 22:33:27 +0100
Subject: [PATCH 15/32] Express payment error handling

---
 .../payment-method-data-context.tsx           | 22 ++++++++------
 .../cart-checkout/payment-methods/types.ts    |  1 +
 .../express-payment-methods.js                | 30 +++++++++++++++++++
 .../checkout-express-payment.js               | 17 +++++++----
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index cc55bd06eb3..680c70b2dd2 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -113,6 +113,7 @@ export const PaymentMethodDataProvider = ( {
 		reducer,
 		DEFAULT_PAYMENT_DATA_CONTEXT_STATE
 	);
+
 	const currentObservers = useRef( observers );
 	const { onPaymentProcessing } = useEventEmitters( observerDispatch );
 
@@ -124,7 +125,6 @@ export const PaymentMethodDataProvider = ( {
 	const setActivePaymentMethod = useCallback(
 		( paymentMethodSlug ) => {
 			setActive( paymentMethodSlug );
-			dispatch( statusOnly( PRISTINE ) );
 			dispatchCheckoutEvent( 'set-active-payment-method', {
 				paymentMethodSlug,
 			} );
@@ -219,6 +219,7 @@ export const PaymentMethodDataProvider = ( {
 
 	const setPaymentStatus = useCallback(
 		(): PaymentStatusDispatchers => ( {
+			pristine: () => dispatch( statusOnly( PRISTINE ) ),
 			started: ( paymentMethodData ) => {
 				dispatch(
 					started( {
@@ -308,16 +309,16 @@ export const PaymentMethodDataProvider = ( {
 		paymentData.hasSavedToken,
 	] );
 
-	// Set active (selected) payment method as needed.
+	// Update the active (selected) payment method when it is empty, or invalid.
 	useEffect( () => {
-		const paymentMethodKeys = Object.keys( paymentData.paymentMethods );
+		if ( ! paymentMethodsInitialized ) {
+			return;
+		}
+
 		const allPaymentMethodKeys = [
-			...paymentMethodKeys,
+			...Object.keys( paymentData.paymentMethods ),
 			...Object.keys( paymentData.expressPaymentMethods ),
 		];
-		if ( ! paymentMethodsInitialized || ! paymentMethodKeys.length ) {
-			return;
-		}
 
 		setActive( ( currentActivePaymentMethod ) => {
 			// If there's no active payment method, or the active payment method has
@@ -329,8 +330,12 @@ export const PaymentMethodDataProvider = ( {
 				! currentActivePaymentMethod ||
 				! allPaymentMethodKeys.includes( currentActivePaymentMethod )
 			) {
+				const paymentMethodKeys = Object.keys(
+					paymentData.paymentMethods
+				);
+
 				dispatch( statusOnly( PRISTINE ) );
-				return Object.keys( paymentData.paymentMethods )[ 0 ];
+				return paymentMethodKeys.length ? paymentMethodKeys[ 0 ] : '';
 			}
 			return currentActivePaymentMethod;
 		} );
@@ -338,7 +343,6 @@ export const PaymentMethodDataProvider = ( {
 		paymentMethodsInitialized,
 		paymentData.paymentMethods,
 		paymentData.expressPaymentMethods,
-		setActive,
 	] );
 
 	// emit events.
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
index d6b41e9fd5a..b265034d88b 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
@@ -67,6 +67,7 @@ export type PaymentMethodsDispatcherType = (
 ) => void;
 
 export interface PaymentStatusDispatchers {
+	pristine: () => void;
 	started: ( paymentMethodData?: ObjectType | EmptyObjectType ) => void;
 	processing: () => void;
 	completed: () => void;
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index 06ffa476703..8cc4820b882 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -26,6 +26,7 @@ const ExpressPaymentMethods = () => {
 	const { isEditor } = useEditorContext();
 	const {
 		setActivePaymentMethod,
+		setExpressPaymentError,
 		activePaymentMethod,
 		paymentMethodData,
 		setPaymentStatus,
@@ -35,6 +36,11 @@ const ExpressPaymentMethods = () => {
 	const previousActivePaymentMethod = useRef( activePaymentMethod );
 	const previousPaymentMethodData = useRef( paymentMethodData );
 
+	/**
+	 * onExpressPaymentClick should be triggered when the express payment button is clicked.
+	 *
+	 * This will store the previous active payment method, set the express method as active, and set the payment status to started.
+	 */
 	const onExpressPaymentClick = useCallback(
 		( paymentMethodId ) => () => {
 			previousActivePaymentMethod.current = activePaymentMethod;
@@ -50,13 +56,36 @@ const ExpressPaymentMethods = () => {
 		]
 	);
 
+	/**
+	 * onExpressPaymentClose should be triggered when the express payment process is cancelled or closed.
+	 *
+	 * This restores the active method and returns the state to pristine.
+	 */
 	const onExpressPaymentClose = useCallback( () => {
+		setPaymentStatus().pristine();
 		setActivePaymentMethod( previousActivePaymentMethod.current );
 		if ( previousPaymentMethodData.current.isSavedToken ) {
 			setPaymentStatus().started( previousPaymentMethodData.current );
 		}
 	}, [ setActivePaymentMethod, setPaymentStatus ] );
 
+	/**
+	 * onExpressPaymentError should be triggered when the express payment process errors.
+	 *
+	 * This shows an error message then restores the active method and returns the state to pristine.
+	 */
+	const onExpressPaymentError = useCallback(
+		( errorMessage ) => {
+			setPaymentStatus().error( errorMessage );
+			setExpressPaymentError( errorMessage );
+			setActivePaymentMethod( previousActivePaymentMethod.current );
+			if ( previousPaymentMethodData.current.isSavedToken ) {
+				setPaymentStatus().started( previousPaymentMethodData.current );
+			}
+		},
+		[ setActivePaymentMethod, setPaymentStatus, setExpressPaymentError ]
+	);
+
 	/**
 	 * @todo Find a way to Memorize Express Payment Method Content
 	 *
@@ -77,6 +106,7 @@ const ExpressPaymentMethods = () => {
 							...paymentMethodInterface,
 							onClick: onExpressPaymentClick( id ),
 							onClose: onExpressPaymentClose,
+							onError: onExpressPaymentError,
 						} ) }
 					</li>
 				) : null;
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
index d6ec67d2fb9..3efbdb519eb 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
@@ -9,6 +9,7 @@ import {
 import {
 	StoreNoticesProvider,
 	useCheckoutContext,
+	usePaymentMethodDataContext,
 	useEditorContext,
 } from '@woocommerce/base-context';
 import Title from '@woocommerce/base-components/title';
@@ -30,6 +31,7 @@ const CheckoutExpressPayment = () => {
 		isComplete,
 		hasError,
 	} = useCheckoutContext();
+	const { currentStatus: paymentStatus } = usePaymentMethodDataContext();
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const { isEditor } = useEditorContext();
 	const { noticeContexts } = useEmitResponse();
@@ -50,16 +52,21 @@ const CheckoutExpressPayment = () => {
 		return null;
 	}
 
-	const waitingForProcessing =
-		isProcessing || isAfterProcessing || isBeforeProcessing;
-	const waitingForRedirect = isComplete && ! hasError;
+	// Set loading state for express payment methods when payment or checkout is in progress.
+	const paymentProcessing =
+		paymentStatus.isStarted || paymentStatus.isProcessing;
+	const checkoutProcessing =
+		isProcessing ||
+		isAfterProcessing ||
+		isBeforeProcessing ||
+		( isComplete && ! hasError );
 
 	return (
 		<>
 			<LoadingMask
-				showSpinner={ isCalculating || waitingForProcessing }
+				showSpinner={ paymentStatus.isProcessing }
 				isLoading={
-					isCalculating || waitingForProcessing || waitingForRedirect
+					isCalculating || paymentProcessing || checkoutProcessing
 				}
 			>
 				<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">

From 2647867f94abaa6ff56e62de930a63693e6a00da Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 11 Jun 2021 16:46:28 +0100
Subject: [PATCH 16/32] Split up payment method context to make it more
 manageable

---
 .../cart-checkout/payment-methods/actions.ts  | 155 ++++------
 .../payment-method-data-context.tsx           | 272 +++++-------------
 .../cart-checkout/payment-methods/types.ts    |  10 +-
 .../use-active-payment-method.ts              |  44 +++
 .../use-payment-method-dispatchers.ts         | 105 +++++++
 .../cart-checkout/payment-methods/utils.ts    |   3 +
 assets/js/base/hooks/use-previous.ts          |   7 +-
 assets/js/types/type-defs/contexts.js         |   6 +-
 8 files changed, 304 insertions(+), 298 deletions(-)
 create mode 100644 assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts
 create mode 100644 assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/actions.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/actions.ts
index a188548ae91..ef3616813a1 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/actions.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/actions.ts
@@ -2,106 +2,77 @@
  * Internal dependencies
  */
 import { ACTION, STATUS } from './constants';
-import type { PaymentMethods } from './types';
+import type { PaymentMethods, ExpressPaymentMethods } from './types';
 
 export interface ActionType {
 	type: ACTION | STATUS;
 	errorMessage?: string;
 	paymentMethodData?: Record< string, unknown >;
-	paymentMethods?: PaymentMethods;
+	paymentMethods?: PaymentMethods | ExpressPaymentMethods;
 	shouldSavePaymentMethod?: boolean;
 }
 
 /**
- * Used to dispatch a status update only for the given type.
+ * All the actions that can be dispatched for payment methods.
  */
-export const statusOnly = ( type: STATUS ): { type: STATUS } => ( { type } );
+export const actions = {
+	statusOnly: ( type: STATUS ): { type: STATUS } => ( { type } as const ),
+	error: ( errorMessage: string ): ActionType =>
+		( {
+			type: STATUS.ERROR,
+			errorMessage,
+		} as const ),
+	failed: ( {
+		errorMessage,
+		paymentMethodData,
+	}: {
+		errorMessage: string;
+		paymentMethodData: Record< string, unknown >;
+	} ): ActionType =>
+		( {
+			type: STATUS.FAILED,
+			errorMessage,
+			paymentMethodData,
+		} as const ),
+	success: ( {
+		paymentMethodData,
+	}: {
+		paymentMethodData?: Record< string, unknown >;
+	} ): ActionType =>
+		( {
+			type: STATUS.SUCCESS,
+			paymentMethodData,
+		} as const ),
+	started: ( {
+		paymentMethodData,
+	}: {
+		paymentMethodData?: Record< string, unknown >;
+	} ): ActionType =>
+		( {
+			type: STATUS.STARTED,
+			paymentMethodData,
+		} as const ),
+	setRegisteredPaymentMethods: (
+		paymentMethods: PaymentMethods
+	): ActionType =>
+		( {
+			type: ACTION.SET_REGISTERED_PAYMENT_METHODS,
+			paymentMethods,
+		} as const ),
+	setRegisteredExpressPaymentMethods: (
+		paymentMethods: ExpressPaymentMethods
+	): ActionType =>
+		( {
+			type: ACTION.SET_REGISTERED_EXPRESS_PAYMENT_METHODS,
+			paymentMethods,
+		} as const ),
+	setShouldSavePaymentMethod: (
+		shouldSavePaymentMethod: boolean
+	): ActionType =>
+		( {
+			type: ACTION.SET_SHOULD_SAVE_PAYMENT_METHOD,
+			shouldSavePaymentMethod,
+		} as const ),
+};
 
-/**
- * Used to dispatch an error message along with setting current payment status to ERROR.
- *
- * @param {string} errorMessage Whatever error message accompanying the error condition.
- * @return {ActionType} The action object.
- */
-export const error = ( errorMessage: string ): ActionType => ( {
-	type: STATUS.ERROR,
-	errorMessage,
-} );
-
-/**
- * Used to dispatch a payment failed status update.
- */
-export const failed = ( {
-	errorMessage,
-	paymentMethodData,
-}: {
-	errorMessage: string;
-	paymentMethodData: Record< string, unknown >;
-} ): ActionType => ( {
-	type: STATUS.FAILED,
-	errorMessage,
-	paymentMethodData,
-} );
-
-/**
- * Used to dispatch a payment success status update.
- */
-export const success = ( {
-	paymentMethodData,
-}: {
-	paymentMethodData?: Record< string, unknown >;
-} ): ActionType => ( {
-	type: STATUS.SUCCESS,
-	paymentMethodData,
-} );
-
-/**
- * Used to dispatch a payment started status update.
- */
-export const started = ( {
-	paymentMethodData,
-}: {
-	paymentMethodData?: Record< string, unknown >;
-} ): ActionType => ( {
-	type: STATUS.STARTED,
-	paymentMethodData,
-} );
-
-/**
- * Used to dispatch an action for updating a registered payment method in the state.
- *
- * @param {Object} paymentMethods Payment methods to register.
- * @return {Object} An action object.
- */
-export const setRegisteredPaymentMethods = (
-	paymentMethods: PaymentMethods
-): ActionType => ( {
-	type: ACTION.SET_REGISTERED_PAYMENT_METHODS,
-	paymentMethods,
-} );
-
-/**
- * Used to dispatch an action for updating a registered express payment method in the state.
- *
- * @param {Object} paymentMethods Payment methods to register.
- * @return {Object} An action object.
- */
-export const setRegisteredExpressPaymentMethods = (
-	paymentMethods: PaymentMethods
-): ActionType => ( {
-	type: ACTION.SET_REGISTERED_EXPRESS_PAYMENT_METHODS,
-	paymentMethods,
-} );
-
-/**
- * Set a flag indicating that the payment method info (e.g. a payment card) should be saved to user account after order completion.
- *
- * @param {boolean} shouldSavePaymentMethod
- * @return {Object} An action object.
- */
-export const setShouldSavePaymentMethod = (
-	shouldSavePaymentMethod: boolean
-): ActionType => ( {
-	type: ACTION.SET_SHOULD_SAVE_PAYMENT_METHOD,
-	shouldSavePaymentMethod,
-} );
+export default actions;
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index 680c70b2dd2..4464ee0516e 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -4,40 +4,32 @@
 import {
 	createContext,
 	useContext,
-	useState,
 	useReducer,
 	useCallback,
 	useEffect,
-	useRef,
 	useMemo,
 } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import type {
+	CustomerPaymentMethods,
+	PaymentMethodDataContextType,
+} from './types';
 import {
 	STATUS,
 	DEFAULT_PAYMENT_DATA_CONTEXT_STATE,
 	DEFAULT_PAYMENT_METHOD_DATA,
 } from './constants';
 import reducer from './reducer';
-import {
-	statusOnly,
-	error,
-	failed,
-	success,
-	started,
-	setRegisteredPaymentMethods,
-	setRegisteredExpressPaymentMethods,
-	setShouldSavePaymentMethod,
-} from './actions';
 import {
 	usePaymentMethods,
 	useExpressPaymentMethods,
 } from './use-payment-method-registration';
-import { useCustomerDataContext } from '../customer';
+import { usePaymentMethodDataDispatchers } from './use-payment-method-dispatchers';
+import { useActivePaymentMethod } from './use-active-payment-method';
 import { useCheckoutContext } from '../checkout-state';
-import { useShippingDataContext } from '../shipping';
 import { useEditorContext } from '../../editor-context';
 import {
 	EMIT_TYPES,
@@ -46,29 +38,11 @@ import {
 	reducer as emitReducer,
 } from './event-emit';
 import { useValidationContext } from '../../validation';
-import { useStoreEvents } from '../../../hooks/use-store-events';
+import { usePrevious } from '../../../../hooks/use-previous';
 import { useStoreNotices } from '../../../hooks/use-store-notices';
 import { useEmitResponse } from '../../../hooks/use-emit-response';
-
-import type {
-	PaymentStatusDispatchers,
-	PaymentMethods,
-	CustomerPaymentMethods,
-	PaymentMethodsDispatcherType,
-	PaymentMethodDataContextType,
-} from './types';
 import { getCustomerPaymentMethods } from './utils';
 
-const {
-	STARTED,
-	PROCESSING,
-	COMPLETE,
-	PRISTINE,
-	ERROR,
-	FAILED,
-	SUCCESS,
-} = STATUS;
-
 const PaymentMethodDataContext = createContext( DEFAULT_PAYMENT_METHOD_DATA );
 
 export const usePaymentMethodDataContext = (): PaymentMethodDataContextType => {
@@ -76,11 +50,9 @@ export const usePaymentMethodDataContext = (): PaymentMethodDataContextType => {
 };
 
 /**
- * PaymentMethodDataProvider is automatically included in the
- * CheckoutDataProvider.
+ * PaymentMethodDataProvider is automatically included in the CheckoutDataProvider.
  *
- * This provides the api interface (via the context hook) for payment method
- * status and data.
+ * This provides the api interface (via the context hook) for payment method status and data.
  *
  * @param {Object} props          Incoming props for provider
  * @param {Object} props.children The wrapped components in this provider.
@@ -90,7 +62,6 @@ export const PaymentMethodDataProvider = ( {
 }: {
 	children: React.ReactChildren;
 } ): JSX.Element => {
-	const { setBillingData } = useCustomerDataContext();
 	const {
 		isProcessing: checkoutIsProcessing,
 		isIdle: checkoutIsIdle,
@@ -98,72 +69,41 @@ export const PaymentMethodDataProvider = ( {
 		hasError: checkoutHasError,
 	} = useCheckoutContext();
 	const { isEditor, getPreviewData } = useEditorContext();
+	const { setValidationErrors } = useValidationContext();
+	const { addErrorNotice, removeNotice } = useStoreNotices();
 	const {
 		isSuccessResponse,
 		isErrorResponse,
 		isFailResponse,
 		noticeContexts,
 	} = useEmitResponse();
-	const { dispatchCheckoutEvent } = useStoreEvents();
-
-	const [ activePaymentMethod, setActive ] = useState( '' ); // The active payment method - e.g. Stripe CC or BACS.
-	const [ activeSavedToken, setActiveSavedToken ] = useState( '' ); // If a previously saved payment method is active, the token for that method. For example, a for a Stripe CC card saved to user account.
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
+	const { onPaymentProcessing } = useEventEmitters( observerDispatch );
+	const currentObservers = usePrevious( observers );
+
 	const [ paymentData, dispatch ] = useReducer(
 		reducer,
 		DEFAULT_PAYMENT_DATA_CONTEXT_STATE
 	);
-
-	const currentObservers = useRef( observers );
-	const { onPaymentProcessing } = useEventEmitters( observerDispatch );
-
-	// ensure observers are always current.
-	useEffect( () => {
-		currentObservers.current = observers;
-	}, [ observers ] );
-
-	const setActivePaymentMethod = useCallback(
-		( paymentMethodSlug ) => {
-			setActive( paymentMethodSlug );
-			dispatchCheckoutEvent( 'set-active-payment-method', {
-				paymentMethodSlug,
-			} );
-		},
-		[ dispatchCheckoutEvent ]
-	);
-
-	const paymentMethodsDispatcher = useCallback<
-		PaymentMethodsDispatcherType
-	>( ( paymentMethods ) => {
-		dispatch(
-			setRegisteredPaymentMethods( paymentMethods as PaymentMethods )
-		);
-	}, [] );
-
-	const expressPaymentMethodsDispatcher = useCallback<
-		PaymentMethodsDispatcherType
-	>( ( paymentMethods ) => {
-		dispatch(
-			setRegisteredExpressPaymentMethods(
-				paymentMethods as PaymentMethods
-			)
-		);
-	}, [] );
+	const {
+		dispatchActions,
+		setPaymentStatus,
+	} = usePaymentMethodDataDispatchers( dispatch );
 
 	const paymentMethodsInitialized = usePaymentMethods(
-		paymentMethodsDispatcher
+		dispatchActions.setRegisteredPaymentMethods
 	);
 
 	const expressPaymentMethodsInitialized = useExpressPaymentMethods(
-		expressPaymentMethodsDispatcher
+		dispatchActions.setRegisteredExpressPaymentMethods
 	);
 
-	const { setValidationErrors } = useValidationContext();
-	const { addErrorNotice, removeNotice } = useStoreNotices();
-	const { setShippingAddress } = useShippingDataContext();
-	const setShouldSavePayment = useCallback( ( shouldSave ) => {
-		dispatch( setShouldSavePaymentMethod( shouldSave ) );
-	}, [] );
+	const {
+		activePaymentMethod,
+		activeSavedToken,
+		setActivePaymentMethod,
+		setActiveSavedToken,
+	} = useActivePaymentMethod();
 
 	const customerPaymentMethods = useMemo( (): CustomerPaymentMethods => {
 		if ( isEditor ) {
@@ -171,13 +111,9 @@ export const PaymentMethodDataProvider = ( {
 				'previewSavedPaymentMethods'
 			) as CustomerPaymentMethods;
 		}
-		if (
-			! paymentMethodsInitialized ||
-			Object.keys( paymentData.paymentMethods ).length === 0
-		) {
-			return {};
-		}
-		return getCustomerPaymentMethods( paymentData.paymentMethods );
+		return paymentMethodsInitialized
+			? getCustomerPaymentMethods( paymentData.paymentMethods )
+			: {};
 	}, [
 		isEditor,
 		getPreviewData,
@@ -204,70 +140,51 @@ export const PaymentMethodDataProvider = ( {
 
 	const currentStatus = useMemo(
 		() => ( {
-			isPristine: paymentData.currentStatus === PRISTINE,
-			isStarted: paymentData.currentStatus === STARTED,
-			isProcessing: paymentData.currentStatus === PROCESSING,
-			isFinished: [ ERROR, FAILED, SUCCESS ].includes(
-				paymentData.currentStatus
-			),
-			hasError: paymentData.currentStatus === ERROR,
-			hasFailed: paymentData.currentStatus === FAILED,
-			isSuccessful: paymentData.currentStatus === SUCCESS,
+			isPristine: paymentData.currentStatus === STATUS.PRISTINE,
+			isStarted: paymentData.currentStatus === STATUS.STARTED,
+			isProcessing: paymentData.currentStatus === STATUS.PROCESSING,
+			isFinished: [
+				STATUS.ERROR,
+				STATUS.FAILED,
+				STATUS.SUCCESS,
+			].includes( paymentData.currentStatus ),
+			hasError: paymentData.currentStatus === STATUS.ERROR,
+			hasFailed: paymentData.currentStatus === STATUS.FAILED,
+			isSuccessful: paymentData.currentStatus === STATUS.SUCCESS,
 		} ),
 		[ paymentData.currentStatus ]
 	);
 
-	const setPaymentStatus = useCallback(
-		(): PaymentStatusDispatchers => ( {
-			pristine: () => dispatch( statusOnly( PRISTINE ) ),
-			started: ( paymentMethodData ) => {
-				dispatch(
-					started( {
-						paymentMethodData,
-					} )
-				);
-			},
-			processing: () => dispatch( statusOnly( PROCESSING ) ),
-			completed: () => dispatch( statusOnly( COMPLETE ) ),
-			error: ( errorMessage ) => dispatch( error( errorMessage ) ),
-			failed: (
-				errorMessage,
-				paymentMethodData,
-				billingData = undefined
-			) => {
-				if ( billingData ) {
-					setBillingData( billingData );
-				}
-				dispatch(
-					failed( {
-						errorMessage: errorMessage || '',
-						paymentMethodData: paymentMethodData || {},
-					} )
-				);
-			},
-			success: (
-				paymentMethodData,
-				billingData = undefined,
-				shippingData = undefined
-			) => {
-				if ( billingData ) {
-					setBillingData( billingData );
-				}
-				if (
-					typeof shippingData !== undefined &&
-					shippingData?.address
-				) {
-					setShippingAddress( shippingData.address );
-				}
-				dispatch(
-					success( {
-						paymentMethodData,
-					} )
-				);
-			},
-		} ),
-		[ dispatch, setBillingData, setShippingAddress ]
-	);
+	// Update the active (selected) payment method when it is empty, or invalid.
+	useEffect( () => {
+		if ( ! paymentMethodsInitialized ) {
+			return;
+		}
+
+		const paymentMethodKeys = Object.keys( paymentData.paymentMethods );
+		const allPaymentMethodKeys = [
+			...paymentMethodKeys,
+			...Object.keys( paymentData.expressPaymentMethods ),
+		];
+		const defaultPaymentMethodKey = paymentMethodKeys.length
+			? paymentMethodKeys[ 0 ]
+			: '';
+
+		if (
+			! allPaymentMethodKeys.includes( activePaymentMethod ) &&
+			activePaymentMethod !== defaultPaymentMethodKey
+		) {
+			setPaymentStatus().pristine();
+			setActivePaymentMethod( defaultPaymentMethodKey );
+		}
+	}, [
+		paymentMethodsInitialized,
+		activePaymentMethod,
+		setActivePaymentMethod,
+		setPaymentStatus,
+		paymentData.paymentMethods,
+		paymentData.expressPaymentMethods,
+	] );
 
 	// flip payment to processing if checkout processing is complete, there are no errors, and payment status is started.
 	useEffect( () => {
@@ -290,9 +207,9 @@ export const PaymentMethodDataProvider = ( {
 	// When checkout is returned to idle, set payment status to pristine but only if payment status is already not finished.
 	useEffect( () => {
 		if ( checkoutIsIdle && ! currentStatus.isSuccessful ) {
-			dispatch( statusOnly( PRISTINE ) );
+			setPaymentStatus().pristine();
 		}
-	}, [ checkoutIsIdle, currentStatus.isSuccessful ] );
+	}, [ checkoutIsIdle, currentStatus.isSuccessful, setPaymentStatus ] );
 
 	// if checkout has an error and payment is not being made with a saved token and payment status is success, then let's sync payment status back to pristine.
 	useEffect( () => {
@@ -301,51 +218,15 @@ export const PaymentMethodDataProvider = ( {
 			currentStatus.isSuccessful &&
 			! paymentData.hasSavedToken
 		) {
-			dispatch( statusOnly( PRISTINE ) );
+			setPaymentStatus().pristine();
 		}
 	}, [
 		checkoutHasError,
 		currentStatus.isSuccessful,
 		paymentData.hasSavedToken,
+		setPaymentStatus,
 	] );
 
-	// Update the active (selected) payment method when it is empty, or invalid.
-	useEffect( () => {
-		if ( ! paymentMethodsInitialized ) {
-			return;
-		}
-
-		const allPaymentMethodKeys = [
-			...Object.keys( paymentData.paymentMethods ),
-			...Object.keys( paymentData.expressPaymentMethods ),
-		];
-
-		setActive( ( currentActivePaymentMethod ) => {
-			// If there's no active payment method, or the active payment method has
-			// been removed (e.g. COD vs shipping methods), set one as active.
-			// Note: It's possible that the active payment method might be an
-			// express payment method. So registered express payment methods are
-			// included in the check here.
-			if (
-				! currentActivePaymentMethod ||
-				! allPaymentMethodKeys.includes( currentActivePaymentMethod )
-			) {
-				const paymentMethodKeys = Object.keys(
-					paymentData.paymentMethods
-				);
-
-				dispatch( statusOnly( PRISTINE ) );
-				return paymentMethodKeys.length ? paymentMethodKeys[ 0 ] : '';
-			}
-			return currentActivePaymentMethod;
-		} );
-	}, [
-		paymentMethodsInitialized,
-		paymentData.paymentMethods,
-		paymentData.expressPaymentMethods,
-	] );
-
-	// emit events.
 	useEffect( () => {
 		// Note: the nature of this event emitter is that it will bail on any
 		// observer that returns a response that !== true. However, this still
@@ -354,7 +235,7 @@ export const PaymentMethodDataProvider = ( {
 		if ( currentStatus.isProcessing ) {
 			removeNotice( 'wc-payment-error', noticeContexts.PAYMENTS );
 			emitEventWithAbort(
-				currentObservers.current,
+				currentObservers,
 				EMIT_TYPES.PAYMENT_PROCESSING,
 				{}
 			).then( ( observerResponses ) => {
@@ -418,6 +299,7 @@ export const PaymentMethodDataProvider = ( {
 			} );
 		}
 	}, [
+		currentObservers,
 		currentStatus.isProcessing,
 		setValidationErrors,
 		setPaymentStatus,
@@ -447,7 +329,7 @@ export const PaymentMethodDataProvider = ( {
 		expressPaymentMethodsInitialized,
 		setExpressPaymentError,
 		shouldSavePayment: paymentData.shouldSavePaymentMethod,
-		setShouldSavePayment,
+		setShouldSavePayment: dispatchActions.setShouldSavePayment,
 	};
 
 	return (
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
index b265034d88b..251e9f9612b 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
@@ -62,9 +62,13 @@ export type CustomerPaymentMethods =
 	| Record< string, CustomerPaymentMethod >
 	| EmptyObjectType;
 
-export type PaymentMethodsDispatcherType = (
-	paymentMethods: PaymentMethods | ExpressPaymentMethods
-) => void;
+export type PaymentMethodDispatchers = {
+	setRegisteredPaymentMethods: ( paymentMethods: PaymentMethods ) => void;
+	setRegisteredExpressPaymentMethods: (
+		paymentMethods: ExpressPaymentMethods
+	) => void;
+	setShouldSavePayment: ( shouldSave: boolean ) => void;
+};
 
 export interface PaymentStatusDispatchers {
 	pristine: () => void;
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts
new file mode 100644
index 00000000000..26b25468561
--- /dev/null
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreEvents } from '../../../hooks/use-store-events';
+
+export const useActivePaymentMethod = (): {
+	activePaymentMethod: string;
+	activeSavedToken: string;
+	setActivePaymentMethod: ( paymentMethodSlug: string ) => void;
+	setActiveSavedToken: ( token: string ) => void;
+} => {
+	const { dispatchCheckoutEvent } = useStoreEvents();
+
+	// The active payment method - e.g. Stripe CC or BACS.
+	const [ activePaymentMethod, setActive ] = useState( '' );
+
+	// If a previously saved payment method is active, the token for that method. For example, a for a Stripe CC card saved to user account.
+	const [ activeSavedToken, setActiveSavedToken ] = useState( '' );
+
+	/**
+	 * Callback function for setting the active payment method and triggering an event to track.
+	 */
+	const setActivePaymentMethod = useCallback(
+		( paymentMethodSlug ) => {
+			setActive( paymentMethodSlug );
+			dispatchCheckoutEvent( 'set-active-payment-method', {
+				paymentMethodSlug,
+			} );
+		},
+		[ dispatchCheckoutEvent ]
+	);
+
+	return {
+		activePaymentMethod,
+		activeSavedToken,
+		setActivePaymentMethod,
+		setActiveSavedToken,
+	};
+};
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts
new file mode 100644
index 00000000000..bfb8bace252
--- /dev/null
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts
@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { actions, ActionType } from './actions';
+import { STATUS } from './constants';
+import { useCustomerDataContext } from '../customer';
+import { useShippingDataContext } from '../shipping';
+import type {
+	PaymentStatusDispatchers,
+	PaymentMethodDispatchers,
+} from './types';
+
+export const usePaymentMethodDataDispatchers = (
+	dispatch: React.Dispatch< ActionType >
+): {
+	dispatchActions: PaymentMethodDispatchers;
+	setPaymentStatus: () => PaymentStatusDispatchers;
+} => {
+	const { setBillingData } = useCustomerDataContext();
+	const { setShippingAddress } = useShippingDataContext();
+
+	const dispatchActions = useMemo(
+		(): PaymentMethodDispatchers => ( {
+			setRegisteredPaymentMethods: ( paymentMethods ) =>
+				void dispatch(
+					actions.setRegisteredPaymentMethods( paymentMethods )
+				),
+			setRegisteredExpressPaymentMethods: ( paymentMethods ) =>
+				void dispatch(
+					actions.setRegisteredExpressPaymentMethods( paymentMethods )
+				),
+			setShouldSavePayment: ( shouldSave ) =>
+				void dispatch(
+					actions.setShouldSavePaymentMethod( shouldSave )
+				),
+		} ),
+		[]
+	);
+
+	const setPaymentStatus = useCallback(
+		(): PaymentStatusDispatchers => ( {
+			pristine: () => dispatch( actions.statusOnly( STATUS.PRISTINE ) ),
+			started: ( paymentMethodData ) => {
+				dispatch(
+					actions.started( {
+						paymentMethodData,
+					} )
+				);
+			},
+			processing: () =>
+				dispatch( actions.statusOnly( STATUS.PROCESSING ) ),
+			completed: () => dispatch( actions.statusOnly( STATUS.COMPLETE ) ),
+			error: ( errorMessage ) =>
+				dispatch( actions.error( errorMessage ) ),
+			failed: (
+				errorMessage,
+				paymentMethodData,
+				billingData = undefined
+			) => {
+				if ( billingData ) {
+					setBillingData( billingData );
+				}
+				dispatch(
+					actions.failed( {
+						errorMessage: errorMessage || '',
+						paymentMethodData: paymentMethodData || {},
+					} )
+				);
+			},
+			success: (
+				paymentMethodData,
+				billingData = undefined,
+				shippingData = undefined
+			) => {
+				if ( billingData ) {
+					setBillingData( billingData );
+				}
+				if (
+					typeof shippingData !== undefined &&
+					shippingData?.address
+				) {
+					setShippingAddress(
+						shippingData.address as Record< string, unknown >
+					);
+				}
+				dispatch(
+					actions.success( {
+						paymentMethodData,
+					} )
+				);
+			},
+		} ),
+		[ dispatch, setBillingData, setShippingAddress ]
+	);
+
+	return {
+		dispatchActions,
+		setPaymentStatus,
+	};
+};
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/utils.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/utils.ts
index 404503b11ac..b1991ff863d 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/utils.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/utils.ts
@@ -14,6 +14,9 @@ import type { PaymentMethods, CustomerPaymentMethod } from './types';
 export const getCustomerPaymentMethods = (
 	availablePaymentMethods: PaymentMethods = {}
 ): Record< string, CustomerPaymentMethod > => {
+	if ( Object.keys( availablePaymentMethods ).length === 0 ) {
+		return {};
+	}
 	const customerPaymentMethods = getSetting( 'customerPaymentMethods', {} );
 	const paymentMethodKeys = Object.keys( customerPaymentMethods );
 	const enabledCustomerPaymentMethods = {} as Record<
diff --git a/assets/js/base/hooks/use-previous.ts b/assets/js/base/hooks/use-previous.ts
index b40f20d0c1f..c652c4ca727 100644
--- a/assets/js/base/hooks/use-previous.ts
+++ b/assets/js/base/hooks/use-previous.ts
@@ -13,11 +13,8 @@ interface Validation< T > {
  * @param {Function} [validation] Function that needs to validate for the value
  *                                to be updated.
  */
-export function usePrevious< T >(
-	value: T,
-	validation?: Validation< T >
-): T | undefined {
-	const ref = useRef< T >();
+export function usePrevious< T >( value: T, validation?: Validation< T > ): T {
+	const ref = useRef< T >( value );
 
 	useEffect( () => {
 		if (
diff --git a/assets/js/types/type-defs/contexts.js b/assets/js/types/type-defs/contexts.js
index 7ce328d16de..260a761dd51 100644
--- a/assets/js/types/type-defs/contexts.js
+++ b/assets/js/types/type-defs/contexts.js
@@ -13,8 +13,8 @@
  *
  * @property {BillingData}          billingData        The current billing data, including address and email.
  * @property {CartShippingAddress}  shippingAddress    The current set address for shipping.
- * @property {function()}           setBillingData     A function for setting billing data.
- * @property {function()}           setShippingAddress A function for setting shipping address.
+ * @property {function(Object)}     setBillingData     A function for setting billing data.
+ * @property {function(Object)}     setShippingAddress A function for setting shipping address.
  */
 
 /**
@@ -30,7 +30,7 @@
  * @property {function()}           setSelectedRates            Function for setting the selected rates.
  * @property {boolean}              isSelectingRate             True when rate is being selected.
  * @property {CartShippingAddress}  shippingAddress             The current set address for shipping.
- * @property {function()}           setShippingAddress          Function for setting the shipping address.
+ * @property {function(Object)}     setShippingAddress          Function for setting the shipping address.
  * @property {function()}           onShippingRateSuccess       Used to register a callback to be invoked when shipping
  *                                                              rates are retrieved.
  * @property {function()}           onShippingRateSelectSuccess Used to register a callback to be invoked when shipping

From 05cd597ebe0722861a494a39e6387e04e0f55329 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 11 Jun 2021 17:03:32 +0100
Subject: [PATCH 17/32] Add blocking logic to cart

---
 .../payment-method-data-context.tsx           | 38 +++------------
 .../cart-checkout/payment-methods/types.ts    |  2 +
 .../express-payment/cart-express-payment.js   | 47 +++++++++++++++----
 .../checkout-express-payment.js               |  7 ++-
 4 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index 4464ee0516e..e0e14d06622 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -151,41 +151,15 @@ export const PaymentMethodDataProvider = ( {
 			hasError: paymentData.currentStatus === STATUS.ERROR,
 			hasFailed: paymentData.currentStatus === STATUS.FAILED,
 			isSuccessful: paymentData.currentStatus === STATUS.SUCCESS,
+			isDoingExpressPayment:
+				paymentData.currentStatus !== STATUS.PRISTINE &&
+				Object.keys( paymentData.expressPaymentMethods ).includes(
+					activePaymentMethod
+				),
 		} ),
-		[ paymentData.currentStatus ]
+		[ paymentData.currentStatus, activePaymentMethod ]
 	);
 
-	// Update the active (selected) payment method when it is empty, or invalid.
-	useEffect( () => {
-		if ( ! paymentMethodsInitialized ) {
-			return;
-		}
-
-		const paymentMethodKeys = Object.keys( paymentData.paymentMethods );
-		const allPaymentMethodKeys = [
-			...paymentMethodKeys,
-			...Object.keys( paymentData.expressPaymentMethods ),
-		];
-		const defaultPaymentMethodKey = paymentMethodKeys.length
-			? paymentMethodKeys[ 0 ]
-			: '';
-
-		if (
-			! allPaymentMethodKeys.includes( activePaymentMethod ) &&
-			activePaymentMethod !== defaultPaymentMethodKey
-		) {
-			setPaymentStatus().pristine();
-			setActivePaymentMethod( defaultPaymentMethodKey );
-		}
-	}, [
-		paymentMethodsInitialized,
-		activePaymentMethod,
-		setActivePaymentMethod,
-		setPaymentStatus,
-		paymentData.paymentMethods,
-		paymentData.expressPaymentMethods,
-	] );
-
 	// flip payment to processing if checkout processing is complete, there are no errors, and payment status is started.
 	useEffect( () => {
 		if (
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
index 251e9f9612b..99f74df3386 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
@@ -113,6 +113,8 @@ export type PaymentMethodCurrentStatusType = {
 	hasFailed: boolean;
 	// If true then the payment method has completed it's processing successfully.
 	isSuccessful: boolean;
+	// If true, an express payment is in progress.
+	isDoingExpressPayment: boolean;
 };
 
 export type PaymentMethodDataContextType = {
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
index 9dc09c34357..e7fb6648542 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
@@ -6,7 +6,12 @@ import {
 	useEmitResponse,
 	useExpressPaymentMethods,
 } from '@woocommerce/base-context/hooks';
-import { StoreNoticesProvider } from '@woocommerce/base-context';
+import {
+	StoreNoticesProvider,
+	useCheckoutContext,
+	usePaymentMethodDataContext,
+} from '@woocommerce/base-context';
+import LoadingMask from '@woocommerce/base-components/loading-mask';
 
 /**
  * Internal dependencies
@@ -17,6 +22,15 @@ import './style.scss';
 const CartExpressPayment = () => {
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const { noticeContexts } = useEmitResponse();
+	const {
+		isCalculating,
+		isProcessing,
+		isAfterProcessing,
+		isBeforeProcessing,
+		isComplete,
+		hasError,
+	} = useCheckoutContext();
+	const { currentStatus: paymentStatus } = usePaymentMethodDataContext();
 
 	if (
 		! isInitialized ||
@@ -25,17 +39,32 @@ const CartExpressPayment = () => {
 		return null;
 	}
 
+	// Set loading state for express payment methods when payment or checkout is in progress.
+	const checkoutProcessing =
+		isProcessing ||
+		isAfterProcessing ||
+		isBeforeProcessing ||
+		( isComplete && ! hasError );
+
 	return (
 		<>
-			<div className="wc-block-components-express-payment wc-block-components-express-payment--cart">
-				<div className="wc-block-components-express-payment__content">
-					<StoreNoticesProvider
-						context={ noticeContexts.EXPRESS_PAYMENTS }
-					>
-						<ExpressPaymentMethods />
-					</StoreNoticesProvider>
+			<LoadingMask
+				isLoading={
+					isCalculating ||
+					checkoutProcessing ||
+					paymentStatus.isDoingExpressPayment
+				}
+			>
+				<div className="wc-block-components-express-payment wc-block-components-express-payment--cart">
+					<div className="wc-block-components-express-payment__content">
+						<StoreNoticesProvider
+							context={ noticeContexts.EXPRESS_PAYMENTS }
+						>
+							<ExpressPaymentMethods />
+						</StoreNoticesProvider>
+					</div>
 				</div>
-			</div>
+			</LoadingMask>
 			<div className="wc-block-components-express-payment-continue-rule wc-block-components-express-payment-continue-rule--cart">
 				{ /* translators: Shown in the Cart block between the express payment methods and the Proceed to Checkout button */ }
 				{ __( 'Or', 'woo-gutenberg-products-block' ) }
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
index 3efbdb519eb..cb53ac237fc 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
@@ -53,8 +53,6 @@ const CheckoutExpressPayment = () => {
 	}
 
 	// Set loading state for express payment methods when payment or checkout is in progress.
-	const paymentProcessing =
-		paymentStatus.isStarted || paymentStatus.isProcessing;
 	const checkoutProcessing =
 		isProcessing ||
 		isAfterProcessing ||
@@ -64,9 +62,10 @@ const CheckoutExpressPayment = () => {
 	return (
 		<>
 			<LoadingMask
-				showSpinner={ paymentStatus.isProcessing }
 				isLoading={
-					isCalculating || paymentProcessing || checkoutProcessing
+					isCalculating ||
+					checkoutProcessing ||
+					paymentStatus.isDoingExpressPayment
 				}
 			>
 				<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">

From 1c0bce492aa43918ae4e9edbab4c1c6080b5cad8 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 11 Jun 2021 17:41:30 +0100
Subject: [PATCH 18/32] Update snap

---
 .../cart/test/__snapshots__/block.js.snap     | 3654 +++++++++--------
 1 file changed, 1869 insertions(+), 1785 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap b/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap
index ce06a39bec5..a3a1331f1cd 100644
--- a/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap
+++ b/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap
@@ -6,691 +6,719 @@ exports[`Testing cart Contains a Taxes section if Core options are set to show i
     aria-hidden="true"
     class="with-scroll-to-top__scroll-point"
   />
-  <h2
-    class="wc-block-components-title"
-  >
-    Your cart (3 items)
-  </h2>
   <div
-    class="wc-block-components-sidebar-layout wc-block-cart"
+    class=""
   >
-    <iframe
-      aria-hidden="true"
-      frameborder="0"
-      src="about:blank"
-      style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-      tabindex="-1"
-    />
     <div
-      class="wc-block-components-main wc-block-cart__main"
+      aria-hidden="false"
+      class=""
     >
-      <table
-        class="wc-block-cart-items"
+      <h2
+        class="wc-block-components-title"
       >
-        <thead>
-          <tr
-            class="wc-block-cart-items__header"
-          >
-            <th
-              class="wc-block-cart-items__header-image"
-            >
-              <span>
-                Product
-              </span>
-            </th>
-            <th
-              class="wc-block-cart-items__header-product"
-            >
-              <span>
-                Details
-              </span>
-            </th>
-            <th
-              class="wc-block-cart-items__header-total"
-            >
-              <span>
-                Total
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            class="wc-block-cart-items__row"
+        Your cart (3 items)
+      </h2>
+      <div
+        class="wc-block-components-sidebar-layout wc-block-cart"
+      >
+        <iframe
+          aria-hidden="true"
+          frameborder="0"
+          src="about:blank"
+          style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+          tabindex="-1"
+        />
+        <div
+          class="wc-block-components-main wc-block-cart__main"
+        >
+          <table
+            class="wc-block-cart-items"
           >
-            <td
-              aria-hidden="true"
-              class="wc-block-cart-item__image"
-            >
-              <a
-                href="https://example.org"
-                tabindex="-1"
+            <thead>
+              <tr
+                class="wc-block-cart-items__header"
               >
-                <img
-                  alt=""
-                  src="assets/img/beanie.jpg"
-                />
-              </a>
-            </td>
-            <td
-              class="wc-block-cart-item__product"
-            >
-              <a
-                class="wc-block-components-product-name"
-                href="https://example.org"
-              >
-                Beanie
-              </a>
-              <div
-                class="wc-block-components-product-badge wc-block-components-product-low-stock-badge"
-              >
-                2 left in stock
-              </div>
-              <div
-                class="wc-block-cart-item__prices"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                <th
+                  class="wc-block-cart-items__header-image"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
-                  >
-                    $6.40
+                  <span>
+                    Product
                   </span>
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-metadata"
+                </th>
+                <th
+                  class="wc-block-cart-items__header-product"
+                >
+                  <span>
+                    Details
+                  </span>
+                </th>
+                <th
+                  class="wc-block-cart-items__header-total"
+                >
+                  <span>
+                    Total
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="wc-block-cart-items__row"
               >
-                <div
-                  class="wc-block-components-product-metadata__description"
+                <td
+                  aria-hidden="true"
+                  class="wc-block-cart-item__image"
                 >
-                  <p>
-                    Warm hat for winter
-                  </p>
-                  
-
-                </div>
-                <ul
-                  class="wc-block-components-product-details"
+                  <a
+                    href="https://example.org"
+                    tabindex="-1"
+                  >
+                    <img
+                      alt=""
+                      src="assets/img/beanie.jpg"
+                    />
+                  </a>
+                </td>
+                <td
+                  class="wc-block-cart-item__product"
                 >
-                  <li
-                    class="wc-block-components-product-details__color"
+                  <a
+                    class="wc-block-components-product-name"
+                    href="https://example.org"
+                  >
+                    Beanie
+                  </a>
+                  <div
+                    class="wc-block-components-product-badge wc-block-components-product-low-stock-badge"
+                  >
+                    2 left in stock
+                  </div>
+                  <div
+                    class="wc-block-cart-item__prices"
                   >
                     <span
-                      class="wc-block-components-product-details__name"
+                      class="price wc-block-components-product-price"
                     >
-                      Color
-                      :
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $6.40
+                      </span>
                     </span>
-                     
-                    <span
-                      class="wc-block-components-product-details__value"
+                  </div>
+                  <div
+                    class="wc-block-components-product-metadata"
+                  >
+                    <div
+                      class="wc-block-components-product-metadata__description"
                     >
-                      Yellow
-                    </span>
-                  </li>
-                  <li
-                    class="wc-block-components-product-details__size"
+                      <p>
+                        Warm hat for winter
+                      </p>
+                      
+
+                    </div>
+                    <ul
+                      class="wc-block-components-product-details"
+                    >
+                      <li
+                        class="wc-block-components-product-details__color"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Color
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Yellow
+                        </span>
+                      </li>
+                      <li
+                        class="wc-block-components-product-details__size"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Size
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Small
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    class="wc-block-cart-item__quantity"
                   >
-                    <span
-                      class="wc-block-components-product-details__name"
+                    <div
+                      class="wc-block-components-quantity-selector"
                     >
-                      Size
-                      :
-                    </span>
-                     
-                    <span
-                      class="wc-block-components-product-details__value"
+                      <input
+                        aria-label="Quantity of Beanie in your cart."
+                        class="wc-block-components-quantity-selector__input"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <button
+                        aria-label="Reduce quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
+                        disabled=""
+                      >
+                        －
+                      </button>
+                      <button
+                        aria-label="Increase quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                      >
+                        ＋
+                      </button>
+                    </div>
+                    <button
+                      class="wc-block-cart-item__remove-link"
                     >
-                      Small
-                    </span>
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="wc-block-cart-item__quantity"
-              >
-                <div
-                  class="wc-block-components-quantity-selector"
+                      Remove item
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="wc-block-cart-item__total"
                 >
-                  <input
-                    aria-label="Quantity of Beanie in your cart."
-                    class="wc-block-components-quantity-selector__input"
-                    min="0"
-                    step="1"
-                    type="number"
-                    value="2"
-                  />
-                  <button
-                    aria-label="Reduce quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-                  >
-                    －
-                  </button>
-                  <button
-                    aria-label="Increase quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                  <div
+                    class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
                   >
-                    ＋
-                  </button>
-                </div>
-                <button
-                  class="wc-block-cart-item__remove-link"
-                >
-                  Remove item
-                </button>
-              </div>
-            </td>
-            <td
-              class="wc-block-cart-item__total"
-            >
-              <div
-                class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $12.80
+                      </span>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="wc-block-cart-items__row"
               >
-                <span
-                  class="price wc-block-components-product-price"
+                <td
+                  aria-hidden="true"
+                  class="wc-block-cart-item__image"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                  <a
+                    href="https://example.org"
+                    tabindex="-1"
                   >
-                    $12.80
-                  </span>
-                </span>
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="wc-block-cart-items__row"
-          >
-            <td
-              aria-hidden="true"
-              class="wc-block-cart-item__image"
-            >
-              <a
-                href="https://example.org"
-                tabindex="-1"
-              >
-                <img
-                  alt=""
-                  src="assets/img/cap.jpg"
-                />
-              </a>
-            </td>
-            <td
-              class="wc-block-cart-item__product"
-            >
-              <a
-                class="wc-block-components-product-name"
-                href="https://example.org"
-              >
-                Cap
-              </a>
-              <div
-                class="wc-block-cart-item__prices"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                    <img
+                      alt=""
+                      src="assets/img/cap.jpg"
+                    />
+                  </a>
+                </td>
+                <td
+                  class="wc-block-cart-item__product"
                 >
-                  <span
-                    class="screen-reader-text"
-                  >
-                    Previous price:
-                  </span>
-                  <del
-                    class="wc-block-components-product-price__regular"
+                  <a
+                    class="wc-block-components-product-name"
+                    href="https://example.org"
                   >
-                    $12.80
-                  </del>
-                  <span
-                    class="screen-reader-text"
-                  >
-                    Discounted price:
-                  </span>
-                  <ins
-                    class="wc-block-components-product-price__value is-discounted"
-                  >
-                    $11.20
-                  </ins>
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-badge wc-block-components-sale-badge"
-              >
-                Save 
-                <span
-                  class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
-                >
-                  $1.60
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-metadata"
-              >
-                <div
-                  class="wc-block-components-product-metadata__description"
-                >
-                  <p>
-                    Lightweight baseball cap
-                  </p>
-                  
-
-                </div>
-                <ul
-                  class="wc-block-components-product-details"
-                >
-                  <li
-                    class="wc-block-components-product-details__color"
+                    Cap
+                  </a>
+                  <div
+                    class="wc-block-cart-item__prices"
                   >
                     <span
-                      class="wc-block-components-product-details__name"
+                      class="price wc-block-components-product-price"
                     >
-                      Color
-                      :
+                      <span
+                        class="screen-reader-text"
+                      >
+                        Previous price:
+                      </span>
+                      <del
+                        class="wc-block-components-product-price__regular"
+                      >
+                        $12.80
+                      </del>
+                      <span
+                        class="screen-reader-text"
+                      >
+                        Discounted price:
+                      </span>
+                      <ins
+                        class="wc-block-components-product-price__value is-discounted"
+                      >
+                        $11.20
+                      </ins>
                     </span>
-                     
+                  </div>
+                  <div
+                    class="wc-block-components-product-badge wc-block-components-sale-badge"
+                  >
+                    Save 
                     <span
-                      class="wc-block-components-product-details__value"
+                      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
                     >
-                      Orange
+                      $1.60
                     </span>
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="wc-block-cart-item__quantity"
-              >
-                <div
-                  class="wc-block-components-quantity-selector"
-                >
-                  <input
-                    aria-label="Quantity of Cap in your cart."
-                    class="wc-block-components-quantity-selector__input"
-                    min="0"
-                    step="1"
-                    type="number"
-                    value="1"
-                  />
-                  <button
-                    aria-label="Reduce quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-                    disabled=""
+                  </div>
+                  <div
+                    class="wc-block-components-product-metadata"
                   >
-                    －
-                  </button>
-                  <button
-                    aria-label="Increase quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                    <div
+                      class="wc-block-components-product-metadata__description"
+                    >
+                      <p>
+                        Lightweight baseball cap
+                      </p>
+                      
+
+                    </div>
+                    <ul
+                      class="wc-block-components-product-details"
+                    >
+                      <li
+                        class="wc-block-components-product-details__color"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Color
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Orange
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    class="wc-block-cart-item__quantity"
                   >
-                    ＋
-                  </button>
-                </div>
-                <button
-                  class="wc-block-cart-item__remove-link"
-                >
-                  Remove item
-                </button>
-              </div>
-            </td>
-            <td
-              class="wc-block-cart-item__total"
-            >
-              <div
-                class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                    <div
+                      class="wc-block-components-quantity-selector"
+                    >
+                      <input
+                        aria-label="Quantity of Cap in your cart."
+                        class="wc-block-components-quantity-selector__input"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <button
+                        aria-label="Reduce quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
+                        disabled=""
+                      >
+                        －
+                      </button>
+                      <button
+                        aria-label="Increase quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                      >
+                        ＋
+                      </button>
+                    </div>
+                    <button
+                      class="wc-block-cart-item__remove-link"
+                    >
+                      Remove item
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="wc-block-cart-item__total"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                  <div
+                    class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
                   >
-                    $11.20
-                  </span>
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      class="wc-block-components-sidebar wc-block-cart__sidebar"
-    >
-      <h2
-        class="wc-block-components-title wc-block-cart__totals-title"
-      >
-        Cart totals
-      </h2>
-      <div
-        class="wc-block-components-totals-item"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Subtotal
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $24.00
-        </span>
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $11.20
+                      </span>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
         <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-totals-coupon wc-block-components-panel has-border"
-      >
-        <div>
-          <button
-            aria-expanded="false"
-            class="wc-block-components-panel__button"
+          class="wc-block-components-sidebar wc-block-cart__sidebar"
+        >
+          <h2
+            class="wc-block-components-title wc-block-cart__totals-title"
+          >
+            Cart totals
+          </h2>
+          <div
+            class="wc-block-components-totals-item"
           >
-            <svg
-              aria-hidden="true"
-              class="wc-block-components-panel__button-icon"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
-              />
-            </svg>
             <span
-              aria-hidden="true"
+              class="wc-block-components-totals-item__label"
             >
-              Coupon code
+              Subtotal
             </span>
             <span
-              class="screen-reader-text"
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
             >
-              Apply a coupon code
+              $24.00
             </span>
-          </button>
-        </div>
-        <div
-          class="wc-block-components-panel__content"
-          hidden=""
-        >
+            <div
+              class="wc-block-components-totals-item__description"
+            />
+          </div>
           <div
-            class="wc-block-components-totals-coupon__content"
+            class="wc-block-components-totals-coupon wc-block-components-panel has-border"
           >
-            <form
-              class="wc-block-components-totals-coupon__form"
-            >
-              <div
-                class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
-              >
-                <input
-                  aria-describedby=""
-                  aria-label="Enter code"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  id="wc-block-components-totals-coupon__input-3"
-                  type="text"
-                  value=""
-                />
-                <label
-                  for="wc-block-components-totals-coupon__input-3"
-                >
-                  Enter code
-                </label>
-              </div>
+            <div>
               <button
-                class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
-                disabled=""
-                type="submit"
+                aria-expanded="false"
+                class="wc-block-components-panel__button"
               >
+                <svg
+                  aria-hidden="true"
+                  class="wc-block-components-panel__button-icon"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+                  />
+                </svg>
+                <span
+                  aria-hidden="true"
+                >
+                  Coupon code
+                </span>
                 <span
-                  class="wc-block-components-button__text"
+                  class="screen-reader-text"
                 >
-                  Apply
+                  Apply a coupon code
                 </span>
               </button>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        class="wc-block-components-discounts-meta"
-      />
-      <div
-        class="wc-block-components-totals-shipping"
-      >
-        <div
-          class="wc-block-components-totals-item"
-        >
-          <span
-            class="wc-block-components-totals-item__label"
-          >
-            Shipping
-          </span>
-          <span
-            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-          >
-            $0.00
-          </span>
-          <div
-            class="wc-block-components-totals-item__description"
-          >
-            <div
-              class="wc-block-components-totals-item__description wc-block-components-totals-shipping__via"
-            >
-              via
-               
-              Free shipping
             </div>
-          </div>
-        </div>
-        <fieldset
-          class="wc-block-components-totals-shipping__fieldset"
-        >
-          <legend
-            class="screen-reader-text"
-          >
-            Shipping options
-          </legend>
-          <div
-            class="wc-block-components-shipping-rates-control wc-block-components-totals-shipping__options"
-          >
             <div
-              class="wc-block-components-shipping-rates-control__package wc-block-components-panel"
+              class="wc-block-components-panel__content"
+              hidden=""
             >
-              <div>
-                <button
-                  aria-expanded="true"
-                  class="wc-block-components-panel__button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="wc-block-components-panel__button-icon"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z"
-                    />
-                  </svg>
-                  <div
-                    class="wc-block-components-shipping-rates-control__package-title"
-                  >
-                    Shipping
-                  </div>
-                </button>
-              </div>
               <div
-                class="wc-block-components-panel__content"
+                class=""
               >
                 <div
-                  class="wc-block-components-radio-control"
+                  aria-hidden="false"
+                  class=""
                 >
-                  <label
-                    class="wc-block-components-radio-control__option wc-block-components-radio-control__option-checked"
-                    for="radio-control-3-free_shipping:1"
+                  <div
+                    class="wc-block-components-totals-coupon__content"
                   >
-                    <input
-                      aria-describedby="radio-control-3-free_shipping:1__label radio-control-3-free_shipping:1__description"
-                      checked=""
-                      class="wc-block-components-radio-control__input"
-                      id="radio-control-3-free_shipping:1"
-                      name="radio-control-3"
-                      type="radio"
-                      value="free_shipping:1"
-                    />
-                    <div
-                      class="wc-block-components-radio-control__option-layout"
+                    <form
+                      class="wc-block-components-totals-coupon__form"
                     >
                       <div
-                        class="wc-block-components-radio-control__label-group"
+                        class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
                       >
-                        <span
-                          class="wc-block-components-radio-control__label"
-                          id="radio-control-3-free_shipping:1__label"
+                        <input
+                          aria-describedby=""
+                          aria-label="Enter code"
+                          autocapitalize="off"
+                          autocomplete="off"
+                          id="wc-block-components-totals-coupon__input-1"
+                          type="text"
+                          value=""
+                        />
+                        <label
+                          for="wc-block-components-totals-coupon__input-1"
                         >
-                          Free shipping
-                        </span>
+                          Enter code
+                        </label>
                       </div>
-                      <div
-                        class="wc-block-components-radio-control__description-group"
+                      <button
+                        class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
+                        disabled=""
+                        type="submit"
                       >
                         <span
-                          class="wc-block-components-radio-control__description"
-                          id="radio-control-3-free_shipping:1__description"
+                          class="wc-block-components-button__text"
                         >
-                          <span
-                            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
-                          >
-                            $0.00
-                          </span>
-                          
+                          Apply
                         </span>
-                      </div>
-                    </div>
-                  </label>
-                  <label
-                    class="wc-block-components-radio-control__option"
-                    for="radio-control-3-local_pickup:1"
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="wc-block-components-discounts-meta"
+          />
+          <div
+            class="wc-block-components-totals-shipping"
+          >
+            <div
+              class="wc-block-components-totals-item"
+            >
+              <span
+                class="wc-block-components-totals-item__label"
+              >
+                Shipping
+              </span>
+              <span
+                class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+              >
+                $0.00
+              </span>
+              <div
+                class="wc-block-components-totals-item__description"
+              >
+                <div
+                  class="wc-block-components-totals-item__description wc-block-components-totals-shipping__via"
+                >
+                  via
+                   
+                  Free shipping
+                </div>
+              </div>
+            </div>
+            <fieldset
+              class="wc-block-components-totals-shipping__fieldset"
+            >
+              <legend
+                class="screen-reader-text"
+              >
+                Shipping options
+              </legend>
+              <div
+                class=""
+              >
+                <div
+                  aria-hidden="false"
+                  class=""
+                >
+                  <div
+                    class="wc-block-components-shipping-rates-control wc-block-components-totals-shipping__options"
                   >
-                    <input
-                      aria-describedby="radio-control-3-local_pickup:1__label radio-control-3-local_pickup:1__description"
-                      class="wc-block-components-radio-control__input"
-                      id="radio-control-3-local_pickup:1"
-                      name="radio-control-3"
-                      type="radio"
-                      value="local_pickup:1"
-                    />
                     <div
-                      class="wc-block-components-radio-control__option-layout"
+                      class="wc-block-components-shipping-rates-control__package wc-block-components-panel"
                     >
-                      <div
-                        class="wc-block-components-radio-control__label-group"
-                      >
-                        <span
-                          class="wc-block-components-radio-control__label"
-                          id="radio-control-3-local_pickup:1__label"
+                      <div>
+                        <button
+                          aria-expanded="true"
+                          class="wc-block-components-panel__button"
                         >
-                          Local pickup
-                        </span>
+                          <svg
+                            aria-hidden="true"
+                            class="wc-block-components-panel__button-icon"
+                            focusable="false"
+                            height="24"
+                            role="img"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z"
+                            />
+                          </svg>
+                          <div
+                            class="wc-block-components-shipping-rates-control__package-title"
+                          >
+                            Shipping
+                          </div>
+                        </button>
                       </div>
                       <div
-                        class="wc-block-components-radio-control__description-group"
+                        class="wc-block-components-panel__content"
                       >
-                        <span
-                          class="wc-block-components-radio-control__description"
-                          id="radio-control-3-local_pickup:1__description"
+                        <div
+                          class="wc-block-components-radio-control"
                         >
-                          <span
-                            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                          <label
+                            class="wc-block-components-radio-control__option wc-block-components-radio-control__option-checked"
+                            for="radio-control-1-free_shipping:1"
                           >
-                            $2.00
-                          </span>
-                          
-                        </span>
+                            <input
+                              aria-describedby="radio-control-1-free_shipping:1__label radio-control-1-free_shipping:1__description"
+                              checked=""
+                              class="wc-block-components-radio-control__input"
+                              id="radio-control-1-free_shipping:1"
+                              name="radio-control-1"
+                              type="radio"
+                              value="free_shipping:1"
+                            />
+                            <div
+                              class="wc-block-components-radio-control__option-layout"
+                            >
+                              <div
+                                class="wc-block-components-radio-control__label-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__label"
+                                  id="radio-control-1-free_shipping:1__label"
+                                >
+                                  Free shipping
+                                </span>
+                              </div>
+                              <div
+                                class="wc-block-components-radio-control__description-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__description"
+                                  id="radio-control-1-free_shipping:1__description"
+                                >
+                                  <span
+                                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                                  >
+                                    $0.00
+                                  </span>
+                                  
+                                </span>
+                              </div>
+                            </div>
+                          </label>
+                          <label
+                            class="wc-block-components-radio-control__option"
+                            for="radio-control-1-local_pickup:1"
+                          >
+                            <input
+                              aria-describedby="radio-control-1-local_pickup:1__label radio-control-1-local_pickup:1__description"
+                              class="wc-block-components-radio-control__input"
+                              id="radio-control-1-local_pickup:1"
+                              name="radio-control-1"
+                              type="radio"
+                              value="local_pickup:1"
+                            />
+                            <div
+                              class="wc-block-components-radio-control__option-layout"
+                            >
+                              <div
+                                class="wc-block-components-radio-control__label-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__label"
+                                  id="radio-control-1-local_pickup:1__label"
+                                >
+                                  Local pickup
+                                </span>
+                              </div>
+                              <div
+                                class="wc-block-components-radio-control__description-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__description"
+                                  id="radio-control-1-local_pickup:1__description"
+                                >
+                                  <span
+                                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                                  >
+                                    $2.00
+                                  </span>
+                                  
+                                </span>
+                              </div>
+                            </div>
+                          </label>
+                        </div>
                       </div>
                     </div>
-                  </label>
+                  </div>
                 </div>
               </div>
-            </div>
+            </fieldset>
           </div>
-        </fieldset>
-      </div>
-      <div
-        class="wc-block-components-totals-item wc-block-components-totals-taxes"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Taxes
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $6.00
-        </span>
-        <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-totals-item wc-block-components-totals-footer-item"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Total
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $30.00
-        </span>
-        <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-order-meta"
-      />
-      <div
-        class="wc-block-cart__payment-options"
-      >
-        <div
-          class="wc-block-cart__submit"
-        >
           <div
-            aria-hidden="true"
-            style="bottom: 0px; left: 0px; opacity: 0; pointer-events: none; position: absolute; right: 0px; top: 0px; z-index: -1;"
+            class="wc-block-components-totals-item wc-block-components-totals-taxes"
+          >
+            <span
+              class="wc-block-components-totals-item__label"
+            >
+              Taxes
+            </span>
+            <span
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+            >
+              $6.00
+            </span>
+            <div
+              class="wc-block-components-totals-item__description"
+            />
+          </div>
+          <div
+            class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+          >
+            <span
+              class="wc-block-components-totals-item__label"
+            >
+              Total
+            </span>
+            <span
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+            >
+              $30.00
+            </span>
+            <div
+              class="wc-block-components-totals-item__description"
+            />
+          </div>
+          <div
+            class="wc-block-components-order-meta"
           />
           <div
-            class="wc-block-cart__submit-container"
+            class="wc-block-cart__payment-options"
           >
-            <a
-              class="components-button wc-block-components-button wc-block-cart__submit-button"
-              href=""
+            <div
+              class="wc-block-cart__submit"
             >
-              <span
-                class="wc-block-components-button__text"
+              <div
+                aria-hidden="true"
+                style="bottom: 0px; left: 0px; opacity: 0; pointer-events: none; position: absolute; right: 0px; top: 0px; z-index: -1;"
+              />
+              <div
+                class="wc-block-cart__submit-container"
               >
-                Proceed to Checkout
-              </span>
-            </a>
+                <a
+                  class="components-button wc-block-components-button wc-block-cart__submit-button"
+                  href=""
+                >
+                  <span
+                    class="wc-block-components-button__text"
+                  >
+                    Proceed to Checkout
+                  </span>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      <div
+        style="display: none;"
+      />
     </div>
   </div>
-  <div
-    style="display: none;"
-  />
 </div>
 `;
 
@@ -700,696 +728,724 @@ exports[`Testing cart Shows individual tax lines if the store is set to do so 1`
     aria-hidden="true"
     class="with-scroll-to-top__scroll-point"
   />
-  <h2
-    class="wc-block-components-title"
-  >
-    Your cart (3 items)
-  </h2>
   <div
-    class="wc-block-components-sidebar-layout wc-block-cart"
+    class=""
   >
-    <iframe
-      aria-hidden="true"
-      frameborder="0"
-      src="about:blank"
-      style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-      tabindex="-1"
-    />
     <div
-      class="wc-block-components-main wc-block-cart__main"
+      aria-hidden="false"
+      class=""
     >
-      <table
-        class="wc-block-cart-items"
+      <h2
+        class="wc-block-components-title"
       >
-        <thead>
-          <tr
-            class="wc-block-cart-items__header"
-          >
-            <th
-              class="wc-block-cart-items__header-image"
-            >
-              <span>
-                Product
-              </span>
-            </th>
-            <th
-              class="wc-block-cart-items__header-product"
-            >
-              <span>
-                Details
-              </span>
-            </th>
-            <th
-              class="wc-block-cart-items__header-total"
-            >
-              <span>
-                Total
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            class="wc-block-cart-items__row"
+        Your cart (3 items)
+      </h2>
+      <div
+        class="wc-block-components-sidebar-layout wc-block-cart"
+      >
+        <iframe
+          aria-hidden="true"
+          frameborder="0"
+          src="about:blank"
+          style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+          tabindex="-1"
+        />
+        <div
+          class="wc-block-components-main wc-block-cart__main"
+        >
+          <table
+            class="wc-block-cart-items"
           >
-            <td
-              aria-hidden="true"
-              class="wc-block-cart-item__image"
-            >
-              <a
-                href="https://example.org"
-                tabindex="-1"
-              >
-                <img
-                  alt=""
-                  src="assets/img/beanie.jpg"
-                />
-              </a>
-            </td>
-            <td
-              class="wc-block-cart-item__product"
-            >
-              <a
-                class="wc-block-components-product-name"
-                href="https://example.org"
-              >
-                Beanie
-              </a>
-              <div
-                class="wc-block-components-product-badge wc-block-components-product-low-stock-badge"
+            <thead>
+              <tr
+                class="wc-block-cart-items__header"
               >
-                2 left in stock
-              </div>
-              <div
-                class="wc-block-cart-item__prices"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                <th
+                  class="wc-block-cart-items__header-image"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
-                  >
-                    $6.40
+                  <span>
+                    Product
                   </span>
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-metadata"
+                </th>
+                <th
+                  class="wc-block-cart-items__header-product"
+                >
+                  <span>
+                    Details
+                  </span>
+                </th>
+                <th
+                  class="wc-block-cart-items__header-total"
+                >
+                  <span>
+                    Total
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="wc-block-cart-items__row"
               >
-                <div
-                  class="wc-block-components-product-metadata__description"
+                <td
+                  aria-hidden="true"
+                  class="wc-block-cart-item__image"
                 >
-                  <p>
-                    Warm hat for winter
-                  </p>
-                  
-
-                </div>
-                <ul
-                  class="wc-block-components-product-details"
+                  <a
+                    href="https://example.org"
+                    tabindex="-1"
+                  >
+                    <img
+                      alt=""
+                      src="assets/img/beanie.jpg"
+                    />
+                  </a>
+                </td>
+                <td
+                  class="wc-block-cart-item__product"
                 >
-                  <li
-                    class="wc-block-components-product-details__color"
+                  <a
+                    class="wc-block-components-product-name"
+                    href="https://example.org"
+                  >
+                    Beanie
+                  </a>
+                  <div
+                    class="wc-block-components-product-badge wc-block-components-product-low-stock-badge"
+                  >
+                    2 left in stock
+                  </div>
+                  <div
+                    class="wc-block-cart-item__prices"
                   >
                     <span
-                      class="wc-block-components-product-details__name"
+                      class="price wc-block-components-product-price"
                     >
-                      Color
-                      :
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $6.40
+                      </span>
                     </span>
-                     
-                    <span
-                      class="wc-block-components-product-details__value"
+                  </div>
+                  <div
+                    class="wc-block-components-product-metadata"
+                  >
+                    <div
+                      class="wc-block-components-product-metadata__description"
                     >
-                      Yellow
-                    </span>
-                  </li>
-                  <li
-                    class="wc-block-components-product-details__size"
+                      <p>
+                        Warm hat for winter
+                      </p>
+                      
+
+                    </div>
+                    <ul
+                      class="wc-block-components-product-details"
+                    >
+                      <li
+                        class="wc-block-components-product-details__color"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Color
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Yellow
+                        </span>
+                      </li>
+                      <li
+                        class="wc-block-components-product-details__size"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Size
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Small
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    class="wc-block-cart-item__quantity"
                   >
-                    <span
-                      class="wc-block-components-product-details__name"
+                    <div
+                      class="wc-block-components-quantity-selector"
                     >
-                      Size
-                      :
-                    </span>
-                     
-                    <span
-                      class="wc-block-components-product-details__value"
+                      <input
+                        aria-label="Quantity of Beanie in your cart."
+                        class="wc-block-components-quantity-selector__input"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <button
+                        aria-label="Reduce quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
+                        disabled=""
+                      >
+                        －
+                      </button>
+                      <button
+                        aria-label="Increase quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                      >
+                        ＋
+                      </button>
+                    </div>
+                    <button
+                      class="wc-block-cart-item__remove-link"
                     >
-                      Small
-                    </span>
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="wc-block-cart-item__quantity"
-              >
-                <div
-                  class="wc-block-components-quantity-selector"
+                      Remove item
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="wc-block-cart-item__total"
                 >
-                  <input
-                    aria-label="Quantity of Beanie in your cart."
-                    class="wc-block-components-quantity-selector__input"
-                    min="0"
-                    step="1"
-                    type="number"
-                    value="2"
-                  />
-                  <button
-                    aria-label="Reduce quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-                  >
-                    －
-                  </button>
-                  <button
-                    aria-label="Increase quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                  <div
+                    class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
                   >
-                    ＋
-                  </button>
-                </div>
-                <button
-                  class="wc-block-cart-item__remove-link"
-                >
-                  Remove item
-                </button>
-              </div>
-            </td>
-            <td
-              class="wc-block-cart-item__total"
-            >
-              <div
-                class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $12.80
+                      </span>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="wc-block-cart-items__row"
               >
-                <span
-                  class="price wc-block-components-product-price"
+                <td
+                  aria-hidden="true"
+                  class="wc-block-cart-item__image"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                  <a
+                    href="https://example.org"
+                    tabindex="-1"
                   >
-                    $12.80
-                  </span>
-                </span>
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="wc-block-cart-items__row"
-          >
-            <td
-              aria-hidden="true"
-              class="wc-block-cart-item__image"
-            >
-              <a
-                href="https://example.org"
-                tabindex="-1"
-              >
-                <img
-                  alt=""
-                  src="assets/img/cap.jpg"
-                />
-              </a>
-            </td>
-            <td
-              class="wc-block-cart-item__product"
-            >
-              <a
-                class="wc-block-components-product-name"
-                href="https://example.org"
-              >
-                Cap
-              </a>
-              <div
-                class="wc-block-cart-item__prices"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                    <img
+                      alt=""
+                      src="assets/img/cap.jpg"
+                    />
+                  </a>
+                </td>
+                <td
+                  class="wc-block-cart-item__product"
                 >
-                  <span
-                    class="screen-reader-text"
-                  >
-                    Previous price:
-                  </span>
-                  <del
-                    class="wc-block-components-product-price__regular"
-                  >
-                    $12.80
-                  </del>
-                  <span
-                    class="screen-reader-text"
+                  <a
+                    class="wc-block-components-product-name"
+                    href="https://example.org"
                   >
-                    Discounted price:
-                  </span>
-                  <ins
-                    class="wc-block-components-product-price__value is-discounted"
-                  >
-                    $11.20
-                  </ins>
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-badge wc-block-components-sale-badge"
-              >
-                Save 
-                <span
-                  class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
-                >
-                  $1.60
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-metadata"
-              >
-                <div
-                  class="wc-block-components-product-metadata__description"
-                >
-                  <p>
-                    Lightweight baseball cap
-                  </p>
-                  
-
-                </div>
-                <ul
-                  class="wc-block-components-product-details"
-                >
-                  <li
-                    class="wc-block-components-product-details__color"
+                    Cap
+                  </a>
+                  <div
+                    class="wc-block-cart-item__prices"
                   >
                     <span
-                      class="wc-block-components-product-details__name"
+                      class="price wc-block-components-product-price"
                     >
-                      Color
-                      :
+                      <span
+                        class="screen-reader-text"
+                      >
+                        Previous price:
+                      </span>
+                      <del
+                        class="wc-block-components-product-price__regular"
+                      >
+                        $12.80
+                      </del>
+                      <span
+                        class="screen-reader-text"
+                      >
+                        Discounted price:
+                      </span>
+                      <ins
+                        class="wc-block-components-product-price__value is-discounted"
+                      >
+                        $11.20
+                      </ins>
                     </span>
-                     
+                  </div>
+                  <div
+                    class="wc-block-components-product-badge wc-block-components-sale-badge"
+                  >
+                    Save 
                     <span
-                      class="wc-block-components-product-details__value"
+                      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
                     >
-                      Orange
+                      $1.60
                     </span>
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="wc-block-cart-item__quantity"
-              >
-                <div
-                  class="wc-block-components-quantity-selector"
-                >
-                  <input
-                    aria-label="Quantity of Cap in your cart."
-                    class="wc-block-components-quantity-selector__input"
-                    min="0"
-                    step="1"
-                    type="number"
-                    value="1"
-                  />
-                  <button
-                    aria-label="Reduce quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-                    disabled=""
+                  </div>
+                  <div
+                    class="wc-block-components-product-metadata"
                   >
-                    －
-                  </button>
-                  <button
-                    aria-label="Increase quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                    <div
+                      class="wc-block-components-product-metadata__description"
+                    >
+                      <p>
+                        Lightweight baseball cap
+                      </p>
+                      
+
+                    </div>
+                    <ul
+                      class="wc-block-components-product-details"
+                    >
+                      <li
+                        class="wc-block-components-product-details__color"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Color
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Orange
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    class="wc-block-cart-item__quantity"
                   >
-                    ＋
-                  </button>
-                </div>
-                <button
-                  class="wc-block-cart-item__remove-link"
-                >
-                  Remove item
-                </button>
-              </div>
-            </td>
-            <td
-              class="wc-block-cart-item__total"
-            >
-              <div
-                class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                    <div
+                      class="wc-block-components-quantity-selector"
+                    >
+                      <input
+                        aria-label="Quantity of Cap in your cart."
+                        class="wc-block-components-quantity-selector__input"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <button
+                        aria-label="Reduce quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
+                        disabled=""
+                      >
+                        －
+                      </button>
+                      <button
+                        aria-label="Increase quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                      >
+                        ＋
+                      </button>
+                    </div>
+                    <button
+                      class="wc-block-cart-item__remove-link"
+                    >
+                      Remove item
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="wc-block-cart-item__total"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                  <div
+                    class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
                   >
-                    $11.20
-                  </span>
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      class="wc-block-components-sidebar wc-block-cart__sidebar"
-    >
-      <h2
-        class="wc-block-components-title wc-block-cart__totals-title"
-      >
-        Cart totals
-      </h2>
-      <div
-        class="wc-block-components-totals-item"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Subtotal
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $24.00
-        </span>
-        <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-totals-coupon wc-block-components-panel has-border"
-      >
-        <div>
-          <button
-            aria-expanded="false"
-            class="wc-block-components-panel__button"
-          >
-            <svg
-              aria-hidden="true"
-              class="wc-block-components-panel__button-icon"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
-              />
-            </svg>
-            <span
-              aria-hidden="true"
-            >
-              Coupon code
-            </span>
-            <span
-              class="screen-reader-text"
-            >
-              Apply a coupon code
-            </span>
-          </button>
-        </div>
-        <div
-          class="wc-block-components-panel__content"
-          hidden=""
-        >
-          <div
-            class="wc-block-components-totals-coupon__content"
-          >
-            <form
-              class="wc-block-components-totals-coupon__form"
-            >
-              <div
-                class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
-              >
-                <input
-                  aria-describedby=""
-                  aria-label="Enter code"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  id="wc-block-components-totals-coupon__input-5"
-                  type="text"
-                  value=""
-                />
-                <label
-                  for="wc-block-components-totals-coupon__input-5"
-                >
-                  Enter code
-                </label>
-              </div>
-              <button
-                class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
-                disabled=""
-                type="submit"
-              >
-                <span
-                  class="wc-block-components-button__text"
-                >
-                  Apply
-                </span>
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        class="wc-block-components-discounts-meta"
-      />
-      <div
-        class="wc-block-components-totals-shipping"
-      >
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $11.20
+                      </span>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
         <div
-          class="wc-block-components-totals-item"
+          class="wc-block-components-sidebar wc-block-cart__sidebar"
         >
-          <span
-            class="wc-block-components-totals-item__label"
-          >
-            Shipping
-          </span>
-          <span
-            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+          <h2
+            class="wc-block-components-title wc-block-cart__totals-title"
           >
-            $0.00
-          </span>
+            Cart totals
+          </h2>
           <div
-            class="wc-block-components-totals-item__description"
+            class="wc-block-components-totals-item"
           >
-            <div
-              class="wc-block-components-totals-item__description wc-block-components-totals-shipping__via"
+            <span
+              class="wc-block-components-totals-item__label"
             >
-              via
-               
-              Free shipping
-            </div>
+              Subtotal
+            </span>
+            <span
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+            >
+              $24.00
+            </span>
+            <div
+              class="wc-block-components-totals-item__description"
+            />
           </div>
-        </div>
-        <fieldset
-          class="wc-block-components-totals-shipping__fieldset"
-        >
-          <legend
-            class="screen-reader-text"
-          >
-            Shipping options
-          </legend>
           <div
-            class="wc-block-components-shipping-rates-control wc-block-components-totals-shipping__options"
+            class="wc-block-components-totals-coupon wc-block-components-panel has-border"
           >
+            <div>
+              <button
+                aria-expanded="false"
+                class="wc-block-components-panel__button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="wc-block-components-panel__button-icon"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+                  />
+                </svg>
+                <span
+                  aria-hidden="true"
+                >
+                  Coupon code
+                </span>
+                <span
+                  class="screen-reader-text"
+                >
+                  Apply a coupon code
+                </span>
+              </button>
+            </div>
             <div
-              class="wc-block-components-shipping-rates-control__package wc-block-components-panel"
+              class="wc-block-components-panel__content"
+              hidden=""
             >
-              <div>
-                <button
-                  aria-expanded="true"
-                  class="wc-block-components-panel__button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="wc-block-components-panel__button-icon"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z"
-                    />
-                  </svg>
-                  <div
-                    class="wc-block-components-shipping-rates-control__package-title"
-                  >
-                    Shipping
-                  </div>
-                </button>
-              </div>
               <div
-                class="wc-block-components-panel__content"
+                class=""
               >
                 <div
-                  class="wc-block-components-radio-control"
+                  aria-hidden="false"
+                  class=""
                 >
-                  <label
-                    class="wc-block-components-radio-control__option wc-block-components-radio-control__option-checked"
-                    for="radio-control-5-free_shipping:1"
+                  <div
+                    class="wc-block-components-totals-coupon__content"
                   >
-                    <input
-                      aria-describedby="radio-control-5-free_shipping:1__label radio-control-5-free_shipping:1__description"
-                      checked=""
-                      class="wc-block-components-radio-control__input"
-                      id="radio-control-5-free_shipping:1"
-                      name="radio-control-5"
-                      type="radio"
-                      value="free_shipping:1"
-                    />
-                    <div
-                      class="wc-block-components-radio-control__option-layout"
+                    <form
+                      class="wc-block-components-totals-coupon__form"
                     >
                       <div
-                        class="wc-block-components-radio-control__label-group"
+                        class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
                       >
-                        <span
-                          class="wc-block-components-radio-control__label"
-                          id="radio-control-5-free_shipping:1__label"
+                        <input
+                          aria-describedby=""
+                          aria-label="Enter code"
+                          autocapitalize="off"
+                          autocomplete="off"
+                          id="wc-block-components-totals-coupon__input-2"
+                          type="text"
+                          value=""
+                        />
+                        <label
+                          for="wc-block-components-totals-coupon__input-2"
                         >
-                          Free shipping
-                        </span>
+                          Enter code
+                        </label>
                       </div>
-                      <div
-                        class="wc-block-components-radio-control__description-group"
+                      <button
+                        class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
+                        disabled=""
+                        type="submit"
                       >
                         <span
-                          class="wc-block-components-radio-control__description"
-                          id="radio-control-5-free_shipping:1__description"
+                          class="wc-block-components-button__text"
                         >
-                          <span
-                            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
-                          >
-                            $0.00
-                          </span>
-                          
+                          Apply
                         </span>
-                      </div>
-                    </div>
-                  </label>
-                  <label
-                    class="wc-block-components-radio-control__option"
-                    for="radio-control-5-local_pickup:1"
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="wc-block-components-discounts-meta"
+          />
+          <div
+            class="wc-block-components-totals-shipping"
+          >
+            <div
+              class="wc-block-components-totals-item"
+            >
+              <span
+                class="wc-block-components-totals-item__label"
+              >
+                Shipping
+              </span>
+              <span
+                class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+              >
+                $0.00
+              </span>
+              <div
+                class="wc-block-components-totals-item__description"
+              >
+                <div
+                  class="wc-block-components-totals-item__description wc-block-components-totals-shipping__via"
+                >
+                  via
+                   
+                  Free shipping
+                </div>
+              </div>
+            </div>
+            <fieldset
+              class="wc-block-components-totals-shipping__fieldset"
+            >
+              <legend
+                class="screen-reader-text"
+              >
+                Shipping options
+              </legend>
+              <div
+                class=""
+              >
+                <div
+                  aria-hidden="false"
+                  class=""
+                >
+                  <div
+                    class="wc-block-components-shipping-rates-control wc-block-components-totals-shipping__options"
                   >
-                    <input
-                      aria-describedby="radio-control-5-local_pickup:1__label radio-control-5-local_pickup:1__description"
-                      class="wc-block-components-radio-control__input"
-                      id="radio-control-5-local_pickup:1"
-                      name="radio-control-5"
-                      type="radio"
-                      value="local_pickup:1"
-                    />
                     <div
-                      class="wc-block-components-radio-control__option-layout"
+                      class="wc-block-components-shipping-rates-control__package wc-block-components-panel"
                     >
-                      <div
-                        class="wc-block-components-radio-control__label-group"
-                      >
-                        <span
-                          class="wc-block-components-radio-control__label"
-                          id="radio-control-5-local_pickup:1__label"
+                      <div>
+                        <button
+                          aria-expanded="true"
+                          class="wc-block-components-panel__button"
                         >
-                          Local pickup
-                        </span>
+                          <svg
+                            aria-hidden="true"
+                            class="wc-block-components-panel__button-icon"
+                            focusable="false"
+                            height="24"
+                            role="img"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z"
+                            />
+                          </svg>
+                          <div
+                            class="wc-block-components-shipping-rates-control__package-title"
+                          >
+                            Shipping
+                          </div>
+                        </button>
                       </div>
                       <div
-                        class="wc-block-components-radio-control__description-group"
+                        class="wc-block-components-panel__content"
                       >
-                        <span
-                          class="wc-block-components-radio-control__description"
-                          id="radio-control-5-local_pickup:1__description"
+                        <div
+                          class="wc-block-components-radio-control"
                         >
-                          <span
-                            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                          <label
+                            class="wc-block-components-radio-control__option wc-block-components-radio-control__option-checked"
+                            for="radio-control-2-free_shipping:1"
                           >
-                            $2.00
-                          </span>
-                          
-                        </span>
+                            <input
+                              aria-describedby="radio-control-2-free_shipping:1__label radio-control-2-free_shipping:1__description"
+                              checked=""
+                              class="wc-block-components-radio-control__input"
+                              id="radio-control-2-free_shipping:1"
+                              name="radio-control-2"
+                              type="radio"
+                              value="free_shipping:1"
+                            />
+                            <div
+                              class="wc-block-components-radio-control__option-layout"
+                            >
+                              <div
+                                class="wc-block-components-radio-control__label-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__label"
+                                  id="radio-control-2-free_shipping:1__label"
+                                >
+                                  Free shipping
+                                </span>
+                              </div>
+                              <div
+                                class="wc-block-components-radio-control__description-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__description"
+                                  id="radio-control-2-free_shipping:1__description"
+                                >
+                                  <span
+                                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                                  >
+                                    $0.00
+                                  </span>
+                                  
+                                </span>
+                              </div>
+                            </div>
+                          </label>
+                          <label
+                            class="wc-block-components-radio-control__option"
+                            for="radio-control-2-local_pickup:1"
+                          >
+                            <input
+                              aria-describedby="radio-control-2-local_pickup:1__label radio-control-2-local_pickup:1__description"
+                              class="wc-block-components-radio-control__input"
+                              id="radio-control-2-local_pickup:1"
+                              name="radio-control-2"
+                              type="radio"
+                              value="local_pickup:1"
+                            />
+                            <div
+                              class="wc-block-components-radio-control__option-layout"
+                            >
+                              <div
+                                class="wc-block-components-radio-control__label-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__label"
+                                  id="radio-control-2-local_pickup:1__label"
+                                >
+                                  Local pickup
+                                </span>
+                              </div>
+                              <div
+                                class="wc-block-components-radio-control__description-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__description"
+                                  id="radio-control-2-local_pickup:1__description"
+                                >
+                                  <span
+                                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                                  >
+                                    $2.00
+                                  </span>
+                                  
+                                </span>
+                              </div>
+                            </div>
+                          </label>
+                        </div>
                       </div>
                     </div>
-                  </label>
+                  </div>
                 </div>
               </div>
-            </div>
+            </fieldset>
           </div>
-        </fieldset>
-      </div>
-      <div
-        class="wc-block-components-totals-taxes"
-      >
-        <div
-          class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
-        >
-          <span
-            class="wc-block-components-totals-item__label"
-          >
-            Sales tax
-          </span>
-          <span
-            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+          <div
+            class="wc-block-components-totals-taxes"
           >
-            $6.00
-          </span>
+            <div
+              class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
+            >
+              <span
+                class="wc-block-components-totals-item__label"
+              >
+                Sales tax
+              </span>
+              <span
+                class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+              >
+                $6.00
+              </span>
+              <div
+                class="wc-block-components-totals-item__description"
+              />
+            </div>
+             
+          </div>
           <div
-            class="wc-block-components-totals-item__description"
-          />
-        </div>
-         
-      </div>
-      <div
-        class="wc-block-components-totals-item wc-block-components-totals-footer-item"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Total
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $30.00
-        </span>
-        <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-order-meta"
-      />
-      <div
-        class="wc-block-cart__payment-options"
-      >
-        <div
-          class="wc-block-cart__submit"
-        >
+            class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+          >
+            <span
+              class="wc-block-components-totals-item__label"
+            >
+              Total
+            </span>
+            <span
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+            >
+              $30.00
+            </span>
+            <div
+              class="wc-block-components-totals-item__description"
+            />
+          </div>
           <div
-            aria-hidden="true"
-            style="bottom: 0px; left: 0px; opacity: 0; pointer-events: none; position: absolute; right: 0px; top: 0px; z-index: -1;"
+            class="wc-block-components-order-meta"
           />
           <div
-            class="wc-block-cart__submit-container"
+            class="wc-block-cart__payment-options"
           >
-            <a
-              class="components-button wc-block-components-button wc-block-cart__submit-button"
-              href=""
+            <div
+              class="wc-block-cart__submit"
             >
-              <span
-                class="wc-block-components-button__text"
+              <div
+                aria-hidden="true"
+                style="bottom: 0px; left: 0px; opacity: 0; pointer-events: none; position: absolute; right: 0px; top: 0px; z-index: -1;"
+              />
+              <div
+                class="wc-block-cart__submit-container"
               >
-                Proceed to Checkout
-              </span>
-            </a>
+                <a
+                  class="components-button wc-block-components-button wc-block-cart__submit-button"
+                  href=""
+                >
+                  <span
+                    class="wc-block-components-button__text"
+                  >
+                    Proceed to Checkout
+                  </span>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      <div
+        style="display: none;"
+      />
     </div>
   </div>
-  <div
-    style="display: none;"
-  />
 </div>
 `;
 
@@ -1399,695 +1455,723 @@ exports[`Testing cart Shows rate percentages after tax lines if the block is set
     aria-hidden="true"
     class="with-scroll-to-top__scroll-point"
   />
-  <h2
-    class="wc-block-components-title"
-  >
-    Your cart (3 items)
-  </h2>
   <div
-    class="wc-block-components-sidebar-layout wc-block-cart"
+    class=""
   >
-    <iframe
-      aria-hidden="true"
-      frameborder="0"
-      src="about:blank"
-      style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-      tabindex="-1"
-    />
     <div
-      class="wc-block-components-main wc-block-cart__main"
+      aria-hidden="false"
+      class=""
     >
-      <table
-        class="wc-block-cart-items"
+      <h2
+        class="wc-block-components-title"
       >
-        <thead>
-          <tr
-            class="wc-block-cart-items__header"
-          >
-            <th
-              class="wc-block-cart-items__header-image"
-            >
-              <span>
-                Product
-              </span>
-            </th>
-            <th
-              class="wc-block-cart-items__header-product"
-            >
-              <span>
-                Details
-              </span>
-            </th>
-            <th
-              class="wc-block-cart-items__header-total"
-            >
-              <span>
-                Total
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            class="wc-block-cart-items__row"
+        Your cart (3 items)
+      </h2>
+      <div
+        class="wc-block-components-sidebar-layout wc-block-cart"
+      >
+        <iframe
+          aria-hidden="true"
+          frameborder="0"
+          src="about:blank"
+          style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+          tabindex="-1"
+        />
+        <div
+          class="wc-block-components-main wc-block-cart__main"
+        >
+          <table
+            class="wc-block-cart-items"
           >
-            <td
-              aria-hidden="true"
-              class="wc-block-cart-item__image"
-            >
-              <a
-                href="https://example.org"
-                tabindex="-1"
+            <thead>
+              <tr
+                class="wc-block-cart-items__header"
               >
-                <img
-                  alt=""
-                  src="assets/img/beanie.jpg"
-                />
-              </a>
-            </td>
-            <td
-              class="wc-block-cart-item__product"
-            >
-              <a
-                class="wc-block-components-product-name"
-                href="https://example.org"
-              >
-                Beanie
-              </a>
-              <div
-                class="wc-block-components-product-badge wc-block-components-product-low-stock-badge"
-              >
-                2 left in stock
-              </div>
-              <div
-                class="wc-block-cart-item__prices"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                <th
+                  class="wc-block-cart-items__header-image"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
-                  >
-                    $6.40
+                  <span>
+                    Product
                   </span>
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-metadata"
-              >
-                <div
-                  class="wc-block-components-product-metadata__description"
-                >
-                  <p>
-                    Warm hat for winter
-                  </p>
-                  
-
-                </div>
-                <ul
-                  class="wc-block-components-product-details"
-                >
-                  <li
-                    class="wc-block-components-product-details__color"
-                  >
-                    <span
-                      class="wc-block-components-product-details__name"
-                    >
-                      Color
-                      :
-                    </span>
-                     
-                    <span
-                      class="wc-block-components-product-details__value"
-                    >
-                      Yellow
-                    </span>
-                  </li>
-                  <li
-                    class="wc-block-components-product-details__size"
-                  >
-                    <span
-                      class="wc-block-components-product-details__name"
-                    >
-                      Size
-                      :
-                    </span>
-                     
-                    <span
-                      class="wc-block-components-product-details__value"
-                    >
-                      Small
-                    </span>
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="wc-block-cart-item__quantity"
-              >
-                <div
-                  class="wc-block-components-quantity-selector"
+                </th>
+                <th
+                  class="wc-block-cart-items__header-product"
                 >
-                  <input
-                    aria-label="Quantity of Beanie in your cart."
-                    class="wc-block-components-quantity-selector__input"
-                    min="0"
-                    step="1"
-                    type="number"
-                    value="2"
-                  />
-                  <button
-                    aria-label="Reduce quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-                  >
-                    －
-                  </button>
-                  <button
-                    aria-label="Increase quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
-                  >
-                    ＋
-                  </button>
-                </div>
-                <button
-                  class="wc-block-cart-item__remove-link"
+                  <span>
+                    Details
+                  </span>
+                </th>
+                <th
+                  class="wc-block-cart-items__header-total"
                 >
-                  Remove item
-                </button>
-              </div>
-            </td>
-            <td
-              class="wc-block-cart-item__total"
-            >
-              <div
-                class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
+                  <span>
+                    Total
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="wc-block-cart-items__row"
               >
-                <span
-                  class="price wc-block-components-product-price"
+                <td
+                  aria-hidden="true"
+                  class="wc-block-cart-item__image"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                  <a
+                    href="https://example.org"
+                    tabindex="-1"
                   >
-                    $12.80
-                  </span>
-                </span>
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="wc-block-cart-items__row"
-          >
-            <td
-              aria-hidden="true"
-              class="wc-block-cart-item__image"
-            >
-              <a
-                href="https://example.org"
-                tabindex="-1"
-              >
-                <img
-                  alt=""
-                  src="assets/img/cap.jpg"
-                />
-              </a>
-            </td>
-            <td
-              class="wc-block-cart-item__product"
-            >
-              <a
-                class="wc-block-components-product-name"
-                href="https://example.org"
-              >
-                Cap
-              </a>
-              <div
-                class="wc-block-cart-item__prices"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                    <img
+                      alt=""
+                      src="assets/img/beanie.jpg"
+                    />
+                  </a>
+                </td>
+                <td
+                  class="wc-block-cart-item__product"
                 >
-                  <span
-                    class="screen-reader-text"
+                  <a
+                    class="wc-block-components-product-name"
+                    href="https://example.org"
                   >
-                    Previous price:
-                  </span>
-                  <del
-                    class="wc-block-components-product-price__regular"
+                    Beanie
+                  </a>
+                  <div
+                    class="wc-block-components-product-badge wc-block-components-product-low-stock-badge"
                   >
-                    $12.80
-                  </del>
-                  <span
-                    class="screen-reader-text"
+                    2 left in stock
+                  </div>
+                  <div
+                    class="wc-block-cart-item__prices"
                   >
-                    Discounted price:
-                  </span>
-                  <ins
-                    class="wc-block-components-product-price__value is-discounted"
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $6.40
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    class="wc-block-components-product-metadata"
                   >
-                    $11.20
-                  </ins>
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-badge wc-block-components-sale-badge"
-              >
-                Save 
-                <span
-                  class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                    <div
+                      class="wc-block-components-product-metadata__description"
+                    >
+                      <p>
+                        Warm hat for winter
+                      </p>
+                      
+
+                    </div>
+                    <ul
+                      class="wc-block-components-product-details"
+                    >
+                      <li
+                        class="wc-block-components-product-details__color"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Color
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Yellow
+                        </span>
+                      </li>
+                      <li
+                        class="wc-block-components-product-details__size"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Size
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Small
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    class="wc-block-cart-item__quantity"
+                  >
+                    <div
+                      class="wc-block-components-quantity-selector"
+                    >
+                      <input
+                        aria-label="Quantity of Beanie in your cart."
+                        class="wc-block-components-quantity-selector__input"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <button
+                        aria-label="Reduce quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
+                        disabled=""
+                      >
+                        －
+                      </button>
+                      <button
+                        aria-label="Increase quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                      >
+                        ＋
+                      </button>
+                    </div>
+                    <button
+                      class="wc-block-cart-item__remove-link"
+                    >
+                      Remove item
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="wc-block-cart-item__total"
                 >
-                  $1.60
-                </span>
-              </div>
-              <div
-                class="wc-block-components-product-metadata"
+                  <div
+                    class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
+                  >
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $12.80
+                      </span>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="wc-block-cart-items__row"
               >
-                <div
-                  class="wc-block-components-product-metadata__description"
+                <td
+                  aria-hidden="true"
+                  class="wc-block-cart-item__image"
                 >
-                  <p>
-                    Lightweight baseball cap
-                  </p>
-                  
-
-                </div>
-                <ul
-                  class="wc-block-components-product-details"
+                  <a
+                    href="https://example.org"
+                    tabindex="-1"
+                  >
+                    <img
+                      alt=""
+                      src="assets/img/cap.jpg"
+                    />
+                  </a>
+                </td>
+                <td
+                  class="wc-block-cart-item__product"
                 >
-                  <li
-                    class="wc-block-components-product-details__color"
+                  <a
+                    class="wc-block-components-product-name"
+                    href="https://example.org"
+                  >
+                    Cap
+                  </a>
+                  <div
+                    class="wc-block-cart-item__prices"
                   >
                     <span
-                      class="wc-block-components-product-details__name"
+                      class="price wc-block-components-product-price"
                     >
-                      Color
-                      :
+                      <span
+                        class="screen-reader-text"
+                      >
+                        Previous price:
+                      </span>
+                      <del
+                        class="wc-block-components-product-price__regular"
+                      >
+                        $12.80
+                      </del>
+                      <span
+                        class="screen-reader-text"
+                      >
+                        Discounted price:
+                      </span>
+                      <ins
+                        class="wc-block-components-product-price__value is-discounted"
+                      >
+                        $11.20
+                      </ins>
                     </span>
-                     
+                  </div>
+                  <div
+                    class="wc-block-components-product-badge wc-block-components-sale-badge"
+                  >
+                    Save 
                     <span
-                      class="wc-block-components-product-details__value"
+                      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
                     >
-                      Orange
+                      $1.60
                     </span>
-                  </li>
-                </ul>
-              </div>
-              <div
-                class="wc-block-cart-item__quantity"
-              >
-                <div
-                  class="wc-block-components-quantity-selector"
-                >
-                  <input
-                    aria-label="Quantity of Cap in your cart."
-                    class="wc-block-components-quantity-selector__input"
-                    min="0"
-                    step="1"
-                    type="number"
-                    value="1"
-                  />
-                  <button
-                    aria-label="Reduce quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
-                    disabled=""
+                  </div>
+                  <div
+                    class="wc-block-components-product-metadata"
                   >
-                    －
-                  </button>
-                  <button
-                    aria-label="Increase quantity"
-                    class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                    <div
+                      class="wc-block-components-product-metadata__description"
+                    >
+                      <p>
+                        Lightweight baseball cap
+                      </p>
+                      
+
+                    </div>
+                    <ul
+                      class="wc-block-components-product-details"
+                    >
+                      <li
+                        class="wc-block-components-product-details__color"
+                      >
+                        <span
+                          class="wc-block-components-product-details__name"
+                        >
+                          Color
+                          :
+                        </span>
+                         
+                        <span
+                          class="wc-block-components-product-details__value"
+                        >
+                          Orange
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    class="wc-block-cart-item__quantity"
                   >
-                    ＋
-                  </button>
-                </div>
-                <button
-                  class="wc-block-cart-item__remove-link"
-                >
-                  Remove item
-                </button>
-              </div>
-            </td>
-            <td
-              class="wc-block-cart-item__total"
-            >
-              <div
-                class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
-              >
-                <span
-                  class="price wc-block-components-product-price"
+                    <div
+                      class="wc-block-components-quantity-selector"
+                    >
+                      <input
+                        aria-label="Quantity of Cap in your cart."
+                        class="wc-block-components-quantity-selector__input"
+                        min="0"
+                        step="1"
+                        type="number"
+                        value="1"
+                      />
+                      <button
+                        aria-label="Reduce quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
+                        disabled=""
+                      >
+                        －
+                      </button>
+                      <button
+                        aria-label="Increase quantity"
+                        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
+                      >
+                        ＋
+                      </button>
+                    </div>
+                    <button
+                      class="wc-block-cart-item__remove-link"
+                    >
+                      Remove item
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="wc-block-cart-item__total"
                 >
-                  <span
-                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                  <div
+                    class="wc-block-cart-item__total-price-and-sale-badge-wrapper"
                   >
-                    $11.20
-                  </span>
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div
-      class="wc-block-components-sidebar wc-block-cart__sidebar"
-    >
-      <h2
-        class="wc-block-components-title wc-block-cart__totals-title"
-      >
-        Cart totals
-      </h2>
-      <div
-        class="wc-block-components-totals-item"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Subtotal
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $24.00
-        </span>
+                    <span
+                      class="price wc-block-components-product-price"
+                    >
+                      <span
+                        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+                      >
+                        $11.20
+                      </span>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
         <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-totals-coupon wc-block-components-panel has-border"
-      >
-        <div>
-          <button
-            aria-expanded="false"
-            class="wc-block-components-panel__button"
+          class="wc-block-components-sidebar wc-block-cart__sidebar"
+        >
+          <h2
+            class="wc-block-components-title wc-block-cart__totals-title"
+          >
+            Cart totals
+          </h2>
+          <div
+            class="wc-block-components-totals-item"
           >
-            <svg
-              aria-hidden="true"
-              class="wc-block-components-panel__button-icon"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
-              />
-            </svg>
             <span
-              aria-hidden="true"
+              class="wc-block-components-totals-item__label"
             >
-              Coupon code
+              Subtotal
             </span>
             <span
-              class="screen-reader-text"
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
             >
-              Apply a coupon code
+              $24.00
             </span>
-          </button>
-        </div>
-        <div
-          class="wc-block-components-panel__content"
-          hidden=""
-        >
+            <div
+              class="wc-block-components-totals-item__description"
+            />
+          </div>
           <div
-            class="wc-block-components-totals-coupon__content"
+            class="wc-block-components-totals-coupon wc-block-components-panel has-border"
           >
-            <form
-              class="wc-block-components-totals-coupon__form"
-            >
-              <div
-                class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
-              >
-                <input
-                  aria-describedby=""
-                  aria-label="Enter code"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  id="wc-block-components-totals-coupon__input-7"
-                  type="text"
-                  value=""
-                />
-                <label
-                  for="wc-block-components-totals-coupon__input-7"
-                >
-                  Enter code
-                </label>
-              </div>
+            <div>
               <button
-                class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
-                disabled=""
-                type="submit"
+                aria-expanded="false"
+                class="wc-block-components-panel__button"
               >
+                <svg
+                  aria-hidden="true"
+                  class="wc-block-components-panel__button-icon"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M17 9.4L12 14 7 9.4l-1 1.2 6 5.4 6-5.4z"
+                  />
+                </svg>
+                <span
+                  aria-hidden="true"
+                >
+                  Coupon code
+                </span>
                 <span
-                  class="wc-block-components-button__text"
+                  class="screen-reader-text"
                 >
-                  Apply
+                  Apply a coupon code
                 </span>
               </button>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        class="wc-block-components-discounts-meta"
-      />
-      <div
-        class="wc-block-components-totals-shipping"
-      >
-        <div
-          class="wc-block-components-totals-item"
-        >
-          <span
-            class="wc-block-components-totals-item__label"
-          >
-            Shipping
-          </span>
-          <span
-            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-          >
-            $0.00
-          </span>
-          <div
-            class="wc-block-components-totals-item__description"
-          >
-            <div
-              class="wc-block-components-totals-item__description wc-block-components-totals-shipping__via"
-            >
-              via
-               
-              Free shipping
             </div>
-          </div>
-        </div>
-        <fieldset
-          class="wc-block-components-totals-shipping__fieldset"
-        >
-          <legend
-            class="screen-reader-text"
-          >
-            Shipping options
-          </legend>
-          <div
-            class="wc-block-components-shipping-rates-control wc-block-components-totals-shipping__options"
-          >
             <div
-              class="wc-block-components-shipping-rates-control__package wc-block-components-panel"
+              class="wc-block-components-panel__content"
+              hidden=""
             >
-              <div>
-                <button
-                  aria-expanded="true"
-                  class="wc-block-components-panel__button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="wc-block-components-panel__button-icon"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z"
-                    />
-                  </svg>
-                  <div
-                    class="wc-block-components-shipping-rates-control__package-title"
-                  >
-                    Shipping
-                  </div>
-                </button>
-              </div>
               <div
-                class="wc-block-components-panel__content"
+                class=""
               >
                 <div
-                  class="wc-block-components-radio-control"
+                  aria-hidden="false"
+                  class=""
                 >
-                  <label
-                    class="wc-block-components-radio-control__option wc-block-components-radio-control__option-checked"
-                    for="radio-control-7-free_shipping:1"
+                  <div
+                    class="wc-block-components-totals-coupon__content"
                   >
-                    <input
-                      aria-describedby="radio-control-7-free_shipping:1__label radio-control-7-free_shipping:1__description"
-                      checked=""
-                      class="wc-block-components-radio-control__input"
-                      id="radio-control-7-free_shipping:1"
-                      name="radio-control-7"
-                      type="radio"
-                      value="free_shipping:1"
-                    />
-                    <div
-                      class="wc-block-components-radio-control__option-layout"
+                    <form
+                      class="wc-block-components-totals-coupon__form"
                     >
                       <div
-                        class="wc-block-components-radio-control__label-group"
+                        class="wc-block-components-text-input wc-block-components-totals-coupon__input is-active"
                       >
-                        <span
-                          class="wc-block-components-radio-control__label"
-                          id="radio-control-7-free_shipping:1__label"
+                        <input
+                          aria-describedby=""
+                          aria-label="Enter code"
+                          autocapitalize="off"
+                          autocomplete="off"
+                          id="wc-block-components-totals-coupon__input-3"
+                          type="text"
+                          value=""
+                        />
+                        <label
+                          for="wc-block-components-totals-coupon__input-3"
                         >
-                          Free shipping
-                        </span>
+                          Enter code
+                        </label>
                       </div>
-                      <div
-                        class="wc-block-components-radio-control__description-group"
+                      <button
+                        class="components-button wc-block-components-button wc-block-components-totals-coupon__button"
+                        disabled=""
+                        type="submit"
                       >
                         <span
-                          class="wc-block-components-radio-control__description"
-                          id="radio-control-7-free_shipping:1__description"
+                          class="wc-block-components-button__text"
                         >
-                          <span
-                            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
-                          >
-                            $0.00
-                          </span>
-                          
+                          Apply
                         </span>
-                      </div>
-                    </div>
-                  </label>
-                  <label
-                    class="wc-block-components-radio-control__option"
-                    for="radio-control-7-local_pickup:1"
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="wc-block-components-discounts-meta"
+          />
+          <div
+            class="wc-block-components-totals-shipping"
+          >
+            <div
+              class="wc-block-components-totals-item"
+            >
+              <span
+                class="wc-block-components-totals-item__label"
+              >
+                Shipping
+              </span>
+              <span
+                class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+              >
+                $0.00
+              </span>
+              <div
+                class="wc-block-components-totals-item__description"
+              >
+                <div
+                  class="wc-block-components-totals-item__description wc-block-components-totals-shipping__via"
+                >
+                  via
+                   
+                  Free shipping
+                </div>
+              </div>
+            </div>
+            <fieldset
+              class="wc-block-components-totals-shipping__fieldset"
+            >
+              <legend
+                class="screen-reader-text"
+              >
+                Shipping options
+              </legend>
+              <div
+                class=""
+              >
+                <div
+                  aria-hidden="false"
+                  class=""
+                >
+                  <div
+                    class="wc-block-components-shipping-rates-control wc-block-components-totals-shipping__options"
                   >
-                    <input
-                      aria-describedby="radio-control-7-local_pickup:1__label radio-control-7-local_pickup:1__description"
-                      class="wc-block-components-radio-control__input"
-                      id="radio-control-7-local_pickup:1"
-                      name="radio-control-7"
-                      type="radio"
-                      value="local_pickup:1"
-                    />
                     <div
-                      class="wc-block-components-radio-control__option-layout"
+                      class="wc-block-components-shipping-rates-control__package wc-block-components-panel"
                     >
-                      <div
-                        class="wc-block-components-radio-control__label-group"
-                      >
-                        <span
-                          class="wc-block-components-radio-control__label"
-                          id="radio-control-7-local_pickup:1__label"
+                      <div>
+                        <button
+                          aria-expanded="true"
+                          class="wc-block-components-panel__button"
                         >
-                          Local pickup
-                        </span>
+                          <svg
+                            aria-hidden="true"
+                            class="wc-block-components-panel__button-icon"
+                            focusable="false"
+                            height="24"
+                            role="img"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 8l-6 5.4 1 1.2 5-4.6 5 4.6 1-1.2z"
+                            />
+                          </svg>
+                          <div
+                            class="wc-block-components-shipping-rates-control__package-title"
+                          >
+                            Shipping
+                          </div>
+                        </button>
                       </div>
                       <div
-                        class="wc-block-components-radio-control__description-group"
+                        class="wc-block-components-panel__content"
                       >
-                        <span
-                          class="wc-block-components-radio-control__description"
-                          id="radio-control-7-local_pickup:1__description"
+                        <div
+                          class="wc-block-components-radio-control"
                         >
-                          <span
-                            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                          <label
+                            class="wc-block-components-radio-control__option wc-block-components-radio-control__option-checked"
+                            for="radio-control-3-free_shipping:1"
                           >
-                            $2.00
-                          </span>
-                          
-                        </span>
+                            <input
+                              aria-describedby="radio-control-3-free_shipping:1__label radio-control-3-free_shipping:1__description"
+                              checked=""
+                              class="wc-block-components-radio-control__input"
+                              id="radio-control-3-free_shipping:1"
+                              name="radio-control-3"
+                              type="radio"
+                              value="free_shipping:1"
+                            />
+                            <div
+                              class="wc-block-components-radio-control__option-layout"
+                            >
+                              <div
+                                class="wc-block-components-radio-control__label-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__label"
+                                  id="radio-control-3-free_shipping:1__label"
+                                >
+                                  Free shipping
+                                </span>
+                              </div>
+                              <div
+                                class="wc-block-components-radio-control__description-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__description"
+                                  id="radio-control-3-free_shipping:1__description"
+                                >
+                                  <span
+                                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                                  >
+                                    $0.00
+                                  </span>
+                                  
+                                </span>
+                              </div>
+                            </div>
+                          </label>
+                          <label
+                            class="wc-block-components-radio-control__option"
+                            for="radio-control-3-local_pickup:1"
+                          >
+                            <input
+                              aria-describedby="radio-control-3-local_pickup:1__label radio-control-3-local_pickup:1__description"
+                              class="wc-block-components-radio-control__input"
+                              id="radio-control-3-local_pickup:1"
+                              name="radio-control-3"
+                              type="radio"
+                              value="local_pickup:1"
+                            />
+                            <div
+                              class="wc-block-components-radio-control__option-layout"
+                            >
+                              <div
+                                class="wc-block-components-radio-control__label-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__label"
+                                  id="radio-control-3-local_pickup:1__label"
+                                >
+                                  Local pickup
+                                </span>
+                              </div>
+                              <div
+                                class="wc-block-components-radio-control__description-group"
+                              >
+                                <span
+                                  class="wc-block-components-radio-control__description"
+                                  id="radio-control-3-local_pickup:1__description"
+                                >
+                                  <span
+                                    class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount"
+                                  >
+                                    $2.00
+                                  </span>
+                                  
+                                </span>
+                              </div>
+                            </div>
+                          </label>
+                        </div>
                       </div>
                     </div>
-                  </label>
+                  </div>
                 </div>
               </div>
-            </div>
+            </fieldset>
           </div>
-        </fieldset>
-      </div>
-      <div
-        class="wc-block-components-totals-taxes"
-      >
-        <div
-          class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
-        >
-          <span
-            class="wc-block-components-totals-item__label"
-          >
-            Sales tax 20%
-          </span>
-          <span
-            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+          <div
+            class="wc-block-components-totals-taxes"
           >
-            $6.00
-          </span>
+            <div
+              class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
+            >
+              <span
+                class="wc-block-components-totals-item__label"
+              >
+                Sales tax 20%
+              </span>
+              <span
+                class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+              >
+                $6.00
+              </span>
+              <div
+                class="wc-block-components-totals-item__description"
+              />
+            </div>
+             
+          </div>
           <div
-            class="wc-block-components-totals-item__description"
-          />
-        </div>
-         
-      </div>
-      <div
-        class="wc-block-components-totals-item wc-block-components-totals-footer-item"
-      >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Total
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $30.00
-        </span>
-        <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-      <div
-        class="wc-block-components-order-meta"
-      />
-      <div
-        class="wc-block-cart__payment-options"
-      >
-        <div
-          class="wc-block-cart__submit"
-        >
+            class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+          >
+            <span
+              class="wc-block-components-totals-item__label"
+            >
+              Total
+            </span>
+            <span
+              class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+            >
+              $30.00
+            </span>
+            <div
+              class="wc-block-components-totals-item__description"
+            />
+          </div>
           <div
-            aria-hidden="true"
-            style="bottom: 0px; left: 0px; opacity: 0; pointer-events: none; position: absolute; right: 0px; top: 0px; z-index: -1;"
+            class="wc-block-components-order-meta"
           />
           <div
-            class="wc-block-cart__submit-container"
+            class="wc-block-cart__payment-options"
           >
-            <a
-              class="components-button wc-block-components-button wc-block-cart__submit-button"
-              href=""
+            <div
+              class="wc-block-cart__submit"
             >
-              <span
-                class="wc-block-components-button__text"
+              <div
+                aria-hidden="true"
+                style="bottom: 0px; left: 0px; opacity: 0; pointer-events: none; position: absolute; right: 0px; top: 0px; z-index: -1;"
+              />
+              <div
+                class="wc-block-cart__submit-container"
               >
-                Proceed to Checkout
-              </span>
-            </a>
+                <a
+                  class="components-button wc-block-components-button wc-block-cart__submit-button"
+                  href=""
+                >
+                  <span
+                    class="wc-block-components-button__text"
+                  >
+                    Proceed to Checkout
+                  </span>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      <div
+        style="display: none;"
+      />
     </div>
   </div>
-  <div
-    style="display: none;"
-  />
 </div>
 `;

From 2585395738369bc45e9e20bb2d21123ac1ab1ff9 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 11 Jun 2021 17:47:48 +0100
Subject: [PATCH 19/32] Restore useRef

---
 .../payment-method-data-context.tsx            | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index e0e14d06622..68e5863b960 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -6,6 +6,7 @@ import {
 	useContext,
 	useReducer,
 	useCallback,
+	useRef,
 	useEffect,
 	useMemo,
 } from '@wordpress/element';
@@ -38,7 +39,6 @@ import {
 	reducer as emitReducer,
 } from './event-emit';
 import { useValidationContext } from '../../validation';
-import { usePrevious } from '../../../../hooks/use-previous';
 import { useStoreNotices } from '../../../hooks/use-store-notices';
 import { useEmitResponse } from '../../../hooks/use-emit-response';
 import { getCustomerPaymentMethods } from './utils';
@@ -79,7 +79,12 @@ export const PaymentMethodDataProvider = ( {
 	} = useEmitResponse();
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
 	const { onPaymentProcessing } = useEventEmitters( observerDispatch );
-	const currentObservers = usePrevious( observers );
+	const currentObservers = useRef( observers );
+
+	// ensure observers are always current.
+	useEffect( () => {
+		currentObservers.current = observers;
+	}, [ observers ] );
 
 	const [ paymentData, dispatch ] = useReducer(
 		reducer,
@@ -157,7 +162,11 @@ export const PaymentMethodDataProvider = ( {
 					activePaymentMethod
 				),
 		} ),
-		[ paymentData.currentStatus, activePaymentMethod ]
+		[
+			paymentData.currentStatus,
+			paymentData.expressPaymentMethods,
+			activePaymentMethod,
+		]
 	);
 
 	// flip payment to processing if checkout processing is complete, there are no errors, and payment status is started.
@@ -209,7 +218,7 @@ export const PaymentMethodDataProvider = ( {
 		if ( currentStatus.isProcessing ) {
 			removeNotice( 'wc-payment-error', noticeContexts.PAYMENTS );
 			emitEventWithAbort(
-				currentObservers,
+				currentObservers.current,
 				EMIT_TYPES.PAYMENT_PROCESSING,
 				{}
 			).then( ( observerResponses ) => {
@@ -273,7 +282,6 @@ export const PaymentMethodDataProvider = ( {
 			} );
 		}
 	}, [
-		currentObservers,
 		currentStatus.isProcessing,
 		setValidationErrors,
 		setPaymentStatus,

From 3ab9be8c8770e2c433e1d3b5b19d576cf008231d Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 11 Jun 2021 18:23:38 +0100
Subject: [PATCH 20/32] Fix missing function removed by accident

---
 .../payment-method-data-context.tsx           | 31 +++++++++++++++++++
 assets/js/base/hooks/use-previous.ts          |  7 +++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index 68e5863b960..699469d0691 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -169,6 +169,37 @@ export const PaymentMethodDataProvider = ( {
 		]
 	);
 
+	// Update the active (selected) payment method when it is empty, or invalid.
+	useEffect( () => {
+		if ( ! paymentMethodsInitialized ) {
+			return;
+		}
+
+		const paymentMethodKeys = Object.keys( paymentData.paymentMethods );
+		const allPaymentMethodKeys = [
+			...paymentMethodKeys,
+			...Object.keys( paymentData.expressPaymentMethods ),
+		];
+		const defaultPaymentMethodKey = paymentMethodKeys.length
+			? paymentMethodKeys[ 0 ]
+			: '';
+
+		if (
+			! allPaymentMethodKeys.includes( activePaymentMethod ) &&
+			activePaymentMethod !== defaultPaymentMethodKey
+		) {
+			setPaymentStatus().pristine();
+			setActivePaymentMethod( defaultPaymentMethodKey );
+		}
+	}, [
+		paymentMethodsInitialized,
+		activePaymentMethod,
+		setActivePaymentMethod,
+		setPaymentStatus,
+		paymentData.paymentMethods,
+		paymentData.expressPaymentMethods,
+	] );
+
 	// flip payment to processing if checkout processing is complete, there are no errors, and payment status is started.
 	useEffect( () => {
 		if (
diff --git a/assets/js/base/hooks/use-previous.ts b/assets/js/base/hooks/use-previous.ts
index c652c4ca727..b40f20d0c1f 100644
--- a/assets/js/base/hooks/use-previous.ts
+++ b/assets/js/base/hooks/use-previous.ts
@@ -13,8 +13,11 @@ interface Validation< T > {
  * @param {Function} [validation] Function that needs to validate for the value
  *                                to be updated.
  */
-export function usePrevious< T >( value: T, validation?: Validation< T > ): T {
-	const ref = useRef< T >( value );
+export function usePrevious< T >(
+	value: T,
+	validation?: Validation< T >
+): T | undefined {
+	const ref = useRef< T >();
 
 	useEffect( () => {
 		if (

From df238587e4bab84a9ad3a88aba23ef7b4e1c3ea8 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 11 Jun 2021 19:00:54 +0100
Subject: [PATCH 21/32] Fix setActivePaymentMethod and started status (so saved
 methods still allow express to be initialized)

---
 .../payment-methods/constants.ts              |  2 +
 .../payment-method-data-context.tsx           | 37 ++++++++++---------
 .../cart-checkout/payment-methods/reducer.ts  | 19 ++++------
 .../use-active-payment-method.ts              | 24 +++++-------
 4 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts
index 06b5d47ed0a..7e044aced31 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts
@@ -37,6 +37,7 @@ export const DEFAULT_PAYMENT_DATA_CONTEXT_STATE: PaymentMethodDataContextState =
 
 export const DEFAULT_PAYMENT_METHOD_DATA: PaymentMethodDataContextType = {
 	setPaymentStatus: () => ( {
+		pristine: () => void null,
 		started: () => void null,
 		processing: () => void null,
 		completed: () => void null,
@@ -54,6 +55,7 @@ export const DEFAULT_PAYMENT_METHOD_DATA: PaymentMethodDataContextType = {
 		hasError: false,
 		hasFailed: false,
 		isSuccessful: false,
+		isDoingExpressPayment: false,
 	},
 	paymentStatuses: STATUS,
 	paymentMethodData: {},
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index 699469d0691..28c3b30064a 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -171,33 +171,36 @@ export const PaymentMethodDataProvider = ( {
 
 	// Update the active (selected) payment method when it is empty, or invalid.
 	useEffect( () => {
-		if ( ! paymentMethodsInitialized ) {
-			return;
-		}
-
 		const paymentMethodKeys = Object.keys( paymentData.paymentMethods );
 		const allPaymentMethodKeys = [
 			...paymentMethodKeys,
 			...Object.keys( paymentData.expressPaymentMethods ),
 		];
-		const defaultPaymentMethodKey = paymentMethodKeys.length
-			? paymentMethodKeys[ 0 ]
-			: '';
-
-		if (
-			! allPaymentMethodKeys.includes( activePaymentMethod ) &&
-			activePaymentMethod !== defaultPaymentMethodKey
-		) {
-			setPaymentStatus().pristine();
-			setActivePaymentMethod( defaultPaymentMethodKey );
+		if ( ! paymentMethodsInitialized || ! paymentMethodKeys.length ) {
+			return;
 		}
+
+		setActivePaymentMethod( ( currentActivePaymentMethod ) => {
+			// If there's no active payment method, or the active payment method has
+			// been removed (e.g. COD vs shipping methods), set one as active.
+			// Note: It's possible that the active payment method might be an
+			// express payment method. So registered express payment methods are
+			// included in the check here.
+			if (
+				! currentActivePaymentMethod ||
+				! allPaymentMethodKeys.includes( currentActivePaymentMethod )
+			) {
+				setPaymentStatus().pristine();
+				return Object.keys( paymentData.paymentMethods )[ 0 ];
+			}
+			return currentActivePaymentMethod;
+		} );
 	}, [
 		paymentMethodsInitialized,
-		activePaymentMethod,
-		setActivePaymentMethod,
-		setPaymentStatus,
 		paymentData.paymentMethods,
 		paymentData.expressPaymentMethods,
+		setActivePaymentMethod,
+		setPaymentStatus,
 	] );
 
 	// flip payment to processing if checkout processing is complete, there are no errors, and payment status is started.
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts
index 7e56779d21b..eb58e0584e3 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts
@@ -32,17 +32,14 @@ const reducer = (
 ): PaymentMethodDataContextState => {
 	switch ( type ) {
 		case STATUS.STARTED:
-			return state.currentStatus !== STATUS.STARTED
-				? {
-						...state,
-						currentStatus: STATUS.STARTED,
-						paymentMethodData:
-							paymentMethodData || state.paymentMethodData,
-						hasSavedToken: hasSavedPaymentToken(
-							paymentMethodData || state.paymentMethodData
-						),
-				  }
-				: state;
+			return {
+				...state,
+				currentStatus: STATUS.STARTED,
+				paymentMethodData: paymentMethodData || state.paymentMethodData,
+				hasSavedToken: hasSavedPaymentToken(
+					paymentMethodData || state.paymentMethodData
+				),
+			};
 		case STATUS.ERROR:
 			return state.currentStatus !== STATUS.ERROR
 				? {
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts
index 26b25468561..cf01e64b88d 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/use-active-payment-method.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,29 +11,23 @@ import { useStoreEvents } from '../../../hooks/use-store-events';
 export const useActivePaymentMethod = (): {
 	activePaymentMethod: string;
 	activeSavedToken: string;
-	setActivePaymentMethod: ( paymentMethodSlug: string ) => void;
+	setActivePaymentMethod: React.Dispatch< React.SetStateAction< string > >;
 	setActiveSavedToken: ( token: string ) => void;
 } => {
 	const { dispatchCheckoutEvent } = useStoreEvents();
 
 	// The active payment method - e.g. Stripe CC or BACS.
-	const [ activePaymentMethod, setActive ] = useState( '' );
+	const [ activePaymentMethod, setActivePaymentMethod ] = useState( '' );
 
 	// If a previously saved payment method is active, the token for that method. For example, a for a Stripe CC card saved to user account.
 	const [ activeSavedToken, setActiveSavedToken ] = useState( '' );
 
-	/**
-	 * Callback function for setting the active payment method and triggering an event to track.
-	 */
-	const setActivePaymentMethod = useCallback(
-		( paymentMethodSlug ) => {
-			setActive( paymentMethodSlug );
-			dispatchCheckoutEvent( 'set-active-payment-method', {
-				paymentMethodSlug,
-			} );
-		},
-		[ dispatchCheckoutEvent ]
-	);
+	// Trigger event on change.
+	useEffect( () => {
+		dispatchCheckoutEvent( 'set-active-payment-method', {
+			activePaymentMethod,
+		} );
+	}, [ dispatchCheckoutEvent, activePaymentMethod ] );
 
 	return {
 		activePaymentMethod,

From 8a7e07d79c57475172875241d2ffab74c74cdf60 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 11:28:01 +0100
Subject: [PATCH 22/32] Loading Mask Todo

---
 assets/js/base/components/loading-mask/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/base/components/loading-mask/index.js b/assets/js/base/components/loading-mask/index.js
index 1a9ec056b1f..257d6a51016 100644
--- a/assets/js/base/components/loading-mask/index.js
+++ b/assets/js/base/components/loading-mask/index.js
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import './style.scss';
 import Spinner from '../spinner';
 
+// @todo Find a way to block buttons/form components when LoadingMask isLoading
 const LoadingMask = ( {
 	children,
 	className,

From 989f02e3e7c0590ae5832c787ef5d904949efb88 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 12:15:17 +0100
Subject: [PATCH 23/32] Remove boolean shallow equals

---
 .../hooks/payment-methods/use-payment-methods.js       | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-methods.js b/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
index 7e48be3ed06..8be2531b708 100644
--- a/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
+++ b/assets/js/base/context/hooks/payment-methods/use-payment-methods.js
@@ -20,20 +20,14 @@ const usePaymentMethodState = ( express = false ) => {
 	const currentExpressPaymentMethods = useShallowEqual(
 		expressPaymentMethods
 	);
-	const currentPaymentMethodsInitialized = useShallowEqual(
-		paymentMethodsInitialized
-	);
-	const currentExpressPaymentMethodsInitialized = useShallowEqual(
-		expressPaymentMethodsInitialized
-	);
 
 	return {
 		paymentMethods: express
 			? currentExpressPaymentMethods
 			: currentPaymentMethods,
 		isInitialized: express
-			? currentExpressPaymentMethodsInitialized
-			: currentPaymentMethodsInitialized,
+			? expressPaymentMethodsInitialized
+			: paymentMethodsInitialized,
 	};
 };
 

From 5dc39a86a42c59d89b2b52383d9277ee766bed6c Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 12:16:10 +0100
Subject: [PATCH 24/32] Missing dep

---
 .../payment-methods/use-payment-method-dispatchers.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts
index bfb8bace252..06d2eaa5d1c 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-dispatchers.ts
@@ -39,7 +39,7 @@ export const usePaymentMethodDataDispatchers = (
 					actions.setShouldSavePaymentMethod( shouldSave )
 				),
 		} ),
-		[]
+		[ dispatch ]
 	);
 
 	const setPaymentStatus = useCallback(

From b8ba959ee00eb6f58c424aca063f6d682d9dd242 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 12:18:50 +0100
Subject: [PATCH 25/32] Memoize typo

---
 .../cart-checkout/payment-methods/express-payment-methods.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index 8cc4820b882..fcdc71648cd 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -87,7 +87,7 @@ const ExpressPaymentMethods = () => {
 	);
 
 	/**
-	 * @todo Find a way to Memorize Express Payment Method Content
+	 * @todo Find a way to Memoize Express Payment Method Content
 	 *
 	 * Payment method content could potentially become a bottleneck if lots of logic is ran in the content component. It
 	 * Currently re-renders excessively but is not easy to useMemo because paymentMethodInterface could become stale.

From fb51e958e2de0adc9dcac20a355668ad9a3529c3 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 12:45:37 +0100
Subject: [PATCH 26/32] Document changes in useStoreEvents

---
 assets/js/base/context/hooks/use-store-events.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/js/base/context/hooks/use-store-events.ts b/assets/js/base/context/hooks/use-store-events.ts
index db0e9e3d0ab..5a9a1200ac6 100644
--- a/assets/js/base/context/hooks/use-store-events.ts
+++ b/assets/js/base/context/hooks/use-store-events.ts
@@ -24,6 +24,8 @@ export const useStoreEvents = (): {
 	const storeCart = useStoreCart();
 	const currentStoreCart = useRef( storeCart );
 
+	// Track the latest version of the cart so we can use the current value in our callback function below without triggering
+	// other useEffect hooks using dispatchCheckoutEvent as a dependency.
 	useEffect( () => {
 		currentStoreCart.current = storeCart;
 	}, [ storeCart ] );
@@ -44,13 +46,11 @@ export const useStoreEvents = (): {
 	const dispatchCheckoutEvent = useCallback(
 		( eventName, eventParams = {} ) => {
 			try {
-				const cartParam = currentStoreCart.current;
-
 				doAction(
 					`experimental__woocommerce_blocks-checkout-${ eventName }`,
 					{
 						...eventParams,
-						cartParam,
+						storeCart: currentStoreCart.current,
 					}
 				);
 			} catch ( e ) {

From 9d34dae2d71c1d4a390397563352020079a53785 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 13:01:31 +0100
Subject: [PATCH 27/32] Replace expressPaymentMethodActive

---
 .../cart-checkout/checkout/processor/index.js | 20 +++++++++----------
 .../payment-methods/constants.ts              |  1 +
 .../payment-method-data-context.tsx           | 15 +++++++-------
 .../cart-checkout/payment-methods/types.ts    |  2 ++
 .../payment-methods/payment-method-options.js |  7 ++-----
 5 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/assets/js/base/context/providers/cart-checkout/checkout/processor/index.js b/assets/js/base/context/providers/cart-checkout/checkout/processor/index.js
index b8677d3626a..a7cec2d861d 100644
--- a/assets/js/base/context/providers/cart-checkout/checkout/processor/index.js
+++ b/assets/js/base/context/providers/cart-checkout/checkout/processor/index.js
@@ -52,6 +52,7 @@ const CheckoutProcessor = () => {
 	const { cartNeedsPayment, receiveCart } = useStoreCart();
 	const {
 		activePaymentMethod,
+		isExpressPaymentMethodActive,
 		currentStatus: currentPaymentStatus,
 		paymentMethodData,
 		expressPaymentMethods,
@@ -63,9 +64,6 @@ const CheckoutProcessor = () => {
 	const currentShippingAddress = useRef( shippingAddress );
 	const currentRedirectUrl = useRef( redirectUrl );
 	const [ isProcessingOrder, setIsProcessingOrder ] = useState( false );
-	const expressPaymentMethodActive = Object.keys(
-		expressPaymentMethods
-	).includes( activePaymentMethod );
 
 	const paymentMethodId = useMemo( () => {
 		const merged = { ...expressPaymentMethods, ...paymentMethods };
@@ -73,20 +71,20 @@ const CheckoutProcessor = () => {
 	}, [ activePaymentMethod, expressPaymentMethods, paymentMethods ] );
 
 	const checkoutWillHaveError =
-		( hasValidationErrors && ! expressPaymentMethodActive ) ||
+		( hasValidationErrors && ! isExpressPaymentMethodActive ) ||
 		currentPaymentStatus.hasError ||
 		shippingErrorStatus.hasError;
 
 	// If express payment method is active, let's suppress notices
 	useEffect( () => {
-		setIsSuppressed( expressPaymentMethodActive );
-	}, [ expressPaymentMethodActive, setIsSuppressed ] );
+		setIsSuppressed( isExpressPaymentMethodActive );
+	}, [ isExpressPaymentMethodActive, setIsSuppressed ] );
 
 	useEffect( () => {
 		if (
 			checkoutWillHaveError !== checkoutHasError &&
 			( checkoutIsProcessing || checkoutIsBeforeProcessing ) &&
-			! expressPaymentMethodActive
+			! isExpressPaymentMethodActive
 		) {
 			dispatchActions.setHasError( checkoutWillHaveError );
 		}
@@ -95,7 +93,7 @@ const CheckoutProcessor = () => {
 		checkoutHasError,
 		checkoutIsProcessing,
 		checkoutIsBeforeProcessing,
-		expressPaymentMethodActive,
+		isExpressPaymentMethodActive,
 		dispatchActions,
 	] );
 
@@ -146,21 +144,21 @@ const CheckoutProcessor = () => {
 
 	useEffect( () => {
 		let unsubscribeProcessing;
-		if ( ! expressPaymentMethodActive ) {
+		if ( ! isExpressPaymentMethodActive ) {
 			unsubscribeProcessing = onCheckoutValidationBeforeProcessing(
 				checkValidation,
 				0
 			);
 		}
 		return () => {
-			if ( ! expressPaymentMethodActive ) {
+			if ( ! isExpressPaymentMethodActive ) {
 				unsubscribeProcessing();
 			}
 		};
 	}, [
 		onCheckoutValidationBeforeProcessing,
 		checkValidation,
-		expressPaymentMethodActive,
+		isExpressPaymentMethodActive,
 	] );
 
 	const processOrder = useCallback( () => {
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts
index 7e044aced31..f8c9bd7dd89 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts
@@ -71,6 +71,7 @@ export const DEFAULT_PAYMENT_METHOD_DATA: PaymentMethodDataContextType = {
 	expressPaymentMethodsInitialized: false,
 	onPaymentProcessing: () => () => () => void null,
 	setExpressPaymentError: () => void null,
+	isExpressPaymentMethodActive: false,
 	setShouldSavePayment: () => void null,
 	shouldSavePayment: false,
 };
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
index 28c3b30064a..919185a2a66 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx
@@ -143,6 +143,10 @@ export const PaymentMethodDataProvider = ( {
 		[ addErrorNotice, noticeContexts.EXPRESS_PAYMENTS, removeNotice ]
 	);
 
+	const isExpressPaymentMethodActive = Object.keys(
+		paymentData.expressPaymentMethods
+	).includes( activePaymentMethod );
+
 	const currentStatus = useMemo(
 		() => ( {
 			isPristine: paymentData.currentStatus === STATUS.PRISTINE,
@@ -158,15 +162,9 @@ export const PaymentMethodDataProvider = ( {
 			isSuccessful: paymentData.currentStatus === STATUS.SUCCESS,
 			isDoingExpressPayment:
 				paymentData.currentStatus !== STATUS.PRISTINE &&
-				Object.keys( paymentData.expressPaymentMethods ).includes(
-					activePaymentMethod
-				),
+				isExpressPaymentMethodActive,
 		} ),
-		[
-			paymentData.currentStatus,
-			paymentData.expressPaymentMethods,
-			activePaymentMethod,
-		]
+		[ paymentData.currentStatus, isExpressPaymentMethodActive ]
 	);
 
 	// Update the active (selected) payment method when it is empty, or invalid.
@@ -344,6 +342,7 @@ export const PaymentMethodDataProvider = ( {
 		paymentMethodsInitialized,
 		expressPaymentMethodsInitialized,
 		setExpressPaymentError,
+		isExpressPaymentMethodActive,
 		shouldSavePayment: paymentData.shouldSavePaymentMethod,
 		setShouldSavePayment: dispatchActions.setShouldSavePayment,
 	};
diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
index 99f74df3386..f076931d584 100644
--- a/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
+++ b/assets/js/base/context/providers/cart-checkout/payment-methods/types.ts
@@ -152,6 +152,8 @@ export type PaymentMethodDataContextType = {
 	onPaymentProcessing: ReturnType< typeof emitterCallback >;
 	// A function used by express payment methods to indicate an error for checkout to handle. It receives an error message string. Does not change payment status.
 	setExpressPaymentError: ( error: string ) => void;
+	// True if an express payment method is active.
+	isExpressPaymentMethodActive: boolean;
 	// A function used to set the shouldSavePayment value.
 	setShouldSavePayment: ( shouldSavePayment: boolean ) => void;
 	// True means that the configured payment method option is saved for the customer.
diff --git a/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js b/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
index 782c9a78266..9c77c459419 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
@@ -30,7 +30,7 @@ const PaymentMethodOptions = () => {
 		setActivePaymentMethod,
 		activeSavedToken,
 		setActiveSavedToken,
-		expressPaymentMethods,
+		isExpressPaymentMethodActive,
 		customerPaymentMethods,
 	} = usePaymentMethodDataContext();
 	const { paymentMethods } = usePaymentMethods();
@@ -38,9 +38,6 @@ const PaymentMethodOptions = () => {
 		activePaymentMethod,
 		...paymentMethodInterface
 	} = usePaymentMethodInterface();
-	const expressPaymentMethodActive = Object.keys(
-		expressPaymentMethods
-	).includes( activePaymentMethod );
 	const { noticeContexts } = useEmitResponse();
 	const { removeNotice } = useStoreNotices();
 	const { isEditor } = useEditorContext();
@@ -82,7 +79,7 @@ const PaymentMethodOptions = () => {
 		'disable-radio-control': isSinglePaymentMethod,
 	} );
 
-	return expressPaymentMethodActive ? null : (
+	return isExpressPaymentMethodActive ? null : (
 		<RadioControlAccordion
 			id={ 'wc-payment-method-options' }
 			className={ singleOptionClass }

From 7eb865bdd9bb737d97ad2c20eda5009acfbeec3f Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 14:21:35 +0100
Subject: [PATCH 28/32] setExpressPaymentError deprecation

---
 .../use-payment-method-interface.ts                | 14 +++++++++++++-
 .../payment-methods/express-payment-methods.js     | 14 ++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
index d6765f960fe..1e61c1b22e1 100644
--- a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
+++ b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
@@ -7,6 +7,7 @@ import { useEffect, useRef } from '@wordpress/element';
 import PaymentMethodLabel from '@woocommerce/base-components/cart-checkout/payment-method-label';
 import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
 import { getSetting } from '@woocommerce/settings';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -127,7 +128,18 @@ export const usePaymentMethodInterface = (): Record< string, unknown > => {
 		},
 		onSubmit,
 		paymentStatus: currentStatus,
-		setExpressPaymentError,
+		setExpressPaymentError: ( errorMessage = '' ) => {
+			deprecated(
+				'setExpressPaymentError should only be used by Express Payment Methods (using the provided onError handler).',
+				{
+					alternative: '',
+					plugin: 'woocommerce-gutenberg-products-block',
+					link:
+						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
+				}
+			);
+			setExpressPaymentError( errorMessage );
+		},
 		shippingData: {
 			shippingRates,
 			shippingRatesLoading,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index fcdc71648cd..5f7708d4896 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -16,6 +16,7 @@ import {
 	useEditorContext,
 	usePaymentMethodDataContext,
 } from '@woocommerce/base-context';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -107,6 +108,19 @@ const ExpressPaymentMethods = () => {
 							onClick: onExpressPaymentClick( id ),
 							onClose: onExpressPaymentClose,
 							onError: onExpressPaymentError,
+							setExpressPaymentError: ( errorMessage = '' ) => {
+								deprecated(
+									'Express Payment Methods should use the provided onError handler instead.',
+									{
+										alternative: 'onError',
+										plugin:
+											'woocommerce-gutenberg-products-block',
+										link:
+											'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
+									}
+								);
+								onExpressPaymentError( errorMessage );
+							},
 						} ) }
 					</li>
 				) : null;

From 407ab91a67c3c16c356965e081208b3a876ffc03 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 16:12:52 +0100
Subject: [PATCH 29/32] Only change status if an error is passed

---
 .../payment-methods/express-payment-methods.js              | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index 5f7708d4896..dfc556f1d6b 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -119,7 +119,11 @@ const ExpressPaymentMethods = () => {
 											'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
 									}
 								);
-								onExpressPaymentError( errorMessage );
+								if ( errorMessage ) {
+									onExpressPaymentError( errorMessage );
+								} else {
+									setExpressPaymentError( '' );
+								}
 							},
 						} ) }
 					</li>

From dc19123ba06ed68096507a4dfc9c19835f909861 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 15 Jun 2021 17:08:25 +0100
Subject: [PATCH 30/32] Track disabled state via useCheckoutSubmit

---
 .../cart-checkout/place-order-button/index.js      |  6 +++++-
 .../js/base/context/hooks/use-checkout-submit.js   | 14 ++++++++++----
 .../checkout/form/billing-fields-step.js           |  7 +++----
 .../checkout/form/contact-fields-step.js           |  7 +++++--
 .../checkout/form/order-notes-step.js              | 12 +++++-------
 .../checkout/form/payment-method-step.js           | 10 ++++------
 .../checkout/form/shipping-fields-step.js          |  6 +++---
 .../checkout/form/shipping-options-step.tsx        |  6 +++---
 8 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/assets/js/base/components/cart-checkout/place-order-button/index.js b/assets/js/base/components/cart-checkout/place-order-button/index.js
index b350c5cc756..101285c492b 100644
--- a/assets/js/base/components/cart-checkout/place-order-button/index.js
+++ b/assets/js/base/components/cart-checkout/place-order-button/index.js
@@ -11,6 +11,7 @@ const PlaceOrderButton = () => {
 		submitButtonText,
 		onSubmit,
 		isCalculating,
+		isDisabled,
 		waitingForProcessing,
 		waitingForRedirect,
 	} = useCheckoutSubmit();
@@ -20,7 +21,10 @@ const PlaceOrderButton = () => {
 			className="wc-block-components-checkout-place-order-button"
 			onClick={ onSubmit }
 			disabled={
-				isCalculating || waitingForProcessing || waitingForRedirect
+				isCalculating ||
+				isDisabled ||
+				waitingForProcessing ||
+				waitingForRedirect
 			}
 			showSpinner={ waitingForProcessing }
 		>
diff --git a/assets/js/base/context/hooks/use-checkout-submit.js b/assets/js/base/context/hooks/use-checkout-submit.js
index 15d0880ec64..728fa7a4947 100644
--- a/assets/js/base/context/hooks/use-checkout-submit.js
+++ b/assets/js/base/context/hooks/use-checkout-submit.js
@@ -25,8 +25,14 @@ export const useCheckoutSubmit = () => {
 		hasError,
 	} = useCheckoutContext();
 	const { paymentMethods = {} } = usePaymentMethods();
-	const { activePaymentMethod } = usePaymentMethodDataContext();
+	const {
+		activePaymentMethod,
+		currentStatus: paymentStatus,
+	} = usePaymentMethodDataContext();
 	const paymentMethod = paymentMethods[ activePaymentMethod ] || {};
+	const waitingForProcessing =
+		isProcessing || isAfterProcessing || isBeforeProcessing;
+	const waitingForRedirect = isComplete && ! hasError;
 
 	return {
 		submitButtonText:
@@ -34,8 +40,8 @@ export const useCheckoutSubmit = () => {
 			__( 'Place Order', 'woo-gutenberg-products-block' ),
 		onSubmit,
 		isCalculating,
-		waitingForProcessing:
-			isProcessing || isAfterProcessing || isBeforeProcessing,
-		waitingForRedirect: isComplete && ! hasError,
+		isDisabled: isProcessing || paymentStatus.isDoingExpressPayment,
+		waitingForProcessing,
+		waitingForRedirect,
 	};
 };
diff --git a/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js b/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js
index 99942901aa8..0f7d28ee1a4 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js
+++ b/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js
@@ -3,16 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import PropTypes from 'prop-types';
 
 const BillingFieldsStep = ( { children } ) => {
-	const { isProcessing: checkoutIsProcessing } = useCheckoutContext();
-
+	const { isDisabled } = useCheckoutSubmit();
 	return (
 		<FormStep
 			id="billing-fields"
-			disabled={ checkoutIsProcessing }
+			disabled={ isDisabled }
 			className="wc-block-checkout__billing-fields"
 			title={ __( 'Billing address', 'woo-gutenberg-products-block' ) }
 			description={ __(
diff --git a/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js b/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js
index ea68f75a5db..14844e6dbb4 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js
+++ b/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
 import { useCheckoutContext } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
 
@@ -18,11 +19,12 @@ const ContactFieldsStep = ( {
 	allowCreateAccount,
 } ) => {
 	const {
-		isProcessing: checkoutIsProcessing,
 		customerId,
 		shouldCreateAccount,
 		setShouldCreateAccount,
 	} = useCheckoutContext();
+	const { isDisabled } = useCheckoutSubmit();
+
 	const createAccountUI = ! customerId &&
 		allowCreateAccount &&
 		getSetting( 'checkoutAllowsGuest', false ) &&
@@ -37,10 +39,11 @@ const ContactFieldsStep = ( {
 				onChange={ ( value ) => setShouldCreateAccount( value ) }
 			/>
 		);
+
 	return (
 		<FormStep
 			id="contact-fields"
-			disabled={ checkoutIsProcessing }
+			disabled={ isDisabled }
 			className="wc-block-checkout__contact-fields"
 			title={ __(
 				'Contact information',
diff --git a/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js b/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js
index ed8758abf96..75e0d50f632 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js
+++ b/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js
@@ -7,6 +7,7 @@ import {
 	useCheckoutContext,
 	useShippingDataContext,
 } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
@@ -15,11 +16,8 @@ import CheckoutOrderNotes from './order-notes';
 
 const OrderNotesStep = () => {
 	const { needsShipping } = useShippingDataContext();
-	const {
-		isProcessing: checkoutIsProcessing,
-		orderNotes,
-		dispatchActions,
-	} = useCheckoutContext();
+	const { orderNotes, dispatchActions } = useCheckoutContext();
+	const { isDisabled } = useCheckoutSubmit();
 	const { setOrderNotes } = dispatchActions;
 
 	return (
@@ -27,11 +25,11 @@ const OrderNotesStep = () => {
 			id="order-notes"
 			showStepNumber={ false }
 			className="wc-block-checkout__order-notes"
-			disabled={ checkoutIsProcessing }
+			disabled={ isDisabled }
 		>
 			<CheckoutOrderNotes
-				disabled={ checkoutIsProcessing }
 				onChange={ setOrderNotes }
+				disabled={ isDisabled }
 				placeholder={
 					needsShipping
 						? __(
diff --git a/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js b/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js
index 82010d85b28..b25dac234f3 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js
+++ b/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js
@@ -3,14 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import {
-	useCheckoutContext,
-	StoreNoticesProvider,
-} from '@woocommerce/base-context';
+import { StoreNoticesProvider } from '@woocommerce/base-context';
 import {
 	useStoreCart,
 	useEmitResponse,
 	usePaymentMethods,
+	useCheckoutSubmit,
 } from '@woocommerce/base-context/hooks';
 
 /**
@@ -19,7 +17,7 @@ import {
 import { PaymentMethods } from '../../payment-methods';
 
 const PaymentMethodStep = () => {
-	const { isProcessing: checkoutIsProcessing } = useCheckoutContext();
+	const { isDisabled } = useCheckoutSubmit();
 	const { cartNeedsPayment } = useStoreCart();
 	const { paymentMethods } = usePaymentMethods();
 	const { noticeContexts } = useEmitResponse();
@@ -31,7 +29,7 @@ const PaymentMethodStep = () => {
 	return (
 		<FormStep
 			id="payment-method"
-			disabled={ checkoutIsProcessing }
+			disabled={ isDisabled }
 			className="wc-block-checkout__payment-method"
 			title={ __( 'Payment method', 'woo-gutenberg-products-block' ) }
 			description={
diff --git a/assets/js/blocks/cart-checkout/checkout/form/shipping-fields-step.js b/assets/js/blocks/cart-checkout/checkout/form/shipping-fields-step.js
index e4147216cd4..29641eec605 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/shipping-fields-step.js
+++ b/assets/js/blocks/cart-checkout/checkout/form/shipping-fields-step.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
-import { useCheckoutContext } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import PropTypes from 'prop-types';
 
 const ShippingFieldsStep = ( {
@@ -12,12 +12,12 @@ const ShippingFieldsStep = ( {
 	setShippingAsBilling,
 	children,
 } ) => {
-	const { isProcessing: checkoutIsProcessing } = useCheckoutContext();
+	const { isDisabled } = useCheckoutSubmit();
 
 	return (
 		<FormStep
 			id="shipping-fields"
-			disabled={ checkoutIsProcessing }
+			disabled={ isDisabled }
 			className="wc-block-checkout__shipping-fields"
 			title={ __( 'Shipping address', 'woo-gutenberg-products-block' ) }
 			description={ __(
diff --git a/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx b/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx
index c136e5f7352..555630d8f07 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx
+++ b/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx
@@ -13,10 +13,10 @@ import {
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import {
-	useCheckoutContext,
 	useEditorContext,
 	useShippingDataContext,
 } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Notice } from 'wordpress-components';
 import classnames from 'classnames';
@@ -55,7 +55,7 @@ const renderShippingRatesControlOption = (
 };
 
 const ShippingOptionsStep = (): JSX.Element | null => {
-	const { isProcessing: checkoutIsProcessing } = useCheckoutContext();
+	const { isDisabled } = useCheckoutSubmit();
 	const { isEditor } = useEditorContext();
 	const {
 		shippingRates,
@@ -71,7 +71,7 @@ const ShippingOptionsStep = (): JSX.Element | null => {
 	return (
 		<FormStep
 			id="shipping-option"
-			disabled={ checkoutIsProcessing }
+			disabled={ isDisabled }
 			className="wc-block-checkout__shipping-option"
 			title={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
 			description={

From c66854aa1d08616767a82ca39644df7cd88dfa03 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Wed, 16 Jun 2021 10:31:47 +0100
Subject: [PATCH 31/32] useCallback on error message functions

---
 .../use-payment-method-interface.ts           | 31 ++++++++------
 .../express-payment-methods.js                | 41 +++++++++++--------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
index 1e61c1b22e1..0113063e904 100644
--- a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
+++ b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import PaymentMethodLabel from '@woocommerce/base-components/cart-checkout/payment-method-label';
 import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
 import { getSetting } from '@woocommerce/settings';
@@ -86,6 +86,22 @@ export const usePaymentMethodInterface = (): Record< string, unknown > => {
 		};
 	}, [ cartTotals, needsShipping ] );
 
+	const deprecatedSetExpressPaymentError = useCallback(
+		( errorMessage = '' ) => {
+			deprecated(
+				'setExpressPaymentError should only be used by Express Payment Methods (using the provided onError handler).',
+				{
+					alternative: '',
+					plugin: 'woocommerce-gutenberg-products-block',
+					link:
+						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
+				}
+			);
+			setExpressPaymentError( errorMessage );
+		},
+		[ setExpressPaymentError ]
+	);
+
 	return {
 		activePaymentMethod,
 		billing: {
@@ -128,18 +144,7 @@ export const usePaymentMethodInterface = (): Record< string, unknown > => {
 		},
 		onSubmit,
 		paymentStatus: currentStatus,
-		setExpressPaymentError: ( errorMessage = '' ) => {
-			deprecated(
-				'setExpressPaymentError should only be used by Express Payment Methods (using the provided onError handler).',
-				{
-					alternative: '',
-					plugin: 'woocommerce-gutenberg-products-block',
-					link:
-						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
-				}
-			);
-			setExpressPaymentError( errorMessage );
-		},
+		setExpressPaymentError: deprecatedSetExpressPaymentError,
 		shippingData: {
 			shippingRates,
 			shippingRatesLoading,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index dfc556f1d6b..58dd3e2c5f7 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -87,6 +87,29 @@ const ExpressPaymentMethods = () => {
 		[ setActivePaymentMethod, setPaymentStatus, setExpressPaymentError ]
 	);
 
+	/**
+	 * Calling setExpressPaymentError directly is deprecated.
+	 */
+	const deprecatedSetExpressPaymentError = useCallback(
+		( errorMessage = '' ) => {
+			deprecated(
+				'Express Payment Methods should use the provided onError handler instead.',
+				{
+					alternative: 'onError',
+					plugin: 'woocommerce-gutenberg-products-block',
+					link:
+						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
+				}
+			);
+			if ( errorMessage ) {
+				onExpressPaymentError( errorMessage );
+			} else {
+				setExpressPaymentError( '' );
+			}
+		},
+		[ setExpressPaymentError, onExpressPaymentError ]
+	);
+
 	/**
 	 * @todo Find a way to Memoize Express Payment Method Content
 	 *
@@ -108,23 +131,7 @@ const ExpressPaymentMethods = () => {
 							onClick: onExpressPaymentClick( id ),
 							onClose: onExpressPaymentClose,
 							onError: onExpressPaymentError,
-							setExpressPaymentError: ( errorMessage = '' ) => {
-								deprecated(
-									'Express Payment Methods should use the provided onError handler instead.',
-									{
-										alternative: 'onError',
-										plugin:
-											'woocommerce-gutenberg-products-block',
-										link:
-											'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
-									}
-								);
-								if ( errorMessage ) {
-									onExpressPaymentError( errorMessage );
-								} else {
-									setExpressPaymentError( '' );
-								}
-							},
+							setExpressPaymentError: deprecatedSetExpressPaymentError,
 						} ) }
 					</li>
 				) : null;

From a8c49055cddf06bf183df1c67ba7bcd7cdb757e1 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Wed, 16 Jun 2021 11:57:10 +0100
Subject: [PATCH 32/32] Fix mocks in test

---
 assets/js/base/context/hooks/test/use-checkout-submit.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/js/base/context/hooks/test/use-checkout-submit.js b/assets/js/base/context/hooks/test/use-checkout-submit.js
index dc1ba66bb04..f327a1c8f46 100644
--- a/assets/js/base/context/hooks/test/use-checkout-submit.js
+++ b/assets/js/base/context/hooks/test/use-checkout-submit.js
@@ -12,7 +12,12 @@ import { useCheckoutSubmit } from '../use-checkout-submit';
 const mockUseCheckoutContext = {
 	onSubmit: jest.fn(),
 };
-const mockUsePaymentMethodDataContext = {};
+const mockUsePaymentMethodDataContext = {
+	activePaymentMethod: '',
+	currentStatus: {
+		isDoingExpressPayment: false,
+	},
+};
 
 jest.mock( '../../providers/cart-checkout/checkout-state', () => ( {
 	useCheckoutContext: () => mockUseCheckoutContext,