@zonos/elements 1.3.217 → 1.3.219

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

@@ -5,6 +5,9 @@ export const stringsTurkish = {
     ' (Duties prepaid)': {
         value: ' (Gümrük vergileri önceden ödenmiş)',
     },
+    'A confirmation email with your payment details has been sent for your records. If you have any questions or need support, our team is here to help.': {
+        value: 'Ödeme detaylarınızla birlikte bir onay e-postası kayıtlarınız için gönderildi. Herhangi bir sorunuz veya desteğe ihtiyacınız varsa, ekibimiz size yardımcı olmaya hazır.',
+    },
     'Above de minimis threshold for': {
         value: 'Minimum sınırın üzerinde',
     },
@@ -59,6 +62,9 @@ export const stringsTurkish = {
     'Billing address': {
         value: 'Fatura Adresi',
     },
+    'Billing info': {
+        value: 'Fatura bilgileri',
+    },
     'By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.': {
         value: 'USD ile ödeme yaparak, kartınız doğrudan para birimi dönüştürmesi olmadan ücretlendirilir. Ancak, USD bazlı olmayan bir kart kullanmak, banka düzeyinde ek para birimi dönüştürme ücretlerine neden olabilir.',
     },
@@ -101,6 +107,9 @@ export const stringsTurkish = {
     'Company name (optional)': {
         value: 'Şirket adı (isteğe bağlı)',
     },
+    'Confirmation #:[confirmationId]': {
+        value: 'Onay #:[confirmationId]',
+    },
     Contact: {
         value: 'İletişim',
     },
@@ -125,6 +134,12 @@ export const stringsTurkish = {
     'Customer information': {
         value: 'Müşteri bilgileri',
     },
+    'Customs fees for your recent purchase from [companyName] are ready for payment': {
+        value: '[companyName] şirketinden yaptığınız son satın alma için gümrük ücretleri ödemeye hazır',
+    },
+    'Customs fees total': {
+        value: 'Gümrük ücretleri toplamı',
+    },
     Delivery: {
         value: 'Teslimat',
     },
@@ -170,6 +185,9 @@ export const stringsTurkish = {
     'Due to the VOEC tax law, all orders will be assessed at [percentage] VAT regardless of order total.': {
         value: 'VOEC vergi yasası nedeniyle, tüm siparişler sipariş toplamına bakılmaksızın [percentage] KDV ile değerlendirilecektir.',
     },
+    Duties: {
+        value: 'Görevler',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Ürünlere ve kargoya vergi ve gümrük vergisi uygulanacak.',
     },
@@ -209,6 +227,9 @@ export const stringsTurkish = {
     Failure: {
         value: 'Başarısızlık',
     },
+    Fees: {
+        value: 'Ücretler',
+    },
     'First name': {
         value: 'Ad',
     },
@@ -236,6 +257,9 @@ export const stringsTurkish = {
     'Invalid promo code': {
         value: 'Geçersiz promosyon kodu',
     },
+    'Invalid session': {
+        value: 'Geçersiz oturum',
+    },
     Island: {
         value: 'Ada',
     },
@@ -308,9 +332,15 @@ export const stringsTurkish = {
     'Order complete!': {
         value: 'Sipariş tamamlandı!',
     },
+    'Order details': {
+        value: 'Sipariş detayları',
+    },
     'Order total': {
         value: 'Sipariş toplamı',
     },
+    'Ordered from': {
+        value: 'Sipariş edilen',
+    },
     'Orders to [countryName] must be over [threshold] to ship.': {
         value: '[countryName] ülkesine yapılacak siparişlerin [threshold] üzerinde olması gerekir.',
     },
@@ -332,6 +362,9 @@ export const stringsTurkish = {
     'Payment failed': {
         value: 'Ödeme başarısız',
     },
+    'Payment failed. Please reload the page and try another payment method.': {
+        value: 'Ödeme başarısız oldu. Lütfen sayfayı yeniden yükleyin ve başka bir ödeme yöntemi deneyin.',
+    },
     'Payment failed. Please try another payment method.': {
         value: 'Ödeme başarısız. Lütfen başka bir ödeme yöntemi deneyin.',
     },
@@ -452,6 +485,9 @@ export const stringsTurkish = {
     'Select a language': {
         value: 'Bir dil seçin',
     },
+    'Session does not have valid landed cost. Please contact [organizationName] for assistance.': {
+        value: 'Oturumun geçerli bir iniş maliyeti yok. Yardım için lütfen [organizationName] ile iletişime geçin.',
+    },
     'Session timed out': {
         value: 'Oturum zaman aşımına uğradı',
     },
@@ -512,12 +548,18 @@ export const stringsTurkish = {
     'Street or avenue': {
         value: 'Cadde veya bulvar',
     },
+    Subtotal: {
+        value: 'Ara toplam',
+    },
     Success: {
         value: 'Başarı',
     },
     'Tax id is required': {
         value: 'Vergi kimliği gereklidir',
     },
+    Taxes: {
+        value: 'Vergiler',
+    },
     'Taxes and fees': {
         value: 'Vergiler ve ücretler',
     },
@@ -530,6 +572,9 @@ export const stringsTurkish = {
     'Test mode': {
         value: 'Test modu',
     },
+    'Thank you for submitting your payment. We appreciate your prompt attention.': {
+        value: 'Ödemenizi gönderdiğiniz için teşekkür ederiz. Hızlı dikkatiniz için minnettarız.',
+    },
     'The field is incomplete': {
         value: 'Alan eksik',
     },
@@ -551,6 +596,9 @@ export const stringsTurkish = {
     'To ensure delivery all address details must be in Latin characters.': {
         value: 'Teslimatı sağlamak için tüm adres detaylarının Latin karakterleriyle olması gerekir.',
     },
+    'Total paid': {
+        value: 'Toplam ödenen',
+    },
     Town: {
         value: 'Kasaba',
     },

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

@@ -5,6 +5,9 @@ export const stringsVietnamese = {
     ' (Duties prepaid)': {
         value: ' (Thuế đã trả trước)',
     },
+    'A confirmation email with your payment details has been sent for your records. If you have any questions or need support, our team is here to help.': {
+        value: 'Một email xác nhận với chi tiết thanh toán của bạn đã được gửi để lưu trữ. Nếu bạn có bất kỳ câu hỏi nào hoặc cần hỗ trợ, đội ngũ của chúng tôi luôn sẵn sàng giúp đỡ.',
+    },
     'Above de minimis threshold for': {
         value: 'Vượt ngưỡng miễn thuế đối với',
     },
@@ -59,6 +62,9 @@ export const stringsVietnamese = {
     'Billing address': {
         value: 'Địa chỉ thanh toán',
     },
+    'Billing info': {
+        value: 'Thông tin thanh toán',
+    },
     'By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.': {
         value: 'Bằng cách thanh toán bằng USD, thẻ của bạn sẽ bị tính phí trực tiếp mà không cần chuyển đổi tiền tệ. Tuy nhiên, sử dụng thẻ không dựa trên USD có thể dẫn đến phí chuyển đổi tiền tệ bổ sung ở cấp ngân hàng.',
     },
@@ -101,6 +107,9 @@ export const stringsVietnamese = {
     'Company name (optional)': {
         value: 'Tên công ty (tùy chọn)',
     },
+    'Confirmation #:[confirmationId]': {
+        value: 'Xác nhận #:[confirmationId]',
+    },
     Contact: {
         value: 'Liên hệ',
     },
@@ -125,6 +134,12 @@ export const stringsVietnamese = {
     'Customer information': {
         value: 'Thông tin khách hàng',
     },
+    'Customs fees for your recent purchase from [companyName] are ready for payment': {
+        value: 'Phí hải quan cho lần mua gần đây của bạn từ [companyName] đã sẵn sàng để thanh toán',
+    },
+    'Customs fees total': {
+        value: 'Tổng phí hải quan',
+    },
     Delivery: {
         value: 'Giao hàng',
     },
@@ -170,6 +185,9 @@ export const stringsVietnamese = {
     'Due to the VOEC tax law, all orders will be assessed at [percentage] VAT regardless of order total.': {
         value: 'Do luật thuế VOEC, tất cả các đơn hàng sẽ được đánh giá với [percentage] VAT bất kể tổng đơn hàng.',
     },
+    Duties: {
+        value: 'Nhiệm vụ',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Thuế và phí sẽ được áp dụng cho hàng hóa và vận chuyển.',
     },
@@ -209,6 +227,9 @@ export const stringsVietnamese = {
     Failure: {
         value: 'Thất bại',
     },
+    Fees: {
+        value: 'Phí',
+    },
     'First name': {
         value: 'Tên',
     },
@@ -236,6 +257,9 @@ export const stringsVietnamese = {
     'Invalid promo code': {
         value: 'Mã khuyến mãi không hợp lệ',
     },
+    'Invalid session': {
+        value: 'Phiên không hợp lệ',
+    },
     Island: {
         value: 'Đảo',
     },
@@ -308,9 +332,15 @@ export const stringsVietnamese = {
     'Order complete!': {
         value: 'Đơn hàng đã hoàn thành!',
     },
+    'Order details': {
+        value: 'Chi tiết đơn hàng',
+    },
     'Order total': {
         value: 'Tổng đơn hàng',
     },
+    'Ordered from': {
+        value: 'Đặt hàng từ',
+    },
     '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.',
     },
@@ -332,6 +362,9 @@ export const stringsVietnamese = {
     'Payment failed': {
         value: 'Thanh toán thất bại',
     },
+    'Payment failed. Please reload the page and try another payment method.': {
+        value: 'Thanh toán thất bại. Vui lòng tải lại trang và thử phương thức thanh toán khác.',
+    },
     'Payment failed. Please try another payment method.': {
         value: 'Thanh toán thất bại. Vui lòng thử phương thức thanh toán khác.',
     },
@@ -452,6 +485,9 @@ export const stringsVietnamese = {
     'Select a language': {
         value: 'Chọn một ngôn ngữ',
     },
+    'Session does not have valid landed cost. Please contact [organizationName] for assistance.': {
+        value: 'Phiên không có chi phí hạ cánh hợp lệ. Vui lòng liên hệ [organizationName] để được hỗ trợ.',
+    },
     'Session timed out': {
         value: 'Phiên đã hết hạn',
     },
@@ -512,12 +548,18 @@ export const stringsVietnamese = {
     'Street or avenue': {
         value: 'Đường phố hoặc đại lộ',
     },
+    Subtotal: {
+        value: 'Tổng phụ',
+    },
     Success: {
         value: 'Thành công',
     },
     'Tax id is required': {
         value: 'Yêu cầu mã số thuế',
     },
+    Taxes: {
+        value: 'Thuế',
+    },
     'Taxes and fees': {
         value: 'Thuế và phí',
     },
@@ -530,6 +572,9 @@ export const stringsVietnamese = {
     'Test mode': {
         value: 'Chế độ kiểm tra',
     },
+    'Thank you for submitting your payment. We appreciate your prompt attention.': {
+        value: 'Cảm ơn bạn đã gửi thanh toán của mình. Chúng tôi đánh giá cao sự chú ý kịp thời của bạn.',
+    },
     'The field is incomplete': {
         value: 'Trường chưa hoàn thành',
     },
@@ -551,6 +596,9 @@ export const stringsVietnamese = {
     'To ensure delivery all address details must be in Latin characters.': {
         value: 'Để đảm bảo giao hàng, tất cả chi tiết địa chỉ phải bằng ký tự Latinh.',
     },
+    'Total paid': {
+        value: 'Tổng số đã trả',
+    },
     Town: {
         value: 'Thị trấn',
     },

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

@@ -19,7 +19,7 @@ import { stringsSpanish } from "./translationStore/strings.spanish";
 import { stringsSwedish } from "./translationStore/strings.swedish";
 import { stringsTurkish } from "./translationStore/strings.turkish";
 import { stringsVietnamese } from "./translationStore/strings.vietnamese";
-const { state: translationStore } = createStore(() => ({
+const { onChange: translationStoreOnChange, state: translationStore } = createStore(() => ({
     translatedChunks: stringsBase,
 }));
 export { translationStore };
@@ -107,3 +107,4 @@ export const translate = (...[key, replacement]) => {
     }
     return ((_b = translationStore.translatedChunks[key]) === null || _b === void 0 ? void 0 : _b.value) || key;
 };
+export { translationStoreOnChange };

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import throttle from "lodash/throttle";
-import { stripeStore, stripeStorePrefetchLandedCost, } from "../../store/checkout/stripe";
+import { stripeStore, stripeStoreOnChange, stripeStorePrefetchLandedCost, } from "../../store/checkout/stripe";
 import { getFallbackDefaultCountryCode, localizationStore, } from "../../store/hello/localization";
 import { storageStore, storageStoreOnChange, } from "../../store/storageStore";
 import { translate } from "../../store/translationStore";
@@ -8,6 +8,7 @@ import { zonosStore } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { shouldRenderTaxIdInput } from "../../utils/checkout/shouldRenderTaxIdInput";
+import { classes } from "../../utils/classes";
 import { extractName } from "../../utils/extractName";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
@@ -17,7 +18,7 @@ import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout
  */
 export class ZonosAddress {
     constructor() {
-        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
+        this.storeUnsubscribeList = [];
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -53,14 +54,6 @@ export class ZonosAddress {
          */
         this.trackingSent = false;
         this.prefetchLandedCost = throttle(stripeStorePrefetchLandedCost, 1000);
-        this.onStoreCheckoutSessionIdChanged = () => {
-            const onCheckoutSessionIdChange = () => {
-                this.checkoutSessionId = storageStore.checkoutSessionId;
-            };
-            // Trigger it once on init because onChange doesn't get triggered on initial load
-            onCheckoutSessionIdChange();
-            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
-        };
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -270,12 +263,14 @@ export class ZonosAddress {
             } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
     }
     renderCompanyNameInput() {
-        // No need to render company name for billing address
-        if (this.type === 'billing') {
+        // No need to render company name for billing address (only allow for Collect)
+        if (this.type === 'billing' && !window.Zonos.isCollect) {
             return null;
         }
-        // only render the company input if the setting is enabled
-        const isCompanyNameEnabled = zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED';
+        // only render the company input if the setting is enabled or the cart is collect
+        const isCompanyNameEnabled = zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED' ||
+            !!window.Zonos.isCollect;
+        // No need to render company name for billing address (only allow for Collect)
         if (!isCompanyNameEnabled) {
             return null;
         }
@@ -287,8 +282,11 @@ export class ZonosAddress {
         // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
         const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
         stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
-        // cleanup checkout session id subscription
-        this.onStoreCheckoutSessionIdChangedSubscription();
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
@@ -297,7 +295,22 @@ export class ZonosAddress {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
-        this.onStoreCheckoutSessionIdChanged();
+        this.checkoutSessionId = storageStore.checkoutSessionId;
+        this.storeUnsubscribeList = [
+            storageStoreOnChange('checkoutSessionId', () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            }),
+            stripeStoreOnChange('stripeElements', () => {
+                if (this.type === 'shipping') {
+                    void this.watchInitStripe();
+                }
+            }),
+            stripeStoreOnChange('stripeElementsForBillingAddress', () => {
+                if (this.type === 'billing') {
+                    void this.watchInitStripe();
+                }
+            }),
+        ];
     }
     render() {
         var _a;
@@ -306,7 +319,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: '13b9fdc214b7ffeacaa180f1ba0d49032b417b6f', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '7a6ec3c462293e85926b0f379860d8d4edfe6120', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '36c094186e6ce2ce1d1c4e8f56823fd032b3ad9e', class: "zonos--address-component" })));
+        return (h(Host, { key: 'ef89e6e083ce9c9bed0bed4653cbc40d451456c0', class: classes([
+                'zonos--address',
+                'zonos--elements',
+                `zonos--${this.type}-address`,
+            ]) }, this.titleText && (h("zonos-text", { key: '62e73e9284617c5e4f78f25f7160bb4e23246554', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: 'b268422f6e4aa09e74ebac9d3a4c0d7a6594e95e', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

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

@@ -78,9 +78,9 @@ export class ZonosAddressSuggestions {
         return segments;
     }
     render() {
-        return (h(Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '3f22f5bcf968d02e34fe46101b8ea4cf4e89051f', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'f7ac29ef14417f8c86dbafcf840204f4c964b3ad', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '13d34e64d8bd7711268a1f5641d0c868a89b949c', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '00f20bd5568762ee581462826410031273e808da', class: "powered-by-container" }, h("zonos-text", { key: 'fc61a8ec973fc2cdf1e137563617cfed0badbb12', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '96343fe696ec0d3990ffebaf450306ca91624d04', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'e7c6a9e64c8976a3c3a521b0794d2e82c1919ce2', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: 'fc77bda0480b2b2ef0d2b89cc36413d56f84f90b', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '0981dd0c7e522605417fb72c61d88bde629fada4', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: 'c307293f2d06cb7ea0e9c8d6ee0dd9b017ff2e5e', class: "powered-by-container" }, h("zonos-text", { key: 'a0776ea17615339f10ea7d623a40d9de90fcdbb4', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '6ffdc7d0475a8718372c760b51f2128b0b81e78e', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '6c168c20f1906ba4658998c7bd1e0b0eba860da1', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events

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

@@ -894,10 +894,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: '9e1d9e1ed3fca30876ba8310510873a5b10c6552', class: classes([
+        return (h(Host, { key: '29e26b9b269ea277ae508671f0c63483910ad50b', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '2356d42946b3ed93c4670fb876101a1371ac5c14', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: 'db6f6cb94da02e5f2c9aca8112ab20e11148281e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h, Host, } from "@stencil/core";
 import { cartStore } from "../../store/checkout/cart";
-import { stripeStore } from "../../store/checkout/stripe";
+import { stripeStore, stripeStoreOnChange, } from "../../store/checkout/stripe";
 import { translate } from "../../store/translationStore";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { log } from "../../utils/logging/log";
@@ -12,6 +12,7 @@ import { validateEmailValue } from "../../utils/validateEmailValue";
  */
 export class ZonosLinkAuthentication {
     constructor() {
+        this.storeUnsubscribeList = [];
         /**
          * Default email for stripe
          */
@@ -108,7 +109,19 @@ export class ZonosLinkAuthentication {
             void this.watchInitStripe();
         }, 5);
     }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
     componentDidLoad() {
+        this.storeUnsubscribeList = [
+            stripeStoreOnChange('stripeElements', () => {
+                void this.watchInitStripe();
+            }),
+        ];
         // @Watch doesn't get trigger on initial load
         this.watchInitStripe();
         if (!this.defaultEmail) {
@@ -141,7 +154,7 @@ export class ZonosLinkAuthentication {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
         return (h(Host, { class: "zonos--link-authentication zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), renderEmailAddress(), this.isEmailError && (h("zonos-text", { textColor: "red-600" }, translate('Please enter a valid email address.')))));
+            } }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), renderEmailAddress(), this.isEmailError && (h("zonos-text", { textColor: "red-600" }, translate('Please enter a valid email address.')))));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

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

@@ -57,7 +57,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: '7210a20afba18d167a6e7d875ba23daa0db774e4', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '4f043b3149cca48d2f4463a826541ebe35d0b6ca', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '15721e208e90b969c075877680a02dca5bb81689', class: "zonos--payment-component" }), h("div", { key: '36d5767821464db479feff18e6368e862550c777', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '1828cd97531009303635ded8725233c07e45fba3', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '899f8ef9f1e008a8d613e54fd1196c1bab7cefdc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '9e9b67bd29a4caf71a6f34fba03c67cbff03b0c7', class: "zonos--payment-component" }), h("div", { key: '1aeb4114ca6eac6541e0bafe72077093bdfb777e', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,15 @@
+const injectCheckoutElement = () => {
+    // append checkout component if doesn't exist
+    const collectElement = document.querySelector('zonos-collect');
+    if (!collectElement) {
+        const newCollectElement = document.createElement('zonos-collect');
+        document.body.appendChild(newCollectElement);
+    }
+};
+export const initCollect = () => {
+    // allow to load checkout if cartData is ready (Checkout can be loaded right away if tempCartUUID is in the URL)
+    if (!window.Zonos.cartData) {
+        return;
+    }
+    injectCheckoutElement();
+};

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

@@ -0,0 +1,10 @@
+export const collectTabletBreakpoint = 1024;
+export const collectMobileBreakpoint = 768;
+export const isCollectTablet = (isTablet) => {
+    return (isTablet ||
+        (window.innerWidth < collectTabletBreakpoint &&
+            window.innerWidth >= collectMobileBreakpoint));
+};
+export const isCollectMobile = (isMobile) => {
+    return isMobile || window.innerWidth < collectMobileBreakpoint;
+};

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

@@ -6,8 +6,17 @@ import { currencyFormat } from "../hello/currencyConversion/currencyFormat";
  * @note This is only to display, not for calculations.
  */
 export const renderCheckoutCurrency = ({ amount, isForeign }) => {
-    var _a;
+    var _a, _b;
     const targetRate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+    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,
+            currency: presentmentCurrency,
+        });
+    }
     const shouldDisplayBaseCurrency = cartStore.displayBaseCurrency;
     const displayCurrency = getDisplayCurrency();
     if (isForeign) {

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

@@ -1,4 +1,4 @@
-const fallbackApiType = ['vercel', 'cloudflare'];
+const fallbackApiType = ['cloudflare', 'vercel'];
 export const MAIN_BASE_API_TYPE = fallbackApiType[0];
 export const fallbackApiList = {
     cloudflare: process.env.NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL,

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

@@ -194,6 +194,7 @@ const handleRequestWithFallback = async ({ basePathType: _basePathType, options,
                 nextFallbackApiType,
                 requestHeaders: options === null || options === void 0 ? void 0 : options.headers,
                 requestPayload: jsonParse((_a = options === null || options === void 0 ? void 0 : options.body) === null || _a === void 0 ? void 0 : _a.toString()) || ((_b = options === null || options === void 0 ? void 0 : options.body) === null || _b === void 0 ? void 0 : _b.toString()),
+                shouldCallFallback,
                 status: response === null || response === void 0 ? void 0 : response.status,
                 statusText: response === null || response === void 0 ? void 0 : response.statusText,
             },

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

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+export const renderFallback = ({ content, isLoading, skeletonHeight, skeletonWidth, }) => {
+    if (isLoading) {
+        return (h("zonos-skeleton", { skeletonHeight: skeletonHeight, skeletonWidth: skeletonWidth }));
+    }
+    return content;
+};

package/dist/collection/scripts/_getZonosQaUrl.js

@@ -24,7 +24,11 @@ export const getZonosQaUrl = () => {
     }
     // when local demo app is running, it needs to use the local dev script unless the qaUrl is set
     if (!qaUrl &&
-        ['dev.demo.elements.zonos.com', 'dev.checkout.elements.zonos.com'].includes(window.location.hostname)) {
+        [
+            'dev.demo.elements.zonos.com',
+            'dev.checkout.elements.zonos.com',
+            'dev.storybook.elements.zonos.com',
+        ].includes(window.location.hostname)) {
         return 'https://dev.elements.zonos.com';
     }
     if (!qaUrl) {

package/dist/collection/scripts/_zonosBase.js

@@ -59,6 +59,7 @@ Zonos.domain = typeof window !== 'undefined'
 Zonos.showBaseForeign = typeof window !== 'undefined' &&
     window.location.search.includes('zonosShowBaseForeign');
 Zonos.overrideUseCustomAddressForm = false;
+Zonos.isCollect = false;
 /**
  * By default, the package will load from npm
  */
@@ -386,7 +387,12 @@ Zonos.injectController = ({ config, }) => {
             return;
         }
         window.Zonos.stripe = stripe;
-        void zonosController.initCheckoutElement(stripe);
+        if (window.Zonos.isCollect) {
+            void zonosController.initCollectElement(stripe);
+        }
+        else {
+            void zonosController.initCheckoutElement(stripe);
+        }
     });
     document.body.appendChild(zonosController);
     // set zonos controller to be global

package/dist/collection/types/checkout/api/PartyInfo.js

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