Merge pull request #2256 from woocommerce/PCP-3105-fastlane-improve-script-enqueue

AXO: Add loading overlays in the checkout

modules/ppcp-axo/resources/css/styles.scss

@@ -1,6 +1,15 @@
 .ppcp-axo-watermark-container {
 	max-width: 200px;
 	margin-top: 10px;
+	position: relative;
+
+	&.loader:before {
+		height: 12px;
+		width: 12px;
+		margin-left: -6px;
+		margin-top: -6px;
+		left: 12px;
+	}
 }
 
 .ppcp-axo-payment-container {
@@ -28,6 +37,7 @@
 
 .ppcp-axo-customer-details {
 	margin-bottom: 40px;
+	position: relative;
 }
 
 .axo-checkout-header-section {
@@ -44,6 +54,31 @@
 		padding: 0.6em 1em;
 }
 
+.ppcp-axo-watermark-loading {
+	min-height: 12px;
+}
+
+.ppcp-axo-overlay,
+.ppcp-axo-watermark-loading:after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(255, 255, 255, 0.5);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 999;
+	content: '';
+}
+
+.ppcp-axo-loading .col-1 {
+	position: relative;
+	opacity: 0.9;
+	transition: opacity 0.5s ease;
+}
+
 #payment .payment_methods li label[for="payment_method_ppcp-axo-gateway"] {
 	img {
 		float: none;

modules/ppcp-axo/resources/js/AxoManager.js

@@ -231,6 +231,7 @@ class AxoManager {
 
         if (scenario.defaultFormFields) {
             this.el.customerDetails.show();
+            this.toggleLoaderAndOverlay(this.el.customerDetails, 'loader', 'ppcp-axo-overlay');
         } else {
             this.el.customerDetails.hide();
         }
@@ -248,7 +249,6 @@ class AxoManager {
             this.$(this.el.fieldBillingEmail.selector).append(
                 this.$(this.el.watermarkContainer.selector)
             );
-
         } else {
             this.el.emailWidgetContainer.hide();
             if (!scenario.defaultEmailField) {
@@ -496,6 +496,8 @@ class AxoManager {
         (await this.fastlane.FastlaneWatermarkComponent({
             includeAdditionalInfo
         })).render(this.el.watermarkContainer.selector);
+
+        this.toggleWatermarkLoading(this.el.watermarkContainer, 'ppcp-axo-watermark-loading', 'loader');
     }
 
     watchEmail() {
@@ -840,6 +842,28 @@ class AxoManager {
             data.billing_phone = phone;
         }
     }
+
+    toggleLoaderAndOverlay(element, loaderClass, overlayClass) {
+        const loader = document.querySelector(`${element.selector} .${loaderClass}`);
+        const overlay = document.querySelector(`${element.selector} .${overlayClass}`);
+        if (loader) {
+            loader.classList.toggle(loaderClass);
+        }
+        if (overlay) {
+            overlay.classList.toggle(overlayClass);
+        }
+    }
+
+    toggleWatermarkLoading(container, loadingClass, loaderClass) {
+        const watermarkLoading = document.querySelector(`${container.selector}.${loadingClass}`);
+        const watermarkLoader = document.querySelector(`${container.selector}.${loaderClass}`);
+        if (watermarkLoading) {
+            watermarkLoading.classList.toggle(loadingClass);
+        }
+        if (watermarkLoader) {
+            watermarkLoader.classList.toggle(loaderClass);
+        }
+    }
 }
 
 export default AxoManager;

modules/ppcp-axo/resources/js/Components/DomElementCollection.js

@@ -20,7 +20,7 @@ class DomElementCollection {
         this.watermarkContainer = new DomElement({
             id: 'ppcp-axo-watermark-container',
             selector: '#ppcp-axo-watermark-container',
-            className: 'ppcp-axo-watermark-container'
+            className: 'ppcp-axo-watermark-container ppcp-axo-watermark-loading loader'
         });
 
         this.customerDetails = new DomElement({

modules/ppcp-axo/src/Assets/AxoManager.php

@@ -197,7 +197,7 @@ class AxoManager {
 					'CA' => WC()->countries->get_states( 'CA' ),
 				),
 			),
-			'module_url' => untrailingslashit( $this->module_url ),
+			'module_url'    => untrailingslashit( $this->module_url ),
 		);
 	}
 

modules/ppcp-axo/src/AxoModule.php

@@ -217,6 +217,8 @@ class AxoModule implements ModuleInterface {
 			1
 		);
 
+		// Add the markup necessary for displaying overlays and loaders for Axo on the checkout page.
+		$this->add_checkout_loader_markup( $c );
 	}
 
 	/**
@@ -292,4 +294,47 @@ class AxoModule implements ModuleInterface {
 			&& CartCheckoutDetector::has_classic_checkout()
 			&& $is_axo_enabled;
 	}
+
+	/**
+	 * Adds the markup necessary for displaying overlays and loaders for Axo on the checkout page.
+	 *
+	 * @param ContainerInterface $c The container.
+	 * @return void
+	 */
+	private function add_checkout_loader_markup( ContainerInterface $c ): void {
+		$settings = $c->get( 'wcgateway.settings' );
+		assert( $settings instanceof Settings );
+
+		if ( $this->should_render_fastlane( $settings ) ) {
+			add_action(
+				'woocommerce_checkout_before_customer_details',
+				function () {
+					echo '<div class="ppcp-axo-loading">';
+				}
+			);
+
+			add_action(
+				'woocommerce_checkout_after_customer_details',
+				function () {
+					echo '</div>';
+				}
+			);
+
+			add_action(
+				'woocommerce_checkout_billing',
+				function () {
+					echo '<div class="loader"><div class="ppcp-axo-overlay"></div>';
+				},
+				8
+			);
+
+			add_action(
+				'woocommerce_checkout_billing',
+				function () {
+					echo '</div>';
+				},
+				12
+			);
+		}
+	}
 }