Experimental newsletter subscription checkbox block POC and Store API supporting changes (#4607)

* remove todo from sample block

* Add newsletter block

* Block registration

* Move provider/processor so separate them from context providers

* customData implementation for setting customData for requests

* Make data and schema callbacks optional in extendrestapi class

* schema_type should be data_type

* Allow checkout endpoint to be extended

* Support validation, sanitization, and defaults on nested REST properties

* Experimental endpoint data for newsletter field

* Add extension data to requests

* SET_EXTENSION_DATA

* Update types

* Add todo

* move check within hook function

* Remove newsletter block

This is because we're testing with the integration being done in a separate extension

* Delete newsletter subscription block

* Pass the result of hooks down to the children blocks

We need to do this to allow extension blocks to modify the extensionData (so they can send custom input to the REST api when submitting the checkout form).

* Remove newsletter signup block

* remove checkoutSubmitData

Co-authored-by: Thomas Roberts <[email protected]>
Co-authored-by: Nadir Seghir <[email protected]>

Author: 3 people

assets/js/base/context/hooks/index.js

@@ -12,3 +12,4 @@ export * from './use-checkout-address';
 export * from './use-checkout-notices';
 export * from './use-checkout-submit';
 export * from './use-emit-response';
+export * from './use-checkout-extension-data';

assets/js/base/context/hooks/use-checkout-extension-data.ts

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import { useCheckoutContext } from '../providers/cart-checkout/checkout-state';
+import type { CheckoutStateContextState } from '../providers/cart-checkout/checkout-state/types';
+
+/**
+ * Custom hook for setting custom checkout data which is passed to the wc/store/checkout endpoint when processing orders.
+ */
+export const useCheckoutExtensionData = (): {
+	extensionData: CheckoutStateContextState[ 'extensionData' ];
+	setExtensionData: (
+		namespace: string,
+		key: string,
+		value: unknown
+	) => void;
+} => {
+	const { dispatchActions, extensionData } = useCheckoutContext();
+	const extensionDataRef = useRef( extensionData );
+
+	useEffect( () => {
+		if ( ! isShallowEqual( extensionData, extensionDataRef.current ) ) {
+			extensionDataRef.current = extensionData;
+		}
+	}, [ extensionData ] );
+
+	const setExtensionDataWithNamespace = useCallback(
+		( namespace, key, value ) => {
+			const currentData = extensionDataRef.current[ namespace ] || {};
+			dispatchActions.setExtensionData( {
+				...extensionDataRef.current,
+				[ namespace ]: {
+					...currentData,
+					[ key ]: value,
+				},
+			} );
+		},
+		[ dispatchActions ]
+	);
+
+	return {
+		extensionData: extensionDataRef.current,
+		setExtensionData: setExtensionDataWithNamespace,
+	};
+};

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CheckoutProvider } from '../checkout';
+import { CheckoutProvider } from '../checkout-provider';
 
 /**
  * Cart provider

…art-checkout/checkout/processor/index.js …ders/cart-checkout/checkout-processor.jsassets/js/base/context/providers/cart-checkout/checkout/processor/index.js renamed to assets/js/base/context/providers/cart-checkout/checkout-processor.js assets/js/base/context/providers/cart-checkout/checkout/processor/index.js renamed to assets/js/base/context/providers/cart-checkout/checkout-processor.js

@@ -18,20 +18,18 @@ import {
 /**
  * Internal dependencies
  */
