@zonos/elements 1.3.143 → 1.3.144

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

@@ -173,6 +173,9 @@ export const stringsFrench = {
     'No countries found': {
         value: 'Aucun pays trouvé',
     },
+    'No payment method needed for staging': {
+        value: 'Aucun moyen de paiement nécessaire pour la mise en scène',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: `Aucune évaluation d'expédition sélectionnée. Veuillez revenir à l'étape "Expédition" et sélectionner une évaluation d'expédition pour continuer.`,
     },
@@ -230,6 +233,9 @@ export const stringsFrench = {
     'Phone number': {
         value: 'Numéro de téléphone',
     },
+    'Place test order': {
+        value: 'Passer une commande de test',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: "Veuillez vous assurer que votre texte utilise uniquement l'alphabet latin (A-Z, a-z).",
     },
@@ -332,6 +338,9 @@ export const stringsFrench = {
     'Spend [threshold] tax free.': {
         value: 'Dépensez [threshold] hors taxes.',
     },
+    'Staging mode': {
+        value: 'Mode de mise en scène',
+    },
     State: {
         value: 'État',
     },

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

@@ -173,6 +173,9 @@ export const stringsGerman = {
     'No countries found': {
         value: 'Keine Länder gefunden',
     },
+    'No payment method needed for staging': {
+        value: 'Keine Zahlungsmethode für die Inszenierung erforderlich',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Keine Versandbewertung ausgewählt. Bitte gehen Sie zurück zum Schritt "Versand" und wählen Sie eine Versandbewertung aus, um fortzufahren.',
     },
@@ -230,6 +233,9 @@ export const stringsGerman = {
     'Phone number': {
         value: 'Telefonnummer',
     },
+    'Place test order': {
+        value: 'Testbestellung aufgeben',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Bitte stellen Sie sicher, dass Ihr Text nur das lateinische Alphabet verwendet (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsGerman = {
     'Spend [threshold] tax free.': {
         value: 'Geben Sie [threshold] steuerfrei aus.',
     },
+    'Staging mode': {
+        value: 'Staging-Modus',
+    },
     State: {
         value: 'Bundesland',
     },

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

@@ -173,6 +173,9 @@ export const stringsHebrew = {
     'No countries found': {
         value: 'לא נמצאו מדינות',
     },
+    'No payment method needed for staging': {
+        value: 'אין צורך בשיטת תשלום לבימוי',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'לא נבחר דירוג משלוח. אנא חזור לשלב "משלוח" ובחר דירוג משלוח כדי להמשיך.',
     },
@@ -230,6 +233,9 @@ export const stringsHebrew = {
     'Phone number': {
         value: 'מספר טלפון',
     },
+    'Place test order': {
+        value: 'בצע הזמנת בדיקה',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'אנא ודא שהטקסט שלך משתמש באלפבית הלטיני בלבד (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsHebrew = {
     'Spend [threshold] tax free.': {
         value: 'הוצא [threshold] ללא מס.',
     },
+    'Staging mode': {
+        value: 'מצב בימוי',
+    },
     State: {
         value: 'מדינה',
     },

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

@@ -173,6 +173,9 @@ export const stringsIndonesian = {
     'No countries found': {
         value: 'Tidak ada negara yang ditemukan',
     },
+    'No payment method needed for staging': {
+        value: 'Tidak perlu metode pembayaran untuk pementasan',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Tidak ada penilaian pengiriman yang dipilih. Silakan kembali ke langkah "Pengiriman" dan pilih penilaian pengiriman untuk melanjutkan.',
     },
@@ -230,6 +233,9 @@ export const stringsIndonesian = {
     'Phone number': {
         value: 'Nomor telepon',
     },
+    'Place test order': {
+        value: 'Lakukan pesanan uji coba',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Harap pastikan teks Anda hanya menggunakan alfabet Latin (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsIndonesian = {
     'Spend [threshold] tax free.': {
         value: 'Habiskan [threshold] bebas pajak.',
     },
+    'Staging mode': {
+        value: 'Mode pementasan',
+    },
     State: {
         value: 'Negara Bagian',
     },

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

@@ -173,6 +173,9 @@ export const stringsItalian = {
     'No countries found': {
         value: 'Nessun paese trovato',
     },
+    'No payment method needed for staging': {
+        value: 'Nessun metodo di pagamento necessario per la messa in scena',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Nessuna valutazione di spedizione selezionata. Si prega di tornare al passaggio "Spedizione" e selezionare una valutazione di spedizione per procedere.',
     },
@@ -230,6 +233,9 @@ export const stringsItalian = {
     'Phone number': {
         value: 'Numero di telefono',
     },
+    'Place test order': {
+        value: 'Effettuare un ordine di prova',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: "Si prega di assicurarsi che il testo utilizzi solo l'alfabeto latino (A-Z, a-z).",
     },
@@ -332,6 +338,9 @@ export const stringsItalian = {
     'Spend [threshold] tax free.': {
         value: 'Spendi [threshold] senza tasse.',
     },
+    'Staging mode': {
+        value: 'Modalità di staging',
+    },
     State: {
         value: 'Stato',
     },

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

@@ -173,6 +173,9 @@ export const stringsJapanese = {
     'No countries found': {
         value: '国が見つかりません',
     },
+    'No payment method needed for staging': {
+        value: 'ステージングには支払い方法は不要です',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: '配送評価が選択されていません。「配送」ステップに戻り、配送評価を選択して続行してください。',
     },
@@ -230,6 +233,9 @@ export const stringsJapanese = {
     'Phone number': {
         value: '電話番号',
     },
+    'Place test order': {
+        value: 'テスト注文を出す',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'テキストがラテンアルファベットのみを使用していることを確認してください（A-Z、a-z）。',
     },
@@ -332,6 +338,9 @@ export const stringsJapanese = {
     'Spend [threshold] tax free.': {
         value: '[threshold]を税金なしで使う。',
     },
+    'Staging mode': {
+        value: 'ステージングモード',
+    },
     State: {
         value: '州',
     },

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

@@ -173,6 +173,9 @@ export const stringsKorean = {
     'No countries found': {
         value: '국가를 찾을 수 없습니다',
     },
+    'No payment method needed for staging': {
+        value: '스테이징에 결제 방법이 필요하지 않습니다',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: '배송 등급이 선택되지 않았습니다. "배송" 단계로 돌아가서 배송 등급을 선택하여 진행하세요.',
     },
@@ -230,6 +233,9 @@ export const stringsKorean = {
     'Phone number': {
         value: '전화번호',
     },
+    'Place test order': {
+        value: '테스트 주문하기',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: '텍스트가 라틴 알파벳만 사용하는지 확인해 주세요 (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsKorean = {
     'Spend [threshold] tax free.': {
         value: '[threshold]를 세금 없이 사용하세요.',
     },
+    'Staging mode': {
+        value: '스테이징 모드',
+    },
     State: {
         value: '주',
     },

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

@@ -173,6 +173,9 @@ export const stringsNorwegian = {
     'No countries found': {
         value: 'Ingen land funnet',
     },
+    'No payment method needed for staging': {
+        value: 'Ingen betalingsmetode nødvendig for iscenesettelse',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Ingen forsendelsesvurdering valgt. Vennligst gå tilbake til "Frakt"-trinnet og velg en forsendelsesvurdering for å fortsette.',
     },
@@ -230,6 +233,9 @@ export const stringsNorwegian = {
     'Phone number': {
         value: 'Telefonnummer',
     },
+    'Place test order': {
+        value: 'Legg inn testbestilling',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Vennligst sørg for at teksten din kun bruker det latinske alfabetet (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsNorwegian = {
     'Spend [threshold] tax free.': {
         value: 'Bruk [threshold] skattefritt.',
     },
+    'Staging mode': {
+        value: 'Iscenesettelsesmodus',
+    },
     State: {
         value: 'Stat',
     },

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

@@ -173,6 +173,9 @@ export const stringsPolish = {
     'No countries found': {
         value: 'Nie znaleziono krajów',
     },
+    'No payment method needed for staging': {
+        value: 'Nie jest potrzebna metoda płatności do inscenizacji',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Nie wybrano oceny przesyłki. Proszę wrócić do kroku "Wysyłka" i wybrać ocenę przesyłki, aby kontynuować.',
     },
@@ -230,6 +233,9 @@ export const stringsPolish = {
     'Phone number': {
         value: 'Numer telefonu',
     },
+    'Place test order': {
+        value: 'Złóż zamówienie testowe',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Proszę upewnić się, że tekst używa tylko alfabetu łacińskiego (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsPolish = {
     'Spend [threshold] tax free.': {
         value: 'Wydaj [threshold] bez podatku.',
     },
+    'Staging mode': {
+        value: 'Tryb inscenizacji',
+    },
     State: {
         value: 'Stan',
     },

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

@@ -173,6 +173,9 @@ export const stringsPortuguese = {
     'No countries found': {
         value: 'Nenhum país encontrado',
     },
+    'No payment method needed for staging': {
+        value: 'Nenhum método de pagamento necessário para encenação',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Nenhuma classificação de envio selecionada. Por favor, volte para a etapa de "Envio" e selecione uma classificação de envio para prosseguir.',
     },
@@ -230,6 +233,9 @@ export const stringsPortuguese = {
     'Phone number': {
         value: 'Número de telefone',
     },
+    'Place test order': {
+        value: 'Fazer pedido de teste',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Por favor, certifique-se de que seu texto utilize apenas o alfabeto latino (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsPortuguese = {
     'Spend [threshold] tax free.': {
         value: 'Gaste [threshold] livre de impostos.',
     },
+    'Staging mode': {
+        value: 'Modo de encenação',
+    },
     State: {
         value: 'Estado',
     },

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

@@ -173,6 +173,9 @@ export const stringsRussian = {
     'No countries found': {
         value: 'Страны не найдены',
     },
+    'No payment method needed for staging': {
+        value: 'Способ оплаты не требуется для постановки',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Не выбран рейтинг доставки. Пожалуйста, вернитесь к шагу "Доставка" и выберите рейтинг доставки, чтобы продолжить.',
     },
@@ -230,6 +233,9 @@ export const stringsRussian = {
     'Phone number': {
         value: 'Номер телефона',
     },
+    'Place test order': {
+        value: 'Разместить тестовый заказ',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Пожалуйста, убедитесь, что ваш текст использует только латинский алфавит (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsRussian = {
     'Spend [threshold] tax free.': {
         value: 'Тратьте [threshold] без налогов.',
     },
+    'Staging mode': {
+        value: 'Режим постановки',
+    },
     State: {
         value: 'Штат',
     },

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

@@ -173,6 +173,9 @@ export const stringsSpanish = {
     'No countries found': {
         value: 'No se encontraron países',
     },
+    'No payment method needed for staging': {
+        value: 'No se necesita método de pago para la puesta en escena',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'No se ha seleccionado una calificación de envío. Por favor, regrese al paso de "Envío" y seleccione una calificación de envío para continuar.',
     },
@@ -230,6 +233,9 @@ export const stringsSpanish = {
     'Phone number': {
         value: 'Número de teléfono',
     },
+    'Place test order': {
+        value: 'Realizar pedido de prueba',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Por favor, asegúrese de que su texto use solo el alfabeto latino (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsSpanish = {
     'Spend [threshold] tax free.': {
         value: 'Gasta [threshold] libre de impuestos.',
     },
+    'Staging mode': {
+        value: 'Modo de ensayo',
+    },
     State: {
         value: 'Estado',
     },

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

@@ -173,6 +173,9 @@ export const stringsSwedish = {
     'No countries found': {
         value: 'Inga länder hittades',
     },
+    'No payment method needed for staging': {
+        value: 'Ingen betalningsmetod behövs för iscensättning',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Ingen fraktbedömning vald. Gå tillbaka till steget "Frakt" och välj en fraktbedömning för att fortsätta.',
     },
@@ -230,6 +233,9 @@ export const stringsSwedish = {
     'Phone number': {
         value: 'Telefonnummer',
     },
+    'Place test order': {
+        value: 'Lägg testorder',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Vänligen se till att din text endast använder det latinska alfabetet (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsSwedish = {
     'Spend [threshold] tax free.': {
         value: 'Spendera [threshold] skattefritt.',
     },
+    'Staging mode': {
+        value: 'Staging-läge',
+    },
     State: {
         value: 'Stat',
     },

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

@@ -173,6 +173,9 @@ export const stringsTurkish = {
     'No countries found': {
         value: 'Ülke bulunamadı',
     },
+    'No payment method needed for staging': {
+        value: 'Sahneleme için ödeme yöntemi gerekmez',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Gönderi derecelendirmesi seçilmedi. Lütfen "Kargo" adımına geri dönün ve devam etmek için bir gönderi derecelendirmesi seçin.',
     },
@@ -230,6 +233,9 @@ export const stringsTurkish = {
     'Phone number': {
         value: 'Telefon numarası',
     },
+    'Place test order': {
+        value: 'Test siparişi ver',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Lütfen metninizin sadece Latin alfabesini kullandığından emin olun (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsTurkish = {
     'Spend [threshold] tax free.': {
         value: '[threshold] vergi ödemeden harcayın.',
     },
+    'Staging mode': {
+        value: 'Sahneleme modu',
+    },
     State: {
         value: 'Eyalet',
     },

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

@@ -173,6 +173,9 @@ export const stringsVietnamese = {
     'No countries found': {
         value: 'Không tìm thấy quốc gia nào',
     },
+    'No payment method needed for staging': {
+        value: 'Không cần phương thức thanh toán cho dàn dựng',
+    },
     'No shipment rating selected. Please go back to the "Shipping" step and select a shipment rating to proceed.': {
         value: 'Chưa chọn đánh giá vận chuyển. Vui lòng quay lại bước "Vận chuyển" và chọn đánh giá vận chuyển để tiếp tục.',
     },
@@ -230,6 +233,9 @@ export const stringsVietnamese = {
     'Phone number': {
         value: 'Số điện thoại',
     },
+    'Place test order': {
+        value: 'Đặt hàng thử',
+    },
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Vui lòng đảm bảo rằng văn bản của bạn chỉ sử dụng bảng chữ cái Latinh (A-Z, a-z).',
     },
@@ -332,6 +338,9 @@ export const stringsVietnamese = {
     'Spend [threshold] tax free.': {
         value: 'Chi tiêu [threshold] miễn thuế.',
     },
+    'Staging mode': {
+        value: 'Chế độ dàn dựng',
+    },
     State: {
         value: 'Bang',
     },

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

@@ -168,6 +168,8 @@ export class ZonosAddress {
                     "tags": [],
                     "text": "The type of address element to render"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false
             },
@@ -185,6 +187,8 @@ export class ZonosAddress {
                     "tags": [],
                     "text": "The title text for the address element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-text",
                 "reflect": false
             },
@@ -208,6 +212,8 @@ export class ZonosAddress {
                     "tags": [],
                     "text": "Default address for stripe"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "null"
             }
         };

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

@@ -1,23 +1,56 @@
 /* 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 { translate } from "../../store/translationStore";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { logError } from "../../utils/logging/logError";
+import { validateEmailValue } from "../../utils/validateEmailValue";
 /**
  * This component is a wrapper for the stripe authentication element that would render default style object
  */
 export class ZonosLinkAuthentication {
     constructor() {
+        this.setCustomEmailInputToLinkEvent = (emailValue) => {
+            // check if the email is valid
+            const isValid = validateEmailValue(emailValue);
+            const simulateLinkEvent = {
+                complete: !!isValid,
+                elementType: 'linkAuthentication',
+                empty: !emailValue,
+                value: {
+                    email: emailValue,
+                },
+            };
+            stripeStore.stripeLinkEventData = simulateLinkEvent;
+        };
+        this.handleNormalEmailInput = (event) => {
+            var _a;
+            const inputValue = event.detail;
+            this.setCustomEmailInputToLinkEvent(inputValue);
+            (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
+        };
         this.titleText = undefined;
         this.defaultEmail = null;
         this.isEmailError = false;
         this.stripe = stripeStore.stripe;
+        this.isStagingMode = cartStore.isStagingMode;
+        this.clientSecret = stripeStore.clientSecret;
+    }
+    watchIsStagingMode() {
+        // Wait for the DOM to be ready before re-initializing Link element
+        setTimeout(() => {
+            this.watchInitStripe();
+        }, 0);
     }
     watchInitStripe() {
         if (!this.stripe || !stripeStore.stripeElements) {
             return;
         }
+        // No need to initialize link if this is staging mode since we will render the email input field
+        if (cartStore.isStagingMode) {
+            return;
+        }
         const defaultValues = this.defaultEmail
             ? {
                 email: this.defaultEmail,
@@ -41,15 +74,46 @@ export class ZonosLinkAuthentication {
         });
         stripeStore.stripeLinkElement = linkAuthenticationElement;
     }
+    watchDefaultEmail() {
+        if (!this.defaultEmail) {
+            return;
+        }
+        this.setCustomEmailInputToLinkEvent(this.defaultEmail);
+    }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load
         this.watchInitStripe();
+        if (!this.defaultEmail) {
+            return;
+        }
+        // set default email value to stripeLinkEventData if default email is provided
+        this.setCustomEmailInputToLinkEvent(this.defaultEmail);
     }
     render() {
+        this.isStagingMode = cartStore.isStagingMode;
+        this.clientSecret = stripeStore.clientSecret;
+        const renderEmailAddress = () => {
+            var _a;
+            if (cartStore.isStagingMode) {
+                return (h("zonos-stripe-input", { inputLabel: translate('Email'), inputValue: this.defaultEmail ||
+                        ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) ||
+                        '', isError: this.isEmailError, onBlur: () => {
+                        var _a;
+                        const emailValue = ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) || '';
+                        if (!emailValue) {
+                            return;
+                        }
+                        // check if the email is valid
+                        const isValid = validateEmailValue(emailValue);
+                        this.isEmailError = !isValid;
+                    }, onInputChange: this.handleNormalEmailInput }));
+            }
+            return (h("div", { class: `zonos--link-authentication-component ${this.isEmailError && 'zonos--input-invalid'}` }));
+        };
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'a57d22a1bc27b37819781aa5228a509b5638e8bc', class: "zonos--link-authentication zonos--elements", style: {
+        return (h(Host, { class: "zonos--link-authentication zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("zonos-text", { key: 'a56a593acd45bc7934714a15d9ee45842a88cba6', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f04730dcf7bca9bc7a623e19755fcb2957fbf1fd', class: `zonos--link-authentication-component ${this.isEmailError && 'zonos--input-invalid'}` }), this.isEmailError && (h("zonos-text", { key: '77f8146f8346b32f37bd2ada98f9d6783329c1a3', textColor: "red-600" }, translate('Please enter a valid email address.')))));
+            } }, 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"; }
@@ -79,6 +143,8 @@ export class ZonosLinkAuthentication {
                     "tags": [],
                     "text": "The title text for the authentication element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-text",
                 "reflect": false
             },
@@ -96,6 +162,8 @@ export class ZonosLinkAuthentication {
                     "tags": [],
                     "text": "Default email for stripe"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "default-email",
                 "reflect": false,
                 "defaultValue": "null"
@@ -114,6 +182,8 @@ export class ZonosLinkAuthentication {
                     "tags": [],
                     "text": "Email error text to dispaly"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-email-error",
                 "reflect": false,
                 "defaultValue": "false"
@@ -122,7 +192,9 @@ export class ZonosLinkAuthentication {
     }
     static get states() {
         return {
-            "stripe": {}
+            "stripe": {},
+            "isStagingMode": {},
+            "clientSecret": {}
         };
     }
     static get events() {
@@ -146,8 +218,17 @@ export class ZonosLinkAuthentication {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "isStagingMode",
+                "methodName": "watchIsStagingMode"
+            }, {
                 "propName": "stripe",
                 "methodName": "watchInitStripe"
+            }, {
+                "propName": "clientSecret",
+                "methodName": "watchInitStripe"
+            }, {
+                "propName": "defaultEmail",
+                "methodName": "watchDefaultEmail"
             }];
     }
 }

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

@@ -36,7 +36,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: 'adcbeae4dadcaff59781ae47f779032e9fe43f5c', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'c83017ca67410a6715cacf6c0e524ed7b4304837', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '55c6d6dde8efaffec4411a838c62b7ede3efe30a', class: "zonos--payment-component" }), h("div", { key: 'd27b440253222daf94e4a6ad862c901efa54bfe5', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '2d664521944c4f02f34fe3130f8ebb853e562476', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '11f683a0f6094d801103a9f04054d038b405718f', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '0c962441697499b3a7eb279175ce025d76d4c0fa', class: "zonos--payment-component" }), h("div", { key: 'a96af74f05521fcccc1912c0ec1dcbe64cfc1ae7', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }
@@ -66,6 +66,8 @@ export class ZonosPayment {
                     "tags": [],
                     "text": "The title text for the authentication element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-text",
                 "reflect": false
             }