@zonos/elements 1.3.246 → 1.3.247

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const localization = require('./localization-b1075a8c.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
-const hasInclusivePrice = require('./hasInclusivePrice-dbb82df8.js');
+const hasInclusivePrice = require('./hasInclusivePrice-134b0250.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
 const TaxId = require('./TaxId-12acedde.js');
 require('./handleFetch-954f30e1.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
 const debounce = require('./debounce-815d1517.js');
-const localization = require('./localization-b1075a8c.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const handleFetch = require('./handleFetch-954f30e1.js');

package/dist/cjs/zonos-invoice-cart-items_2.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const localization = require('./localization-b1075a8c.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-55056c97.js');
+const cart = require('./cart-97a2d20a.js');
+const localization = require('./localization-00e73920.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-dd3b0609.js');
 const classes = require('./classes-b7918f56.js');
-const invoice = require('./invoice-972f1ab3.js');
+const invoice = require('./invoice-05a10ee1.js');
 const renderFallback = require('./renderFallback-78b54537.js');
 require('./zonosStore-37a4b4f4.js');
 require('./VarianceTest-bec00ea8.js');

package/dist/cjs/zonos-invoice-finish_5.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const paypal = require('./paypal-e339cc8c.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-97a2d20a.js');
+const paypal = require('./paypal-0b4b352b.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
@@ -14,11 +14,12 @@ const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const isInvoiceMobileTablet = require('./isInvoiceMobileTablet-dde41e4e.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const invoice = require('./invoice-972f1ab3.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-55056c97.js');
-const placeTestOrder = require('./placeTestOrder-3dfbe3d6.js');
+const invoice = require('./invoice-05a10ee1.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-dd3b0609.js');
+const placeTestOrder = require('./placeTestOrder-07b46688.js');
 const renderFallback = require('./renderFallback-78b54537.js');
 require('./isDarkColor-878e600e.js');
+require('./isContrastColor-09f5924a.js');
 
 const RemoveIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const invoice = require('./invoice-972f1ab3.js');
-const paypal = require('./paypal-e339cc8c.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-97a2d20a.js');
+const invoice = require('./invoice-05a10ee1.js');
+const paypal = require('./paypal-0b4b352b.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
@@ -16,6 +16,7 @@ const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./isDarkColor-878e600e.js');
 require('./getBorderRadius-2ef1170d.js');
+require('./isContrastColor-09f5924a.js');
 
 const ChevronDownIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 

package/dist/cjs/zonos-language-select_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const localization = require('./localization-b1075a8c.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-954f30e1.js');

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -6,8 +6,11 @@ const index = require('./index-69fa8852.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
+const getContrastColor = require('./getContrastColor-30848800.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 require('./VarianceTest-bec00ea8.js');
+require('./isDarkColor-878e600e.js');
+require('./isContrastColor-09f5924a.js');
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--zonos--selected-border-color, var(--zonos-elements-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:16px;-ms-flex-align:center;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--zonos-elements-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--zonos--selected-border-color, var(--zonos-elements-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 const ZonosShippingRichRadioStyle0 = zonosShippingRichRadioCss;
@@ -27,20 +30,30 @@ const ZonosShippingRichRadio = class {
         };
         this.getRadioItemStyleVariables = () => {
             const usedColor = this.borderColor || zonosStore.zonosStore.appearance.colorSecondary;
-            const secondaryColor = isColorVariable.isColorVariable(usedColor)
-                ? `var(--zonos-elements-${usedColor})`
+            const backgroundColor = !this.isMobile
+                ? zonosStore.zonosStore.appearance.colorPrimary
+                : '--zonos-elements-gray-0';
+            const contrastLabelColor = backgroundColor && usedColor
+                ? getContrastColor.getContrastColor({
+                    backgroundColor: isColorVariable.isColorVariable(backgroundColor)
+                        ? window
+                            .getComputedStyle(this.ele)
+                            .getPropertyValue(`--zonos-elements-${backgroundColor.replace('--zonos-elements-', '')}`)
+                        : backgroundColor,
+                    color: usedColor,
+                })
                 : usedColor;
             return {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderStyle,
                 }),
-                '--zonos--selected-border-color': secondaryColor || 'unset',
+                '--zonos--selected-border-color': contrastLabelColor || 'unset',
             };
         };
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '34abb7026ed7d382870f912b5e5c5631e4f06f76', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--zonos--font-family': zonosStore.zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (index.h(index.Host, { key: '8d77a01ba101899adb41904a820ba5f4985bc52d', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--zonos--font-family': zonosStore.zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (index.h("div", { "aria-hidden": "true", class: classes.classes([
@@ -49,6 +62,7 @@ const ZonosShippingRichRadio = class {
                 ]), onClick: () => this.handleRichRadioSelect(item) }, index.h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), index.h("div", { class: "zonos--shipping-info" }, index.h("div", { class: "zonos--shipping-detail" }, index.h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (index.h("div", { class: "zonos--sub-detail" }, item.sublabel && (index.h("zonos-text", { textColor: "gray-800" }, item.sublabel)), item.caption && (index.h("zonos-text", { textColor: "gray-600" }, item.caption))))), index.h("zonos-text", { type: "semiBoldLabel" }, item.price))));
         })));
     }
+    get ele() { return index.getElement(this); }
 };
 ZonosShippingRichRadio.style = ZonosShippingRichRadioStyle0;
 

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

@@ -1482,7 +1482,7 @@ export class ZonosCheckout {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
@@ -1510,7 +1510,7 @@ export class ZonosCheckout {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-dialog", { isLoading: true, loadingText: translate('You will be redirected to international checkout shortly.'), loadingTitle: translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, class: "zonos--checkout-dialog", "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-dialog", { isLoading: true, loadingText: translate('You will be redirected to international checkout shortly.'), loadingTitle: translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog

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

@@ -10,6 +10,7 @@ import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import { extractName } from "../../../utils/extractName";
 import { log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
+import { shortAddressCodeValidationResult } from "../../../utils/shortAddressCodeValidationResult";
 import { taxIdValidationResult } from "../../../utils/taxIdValidationResult";
 /**
  * Max address field length
@@ -48,6 +49,10 @@ export class ZonosCustomerInfo {
          * Whether or not the tax id input is invalid
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Whether or not the short address code input is invalid
+         */
+        this.shortAddressCodeErrorMessage = '';
         /**
          * Whether or not the shipping address contains invalid characters
          */
@@ -299,7 +304,14 @@ export class ZonosCustomerInfo {
                 shippingCountry: this.shippingCountry,
                 taxId: stripeStore.taxId,
             });
+            const { error: shortAddressCodeError, valid: validShortAddressCode } = shortAddressCodeValidationResult({
+                shippingCountry: this.shippingCountry,
+                shortAddressCode: stripeStore.shortAddressCode,
+            });
             this.taxIdErrorMessage = !validTaxId ? translate(error) : '';
+            this.shortAddressCodeErrorMessage = !validShortAddressCode
+                ? translate(shortAddressCodeError)
+                : '';
             const addressLengthErrorList = this.validateAddressLength({
                 address: stripeStore.stripeAddressEventData,
                 type: 'shipping',
@@ -316,6 +328,7 @@ export class ZonosCustomerInfo {
                 !isValidShipping ||
                 !isValidLink ||
                 !validTaxId ||
+                !validShortAddressCode ||
                 this.exceededCharacterLimitErrorFieldList.length > 0) {
                 return false;
             }
@@ -396,10 +409,10 @@ export class ZonosCustomerInfo {
             }
             // Render custom address component if the custom address form is enabled
             if (this.addressFormRenderType === 'zonos') {
-                return (h("zonos-custom-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
+                return (h("zonos-custom-address", { defaultAddress: defaultAddress, shortAddressCodeErrorMessage: this.shortAddressCodeErrorMessage, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
             }
             // Render Stripe address component by default
-            return (h("zonos-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
+            return (h("zonos-address", { defaultAddress: defaultAddress, shortAddressCodeErrorMessage: this.shortAddressCodeErrorMessage, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
         };
     }
     watchShowErrorBanner() {
@@ -659,6 +672,7 @@ export class ZonosCustomerInfo {
             "isCheckingForRestrictedItems": {},
             "isValidatingAddress": {},
             "taxIdErrorMessage": {},
+            "shortAddressCodeErrorMessage": {},
             "invalidShippingCharacterList": {},
             "invalidBillingCharacterList": {},
             "openAddressValidationDialog": {},

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

@@ -221,15 +221,15 @@ export class ZonosShipping {
             var _a;
             // Render all service levels for US since domestic shipping doesn't have DDP/DAP
             if (((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country) === 'US') {
-                return (h("zonos-shipping-rich-radio", { items: this.serviceLevelsAll, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }));
+                return (h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsAll, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }));
             }
-            return (h(Fragment, null, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+            return (h(Fragment, null, h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
                 !!this.serviceLevelsDAP.length && (h("button", { class: classes([
                     'zonos--shipping-options-collapse-trigger',
                     this.collapsedDAPOptions && 'collapsed',
                 ]), onClick: () => {
                     this.collapsedDAPOptions = !this.collapsedDAPOptions;
-                } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
+                } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
         };
         return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: cartStore.customQuotingError
                 ? cartStore.customQuotingError
@@ -313,6 +313,25 @@ export class ZonosShipping {
                 "setter": false,
                 "attribute": "submit-btn-type",
                 "reflect": false
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkout is in mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -2,6 +2,7 @@ import { h, Host, } from "@stencil/core";
 import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
+import { getContrastColor } from "../../utils/getContrastColor";
 import { isColorVariable } from "../../utils/isColorVariable";
 export class ZonosShippingRichRadio {
     constructor() {
@@ -16,20 +17,30 @@ export class ZonosShippingRichRadio {
         };
         this.getRadioItemStyleVariables = () => {
             const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;
-            const secondaryColor = isColorVariable(usedColor)
-                ? `var(--zonos-elements-${usedColor})`
+            const backgroundColor = !this.isMobile
+                ? zonosStore.appearance.colorPrimary
+                : '--zonos-elements-gray-0';
+            const contrastLabelColor = backgroundColor && usedColor
+                ? getContrastColor({
+                    backgroundColor: isColorVariable(backgroundColor)
+                        ? window
+                            .getComputedStyle(this.ele)
+                            .getPropertyValue(`--zonos-elements-${backgroundColor.replace('--zonos-elements-', '')}`)
+                        : backgroundColor,
+                    color: usedColor,
+                })
                 : usedColor;
             return {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderStyle,
                 }),
-                '--zonos--selected-border-color': secondaryColor || 'unset',
+                '--zonos--selected-border-color': contrastLabelColor || 'unset',
             };
         };
     }
     render() {
         var _a;
-        return (h(Host, { key: '34abb7026ed7d382870f912b5e5c5631e4f06f76', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--zonos--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (h(Host, { key: '8d77a01ba101899adb41904a820ba5f4985bc52d', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--zonos--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (h("div", { "aria-hidden": "true", class: classes([
@@ -150,6 +161,25 @@ export class ZonosShippingRichRadio {
                 "attribute": "theme",
                 "reflect": false
             },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the radio item is in mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false
+            },
             "selectedItem": {
                 "type": "unknown",
                 "mutable": false,
@@ -203,4 +233,5 @@ export class ZonosShippingRichRadio {
                 }
             }];
     }
+    static get elementRef() { return "ele"; }
 }

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

@@ -52,6 +52,7 @@ const { onChange: stripeStoreOnChange, reset, state: stripeStore, } = createStor
     isFetchingSession: false,
     partyBillingId: null,
     partyShippingId: null,
+    shortAddressCode: '',
     shouldInventoryRefund: false,
     shouldRenderPayInUsdButton: false,
     /**
@@ -193,12 +194,27 @@ const checkIsAddressOutdatedForValidation = () => {
     return isAddressDataDirty || isBillingAddressDataDirty;
 };
 const checkIsAddressOutdatedForAsyncAddressUpdate = () => {
-    var _a, _b, _c, _d, _e, _f;
-    const isLinkDataDirty = JSON.stringify((_a = stripeStore.stripeLinkUsedWhenFetchingLC) === null || _a === void 0 ? void 0 : _a.value) !==
-        JSON.stringify((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value);
-    const isAddressDataDirty = JSON.stringify((_c = stripeStore.stripeAddressUsedWhenAsyncAddressUpdate) === null || _c === void 0 ? void 0 : _c.value) !== JSON.stringify((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value);
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    /**
+     * If user updates the address after prefetching the landed cost, should always create and attach
+     * @caveat this will cause the scenario goes wrong after prefetching landed cost, with the current logic, it won't create party because nothing change after the prefetch happened
+     */
+    const landedCostShipToPartyId = (_a = cartStore.partiesData.find(party => party.type === 'DESTINATION')) === null || _a === void 0 ? void 0 : _a.id;
+    const landedCostBillToPartyId = (_b = cartStore.partiesData.find(party => party.type === 'PAYOR')) === null || _b === void 0 ? void 0 : _b.id;
+    // If haven't prefetched landed cost, there is no need to update address async
+    if (!landedCostShipToPartyId || !landedCostBillToPartyId) {
+        return false;
+    }
+    // If we don't have landed cost parties data, should way
+    if (stripeStore.partyShippingId !== landedCostShipToPartyId ||
+        stripeStore.partyBillingId !== landedCostBillToPartyId) {
+        return true;
+    }
+    const isLinkDataDirty = JSON.stringify((_c = stripeStore.stripeLinkUsedWhenFetchingLC) === null || _c === void 0 ? void 0 : _c.value) !==
+        JSON.stringify((_d = stripeStore.stripeLinkEventData) === null || _d === void 0 ? void 0 : _d.value);
+    const isAddressDataDirty = JSON.stringify((_e = stripeStore.stripeAddressUsedWhenAsyncAddressUpdate) === null || _e === void 0 ? void 0 : _e.value) !== JSON.stringify((_f = stripeStore.stripeAddressEventData) === null || _f === void 0 ? void 0 : _f.value);
     const isBillingAddressDataDirty = !stripeStore.stripeShippingSameAsBilling &&
-        JSON.stringify((_e = stripeStore.stripeBillingAddressUsedWhenAsyncAddressUpdate) === null || _e === void 0 ? void 0 : _e.value) !== JSON.stringify((_f = stripeStore.stripeBillingAddressEventData) === null || _f === void 0 ? void 0 : _f.value);
+        JSON.stringify((_g = stripeStore.stripeBillingAddressUsedWhenAsyncAddressUpdate) === null || _g === void 0 ? void 0 : _g.value) !== JSON.stringify((_h = stripeStore.stripeBillingAddressEventData) === null || _h === void 0 ? void 0 : _h.value);
     const isTaxIdDirty = stripeStore.taxIdUsedWhenAsyncAddressUpdate !== stripeStore.taxId;
     const isCompanyNameDirty = stripeStore.companyNameUsedWhenAsyncAddressUpdate !==
         stripeStore.companyName;
@@ -315,6 +331,7 @@ const stripeStoreAsyncAddressUpdate = async () => {
             email: ((_d = stripeStore.stripeLinkEventData) === null || _d === void 0 ? void 0 : _d.value.email) || '',
             isTest: isE2ETest,
             rootId: firstLandedCostRootId,
+            shortAddressCode: stripeStore.shortAddressCode,
             taxId: stripeStore.taxId,
         },
         method: 'POST',
@@ -344,6 +361,16 @@ const stripeStoreAsyncAddressUpdate = async () => {
     stripeStore.taxIdUsedWhenAsyncAddressUpdate = stripeStore.taxId;
     stripeStore.partyBillingId = json.billToPartyId;
     stripeStore.partyShippingId = json.shipToPartyId;
+    // Update parties data with the new parties id
+    cartStore.partiesData = cartStore.partiesData.map(party => {
+        if (party.type === 'DESTINATION' && party.id !== json.shipToPartyId) {
+            return Object.assign(Object.assign({}, party), { id: json.shipToPartyId });
+        }
+        if (party.type === 'PAYOR' && party.id !== json.billToPartyId) {
+            return Object.assign(Object.assign({}, party), { id: json.billToPartyId });
+        }
+        return party;
+    });
     return {
         partiesCreated: true,
     };

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -284,6 +284,9 @@ export const stringsArabic = {
     'Invalid session': {
         value: 'جلسة غير صالحة',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'تنسيق رمز العنوان القصير غير صالح. يجب أن يكون 4 أحرف و4 أرقام.',
+    },
     'Invoice:': {
         value: 'فاتورة:',
     },
@@ -527,6 +530,12 @@ export const stringsArabic = {
     'Shopping cart expired': {
         value: 'انتهت صلاحية عربة التسوق',
     },
+    'Short address code': {
+        value: 'رمز العنوان القصير',
+    },
+    'Short address code is required.': {
+        value: 'مطلوب رمز عنوان قصير.',
+    },
     Show: {
         value: 'عرض',
     },

package/dist/collection/components/store/translationStore/strings.base.js

@@ -285,6 +285,9 @@ export const stringsBase = {
     'Invalid session': {
         value: 'Invalid session',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'Invalid short address code format. Must be 4 letters and 4 numbers.',
+    },
     'Invoice:': {
         value: 'Invoice:',
     },
@@ -528,6 +531,12 @@ export const stringsBase = {
     'Shopping cart expired': {
         value: 'Shopping cart expired',
     },
+    'Short address code': {
+        value: 'Short address code',
+    },
+    'Short address code is required.': {
+        value: 'Short address code is required.',
+    },
     Show: {
         value: 'Show',
     },

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -284,6 +284,9 @@ export const stringsChinese = {
     'Invalid session': {
         value: '无效的会话',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: '无效的短地址代码格式。必须是4个字母和4个数字。',
+    },
     'Invoice:': {
         value: '发票：',
     },
@@ -527,6 +530,12 @@ export const stringsChinese = {
     'Shopping cart expired': {
         value: '购物车已过期',
     },
+    'Short address code': {
+        value: '简短地址代码',
+    },
+    'Short address code is required.': {
+        value: '需要简短的地址代码。',
+    },
     Show: {
         value: '显示',
     },

package/dist/collection/components/store/translationStore/strings.danish.js

@@ -284,6 +284,9 @@ export const stringsDanish = {
     'Invalid session': {
         value: 'Ugyldig session',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'Ugyldigt format for kort adressekode. Skal være 4 bogstaver og 4 tal.',
+    },
     'Invoice:': {
         value: 'Faktura:',
     },
@@ -527,6 +530,12 @@ export const stringsDanish = {
     'Shopping cart expired': {
         value: 'Indkøbskurv udløbet',
     },
+    'Short address code': {
+        value: 'Kort adressekode',
+    },
+    'Short address code is required.': {
+        value: 'Kort adressekode er påkrævet.',
+    },
     Show: {
         value: 'Vis',
     },

package/dist/collection/components/store/translationStore/strings.dutch.js

@@ -284,6 +284,9 @@ export const stringsDutch = {
     'Invalid session': {
         value: 'Ongeldige sessie',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'Ongeldig formaat van korte adrescode. Moet 4 letters en 4 cijfers bevatten.',
+    },
     'Invoice:': {
         value: 'Factuur:',
     },
@@ -527,6 +530,12 @@ export const stringsDutch = {
     'Shopping cart expired': {
         value: 'Winkelwagen verlopen',
     },
+    'Short address code': {
+        value: 'Korte adrescode',
+    },
+    'Short address code is required.': {
+        value: 'Korte adrescode is vereist.',
+    },
     Show: {
         value: 'Tonen',
     },

package/dist/collection/components/store/translationStore/strings.french.js

@@ -284,6 +284,9 @@ export const stringsFrench = {
     'Invalid session': {
         value: 'Session invalide',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: "Format de code d'adresse courte invalide. Doit être de 4 lettres et 4 chiffres.",
+    },
     'Invoice:': {
         value: 'Facture:',
     },
@@ -527,6 +530,12 @@ export const stringsFrench = {
     'Shopping cart expired': {
         value: 'Panier expiré',
     },
+    'Short address code': {
+        value: "Code d'adresse court",
+    },
+    'Short address code is required.': {
+        value: "Un code d'adresse court est requis.",
+    },
     Show: {
         value: 'Montrer',
     },

package/dist/collection/components/store/translationStore/strings.german.js

@@ -284,6 +284,9 @@ export const stringsGerman = {
     'Invalid session': {
         value: 'Ungültige Sitzung',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'Ungültiges Format des Kurzadresscodes. Muss aus 4 Buchstaben und 4 Zahlen bestehen.',
+    },
     'Invoice:': {
         value: 'Rechnung:',
     },
@@ -527,6 +530,12 @@ export const stringsGerman = {
     'Shopping cart expired': {
         value: 'Einkaufswagen abgelaufen',
     },
+    'Short address code': {
+        value: 'Kurzer Adresscode',
+    },
+    'Short address code is required.': {
+        value: 'Ein kurzer Adresscode ist erforderlich.',
+    },
     Show: {
         value: 'Zeigen',
     },

package/dist/collection/components/store/translationStore/strings.hebrew.js

@@ -284,6 +284,9 @@ export const stringsHebrew = {
     'Invalid session': {
         value: 'סשן לא חוקי',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'פורמט קוד כתובת קצר לא חוקי. חייב להיות 4 אותיות ו-4 מספרים.',
+    },
     'Invoice:': {
         value: 'חשבונית:',
     },
@@ -527,6 +530,12 @@ export const stringsHebrew = {
     'Shopping cart expired': {
         value: 'תוקף עגלת הקניות פג',
     },
+    'Short address code': {
+        value: 'קוד כתובת קצר',
+    },
+    'Short address code is required.': {
+        value: 'נדרש קוד כתובת קצר.',
+    },
     Show: {
         value: 'הצג',
     },