Merge pull request #1629 from Automattic/feat/modal-checkout-custom-c…

…oupon-form feat(modal-checkout): custom coupon form
Automattic · Dec 20, 2023 · 5b47c04 · 5b47c04
2 parents d8baa61 + 315e81b
commit 5b47c04
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 10 deletions.
diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss
@@ -255,6 +255,13 @@
 				flex-grow: 1;
 			}
 		}
+		p.result {
+			margin: 0;
+			font-size: 14px;
+			&.error {
+				color: #cc1818;
+			}
+		}
 	}
 	#checkout_details { /* stylelint-disable-line */
 		display: flex;

diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js
@@ -37,20 +37,12 @@ import './checkout.scss';
 			return;
 		}
 
-		const $coupon = $( 'form.checkout_coupon' );
+		const $coupon = $( 'form.modal_checkout_coupon' );
 		const $checkout_continue = $( '#checkout_continue' );
 		const $customer_details = $( '#customer_details' );
 		const $after_customer_details = $( '#after_customer_details' );
 		const $place_order_button = $( '#place_order' );
 
-		/**
-		 * Ensure coupon form is shown after removing a coupon.
-		 */
-		$( document.body ).on( 'removed_coupon_in_checkout', function () {
-			$coupon.show();
-			clearNotices();
-		} );
-
 		/**
 		 * Handle styling update for selected payment method.
 		 */
@@ -173,6 +165,63 @@ import './checkout.scss';
 			container.dispatchEvent( readyEvent );
 		}
 
+		/**
+		 * Handle coupon form submit.
+		 *
+		 * @param {Event} ev
+		 */
+		function handleCouponSubmit( ev ) {
+			ev.preventDefault();
+			if ( $coupon.is( '.processing' ) ) {
+				return false;
+			}
+			$coupon.addClass( 'processing' ).block( {
+				message: null,
+				overlayCSS: {
+					background: '#fff',
+					opacity: 0.6,
+				},
+			} );
+			const data = {
+				security: wc_checkout_params.apply_coupon_nonce,
+				coupon_code: $coupon.find( 'input[name="coupon_code"]' ).val(),
+			};
+			// Ajax request.
+			$.ajax( {
+				type: 'POST',
+				url: wc_checkout_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'apply_coupon' ),
+				data,
+				dataType: 'html',
+				success: code => {
+					clearNotices();
+					$coupon.find( '.result' ).remove();
+					if ( code ) {
+						const isError = code.includes( 'error' );
+						$coupon.append(
+							'<p class="result ' + ( isError ? 'error' : '' ) + '">' + $( code ).text() + '</p>'
+						);
+						if ( isError ) {
+							$coupon.find( 'input[name="coupon_code"]' ).focus();
+						}
+						$( document.body ).trigger( 'applied_coupon_in_checkout', [ data.coupon_code ] );
+						$( document.body ).trigger( 'update_checkout', { update_shipping_method: false } );
+					}
+				},
+				complete: () => {
+					// Unblock form.
+					$coupon.removeClass( 'processing' ).unblock();
+				},
+			} );
+		}
+		if ( $coupon.length ) {
+			$coupon.on( 'submit', handleCouponSubmit );
+			$( document.body ).on( 'removed_coupon_in_checkout', () => {
+				clearNotices();
+				$coupon.find( '.result' ).remove();
+				$coupon.find( 'input[name="coupon_code"]' ).val( '' ).focus();
+			} );
+		}
+
 		/**
 		 * Handle form 1st step submission.
 		 *

diff --git a/src/modal-checkout/templates/form-coupon.php b/src/modal-checkout/templates/form-coupon.php
@@ -13,7 +13,7 @@
 }
 
 ?>
-<form class="checkout_coupon woocommerce-form-coupon" method="post">
+<form class="modal_checkout_coupon woocommerce-form-coupon" method="post">
 	<h3><?php esc_html_e( 'Apply a coupon code', 'newspack-blocks' ); ?></h3>
 	<p>
 		<input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'newspack-blocks' ); ?>" id="coupon_code" value="" />