@zonos/elements 1.3.15-alpha.0 → 1.3.15-alpha.1

package/dist/cjs/zonos-country-select_3.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
 const isDarkColor = require('./isDarkColor-f5473002.js');
@@ -1828,9 +1828,9 @@ const ZonosCountrySelect = class {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (index.h(index.Host, { key: 'ae921c5a4aa83cdde8f42d8993603e824344f11a', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'd7397a52b23af00e87b88f3869798ea17de7efa3', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'b3bd4c0a0a4aeee8f4de78aadd8cd26b69e060a3', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: 'aae54d33cc8a3b6befcbb259f92320da230df5be', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: '8627db51744e70f94ce01a024ac38343d7f2ee00', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: 'affa5003e513bae802cdf029f3996cc2dd31f7d4', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: '8b892a23cb69d44d886b69a7a038e3a98c97eb1b', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, index.h("div", { key: '6bf32f3ab45ac6640da6b375539e78afe9e730bc', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: '95203326a2ead88bef76d91a545b89b2a497eb21', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: 'b2b120a3a4e5fe69466e2d0803181cb83cf6aec3', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: '4269dfc717b0e2397449a15053da7036cefc03ec', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: 'dc7e39c2ee17ff3e5a2ebca1c69e6c399b848f4b', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     get ele() { return index.getElement(this); }
 };
@@ -1847,9 +1847,9 @@ const ZonosCustomMessage = class {
     }
     render() {
         const messageWithLinks = formatStringWithLinks.formatStringWithLinks(this.message);
-        return (index.h(index.Host, { key: 'b917fa2e0b2293b3423ba8910cca667b62c3b7c0', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '493a7967c460956be2c539e887c839950aea92e9', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, this.message && (index.h("zonos-card", { key: '28d3e6d986ee9a2d56ddb173f1e1e5094d18634a', class: "zonos--custom-message", spacing: "12px" }, index.h("div", { key: '526de02e727a977f42e5547fc1ba0c91d682e72f', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '0e2360d11bff3c94c3ba722a0a2b4767f04232fc', "aria-label": "Custom message icon", content: this.icon }), index.h("zonos-text", { key: 'fa8c7e5042f1d622053ccd86bb52b51304ffc83e', innerHTML: messageWithLinks }))))));
+            } }, this.message && (index.h("zonos-card", { key: '056de7926b3f8a1c0126a465abbc0962cc7f2f64', class: "zonos--custom-message", spacing: "12px" }, index.h("div", { key: '992ed280cb9d44abf872698fd54acbf9b384255b', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '5a3fe5a438ab1e5ab10ed831cc65a4783a36f195', "aria-label": "Custom message icon", content: this.icon }), index.h("zonos-text", { key: 'b5fcefeeae68c3d4bd60a36c039050e6d4f2927a', innerHTML: messageWithLinks }))))));
     }
 };
 ZonosCustomMessage.style = ZonosCustomMessageStyle0;
