POC: Create client-side notices from notices added with wc_add_notice in Checkout block

plugins/woocommerce-blocks/assets/js/data/utils/process-error-response.ts

@@ -13,6 +13,11 @@ import {
 } from '@woocommerce/types';
 import { noticeContexts } from '@woocommerce/base-context/event-emit/utils';
 
+/**
+ * Internal dependencies
+ */
+import { processNotices } from './process-notices';
+
 type ApiParamError = {
 	param: string;
 	id: string;
@@ -195,6 +200,10 @@ export const processErrorResponse = (
 		return;
 	}
 
+	if ( response.data?.notices ) {
+		processNotices( response.data?.notices );
+	}
+
 	if ( response.code === 'rest_invalid_param' ) {
 		return processInvalidParamResponse( response, context );
 	}

plugins/woocommerce-blocks/assets/js/data/utils/process-notices.ts

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import {
+	WCNotice,
+	WCNoticeList,
+} from '@woocommerce/type-defs/api-error-response';
+import { isObject, isString } from '@woocommerce/types';
+import { createNotice } from '@woocommerce/base-utils';
+import { select } from '@wordpress/data';
+
+export const processNotices = ( notices: WCNoticeList ) => {
+	if ( ! isObject( notices ) ) {
+		return;
+	}
+
+	const validContexts = select(
+		'wc/store/store-notices'
+	).getRegisteredContainers();
+
+	// Map server-side notices to client-side equivalents.
+	const noticeTypeMap: [
+		keyof WCNoticeList,
+		'info' | 'error' | 'success'
+	][] = [
+		[ 'notice', 'info' ],
+		[ 'success', 'success' ],
+		[ 'error', 'error' ],
+	];
+
+	// Loop through each type of notice (notice, success, and error) and create client-side notices.
+	noticeTypeMap.forEach( ( [ serverSideType, clientSideType ] ) => {
+		if ( ! Array.isArray( notices[ serverSideType ] ) ) {
+			return;
+		}
+
+		const noticesOfType = notices[ serverSideType ] as WCNotice[];
+
+		noticesOfType.forEach( ( notice: WCNotice ) => {
+			if ( ! isString( notice?.notice ) ) {
+				return;
+			}
+
+			if (
+				! isString( notice?.data?.context ) ||
+				! validContexts.includes( notice?.data?.context )
+			) {
+				return;
+			}
+
+			createNotice( clientSideType, notice.notice, {
+				context: notice?.data?.context || 'wc/checkout',
+			} );
+		} );
+	} );
+};

plugins/woocommerce-blocks/assets/js/types/type-defs/api-error-response.ts

@@ -3,6 +3,19 @@
  */
 import type { CartResponse } from './cart-response';
 
+// The notice added from wc_get_notices contains only the notice text an any additional data.
+export interface WCNotice {
+	data?: Record< string, string >;
+	notice?: string;
+}
+
+// The array of notices returned from wc_get_notices contains three members, one for each type of notice.
+export interface WCNoticeList {
+	notice?: WCNotice[];
+	error?: WCNotice[];
+	success?: WCNotice[];
+}
+
 // This is the standard API response data when an error is returned.
 export type ApiErrorResponse = {
 	code: string;
@@ -17,6 +30,7 @@ export type ApiErrorResponseData = {
 	details: Record< string, ApiErrorResponseDataDetails >;
 	// Some endpoints return cart data to update the client.
 	cart?: CartResponse | undefined;
+	notices?: WCNoticeList;
 } | null;
 
 // The details object lists individual errors for each field.

plugins/woocommerce/src/StoreApi/Routes/V1/Checkout.php

@@ -290,6 +290,9 @@ protected function get_route_error_response( $error_code, $error_message, $http_
 		if ( 409 === $http_status_code ) {
 			return $this->add_data_to_error_object( $error_from_message, $additional_data, $http_status_code, true );
 		}
+
+		$additional_data['notices'] = wc_get_notices();
+		wc_clear_notices();
 		return $this->add_data_to_error_object( $error_from_message, $additional_data, $http_status_code );
 	}