@zonos/elements 1.3.2 → 1.3.3-alpha.0

package/dist/cjs/zonos-cart-items_10.cjs.entry.js

@@ -117,17 +117,51 @@ const ZonosCheckoutFinish = class {
             await ((_b = (_a = zonosStore.zonosStore.checkoutSettings).onOrderSuccess) === null || _b === void 0 ? void 0 : _b.call(_a, json));
             return json;
         };
+        this.handleSuccessBehavior = (orderId) => {
+            const { successBehavior } = zonosStore.zonosStore.checkoutSettings;
+            switch (successBehavior) {
+                case 'REDIRECT_TO_SUCCESS_PAGE':
+                    const redirectUrl = zonosStore.zonosStore.checkoutSettings.successRedirectUrl;
+                    if (redirectUrl) {
+                        window.location.href = `${redirectUrl}?zOrderNumber=${orderId}`;
+                    }
+                    // If no redirect URL, break and display Zonos success page
+                    break;
+                case 'CLOSE_MODAL':
+                    this.closeClickHandler();
+                    break;
+            }
+        };
         // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
         this.getPullOrder = async (attempts = 0) => {
             const order = await this.pullOrder();
             if (order) {
                 this.order = order;
+                this.handleSuccessBehavior(order.id);
+                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 await this.getPullOrder(attempts + 1);
             }
+            else {
+                // Set loading to false to display generic success page and log error
+                this.isLoading = false;
+                const errorObject = {
+                    endpoint: `${"https://v1.route.js.zonos.com"}/api/zonos-elements/get-order`,
+                    errors: ['Order not found after multiple attempts'],
+                    metadata: {
+                        checkoutSessionId: cart.cartStore.checkoutSessionId || '',
+                        domain: window.location.hostname,
+                        storeId: zonosStore.zonosStore.storeId,
+                    },
+                };
+                void localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
+                    body: errorObject,
+                    method: 'POST',
+                });
+            }
         };
         this.checkPaymentStatus = async () => {
             this.isLoading = true;
@@ -156,6 +190,7 @@ const ZonosCheckoutFinish = class {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
+                    this.isLoading = true;
                     void this.getPullOrder();
                 }
             }
@@ -323,7 +358,7 @@ ZonosCustomerInfo.style = zonosCustomerInfoCss;
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:1001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:1001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:1002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:10002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:10001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
 
 const ZonosDialog = class {
     constructor(hostRef) {

package/dist/cjs/zonos-checkout.cjs.entry.js

@@ -157,6 +157,7 @@ const ZonosCheckout = class {
                     });
                 }
             });
+            button.removeAttribute('disabled');
             button.setAttribute('data-zonos-checkout-attached', 'true');
         });
     }
@@ -220,10 +221,14 @@ const ZonosCheckout = class {
             }
             else {
                 this.attachCheckout();
-                // keep checking for checkout selector every 50ms just in case the selector is not loaded in the DOM yet
-                setInterval(() => {
+                // create a mutation observer to see if any new elements that match our selector is added to the DOM
+                const observer = new MutationObserver(() => {
                     this.attachCheckout();
-                }, 50);
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
             }
             clearInterval(interval);
         }, 50);

package/dist/cjs/zonos-controller.cjs.entry.js

@@ -66,44 +66,6 @@ const ZonosController = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.stripeInitEvent = index.createEvent(this, "stripeInitEvent", 7);
-        this.disablePlaceOrderButtons = ({ disable }) => {
-            const placeOrderButtonSelector = zonosStore.zonosStore.checkoutSettings.placeOrderButtonSelector;
-            if (!placeOrderButtonSelector) {
-                return;
-            }
-            const disableEvent = (e) => {
-                const target = e.target;
-                // prevent default and propagation when the item has disabled attribute
-                if (target.getAttribute('disabled')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            };
-            const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
-            placeOrderButton.forEach(button => {
-                if (disable) {
-                    button.setAttribute('disabled', 'true');
-                    // prevent the selector to perform default action when it's disabled
-                    button.addEventListener('click', disableEvent);
-                }
-                else {
-                    button.removeAttribute('disabled');
-                    // clean up the event listener
-                    button.removeEventListener('click', disableEvent);
-                }
-            });
-            // only auto enable if autoEnable is true and the state is enable
-            if (disable) {
-                setTimeout(() => {
-                    // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
-                    placeOrderButton.forEach(button => {
-                        button.removeAttribute('disabled');
-                        // clean up the event listener if exists
-                        button.removeEventListener('click', disableEvent);
-                    });
-                }, 5000);
-            }
-        };
         this.config = undefined;
         this.zonosApiKey = undefined;
     }
