Refresh page when ECE is dismissed

changelog/fix-9794-refresh-page-when-ece-dismissed

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Refresh the cart and checkout pages when ECE is dismissed and the shipping options were modified in the payment sheet.

client/express-checkout/event-handlers.js

@@ -13,12 +13,16 @@ import {
 	normalizeShippingAddress,
 	normalizeLineItems,
 	getExpressCheckoutData,
+	updateBlocksShippingUI,
+	updateShortcodeShippingUI,
 } from './utils';
 import {
 	trackExpressCheckoutButtonClick,
 	trackExpressCheckoutButtonLoad,
 } from './tracking';
 
+let lastSelectedAddress = null;
+
 export const shippingAddressChangeHandler = async ( api, event, elements ) => {
 	try {
 		const response = await api.expressCheckoutECECalculateShippingOptions(
@@ -29,6 +33,9 @@ export const shippingAddressChangeHandler = async ( api, event, elements ) => {
 			elements.update( {
 				amount: response.total.amount,
 			} );
+
+			lastSelectedAddress = event.address;
+
 			event.resolve( {
 				shippingRates: response.shipping_options,
 				lineItems: normalizeLineItems( response.displayItems ),
@@ -171,5 +178,26 @@ export const onCompletePaymentHandler = () => {
 };
 
 export const onCancelHandler = () => {
+	const context = getExpressCheckoutData( 'button_context' );
+	const isBlocks = getExpressCheckoutData( 'has_block' );
+
+	/*
+	 * CA and GB addresses are redacted and are causing errors until WooCommerce is able to
+	 * handle redacted addresses.
+	 * https://developers.google.com/pay/api/web/reference/response-objects#IntermediateAddress
+	 */
+	if (
+		[ 'cart', 'checkout' ].includes( context ) &&
+		lastSelectedAddress &&
+		! [ 'CA', 'GB' ].includes( lastSelectedAddress.country )
+	) {
+		if ( isBlocks ) {
+			updateBlocksShippingUI( lastSelectedAddress );
+		} else {
+			updateShortcodeShippingUI( lastSelectedAddress );
+		}
+	}
+
+	lastSelectedAddress = null;
 	unblockUI();
 };

client/express-checkout/utils/index.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 export * from './normalize';
+export * from './shipping-fields';
 import { getDefaultBorderRadius } from 'wcpay/utils/express-checkout';
 
 interface MyWindow extends Window {

client/express-checkout/utils/shipping-fields.js

@@ -0,0 +1,76 @@
+/* global jQuery */
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { normalizeShippingAddress, getExpressCheckoutData } from '.';
+
+/*
+ * Updates a field in a form with a new value.
+ *
+ * @param {String} formSelector - The selector for the form containing the field.
+ * @param {Object} fieldName - The name of the field to update.
+ * @param {Object} value - The new value for the field.
+ */
+const updateShortcodeField = ( formSelector, fieldName, value ) => {
+	const field = document.querySelector(
+		`${ formSelector } [name="${ fieldName }"]`
+	);
+	if ( field ) {
+		field.value = value;
+		jQuery( field ).trigger( 'change' ).trigger( 'close' );
+	}
+};
+
+/**
+ * Updates the WooCommerce Blocks shipping UI to reflect a new shipping address.
+ *
+ * @param {Object} eventAddress - The shipping address returned by the payment event.
+ */
+export const updateBlocksShippingUI = ( eventAddress ) => {
+	wp?.data
+		?.dispatch( 'wc/store/cart' )
+		?.setShippingAddress( normalizeShippingAddress( eventAddress ) );
+};
+
+/**
+ * Updates the WooCommerce shortcode cart/checkout shipping UI to reflect a new shipping address.
+ *
+ * @param {Object} eventAddress - The shipping address returned by the payment event.
+ */
+export const updateShortcodeShippingUI = ( eventAddress ) => {
+	const context = getExpressCheckoutData( 'button_context' );
+	const address = normalizeShippingAddress( eventAddress );
+
+	const keys = [ 'country', 'state', 'city', 'postcode' ];
+
+	if ( context === 'cart' ) {
+		keys.forEach( ( key ) => {
+			if ( address[ key ] ) {
+				updateShortcodeField(
+					'form.woocommerce-shipping-calculator',
+					`calc_shipping_${ key }`,
+					address[ key ]
+				);
+			}
+		} );
+		document
+			.querySelector(
+				'form.woocommerce-shipping-calculator [name="calc_shipping"]'
+			)
+			?.click();
+	} else if ( context === 'checkout' ) {
+		keys.forEach( ( key ) => {
+			if ( address[ key ] ) {
+				updateShortcodeField(
+					'form.woocommerce-checkout',
+					`billing_${ key }`,
+					address[ key ]
+				);
+			}
+		} );
+	}
+};

client/tokenized-express-checkout/event-handlers.js

@@ -8,7 +8,12 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import { getErrorMessageFromNotice, getExpressCheckoutData } from './utils';
+import {
+	getErrorMessageFromNotice,
+	getExpressCheckoutData,
+	updateBlocksShippingUI,
+	updateShortcodeShippingUI,
+} from './utils';
 import {
 	trackExpressCheckoutButtonClick,
 	trackExpressCheckoutButtonLoad,
@@ -24,6 +29,7 @@ import {
 	transformPrice,
 } from './transformers/wc-to-stripe';
 
+let lastSelectedAddress = null;
 let cartApi = new ExpressCheckoutCartApi();
 export const setCartApiHandler = ( handler ) => ( cartApi = handler );
 export const getCartApiHandler = () => cartApi;
@@ -56,6 +62,9 @@ export const shippingAddressChangeHandler = async ( event, elements ) => {
 				cartData.totals
 			),
 		} );
+
+		lastSelectedAddress = event.address;
+
 		event.resolve( {
 			shippingRates: transformCartDataForShippingRates( cartData ),
 			lineItems: transformCartDataForDisplayItems( cartData ),
@@ -216,5 +225,26 @@ export const onCompletePaymentHandler = () => {
 };
 
 export const onCancelHandler = () => {
+	const context = getExpressCheckoutData( 'button_context' );
+	const isBlocks = getExpressCheckoutData( 'has_block' );
+
+	/*
+	 * CA and GB addresses are redacted and are causing errors until WooCommerce is able to
+	 * handle redacted addresses.
+	 * https://developers.google.com/pay/api/web/reference/response-objects#IntermediateAddress
+	 */
+	if (
+		[ 'cart', 'checkout' ].includes( context ) &&
+		lastSelectedAddress &&
+		! [ 'CA', 'GB' ].includes( lastSelectedAddress.country )
+	) {
+		if ( isBlocks ) {
+			updateBlocksShippingUI( lastSelectedAddress );
+		} else {
+			updateShortcodeShippingUI( lastSelectedAddress );
+		}
+	}
+
+	lastSelectedAddress = null;
 	unblockUI();
 };

client/tokenized-express-checkout/utils/index.ts

@@ -3,6 +3,7 @@
  */
 import { WCPayExpressCheckoutParams } from 'wcpay/express-checkout/utils';
 export * from './normalize';
+export * from './shipping-fields';
 import { getDefaultBorderRadius } from 'wcpay/utils/express-checkout';
 
 export const getExpressCheckoutData = <

client/tokenized-express-checkout/utils/shipping-fields.js

@@ -0,0 +1,76 @@
+/* global jQuery */
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { normalizeShippingAddress, getExpressCheckoutData } from '.';
+
+/*
+ * Updates a field in a form with a new value.
+ *
+ * @param {String} formSelector - The selector for the form containing the field.
+ * @param {Object} fieldName - The name of the field to update.
+ * @param {Object} value - The new value for the field.
+ */
+const updateShortcodeField = ( formSelector, fieldName, value ) => {
+	const field = document.querySelector(
+		`${ formSelector } [name="${ fieldName }"]`
+	);
+	if ( field ) {
+		field.value = value;
+		jQuery( field ).trigger( 'change' ).trigger( 'close' );
+	}
+};
+
+/**
+ * Updates the WooCommerce Blocks shipping UI to reflect a new shipping address.
+ *
+ * @param {Object} eventAddress - The shipping address returned by the payment event.
+ */
+export const updateBlocksShippingUI = ( eventAddress ) => {
+	wp?.data
+		?.dispatch( 'wc/store/cart' )
+		?.setShippingAddress( normalizeShippingAddress( eventAddress ) );
+};
+
+/**
+ * Updates the WooCommerce shortcode cart/checkout shipping UI to reflect a new shipping address.
+ *
+ * @param {Object} eventAddress - The shipping address returned by the payment event.
+ */
+export const updateShortcodeShippingUI = ( eventAddress ) => {
+	const context = getExpressCheckoutData( 'button_context' );
+	const address = normalizeShippingAddress( eventAddress );
+
+	const keys = [ 'country', 'state', 'city', 'postcode' ];
+
+	if ( context === 'cart' ) {
+		keys.forEach( ( key ) => {
+			if ( address[ key ] ) {
+				updateShortcodeField(
+					'form.woocommerce-shipping-calculator',
+					`calc_shipping_${ key }`,
+					address[ key ]
+				);
+			}
+		} );
+		document
+			.querySelector(
+				'form.woocommerce-shipping-calculator [name="calc_shipping"]'
+			)
+			?.click();
+	} else if ( context === 'checkout' ) {
+		keys.forEach( ( key ) => {
+			if ( address[ key ] ) {
+				updateShortcodeField(
+					'form.woocommerce-checkout',
+					`billing_${ key }`,
+					address[ key ]
+				);
+			}
+		} );
+	}
+};