@@ -1881,9 +1881,9 @@ const ZonosHelloDialogFooter = class {
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (index.h(index.Host, { key: '046b97e6ed7c35e5e9a244d0ffc3b59dfd206a8a', class: "zonos--elements" }, index.h("div", { key: '9134e27c1ec407b7661b6b92cd37cd17333e0f15', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (index.h(index.Host, { key: '57933a1dc8584daeb3f66393ebb98e7cdb1ff5e3', class: "zonos--elements" }, index.h("div", { key: '801626fa9eb4baa7a8e1ef1afda6336bbe085ca1', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, index.h("a", { key: '670c4627ff0297e2a4869a00e19032b3289396d7', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: 'b67dd84bc4a4a245a0f2117e5b063df659f12ef9', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), index.h("div", { key: '823af21d0e96c52eed9cb9b6b13faf875bba13c8', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: 'edd4b9d15b9e2f5051bd5e3e524fcd0d93e66543', buttonColor: "gray-1200", icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: 'f350f61d47eb93d7ac8ebc5c8faddc932262f990', buttonColor: "gray-1200", icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
+            } }, index.h("a", { key: '0e03d262f71f5fced451b8b298462b1f070848ad', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: 'e17d1eac7bc1e5e5bf2c86c384dc5b01725802ef', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), index.h("div", { key: 'd7a065b6bd87b41aae013b0cddf4cb50852664fe', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: '22a0a218fd1627519cde3663face486ba2d5ec41', buttonColor: "gray-1200", icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: '6800d57eb7a877e873bb8050f313017c39a516e7', buttonColor: "gray-1200", icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
     }
 };
 ZonosHelloDialogFooter.style = ZonosHelloDialogFooterStyle0;

package/dist/cjs/zonos-elements.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"legacyCheckoutHiddenBtnSelector":[32],"isLegacyCheckout":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged","handleAppearanceSettingsOverrideChange"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]],{"appearanceSettingsOverride":["handleAppearanceSettingsOverrideChange"]}]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link.cjs",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo.cjs",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text.cjs",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"initialSelectedValue":[8,"initial-selected-value"],"selectedItem":[32]}]]],["zonos-badge_2.cjs",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-country-flag.cjs",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2.cjs",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2.cjs",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-select_3.cjs",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_4.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"reportedInvalidCharacters":[32],"invalidCharacterList":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32],"hasInvalidShippingCharacters":[32],"hasInvalidBillingCharacters":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-footer",{"mobile":[4],"dataTheme":[1,"data-theme"],"showLanguageDialog":[32],"isMobile":[32]},[[4,"click","handleGlobalClick"]],{"mobile":["handleMobileChange"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"isSelecting":[32],"disabled":[32],"serviceLevels":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-checkout-progress-tabs",{"tabColor":[1,"tab-color"],"backgroundColor":[1,"background-color"],"setTabItems":[64],"setTabSelected":[64]}],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
+  return index.bootstrapLazy([["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"legacyCheckoutHiddenBtnSelector":[32],"isLegacyCheckout":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged","handleAppearanceSettingsOverrideChange"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]],{"appearanceSettingsOverride":["handleAppearanceSettingsOverrideChange"]}]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link.cjs",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo.cjs",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text.cjs",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"initialSelectedValue":[8,"initial-selected-value"],"selectedItem":[32]}]]],["zonos-badge_2.cjs",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-country-flag.cjs",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2.cjs",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2.cjs",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-select_3.cjs",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_4.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"reportedInvalidCharacters":[32],"invalidCharacterList":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"showErrorBanner":[32],"hasInvalidShippingCharacters":[32],"hasInvalidBillingCharacters":[32]}],[1,"zonos-checkout-footer",{"mobile":[4],"dataTheme":[1,"data-theme"],"showLanguageDialog":[32],"isMobile":[32]},[[4,"click","handleGlobalClick"]],{"mobile":["handleMobileChange"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"showErrorBanner":[32]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"isSelecting":[32],"showErrorBanner":[32],"serviceLevels":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-checkout-progress-tabs",{"tabColor":[1,"tab-color"],"backgroundColor":[1,"background-color"],"setTabItems":[64],"setTabSelected":[64]}],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/zonos-hello-dialog.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
@@ -186,17 +186,17 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks.formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (index.h(index.Host, { key: 'f300db080cf0634c72aae93aceae288ce67c500c', class: "zonos--elements" }, index.h("div", { key: 'e61bbf7022be71909ab56267721026f95b9fc2fc', "aria-hidden": "true", class: classes.classes([
+        return (index.h(index.Host, { key: '8bf0a772ecb6fccdc2972e972f9f0408ce592218', class: "zonos--elements" }, index.h("div", { key: '88f20fe04677e325017a7ecfdde9912e4e8e22b4', "aria-hidden": "true", class: classes.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) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: '909e251587e2650dbdc1afe5b19e9b3a55f72a18' }, index.h("div", { key: 'a4a79886507449ba688c87474d064528cae3779b', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '1e7a3e74f3f5ab94a70983a067cc08d596d9c5be', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { key: '1c981178390c120427d61f68a05808a95f8da72a', spacing: 24 }, index.h("zonos-country-flag", { key: '095e060cf50ee4525ea501e682735370c0c03cfa', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '1db18e95118922462526c7092accf42639bd4fdd', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: 'f494d050c90922328f3e8ea3bd05e1cf9e6d239c', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: 'b31645d57a3c5f25eb59b61482d4e383e3cb962c', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '1e8f0a656074cd830715d19685c2a3c9daced9be', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: 'b11f2f53423877831a21b643d2368dccb6fe224c' }, index.h("div", { key: '57ff469e1f2c2531c1954bdf6d2f49fddbe63bcd', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: 'a418c15bb7aae60382eb31dd97ed8e0666e1fce9', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { key: '5709d31fd18036086c4ede870204a62fe89d590d', spacing: 24 }, index.h("zonos-country-flag", { key: 'ec590dc403375ff798b1d0d5a4a30bbaa74892f2', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '37d40d7dd95da6d333bd0fdf2f19fe724ffab2b9', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: '281df8ec6ab89f5a93ac9f727f90c17b38bfcbb2', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: '512245b074199b9e568afabfd9f843227aeb68cf', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '283e04fb0b4009458e93431ef9f9dc12900541a6', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (index.h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (index.h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), index.h("zonos-card", { key: 'fd2c574714b2e0dafacb4f9390c81b7b6003c7d3', spacing: "12px" }, index.h("zonos-v-stack", { key: '41a9864f58ddc28f1767113f517a7a9cf3a0be6d', spacing: 12 }, index.h("div", { key: 'ced705bcf185987815a898a173d08c571017a052', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '4724edca926eec5e050c711dcb96c6b914985695', "aria-label": "Duty de minimis", content: ImportIcon }), index.h("zonos-text", { key: '6c6d3b36897fd141ca83fbf008dae9f24ac56e40' }, dutyDeMinimisMessage)), index.h("div", { key: 'abe17715558f2ee3ded882eb2c5c1466904bfc8e', class: "zonos--flex-message" }, index.h("zonos-icon", { key: 'e8371f1e89a5b21947bfdcf73e6294bd6de49946', "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", { key: '952485295cfec2d7ad1b61523bb05378bae08e34' }, taxDeMinimisMessage)), additionalInformation && (index.h("div", { key: 'abc0e4c7ddecbe85dd8f4b8adab15073b1b6a2db', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '973ea223a40648ca8cac99bd0c839dd324894f1c', "aria-label": "Low value order shipping restriction", content: BagIcon }), index.h("zonos-text", { key: 'c6460eefa388097ed27e29d3a91055afbf8a5261' }, additionalInformation))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: 'daabdaf6f1f59e6e2ef3ad7516af60eb50a34633', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: '88608070d3a34b3742eeac74cb836b98ddb171eb' }, index.h("zonos-country-select", { key: '91acd80a1549277528927512e9d299282a0e3d26', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: '5b70e70778b8e863d1f256406f884179a01d9de2' }, index.h("zonos-language-select", { key: 'ba74dfc5baa25694dec9273c08644db8cd312dc1', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), index.h("zonos-card", { key: 'e0e0d8fb11132dc1f64e3fcf4f0cc2c1bf691f62', spacing: "12px" }, index.h("zonos-v-stack", { key: '0dc4346f8856bd8ba5f248f29bce36ef7966231b', spacing: 12 }, index.h("div", { key: 'ad9354280047ecd4ac32b988de69d77dcbe34216', class: "zonos--flex-message" }, index.h("zonos-icon", { key: 'aceb265d47dedefb6311ac216afe87a160f6eb70', "aria-label": "Duty de minimis", content: ImportIcon }), index.h("zonos-text", { key: '05ea0760b16a03c9a4ff1e900257823e1c4a8cca' }, dutyDeMinimisMessage)), index.h("div", { key: 'fa3e8189c8d022ed3a2e8aee479d5788c47cef4c', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '674d09a02bdce580ac686b6605f281712fb36642', "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", { key: '25e4d23761eed05537c368d57bc0c8124cfc9789' }, taxDeMinimisMessage)), additionalInformation && (index.h("div", { key: '0f21e1127ee976dc54c0143388adb96424df6b48', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '7b728089b819a901335c409e2ab375943c3cf6e1', "aria-label": "Low value order shipping restriction", content: BagIcon }), index.h("zonos-text", { key: '8c9d174c332811647071cdaf667d073f88c80d11' }, additionalInformation))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: 'fade96ffe3372328d5e40401e5899194bb64537a', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: '27d2f1e0221a8fa5c5d065bb06ec3aac34b5b8c2' }, index.h("zonos-country-select", { key: '3e95cbd0b23acbf6a9acc225c22e190628fb36c6', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: '308654a87db5adbbd7c776e761aa180bba128a83' }, index.h("zonos-language-select", { key: 'e28f547a6bb066b8d5e6f8cceabc5c14e5c23da1', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const classes = require('./classes-b7918f56.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
 require('./isDarkColor-f5473002.js');

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

@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '7af1c9dfc60d61837c25ed586b34d03737e190b7', class: "zonos--elements" }, index.h("a", { key: '6be4c2839936832d9d512e9afe4b8fe4e69889bf', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '897ec8e65f325161cf80d71b6efbcf05c4a444ae' }))));
+        return (index.h(index.Host, { key: '555e179675070efaaf8bf0d0ea674fe034b8700c', class: "zonos--elements" }, index.h("a", { key: '0c608a6f572eaabb93021d8618f2b1fd58b10188', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '4fef15b277b11e062d1fc2cf8bc3e564ed5b2a57' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

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

@@ -19,11 +19,11 @@ const ZonosLogo = class {
         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 (index.h(index.Host, { key: 'eb9e895db6d309b91f24aaba07b6bef785d64982', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: '3d2041632c4ad901d228ce6e267e6b5f9b408dc8', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, index.h("img", { key: '411e92bcfdab9d8b7362b3fbeeffb836d8d20756', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'e069b288a647051e1b5a505fb2b5b4a1851780ed', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 require('./zonosStore-aee974e0.js');
 require('./isDarkColor-f5473002.js');
 require('./getBorderRadius-c8cc2bb3.js');
@@ -44,7 +44,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '4886087d915369f60296b6ba86fe9400ae6db8dd', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'ac83371e795b8ae833087143c719cf6dfc066ab3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '2895560e50d856a071bef08c800b3112899e22e8', class: "zonos--payment-component" })));
+        return (index.h(index.Host, { key: '6bed9a37a91b7e3f0f381fbd1fe79fc7930a1483', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'd5231078e732006bbcd8cde34aa3f3c82bbec5f2', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'e0138c15df81fc7f78f7997e48722c2377298145', class: "zonos--payment-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-select-dialog-header_2.cjs.entry.js

@@ -18,9 +18,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'cd3cc096f08cdb3dd2170d9e8d578f603155b0d0', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'f5fdbdf6077dc7f928ce27b9a659264451851848', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: '40ddbfe738428ca388cb4b3a8244d86e5e26d876', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '4706e9acb42c11b213044084e25be8a5c13119f1', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'b5c5289219bb4ff380aa5e3c0738ae9029d00cdf', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '6d8c62ee077ab7883081a693825a00fd06cded69', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '42241292083a7041d600ac4af3034e61c5d4a6b1' }))));
+            } }, index.h("zonos-v-stack", { key: '2c702d85c59f05b13e2e390112a883287ea7caa9', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '6d96d65d0bf84c9c3fa393e40793ce614c38d56d', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'faa95bb90a92ea18b357fc85c417fe12ec683abd', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '69cb8bc40f9af380971bf25d9901f8508950d9a6', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: 'abdbb9baa47b4c954b81ea4101b24ababf45ae31' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
@@ -34,9 +34,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '415d652d553042161ef364e2a8ccd226fcfe3d84', style: {
+        return (index.h(index.Host, { key: 'c6bd39c68cd1056b90f5ced0bb21065ea9bd657c', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '1d8df528db72b8c1102742203eb53ce81efb1aae', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '66d247c7e8c8da9e311014695ce3a50b38709c33' }))));
+            } }, index.h("div", { key: 'fa24c9d7aafdee826d51bc9b0537c3ec1df672d3', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'a1f2bde182c1073dfeebe72855af2c729c303fee' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.css

@@ -62,6 +62,9 @@
 :host .zonos--payment-error-banner {
   margin-bottom: var(--amino-space-8);
 }
+:host .zonos--error-banner {
+  margin-bottom: var(--amino-space-16);
+}
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
 }

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

@@ -6,31 +6,37 @@ import { formatCurrency } from "../../../utils/formatCurrency";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosCheckoutPayment {
     constructor() {
+        this.handleValidate = () => {
+            var _a;
+            return !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        };
         /**
          * handler for continue button click
          */
         this.continueClickHandler = () => {
+            if (!this.handleValidate()) {
+                this.showErrorBanner = true;
+                return;
+            }
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-payment-info');
         };
         this.paymentError = false;
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
-        this.disabled = true;
-    }
-    watchFormComplete() {
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
-        }
+        this.showErrorBanner = false;
     }
     render() {
-        var _a;
         if (!stripeStore.stripeElements) {
             return null;
         }
-        this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
             amount: cartStore.total,
@@ -130,7 +136,7 @@ export class ZonosCheckoutPayment {
     }
     static get states() {
         return {
-            "disabled": {}
+            "showErrorBanner": {}
         };
     }
     static get events() {
@@ -151,10 +157,4 @@ export class ZonosCheckoutPayment {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "disabled",
-                "methodName": "watchFormComplete"
-            }];
-    }
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -54,6 +54,9 @@
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
 }
+:host .zonos--error-banner {
+  margin-bottom: var(--amino-space-16);
+}
 :host .zonos--group {
   margin-bottom: var(--amino-space-20);
   overflow: auto;

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

@@ -20,42 +20,60 @@ export class ZonosCustomerInfo {
                 }
                 return;
             }
+            if (!this.handleValidate()) {
+                // scroll to the top zonos-banner
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.el
+                        .querySelector('zonos-banner.zonos--error-banner')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                    });
+                }, 50);
+                this.showErrorBanner = true;
+                return;
+            }
+            this.showErrorBanner = false;
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-customer-info');
+            void trackConversionEvent('checkout_customerInfoCompleted');
+        };
+        this.handleValidate = () => {
+            const stripeShippingAddressEventData = stripeStore.stripeAddressEventData;
+            const stripeBillingAddressEventData = stripeStore.stripeBillingAddressEventData;
+            const stripeLinkEventData = stripeStore.stripeLinkEventData;
+            // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
+            const isValidBilling = stripeStore.stripeShippingSameAsBilling
+                ? !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete)
+                : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
+            const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
+            const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
+            if (!isValidBilling || !isValidShipping || !isValidLink) {
+                return false;
+            }
+            return true;
         };
         this.continueLoading = false;
         this.submitBtnType = undefined;
         this.submitBtnColor = undefined;
         this.defaultAddress = null;
-        this.disabled = true;
+        this.showErrorBanner = false;
         this.hasInvalidShippingCharacters = false;
         this.hasInvalidBillingCharacters = false;
     }
-    watchFormComplete() {
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag('zonos-checkout-customer-info');
-            void trackConversionEvent('checkout_customerInfoCompleted');
-        }
-    }
     render() {
         if (!stripeStore.stripeElements) {
             return null;
         }
-        const stripeShippingAddressEventData = stripeStore.stripeAddressEventData;
-        const stripeBillingAddressEventData = stripeStore.stripeBillingAddressEventData;
-        const stripeLinkEventData = stripeStore.stripeLinkEventData;
-        // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
-        const isValidBilling = stripeStore.stripeShippingSameAsBilling
-            ? !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete)
-            : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
-        const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
-        const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
-        // make sure data is valid
-        this.disabled = !isValidBilling || !isValidShipping || !isValidLink;
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidShippingCharacters = e.detail), titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidShippingCharacters = e.detail), titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidBillingCharacters = e.detail), titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidBillingCharacters = e.detail), titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Continue to shipping'))))));
     }
@@ -156,7 +174,7 @@ export class ZonosCustomerInfo {
     }
     static get states() {
         return {
-            "disabled": {},
+            "showErrorBanner": {},
             "hasInvalidShippingCharacters": {},
             "hasInvalidBillingCharacters": {}
         };
@@ -180,10 +198,4 @@ export class ZonosCustomerInfo {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "disabled",
-                "methodName": "watchFormComplete"
-            }];
-    }
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.css

@@ -65,6 +65,9 @@
 :host .zonos--group::-webkit-scrollbar-thumb:hover {
   background: #d6d6d6;
 }
+:host .zonos--error-banner {
+  margin-bottom: var(--amino-space-16);
+}
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
 }

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

@@ -23,13 +23,27 @@ export class ZonosShipping {
                 return;
             }
             this.isSelecting = false;
-            this.disabled = false;
+        };
+        this.handleValidate = () => {
+            return !!this.selectedShippingMethod;
         };
         /**
          * handler for continue button click
          */
         this.continueClickHandler = () => {
+            var _a;
+            // show error banner if the form is not complete
+            if (!this.handleValidate()) {
+                this.showErrorBanner = true;
+                return;
+            }
+            this.showErrorBanner = false;
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-shipping-info');
+            void trackConversionEvent('checkout_shippingInfoCompleted', {
+                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+            });
         };
         this.initServiceLevels = () => {
             var _a;
@@ -61,31 +75,23 @@ export class ZonosShipping {
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
         this.isSelecting = false;
-        this.disabled = true;
+        this.showErrorBanner = false;
         this.serviceLevels = [];
     }
-    watchFormComplete() {
-        var _a;
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag('zonos-checkout-shipping-info');
-            void trackConversionEvent('checkout_shippingInfoCompleted', {
-                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
-            });
-        }
-    }
     componentWillLoad() {
         this.initServiceLevels();
         const selectedServiceLevel = this.serviceLevels.find(item => { var _a; return item.value === ((_a = cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
         if (selectedServiceLevel) {
             this.selectedShippingMethod = selectedServiceLevel;
         }
-        // enable continue button if there is a selected shipping option
-        this.disabled = !selectedServiceLevel;
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '0ded6474793fbb142e8e9a3bc10f1b5ae88858a7', class: "zonos--shipping zonos--elements" }, h("div", { key: '334d49db61fe69bf43f2bf68828c724cb7c9851e', class: "zonos--group" }, h("zonos-text", { key: '57ac7f10aff623a7e9c009bee86a4e88c979417f', class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { key: 'bb7679250828b859f90940617dc03c20addb6252', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'ace80fcc503601d577fb7751777b00331c027f16', class: "zonos--group-btn" }, h("zonos-button", { key: 'd48000ef65953b5f99d95c4b404bb7a47351dbce', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        var _a, _b, _c;
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (h(Host, { key: 'f46a224f05bd6a5b762e7b4a9130c809fa1806d9', class: "zonos--shipping zonos--elements" }, h("div", { key: '07dceedd0abb2c794c8f4b7c70d51f84eb76f82f', class: "zonos--group" }, h("zonos-text", { key: 'e9aec3b541e90bca19218f5444b2a1282c1fade2', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'df955af5f7318a0146d72aae0d5292a5455c16d9', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'eacb6cc1936ac9a70f32deca90fa88efd9d560bd', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '37aed76bf80c937ed9dddbefb7f6417bf1322a89', class: "zonos--group-btn" }, h("zonos-button", { key: '09a5e1986f6d39ece56a0ea9b47324f81e4c3d84', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }
@@ -166,7 +172,7 @@ export class ZonosShipping {
         return {
             "selectedShippingMethod": {},
             "isSelecting": {},
-            "disabled": {},
+            "showErrorBanner": {},
             "serviceLevels": {}
         };
     }
@@ -188,10 +194,4 @@ export class ZonosShipping {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "disabled",
-                "methodName": "watchFormComplete"
-            }];
-    }
 }

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

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: '7af1c9dfc60d61837c25ed586b34d03737e190b7', class: "zonos--elements" }, h("a", { key: '6be4c2839936832d9d512e9afe4b8fe4e69889bf', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '897ec8e65f325161cf80d71b6efbcf05c4a444ae' }))));
+        return (h(Host, { key: '555e179675070efaaf8bf0d0ea674fe034b8700c', class: "zonos--elements" }, h("a", { key: '0c608a6f572eaabb93021d8618f2b1fd58b10188', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '4fef15b277b11e062d1fc2cf8bc3e564ed5b2a57' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: '9113b76d0368284d8062ba73cb1433ae64648c56', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '01a64861017098d6cdfa94b46ee675660147c45d', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0edaabad09319fa6cc2d5b02c304e5ed77d35eac', class: classes([
+            } }, h("div", { key: 'ef736fdfe0352ea201ecb34cbec695d90cfe4e5f', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '2d37289c26e12cb074ff7003032a1d417bbf1fdf' }, h("slot", { key: '2caa00a312b624d747dbe145b8673ced9118e49e' })))));
+            ]) }, this.icon, h("zonos-text", { key: '941793bf2ee10ad47bc5263f1bc2cbf6637d8bcd' }, h("slot", { key: '11da2ba6d11f451ecb71b1b2eb9ae29a009f8418' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,12 +66,12 @@ export class ZonosButton {
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '104b26d8b3fac6bafce6f5f852775af682d1b3f3', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '5f6e507c51fe1b02bbc14ff2bea2267ced9f8053', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: '2ad1b59dd11e4460928b42f33e5d421e90f259d2', class: classes([
+            }) }, h("button", { key: 'f464fef0f48e4e8fbfec844c8f4e3e6c525c70fd', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -84,7 +84,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '2849e63aa713c682e61a4a0c95e9bd5e0f5f8892', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '7040089b82edd821ae997f39fbbab50c0e523924', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'b20b86b70bbb180f45880ffaf1fd13751fc4682f', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '9fafd9c3c4764df1b9e268f6784b75fdfe21f9a7', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '5a2acbea7bbf41d76ce262f073f78e9f966dddc9', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '29982e7b98f8e9940f20916513434b5b1125c93a', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }