Refactor external dispatch actions from being called inside useSelect (https://github.com/woocommerce/woocommerce-blocks/pull/6718)

* refactor coupon functions outside of useSelect

* fix test

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/test/block.test.js

@@ -9,12 +9,6 @@ import { ProductDataContextProvider } from '@woocommerce/shared-context';
  */
 import { Block } from '../block';
 
-jest.mock( '@woocommerce/block-settings', () => ( {
-	...jest.requireActual( '@woocommerce/block-settings' ),
-	__esModule: true,
-	PLACEHOLDER_IMG_SRC: 'placeholder.jpg',
-} ) );
-
 jest.mock( '../../../../../hooks/style-attributes', () => ( {
 	__esModule: true,
 	useBorderProps: jest.fn( () => ( {

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

@@ -29,103 +29,106 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const { createNotice } = useDispatch( 'core/notices' );
 	const { setValidationErrors } = useValidationContext();
 
-	const results: Pick<
+	const {
+		applyCoupon,
+		removeCoupon,
+		isApplyingCoupon,
+		isRemovingCoupon,
+	}: Pick<
 		StoreCartCoupon,
-		'applyCoupon' | 'removeCoupon' | 'isApplyingCoupon' | 'isRemovingCoupon'
+		| 'applyCoupon'
+		| 'removeCoupon'
+		| 'isApplyingCoupon'
+		| 'isRemovingCoupon'
+		| 'receiveApplyingCoupon'
 	> = useSelect(
 		( select, { dispatch } ) => {
 			const store = select( storeKey );
-			const isApplyingCoupon = store.isApplyingCoupon();
+			const actions = dispatch( storeKey );
-			const isRemovingCoupon = store.isRemovingCoupon();
-			const {
-				applyCoupon,
-				removeCoupon,
-				receiveApplyingCoupon,
-			}: {
-				applyCoupon: ( coupon: string ) => Promise< boolean >;
-				removeCoupon: ( coupon: string ) => Promise< boolean >;
-				receiveApplyingCoupon: ( coupon: string ) => void;
-			} = dispatch( storeKey );
-
-			const applyCouponWithNotices = ( couponCode: string ) => {
-				applyCoupon( couponCode )
-					.then( ( result ) => {
-						if ( result === true ) {
-							createNotice(
-								'info',
-								sprintf(
-									/* translators: %s coupon code. */
-									__(
-										'Coupon code "%s" has been applied to your cart.',
-										'woo-gutenberg-products-block'
-									),
-									couponCode
-								),
-								{
-									id: 'coupon-form',
-									type: 'snackbar',
-									context,
-								}
-							);
-						}
-					} )
-					.catch( ( error ) => {
-						setValidationErrors( {
-							coupon: {
-								message: decodeEntities( error.message ),
-								hidden: false,
-							},
-						} );
-						// Finished handling the coupon.
-						receiveApplyingCoupon( '' );
-					} );
-			};
-
-			const removeCouponWithNotices = ( couponCode: string ) => {
-				removeCoupon( couponCode )
-					.then( ( result ) => {
-						if ( result === true ) {
-							createNotice(
-								'info',
-								sprintf(
-									/* translators: %s coupon code. */
-									__(
-										'Coupon code "%s" has been removed from your cart.',
-										'woo-gutenberg-products-block'
-									),
-									couponCode
-								),
-								{
-									id: 'coupon-form',
-									type: 'snackbar',
-									context,
-								}
-							);
-						}
-					} )
-					.catch( ( error ) => {
-						createErrorNotice( error.message, {
-							id: 'coupon-form',
-							context,
-						} );
-						// Finished handling the coupon.
-						receiveApplyingCoupon( '' );
-					} );
-			};
 
 			return {
-				applyCoupon: applyCouponWithNotices,
+				applyCoupon: actions.applyCoupon,
-				removeCoupon: removeCouponWithNotices,
+				removeCoupon: actions.removeCoupon,
-				isApplyingCoupon,
+				isApplyingCoupon: store.isApplyingCoupon(),
-				isRemovingCoupon,
+				isRemovingCoupon: store.isRemovingCoupon(),
+				receiveApplyingCoupon: actions.receiveApplyingCoupon,
 			};
 		},
 		[ createErrorNotice, createNotice ]
 	);
 
+	const applyCouponWithNotices = ( couponCode: string ) => {
+		applyCoupon( couponCode )
+			.then( ( result ) => {
+				if ( result === true ) {
+					createNotice(
+						'info',
+						sprintf(
+							/* translators: %s coupon code. */
+							__(
+								'Coupon code "%s" has been applied to your cart.',
+								'woo-gutenberg-products-block'
+							),
+							couponCode
+						),
+						{
+							id: 'coupon-form',
+							type: 'snackbar',
+							context,
+						}
+					);
+				}
+			} )
+			.catch( ( error ) => {
+				setValidationErrors( {
+					coupon: {
+						message: decodeEntities( error.message ),
+						hidden: false,
+					},
+				} );
+				// Finished handling the coupon.
+				receiveApplyingCoupon( '' );
+			} );
+	};
+
+	const removeCouponWithNotices = ( couponCode: string ) => {
+		removeCoupon( couponCode )
+			.then( ( result ) => {
+				if ( result === true ) {
+					createNotice(
+						'info',
+						sprintf(
+							/* translators: %s coupon code. */
+							__(
+								'Coupon code "%s" has been removed from your cart.',
+								'woo-gutenberg-products-block'
+							),
+							couponCode
+						),
+						{
+							id: 'coupon-form',
+							type: 'snackbar',
+							context,
+						}
+					);
+				}
+			} )
+			.catch( ( error ) => {
+				createErrorNotice( error.message, {
+					id: 'coupon-form',
+					context,
+				} );
+				// Finished handling the coupon.
+				receiveApplyingCoupon( '' );
+			} );
+	};
+
 	return {
 		appliedCoupons: cartCoupons,
 		isLoading: cartIsLoading,
-		...results,
+		applyCoupon: applyCouponWithNotices,
+		removeCoupon: removeCouponWithNotices,
+		isApplyingCoupon,
+		isRemovingCoupon,
 	};
 };