add error notice on WC blocks

classes/class-wc-connect-store-api-extension.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Store_API_Extension class.
+ *
+ * A class to extend the store public API with Table Rate Shipping Abort Message functionality.
+ *
+ * @package WooCommerce_Table_Rate_Shipping
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+use Automattic\WooCommerce\StoreApi\StoreApi;
+use Automattic\WooCommerce\StoreApi\Schemas\ExtendSchema;
+use Automattic\WooCommerce\StoreApi\Schemas\V1\CartSchema;
+
+/**
+ * Store API Extension.
+ */
+class WC_Connect_Store_API_Extension {
+	/**
+	 * Stores Rest Extending instance.
+	 *
+	 * @var ExtendSchema
+	 */
+	private static $extend;
+
+	/**
+	 * Plugin Identifier, unique to each plugin.
+	 *
+	 * @var string
+	 */
+	const IDENTIFIER = 'woocommerce_services';
+
+	/**
+	 * Bootstraps the class and hooks required data.
+	 *
+	 * @since 1.0.0
+	 */
+	public static function init() {
+		self::$extend = StoreApi::container()->get( ExtendSchema::class );
+		self::extend_store();
+	}
+
+	/**
+	 * Registers the data into each endpoint.
+	 */
+	public static function extend_store() {
+
+		self::$extend->register_endpoint_data(
+			array(
+				'endpoint'        => CartSchema::IDENTIFIER,
+				'namespace'       => self::IDENTIFIER,
+				'data_callback'   => array( static::class, 'data' ),
+				'schema_callback' => array( static::class, 'schema' ),
+				'schema_type'     => ARRAY_A,
+			)
+		);
+	}
+
+	/**
+	 * Store API extension data callback.
+	 *
+	 * @return array
+	 */
+	public static function data() {
+		$notices = WC()->session->get( WC_Connect_TaxJar_Integration::NOTICE_KEY );
+		$notices = is_array( $notices ) ? $notices : array();
+
+		return array(
+			'error_notices' => $notices,
+		);
+	}
+
+	/**
+	 * Store API extension schema callback.
+	 *
+	 * @return array Registered schema.
+	 */
+	public static function schema() {
+		return array(
+			'error_notices' => array(
+				'description' => __( 'Error notices from TaxJar operation.', 'woocommerce-services' ),
+				'type'        => 'array',
+				'context'     => array( 'view', 'edit' ),
+				'readonly'    => true,
+			),
+		);
+	}
+}

classes/class-wc-connect-taxjar-integration.php

