@zonos/elements 1.3.21 → 1.3.23

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

@@ -1,10 +1,4 @@
 export const stringsPortuguese = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${percentage} de GST devido em qualquer pedido acima de ${threshold}, juntamente com uma taxa de transação de entrada de importação e cobrança de MPI.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: '${percentage} de GST devido em qualquer pedido acima de ${threshold}.',
-    },
     'Above de minimis threshold for': {
         value: 'Acima do limite de isenção para',
     },
@@ -131,8 +125,8 @@ export const stringsPortuguese = {
     'Order total': {
         value: 'Total do pedido',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: 'Pedidos para ${countryName} devem ser acima de ${threshold} para serem enviados.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: 'Pedidos para [countryName] devem ser acima de [threshold] para serem enviados.',
     },
     Pay: {
         value: 'Pagar',
@@ -239,8 +233,8 @@ export const stringsPortuguese = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'Enviamos um e-mail de confirmação com os detalhes do pedido para sua revisão. E nossa equipe está preparando cuidadosamente seu pedido para que ele chegue no prazo.',
     },
-    'Welcome to': {
-        value: 'Bem-vindo a',
+    'Welcome to [storeName]!': {
+        value: 'Bem-vindo ao [storeName]!',
     },
     'Welcome!': {
         value: 'Bem-vindo!',
@@ -257,6 +251,12 @@ export const stringsPortuguese = {
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: 'Seu pagamento foi processado com sucesso! Obrigado por comprar conosco! Esperamos que tenha tido uma experiência agradável e seu apoio significa muito para nós.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[percentage] de GST devido em qualquer pedido acima de [threshold], juntamente com uma taxa de transação de entrada de importação e cobrança de MPI.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: '[percentage] de GST devido em qualquer pedido acima de [threshold].',
+    },
     'business days': {
         value: 'dias úteis',
     },

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

@@ -1,10 +1,4 @@
 export const stringsRussian = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${percentage} НДС за любой заказ свыше ${threshold}, включая комиссию за ввозную транзакцию и сбор MPI.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: '${percentage} НДС за любой заказ свыше ${threshold}.',
-    },
     'Above de minimis threshold for': {
         value: 'Выше минимального порога для',
     },
@@ -131,8 +125,8 @@ export const stringsRussian = {
     'Order total': {
         value: 'Итого',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: 'Заказы в ${countryName} должны превышать ${threshold} для отправки.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: 'Заказы в [countryName] должны превышать [threshold] для отправки.',
     },
     Pay: {
         value: 'Оплатить',
@@ -239,8 +233,8 @@ export const stringsRussian = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'Мы отправили вам письмо с подтверждением заказа для проверки. Наша команда тщательно готовит ваш заказ к отправке в срок.',
     },
-    'Welcome to': {
-        value: 'Добро пожаловать в',
+    'Welcome to [storeName]!': {
+        value: 'Добро пожаловать в [storeName]!',
     },
     'Welcome!': {
         value: 'Добро пожаловать!',
@@ -257,6 +251,12 @@ export const stringsRussian = {
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: 'Оплата прошла успешно! Благодарим вас за покупку! Надеемся, вам понравилось, и ваша поддержка очень важна для нас.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[percentage] НДС за любой заказ свыше [threshold], включая комиссию за ввозную транзакцию и сбор MPI.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: '[percentage] НДС за любой заказ свыше [threshold].',
+    },
     'business days': {
         value: 'рабочих дней',
     },

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

@@ -1,10 +1,4 @@
 export const stringsSpanish = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${percentage} del IVA debido en cualquier pedido superior a ${threshold}, junto con una tarifa de transacción de entrada de importación y un gravamen MPI.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: 'El ${percentage} del IVA se debe en cualquier pedido superior a ${threshold}.',
-    },
     'Above de minimis threshold for': {
         value: 'Por encima del umbral mínimo para',
     },
@@ -131,8 +125,8 @@ export const stringsSpanish = {
     'Order total': {
         value: 'Total del pedido',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: 'Los pedidos a ${countryName} deben superar los ${threshold} para ser enviados.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: 'Los pedidos a [countryName] deben superar los [threshold] para ser enviados.',
     },
     Pay: {
         value: 'Pagar',
@@ -239,8 +233,8 @@ export const stringsSpanish = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'Le hemos enviado un correo electrónico de confirmación con los detalles del pedido para su revisión. Y nuestro equipo está preparando cuidadosamente su pedido para que llegue a tiempo.',
     },
-    'Welcome to': {
-        value: 'Bienvenido a',
+    'Welcome to [storeName]!': {
+        value: '¡Bienvenido a [storeName]!',
     },
     'Welcome!': {
         value: '¡Bienvenido!',
@@ -257,6 +251,12 @@ export const stringsSpanish = {
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: '¡Su pago se realizó exitosamente! Gracias por comprar con nosotros. Esperamos que haya tenido una experiencia agradable y su apoyo significa mucho para nosotros.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[percentage] del IVA debido en cualquier pedido superior a [threshold], junto con una tarifa de transacción de entrada de importación y un gravamen MPI.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: 'El [percentage] del IVA se debe en cualquier pedido superior a [threshold].',
+    },
     'business days': {
         value: 'días hábiles',
     },

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

@@ -1,10 +1,4 @@
 export const stringsSwedish = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${percentage} moms på varje beställning över ${threshold}, inklusive en importtransaktionsavgift och MPI-avgift.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: '${percentage} moms på varje beställning över ${threshold}.',
-    },
     'Above de minimis threshold for': {
         value: 'Över minimibeloppet för',
     },
@@ -131,8 +125,8 @@ export const stringsSwedish = {
     'Order total': {
         value: 'Totalt belopp för beställningen',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: 'Beställningar till ${countryName} måste överstiga ${threshold} för att skickas.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: 'Beställningar till [countryName] måste överstiga [threshold] för att skickas.',
     },
     Pay: {
         value: 'Betala',
@@ -239,8 +233,8 @@ export const stringsSwedish = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'Vi har skickat en e-postbekräftelse av beställningsuppgifterna för din granskning. Och vårt team förbereder noggrant din order så att den kommer i tid.',
     },
-    'Welcome to': {
-        value: 'Välkommen till',
+    'Welcome to [storeName]!': {
+        value: 'Välkommen till [storeName]!',
     },
     'Welcome!': {
         value: 'Välkommen!',
@@ -257,6 +251,12 @@ export const stringsSwedish = {
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: 'Din betalning gick igenom framgångsrikt! Tack för att du handlar med oss! Vi hoppas att du har haft en trevlig upplevelse och ditt stöd betyder mycket för oss.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[percentage] moms på varje beställning över [threshold], inklusive en importtransaktionsavgift och MPI-avgift.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: '[percentage] moms på varje beställning över [threshold].',
+    },
     'business days': {
         value: 'arbetsdagar',
     },

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

@@ -1,10 +1,4 @@
 export const stringsTurkish = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${threshold} üzerindeki her sipariş için ${percentage} KDV, ithalat giriş işlem ücreti ve MPI vergisi ile birlikte ödenir.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: '${threshold} üzerindeki her sipariş için ${percentage} KDV ödenir.',
-    },
     'Above de minimis threshold for': {
         value: 'Minimum sınırın üzerinde',
     },
@@ -131,8 +125,8 @@ export const stringsTurkish = {
     'Order total': {
         value: 'Sipariş toplamı',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: '${countryName} ülkesine yapılacak siparişlerin ${threshold} üzerinde olması gerekir.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: '[countryName] ülkesine yapılacak siparişlerin [threshold] üzerinde olması gerekir.',
     },
     Pay: {
         value: 'Öde',
@@ -239,8 +233,8 @@ export const stringsTurkish = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'Sipariş detaylarınızın onay e-postasını gönderdik. Ekibimiz siparişinizi özenle hazırlıyor, zamanında ulaşması için elimizden geleni yapıyoruz.',
     },
-    'Welcome to': {
-        value: 'Hoş geldiniz',
+    'Welcome to [storeName]!': {
+        value: "[storeName]'e hoş geldiniz!",
     },
     'Welcome!': {
         value: 'Hoş geldiniz!',
@@ -257,6 +251,12 @@ export const stringsTurkish = {
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: 'Ödemeniz başarıyla tamamlandı! Bizimle alışveriş yaptığınız için teşekkür ederiz! Keyifli bir deneyim yaşadığınızı umuyoruz ve desteğiniz bizim için çok değerli.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[threshold] üzerindeki her sipariş için [percentage] KDV, ithalat giriş işlem ücreti ve MPI vergisi ile birlikte ödenir.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: '[threshold] üzerindeki her sipariş için [percentage] KDV ödenir.',
+    },
     'business days': {
         value: 'iş günü',
     },

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

@@ -1,10 +1,4 @@
 export const stringsVietnamese = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${percentage} GST phải trả cho bất kỳ đơn hàng nào trên ${threshold}, cùng với phí giao dịch nhập khẩu và thuế MPI.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: '${percentage} GST phải trả cho bất kỳ đơn hàng nào trên ${threshold}.',
-    },
     'Above de minimis threshold for': {
         value: 'Vượt ngưỡng miễn thuế đối với',
     },
@@ -131,8 +125,8 @@ export const stringsVietnamese = {
     'Order total': {
         value: 'Tổng đơn hàng',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: 'Đơn hàng đến ${countryName} phải trên ${threshold} mới được gửi.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: 'Đơn hàng đến [countryName] phải trên [threshold] mới được gửi.',
     },
     Pay: {
         value: 'Thanh toán',
@@ -239,8 +233,8 @@ export const stringsVietnamese = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'Chúng tôi đã gửi email xác nhận chi tiết đơn hàng để bạn xem lại. Và đội ngũ của chúng tôi đang cẩn thận chuẩn bị đơn hàng của bạn để đảm bảo giao đúng hạn.',
     },
-    'Welcome to': {
-        value: 'Chào mừng đến với',
+    'Welcome to [storeName]!': {
+        value: 'Chào mừng đến với [storeName]!',
     },
     'Welcome!': {
         value: 'Chào mừng!',
@@ -257,6 +251,12 @@ export const stringsVietnamese = {
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: 'Thanh toán của bạn thành công! Cảm ơn bạn đã mua sắm với chúng tôi! Chúng tôi hy vọng bạn có trải nghiệm thú vị và sự ủng hộ của bạn thật sự ý nghĩa với chúng tôi.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[percentage] GST phải trả cho bất kỳ đơn hàng nào trên [threshold], cùng với phí giao dịch nhập khẩu và thuế MPI.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: '[percentage] GST phải trả cho bất kỳ đơn hàng nào trên [threshold].',
+    },
     'business days': {
         value: 'ngày làm việc',
     },

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

@@ -90,7 +90,7 @@ const translationStoreUpdateLanguage = (language) => {
  * Translate a string with variables if variable pattern is present in the string
  * @example
  * // Require variables:
- * translate('${percentage} GST due on any order above ${threshold}.', { percentage: '5%', threshold: '$100' })
+ * translate('[percentage] GST due on any order above [threshold].', { percentage: '5%', threshold: '$100' })
  * // No variables:
  * translate('Above de minimis threshold for')
  */
@@ -100,7 +100,7 @@ const translate = (...[key, replacement]) => {
         // replace all variables in the string
         let translatedString = ((_a = translationStore.translatedChunks[key]) === null || _a === void 0 ? void 0 : _a.value) || key;
         Object.entries(replacement).forEach(([replacementKey, replaceValue]) => {
-            translatedString = translatedString.replace(new RegExp(`\\$\\{${replacementKey}\\}`, 'g'), replaceValue);
+            translatedString = translatedString.replace(new RegExp(`\\[${replacementKey}\\]`, 'g'), replaceValue);
         });
         return translatedString;
     }

package/dist/collection/components/store/zonosStore.js

@@ -1,6 +1,6 @@
 import { createStore } from "@stencil/store";
 import { mergeConfig } from "../utils/mergeConfig";
-const { reset, state: zonosStore } = createStore(() => ({
+const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(() => ({
     appearance: {
         colorPrimary: 'white',
         fontFamily: 'Inter',
@@ -52,7 +52,6 @@ const { reset, state: zonosStore } = createStore(() => ({
         countryOverrideBehavior: 'URL_PARAM',
         currencyBehavior: 'ENABLED',
         currencyElementSelector: '.money',
-        dutyTaxEstimationBehavior: 'ENABLED',
         excludedUrlPatterns: [],
         homepageUrlPattern: '',
         mobileLocation: 'BOTTOM_RIGHT',
@@ -64,7 +63,6 @@ const { reset, state: zonosStore } = createStore(() => ({
         productDescriptionElementSelector: '',
         productDetailUrlPattern: '',
         productListUrlPattern: '',
-        productPriceElementSelector: '',
         productTitleElementSelector: '',
         restrictionBehavior: 'DISABLED',
     },
@@ -119,9 +117,10 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     zonosStore.storeId = ((_d = (_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.storeId) || null;
     zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
     zonosStore.onCountryChange = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.onCountryChange;
+    zonosStore.overrideCurrencyFormat = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.overrideCurrencyFormat;
 };
 const zonosStoreFontFamily = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';
     return fontFamily;
 };
-export { getZonosStoreTheme, zonosStore, zonosStoreFontFamily, zonosStoreInitSetting, };
+export { getZonosStoreTheme, zonosStore, zonosStoreDispose, zonosStoreFontFamily, zonosStoreInitSetting, };

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

@@ -1,22 +1,37 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
+const defaultUsExchangeRate = {
+    exchangeRate: {
+        rate: 1,
+        targetFormat: {
+            currencyCode: 'USD',
+            decimalDelimiter: '.',
+            scale: 2,
+            symbol: '$',
+            symbolLocation: 'before',
+            thousandsDelimiter: ',',
+        },
+    },
+    maxAge: null,
+};
 export const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCurrency, }) => {
     var _a;
-    // If source currency matches target currency (US -> US) and is not a guaranteed rate, return null
+    // If source currency matches target currency (US -> US) and is not a guaranteed rate, return default exchange rate so we still format properly.
     if (sourceCurrency === targetCurrency && !isGuaranteed) {
-        return { exchangeRate: null, maxAge: null };
+        return defaultUsExchangeRate;
     }
     const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
-        return { exchangeRate: null, maxAge: null };
+        return defaultUsExchangeRate;
     }
-    const { maxAge, rate, targetFormat } = json.exchangeRateCreate;
+    const { rate, targetFormat } = json.exchangeRateCreate;
+    const maxAge = json.maxAge;
     if (rate) {
         sessionStorage.setItem(country + '_rate', JSON.stringify(rate));
         const exchangeRate = { rate, targetFormat };
         return { exchangeRate, maxAge };
     }
-    return { exchangeRate: null, maxAge: null };
+    return defaultUsExchangeRate;
 };

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

@@ -2,6 +2,6 @@ import { currencyConvert } from "./currencyConvert";
 import { currencyFormat } from "./currencyFormat";
 export const currencyConvertAndFormat = (value) => {
     const convertedValue = currencyConvert(value);
-    const formattedValue = currencyFormat(convertedValue);
+    const formattedValue = currencyFormat({ amount: convertedValue });
     return formattedValue;
 };

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

@@ -1,22 +1,8 @@
 import { zonosStore } from "../../../store/zonosStore";
-import { currencyConvert } from "./currencyConvert";
-import { currencyConvertAndFormat } from "./currencyConvertAndFormat";
-import { currencyFormat } from "./currencyFormat";
 import { defaultCurrencyConverter } from "./defaultCurrencyConverter";
 export const currencyDisplay = () => {
     if (zonosStore.helloSettings.currencyBehavior === 'DISABLED') {
         return;
     }
-    const { currencyElementSelector } = zonosStore.helloSettings;
-    if (zonosStore.currencyConverter) {
-        zonosStore.currencyConverter({
-            convert: currencyConvert,
-            convertAndFormat: currencyConvertAndFormat,
-            format: currencyFormat,
-            selector: currencyElementSelector,
-        });
-    }
-    else {
-        defaultCurrencyConverter();
-    }
+    defaultCurrencyConverter();
 };

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

@@ -1,32 +1,47 @@
 import { localizationStore } from "../../../store/hello/localization";
-export const currencyFormat = (value) => {
-    if (!value || isNaN(value)) {
+import { zonosStore } from "../../../store/zonosStore";
+export const currencyFormat = ({ amount, currency, }) => {
+    if (isNaN(amount) || (amount !== 0 && !amount)) {
         return '';
     }
+    const overrideCurrencyFormat = zonosStore.overrideCurrencyFormat;
     const { exchangeRate } = localizationStore;
+    const targetCurrency = currency || localizationStore.targetCurrency;
+    // Use user-defined currency format
+    if (typeof overrideCurrencyFormat === 'function') {
+        return overrideCurrencyFormat({
+            amount: amount,
+            countryCode: targetCurrency,
+        });
+    }
     const { targetFormat } = exchangeRate || {};
-    if (!targetFormat) {
-        return value.toString();
+    if (!targetFormat || !exchangeRate) {
+        // Return the amount as a string if no exchange rate is available
+        return `${amount.toString()} ${targetCurrency}`;
     }
-    const minimumFractionDigits = (exchangeRate === null || exchangeRate === void 0 ? void 0 : exchangeRate.targetFormat.scale) || 2;
-    // browsers can autoformat the currency based on the users language setting
-    // unless the browser is Internet Explorer, because Internet Explorer is stupid
+    const minimumFractionDigits = targetFormat.scale || 2;
     const isIE = window.navigator.userAgent.indexOf('MSIE ') !== -1;
     const numberFormatExists = typeof Intl === 'object' && Intl && typeof Intl.NumberFormat === 'function';
-    if (!isIE && numberFormatExists) {
-        return new Intl.NumberFormat(window.navigator.language, {
-            currency: targetFormat.currencyCode,
-            minimumFractionDigits: minimumFractionDigits,
-            style: 'currency',
-        }).format(value);
-    }
-    else {
-        let formattedNumber = Number(value)
+    if (isIE || !numberFormatExists) {
+        // use native number formatting if it's IE.
+        const formattedNumber = Number(amount)
             .toFixed(minimumFractionDigits)
             .replace('.', '|dec|')
             .replace(',', targetFormat.thousandsDelimiter || '')
             .replace('|dec|', targetFormat.decimalDelimiter || '');
-        const result = `${targetFormat.symbol}${formattedNumber}${targetFormat.currencyCode !== 'USD' ? ` ${targetFormat.currencyCode}` : ''}`;
+        const result = `${formattedNumber}${targetFormat.currencyCode !== 'USD' ? ` ${targetFormat.currencyCode}` : ''}`;
         return result;
     }
+    const currencyDisplay = (overrideCurrencyFormat === null || overrideCurrencyFormat === void 0 ? void 0 : overrideCurrencyFormat.currencyDisplay) || 'symbol';
+    const formatedNumber = new Intl.NumberFormat(window.navigator.language, {
+        currency: targetCurrency,
+        currencyDisplay,
+        minimumFractionDigits: minimumFractionDigits,
+        style: 'currency',
+    }).format(amount);
+    // Move currency code to the end of the string if currencyDisplay is 'code'
+    const result = currencyDisplay === 'code'
+        ? `${formatedNumber.replace(new RegExp(`${targetCurrency}\\s+`), '')} ${targetCurrency}`
+        : formatedNumber;
+    return result;
 };

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

@@ -1,6 +1,8 @@
 import { localizationStore } from "../../../store/hello/localization";
 import { zonosStore } from "../../../store/zonosStore";
+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";
@@ -11,16 +13,36 @@ const convertCurrency = (element) => {
         return;
     }
     const currentIntlValue = element.getAttribute('data-zintl');
+    // get rate
+    const currentIntlRateValue = parseFloat(element.getAttribute('data-zrate') || '1');
     const currentCountryValue = element.getAttribute('data-zcountry-code');
     // do nothing if the target currency is the same
-    const isExchangeRateReady = localizationStore.targetCurrency ===
-        ((_a = localizationStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.targetFormat.currencyCode);
+    const isExchangeRateReady = localizationStore.exchangeRate &&
+        localizationStore.targetCurrency ===
+            localizationStore.exchangeRate.targetFormat.currencyCode;
+    const rate = ((_a = localizationStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
     // if the current value on the element is different from the current intl value, update the data-zintl attribute
     if (isExchangeRateReady &&
+        // Update currency if the value is not yet formatted
         (element.textContent !== currentIntlValue ||
+            // Update rate when new rate is available
+            rate !== currentIntlRateValue ||
+            // Update currency when the country code changes
             currentCountryValue !== localizationStore.selectedCountryCode)) {
-        const observedFormattedValue = currencyConvertAndFormat(amount);
+        const customizedCurrencyFormat = typeof zonosStore.currencyConverter === 'function' &&
+            zonosStore.currencyConverter({
+                convert: currencyConvert,
+                convertAndFormat: currencyConvertAndFormat,
+                currencyCode: localizationStore.targetCurrency,
+                format: (value) => currencyFormat({ amount: value }),
+                originalAmount: amount,
+                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);
         element.textContent = observedFormattedValue;
+        // save the new rate to the data-zrate attribute
+        element.setAttribute('data-zrate', rate.toString());
         // save the new value to the data-zintl attribute
         element.setAttribute('data-zintl', observedFormattedValue);
         element.setAttribute('data-zcountry-code', localizationStore.selectedCountryCode || '');
@@ -37,7 +59,7 @@ export const defaultCurrencyConverter = () => {
         logError('Could not display currency. Exchange rate and format data is not available.');
         return;
     }
-    currencyElements.forEach((element) => {
+    currencyElements.forEach(element => {
         // convert the currency and save the formatted value to the data-zintl attribute
         convertCurrency(element);
     });

package/dist/collection/components/utils/hello/initHello.js

@@ -72,9 +72,11 @@ export const initHello = async (helloSettings) => {
             childList: true,
             subtree: true,
         });
-        // kill observer after 5 seconds if the hello still not injected, if the hello still not injected after 10 seconds, it's likely that the selector the user doesn't want to use hello
+        // kill observer after 1 second if the hello still not injected, if the hello still not injected after 1 second, it's likely that the selector the user doesn't want to use hello
         setTimeout(() => {
             observer.disconnect();
-        }, 5000);
+            // inject hello to mobile anchor if hello is still not found
+            injectHelloComponent(mobileHelloAnchor);
+        }, 1000);
     }
 };

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

@@ -0,0 +1,5 @@
+import { isDarkColor } from "./isDarkColor";
+// This is to determine if variable of the element is using dark theme, so we can invert the color if needed
+export const isElementUsingDarkTheme = (element) => isDarkColor(window
+    .getComputedStyle(element)
+    .getPropertyValue('--zonos-elements-gray-0'));

package/dist/collection/scripts/_zonosBase.js

@@ -46,7 +46,7 @@ Zonos.modeAlerted = false;
 Zonos.tempCartData = null;
 Zonos.getCurrentTimestamp = () => new Date().getTime();
 Zonos.zonosController = null;
-Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, onCountryChange, storeId, zonosApiKey, }) => {
+Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, onCountryChange, overrideCurrencyFormat, storeId, zonosApiKey, }) => {
     if (_a.doneInit) {
         // do nothing if zonos is already initializeds
         return;
@@ -75,6 +75,7 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
             currencyConverter,
             helloSettings,
             onCountryChange,
+            overrideCurrencyFormat,
         },
         zonosApiKey,
     });

package/dist/collection/types/ILanguage.js

@@ -7,11 +7,11 @@ export const languages = [
     { code: 'it', label: 'Italian', translatedLabel: 'Italiano' },
     { code: 'pl', label: 'Polish', translatedLabel: 'Polskie' },
     { code: 'ar', label: 'Arabic', translatedLabel: 'عربى' },
-    { code: 'de', label: 'German', translatedLabel: 'Deutsche' },
+    { code: 'de', label: 'German', translatedLabel: 'Deutsch' },
     { code: 'ja', label: 'Japanese', translatedLabel: '日本語' },
     { code: 'no', label: 'Norwegian', translatedLabel: 'norsk' },
     { code: 'vi', label: 'Vietnamese', translatedLabel: 'Tiếng Việt' },
-    { code: 'tr', label: 'Turkish', translatedLabel: 'Türk' },
+    { code: 'tr', label: 'Turkish', translatedLabel: 'Türkçe' },
     { code: 'he', label: 'Hebrew', translatedLabel: 'עִברִית' },
     { code: 'fr', label: 'French', translatedLabel: 'Français' },
     { code: 'nl', label: 'Dutch', translatedLabel: 'Nederlands' },

package/dist/esm/{ILanguage-97790bee.js → ILanguage-cd6acb72.js}

@@ -7,11 +7,11 @@ const languages = [
     { code: 'it', label: 'Italian', translatedLabel: 'Italiano' },
     { code: 'pl', label: 'Polish', translatedLabel: 'Polskie' },
     { code: 'ar', label: 'Arabic', translatedLabel: 'عربى' },
-    { code: 'de', label: 'German', translatedLabel: 'Deutsche' },
+    { code: 'de', label: 'German', translatedLabel: 'Deutsch' },
     { code: 'ja', label: 'Japanese', translatedLabel: '日本語' },
     { code: 'no', label: 'Norwegian', translatedLabel: 'norsk' },
     { code: 'vi', label: 'Vietnamese', translatedLabel: 'Tiếng Việt' },
-    { code: 'tr', label: 'Turkish', translatedLabel: 'Türk' },
+    { code: 'tr', label: 'Turkish', translatedLabel: 'Türkçe' },
     { code: 'he', label: 'Hebrew', translatedLabel: 'עִברִית' },
     { code: 'fr', label: 'French', translatedLabel: 'Français' },
     { code: 'nl', label: 'Dutch', translatedLabel: 'Nederlands' },