@@ -119,10 +81,6 @@ const ZonosController = class {
         cart.stripeStore.stripe = stripe;
         void initCheckout(zonosStore.zonosStore.checkoutSettings);
         localization.log('init checkout element');
-        // enable place order button after checkout is loaded
-        this.disablePlaceOrderButtons({
-            disable: false,
-        });
     }
     /**
      * Init zonos notification
@@ -175,10 +133,6 @@ const ZonosController = class {
                 localization.log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
-            // disable place order button until checkout is loaded
-            this.disablePlaceOrderButtons({
-                disable: true,
-            });
             // init zonos notification
             this.initZonosNotification();
             // load default setting if fail to load user setting

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -25,17 +25,55 @@ export class ZonosCheckoutFinish {
             await ((_b = (_a = zonosStore.checkoutSettings).onOrderSuccess) === null || _b === void 0 ? void 0 : _b.call(_a, json));
             return json;
         };
+        this.handleSuccessBehavior = (orderId) => {
+            const { successBehavior } = zonosStore.checkoutSettings;
+            switch (successBehavior) {
+                case 'REDIRECT_TO_SUCCESS_PAGE':
+                    const redirectUrl = zonosStore.checkoutSettings.successRedirectUrl;
+                    if (redirectUrl) {
+                        window.location.href = `${redirectUrl}?zOrderNumber=${orderId}`;
+                    }
+                    // If no redirect URL, break and display Zonos success page
+                    break;
+                case 'CLOSE_MODAL':
+                    this.closeClickHandler();
+                    break;
+                case 'ZONOS_SUCCESS_PAGE':
+                default:
+                    // Do nothing, display Zonos success page
+                    break;
+            }
+        };
         // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
         this.getPullOrder = async (attempts = 0) => {
             const order = await this.pullOrder();
             if (order) {
                 this.order = order;
+                this.handleSuccessBehavior(order.id);
+                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 await this.getPullOrder(attempts + 1);
             }
+            else {
+                // Set loading to false to display generic success page and log error
+                this.isLoading = false;
+                const errorObject = {
+                    endpoint: `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/get-order`,
+                    errors: ['Order not found after multiple attempts'],
+                    metadata: {
+                        checkoutSessionId: cartStore.checkoutSessionId || '',
+                        domain: window.location.hostname,
+                        storeId: zonosStore.storeId,
+                    },
+                };
+                void handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/log-error`, {
+                    body: errorObject,
+                    method: 'POST',
+                });
+            }
         };
         this.checkPaymentStatus = async () => {
             this.isLoading = true;
@@ -64,6 +102,7 @@ export class ZonosCheckoutFinish {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
+                    this.isLoading = true;
                     void this.getPullOrder();
                 }
             }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js

@@ -152,6 +152,7 @@ export class ZonosCheckout {
                     });
                 }
             });
+            button.removeAttribute('disabled');
             button.setAttribute('data-zonos-checkout-attached', 'true');
         });
     }
@@ -215,10 +216,14 @@ export class ZonosCheckout {
             }
             else {
                 this.attachCheckout();
-                // keep checking for checkout selector every 50ms just in case the selector is not loaded in the DOM yet
-                setInterval(() => {
+                // create a mutation observer to see if any new elements that match our selector is added to the DOM
+                const observer = new MutationObserver(() => {
                     this.attachCheckout();
-                }, 50);
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
             }
             clearInterval(interval);
         }, 50);

package/dist/collection/components/common/zonos-dialog/zonos-dialog.css

@@ -58,7 +58,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1002;
+  z-index: 10002;
   background: white;
 }
 :host .zonos--dialog-layout {
@@ -75,7 +75,7 @@
 }
 :host .zonos--dialog {
   position: relative;
-  z-index: 1001;
+  z-index: 10001;
   background: var(--amino-gray-0);
   max-width: 90vw;
   max-height: 90vh;
@@ -130,12 +130,12 @@
   visibility: visible;
 }
 :host(.open) .zonos--backdrop {
-  z-index: 1001;
+  z-index: 10001;
   opacity: 0.65;
 }
 :host(.open) .zonos--dialog-layout {
   opacity: 1;
-  z-index: 1002;
+  z-index: 10002;
   transform: scale(1);
 }
 

package/dist/collection/components/main/zonos-controller.js

@@ -9,44 +9,6 @@ import { initHello } from "../utils/hello/initHello";
 import { log } from "../utils/logging/log";
 export class ZonosController {
     constructor() {
-        this.disablePlaceOrderButtons = ({ disable }) => {
-            const placeOrderButtonSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
-            if (!placeOrderButtonSelector) {
-                return;
-            }
-            const disableEvent = (e) => {
-                const target = e.target;
-                // prevent default and propagation when the item has disabled attribute
-                if (target.getAttribute('disabled')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            };
-            const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
-            placeOrderButton.forEach(button => {
-                if (disable) {
-                    button.setAttribute('disabled', 'true');
-                    // prevent the selector to perform default action when it's disabled
-                    button.addEventListener('click', disableEvent);
-                }
-                else {
-                    button.removeAttribute('disabled');
-                    // clean up the event listener
-                    button.removeEventListener('click', disableEvent);
-                }
-            });
-            // only auto enable if autoEnable is true and the state is enable
-            if (disable) {
-                setTimeout(() => {
-                    // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
-                    placeOrderButton.forEach(button => {
-                        button.removeAttribute('disabled');
-                        // clean up the event listener if exists
-                        button.removeEventListener('click', disableEvent);
-                    });
-                }, 5000);
-            }
-        };
         this.config = undefined;
         this.zonosApiKey = undefined;
     }
@@ -62,10 +24,6 @@ export class ZonosController {
         stripeStore.stripe = stripe;
         void initCheckout(zonosStore.checkoutSettings);
         log('init checkout element');
-        // enable place order button after checkout is loaded
-        this.disablePlaceOrderButtons({
-            disable: false,
-        });
     }
     /**
      * Init zonos notification
@@ -118,10 +76,6 @@ export class ZonosController {
                 log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
-            // disable place order button until checkout is loaded
-            this.disablePlaceOrderButtons({
-                disable: true,
-            });
             // init zonos notification
             this.initZonosNotification();
             // load default setting if fail to load user setting

package/dist/collection/scripts/zonosBase.js

@@ -111,6 +111,11 @@ Zonos.disablePlaceOrderButtons = ({ autoEnable = true, disable, placeOrderButton
             }
         };
         placeOrderButton.forEach(button => {
+            const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
+            if (isEventAttached) {
+                // do nothing if event is already attached
+                return;
+            }
             if (disable) {
                 button.setAttribute('disabled', 'true');
                 // prevent the selector to perform default action when it's disabled
@@ -147,6 +152,17 @@ Zonos.injectController = ({ config, zonosApiKey, }) => {
             disable: true,
             placeOrderButtonSelector,
         });
+        // create a mutation observer to see if any new elements that match our selector is added to the DOM
+        const observer = new MutationObserver(() => {
+            _a.disablePlaceOrderButtons({
+                disable: true,
+                placeOrderButtonSelector,
+            });
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
     }
     const zonosController = document.createElement('zonos-controller');
     zonosController.config = config;

package/dist/collection/types/LogErrorRequestBody.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/generated/graphql.customer.types.js

@@ -17,6 +17,10 @@ export const addressResult = {
     Unavailable: 'UNAVAILABLE',
     Valid: 'VALID',
 };
+export const alcoholRecipientType = {
+    Consumer: 'CONSUMER',
+    Licensee: 'LICENSEE',
+};
 export const analyticsProviderStatus = {
     Disabled: 'DISABLED',
     Enabled: 'ENABLED',
@@ -29,6 +33,15 @@ export const bankAccountType = {
     Checking: 'CHECKING',
     Savings: 'SAVINGS',
 };
+export const batteryMaterialType = {
+    LithiumIon: 'LITHIUM_ION',
+    LithiumMetal: 'LITHIUM_METAL',
+};
+export const batteryPackingType = {
+    BatteryInsideEquipment: 'BATTERY_INSIDE_EQUIPMENT',
+    BatteryOnly: 'BATTERY_ONLY',
+    BatteryPackagedWithEquipment: 'BATTERY_PACKAGED_WITH_EQUIPMENT',
+};
 export const billingOptionCode = {
     DdpAndDdu: 'DDP_AND_DDU',
     ShipperOnly: 'SHIPPER_ONLY',
@@ -925,6 +938,12 @@ export const deMinimisType = {
     Fee: 'FEE',
     Tax: 'TAX',
 };
+export const deleteJobStatus = {
+    Completed: 'COMPLETED',
+    Error: 'ERROR',
+    Initialized: 'INITIALIZED',
+    Processing: 'PROCESSING',
+};
 export const deliveryType = {
     Consolidated: 'CONSOLIDATED',
     Courier: 'COURIER',
@@ -1607,6 +1626,7 @@ export const shipmentAmountType = {
 };
 export const shipmentCartonSpecialService = {
     Alcohol: 'ALCOHOL',
+    Battery: 'BATTERY',
     BatteryInsideEquipment: 'BATTERY_INSIDE_EQUIPMENT',
     BatteryOnly: 'BATTERY_ONLY',
     BatteryPackagedWithEquipment: 'BATTERY_PACKAGED_WITH_EQUIPMENT',
@@ -1633,6 +1653,10 @@ export const shipmentStatusType = {
     Created: 'CREATED',
     Voided: 'VOIDED',
 };
+export const shipmentType = {
+    Domestic: 'DOMESTIC',
+    International: 'INTERNATIONAL',
+};
 export const shippingPaymentType = {
     Sender: 'SENDER',
     ThirdParty: 'THIRD_PARTY',
@@ -1641,6 +1665,13 @@ export const shippingRateCalculation = {
     Fixed: 'FIXED',
     PerUnit: 'PER_UNIT',
 };
+export const signatureOptionType = {
+    Adult: 'ADULT',
+    Default: 'DEFAULT',
+    Direct: 'DIRECT',
+    Indirect: 'INDIRECT',
+    None: 'NONE',
+};
 export const stripeActiveStatus = {
     Active: 'ACTIVE',
     Inactive: 'INACTIVE',
@@ -1849,5 +1880,8 @@ export function getSdk(client, withWrapper = defaultWrapper) {
         ZonosSettings(variables, requestHeaders) {
             return withWrapper(wrappedRequestHeaders => client.request('', variables, Object.assign(Object.assign({}, requestHeaders), wrappedRequestHeaders)), 'ZonosSettings', 'query');
         },
+        getCheckoutPlaceOrderButtonSelector(variables, requestHeaders) {
+            return withWrapper(wrappedRequestHeaders => client.request('', variables, Object.assign(Object.assign({}, requestHeaders), wrappedRequestHeaders)), 'getCheckoutPlaceOrderButtonSelector', 'query');
+        },
     };
 }

package/dist/components/zonos-checkout-finish2.js

@@ -33,17 +33,51 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
             await ((_b = (_a = zonosStore.checkoutSettings).onOrderSuccess) === null || _b === void 0 ? void 0 : _b.call(_a, json));
             return json;
         };
+        this.handleSuccessBehavior = (orderId) => {
+            const { successBehavior } = zonosStore.checkoutSettings;
+            switch (successBehavior) {
+                case 'REDIRECT_TO_SUCCESS_PAGE':
+                    const redirectUrl = zonosStore.checkoutSettings.successRedirectUrl;
+                    if (redirectUrl) {
+                        window.location.href = `${redirectUrl}?zOrderNumber=${orderId}`;
+                    }
+                    // If no redirect URL, break and display Zonos success page
+                    break;
+                case 'CLOSE_MODAL':
+                    this.closeClickHandler();
+                    break;
+            }
+        };
         // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
         this.getPullOrder = async (attempts = 0) => {
             const order = await this.pullOrder();
             if (order) {
                 this.order = order;
+                this.handleSuccessBehavior(order.id);
+                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 await this.getPullOrder(attempts + 1);
             }
+            else {
+                // Set loading to false to display generic success page and log error
+                this.isLoading = false;
+                const errorObject = {
+                    endpoint: `${"https://v1.route.js.zonos.com"}/api/zonos-elements/get-order`,
+                    errors: ['Order not found after multiple attempts'],
+                    metadata: {
+                        checkoutSessionId: cartStore.checkoutSessionId || '',
+                        domain: window.location.hostname,
+                        storeId: zonosStore.storeId,
+                    },
+                };
+                void handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
+                    body: errorObject,
+                    method: 'POST',
+                });
+            }
         };
         this.checkPaymentStatus = async () => {
             this.isLoading = true;
@@ -72,6 +106,7 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
+                    this.isLoading = true;
                     void this.getPullOrder();
                 }
             }

package/dist/components/zonos-checkout.js

@@ -177,6 +177,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                     });
                 }
             });
+            button.removeAttribute('disabled');
             button.setAttribute('data-zonos-checkout-attached', 'true');
         });
     }
@@ -240,10 +241,14 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
             }
             else {
                 this.attachCheckout();
-                // keep checking for checkout selector every 50ms just in case the selector is not loaded in the DOM yet
-                setInterval(() => {
+                // create a mutation observer to see if any new elements that match our selector is added to the DOM
+                const observer = new MutationObserver(() => {
                     this.attachCheckout();
-                }, 50);
+                });
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                });
             }
             clearInterval(interval);
         }, 50);

package/dist/components/zonos-controller.js

@@ -64,44 +64,6 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         this.__registerHost();
         this.__attachShadow();
         this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
-        this.disablePlaceOrderButtons = ({ disable }) => {
-            const placeOrderButtonSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
-            if (!placeOrderButtonSelector) {
-                return;
-            }
-            const disableEvent = (e) => {
-                const target = e.target;
-                // prevent default and propagation when the item has disabled attribute
-                if (target.getAttribute('disabled')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            };
-            const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
-            placeOrderButton.forEach(button => {
-                if (disable) {
-                    button.setAttribute('disabled', 'true');
-                    // prevent the selector to perform default action when it's disabled
-                    button.addEventListener('click', disableEvent);
-                }
-                else {
-                    button.removeAttribute('disabled');
-                    // clean up the event listener
-                    button.removeEventListener('click', disableEvent);
-                }
-            });
-            // only auto enable if autoEnable is true and the state is enable
-            if (disable) {
-                setTimeout(() => {
-                    // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
-                    placeOrderButton.forEach(button => {
-                        button.removeAttribute('disabled');
-                        // clean up the event listener if exists
-                        button.removeEventListener('click', disableEvent);
-                    });
-                }, 5000);
-            }
-        };
         this.config = undefined;
         this.zonosApiKey = undefined;
     }
@@ -117,10 +79,6 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         stripeStore.stripe = stripe;
         void initCheckout(zonosStore.checkoutSettings);
         log('init checkout element');
-        // enable place order button after checkout is loaded
-        this.disablePlaceOrderButtons({
-            disable: false,
-        });
     }
     /**
      * Init zonos notification
@@ -173,10 +131,6 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
                 log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
-            // disable place order button until checkout is loaded
-            this.disablePlaceOrderButtons({
-                disable: true,
-            });
             // init zonos notification
             this.initZonosNotification();
             // load default setting if fail to load user setting

package/dist/components/zonos-dialog2.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$1 } from './zonos-spinner2.js';
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:1001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:1001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:1002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:10002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:10001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
 
 const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends HTMLElement {
     constructor() {