@zonos/elements 1.3.4 → 1.3.5

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -11,11 +11,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: '7ddd949ab91ed0c61ee34ce6ee80da54b3ba3664', class: classes(['zonos--elements zonos--logo', this.class]), style: {
+        return (h(Host, { key: '25b7723a73f8f8c7a28e8b2730b88f18d4f11fb7', class: classes(['zonos--elements zonos--logo', this.class]), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '1a8d98f7d836f253a21654c84ab0251969362e2f', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'e7f15f665c2d3c579e8727f1dceefea0fd438d5d', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,62 +47,68 @@
 :host circle.track {
   stroke: var(--amino-gray-200);
 }
-:host.black {
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+:host circle:not(.track) {
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+:host(.black) circle {
   stroke: var(--amino-spinner-stroke-black);
 }
-:host.black circle.track {
+:host(.black) circle.track {
   stroke: var(--amino-spinner-track-black);
 }
-:host.white {
+
+:host(.white) circle {
   stroke: var(--amino-spinner-stroke-white);
 }
-:host.white circle.track {
+:host(.white) circle.track {
   stroke: var(--amino-spinner-track-white);
 }
-:host.info {
+
+:host(.info) circle {
   stroke: var(--amino-blue-600);
 }
-:host.info circle.track {
+:host(.info) circle.track {
   stroke: var(--amino-blue-100);
 }
-:host.success {
+
+:host(.success) circle {
   stroke: var(--amino-green-600);
 }
-:host.success circle.track {
+:host(.success) circle.track {
   stroke: var(--amino-green-100);
 }
-:host.danger {
+
+:host(.danger) circle {
   stroke: var(--amino-red-600);
 }
-:host.danger circle.track {
+:host(.danger) circle.track {
   stroke: var(--amino-red-100);
 }
-:host.warning {
+
+:host(.warning) circle {
   stroke: var(--amino-orange-600);
 }
-:host.warning circle.track {
+:host(.warning) circle.track {
   stroke: var(--amino-orange-100);
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-:host circle:not(.track) {
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
 }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -8,9 +8,9 @@ export class VStack {
         this.class = '';
     }
     render() {
-        return (h(Host, { key: 'd363ffeb2bbae49e7318b26ab56b4b8871844daf', style: {
+        return (h(Host, { key: '2bd82aba32704cc02da767522c39853c6e223297', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '5d9fa5ae9ffca787ca42f38e4ec75fedc24823f9', class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'e1d6fef3378b92c18c2c43ec8616e8c733a4290c' }))));
+            } }, h("div", { key: '22afa237aa1ac8a5ab61adcfa7a0ccabad316b28', class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '5f2645af6b1f4178cb87248e03e9bb3d1c8201ee' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '8862bb59447d2b9ecf98f19a641b86ded55e72b8' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'a61bec010f8c7a8b9979d4c5ec4a84153b780a7e' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -14,9 +14,9 @@ export class ZonosHelloDialogFooter {
         var _a, _b;
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        return (h(Host, { key: '2a67210015d9880acddd72578337243a7f2175e5', class: "zonos--elements" }, h("div", { key: 'b025a2fbbd5f6f2a5addce5d6bba1e6ce720b205', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: '724259a8adaa1cb5c760f36b14be99c55d6c29e2', class: "zonos--elements" }, h("div", { key: 'cb27d219f7a0f948a939b221143c3f0f252b0eeb', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_b = this.appearanceSettings) === null || _b === void 0 ? void 0 : _b.colorPrimary,
-            } }, h("a", { key: '7595e99d4849a19b0337181defa88d074a4407fc', href: "https://zonos.com", target: "_blank" }, h("zonos-icon", { key: '0fa6457c3343170ad144d1b4c02793b62a49efd6', autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), h("zonos-button", { key: '5fcee8b5e43f239883caa2e3f6f155641674d37e', icon: h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localizationStore.selectedCountryCode))));
+            } }, h("a", { key: 'd04f060e7db6e2c964dc2c4252dbbc7b69fba7db', href: "https://zonos.com", target: "_blank" }, h("zonos-icon", { key: 'ed138c417f139f84a5466a4228925e2aa908cd12', autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), h("zonos-button", { key: '07b300a1950adfaf154c173a49cec722df74172c', icon: h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localizationStore.selectedCountryCode))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -90,14 +90,14 @@ export class ZonosHelloDialog {
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '09c2e005a701cf41134f1613c1bbf7214782b24c', class: "zonos--elements" }, h("div", { key: 'ad9675ef097ea4b21bbdb99b5f30d64c45c744e5', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: '56fcc25e2fabf8c2f1edf727a64d213f18729c00', class: "zonos--elements" }, h("div", { key: 'c83e357cd266c605015e136eb23906bd4385e7f5', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, h("div", { key: '54f5da38c7ff31b3d848a83ca87b4514cf51de20', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '31b30feb4e314c23932aa433f6a3d9564f28a56d', class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, h("div", { key: '8d5811f45f2cfe8bd1c0ca3131d99ebc69b7b00d', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '137ea59ae312bee3817292dde42e2e718e70001b', class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));

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

@@ -153,7 +153,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'a94fb7ff23c45a9813ce5da857cda14c8455ff79', class: "zonos--elements" });
+        return h(Host, { key: 'ff6eb2466864a217c485484d381e6f2531631e49', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/store/checkout/cart.js

@@ -1,5 +1,5 @@
 import { createStore } from "@stencil/store";
-import { stripeStore, stripeStoreUpdateCheckoutSession, } from "./stripe";
+import { stripeStore, stripeStoreReset, stripeStoreUpdateCheckoutSession, } from "./stripe";
 import { localizationStore } from "../hello/localization";
 import { translate } from "../translationStore";
 import { formatDate } from "../../utils/formatDate";
@@ -57,6 +57,8 @@ const cartStoreReset = () => {
     reset();
 };
 const cartStoreUpdateToErrorState = ({ messages, title, }) => {
+    cartStoreReset();
+    stripeStoreReset();
     cartStore.step = 'error';
     cartStore.error = {
         messages,

package/dist/collection/components/store/checkout/stripe.js

@@ -28,8 +28,9 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
     stripePaymentElement: null,
     stripePaymentEventData: null,
 }));
-const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideTheme, }) => {
+const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
     const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
+    const secondaryColor = overrideSecondaryColor || zonosStore.appearance.colorSecondary;
     const themeBasedColor = primaryColor && isDarkColor(primaryColor) ? 'night' : 'flat';
     // if overrideTheme is provided, use it. Otherwise, use theme based on primary color
     const theme = overrideTheme === 'DARK' ? 'night' : 'flat';
@@ -39,10 +40,13 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
             rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
             // get contrast theme color base on primary color
             theme: overrideTheme ? theme : themeBasedColor,
-            variables: Object.assign({}, defaultVariable({
+            variables: Object.assign(Object.assign({}, defaultVariable({
                 borderStyle: overrideBorderRaidus,
                 theme: 'LIGHT',
-            })),
+            })), {
+                // use the button background color for input glow color
+                colorPrimary: secondaryColor
+            }),
         },
         clientSecret,
         locale: localizationStore.selectedLocale,
@@ -60,6 +64,7 @@ const initStripeElements = async (props) => {
             clientSecret,
             overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
             overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
+            overrideSecondaryColor: props === null || props === void 0 ? void 0 : props.overrideSecondaryColor,
             overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
         });
         // compare with the previous options to see if we need to update

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -2,6 +2,7 @@
 import { h, Host } from "@stencil/core";
 import { stripeStore, stripeStorePrefetchLandedCost, } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
+import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { logError } from "../../utils/logging/logError";
 /**
  * This component is a wrapper for the stripe address element that would render default style object
@@ -12,9 +13,11 @@ export class ZonosAddress {
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
+        this.isDirtyAddress = !!stripeStore.stripeAddressEventData &&
+            stripeStore.stripeAddressEventData.value.address.line1.length > 0;
     }
     async watchInitStripe() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.stripe = window.Zonos.stripe;
         if (!this.stripe || !stripeStore.stripeElements) {
             logError("Stripe is not initialized. Couldn't load stripe element.");
@@ -27,46 +30,73 @@ export class ZonosAddress {
             (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
         }
         const shippableCountries = localizationStore.shippingZoneCountries;
-        const addressElement = stripeStore.stripeAddressElement ||
-            stripeStore.stripeElements.create('address', {
-                allowedCountries: shippableCountries
-                    ? Object.values(shippableCountries).map(country => country.code)
-                    : [],
-                contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
-                defaultValues: {
-                    address: {
-                        country: localizationStore.selectedCountryCode || 'AL',
-                    },
-                },
-                display: {
-                    name: 'split',
-                },
-                fields: {
-                    phone: 'always',
-                },
-                mode: this.type,
-                validation: {
-                    phone: {
-                        required: 'always',
-                    },
+        const addressElement = stripeStore.stripeElements.create('address', {
+            allowedCountries: shippableCountries
+                ? Object.values(shippableCountries).map(country => country.code)
+                : [],
+            autocomplete: {
+                mode: 'automatic',
+            },
+            contacts: this.defaultAddress ? [this.defaultAddress] : [],
+            defaultValues: {
+                address: Object.assign(Object.assign({}, (_c = stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.value.address), { country: ((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value.address.country) ||
+                        localizationStore.selectedCountryCode ||
+                        'AL' }),
+                firstName: (_e = stripeStore.stripeAddressEventData) === null || _e === void 0 ? void 0 : _e.value.firstName,
+                lastName: (_f = stripeStore.stripeAddressEventData) === null || _f === void 0 ? void 0 : _f.value.lastName,
+                phone: (_g = stripeStore.stripeAddressEventData) === null || _g === void 0 ? void 0 : _g.value.phone,
+            },
+            display: {
+                name: 'split',
+            },
+            fields: {
+                phone: 'always',
+            },
+            mode: this.type,
+            validation: {
+                phone: {
+                    required: 'always',
                 },
-            });
+            },
+        });
         addressElement.mount(this.el.querySelector('.zonos--address-component'));
         addressElement.on('change', event => {
             const eventValue = event.value;
+            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
+                this.isDirtyAddress = true;
+                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
+                setTimeout(() => {
+                    // scroll directly into view if it's mobile
+                    if (isCheckoutMobile()) {
+                        this.el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                    }
+                    else {
+                        // scroll into the end of the page so the address placeholder won't be hidden
+                        const yOffset = 100;
+                        const parentWrapper = this.el.closest('.zonos--group');
+                        const y = this.el.getBoundingClientRect().top + yOffset;
+                        parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
+                    }
+                }, 400);
+            }
             stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
             // run prefetch landed cost when address is changed
             void stripeStorePrefetchLandedCost();
         });
         stripeStore.stripeAddressElement = addressElement;
     }
+    disconnectedCallback() {
+        var _a;
+        // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
+        (_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '47fa225123b7c944732b018fbb374bcb6da0f4ca', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '4d0d9d4f9c09d6b2f29bc6a44164a0ef8db0acc9', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd279ba97287890e489230f9e449a344db76556f2', class: "zonos--address-component" })));
+        return (h(Host, { key: '41014c1af1c8f8f5bb37caf358a6cec124e66f30', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '5d8dcc4b44f7fe7b089b630ec6ca7b2177fef371', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'da0fe9760d7ca8dbc089481ac1dcb7c0a7c6553f', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -142,7 +172,8 @@ export class ZonosAddress {
     }
     static get states() {
         return {
-            "stripe": {}
+            "stripe": {},
+            "isDirtyAddress": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -36,7 +36,7 @@ export class ZonosLinkAuthentication {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '48ec92ca8a1500c3b8e85222c3df069c32074e72', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '9060fab8ab9f88157ee6951af830e106e6ff9509', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'dac7e96170d15faa8c1013fb298ae86e2ce99f0b', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '5d02895b441a5713b83e7b3c4b784ab4b6743f54', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '5bd33edd16f1511111bfcb497e0767f938172b05', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd5a90ce88adaed9f2369af4692506d5d072c021d', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-payment/zonos-payment.js

@@ -37,7 +37,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '8a674f72e9235f9b6afcc8d8e0374639423e0bb3', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '94a0a064e6f6d8058bc11d114ecc4c3ab495e802', class: "zonos--payment-component" })));
+        return (h(Host, { key: '365e346a6cda504bdbc825ff8e25b7492bf1d19b', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'f76c3b4ef941ecc8cb99ac3593b9d902eda5b1e7', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/api/calculateLandedCost.js

@@ -3,6 +3,7 @@ import { prepCalculateLandedCost } from "./prepCalculateLandedCost";
 import { triggerBuildLandedCost } from "./triggerBuildLandedCost";
 import { handleFetch } from "../handleFetch";
 export const calculateLandedCost = async (abortController) => {
+    var _a;
     // If buildLandedCost callback is supplied, use that instead of our regular request to '/calculate-landed-cost'
     const buildLandedCost = zonosStore.checkoutSettings.buildLandedCost;
     if (buildLandedCost) {
@@ -17,7 +18,11 @@ export const calculateLandedCost = async (abortController) => {
         signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
     });
     if (errors.length || !json) {
-        throw new Error('Failed to calculate landed cost');
+        const isAbortedRequest = ((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.message) === 'The user aborted a request.';
+        const errorMessage = isAbortedRequest
+            ? 'The landed cost calculation request was aborted to initiate a new one.'
+            : 'Failed to calculate landed cost';
+        throw new Error(errorMessage);
     }
     return json;
 };

package/dist/components/cart.js

@@ -54,6 +54,7 @@ const triggerBuildLandedCost = async (buildLandedCost) => {
 };
 
 const calculateLandedCost = async (abortController) => {
+    var _a;
     // If buildLandedCost callback is supplied, use that instead of our regular request to '/calculate-landed-cost'
     const buildLandedCost = zonosStore.checkoutSettings.buildLandedCost;
     if (buildLandedCost) {
@@ -68,7 +69,11 @@ const calculateLandedCost = async (abortController) => {
         signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
     });
     if (errors.length || !json) {
-        throw new Error('Failed to calculate landed cost');
+        const isAbortedRequest = ((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.message) === 'The user aborted a request.';
+        const errorMessage = isAbortedRequest
+            ? 'The landed cost calculation request was aborted to initiate a new one.'
+            : 'Failed to calculate landed cost';
+        throw new Error(errorMessage);
     }
     return json;
 };
@@ -125,8 +130,9 @@ const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = createStor
     stripePaymentElement: null,
     stripePaymentEventData: null,
 }));
-const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideTheme, }) => {
+const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
     const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
+    const secondaryColor = overrideSecondaryColor || zonosStore.appearance.colorSecondary;
     const themeBasedColor = primaryColor && isDarkColor(primaryColor) ? 'night' : 'flat';
     // if overrideTheme is provided, use it. Otherwise, use theme based on primary color
     const theme = overrideTheme === 'DARK' ? 'night' : 'flat';
@@ -136,10 +142,12 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
             rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
             // get contrast theme color base on primary color
             theme: overrideTheme ? theme : themeBasedColor,
-            variables: Object.assign({}, defaultVariable({
+            variables: Object.assign(Object.assign({}, defaultVariable({
                 borderStyle: overrideBorderRaidus,
                 theme: 'LIGHT',
-            })),
+            })), { 
+                // use the button background color for input glow color
+                colorPrimary: secondaryColor }),
         },
         clientSecret,
         locale: localizationStore.selectedLocale,
@@ -157,6 +165,7 @@ const initStripeElements = async (props) => {
             clientSecret,
             overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
             overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
+            overrideSecondaryColor: props === null || props === void 0 ? void 0 : props.overrideSecondaryColor,
             overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
         });
         // compare with the previous options to see if we need to update
@@ -479,6 +488,8 @@ const cartStoreReset = () => {
     reset();
 };
 const cartStoreUpdateToErrorState = ({ messages, title, }) => {
+    cartStoreReset();
+    stripeStoreReset();
     cartStore.step = 'error';
     cartStore.error = {
         messages,

package/dist/components/isCheckoutMobile.js

@@ -0,0 +1,6 @@
+const checkoutBreakpoint = 890;
+const isCheckoutMobile = (isMobile) => {
+    return isMobile || window.innerWidth < checkoutBreakpoint;
+};
+
+export { isCheckoutMobile as i };

package/dist/components/zonos-address2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as stripeStore, k as stripeStorePrefetchLandedCost } from './cart.js';
 import { l as logError, b as localizationStore } from './localization.js';
+import { i as isCheckoutMobile } from './isCheckoutMobile.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
@@ -14,9 +15,11 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
+        this.isDirtyAddress = !!stripeStore.stripeAddressEventData &&
+            stripeStore.stripeAddressEventData.value.address.line1.length > 0;
     }
     async watchInitStripe() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.stripe = window.Zonos.stripe;
         if (!this.stripe || !stripeStore.stripeElements) {
             logError("Stripe is not initialized. Couldn't load stripe element.");
@@ -29,46 +32,73 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
             (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
         }
         const shippableCountries = localizationStore.shippingZoneCountries;
-        const addressElement = stripeStore.stripeAddressElement ||
-            stripeStore.stripeElements.create('address', {
-                allowedCountries: shippableCountries
-                    ? Object.values(shippableCountries).map(country => country.code)
-                    : [],
-                contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
-                defaultValues: {
-                    address: {
-                        country: localizationStore.selectedCountryCode || 'AL',
-                    },
+        const addressElement = stripeStore.stripeElements.create('address', {
+            allowedCountries: shippableCountries
+                ? Object.values(shippableCountries).map(country => country.code)
+                : [],
+            autocomplete: {
+                mode: 'automatic',
+            },
+            contacts: this.defaultAddress ? [this.defaultAddress] : [],
+            defaultValues: {
+                address: Object.assign(Object.assign({}, (_c = stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.value.address), { country: ((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value.address.country) ||
+                        localizationStore.selectedCountryCode ||
+                        'AL' }),
+                firstName: (_e = stripeStore.stripeAddressEventData) === null || _e === void 0 ? void 0 : _e.value.firstName,
+                lastName: (_f = stripeStore.stripeAddressEventData) === null || _f === void 0 ? void 0 : _f.value.lastName,
+                phone: (_g = stripeStore.stripeAddressEventData) === null || _g === void 0 ? void 0 : _g.value.phone,
+            },
+            display: {
+                name: 'split',
+            },
+            fields: {
+                phone: 'always',
+            },
+            mode: this.type,
+            validation: {
+                phone: {
+                    required: 'always',
                 },
-                display: {
-                    name: 'split',
-                },
-                fields: {
-                    phone: 'always',
-                },
-                mode: this.type,
-                validation: {
-                    phone: {
-                        required: 'always',
-                    },
-                },
-            });
+            },
+        });
         addressElement.mount(this.el.querySelector('.zonos--address-component'));
         addressElement.on('change', event => {
             const eventValue = event.value;
+            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
+                this.isDirtyAddress = true;
+                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
+                setTimeout(() => {
+                    // scroll directly into view if it's mobile
+                    if (isCheckoutMobile()) {
+                        this.el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                    }
+                    else {
+                        // scroll into the end of the page so the address placeholder won't be hidden
+                        const yOffset = 100;
+                        const parentWrapper = this.el.closest('.zonos--group');
+                        const y = this.el.getBoundingClientRect().top + yOffset;
+                        parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
+                    }
+                }, 400);
+            }
             stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
             // run prefetch landed cost when address is changed
             void stripeStorePrefetchLandedCost();
         });
         stripeStore.stripeAddressElement = addressElement;
     }
+    disconnectedCallback() {
+        var _a;
+        // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
+        (_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '47fa225123b7c944732b018fbb374bcb6da0f4ca', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '4d0d9d4f9c09d6b2f29bc6a44164a0ef8db0acc9', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd279ba97287890e489230f9e449a344db76556f2', class: "zonos--address-component" })));
+        return (h(Host, { key: '41014c1af1c8f8f5bb37caf358a6cec124e66f30', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '5d8dcc4b44f7fe7b089b630ec6ca7b2177fef371', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'da0fe9760d7ca8dbc089481ac1dcb7c0a7c6553f', class: "zonos--address-component" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -79,7 +109,8 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         "type": [1],
         "titleText": [1, "title-text"],
         "defaultAddress": [16],
-        "stripe": [32]
+        "stripe": [32],
+        "isDirtyAddress": [32]
     }, undefined, {
         "stripe": ["watchInitStripe"]
     }]);