-import { preparePaymentData } from './utils';
-import { useCheckoutContext } from '../../checkout-state';
-import { useShippingDataContext } from '../../shipping';
-import { useCustomerDataContext } from '../../customer';
-import { usePaymentMethodDataContext } from '../../payment-methods';
-import { useValidationContext } from '../../../validation';
-import { useStoreCart } from '../../../../hooks/cart/use-store-cart';
-import { useStoreNotices } from '../../../../hooks/use-store-notices';
+import { preparePaymentData, processCheckoutResponseHeaders } from './utils';
+import { useCheckoutContext } from './checkout-state';
+import { useShippingDataContext } from './shipping';
+import { useCustomerDataContext } from './customer';
+import { usePaymentMethodDataContext } from './payment-methods';
+import { useValidationContext } from '../validation';
+import { useStoreCart } from '../../hooks/cart/use-store-cart';
+import { useStoreNotices } from '../../hooks/use-store-notices';
 
 /**
  * CheckoutProcessor component.
  *
- * @todo Needs to consume all contexts.
- *
  * Subscribes to checkout context and triggers processing via the API.
  */
 const CheckoutProcessor = () => {
@@ -45,6 +43,7 @@ const CheckoutProcessor = () => {
 		isComplete: checkoutIsComplete,
 		orderNotes,
 		shouldCreateAccount,
+		extensionData,
 	} = useCheckoutContext();
 	const { hasValidationErrors } = useValidationContext();
 	const { shippingErrorStatus } = useShippingDataContext();
@@ -75,11 +74,18 @@ const CheckoutProcessor = () => {
 		currentPaymentStatus.hasError ||
 		shippingErrorStatus.hasError;
 
+	const paidAndWithoutErrors =
+		! checkoutHasError &&
+		! checkoutWillHaveError &&
+		( currentPaymentStatus.isSuccessful || ! cartNeedsPayment ) &&
+		checkoutIsProcessing;
+
 	// If express payment method is active, let's suppress notices
 	useEffect( () => {
 		setIsSuppressed( isExpressPaymentMethodActive );
 	}, [ isExpressPaymentMethodActive, setIsSuppressed ] );
 
+	// Determine if checkout has an error.
 	useEffect( () => {
 		if (
 			checkoutWillHaveError !== checkoutHasError &&
@@ -97,12 +103,6 @@ const CheckoutProcessor = () => {
 		dispatchActions,
 	] );
 
-	const paidAndWithoutErrors =
-		! checkoutHasError &&
-		! checkoutWillHaveError &&
-		( currentPaymentStatus.isSuccessful || ! cartNeedsPayment ) &&
-		checkoutIsProcessing;
-
 	useEffect( () => {
 		currentBillingData.current = billingData;
 		currentShippingAddress.current = shippingAddress;
@@ -156,10 +156,32 @@ const CheckoutProcessor = () => {
 		isExpressPaymentMethodActive,
 	] );
 
-	const processOrder = useCallback( () => {
+	// redirect when checkout is complete and there is a redirect url.
+	useEffect( () => {
+		if ( currentRedirectUrl.current ) {
+			window.location.href = currentRedirectUrl.current;
+		}
+	}, [ checkoutIsComplete ] );
+
+	const processOrder = useCallback( async () => {
+		if ( isProcessingOrder ) {
+			return;
+		}
 		setIsProcessingOrder( true );
 		removeNotice( 'checkout' );
-		let data = {
+
+		const paymentData = cartNeedsPayment
+			? {
+					payment_method: paymentMethodId,
+					payment_data: preparePaymentData(
+						paymentMethodData,
+						shouldSavePayment,
+						activePaymentMethod
+					),
+			  }
+			: {};
+
+		const data = {
 			billing_address: emptyHiddenAddressFields(
 				currentBillingData.current
 			),
@@ -168,102 +190,71 @@ const CheckoutProcessor = () => {
 			),
 			customer_note: orderNotes,
 			should_create_account: shouldCreateAccount,
+			...paymentData,
+			extensions: { ...extensionData },
 		};
-		if ( cartNeedsPayment ) {
-			data = {
-				...data,
-				payment_method: paymentMethodId,
-				payment_data: preparePaymentData(
-					paymentMethodData,
-					shouldSavePayment,
-					activePaymentMethod
-				),
-			};
-		}
+
 		triggerFetch( {
 			path: '/wc/store/checkout',
 			method: 'POST',
 			data,
 			cache: 'no-store',
 			parse: false,
 		} )
-			.then( ( fetchResponse ) => {
-				// Update nonce.
-				triggerFetch.setNonce( fetchResponse.headers );
-
-				// Update user using headers.
-				dispatchActions.setCustomerId(
-					fetchResponse.headers.get( 'X-WC-Store-API-User' )
+			.then( ( response ) => {
+				processCheckoutResponseHeaders(
+					response.headers,
+					dispatchActions
 				);
-
-				// Handle response.
-				fetchResponse.json().then( function ( response ) {
-					if ( ! fetchResponse.ok ) {
-						// We received an error response.
-						addErrorNotice(
-							formatStoreApiErrorMessage( response ),
-							{
-								id: 'checkout',
-							}
-						);
-						dispatchActions.setHasError();
-					}
-					dispatchActions.setAfterProcessing( response );
-					setIsProcessingOrder( false );
-				} );
-			} )
-			.catch( ( errorResponse ) => {
-				// Update nonce.
-				triggerFetch.setNonce( errorResponse.headers );
-
-				// If new customer ID returned, update the store.
-				if ( errorResponse.headers?.get( 'X-WC-Store-API-User' ) ) {
-					dispatchActions.setCustomerId(
-						errorResponse.headers.get( 'X-WC-Store-API-User' )
-					);
+				if ( ! response.ok ) {
+					throw new Error( response );
 				}
-
-				errorResponse.json().then( function ( response ) {
+				return response.json();
+			} )
+			.then( ( response ) => {
+				dispatchActions.setAfterProcessing( response );
+				setIsProcessingOrder( false );
+			} )
+			.catch( ( fetchResponse ) => {
+				processCheckoutResponseHeaders(
+					fetchResponse.headers,
+					dispatchActions
+				);
+				fetchResponse.json().then( ( response ) => {
 					// If updated cart state was returned, update the store.
 					if ( response.data?.cart ) {
 						receiveCart( response.data.cart );
 					}
 					addErrorNotice( formatStoreApiErrorMessage( response ), {
 						id: 'checkout',
 					} );
-
 					response.additional_errors?.forEach?.(
 						( additionalError ) => {
 							addErrorNotice( additionalError.message, {
 								id: additionalError.error_code,
 							} );
 						}
 					);
-
-					dispatchActions.setHasError();
+					dispatchActions.setHasError( true );
 					dispatchActions.setAfterProcessing( response );
 					setIsProcessingOrder( false );
 				} );
 			} );
 	}, [
-		addErrorNotice,
+		isProcessingOrder,
 		removeNotice,
+		orderNotes,
+		shouldCreateAccount,
+		cartNeedsPayment,
 		paymentMethodId,
-		activePaymentMethod,
 		paymentMethodData,
 		shouldSavePayment,
-		cartNeedsPayment,
-		receiveCart,
+		activePaymentMethod,
+		extensionData,
 		dispatchActions,
-		orderNotes,
-		shouldCreateAccount,
+		addErrorNotice,
+		receiveCart,
 	] );
-	// redirect when checkout is complete and there is a redirect url.
-	useEffect( () => {
-		if ( currentRedirectUrl.current ) {
-			window.location.href = currentRedirectUrl.current;
-		}
-	}, [ checkoutIsComplete ] );
 
 	// process order if conditions are good.
 	useEffect( () => {

…roviders/cart-checkout/checkout/index.js …iders/cart-checkout/checkout-provider.jsassets/js/base/context/providers/cart-checkout/checkout/index.js renamed to assets/js/base/context/providers/cart-checkout/checkout-provider.js assets/js/base/context/providers/cart-checkout/checkout/index.js renamed to assets/js/base/context/providers/cart-checkout/checkout-provider.js

@@ -7,11 +7,11 @@ import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundar
 /**
  * Internal dependencies
  */
-import { PaymentMethodDataProvider } from '../payment-methods';
-import { ShippingDataProvider } from '../shipping';
-import { CustomerDataProvider } from '../customer';
-import { CheckoutStateProvider } from '../checkout-state';
-import CheckoutProcessor from './processor';
+import { PaymentMethodDataProvider } from './payment-methods';
+import { ShippingDataProvider } from './shipping';
+import { CustomerDataProvider } from './customer';
+import { CheckoutStateProvider } from './checkout-state';
+import CheckoutProcessor from './checkout-processor';
 
 /**
  * Checkout provider

assets/js/base/context/providers/cart-checkout/checkout-state/actions.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { PaymentResultDataType } from './types';
+import type { PaymentResultDataType, CheckoutStateContextState } from './types';
 
 export enum ACTION {
 	SET_IDLE = 'set_idle',
@@ -20,20 +20,15 @@ export enum ACTION {
 	INCREMENT_CALCULATING = 'increment_calculating',
 	DECREMENT_CALCULATING = 'decrement_calculating',
 	SET_SHOULD_CREATE_ACCOUNT = 'set_should_create_account',
+	SET_EXTENSION_DATA = 'set_extension_data',
 }
 
-export interface ActionType {
+export interface ActionType extends Partial< CheckoutStateContextState > {
 	type: ACTION;
 	data?:
 		| Record< string, unknown >
 		| Record< string, never >
 		| PaymentResultDataType;
-	url?: string;
-	customerId?: number;
-	orderId?: number;
-	shouldCreateAccount?: boolean;
-	hasError?: boolean;
-	orderNotes?: string;
 }
 
 /**
@@ -52,10 +47,10 @@ export const actions = {
 		( {
 			type: ACTION.SET_PROCESSING,
 		} as const ),
-	setRedirectUrl: ( url: string ) =>
+	setRedirectUrl: ( redirectUrl: string ) =>
 		( {
 			type: ACTION.SET_REDIRECT_URL,
-			url,
+			redirectUrl,
 		} as const ),
 	setProcessingResponse: ( data: PaymentResultDataType ) =>
 		( {
@@ -107,4 +102,11 @@ export const actions = {
 			type: ACTION.SET_ORDER_NOTES,
 			orderNotes,
 		} as const ),
+	setExtensionData: (
+		extensionData: Record< string, Record< string, unknown > >
+	) =>
+		( {
+			type: ACTION.SET_EXTENSION_DATA,
+			extensionData,
+		} as const ),
 };

assets/js/base/context/providers/cart-checkout/checkout-state/constants.ts

@@ -48,6 +48,7 @@ export const DEFAULT_CHECKOUT_STATE_DATA: CheckoutStateContextType = {
 		setCustomerId: ( id ) => void id,
 		setOrderId: ( id ) => void id,
 		setOrderNotes: ( orderNotes ) => void orderNotes,
+		setExtensionData: ( extensionData ) => void extensionData,
 	},
 	onSubmit: () => void null,
 	isComplete: false,
@@ -69,6 +70,7 @@ export const DEFAULT_CHECKOUT_STATE_DATA: CheckoutStateContextType = {
 	isCart: false,
 	shouldCreateAccount: false,
 	setShouldCreateAccount: ( value ) => void value,
+	extensionData: {},
 };
 
 export const DEFAULT_STATE: CheckoutStateContextState = {
@@ -81,4 +83,5 @@ export const DEFAULT_STATE: CheckoutStateContextState = {
 	customerId: checkoutData.customer_id,
 	shouldCreateAccount: false,
 	processingResponse: null,
+	extensionData: {},
 };