@zonos/elements 1.3.246 → 1.3.248

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

@@ -2,6 +2,7 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreNextStep, } from "../../../store/checkout/cart";
 import { paypalStore } from "../../../store/checkout/paypal";
 import { stripeStore } from "../../../store/checkout/stripe";
+import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { placeTestOrder } from "../../../utils/api/placeTestOrder";
@@ -50,7 +51,7 @@ export class ZonosCheckoutPayment {
          * handler for continue button click
          */
         this.continueClickHandler = async ({ currencyCode, }) => {
-            var _a;
+            var _a, _b;
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 // Attempt to submit the form so the missing input error will be shown in Stripe
@@ -65,7 +66,13 @@ export class ZonosCheckoutPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
+            submitGtag({
+                event: 'zonos-checkout-payment-info',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                    paymentMethod: (_b = stripeStore.stripePaymentEventData) === null || _b === void 0 ? void 0 : _b.value.type,
+                },
+            });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

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

@@ -479,7 +479,12 @@ export class ZonosCheckout {
         }
         // Close the confirm dialog
         this.confirmDialogOpen = false;
-        submitGtag('zonos-checkout-close');
+        submitGtag({
+            event: 'zonos-checkout-close',
+            metadata: {
+                checkoutSessionId: storageStore.checkoutSessionId,
+            },
+        });
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cartStore.step === 'finish') {
             // reset cart store if it's not preview mode and only when checkout is in the finish step.
@@ -765,7 +770,12 @@ export class ZonosCheckout {
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
-                    submitGtag('zonos-checkout-start');
+                    submitGtag({
+                        event: 'zonos-checkout-start',
+                        metadata: {
+                            checkoutSessionId: storageStore.checkoutSessionId,
+                        },
+                    });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -1086,7 +1096,12 @@ export class ZonosCheckout {
     async handleCustomerInfoContinue() {
         var _a, _b, _c, _d;
         // submit google tag when the form is complete
-        submitGtag('zonos-checkout-customer-info');
+        submitGtag({
+            event: 'zonos-checkout-customer-info',
+            metadata: {
+                checkoutSessionId: storageStore.checkoutSessionId,
+            },
+        });
         const checkoutSessionId = storageStore.checkoutSessionId;
         void trackConversionEvent({
             checkoutSessionId,
@@ -1225,7 +1240,12 @@ export class ZonosCheckout {
         }
         catch (err) {
             logError(err);
-            submitGtag('zonos-checkout-payment-fail');
+            submitGtag({
+                event: 'zonos-checkout-payment-fail',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                },
+            });
             stripeStore.hasPaymentError = true;
             // should request inventory refund if there's an error during payment
             if (stripeStore.shouldInventoryRefund) {
@@ -1482,7 +1502,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 +1530,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

@@ -74,20 +74,26 @@ export class ZonosShipping {
          * handler for continue button click
          */
         this.continueClickHandler = () => {
-            var _a;
+            var _a, _b;
             // show error banner if the form is not complete
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 return;
             }
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-shipping-info');
+            submitGtag({
+                event: 'zonos-checkout-shipping-info',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                },
+            });
             const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_shippingInfoCompleted',
                 metadata: {
-                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                    serviceLevelId: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value,
                 },
             });
             this.showErrorBanner = false;
@@ -221,15 +227,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 +319,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/checkout/zonos-collect/zonos-collect-finish/zonos-collect-finish.js

@@ -146,7 +146,7 @@ export class ZonosCollectFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag('zonos-checkout-payment-fail');
+                    submitGtag({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosCollectFinish {
                     });
                 }
                 else {
-                    submitGtag('zonos-checkout-success');
+                    submitGtag({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -204,7 +204,7 @@ export class ZonosCollectFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag('zonos-checkout-success');
+                submitGtag({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -260,11 +260,11 @@ export class ZonosCollectFinish {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (h(Host, { key: 'e145b7396302157ccb515c54f99e50faa8ba45e6', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'c085862ecf1f50752634fb44f99b5cb5d82a9e24', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'b9df4788f27c935ba7fc47e7c930cd162c8fbebe', class: "zonos--finish-details" }, h("div", { key: 'a510c995880c8698dc98390d0504b70333551c86', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '8f84f87bf2365b85acffefe16e8b10cd9227a6e6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '0e3f3f71cae6262d6394ad2c5a6d656509b484d5', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'c769f2ada1e6b421e373aeb4393560a21d6fcffc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '9972858fadd4d2d9c4f00e54921002ea04a5cc51', class: "zonos--button-container" }, h("zonos-button", { key: 'fe931a552fc1c43b29a1966736379c3c1d0536f6', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '9b30b12c817c3422b355a2f544bbf2908f736c80', class: "zonos--finish-details" }, h("div", { key: '697fff3258a6e74d99500ec25f5d3923f8c7cfc2', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '8457c0c9b22c2fb6374b60e492099981026d2690', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '21ab18878abb37a2c37d873c494d71aee3d4ed71', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '389918dd57e6ce5744b7192baa3c06c6db3f70cd', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: 'cca6b625a6bea62b788cf8dd6bb9e03e6505d81c', class: "zonos--button-container" }, h("zonos-button", { key: '0f45987515ae99045e5b449b5b1aaae11d70d9fb', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }

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

@@ -64,7 +64,7 @@ export class ZonosCollectPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
+            submitGtag({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

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

@@ -146,7 +146,7 @@ export class ZonosInvoiceFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag('zonos-checkout-payment-fail');
+                    submitGtag({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosInvoiceFinish {
                     });
                 }
                 else {
-                    submitGtag('zonos-checkout-success');
+                    submitGtag({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -204,7 +204,7 @@ export class ZonosInvoiceFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag('zonos-checkout-success');
+                submitGtag({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -260,11 +260,11 @@ export class ZonosInvoiceFinish {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (h(Host, { key: '2d8d736241298daa30fdf8935cef67bfa748e2df', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '5d2fc87bc549fa2cb6d622e664043bbfe55f8b0e', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '30e1eae6e9ac7289af88f8fe2048d40796dfdf0e', class: "zonos--finish-details" }, h("div", { key: '0324e34b72e58d0862ed319576018bd45bd18b18', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '227f3cdda8e9cb0ed15ea91acb88c88d15d3d21c', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '1458ad439dc56e9ca7641a9ca95f3dfb2fd6b28f', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '8b0ab258c7beab09b0bc12999198f38813a144b3', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: 'ea6b4f8c1f8cce779fadf358966fece018d9869b', class: "zonos--button-container" }, h("zonos-button", { key: 'e5140fa1fab1e3150a2b15915c29d988f54468b2', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '1268de9e5be1edc4cbe2e7e2f1d2590b168d8c7b', class: "zonos--finish-details" }, h("div", { key: 'ce63ee565c176ea5687fc1c0f721932e26b93ebd', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'a073858eac699426dc5947b85d3b3665868f164e', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: 'a96c40f5cc977de82585f7827d6bc6aef55ba873', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'd97bc54085b9fe69eb05b44042deae25c379ee3a', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '488c3442e40fedf65caedbd3e098bd8b95976aab', class: "zonos--button-container" }, h("zonos-button", { key: '9a01b9cca0e3747548d386345015ecea80dc29d3', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }

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

@@ -64,7 +64,7 @@ export class ZonosInvoicePayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
+            submitGtag({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

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/main/zonos-controller.js

@@ -12,6 +12,7 @@ import { initHello } from "../utils/hello/initHello";
 import { CheckoutAddressService } from "../utils/iframe/CheckoutAddressService";
 import { iframeServices, injectPrivateIframe, } from "../utils/iframe/IframeHelpers";
 import { log } from "../utils/logging/log";
+import { ensureAnalyticsRelayPing } from "../utils/submitGtag";
 export class ZonosController {
     /**
      * Method to initialize checkout element
@@ -142,6 +143,8 @@ export class ZonosController {
             }
             document.body.appendChild(scriptToInject);
         });
+        // Custom HTML may set window.Zonos.googleAnalyticId; trigger relay ping so parent configures GA
+        ensureAnalyticsRelayPing();
     }
     async initGooglePlacesService(settings) {
         const genericSettings = settings === null || settings === void 0 ? void 0 : settings.genericSettings;
@@ -328,7 +331,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'fe248e1e38cd3d98c56f55d39b704f7337c74c29', class: "zonos--elements" });
+        return h(Host, { key: '92e1eae13d0b13f91098ea110203b6c7a7f67c3e', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,6 +94,12 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
+                submitGtag({
+                    event: 'zonos-checkout-payment-fail',
+                    metadata: {
+                        checkoutSessionId,
+                    },
+                });
                 onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
                 return '';
             }
@@ -126,6 +132,12 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
+                submitGtag({
+                    event: 'zonos-checkout-payment-fail',
+                    metadata: {
+                        checkoutSessionId,
+                    },
+                });
                 // trigger fail event
                 onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
                 return '';
@@ -136,7 +148,13 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset paypal error banner
                 paypalStore.paypalErrorMessage = null;
                 // submit google tag when the form is complete
-                submitGtag('zonos-checkout-payment-info');
+                submitGtag({
+                    event: 'zonos-checkout-payment-info',
+                    metadata: {
+                        checkoutSessionId,
+                        paymentMethod: 'paypal',
+                    },
+                });
                 const orderId = await paypalStoreCaptureOrder({
                     checkoutSessionId,
                     paypalMockResponse: window.Zonos._paypalMockResponse,

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,
     };
@@ -783,6 +810,8 @@ const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybo
     const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
     const { isError, messages } = stripeStoreMessageBasedOnStatus(status);
     return {
+        amount: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.amount,
+        currency: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.currency,
         error: isError,
         messages,
         paymentIntentId: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.id,

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',
     },