@zonos/elements 1.3.230 → 1.3.232

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

@@ -8,7 +8,7 @@ import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 import { sendErrorLog } from "../../utils/logging/sendErrorLog";
 import { validateEmailValue } from "../../utils/validateEmailValue";
-const MAX_RETRIES_INITIALIZE_LINK = 11;
+const MAX_RETRIES_INITIALIZE_LINK = 51;
 /**
  * This component is a wrapper for the stripe authentication element that would render default style object
  */
@@ -85,6 +85,22 @@ export class ZonosLinkAuthentication {
             });
             stripeStore.stripeLinkElement = linkAuthenticationElement;
             this.retriesInitializeLink = 0;
+            // 10 seconds
+            if (this.retriesInitializeLink > 11) {
+                log('Stripe link element initialized', 'info', {
+                    retriesInitializeLink: this.retriesInitializeLink,
+                    stripe: this.stripe,
+                });
+                void sendErrorLog({
+                    endpoint: 'stripe-link-authentication-init-long-running',
+                    errors: [
+                        'Stripe link element initialized after 20 retries - 10 seconds',
+                    ],
+                    metadata: {
+                        retriesInitializeLink: this.retriesInitializeLink,
+                    },
+                });
+            }
         }
         catch (error) {
             if (error instanceof Error) {
@@ -99,7 +115,7 @@ export class ZonosLinkAuthentication {
                         endpoint: 'stripe-link-authentication-init-error',
                         errors: [error.message],
                         metadata: {
-                            clientSecret: this.clientSecret,
+                            retriesInitializeLink: this.retriesInitializeLink,
                         },
                     });
                 }

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

