fix: handle checkout form inline errors and expired sessions (#2255)

* fix: handle inline checkout form validation errors

* fix: remove unwanted change

* fix(modal-checkout): load new modal checkout session if session expires

* fix: copilot feedback

* fix: display initial error on unrecoverable error reload

* fix: typo

Author: dkoo

includes/class-modal-checkout.php

@@ -759,6 +759,7 @@ public static function enqueue_scripts() {
 					'billing_details'  => self::get_modal_checkout_labels( 'billing_details' ),
 					'shipping_details' => self::get_modal_checkout_labels( 'shipping_details' ),
 					'gift_recipient'   => self::get_modal_checkout_labels( 'gift_recipient' ),
+					'critical_error'   => self::get_modal_checkout_labels( 'checkout_critical_error' ),
 					'complete_button'  => self::order_button_text_with_price(),
 				],
 			]
@@ -970,13 +971,18 @@ public static function enqueue_modal( $product_id = null ) {
 					'register_modal_title' => self::get_modal_checkout_labels( 'register_modal_title' ),
 					'signin_modal_title'   => self::get_modal_checkout_labels( 'signin_modal_title' ),
 					'thankyou_modal_title' => self::get_modal_checkout_labels( 'checkout_success' ),
+					'critical_error'       => self::get_modal_checkout_labels( 'checkout_critical_error' ),
 				],
 
 				'processing_payment_messages'     => [
 					[
 						'text'  => __( 'Processing payment...', 'newspack-blocks' ),
 						'delay' => 0,
 					],
+					[
+						'text'  => __( 'Processing payment...', 'newspack-blocks' ),
+						'delay' => 250,
+					],
 					[
 						'text'  => __( 'Verifying details...', 'newspack-blocks' ),
 						'delay' => 8000,
@@ -1551,7 +1557,7 @@ public static function woocommerce_cart_product_cannot_be_purchased_message( $me
 	 */
 	public static function hide_expiry_message_shop_link( $message ) {
 		if ( self::is_modal_checkout() && strpos( $message, 'Sorry, your session has expired' ) !== false ) {
-			return __( 'Could not complete this transaction. Please contact us for assistance.', 'newspack-blocks' );
+			return self::get_modal_checkout_labels( 'checkout_critical_error' );
 		}
 		return $message;
 	}
@@ -2029,6 +2035,7 @@ public static function get_modal_checkout_labels( $key = null ) {
 				'checkout_nyp_thankyou'      => __( "Thank you for your generosity! We couldn't do this without you!", 'newspack-blocks' ),
 				'checkout_nyp_title'         => __( 'Increase your support', 'newspack-blocks' ),
 				'checkout_nyp_apply'         => __( 'Apply', 'newspack-blocks' ),
+				'checkout_critical_error'    => __( 'We ran into a problem processing this request. Please try again.', 'newspack-blocks' ),
 			];
 
 			/**

src/modal-checkout/index.js

@@ -8,7 +8,7 @@ import './checkout.scss';
  * Internal dependencies
  */
 import { manageCheckoutAttempt, manageCheckoutSuccess, manageLoaded, managePagination } from './analytics';
-import { domReady } from './utils';
+import { domReady, onCheckoutPlaceOrderProcessing } from './utils';
 
 ( $ => {
 	domReady( () => {
@@ -26,6 +26,7 @@ import { domReady } from './utils';
 		const placeOrderStartEvent = new CustomEvent( 'checkout-place-order-start' );
 		const placeOrderSuccessEvent = new CustomEvent( 'checkout-place-order-success' );
 		const placeOrderErrorEvent = new CustomEvent( 'checkout-place-order-error' );
+		const placeOrderCriticalErrorEvent = new CustomEvent( 'checkout-place-order-critical-error' );
 
 		function getEventHandlers( element, event ) {
 			const events = $._data( element, 'events' );
@@ -121,16 +122,30 @@ import { domReady } from './utils';
 					placedOrder = true;
 					container.dispatchEvent( placeOrderStartEvent );
 				} );
+				onCheckoutPlaceOrderProcessing( container, function () {
+					if ( ! placedOrder ) {
+						return;
+					}
+					// If the form stops processing before the `checkout_place_order_success` event is fired, dispatch an error event.
+					if ( ! $form.is( '.processing' ) ) {
+						placedOrder = false;
+						container.dispatchEvent( placeOrderErrorEvent );
+					}
+				} );
 				$form.on( 'checkout_place_order_success', function () {
 					placedOrder = false;
 					container.dispatchEvent( placeOrderSuccessEvent );
 				} );
 
-				$( document.body ).on( 'checkout_error', function () {
+				$( document.body ).on( 'checkout_error', function ( event, errors ) {
 					if ( ! placedOrder ) {
 						return;
 					}
 					placedOrder = false;
+					if ( errors && errors.indexOf( newspackBlocksModalCheckout.labels.critical_error ) >= 0 ) {
+						container.dispatchEvent( placeOrderCriticalErrorEvent );
+						return;
+					}
 					container.dispatchEvent( placeOrderErrorEvent );
 				} );
 				$form.on( 'update_checkout', function () {

src/modal-checkout/modal.js

@@ -18,6 +18,7 @@ import {
 	onCheckoutCancel,
 	onCheckoutPlaceOrderStart,
 	onCheckoutPlaceOrderError,
+	onCheckoutPlaceOrderCriticalError,
 	createHiddenInput,
 	triggerFormSubmit,
 	getCheckoutData,
@@ -39,6 +40,9 @@ let inCheckoutIntent = false;
 // Checkout title.
 let checkoutTitle = newspackBlocksModal.labels.checkout_modal_title;
 
+// Last-submitted checkout form.
+let activeCheckoutForm = null;
+
 // Close the modal.
 const closeModal = el => {
 	if ( el.overlayId && window.newspackReaderActivation?.overlays ) {
@@ -129,13 +133,14 @@ domReady( () => {
 			processingPaymentTimeouts = [];
 		};
 
-		const renderProcessingPaymentScreen = () => {
+		const renderProcessingPaymentScreen = event => {
 			spinner.querySelectorAll( `.${ PROCESSING_PAYMENT_TEXT_CLASS }` ).forEach( node => node.remove() );
 			spinner.style.display = 'flex';
 			clearProcessingPaymentTimeouts();
 			processingPaymentText.textContent = PROCESSING_PAYMENT_MESSAGES[ 0 ]?.text ?? '';
 			PROCESSING_PAYMENT_MESSAGES.slice( 1 ).forEach( ( { text, delay } ) => {
 				const timeoutId = setTimeout( () => {
+					event.target.dispatchEvent( new CustomEvent( 'checkout-place-order-processing' ) );
 					processingPaymentText.textContent = text;
 				}, delay );
 				processingPaymentTimeouts.push( timeoutId );
@@ -164,6 +169,15 @@ domReady( () => {
 				summaryTextNode.textContent = checkoutData.price_summary;
 			}
 
+			// Display initial errors if any.
+			if ( modalCheckout.initialErrors ) {
+				const errorContainer = document.createElement( 'div' );
+				errorContainer.classList.add( 'woocommerce-error' );
+				errorContainer.textContent = modalCheckout.initialErrors;
+				container.prepend( errorContainer );
+				delete modalCheckout.initialErrors;
+			}
+
 			// Revert modal title and width default value.
 			setModalSize();
 			setModalTitle( checkoutTitle );
@@ -192,6 +206,20 @@ domReady( () => {
 
 			hideProcessingPaymentScreen();
 		} );
+
+		// Resubmit modal checkout form if an unrecoverable error is encountered.
+		const refreshCheckout = form => {
+			if ( ! form ) {
+				return;
+			}
+			closeCheckout();
+			spinner.style.display = 'none';
+			modalCheckout.initialErrors = newspackBlocksModal.labels.critical_error;
+			form.requestSubmit( form.querySelector( 'button[type="submit"]' ) );
+			hideProcessingPaymentScreen();
+		};
+
+		onCheckoutPlaceOrderCriticalError( container, () => refreshCheckout( activeCheckoutForm ) );
 	}
 
 	iframeReady( iframe, handleIframeReady, () => {
@@ -468,6 +496,7 @@ domReady( () => {
 			// Append product data info to the modal, so we can grab it for GA4 events outside of the iframe.
 			document.getElementById( 'newspack_modal_checkout' ).setAttribute( 'data-checkout', JSON.stringify( checkoutData ) );
 		}
+		activeCheckoutForm = form;
 	};
 
 	/**

src/modal-checkout/utils.js

@@ -180,16 +180,16 @@ export function onCheckoutPlaceOrderStart( container, callback ) {
 }
 
 /**
- * Run a callback when the checkout place order succeeds.
+ * Run a callback when the checkout place order is processing.
  *
  * @param {Object}   container The container element inside the iframe document.
- * @param {Function} callback  The callback to execute when the checkout place order succeeds.
+ * @param {Function} callback  The callback to execute when the checkout place order is processing.
  */
-export function onCheckoutPlaceOrderSuccess( container, callback ) {
-	if ( container.checkoutPlaceOrderSuccess ) {
+export function onCheckoutPlaceOrderProcessing( container, callback ) {
+	if ( container.checkoutPlaceOrderProcessing ) {
 		callback();
 	} else {
-		container.addEventListener( 'checkout-place-order-success', callback );
+		container.addEventListener( 'checkout-place-order-processing', callback );
 	}
 }
 
@@ -207,6 +207,20 @@ export function onCheckoutPlaceOrderError( container, callback ) {
 	}
 }
 
+/**
+ * Run a callback when the checkout place order fails in an unrecoverable state.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout place order fails in an unrecoverable state.
+ */
+export function onCheckoutPlaceOrderCriticalError( container, callback ) {
+	if ( container.checkoutPlaceOrderCriticalError ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-place-order-critical-error', callback );
+	}
+}
+
 /**
  * Run a callback when the checkout is complete.
  *