Rename the checkout events

assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -40,6 +40,9 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 		onCheckoutAfterProcessingWithSuccess,
 		onCheckoutAfterProcessingWithError,
 		onSubmit,
+		onCheckoutSuccess,
+		onCheckoutFail,
+		onCheckoutValidation,
 	} = useCheckoutEventsContext();
 
 	const { isCalculating, isComplete, isIdle, isProcessing, customerId } =
@@ -111,7 +114,7 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 	const { __internalSetExpressPaymentError } =
 		useDispatch( PAYMENT_STORE_KEY );
 
-	const { onPaymentProcessing } = usePaymentEventsContext();
+	const { onPaymentProcessing, onPaymentSetup } = usePaymentEventsContext();
 	const {
 		shippingErrorStatus,
 		shippingErrorTypes,
@@ -210,7 +213,11 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 			onCheckoutAfterProcessingWithSuccess,
 			onCheckoutBeforeProcessing,
 			onCheckoutValidationBeforeProcessing,
+			onCheckoutSuccess,
+			onCheckoutFail,
+			onCheckoutValidation,
 			onPaymentProcessing,
+			onPaymentSetup,
 			onShippingRateFail,
 			onShippingRateSelectFail,
 			onShippingRateSelectSuccess,

assets/js/base/context/providers/cart-checkout/checkout-events/event-emit.ts

@@ -17,12 +17,9 @@ import {
 // These events are emitted when the Checkout status is BEFORE_PROCESSING and AFTER_PROCESSING
 // to enable third parties to hook into the checkout process
 const EVENTS = {
-	CHECKOUT_VALIDATION_BEFORE_PROCESSING:
-		'checkout_validation_before_processing',
-	CHECKOUT_AFTER_PROCESSING_WITH_SUCCESS:
-		'checkout_after_processing_with_success',
-	CHECKOUT_AFTER_PROCESSING_WITH_ERROR:
-		'checkout_after_processing_with_error',
+	CHECKOUT_SUCCESS: 'checkout_success',
+	CHECKOUT_FAIL: 'checkout_fail',
+	CHECKOUT_VALIDATION: 'checkout_validation',
 };
 
 type EventEmittersType = Record< string, ReturnType< typeof emitterCallback > >;
@@ -43,16 +40,16 @@ const useEventEmitters = (
 ): EventEmittersType => {
 	const eventEmitters = useMemo(
 		() => ( {
-			onCheckoutAfterProcessingWithSuccess: emitterCallback(
-				EVENTS.CHECKOUT_AFTER_PROCESSING_WITH_SUCCESS,
+			onCheckoutSuccess: emitterCallback(
+				EVENTS.CHECKOUT_SUCCESS,
 				observerDispatch
 			),
-			onCheckoutAfterProcessingWithError: emitterCallback(
-				EVENTS.CHECKOUT_AFTER_PROCESSING_WITH_ERROR,
+			onCheckoutFail: emitterCallback(
+				EVENTS.CHECKOUT_FAIL,
 				observerDispatch
 			),
-			onCheckoutValidationBeforeProcessing: emitterCallback(
-				EVENTS.CHECKOUT_VALIDATION_BEFORE_PROCESSING,
+			onCheckoutValidation: emitterCallback(
+				EVENTS.CHECKOUT_VALIDATION,
 				observerDispatch
 			),
 		} ),

assets/js/base/context/providers/cart-checkout/checkout-events/index.tsx

@@ -35,22 +35,31 @@ import { useEditorContext } from '../../editor-context';
 type CheckoutEventsContextType = {
 	// Submits the checkout and begins processing.
 	onSubmit: () => void;
-	// Used to register a callback that will fire after checkout has been processed and there are no errors.
+	// Deprecated in favour of onCheckoutSuccess.
 	onCheckoutAfterProcessingWithSuccess: ReturnType< typeof emitterCallback >;
-	// Used to register a callback that will fire when the checkout has been processed and has an error.
+	// Deprecated in favour of onCheckoutFail.
 	onCheckoutAfterProcessingWithError: ReturnType< typeof emitterCallback >;
 	// Deprecated in favour of onCheckoutValidationBeforeProcessing.
 	onCheckoutBeforeProcessing: ReturnType< typeof emitterCallback >;
-	// Used to register a callback that will fire when the checkout has been submitted before being sent off to the server.
+	// Deprecated in favour of onCheckoutValidation.
 	onCheckoutValidationBeforeProcessing: ReturnType< typeof emitterCallback >;
+	// Used to register a callback that will fire if the api call to /checkout is successful
+	onCheckoutSuccess: ReturnType< typeof emitterCallback >;
+	// Used to register a callback that will fire if the api call to /checkout fails
+	onCheckoutFail: ReturnType< typeof emitterCallback >;
+	// Used to register a callback that will fire when the checkout performs validation on the form
+	onCheckoutValidation: ReturnType< typeof emitterCallback >;
 };
 
 const CheckoutEventsContext = createContext< CheckoutEventsContextType >( {
 	onSubmit: () => void null,
-	onCheckoutAfterProcessingWithSuccess: () => () => void null,
-	onCheckoutAfterProcessingWithError: () => () => void null,
+	onCheckoutAfterProcessingWithSuccess: () => () => void null, // deprecated for onCheckoutSuccess
+	onCheckoutAfterProcessingWithError: () => () => void null, // deprecated for onCheckoutFail
 	onCheckoutBeforeProcessing: () => () => void null, // deprecated for onCheckoutValidationBeforeProcessing
-	onCheckoutValidationBeforeProcessing: () => () => void null,
+	onCheckoutValidationBeforeProcessing: () => () => void null, // deprecated for onCheckoutValidation
+	onCheckoutSuccess: () => () => void null,
+	onCheckoutFail: () => () => void null,
+	onCheckoutValidation: () => () => void null,
 } );
 
 export const useCheckoutEventsContext = () => {
@@ -159,11 +168,8 @@ export const CheckoutEventsProvider = ( {
 
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
 	const currentObservers = useRef( observers );
-	const {
-		onCheckoutAfterProcessingWithSuccess,
-		onCheckoutAfterProcessingWithError,
-		onCheckoutValidationBeforeProcessing,
-	} = useEventEmitters( observerDispatch );
+	const { onCheckoutValidation, onCheckoutSuccess, onCheckoutFail } =
+		useEventEmitters( observerDispatch );
 
 	// set observers on ref so it's always current.
 	useEffect( () => {
@@ -180,16 +186,53 @@ export const CheckoutEventsProvider = ( {
 	 * See: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4039/commits/a502d1be8828848270993264c64220731b0ae181
 	 */
 	const onCheckoutBeforeProcessing = useMemo( () => {
-		return function (
-			...args: Parameters< typeof onCheckoutValidationBeforeProcessing >
-		) {
+		return function ( ...args: Parameters< typeof onCheckoutValidation > ) {
 			deprecated( 'onCheckoutBeforeProcessing', {
 				alternative: 'onCheckoutValidationBeforeProcessing',
 				plugin: 'WooCommerce Blocks',
 			} );
-			return onCheckoutValidationBeforeProcessing( ...args );
+			return onCheckoutValidation( ...args );
+		};
+	}, [ onCheckoutValidation ] );
+
+	/**
+	 * @deprecated use onCheckoutValidation instead
+	 */
+	const onCheckoutValidationBeforeProcessing = useMemo( () => {
+		return function ( ...args: Parameters< typeof onCheckoutValidation > ) {
+			deprecated( 'onCheckoutValidationBeforeProcessing', {
+				alternative: 'onCheckoutValidation',
+				plugin: 'WooCommerce Blocks',
+			} );
+			return onCheckoutValidation( ...args );
+		};
+	}, [ onCheckoutValidation ] );
+
+	/**
+	 * @deprecated use onCheckoutSuccess instead
+	 */
+	const onCheckoutAfterProcessingWithSuccess = useMemo( () => {
+		return function ( ...args: Parameters< typeof onCheckoutSuccess > ) {
+			deprecated( 'onCheckoutAfterProcessingWithSuccess', {
+				alternative: 'onCheckoutSuccess',
+				plugin: 'WooCommerce Blocks',
+			} );
+			return onCheckoutSuccess( ...args );
+		};
+	}, [ onCheckoutSuccess ] );
+
+	/**
+	 * @deprecated use onCheckoutFail instead
+	 */
+	const onCheckoutAfterProcessingWithError = useMemo( () => {
+		return function ( ...args: Parameters< typeof onCheckoutFail > ) {
+			deprecated( 'onCheckoutAfterProcessingWithError', {
+				alternative: 'onCheckoutFail',
+				plugin: 'WooCommerce Blocks',
+			} );
+			return onCheckoutFail( ...args );
 		};
-	}, [ onCheckoutValidationBeforeProcessing ] );
+	}, [ onCheckoutFail ] );
 
 	// Emit CHECKOUT_VALIDATE event and set the error state based on the response of
 	// the registered callbacks
@@ -209,7 +252,7 @@ export const CheckoutEventsProvider = ( {
 	const previousStatus = usePrevious( checkoutStatus );
 	const previousHasError = usePrevious( checkoutHasError );
 
-	// Emit CHECKOUT_AFTER_PROCESSING_WITH_SUCCESS and CHECKOUT_AFTER_PROCESSING_WITH_ERROR events
+	// Emit CHECKOUT_SUCCESS and CHECKOUT_FAIL events
 	// and set checkout errors according to the callback responses
 	useEffect( () => {
 		if (
@@ -258,6 +301,9 @@ export const CheckoutEventsProvider = ( {
 		onCheckoutValidationBeforeProcessing,
 		onCheckoutAfterProcessingWithSuccess,
 		onCheckoutAfterProcessingWithError,
+		onCheckoutSuccess,
+		onCheckoutFail,
+		onCheckoutValidation,
 	};
 	return (
 		<CheckoutEventsContext.Provider value={ checkoutEventHandlers }>

assets/js/base/context/providers/cart-checkout/checkout-processor.ts

@@ -47,7 +47,7 @@ import { useStoreCart } from '../../hooks/cart/use-store-cart';
  * Subscribes to checkout context and triggers processing via the API.
  */
 const CheckoutProcessor = () => {
-	const { onCheckoutValidationBeforeProcessing } = useCheckoutEventsContext();
+	const { onCheckoutValidation } = useCheckoutEventsContext();
 
 	const {
 		hasError: checkoutHasError,
@@ -188,10 +188,7 @@ const CheckoutProcessor = () => {
 	useEffect( () => {
 		let unsubscribeProcessing: () => void;
 		if ( ! isExpressPaymentMethodActive ) {
-			unsubscribeProcessing = onCheckoutValidationBeforeProcessing(
-				checkValidation,
-				0
-			);
+			unsubscribeProcessing = onCheckoutValidation( checkValidation, 0 );
 		}
 		return () => {
 			if (
@@ -202,7 +199,7 @@ const CheckoutProcessor = () => {
 			}
 		};
 	}, [
-		onCheckoutValidationBeforeProcessing,
+		onCheckoutValidation,
 		checkValidation,
 		isExpressPaymentMethodActive,
 	] );

assets/js/base/context/providers/cart-checkout/payment-events/event-emit.ts

@@ -15,7 +15,7 @@ import {
 } from '../../../event-emit';
 
 const EMIT_TYPES = {
-	PAYMENT_PROCESSING: 'payment_processing',
+	PAYMENT_SETUP: 'payment_setup',
 };
 
 type EventEmittersType = Record< string, ReturnType< typeof emitterCallback > >;
@@ -36,8 +36,8 @@ const useEventEmitters = (
 ): EventEmittersType => {
 	const eventEmitters = useMemo(
 		() => ( {
-			onPaymentProcessing: emitterCallback(
-				EMIT_TYPES.PAYMENT_PROCESSING,
+			onPaymentSetup: emitterCallback(
+				EMIT_TYPES.PAYMENT_SETUP,
 				observerDispatch
 			),
 		} ),

assets/js/base/context/providers/cart-checkout/payment-events/index.tsx

@@ -7,13 +7,15 @@ import {
 	useReducer,
 	useRef,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	CHECKOUT_STORE_KEY,
 	PAYMENT_STORE_KEY,
 	VALIDATION_STORE_KEY,
 } from '@woocommerce/block-data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -24,10 +26,12 @@ import { emitterCallback } from '../../../event-emit';
 type PaymentEventsContextType = {
 	// Event registration callback for registering observers for the payment processing event.
 	onPaymentProcessing: ReturnType< typeof emitterCallback >;
+	onPaymentSetup: ReturnType< typeof emitterCallback >;
 };
 
 const PaymentEventsContext = createContext< PaymentEventsContextType >( {
 	onPaymentProcessing: () => () => () => void null,
+	onPaymentSetup: () => () => () => void null,
 } );
 
 export const usePaymentEventsContext = () => {
@@ -65,7 +69,7 @@ export const PaymentEventsProvider = ( {
 		const store = select( PAYMENT_STORE_KEY );
 
 		return {
-			// The PROCESSING status represents befor the checkout runs the observers
+			// The PROCESSING status represents before the checkout runs the observers
 			// registered for the payment_setup event.
 			isPaymentProcessing: store.isPaymentProcessing(),
 			// the READY status represents when the observers have finished processing and payment data
@@ -76,7 +80,7 @@ export const PaymentEventsProvider = ( {
 
 	const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
-	const { onPaymentProcessing } = useEventEmitters( observerDispatch );
+	const { onPaymentSetup } = useEventEmitters( observerDispatch );
 	const currentObservers = useRef( observers );
 
 	// ensure observers are always current.
@@ -131,8 +135,22 @@ export const PaymentEventsProvider = ( {
 		}
 	}, [ checkoutHasError, isPaymentReady, __internalSetPaymentIdle ] );
 
+	/**
+	 * @deprecated use onPaymentSetup instead
+	 */
+	const onPaymentProcessing = useMemo( () => {
+		return function ( ...args: Parameters< typeof onPaymentSetup > ) {
+			deprecated( 'onPaymentProcessing', {
+				alternative: 'onPaymentSetup',
+				plugin: 'WooCommerce Blocks',
+			} );
+			return onPaymentSetup( ...args );
+		};
+	}, [ onPaymentSetup ] );
+
 	const paymentContextData = {
 		onPaymentProcessing,
+		onPaymentSetup,
 	};
 
 	return (