@@ -65,7 +65,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'c0b27f25785a9f6de2705e16d97f1bf5f7bcb0a4', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '1cfdb16f94a5219882da9da013a6e2de6a6b3c3f', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'bb5ac07b4c32f2469f4825426160542d9729d332', class: "zonos--payment-component" }), h("div", { key: '34f805b56fa151e8a3102361df9fb8b3e636dc75', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'ecf135f9da39d699a2287558a99310acd8e5fbd2', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '67048977556c556826c26120f2c0654885f30c57', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '7762163776ac5ee3f8bbc7c65e31b5dc833bb011', class: "zonos--payment-component" }), h("div", { key: '4f12427f8db85442e0b41dd5eb194f374c6f1d86', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/api/{getInclusivePricing.js → getInclusivePriceConfigurations.js}

@@ -1,6 +1,6 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
-export const getInclusivePricing = async (countryCode) => {
+export const getInclusivePriceConfigurations = async (countryCode) => {
     var _a;
     if (!countryCode) {
         return null;

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

@@ -1,11 +1,8 @@
+import { getOverridenZCountry } from "../getOverridenZCountry";
 import { handleFetch } from "../handleFetch";
-import { getZCountryUrlParam } from "../hello/getZCountryUrlParam";
 export const getLocalization = async () => {
     try {
-        const currentUrl = new URL(window.location.href);
-        // load and use country from session storage when zCountry query param is not present
-        const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
-        const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
+        const zCountry = getOverridenZCountry();
         const searchParams = new URLSearchParams();
         if (zCountry) {
             searchParams.set('zCountry', zCountry);

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

@@ -1,4 +1,5 @@
 import { getGenericSettingsOverride } from "./getGenericSettingsOverride";
+import { getOverridenZCountry } from "../getOverridenZCountry";
 import { handleFetch } from "../handleFetch";
 import { log } from "../logging/log";
 import { logError } from "../logging/logError";
@@ -16,6 +17,10 @@ export const getZonosSettings = async () => {
     if (overrideSettings.overrideShouldEnabledCustomAddress) {
         params.set('overrideShouldEnabledCustomAddress', overrideSettings.overrideShouldEnabledCustomAddress);
     }
+    const zCountry = getOverridenZCountry();
+    if (zCountry) {
+        params.set('zCountry', zCountry);
+    }
     const { errors, json, zonosMode } = await handleFetch(`/api/zonos-elements/zonos-settings?${params.toString()}`);
     if (errors.length) {
         logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);

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

@@ -1,7 +1,9 @@
 import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
+import { localizationStore } from "../../store/hello/localization";
 import { storageStore } from "../../store/storageStore";
 import { extractName } from "../extractName";
+import { getOverridenZCountry } from "../getOverridenZCountry";
 import { log } from "../logging/log";
 /**
  * Extract value from translated object
@@ -52,6 +54,7 @@ export const prepCartCalculateLandedCost = (cartId) => {
     const { firstName: billingFirstName, lastName: billingLastName } = extractName({
         name: translatedBillingAddress.name,
     });
+    const checkoutSessionCountry = getOverridenZCountry() || 'US';
     return {
         billingAddress: {
             addressLine1: translatedBillingAddress.line1,
@@ -71,6 +74,9 @@ export const prepCartCalculateLandedCost = (cartId) => {
         // Use the first item's currency code
         cartCurrencyCode: (_a = cartStore.items[0]) === null || _a === void 0 ? void 0 : _a.currencyCode,
         cartId,
+        checkoutSessionCountry: checkoutSessionCountry ||
+            localizationStore.selectedCountryCode ||
+            undefined,
         checkoutSessionId: storageStore.checkoutSessionId || '',
         contact: {
             companyName: stripeStore.companyName,

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

@@ -1,5 +1,6 @@
 import { cartStore } from "../../store/checkout/cart";
 import { getDisplayCurrency } from "./getDisplayCurrency";
+import { applyInclusiveEffectiveRate } from "../hello/currencyConversion/applyInclusiveEffectiveRate";
 import { currencyFormat } from "../hello/currencyConversion/currencyFormat";
 /**
  * Unified currency rendering for checkout amounts.
@@ -8,12 +9,16 @@ import { currencyFormat } from "../hello/currencyConversion/currencyFormat";
 export const renderCheckoutCurrency = ({ amount, isForeign }) => {
     var _a, _b;
     const targetRate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+    // If the amount already in foreign currency, no need to apply the inclusive effective rate since it's already has the inclusive effective rate applied
+    const appliedAmount = isForeign
+        ? amount
+        : applyInclusiveEffectiveRate(amount);
     const presentmentCurrency = cartStore.currency;
     const itemCurrency = (_b = cartStore.items[0]) === null || _b === void 0 ? void 0 : _b.currencyCode;
     // If the item currency is the same as the presentment currency, we can just return the amount in the presentment currency in the same format
     if (itemCurrency === presentmentCurrency) {
         return currencyFormat({
-            amount,
+            amount: appliedAmount,
             currency: presentmentCurrency,
         });
     }
@@ -22,8 +27,8 @@ export const renderCheckoutCurrency = ({ amount, isForeign }) => {
     if (isForeign) {
         // Amount is in foreign currency, divide by the rate to convert it to the base currency if displaying in base currency
         const displayAmount = shouldDisplayBaseCurrency
-            ? amount / targetRate
-            : amount;
+            ? appliedAmount / targetRate
+            : appliedAmount;
         return currencyFormat({
             amount: displayAmount,
             currency: displayCurrency,
@@ -31,8 +36,8 @@ export const renderCheckoutCurrency = ({ amount, isForeign }) => {
     }
     // Amount is already in base currency, need to multiply rate to convert to foreign currency if display in foreign currency
     const displayAmount = shouldDisplayBaseCurrency
-        ? amount
-        : amount * targetRate;
+        ? appliedAmount
+        : appliedAmount * targetRate;
     return currencyFormat({
         amount: displayAmount,
         currency: displayCurrency,

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

@@ -44,7 +44,10 @@ export const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector
                 return;
             }
             // update the country code in localization store and check if it's shippable
-            localizationStoreUpdateSelectedCountryCode(shippingCountry);
+            localizationStoreUpdateSelectedCountryCode({
+                isInitializing: false,
+                newSelectedCountryCode: shippingCountry,
+            });
             // do nothing if the country is still domestic
             if (!isShippableCountry(false)) {
                 // cleanup the domestic shipping session if it's domestic because we will open the intl checkout after redirecting

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

@@ -0,0 +1,11 @@
+import { getZCountryUrlParam } from "./hello/getZCountryUrlParam";
+/**
+ * Retrieve the zCountry from the URL or session storage.
+ */
+export const getOverridenZCountry = () => {
+    const currentUrl = new URL(window.location.href);
+    // load and use country from session storage when zCountry query param is not present
+    const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
+    const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
+    return zCountry;
+};

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

@@ -0,0 +1,10 @@
+import { localizationStore } from "../store/hello/localization";
+import { DUTY_KEY, TAXES_KEY } from "../../constants/key";
+export const hasInclusivePrice = () => {
+    var _a;
+    return (_a = localizationStore.inclusivePricingConfigurations) === null || _a === void 0 ? void 0 : _a.some(x => {
+        var _a, _b;
+        return ((_a = x.configurations[DUTY_KEY]) === null || _a === void 0 ? void 0 : _a.status) === 'ENABLED' ||
+            ((_b = x.configurations[TAXES_KEY]) === null || _b === void 0 ? void 0 : _b.status) === 'ENABLED';
+    });
+};

package/dist/collection/components/utils/hello/currencyConversion/applyInclusiveEffectiveRate.js

@@ -0,0 +1,10 @@
+import { localizationStore } from "../../../store/hello/localization";
+export const applyInclusiveEffectiveRate = (amount) => {
+    const inclusivePrice = localizationStore.inclusivePricingConfigurations.find(x => x.shipToCountry === localizationStore.selectedCountryCode);
+    if (!inclusivePrice) {
+        return amount;
+    }
+    const effectiveRate = inclusivePrice.effectiveRate;
+    // Just multiply the amount by the effective rate to get the new amount for inclusive pricing
+    return amount * (1 + effectiveRate);
+};

package/dist/collection/components/utils/hello/currencyConversion/applyInclusivePrice.js

@@ -0,0 +1,39 @@
+import { localizationStore } from "../../../store/hello/localization";
+import { calculateInclusivePrice } from "./calculateInclusivePrice";
+import { DUTY_KEY, NON_ZONOS_FEE_KEY, TAXES_KEY, ZONOS_FEE_KEY, } from "../../../../constants/key";
+export const applyInclusivePrice = (amount) => {
+    const inclusivePrice = localizationStore.inclusivePricingConfigurations.find(x => x.shipToCountry === localizationStore.selectedCountryCode);
+    if (!inclusivePrice) {
+        return amount;
+    }
+    const dutyConfiguration = inclusivePrice.configurations[DUTY_KEY] || {
+        rate: 0,
+        status: 'DISABLED',
+    };
+    const taxConfiguration = inclusivePrice.configurations[TAXES_KEY] || {
+        rate: 0,
+        status: 'DISABLED',
+    };
+    const nonZonosFeeConfiguration = inclusivePrice.configurations[NON_ZONOS_FEE_KEY] || {
+        rate: 0,
+        status: 'DISABLED',
+    };
+    const zonosFeeConfiguration = inclusivePrice.configurations[ZONOS_FEE_KEY] || {
+        rate: 0,
+        status: 'DISABLED',
+    };
+    // Only use the rate if the configuration is enabled
+    const dutyRate = dutyConfiguration.status === 'ENABLED' ? dutyConfiguration.rate : 0;
+    const taxRate = taxConfiguration.status === 'ENABLED' ? taxConfiguration.rate : 0;
+    const nonZonosFeeRate = nonZonosFeeConfiguration.status === 'ENABLED'
+        ? nonZonosFeeConfiguration.rate
+        : 0;
+    const zonosFeeRate = zonosFeeConfiguration.status === 'ENABLED' ? zonosFeeConfiguration.rate : 0;
+    return calculateInclusivePrice({
+        amount,
+        dutyBuffer: dutyRate,
+        nonZonosFee: nonZonosFeeRate,
+        taxBuffer: taxRate,
+        zonosFee: zonosFeeRate,
+    });
+};

package/dist/collection/components/utils/hello/currencyConversion/calculateInclusivePrice.js

@@ -0,0 +1,32 @@
+/**
+ * Base item: $10
+ * Duty: 10%
+ * Taxes: 5%
+ * Zonos Fee: 14%
+ * Non-Zonos Fee: 7%
+ *
+ * Duty: $10 * 10% = $1
+ * Taxes: ($10 + $1) * 5% = $0.55
+ * Non-Zonos Fee: $10 * 7% = $0.7
+ * Zonos Fee: ($1 + $0.55 + $0.7) * 14% = $0.315
+ * Total: $10 + $1 + $0.55 + $0.7 + $0.315 = $12.565
+ *
+ * The calculation is performed as follows:
+ * - Duty: amount * dutyBuffer
+ * - Tax: (amount + duty) * taxBuffer
+ * - Non-Zonos Fee: amount * nonZonosFee
+ * - Zonos Fee: (duty + tax + nonZonosFee) * zonosFee
+ * - Total: amount + duty + tax + nonZonosFee + zonosFee
+ */
+export const calculateInclusivePrice = ({ amount, dutyBuffer, nonZonosFee, taxBuffer, zonosFee, }) => {
+    const dutyBufferedAmount = amount * dutyBuffer;
+    const taxBufferedAmount = (amount + dutyBufferedAmount) * taxBuffer;
+    const nonZonosFeeBufferedAmount = amount * nonZonosFee;
+    const zonosFeeBufferedAmount = (dutyBufferedAmount + taxBufferedAmount + nonZonosFeeBufferedAmount) *
+        zonosFee;
+    return (amount +
+        dutyBufferedAmount +
+        taxBufferedAmount +
+        nonZonosFeeBufferedAmount +
+        zonosFeeBufferedAmount);
+};

package/dist/collection/components/utils/hello/currencyConversion/defaultCurrencyConverter.js

@@ -1,12 +1,13 @@
 import { localizationStore } from "../../../store/hello/localization";
 import { zonosStore } from "../../../store/zonosStore";
+import { applyInclusiveEffectiveRate } from "./applyInclusiveEffectiveRate";
 import { currencyConvert } from "./currencyConvert";
 import { currencyConvertAndFormat } from "./currencyConvertAndFormat";
 import { currencyFormat } from "./currencyFormat";
 import { getCurrencyElements } from "./getCurrencyElements";
 import { getInitialElementAmount } from "./getInitialElementAmount";
 import { logError } from "../../logging/logError";
-import { performBlurCurrency, removeBlurCurrency, } from "../../../../utils/performBlurCurrency";
+import { performBlurSpecificElement, removeBlurSpecificElement, } from "../../../../utils/performBlurCurrency";
 const convertCurrency = (element) => {
     var _a;
     const amount = getInitialElementAmount(element);
@@ -31,18 +32,20 @@ const convertCurrency = (element) => {
             // Update currency when the country code changes
             currentCountryValue !== localizationStore.selectedCountryCode)) {
         // Hide the currency until DOM is ready to display the new value
-        performBlurCurrency();
+        const timeoutId = performBlurSpecificElement(element);
+        const appliedInclusivePrice = applyInclusiveEffectiveRate(amount);
         const customizedCurrencyFormat = typeof zonosStore.currencyConverter === 'function' &&
             zonosStore.currencyConverter({
                 convert: currencyConvert,
                 convertAndFormat: currencyConvertAndFormat,
                 currencyCode: localizationStore.targetCurrency,
                 format: (value) => currencyFormat({ amount: value }),
-                originalAmount: amount,
+                originalAmount: appliedInclusivePrice,
                 selector: element,
             });
         // default to the currencyConvertAndFormat if the currencyConverter function does not return a value, or invalid value. This is to make sure we don't break the merchant's price.
-        const observedFormattedValue = customizedCurrencyFormat || currencyConvertAndFormat(amount);
+        const observedFormattedValue = customizedCurrencyFormat ||
+            currencyConvertAndFormat(appliedInclusivePrice);
         if (observedFormattedValue !== element.textContent) {
             // Only set textContent if the value has changed, this is to prevent it redrawing the element if the value is the same
             element.textContent = observedFormattedValue;
@@ -52,9 +55,11 @@ const convertCurrency = (element) => {
         // save the new value to the data-zintl attribute
         element.setAttribute('data-zintl', observedFormattedValue);
         element.setAttribute('data-zcountry-code', localizationStore.selectedCountryCode || '');
+        void removeBlurSpecificElement({
+            specificSelector: element,
+            timeoutId,
+        });
     }
-    // Remove blur effect after the currency is converted
-    void removeBlurCurrency();
 };
 export const defaultCurrencyConverter = () => {
     const { currencyElementSelector } = zonosStore.helloSettings;

package/dist/collection/constants/key.js

@@ -0,0 +1,9 @@
+/**
+ * Since the backend and the frontend are using the same keys,
+ * make sure to not change the key value below since if it changes
+ * and the frontend script is cached, the formula may not work as expected.
+ */
+export const DUTY_KEY = 'gkjqw123';
+export const NON_ZONOS_FEE_KEY = 'jUwjs2Hs3';
+export const TAXES_KEY = 'Kq93wqw3';
+export const ZONOS_FEE_KEY = 'eius22kk';

package/dist/collection/types/InclusivePricing.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/InputFieldLabel.js

@@ -0,0 +1 @@
+export {};