@@ -58,6 +58,7 @@ class WC_Connect_TaxJar_Integration {
 	const PROXY_PATH               = 'taxjar/v2';
 	const OPTION_NAME              = 'wc_connect_taxes_enabled';
 	const SETUP_WIZARD_OPTION_NAME = 'woocommerce_setup_automated_taxes';
+	const NOTICE_KEY               = 'woocommerce_services_notices';
 
 	public function __construct(
 		WC_Connect_API_Client $api_client,
@@ -401,13 +402,11 @@ public function _notice( $message ) {
 		$formatted_message = is_scalar( $message ) ? $message : json_encode( $message );
 
 		// if on checkout page load (not ajax), don't set an error as it prevents checkout page from displaying
-		if ( (
-				( is_cart() || ( is_checkout() && is_ajax() ) ) ||
-				( WC_Connect_Functions::has_cart_or_checkout_block() || WC_Connect_functions::is_store_api_call() )
-			)
-			&& ! wc_has_notice( $message, 'notice' )
+		if (
+			( is_cart() || ( is_checkout() && is_ajax() ) ) ||
+			( WC_Connect_Functions::has_cart_or_checkout_block() || WC_Connect_functions::is_store_api_call() )
 		) {
-			wc_add_notice( $message, 'notice' );
+			$this->maybe_add_notice_error( $message, 'notice' );
 		}
 
 	return;
@@ -439,13 +438,11 @@ public function _error( $message ) {
 			}
 
 			// if on checkout page load (not ajax), don't set an error as it prevents checkout page from displaying
-			if ( (
-					( is_cart() || ( is_checkout() && is_ajax() ) ) ||
-					( WC_Connect_Functions::has_cart_or_checkout_block() || WC_Connect_functions::is_store_api_call() )
-				)
-				&& ! wc_has_notice( $message, 'error' )
+			if (
+				( is_cart() || ( is_checkout() && is_ajax() ) ) ||
+				( WC_Connect_Functions::has_cart_or_checkout_block() || WC_Connect_functions::is_store_api_call() )
 			) {
-				wc_add_notice( $message, 'error' );
+				$this->maybe_add_notice_error( $message, 'error' );
 			}
 
 			return;
@@ -1081,6 +1078,9 @@ public function maybe_apply_taxjar_nexus_addresses_workaround( $body ) {
 	 */
 	public function calculate_tax( $options = array() ) {
 		$this->_log( ':::: TaxJar Plugin requested ::::' );
+
+		// Unset the error notice.
+		WC()->session->set( self::NOTICE_KEY, array() );
 
 		// Process $options array and turn them into variables
 		$options = is_array( $options ) ? $options : array();
@@ -1455,6 +1455,26 @@ public function smartcalcs_request( $json ) {
 		}
 	}
 
+	public function maybe_add_notice_error( $message, $type = 'error' ) {
+		if ( ! wc_has_notice( $message, $type ) ) {
+			wc_add_notice( $message, $type );
+		}
+
+		$this->add_notice_error( $message, $type );
+	}
+
+	public function add_notice_error( $message, $type = 'error' ) {
+		$notices = WC()->session->get( self::NOTICE_KEY );
+
+		if ( ! is_array( $notices ) ) {
+			$notices = array();
+		}
+
+		$notices[ $type ] = $message;
+
+		WC()->session->set( self::NOTICE_KEY, $notices );
+	}
+
 	/**
 	 * Exports existing tax rates to a CSV and clears the table.
 	 *

client/checkout-notices/index.js

@@ -0,0 +1,73 @@
+/**
+ * Block Notices
+ *
+ * This file is responsible for rendering Abort Messages from the Table Rate Shipping plugin.
+ *
+ * @package WooCommerce_Services
+ */
+
+window.addEventListener("load", () => {
+	const { useSelect }                                         = window.wp.data;
+	const { registerPlugin }                                    = window.wp.plugins;
+	const { ExperimentalOrderShippingPackages, StoreNotice }    = window.wc.blocksCheckout;
+	const { RawHTML }                                           = window.wp.element;
+
+	const createStoreNotice = ( notice, index, type = 'info' ) => {
+		if ( 'debug' === type ) {
+			type = 'info';
+		}
+
+		const message = <RawHTML>{notice}</RawHTML>;
+
+		return (
+			<StoreNotice key={index} status={type} isDismissible={false}>
+				{message}
+			</StoreNotice>
+		);
+	};
+
+	const Notices = ({ messages }) => {
+		if ( ! messages['notice'] ) {
+			return null;
+		}
+
+		const currentMessage = messages['notice'];
+
+		return (
+			<div className="woocommerce-services-block-notices">
+				{createStoreNotice( currentMessage, 0, 'info' )}
+			</div>
+		);
+	};
+
+	const render = () => {
+		const { errorNotices } = useSelect((select) => {
+			const storeCartData     = select( 'wc/store/cart' ).getCartData();
+
+			if ( ! storeCartData.extensions && ! storeCartData.extensions['woocommerce_services'] && ! storeCartData.extensions['woocommerce_services'].error_notices ) {
+				return {};
+			}
+			const errorNotices = storeCartData.extensions['woocommerce_services'].error_notices;
+
+			return {
+				errorNotices,
+			};
+		}, []);
+
+		// Ensure we only show abort messages if no shipping rates are available.
+		if ( ! errorNotices ) {
+			return null;
+		}
+
+		return (
+			<ExperimentalOrderShippingPackages>
+				<Notices messages={errorNotices} />
+			</ExperimentalOrderShippingPackages>
+		);
+	};
+
+	registerPlugin('woocommerce-services-notices', {
+		render,
+		scope: 'woocommerce-checkout',
+	});
+});

webpack.config.js

@@ -55,6 +55,7 @@ module.exports = {
 			'./client/provide-public-path.js',
 			'./client/main.js'
 		],
+		'woocommerce-services-checkout': [ './client/checkout-notices/index.js' ],
 		'woocommerce-services-banner': [ './client/banner.js' ],
 		'woocommerce-services-admin-pointers': [ './client/admin-pointers.js' ],
 		'woocommerce-services-new-order-taxjar': [ './client/new-order-taxjar.js' ],

woocommerce-services.php

@@ -663,6 +663,7 @@ function () {
 			}
 
 			add_action( 'before_woocommerce_init', array( $this, 'pre_wc_init' ) );
+			add_action( 'woocommerce_blocks_loaded', array( $this, 'extend_store_api' ) );
 		}
 
 		/**
@@ -700,6 +701,7 @@ public function pre_wc_init() {
 				return;
 			}
 
+			add_action( 'wp_enqueue_scripts', array( $this, 'frontend_enqueue_scripts' ) );
 			add_action( 'woocommerce_init', array( $this, 'after_wc_init' ) );
 		}
 
@@ -895,6 +897,14 @@ public function attach_hooks() {
 			}
 		}
 
+		/**
+		 * Extend the store API.
+		 */
+		public function extend_store_api() {
+			require_once __DIR__ . '/classes/class-wc-connect-store-api-extension.php';
+			WC_Connect_Store_API_Extension::init();
+		}
+
 		/**
 		 * Register shipping labels-related hooks.
 		 *
@@ -1606,6 +1616,14 @@ public function admin_enqueue_scripts() {
 			);
 		}
 
+		public function frontend_enqueue_scripts() {
+			$plugin_version = self::get_wcs_version();
+
+			if ( WC_Connect_Functions::has_cart_or_checkout_block() ) {
+				wp_enqueue_script( 'wc_services_checkout', $this->wc_connect_base_url . 'woocommerce-services-checkout-' . $plugin_version . '.js', array(), null );
+			}
+		}
+
 		public function get_active_shipping_services() {
 			global $wpdb;
 			$active_shipping_services = array();