@zonos/elements 1.3.245 → 1.3.247

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

@@ -284,6 +284,9 @@ export const stringsVietnamese = {
     'Invalid session': {
         value: 'Phiên không hợp lệ',
     },
+    'Invalid short address code format. Must be 4 letters and 4 numbers.': {
+        value: 'Định dạng mã địa chỉ ngắn không hợp lệ. Phải là 4 chữ cái và 4 chữ số.',
+    },
     'Invoice:': {
         value: 'Hóa đơn:',
     },
@@ -527,6 +530,12 @@ export const stringsVietnamese = {
     'Shopping cart expired': {
         value: 'Giỏ hàng đã hết hạn',
     },
+    'Short address code': {
+        value: 'Mã địa chỉ ngắn',
+    },
+    'Short address code is required.': {
+        value: 'Cần có mã địa chỉ ngắn.',
+    },
     Show: {
         value: 'Hiển thị',
     },

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

@@ -35,7 +35,8 @@
   margin-bottom: 16px;
 }
 :host .zonos--company-name-input,
-:host .zonos--tax-id-input {
+:host .zonos--tax-id-input,
+:host .zonos--short-address-code-input {
   margin-bottom: 16px;
 }
 :host zonos-banner {

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

@@ -7,6 +7,7 @@ import { translate } from "../../store/translationStore";
 import { zonosStore } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
+import { shouldRenderShortAddressCodeInput } from "../../utils/checkout/shouldRenderShortAddressCodeInput";
 import { shouldRenderTaxIdInput } from "../../utils/checkout/shouldRenderTaxIdInput";
 import { classes } from "../../utils/classes";
 import { extractName } from "../../utils/extractName";
@@ -31,6 +32,10 @@ export class ZonosAddress {
          * Error message for tax id input
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Error message for short address code input
+         */
+        this.shortAddressCodeErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         /**
          * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
@@ -260,7 +265,32 @@ export class ZonosAddress {
         return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 stripeStore.taxId = event.detail;
                 this.taxIdChanged.emit(event.detail);
-            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
+            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.taxIdErrorMessage))));
+    }
+    /**
+     * Render short address code input based on ship to country code
+     */
+    renderShortAddressCodeInput() {
+        var _a;
+        // No need to render short address code input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render short address code input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const shortAddressCodeInputRendered = shouldRenderShortAddressCodeInput({
+            countryCode,
+        });
+        // Don't render short address code input if the country doesn't require short address code
+        if (!shortAddressCodeInputRendered) {
+            return null;
+        }
+        return (h("div", { class: "zonos--short-address-code-input" }, h("zonos-stripe-input", { inputLabel: translate('Short address code'), inputPlaceholder: "RRRD2929", inputValue: stripeStore.shortAddressCode || '', isError: !!this.shortAddressCodeErrorMessage, onInputChange: (event) => {
+                stripeStore.shortAddressCode = event.detail;
+            } }), this.shortAddressCodeErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.shortAddressCodeErrorMessage))));
     }
     renderCompanyNameInput() {
         // No need to render company name for billing address (only allow for Collect and Invoice)
@@ -322,11 +352,11 @@ export class ZonosAddress {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'b02889c4677a27a8c54a411d66fb31e15af78e1a', class: classes([
+        return (h(Host, { key: '5dc571d7c5e706ae9cb90de70deee22847e5ba7e', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: 'f52beb7ed6699ec1c73ee35a3436798a1fea38c7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '7c9602892de932e8a3f90a37b53a936f39082916', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '8ea6698f5b9d3bb525942c146e2cf67fefad6ad8', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: 'a7c9f730bc9b64aa2c6e8cc24701e638481eac19', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '3078529c201c7947ffc833485d46184bc79ab1d1', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: 'b4a9850ac30ad9c483e05743ff41b7de9756d826', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -423,6 +453,26 @@ export class ZonosAddress {
                 "attribute": "tax-id-error-message",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "shortAddressCodeErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message for short address code input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "short-address-code-error-message",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -20,6 +20,7 @@ import { zonosStore } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isValidZip } from "../../utils/checkout/form/isValidZip";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
+import { shouldRenderShortAddressCodeInput } from "../../utils/checkout/shouldRenderShortAddressCodeInput";
 import { shouldRenderTaxIdInput } from "../../utils/checkout/shouldRenderTaxIdInput";
 import { classes } from "../../utils/classes";
 import { extractName } from "../../utils/extractName";
@@ -40,6 +41,10 @@ export class ZonosAddress {
          * Error message for tax id input
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Error message for short address code input
+         */
+        this.shortAddressCodeErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         /**
          * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
@@ -370,6 +375,31 @@ export class ZonosAddress {
                 stripeStore.taxId = event.detail;
             } })));
     }
+    /**
+     * Render short address code input based on ship to country code
+     */
+    renderShortAddressCodeInput() {
+        var _a;
+        // No need to render short address code input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render short address code input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const shortAddressCodeInputRendered = shouldRenderShortAddressCodeInput({
+            countryCode,
+        });
+        // Don't render short address code input if the country doesn't require short address code
+        if (!shortAddressCodeInputRendered) {
+            return null;
+        }
+        return (h("div", { class: "zonos--short-address-code-input" }, h("zonos-stripe-input", { inputLabel: translate('Short address code'), inputPlaceholder: "RRRD2929", inputValue: stripeStore.shortAddressCode || '', isError: !!this.shortAddressCodeErrorMessage, onInputChange: (event) => {
+                stripeStore.shortAddressCode = event.detail;
+            } }), this.shortAddressCodeErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.shortAddressCodeErrorMessage))));
+    }
     renderCompanyNameInput() {
         // No need to render company name for billing address
         if (this.type === 'billing') {
@@ -894,10 +924,10 @@ export class ZonosAddress {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '7214ab1c348c1236dfa65f3bb20866fb3262c35d', class: classes([
+        return (h(Host, { key: '4a2a2bb06e16eb0470b827efd104c1a7a373e2b5', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '3ce287d8ffd3f5fdb4745311d17992c0b9ee9678', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '0e33486852d6512b054bb480d0295ce97d2667eb', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '74fd51761c8672e23ada3c5f1bac121cdf559ca6', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: 'e21b18b079f013e1bdaf2ab526c1c7826f2376f0', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }
@@ -994,6 +1024,26 @@ export class ZonosAddress {
                 "attribute": "tax-id-error-message",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "shortAddressCodeErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message for short address code input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "short-address-code-error-message",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -99,6 +99,7 @@ export const prepCartCalculateLandedCost = (cartId) => {
                 },
             ]
             : [],
+        shipToShortAddressCode: stripeStore.shortAddressCode,
         shipToTaxId: stripeStore.taxId,
         shippingAddress: {
             addressLine1: translatedShippingAddress.line1,
@@ -185,6 +186,7 @@ export const prepCalculateLandedCost = () => {
         isTest: isE2ETest,
         items: cartStore.items,
         landedCostAdjustments: adjustments,
+        shipToShortAddressCode: stripeStore.shortAddressCode,
         shipToTaxId: stripeStore.taxId,
         shippingAddress: {
             addressLine1: translatedShippingAddress.line1,

package/dist/collection/components/utils/checkout/shouldRenderShortAddressCodeInput.js

@@ -0,0 +1,16 @@
+import { countryRequireShortAddressCode, } from "../../../types/checkout/ShortAddressCode";
+const isInShortAddressCodeCountry = (countryCode) => {
+    return countryRequireShortAddressCode.includes(countryCode);
+};
+/**
+ * Checks if the short address code input should be rendered based on the country code.
+ */
+export const shouldRenderShortAddressCodeInput = ({ countryCode, }) => {
+    // If country require short address code, show the input
+    const isCountryRequireShortAddressCode = isInShortAddressCodeCountry(countryCode);
+    if (isCountryRequireShortAddressCode) {
+        return true;
+    }
+    // If country doesn't require short address code, no need to show the input
+    return false;
+};

package/dist/collection/components/utils/checkout/watchImmediateBigcommerceDomesticCheckoutRedirect.js

@@ -1,8 +1,9 @@
 import { stripeStoreGetDomesticShippingSession, stripeStoreSaveDomesticShippingSession, } from "../../store/checkout/stripe";
 import { localizationStoreUpdateSelectedCountryCode } from "../../store/hello/localization";
+import { zonosStore } from "../../store/zonosStore";
 import { isShippableCountry } from "./isShippableCountry";
 import { log } from "../logging/log";
-const SHIP_TO_COUNTRY_SELECTOR = 'select[name="shippingAddress.countryCode"]';
+const FALLBACK_SHIP_TO_COUNTRY_SELECTOR = 'select[name="shippingAddress.countryCode"]';
 /**
  * Watch for changes in domestic checkout step. Redirects user to home page to open international checkout when user selects a country in the international shipping zone.
  * @note Only works on default bigcommerce checkout page
@@ -14,12 +15,12 @@ export const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedi
     /**
      * Keep checking
      */
-    const handleInternationalCheckoutSelected = async () => {
-        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
-        if (!shipToCountryElement) {
-            return false;
-        }
-        const shippingCountry = shipToCountryElement.value;
+    const handleInternationalCheckoutSelected = async (overrideShippingCountry) => {
+        var _a;
+        const shipToCountryElement = document.querySelector(((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.bigcommerceDomesticCheckoutCountrySelector) ||
+            FALLBACK_SHIP_TO_COUNTRY_SELECTOR);
+        const shippingCountry = ((shipToCountryElement === null || shipToCountryElement === void 0 ? void 0 : shipToCountryElement.value) ||
+            overrideShippingCountry);
         if (!shippingCountry) {
             // do nothing if shipping country is not found
             return false;
@@ -66,6 +67,7 @@ export const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedi
     let isProcessing = false;
     let intervalCreated = false;
     const observer = new MutationObserver(() => {
+        var _a;
         const domesticRedirectedButton = document.querySelector(domesticRedirectedBtnSelector);
         const shippingAddressSession = stripeStoreGetDomesticShippingSession();
         // append a hidden button to the body if the shipping address session is found
@@ -82,7 +84,8 @@ export const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedi
         }
         const isBigcommerceDomesticCheckoutPage = window.location.pathname.includes('/checkout') &&
             window.Zonos.isBigCommerce;
-        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
+        const shipToCountryElement = document.querySelector(((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.bigcommerceDomesticCheckoutCountrySelector) ||
+            FALLBACK_SHIP_TO_COUNTRY_SELECTOR);
         // Should just disconnect the observer if it's not bigcommerce domestic checkout page
         if (!isBigcommerceDomesticCheckoutPage) {
             observer.disconnect();
@@ -121,6 +124,26 @@ export const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedi
                 isProcessing = false;
             }
         }, 1000);
+        // keep checking for stripe address element to be initialized
+        const stripeBcListenerInterval = setInterval(() => {
+            var _a;
+            if (!window.bcStripeElements) {
+                clearInterval(stripeBcListenerInterval);
+                return;
+            }
+            const addressElement = (_a = window.bcStripeElements) === null || _a === void 0 ? void 0 : _a.getElement('address');
+            if (!addressElement) {
+                return;
+            }
+            clearInterval(stripeBcListenerInterval);
+            addressElement.on('change', event => {
+                const shippingCountry = event.value.address.country;
+                if (shippingCountry) {
+                    void handleInternationalCheckoutSelected(shippingCountry);
+                }
+            });
+            // we want to attacch event to addressElement as soon as it's loaded
+        }, 500);
     });
     observer.observe(document.body, {
         childList: true,

package/dist/collection/components/utils/getContrastColor.js

@@ -2,6 +2,14 @@ import tinycolor from "tinycolor2";
 import { isContrastColor } from "./isContrastColor";
 import { isDarkColor } from "./isDarkColor";
 export const getContrastColor = ({ backgroundColor, color, }) => {
+    if (backgroundColor === color) {
+        if (isDarkColor(color)) {
+            const ligherColor = tinycolor(color).lighten(40).toHexString();
+            return ligherColor;
+        }
+        const darkerColor = tinycolor(color).darken(40).toHexString();
+        return darkerColor;
+    }
     // get readibility of the color
     const isContrastEnough = isContrastColor({
         backgroundColor1: backgroundColor,

package/dist/collection/components/utils/shortAddressCodeValidationResult.js

@@ -0,0 +1,37 @@
+import { shouldRenderShortAddressCodeInput } from "./checkout/shouldRenderShortAddressCodeInput";
+export const shortAddressCodeValidationResult = ({ shippingCountry, shortAddressCode, }) => {
+    // Check to see if we are required to collect short address code for the shipping country or not
+    const isShortAddressCodeInputRendered = shouldRenderShortAddressCodeInput({
+        countryCode: shippingCountry,
+    });
+    // If the short address code input is not even rendered, no need to validate anything and allow to proceed. Validate when short address code input is not even rendered would prevent the user from checking out
+    if (!isShortAddressCodeInputRendered) {
+        return {
+            error: null,
+            valid: true,
+        };
+    }
+    /**
+     * If the short address code input is rendered, the input should be filled
+     */
+    if (!shortAddressCode) {
+        return {
+            error: 'Short address code is required.',
+            valid: false,
+        };
+    }
+    if (shippingCountry === 'SA') {
+        const isValid = /^[A-Za-z]{4}\s*[0-9]{4}$/.test(shortAddressCode);
+        if (!isValid) {
+            return {
+                error: 'Invalid short address code format. Must be 4 letters and 4 numbers.',
+                valid: false,
+            };
+        }
+    }
+    //  Other countries doesn't need to validate short address code in the right format
+    return {
+        error: null,
+        valid: true,
+    };
+};

package/dist/collection/types/checkout/ShortAddressCode.js

@@ -0,0 +1,3 @@
+export const countryRequireShortAddressCode = [
+    'SA',
+];

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

@@ -11,6 +11,7 @@ export const errorProjectNameEnum = {
     ZonosCom: 'zonos_com',
 };
 export const featureAspectKeyEnum = {
+    AdminRulesWrite: 'admin_rules_write',
     AirwallexBeta: 'airwallex_beta',
     Checkout_2_0: 'checkout_2_0',
     ClassifyBulk: 'classify_bulk',
@@ -43,6 +44,7 @@ export const featureAspectKeyEnum = {
 };
 export const featureAudienceNameEnum = {
     AccountsReceivable: 'accounts_receivable',
+    AdminRulesEditor: 'admin_rules_editor',
     AirwallexBetaMerchant: 'airwallex_beta_merchant',
     CheckoutSales: 'checkout_sales',
     ClassifyBulkMerchant: 'classify_bulk_merchant',