From 8ee4a524bb29ad33479df3d960c0027e94c36762 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 23 May 2024 01:30:20 +0200 Subject: [PATCH 1/3] First attempt to optimize the checkout loading of the Fastlane experience to make it nice and smooth --- modules/ppcp-axo/resources/css/styles.scss | 35 +++++++++++++++ modules/ppcp-axo/resources/js/AxoManager.js | 26 ++++++++++- .../js/Components/DomElementCollection.js | 2 +- modules/ppcp-axo/src/Assets/AxoManager.php | 2 +- modules/ppcp-axo/src/AxoModule.php | 44 +++++++++++++++++++ 5 files changed, 106 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-axo/resources/css/styles.scss b/modules/ppcp-axo/resources/css/styles.scss index 605ac18b2..9edd122fa 100644 --- a/modules/ppcp-axo/resources/css/styles.scss +++ b/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.8); + 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; diff --git a/modules/ppcp-axo/resources/js/AxoManager.js b/modules/ppcp-axo/resources/js/AxoManager.js index a250c09b7..aa94427a8 100644 --- a/modules/ppcp-axo/resources/js/AxoManager.js +++ b/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; diff --git a/modules/ppcp-axo/resources/js/Components/DomElementCollection.js b/modules/ppcp-axo/resources/js/Components/DomElementCollection.js index fc44a2823..35f19ec6d 100644 --- a/modules/ppcp-axo/resources/js/Components/DomElementCollection.js +++ b/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({ diff --git a/modules/ppcp-axo/src/Assets/AxoManager.php b/modules/ppcp-axo/src/Assets/AxoManager.php index 2ed5fc04c..d9b4313fc 100644 --- a/modules/ppcp-axo/src/Assets/AxoManager.php +++ b/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 ), ); } diff --git a/modules/ppcp-axo/src/AxoModule.php b/modules/ppcp-axo/src/AxoModule.php index dfb76ef60..cdea50ee2 100644 --- a/modules/ppcp-axo/src/AxoModule.php +++ b/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,46 @@ 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. + */ + private function add_checkout_loader_markup( $c ) { + $settings = $c->get( 'wcgateway.settings' ); + assert( $settings instanceof Settings ); + + if ( $this->should_render_fastlane( $settings ) ) { + add_action( + 'woocommerce_checkout_before_customer_details', + function () { + echo '
'; + } + ); + + add_action( + 'woocommerce_checkout_after_customer_details', + function () { + echo '
'; + } + ); + + add_action( + 'woocommerce_checkout_billing', + function () { + echo '
'; + }, + 8 + ); + + add_action( + 'woocommerce_checkout_billing', + function () { + echo '
'; + }, + 12 + ); + } + } } From 97cd436efe36cc5651e9d65c9f898fe869ea239e Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 23 May 2024 10:51:27 +0200 Subject: [PATCH 2/3] Change opacity of the overlay color --- modules/ppcp-axo/resources/css/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-axo/resources/css/styles.scss b/modules/ppcp-axo/resources/css/styles.scss index 9edd122fa..3513d0642 100644 --- a/modules/ppcp-axo/resources/css/styles.scss +++ b/modules/ppcp-axo/resources/css/styles.scss @@ -65,7 +65,7 @@ left: 0; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; From 451361dca03d1a75f783268f79cf593dd14394bc Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 23 May 2024 11:18:35 +0200 Subject: [PATCH 3/3] Fix Psalm errors --- modules/ppcp-axo/src/AxoModule.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-axo/src/AxoModule.php b/modules/ppcp-axo/src/AxoModule.php index cdea50ee2..ba8d1d78b 100644 --- a/modules/ppcp-axo/src/AxoModule.php +++ b/modules/ppcp-axo/src/AxoModule.php @@ -299,8 +299,9 @@ class AxoModule implements ModuleInterface { * 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( $c ) { + private function add_checkout_loader_markup( ContainerInterface $c ): void { $settings = $c->get( 'wcgateway.settings' ); assert( $settings instanceof Settings );