Update Express Payments Loading UI

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 'wordpress-components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import Spinner from '../spinner';
 
 const LoadingMask = ( {
 	children,
@@ -18,29 +18,27 @@ 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'
-			) }
+			className={ classNames( className, {
+				'wc-block-components-loading-mask': isLoading,
+			} ) }
 		>
-			{ showSpinner && <Spinner /> }
+			{ isLoading && showSpinner && <Spinner /> }
 			<div
-				className="wc-block-components-loading-mask__children"
-				aria-hidden={ true }
+				className={ classNames( {
+					'wc-block-components-loading-mask__children': isLoading,
+				} ) }
+				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>
 	);
 };

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;
@@ -9,8 +10,8 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-}
 
-.wc-block-components-loading-mask__children {
-	opacity: 0.5;
+	.wc-block-components-loading-mask__children {
+		opacity: 0.25;
+	}
 }

assets/js/base/components/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;

assets/js/base/components/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);
+	}
+}

assets/js/base/context/hooks/payment-methods/use-payment-methods.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
 /**
  * Internal dependencies
  */
@@ -10,12 +15,26 @@ const usePaymentMethodState = ( express = false ) => {
 		paymentMethodsInitialized,
 		expressPaymentMethodsInitialized,
 	} = usePaymentMethodDataContext();
-	return express
-		? {
-				paymentMethods: expressPaymentMethods,
-				isInitialized: expressPaymentMethodsInitialized,
-		  }
-		: { paymentMethods, isInitialized: paymentMethodsInitialized };
+
+	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();

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 };

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;

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: {},