Disable "Place order" button in Checkout block if any errors are visible and add explicitDismiss option when throwing API errors

assets/js/base/components/cart-checkout/place-order-button/index.tsx

@@ -4,6 +4,8 @@
 import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { Icon, check } from '@wordpress/icons';
 import Button from '@woocommerce/base-components/button';
+import { STORE_NOTICES_STORE_KEY } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
 
 const PlaceOrderButton = (): JSX.Element => {
 	const {
@@ -15,13 +17,29 @@ const PlaceOrderButton = (): JSX.Element => {
 		waitingForRedirect,
 	} = useCheckoutSubmit();
 
+	const hasNoticesVisible = useSelect( ( select ) => {
+		const noticeContainers = select(
+			STORE_NOTICES_STORE_KEY
+		).getContainers();
+		const noticeStore = select( 'core/notices' );
+		return noticeContainers.some( ( container ) => {
+			return (
+				noticeStore
+					.getNotices( container )
+					.filter( ( notice ) => notice.status === 'error' ).length >
+				0
+			);
+		} );
+	} );
+
 	return (
 		<Button
 			className="wc-block-components-checkout-place-order-button"
 			onClick={ onSubmit }
 			disabled={
 				isCalculating ||
 				isDisabled ||
+				hasNoticesVisible ||
 				waitingForProcessing ||
 				waitingForRedirect
 			}

assets/js/base/context/event-emit/utils.ts

@@ -26,8 +26,16 @@ export enum responseTypes {
 }
 
 export enum noticeContexts {
-	PAYMENTS = 'wc/payment-area',
-	EXPRESS_PAYMENTS = 'wc/express-payment-area',
+	GLOBAL = 'wc/global',
+	CART = 'wc/cart',
+	CHECKOUT = 'wc/checkout',
+	PAYMENTS = 'wc/checkout/payments',
+	EXPRESS_PAYMENTS = 'wc/checkout/express-payments',
+	CONTACT_INFORMATION = 'wc/checkout/contact-information',
+	SHIPPING_ADDRESS = 'wc/checkout/shipping-address',
+	BILLING_ADDRESS = 'wc/checkout/billing-address',
+	SHIPPING_METHODS = 'wc/checkout/shipping-methods',
+	CHECKOUT_ACTIONS = 'wc/checkout/checkout-actions',
 }
 
 export interface ResponseType extends Record< string, unknown > {

assets/js/base/context/hooks/cart/use-store-cart-coupons.ts

@@ -1,16 +1,12 @@
-/** @typedef { import('@woocommerce/type-defs/hooks').StoreCartCoupon } StoreCartCoupon */
-
 /**
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	CART_STORE_KEY as storeKey,
-	VALIDATION_STORE_KEY,
-} from '@woocommerce/block-data';
+import { CART_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import type { StoreCartCoupon } from '@woocommerce/types';
+import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
@@ -21,39 +17,21 @@ import { useStoreCart } from './use-store-cart';
  * This is a custom hook for loading the Store API /cart/coupons endpoint and an
  * action for adding a coupon _to_ the cart.
  * See also: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/src/RestApi/StoreApi
- *
- * @return {StoreCartCoupon} An object exposing data and actions from/for the
- * store api /cart/coupons endpoint.
  */
 export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const { cartCoupons, cartIsLoading } = useStoreCart();
 	const { createErrorNotice } = useDispatch( 'core/notices' );
 	const { createNotice } = useDispatch( 'core/notices' );
 	const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
 
-	const {
-		applyCoupon,
-		removeCoupon,
-		isApplyingCoupon,
-		isRemovingCoupon,
-	}: Pick<
-		StoreCartCoupon,
-		| 'applyCoupon'
-		| 'removeCoupon'
-		| 'isApplyingCoupon'
-		| 'isRemovingCoupon'
-		| 'receiveApplyingCoupon'
-	> = useSelect(
-		( select, { dispatch } ) => {
-			const store = select( storeKey );
-			const actions = dispatch( storeKey );
-
+	const { applyCoupon, removeCoupon, receiveApplyingCoupon } =
+		useDispatch( CART_STORE_KEY );
+	const { isApplyingCoupon, isRemovingCoupon } = useSelect(
+		( select ) => {
+			const store = select( CART_STORE_KEY );
 			return {
-				applyCoupon: actions.applyCoupon,
-				removeCoupon: actions.removeCoupon,
 				isApplyingCoupon: store.isApplyingCoupon(),
 				isRemovingCoupon: store.isRemovingCoupon(),
-				receiveApplyingCoupon: actions.receiveApplyingCoupon,
 			};
 		},
 		[ createErrorNotice, createNotice ]
@@ -62,7 +40,14 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const applyCouponWithNotices = ( couponCode: string ) => {
 		applyCoupon( couponCode )
 			.then( ( result ) => {
-				if ( result === true ) {
+				if (
+					result === true &&
+					__experimentalApplyCheckoutFilter( {
+						filterName: 'showApplyCouponNotice',
+						defaultValue: true,
+						arg: { couponCode, context },
+					} )
+				) {
 					createNotice(
 						'info',
 						sprintf(
@@ -96,7 +81,14 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const removeCouponWithNotices = ( couponCode: string ) => {
 		removeCoupon( couponCode )
 			.then( ( result ) => {
-				if ( result === true ) {
+				if (
+					result === true &&
+					__experimentalApplyCheckoutFilter( {
+						filterName: 'showRemoveCouponNotice',
+						defaultValue: true,
+						arg: { couponCode, context },
+					} )
+				) {
 					createNotice(
 						'info',
 						sprintf(

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

@@ -8,7 +8,6 @@ export * from './use-store-products';
 export * from './use-store-add-to-cart';
 export * from './use-customer-data';
 export * from './use-checkout-address';
-export * from './use-checkout-notices';
 export * from './use-checkout-submit';
 export * from './use-checkout-extension-data';
 export * from './use-validation';

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

@@ -24,10 +24,9 @@ import {
  * Internal dependencies
  */
 import { useEventEmitters, reducer as emitReducer } from './event-emit';
-import type { emitterCallback } from '../../../event-emit';
+import { emitterCallback, noticeContexts } from '../../../event-emit';
 import { STATUS } from '../../../../../data/checkout/constants';
 import { useStoreEvents } from '../../../hooks/use-store-events';
-import { useCheckoutNotices } from '../../../hooks/use-checkout-notices';
 import { CheckoutState } from '../../../../../data/checkout/default-state';
 import {
 	getExpressPaymentMethods,
@@ -111,11 +110,29 @@ export const CheckoutEventsProvider = ( {
 	}
 
 	const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
-	const { createErrorNotice } = useDispatch( 'core/notices' );
-
 	const { dispatchCheckoutEvent } = useStoreEvents();
 	const { checkoutNotices, paymentNotices, expressPaymentNotices } =
-		useCheckoutNotices();
+		useSelect( ( select ) => {
+			const { getNotices } = select( 'core/notices' );
+			const checkoutContexts = Object.values( noticeContexts ).filter(
+				( context ) =>
+					context !== noticeContexts.PAYMENTS &&
+					context !== noticeContexts.EXPRESS_PAYMENTS
+			);
+			const allCheckoutNotices = checkoutContexts.reduce(
+				( acc, context ) => {
+					return [ ...acc, ...getNotices( context ) ];
+				},
+				[]
+			);
+			return {
+				checkoutNotices: allCheckoutNotices,
+				paymentNotices: getNotices( noticeContexts.PAYMENTS ),
+				expressPaymentNotices: getNotices(
+					noticeContexts.EXPRESS_PAYMENTS
+				),
+			};
+		}, [] );
 
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
 	const currentObservers = useRef( observers );
@@ -160,12 +177,7 @@ export const CheckoutEventsProvider = ( {
 				setValidationErrors,
 			} );
 		}
-	}, [
-		checkoutState.status,
-		setValidationErrors,
-		createErrorNotice,
-		checkoutActions,
-	] );
+	}, [ checkoutState.status, setValidationErrors, checkoutActions ] );
 
 	const previousStatus = usePrevious( checkoutState.status );
 	const previousHasError = usePrevious( checkoutState.hasError );
@@ -199,7 +211,6 @@ export const CheckoutEventsProvider = ( {
 		checkoutState.orderNotes,
 		previousStatus,
 		previousHasError,
-		createErrorNotice,
 		checkoutNotices,
 		expressPaymentNotices,
 		paymentNotices,