fix: handle errors, add loader

square · Mar 8, 2024 · 2d1debb · 2d1debb
1 parent afaf19c
commit 2d1debb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/theme/assets/css/templates/store/item.css b/theme/assets/css/templates/store/item.css
@@ -162,6 +162,10 @@
     margin-bottom: var(--space-x3);
 }
 
+.afterpay-badge {
+    --theme-loader-size: 32px;
+}
+
 /* stylelint-disable-next-line selector-type-no-unknown */
 afterpay-placement {
     margin-top: 0;

diff --git a/theme/assets/js/templates/store/item.js b/theme/assets/js/templates/store/item.js
@@ -500,6 +500,7 @@ document.addEventListener('alpine:init', () => {
     const createAfterpayBadgeData = () => ({
         payments: null,
         paymentAmount: null,
+        isLoadingAfterpayBadge: false,
         selector: '.afterpay-placement',
         /**
          * Initialize Square Web Payments SDK
@@ -510,7 +511,7 @@ document.addEventListener('alpine:init', () => {
         */
         initWebPaymentsSDK(applicationId, locationId) {
             if (!this.webPaymentsSDKLoaded()) {
-                return null;
+                throw new Error('Square Web Payments SDK is not loaded');
             }
 
             const Square = window.Square;
@@ -530,9 +531,6 @@ document.addEventListener('alpine:init', () => {
             const locationId = Alpine.store('product').locationId;
             const storeLocale = Alpine.store('global').locale;
             const payments = this.initWebPaymentsSDK(applicationId, locationId);
-            if (!payments) {
-                return;
-            }
             payments.setLocale(storeLocale);
             this.payments = payments;
 
@@ -548,10 +546,17 @@ document.addEventListener('alpine:init', () => {
             this.attachAfterpayMessaging();
         },
         async attachAfterpayMessaging() {
-            const paymentRequest = this.buildPaymentRequest(this.paymentAmount);
-            const afterpay = await this.payments.afterpayClearpay(paymentRequest);
-            this.cleanupAfterpayMessaging();
-            await afterpay.attachMessaging(this.selector, Constants.AFTERPAY_MESSAGING_OPTIONS);
+            this.isLoadingAfterpayBadge = true;
+            try {
+                const paymentRequest = this.buildPaymentRequest(this.paymentAmount);
+                const afterpay = await this.payments.afterpayClearpay(paymentRequest);
+                this.cleanupAfterpayMessaging();
+                await afterpay.attachMessaging(this.selector, Constants.AFTERPAY_MESSAGING_OPTIONS);
+            } catch (err) {
+                throw new Error('Failed to attach afterpay messaging');
+            } finally {
+                this.isLoadingAfterpayBadge = false;
+            }
         },
 
         /**

diff --git a/theme/components/sections/store/item/main.html.twig b/theme/components/sections/store/item/main.html.twig
@@ -110,8 +110,13 @@
 
                     {% if item_price_eligible and item_type_valid %}
                         <script src="https://web.squarecdn.com/v1/square.js"></script>
-                        <div x-data="productAfterpayBadge()">
+                        <div x-data="productAfterpayBadge()" class="afterpay-badge">
                             <div x-ref="container">
+                                <div
+                                    x-show="isLoadingAfterpayBadge"
+                                >
+                                    {{ include('partials/ui/loader') }}
+                                </div>
                                 <div class="afterpay-placement"></div>
                             </div>
                         </div>