rebill-web-components-sdk 1.10.1 → 1.10.2

package/dist/collection/components/checkout/address/autofill-detector/autofill-detector.js

@@ -0,0 +1,277 @@
+import { h } from "@stencil/core";
+export class AutofillDetector {
+    el;
+    targetSelector = 'input[type="text"]';
+    disabled = false;
+    autofillDetected;
+    manualEntryRequested;
+    browserAutocompleteDetected = false;
+    disabledDetector = false;
+    async componentDidLoad() {
+        if (!this.disabled) {
+            await this.setupBrowserAutocompleteDetection();
+        }
+    }
+    async setupBrowserAutocompleteDetection() {
+        try {
+            const inputElement = await this.getInputElement();
+            if (!inputElement)
+                return;
+            let lastValue = '';
+            let isUserTyping = false;
+            let autocompleteCheckInterval = null;
+            // Detectar cuando el usuario está escribiendo (para no interferir con Google)
+            inputElement.addEventListener('keydown', event => {
+                if (event.key && event.key.length === 1) {
+                    isUserTyping = true;
+                    this.disabledDetector = true;
+                    setTimeout(() => {
+                        isUserTyping = false;
+                        this.disabledDetector = false;
+                    }, 1000);
+                }
+            });
+            // Detectar autocompletado del navegador
+            const detectAutocomplete = () => {
+                const currentValue = inputElement.value;
+                if (currentValue !== lastValue &&
+                    currentValue.length > 0 &&
+                    !this.disabled &&
+                    !this.disabledDetector &&
+                    !isUserTyping) {
+                    console.log('✅ AutofillDetector - Autocomplete detected:', currentValue);
+                    setTimeout(() => {
+                        if (inputElement.value === currentValue && !this.browserAutocompleteDetected) {
+                            this.browserAutocompleteDetected = true;
+                            this.handleBrowserAutocomplete(currentValue);
+                        }
+                    }, 100);
+                }
+                lastValue = currentValue;
+            };
+            // Eventos para detectar autocompletado
+            inputElement.addEventListener('input', () => detectAutocomplete());
+            inputElement.addEventListener('change', () => detectAutocomplete());
+            inputElement.addEventListener('focus', () => {
+                this.browserAutocompleteDetected = false;
+                isUserTyping = false;
+            });
+            inputElement.addEventListener('blur', () => {
+                if (autocompleteCheckInterval) {
+                    clearInterval(autocompleteCheckInterval);
+                    autocompleteCheckInterval = null;
+                }
+            });
+        }
+        catch (error) { }
+    }
+    async getInputElement() {
+        try {
+            const inputElement = this.el.querySelector(this.targetSelector);
+            return inputElement;
+        }
+        catch (error) {
+            return null;
+        }
+    }
+    handleBrowserAutocomplete(addressString) {
+        const allAutocompleteData = this.detectAllAutocompleteFields();
+        // Parsear la dirección autocompletada
+        const addressComponents = this.parseBrowserAutocompleteAddress(addressString);
+        if (addressComponents) {
+            // Combinar la información parseada con TODOS los datos del autocompletado
+            const enhancedComponents = {
+                ...addressComponents,
+                city: addressComponents.city || allAutocompleteData.city || '',
+                state: addressComponents.state || allAutocompleteData.state || '',
+                country: addressComponents.country || allAutocompleteData.country || '',
+                zip: addressComponents.zip || allAutocompleteData.zip || '',
+            };
+            // Emitir evento con los datos detectados
+            this.autofillDetected.emit(enhancedComponents);
+            // Cambiar a vista manual
+            this.handleManualEntry();
+        }
+    }
+    detectAllAutocompleteFields() {
+        const info = {};
+        try {
+            // Buscar todos los campos del formulario que se autocompletaron
+            const form = this.el.closest('form') || document;
+            // Buscar TODOS los inputs y selects que tengan valores
+            const allInputs = form.querySelectorAll('input, select');
+            for (let i = 0; i < allInputs.length; i++) {
+                const field = allInputs[i];
+                const value = field.value;
+                const id = field.id || '';
+                const name = field.name || '';
+                const className = field.className || '';
+                // Buscar campos de ciudad
+                if (value && (id.includes('city') || name.includes('city') || className.includes('city'))) {
+                    info.city = value;
+                }
+                // Buscar campos de código postal
+                if (value &&
+                    (id.includes('zip') ||
+                        name.includes('zip') ||
+                        className.includes('zip') ||
+                        id.includes('postal') ||
+                        name.includes('postal') ||
+                        className.includes('postal'))) {
+                    info.zip = value;
+                }
+                // Buscar campos de país
+                if (value &&
+                    (id.includes('country') || name.includes('country') || className.includes('country'))) {
+                    info.country = value;
+                }
+                // Buscar campos de estado
+                if (value &&
+                    (id.includes('state') || name.includes('state') || className.includes('state'))) {
+                    info.state = value;
+                }
+            }
+        }
+        catch (error) {
+            // Silently handle errors
+        }
+        return info;
+    }
+    parseBrowserAutocompleteAddress(addressString) {
+        if (!addressString || addressString.trim().length === 0) {
+            return null;
+        }
+        const cleanAddress = addressString.trim();
+        // Si es una dirección de una sola parte (sin comas)
+        if (!cleanAddress.includes(',')) {
+            return this.parseSinglePartAddress(cleanAddress);
+        }
+        // Parseo simple para direcciones con comas
+        const addressParts = cleanAddress.split(',').map(part => part.trim());
+        return {
+            address: addressParts[0] || '',
+            city: addressParts[1] || '',
+            state: addressParts[2] || '',
+            country: addressParts[3] || '',
+            zip: addressParts[4] || '',
+        };
+    }
+    parseSinglePartAddress(address) {
+        // Para direcciones de una sola parte, solo devolver la dirección
+        return {
+            address: address,
+            city: '',
+            state: '',
+            country: '',
+            zip: '',
+        };
+    }
+    handleManualEntry = () => {
+        this.manualEntryRequested.emit();
+    };
+    render() {
+        return h("slot", { key: '60aa28de56b48a704b51286fa433131f9efd3d26' });
+    }
+    static get is() { return "rebill-autofill-detector"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["autofill-detector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["autofill-detector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "targetSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-selector",
+                "defaultValue": "'input[type=\"text\"]'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "browserAutocompleteDetected": {},
+            "disabledDetector": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "autofillDetected",
+                "name": "autofillDetected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AddressComponents",
+                    "resolved": "AddressComponents",
+                    "references": {
+                        "AddressComponents": {
+                            "location": "import",
+                            "path": "../../../../utils/google-maps.service",
+                            "id": "src/utils/google-maps.service.ts::AddressComponents"
+                        }
+                    }
+                }
+            }, {
+                "method": "manualEntryRequested",
+                "name": "manualEntryRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=autofill-detector.js.map

package/dist/collection/components/checkout/address/autofill-detector/autofill-detector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofill-detector.js","sourceRoot":"","sources":["../../../../../src/components/checkout/address/autofill-detector/autofill-detector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { AddressComponents } from '../../../../utils/google-maps.service';\n\n@Component({\n  tag: 'rebill-autofill-detector',\n  styleUrl: 'autofill-detector.css',\n  shadow: false,\n})\nexport class AutofillDetector {\n  @Element() el: HTMLElement;\n\n  @Prop() targetSelector: string = 'input[type=\"text\"]';\n  @Prop() disabled: boolean = false;\n\n  @Event() autofillDetected: EventEmitter<AddressComponents>;\n  @Event() manualEntryRequested: EventEmitter<void>;\n\n  @State() browserAutocompleteDetected: boolean = false;\n  @State() disabledDetector: boolean = false;\n\n  async componentDidLoad() {\n    if (!this.disabled) {\n      await this.setupBrowserAutocompleteDetection();\n    }\n  }\n\n  private async setupBrowserAutocompleteDetection() {\n    try {\n      const inputElement = await this.getInputElement();\n      if (!inputElement) return;\n\n      let lastValue = '';\n      let isUserTyping = false;\n      let autocompleteCheckInterval: number | null = null;\n\n      // Detectar cuando el usuario está escribiendo (para no interferir con Google)\n      inputElement.addEventListener('keydown', event => {\n        if (event.key && event.key.length === 1) {\n          isUserTyping = true;\n          this.disabledDetector = true;\n          setTimeout(() => {\n            isUserTyping = false;\n            this.disabledDetector = false;\n          }, 1000);\n        }\n      });\n\n      // Detectar autocompletado del navegador\n      const detectAutocomplete = () => {\n        const currentValue = inputElement.value;\n        if (\n          currentValue !== lastValue &&\n          currentValue.length > 0 &&\n          !this.disabled &&\n          !this.disabledDetector &&\n          !isUserTyping\n        ) {\n          console.log('✅ AutofillDetector - Autocomplete detected:', currentValue);\n          setTimeout(() => {\n            if (inputElement.value === currentValue && !this.browserAutocompleteDetected) {\n              this.browserAutocompleteDetected = true;\n              this.handleBrowserAutocomplete(currentValue);\n            }\n          }, 100);\n        }\n\n        lastValue = currentValue;\n      };\n\n      // Eventos para detectar autocompletado\n      inputElement.addEventListener('input', () => detectAutocomplete());\n      inputElement.addEventListener('change', () => detectAutocomplete());\n      inputElement.addEventListener('focus', () => {\n        this.browserAutocompleteDetected = false;\n        isUserTyping = false;\n      });\n      inputElement.addEventListener('blur', () => {\n        if (autocompleteCheckInterval) {\n          clearInterval(autocompleteCheckInterval);\n          autocompleteCheckInterval = null;\n        }\n      });\n    } catch (error) {}\n  }\n\n  private async getInputElement(): Promise<HTMLInputElement | null> {\n    try {\n      const inputElement = this.el.querySelector(this.targetSelector) as HTMLInputElement;\n      return inputElement;\n    } catch (error) {\n      return null;\n    }\n  }\n\n  private handleBrowserAutocomplete(addressString: string) {\n    const allAutocompleteData = this.detectAllAutocompleteFields();\n\n    // Parsear la dirección autocompletada\n    const addressComponents = this.parseBrowserAutocompleteAddress(addressString);\n\n    if (addressComponents) {\n      // Combinar la información parseada con TODOS los datos del autocompletado\n      const enhancedComponents = {\n        ...addressComponents,\n        city: addressComponents.city || allAutocompleteData.city || '',\n        state: addressComponents.state || allAutocompleteData.state || '',\n        country: addressComponents.country || allAutocompleteData.country || '',\n        zip: addressComponents.zip || allAutocompleteData.zip || '',\n      };\n\n      // Emitir evento con los datos detectados\n      this.autofillDetected.emit(enhancedComponents);\n\n      // Cambiar a vista manual\n      this.handleManualEntry();\n    }\n  }\n\n  private detectAllAutocompleteFields(): {\n    city?: string;\n    state?: string;\n    country?: string;\n    zip?: string;\n  } {\n    const info: {\n      city?: string;\n      state?: string;\n      country?: string;\n      zip?: string;\n    } = {};\n\n    try {\n      // Buscar todos los campos del formulario que se autocompletaron\n      const form = this.el.closest('form') || document;\n\n      // Buscar TODOS los inputs y selects que tengan valores\n      const allInputs = form.querySelectorAll('input, select');\n\n      for (let i = 0; i < allInputs.length; i++) {\n        const field = allInputs[i] as HTMLInputElement | HTMLSelectElement;\n        const value = field.value;\n        const id = field.id || '';\n        const name = field.name || '';\n        const className = field.className || '';\n\n        // Buscar campos de ciudad\n        if (value && (id.includes('city') || name.includes('city') || className.includes('city'))) {\n          info.city = value;\n        }\n\n        // Buscar campos de código postal\n        if (\n          value &&\n          (id.includes('zip') ||\n            name.includes('zip') ||\n            className.includes('zip') ||\n            id.includes('postal') ||\n            name.includes('postal') ||\n            className.includes('postal'))\n        ) {\n          info.zip = value;\n        }\n\n        // Buscar campos de país\n        if (\n          value &&\n          (id.includes('country') || name.includes('country') || className.includes('country'))\n        ) {\n          info.country = value;\n        }\n\n        // Buscar campos de estado\n        if (\n          value &&\n          (id.includes('state') || name.includes('state') || className.includes('state'))\n        ) {\n          info.state = value;\n        }\n      }\n    } catch (error) {\n      // Silently handle errors\n    }\n\n    return info;\n  }\n\n  private parseBrowserAutocompleteAddress(addressString: string): AddressComponents | null {\n    if (!addressString || addressString.trim().length === 0) {\n      return null;\n    }\n\n    const cleanAddress = addressString.trim();\n\n    // Si es una dirección de una sola parte (sin comas)\n    if (!cleanAddress.includes(',')) {\n      return this.parseSinglePartAddress(cleanAddress);\n    }\n\n    // Parseo simple para direcciones con comas\n    const addressParts = cleanAddress.split(',').map(part => part.trim());\n\n    return {\n      address: addressParts[0] || '',\n      city: addressParts[1] || '',\n      state: addressParts[2] || '',\n      country: addressParts[3] || '',\n      zip: addressParts[4] || '',\n    };\n  }\n\n  private parseSinglePartAddress(address: string): AddressComponents | null {\n    // Para direcciones de una sola parte, solo devolver la dirección\n    return {\n      address: address,\n      city: '',\n      state: '',\n      country: '',\n      zip: '',\n    };\n  }\n\n  private handleManualEntry = () => {\n    this.manualEntryRequested.emit();\n  };\n\n  render() {\n    return <slot />;\n  }\n}\n"]}

package/dist/collection/components/checkout/apm/qr-code/qr-code.js

@@ -87,13 +87,13 @@ export class QrCode {
     };
     render() {
         const instructionLines = this.getCurrentLanguageInstructions();
-        return (h("div", { key: '7e6d0f240af1acf4732e8e0e421972422fcb42b3', class: "qr-code" }, h("div", { key: '3fc0e1591bc4feda98b5ea2865989799b74de56e', class: "qr-code-header" }, h("div", { key: '3cbcaa7fced65b2aebc1c1df9f18d6cd32a6909b', class: "expiration-section" }, h("rebill-icon", { key: '29a8095174d45117f5ddb775db1146feb78facab', name: "calendar-clock" }), h("span", { key: 'b83d5b95ca7db70d19c4e9659a3b7c9a65e507a8', class: "expiration-text" }, I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })))), h("div", { key: '7c393844eeebc1eccc95aa7f633e28afc021258f', class: "qr-code-content" }, h("div", { key: '54f2f3d6c4ce14bed018c78b4e70a4e5defe8187', class: "qr-section" }, h("div", { key: '724bd8e6f0c23b771e1718738476063cbace3218', class: "qr-instruction" }, h("rebill-typography", { key: 'a473b566d82278f454c19c4b682fcaae77638c85', variant: "subtitle-bold", style: { fontSize: '12px' }, color: COLORS_ENUM.GREY_300 }, I18nService.translate('qrCode.scanInstruction'))), h("div", { key: 'dce1c21a945780937c88b680aa36c4eca994ce81', class: "qr-container" }, this.isImage ? (h("img", { src: `data:image/png;base64,${this.qrCodeData}`, alt: "QR Code", class: "qr-image" })) : (h("div", { class: "qr-image", innerHTML: this.qrCodeSvg })), h("div", { key: '70d8375d521aceea4988186d5e6b21ef582d72cd', class: "scanner-line" }), h("div", { key: '1acd7c628854a8c1ae3552f58d83a7f9835dd267', class: "corner-bottom-left" }), h("div", { key: '94153fc3acdc4f237fdb78e1942f5910fe7661d9', class: "corner-bottom-right" })), this.code && (h("rebill-button", { key: 'e002848f069a1e4c6810f2241eef604fbe47a872', class: "copy-btn", variant: "secondary", size: "small", onClick: async () => {
+        return (h("div", { key: 'af12b0e17de3e9d15b3d50f6a775cfec0634c57d', class: "qr-code" }, h("div", { key: '049ac6a40747350848ab4de7b733ce0c3264b63d', class: "qr-code-header" }, h("div", { key: '25014acd9e5bfd42b7e67abc035b52703929732c', class: "expiration-section" }, h("rebill-icon", { key: 'f4892dd1c4e6cbfc58fe9a0768e72e3afa286010', name: "calendar-clock" }), h("span", { key: '74395a35eb90ab22fa8efcc763b5819e2b465b57', class: "expiration-text" }, I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })))), h("div", { key: '27b777bbba15c3a224e9c9d07ec6194f40caaa7b', class: "qr-code-content" }, h("div", { key: '38862683c888d46db81a5df22345024fdcc22fcc', class: "qr-section" }, h("div", { key: '2abcbbfad2d8031b2cfd0eca9daab29e8c65b2f7', class: "qr-instruction" }, h("rebill-typography", { key: '79f2500a17995c2f5b66be7a3afeab8ff1df01e9', variant: "subtitle-bold", style: { fontSize: '12px' }, color: COLORS_ENUM.GREY_300 }, I18nService.translate('qrCode.scanInstruction'))), h("div", { key: '181bd27896fb77c5afa1614a622242bb8b399167', class: "qr-container" }, this.isImage ? (h("img", { src: `data:image/png;base64,${this.qrCodeData}`, alt: "QR Code", class: "qr-image" })) : (h("div", { class: "qr-image", innerHTML: this.qrCodeSvg })), h("div", { key: '44a910457a4462bce56ee04fd7421b38c80f5701', class: "scanner-line" }), h("div", { key: '5ab93aeea71f4288525cc5c0ef7e864d322d625f', class: "corner-bottom-left" }), h("div", { key: '2dfa93e3952df855b38692caa5e446e67477ba78', class: "corner-bottom-right" })), this.code && (h("rebill-button", { key: '1a6e620bb374c27dccf12b910864920f2c7151ac', class: "copy-btn", variant: "secondary", size: "small", onClick: async () => {
                 if (!this.code)
                     return;
                 await copyToClipboard(this.code);
                 this.hasCopied = true;
                 setTimeout(() => (this.hasCopied = false), 2000);
-            }, type: "button" }, h("rebill-typography", { key: 'e87c283e7e80169a4bcfc6c3bb5a8d9e29182697', variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('qrCode.copyCode')), this.hasCopied ? (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844", stroke: "#35B093", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("rebill-icon", { name: "copy", size: "16px" })))))), instructionLines.length > 0 && (h("collapsible-card", { key: 'dbdd98362a19f07f2dee48415c9c5a6bfeefdd56', variant: "flat", header: I18nService.translate('qrCode.instructionsLabel'), open: false }, h("div", { key: '5603d323dc517cdb1020ee7e0d365a16ecb2753d' }, h("ol", { key: 'dcc4bf4b9c919b012a70fac52622475d97dca92e', class: "instructions-list" }, instructionLines.map((line, index) => (h("li", { key: index, class: "instruction-item" }, h("div", { class: "instruction-number" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.GREY_300 }, index + 1)), h("div", { class: "instruction-text" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.GREY_300 }, line)))))))))));
+            }, type: "button" }, h("rebill-typography", { key: '0bd8ad17dd4010b231889a3781686911638ad96d', variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('qrCode.copyCode')), this.hasCopied ? (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844", stroke: "#35B093", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("rebill-icon", { name: "copy", size: "16px" })))))), instructionLines.length > 0 && (h("collapsible-card", { key: '4e69b59086fab349bdbe54aaa7908d03f6af72e2', variant: "flat", header: I18nService.translate('qrCode.instructionsLabel'), open: false }, h("div", { key: 'a535d50416b7d0ad635c5c24f7c35258bf3ebbac' }, h("ol", { key: '0bcae653181b6f9bb62d43417d8811226ad135db', class: "instructions-list" }, instructionLines.map((line, index) => (h("li", { key: index, class: "instruction-item" }, h("div", { class: "instruction-number" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.GREY_300 }, index + 1)), h("div", { class: "instruction-text" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.GREY_300 }, line)))))))))));
     }
     static get is() { return "qr-code"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/apm/reference-code/reference-code.js

@@ -32,7 +32,7 @@ export class ReferenceCode {
     };
     render() {
         const instructionLines = this.getCurrentLanguageInstructions();
-        return (h("div", { key: '284bf280b5b420242da41c9d3fabb966ba4d2951', class: "reference-code" }, h("div", { key: '0d084693f67df1b3385d9454a6f638481221b0f5', class: "reference-code-header" }, h("div", { key: 'f878cb9a47e659eb8612dac2321d0b173540dc53', class: "expiration-section" }, h("rebill-icon", { key: '2c9c878a5e0fe24c0696cc6f1a1357d813d25c17', name: "calendar-clock" }), h("span", { key: 'fe06b6d44523983f2d49df5cdcfc15602f9a87d4', class: "expiration-text" }, I18nService.translate('referenceCode.expirationLabel'), ' ', this.formatExpirationDate(this.expirationDate)))), h("div", { key: '98748c75a8c24995efce64d507bacdad21ffcec9', class: "reference-code-content" }, h("div", { key: '13e878d0d82ce07ddb69a090713b2b9477df95e1', class: "reference-section" }, h("div", { key: '688492a0e2ee5cdee815c71cca05aa54163d4f40', class: "reference-label" }, I18nService.translate('referenceCode.referenceLabel')), h("div", { key: 'b1cd920c722f7cf83f3670e7d0ba91145594514e', class: "reference-value" }, this.referenceId)), h("div", { key: '6e3a0a53c9cb5360500bfacaa6e3d1c5cda16a5a', class: "provider-section" }, h("div", { key: 'b7d6d966b2262d3af483cd91a814e7cc4b6b9253', class: "provider-label" }, I18nService.translate('referenceCode.providerLabel')), h("div", { key: '8346b462e7f916262b92c89006fef26e30f34e49', class: "provider-value" }, getProviderName(this.providerName)))), this.instructions.length > 0 && (h("div", { key: '503e6d0266216ac66bbc83ff0973fff2da795cb9', class: "instructions-section" }, h("button", { key: '163ebeb781c236ae08f8c222a8da1a0ca85eeb07', class: "instructions-toggle", onClick: this.toggleInstructions, type: "button", "aria-expanded": this.showInstructions.toString(), "aria-controls": "instructions-content" }, h("span", { key: 'a8dff1d327ced9af633c3ab35e29b85100ca2519' }, I18nService.translate('referenceCode.instructionsLabel')), h("rebill-icon", { key: '04ded3a1765ef30202e7d449ac636ce7703a6f7b', name: "chevron-down" })), this.showInstructions && (h("div", { key: '10e6eb34d5f083c7cff8ad3afe9b89a5e0e60700', class: "instructions-content", id: "instructions-content", role: "region", "aria-labelledby": "instructions-toggle" }, h("div", { key: '2936ec75f05385bf919647eb3e22cb410c8070b3', class: "instructions-text" }, h("ol", { key: '1f80b17fe202e9ff2b944b99d6e5eb314b0f2101', class: "instructions-list" }, instructionLines.map((line, index) => (h("li", { key: index }, line)))))))))));
+        return (h("div", { key: '53eee612963a28548807c9a075aba17e8d022c37', class: "reference-code" }, h("div", { key: '1927fa9dd4c75a280391ba34b8d3f5900157a48f', class: "reference-code-header" }, h("div", { key: 'b02617217021eef14a42598f84e2c4ff20273d84', class: "expiration-section" }, h("rebill-icon", { key: '784ff624d90a2a952d97d02ad13f864afaca1413', name: "calendar-clock" }), h("span", { key: 'a95abc010c10f8d9d07a805d5fcd62f8069ead68', class: "expiration-text" }, I18nService.translate('referenceCode.expirationLabel'), ' ', this.formatExpirationDate(this.expirationDate)))), h("div", { key: 'b2f86a07b2bd9067c31ddd3e58b2495fc2da7670', class: "reference-code-content" }, h("div", { key: 'c6bcee134d966077dcc2b06bcd32d142273c27e6', class: "reference-section" }, h("div", { key: 'd607744363e0b5118c59996f776cd91d91471818', class: "reference-label" }, I18nService.translate('referenceCode.referenceLabel')), h("div", { key: 'c472e96e09146f2f13a476897ef92052e0a6affe', class: "reference-value" }, this.referenceId)), h("div", { key: '8cfc3186e62bbefd12fda2aa52e1fbe64e1f531a', class: "provider-section" }, h("div", { key: 'd8bc3af4a73e6f0f6a7f70e5a2b6c10d7b1e7901', class: "provider-label" }, I18nService.translate('referenceCode.providerLabel')), h("div", { key: '82e0ffc5faca1890b56a92d2bf4c695c9b720426', class: "provider-value" }, getProviderName(this.providerName)))), this.instructions.length > 0 && (h("div", { key: '615d197ef8278a2f1008ed9b99392b070decbcd3', class: "instructions-section" }, h("button", { key: 'e3cec3b4c0179b77b4d2ec5c9b992c1303e3782f', class: "instructions-toggle", onClick: this.toggleInstructions, type: "button", "aria-expanded": this.showInstructions.toString(), "aria-controls": "instructions-content" }, h("span", { key: 'e4ce3f249d33d62db9ca4f2f15e7e86b2e5b00b4' }, I18nService.translate('referenceCode.instructionsLabel')), h("rebill-icon", { key: '3533bfaf4cd3a5847b4cf34aa5845fd280de2e0f', name: "chevron-down" })), this.showInstructions && (h("div", { key: '707ba7303831e205c3cbd248e29e336db1fc1ef7', class: "instructions-content", id: "instructions-content", role: "region", "aria-labelledby": "instructions-toggle" }, h("div", { key: 'defce52b328d0c0a76a3ef7274d027e26a2c304a', class: "instructions-text" }, h("ol", { key: '3341cdb16fa13eefd16544e1c200c3bab2e7282d', class: "instructions-list" }, instructionLines.map((line, index) => (h("li", { key: index }, line)))))))))));
     }
     static get is() { return "reference-code"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/card-success-page/success-page.js

@@ -272,30 +272,30 @@ export class CardSuccessPage {
     };
     render() {
         const hasRedirect = sessionState.data?.itemInformation?.redirectSuccess;
-        return (h("rebill-checkout-single-column", { key: '6161c9a3a0339233bee1ba33aae1352e16fdda54' }, h("div", { key: '682b04e63decdad5f43a82b8ef2cd0dfcc442b06', class: "success-page__success-content" }, h("rebill-typography", { key: 'c5a4e7c9b9599b6a8d043deb7a9c1c567a5732fd', variant: "h3", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, hasRedirect && this.showRedirectMessage
+        return (h("rebill-checkout-single-column", { key: '40c28fe78a71c7f4008f6827bdeca330b4528092' }, h("div", { key: 'df2993dc3f25b060d11c4e3c3ffa59fc28fc3206', class: "success-page__success-content" }, h("rebill-typography", { key: '16eb9c3133e75c4d52d1a096b6acff572ba93397', variant: "h3", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, hasRedirect && this.showRedirectMessage
             ? I18nService.translate('processing.redirectMessage')
-            : I18nService.translate('processing.successTitle')), hasRedirect && this.showRedirectMessage ? (h("div", { class: "redirect-message" }, h("div", { class: "success-page__lottie-container" }, h("div", { ref: el => (this.lottieContainer = el), class: "lottie-animation" })))) : (h("div", { class: "success-page__success-icon" }, h("svg", { width: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96', height: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96', viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z", fill: "#35B093" })))), h("div", { key: '40d89290f34f40c0e68f4211ae305ff0af106fe0', class: "success-page__info-card" }, h("div", { key: '55f0c8f24fe757b9c09e6fec9e3597860ccdb206', class: "success-page__card-row" }, h("rebill-typography", { key: 'c5d8e1938fdaf248bf638227f9a40a9f91ffdd29', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentMethod')), h("div", { key: '55b7447bf16e6c8dd202d43b7372c504dcfd881c', class: "success-page__card-value" }, h("div", { key: '43d9b7fe932bc1809bdef6544d47457fe735f7a0', class: "success-page__payment-method-display" }, this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && (h(h.Fragment, null, h("rebill-card-icon", { key: '3d9a4e29b8dce7fdd2d241636a5e5f78c75dfac4', "card-brand": sessionState.data?.cardInformation?.brand || '' }), h("rebill-typography", { key: 'cd17dbb31447761d13d753184b910fcd5703b5ee', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.textPaymentMethodCard()))), this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (h("div", { key: 'e6f498399092661bceace8cdb152664a55fc3e59', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("div", { key: 'f431832ddcc020016990e9ff160ab91822220042', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, this.getPaymentMethodConfig(PAYMENT_METHOD_ENUM.BANK_TRANSFER).icons.map(iconName => {
+            : I18nService.translate('processing.successTitle')), hasRedirect && this.showRedirectMessage ? (h("div", { class: "redirect-message" }, h("div", { class: "success-page__lottie-container" }, h("div", { ref: el => (this.lottieContainer = el), class: "lottie-animation" })))) : (h("div", { class: "success-page__success-icon" }, h("svg", { width: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96', height: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96', viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z", fill: "#35B093" })))), h("div", { key: '8cec829c088bbb82abbaee49bc8aa4b3ce0dd255', class: "success-page__info-card" }, h("div", { key: 'dd283e1c0b1913fbd07050c719dc5ffb566718cd', class: "success-page__card-row" }, h("rebill-typography", { key: '0833d7e9d757cbb4adbef55c09e9f3fcb0e7e43d', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentMethod')), h("div", { key: 'dd5ea4f63a4153dc3c53e399686f65f605da1d16', class: "success-page__card-value" }, h("div", { key: '4ddcedf9fffaee314059e160fee0982136d1e41c', class: "success-page__payment-method-display" }, this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && (h(h.Fragment, null, h("rebill-card-icon", { key: 'aa0ac5524b9e90e61dd7114a65f8f28b079f0de4', "card-brand": sessionState.data?.cardInformation?.brand || '' }), h("rebill-typography", { key: 'f04a885119d825569f57f26f321bf0e23a56e4b9', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.textPaymentMethodCard()))), this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (h("div", { key: '4536311910dbae3dfaa32a587c6d2d62b671f83d', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("div", { key: '0970685dd7fec8a464034aac051fdf10c7f9342e', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, this.getPaymentMethodConfig(PAYMENT_METHOD_ENUM.BANK_TRANSFER).icons.map(iconName => {
             return h("rebill-icon", { name: iconName, size: "24px" });
-        })), h("rebill-typography", { key: 'd38f2d78ed21f624d14f28808a468f266abf5b0d', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('paymentMethods.bank_transfer'))))))), sessionState?.data?.pricing?.installments &&
-            sessionState?.data?.cardInformation?.installments?.selectedInstallment && (h("div", { key: 'ddc1b34c3821a0fd80ebc70367a5cd47cf0315c8' }, h("div", { key: 'dc4ad24c5204e1f5d1ef80819d8955f8e25fda10', class: "success-page__card-row" }, h("rebill-typography", { key: 'ce9f0481ccfcfe73d4ed0297c70520dcc997b8e1', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('summary.installments')), h("div", { key: '715643ba7dc9dacf7a529779a6d043ec7f88d986', style: {
+        })), h("rebill-typography", { key: '5c22ec9417d4fec4b471a786e102cdce910966ab', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('paymentMethods.bank_transfer'))))))), sessionState?.data?.pricing?.installments &&
+            sessionState?.data?.cardInformation?.installments?.selectedInstallment && (h("div", { key: 'c8085254470360967367e0c697d2173bbea246b0' }, h("div", { key: 'f0142820cf451ea6a4af79d514e5fc5a13ecce1c', class: "success-page__card-row" }, h("rebill-typography", { key: '291b478d45874ff07ebebb62055bee17e8a502c4', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('summary.installments')), h("div", { key: '0f368798d36647e712c8e17db732daa34886e0ee', style: {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '10px',
                 alignItems: 'end',
-            } }, h("rebill-typography", { key: '129d6659702b14a73c2a2661f26484fc8b9742dc', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT, style: { textAlign: 'end' } }, getInstallmentLabelSummary(sessionState.data?.cardInformation?.installments?.selectedInstallment
+            } }, h("rebill-typography", { key: 'e75c7ecdfeedfe8b6c9474c4550110dbc9704b66', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT, style: { textAlign: 'end' } }, getInstallmentLabelSummary(sessionState.data?.cardInformation?.installments?.selectedInstallment
             ?.installment, getRecalculatedInstallmentAmount(sessionState.data?.cardInformation?.installments?.selectedInstallment
             ?.installmentAmount || 0), sessionState.data?.pricing?.currency, sessionState.data?.cardInformation?.installments?.selectedInstallment
             ?.cft, sessionState.data?.cardInformation?.installments?.selectedInstallment
-            ?.model)), h("rebill-typography", { key: 'eec2d4ba268776397940d5f8fe43bbc217b2f111', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, `( ${I18nService.translate('processing.purchaseTotal')}: ${this.getFormattedTotal()} )`), sessionState.data.cardInformation?.installments?.installments.find(installment => installment.installment ===
+            ?.model)), h("rebill-typography", { key: 'd1e2feeb6c580ddd4fc53a70f367909388971fb4', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, `( ${I18nService.translate('processing.purchaseTotal')}: ${this.getFormattedTotal()} )`), sessionState.data.cardInformation?.installments?.installments.find(installment => installment.installment ===
             sessionState.data.cardInformation?.installments?.selectedInstallment
-                ?.installment)?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (h("rebill-typography", { key: '1707867e7fb823b66a6f6f1acb90acd49ac9ca46', variant: "italic", color: COLORS_ENUM.SECONDARY, style: { textAlign: 'end' } }, `${I18nService.translate('installments.interest')}`)))))), h("div", { key: 'e469fbbf928a55b9d747c920e47ba644f9b400ea', class: "success-page__card-row" }, h("rebill-typography", { key: '7edf1ce2a15898d5570ce6d81944360a8eea5ccb', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentDate')), h("rebill-typography", { key: '5e548e95fcccde9c0d830abd2935d1dce8f850ae', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, formatDateTime(this.paymentDate || this.getPaymentDate() || sessionState.createdAt) || '')), h("div", { key: '51a18da1694061e6f4b32abc5f503349384f9056', class: "success-page__card-row" }, h("rebill-typography", { key: '1b4bee996f522bda488da2d58ec42da50dd5ed51', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentEmail')), h("rebill-typography", { key: '226c8ebd81cf86457013554471f23010c0f5b0bb', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, sessionState?.data?.userInformation?.email)), h("div", { key: '46132ee8adabab91f1eee35f2a1c9dfa5e5b6666', class: "success-page__card-row" }, h("rebill-typography", { key: '93cb6ea673d7cb7994a7e4921b2b009b518c5d26', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentReference')), h("rebill-typography", { key: 'a85048802d20f98ad5c2f336d3d30acb9e802596', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT, class: "success-page__reference-number" }, this.referenceNumber || ''))), h("div", { key: 'e1a1075e19999f6b2f160ebcd112601680636bde', class: "success-page__info-card" }, h("rebill-typography", { key: 'f8a12159674177337db7a857a8ec5021189d709e', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.purchaseDetails')), h("div", { key: '9d5242eb354e34ad2d95f0c63260ab089922b403', class: "success-page__card-row" }, h("rebill-typography", { key: 'd377a4e4b29f00581bb4b0e73be68cbdfb577436', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseDetail')), h("rebill-typography", { key: 'd6822c094c1a42b4fb6671290fb36c0f0f7bdb95', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, sessionState?.data?.itemInformation?.title || '')), !this.trialPeriodDays && (h("div", { key: '230b4b1aee46dffd2e9b0c59cb8988804cd3d57f', class: "success-page__card-row" }, h("rebill-typography", { key: '9664a12eb2eec87888c443466894d898fb8c0568', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseSubtotal')), h("rebill-typography", { key: '5d08b744e3fa94e359d95dad8e51f37ddc468028', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedSubtotal()))), sessionState?.data?.pricing?.discountAmount > 0 && (h("div", { key: '6e684b7db98b1e4cd3e5ee99d6fc1b62652a359d', class: "success-page__card-row" }, h("rebill-typography", { key: '3b7d6059fa8307737a3ec69252a1b16657a3730a', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('summary.discount')), h("rebill-typography", { key: '29756625d73aa553277bfa72fd6c20bc9bd3db39', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedDiscountAmount()))), h("div", { key: 'd70c4b5340306a689f7067d6ce9f119cdce82ae9', class: "success-page__card-row" }, h("rebill-typography", { key: '473be66c9ebd6116b26813c0e733dda0666694bc', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseMontoTotal')), h("div", { key: 'd947febfbb746329c03cdf805a1400aec9f2d705', class: "success-page__total-amount-container" }, this.trialPeriodDays > 0 && (h("div", { key: '9ef4851b2ff39c5afc97b50091df5d32a060884a', class: "success-page__trial-pill" }, h("rebill-typography", { key: '2781ceab99ddcb1143a9dbde0e946c31c55157e2', variant: "body2", align: "center", color: COLORS_ENUM.GREEN_TEXT }, I18nService.translate('processing.trialPill', {
+                ?.installment)?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (h("rebill-typography", { key: 'a7a0eb81b444782692034c9a5b18af1356b70c13', variant: "italic", color: COLORS_ENUM.SECONDARY, style: { textAlign: 'end' } }, `${I18nService.translate('installments.interest')}`)))))), h("div", { key: 'f274d45449db12d99982218397b2258454c0e144', class: "success-page__card-row" }, h("rebill-typography", { key: '3232ad074bcb725e0b5d289e215674781b643984', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentDate')), h("rebill-typography", { key: 'f39ed5c14ce3dbbd648a49ddfa1826aebfffc8e9', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, formatDateTime(this.paymentDate || this.getPaymentDate() || sessionState.createdAt) || '')), h("div", { key: 'e89db6cd5048b8649c01cc714e2aa62217e924ea', class: "success-page__card-row" }, h("rebill-typography", { key: '88520367ed3df38494abc3b09fb32570d6047919', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentEmail')), h("rebill-typography", { key: '3f7f5cb7488996247736e1f7dd0da9669547127c', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, sessionState?.data?.userInformation?.email)), h("div", { key: '204a54fcea6b69e52a9173c00b39b4c5c8a8f69d', class: "success-page__card-row" }, h("rebill-typography", { key: '47e99f1191bf0f190d6076ff6419b7c4c0a63dfe', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentReference')), h("rebill-typography", { key: '9f4df7031fcf007817b810c81de06ea0e3574b26', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT, class: "success-page__reference-number" }, this.referenceNumber || ''))), h("div", { key: 'ec0e693b17b2982e6715bebfc1414a9f3fd015d0', class: "success-page__info-card" }, h("rebill-typography", { key: '768e6846d0ad7c0b28aac797d3faa8b9c54178b2', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.purchaseDetails')), h("div", { key: 'fac0b7a4391536ac9d0302ad5d0e28ccf80adc2b', class: "success-page__card-row" }, h("rebill-typography", { key: '74616fc8881792094f4978542f619b7a92527ed2', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseDetail')), h("rebill-typography", { key: 'ba1b24a2ad5736d5ee520046ec16905e48ef43b1', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, sessionState?.data?.itemInformation?.title || '')), !this.trialPeriodDays && (h("div", { key: '709715fe9019f8170a94a2fae4867110eddc57bc', class: "success-page__card-row" }, h("rebill-typography", { key: '0bca6d6d2384ac460a58711707778b378613196c', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseSubtotal')), h("rebill-typography", { key: 'fe0b41d30473d309c6a2f8c5b093a811c28dc2d0', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedSubtotal()))), sessionState?.data?.pricing?.discountAmount > 0 && (h("div", { key: 'f4e8db074e120f7d2a5c4ed8b2e1f787ede63f35', class: "success-page__card-row" }, h("rebill-typography", { key: '8d64ba931d3eb8f9d1b37e220a7ff96109562485', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('summary.discount')), h("rebill-typography", { key: '9905b27eafda074b6ecf3e90559a9163a28653cd', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedDiscountAmount()))), h("div", { key: 'f4ea5720468f9880af8913450fc33827f714bf22', class: "success-page__card-row" }, h("rebill-typography", { key: '0cbf99f711ec2834536f0471b6b4529802794fe8', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseMontoTotal')), h("div", { key: '4f2c420ae59327d608d69979d1c369d4399c512c', class: "success-page__total-amount-container" }, this.trialPeriodDays > 0 && (h("div", { key: 'f118c9433a8f0ec5e0c357b983b93ba7cf3165b2', class: "success-page__trial-pill" }, h("rebill-typography", { key: 'fc0454a0c8a968354e880421bf458c09076a4f4d', variant: "body2", align: "center", color: COLORS_ENUM.GREEN_TEXT }, I18nService.translate('processing.trialPill', {
             days: this.trialPeriodDays,
             count: this.trialPeriodDays,
-        })))), h("rebill-typography", { key: 'a1b0cdbf8481f823e5dae0d47131354e5222184a', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedTotal()))), (this.trialPeriodDays || this.hasDebitDay()) && (h("div", { key: '1cd2d9a4cae856fc0000f7cc6611d7b289c0fce8', class: "success-page__card-divider" })), (this.hasFreeTrial() || this.hasDebitDay()) && (h("div", { key: '2a86a08bd5c95d3900eec270e9f0a3d11557b41d', class: "success-page__next-charge-section" }, h("div", { key: 'd2dfe5d64200f0f2de991dc148a3b532f79bd61d', class: "success-page__next-charge-header" }, h("rebill-typography", { key: 'b6ad35d28492f774943a104dd92b00995ad5244a', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.nextCharge')), h("rebill-typography", { key: 'd21ed9d08043c33e2b37763886512bc58c480aab', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.onDate', {
+        })))), h("rebill-typography", { key: '837ad00c79574053f36059139673056745283433', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedTotal()))), (this.trialPeriodDays || this.hasDebitDay()) && (h("div", { key: '5fe0d5808fa641b824117396d2f71669174aae2f', class: "success-page__card-divider" })), (this.hasFreeTrial() || this.hasDebitDay()) && (h("div", { key: '4a868029e9ac7fe6a54aa34daa5542437b31f624', class: "success-page__next-charge-section" }, h("div", { key: '386cdf33df917b23ba3ba295a08b2948fb0be9a7', class: "success-page__next-charge-header" }, h("rebill-typography", { key: '6f3f562beb70ef93120f15372312c264550f7f47', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.nextCharge')), h("rebill-typography", { key: '46b630206d284af7a75c33619dc5fe6300ea388e', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.onDate', {
             date: this.hasFreeTrial()
                 ? this.getTrialEndDateFormatted()
                 : this.getDebitDateFormatted(),
-        }))), h("div", { key: '5eeae7784dc8c78541a116639fa13e8fb96f7ceb', class: "success-page__card-row" }, h("rebill-typography", { key: '6cfdcceb773ec52d1fb7fa36a6c0158ad5f06c46', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.hasFreeTrial() ? I18nService.translate('processing.atEndOfTrial') : ''), h("rebill-typography", { key: '6ab2b8fca06cb4de1f0d9fc23227384219aec009', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedSubtotal(this.planAmount), ' ', I18nService.translate('processing.perMonth'))))), h("div", { key: '277e71e8c8c919e9e8ffc573a4db7cd9955246fb', class: "success-page__card-divider" }), h("div", { key: 'bc05eea75f64fee85ad1652c8989c857318e3748', class: "success-page__download-container" }, h("svg", { key: 'eeb5ef1db07f872a6c2d43abd1ab8fc71a8480df', class: "download-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9e7300acb5c78da29c4ee855567eec0cc0eb4f03', d: "M13.498 9.83333V12.1667C13.498 12.903 12.9011 13.5 12.1647 13.5H3.83138C3.095 13.5 2.49805 12.903 2.49805 12.1667V9.83333M7.99804 10V2.5M7.99804 10L5.66471 7.66667M7.99804 10L10.3314 7.66667", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("rebill-button", { key: '74d7621df8ad0434fa2b4c174f254435d4066f5f', type: "button", variant: "download", size: "small", onClick: this.handleDownloadReceipt }, h("rebill-typography", { key: 'e61b9a1b07cfba89a2a46bf1817f9d15328852ac', variant: "overline", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.download')))), h("div", { key: 'cc2097e3cc170eace39d192ec6ef913e6af561f7', class: "success-page__contact-info" }, h("rebill-typography", { key: '6b1c2aaffbdf047295267017977ac366eb80b85c', variant: "information-text", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.downloadDescription')))))));
+        }))), h("div", { key: 'b1919b98e0facc9d8e68c2905e967bf6d90415b9', class: "success-page__card-row" }, h("rebill-typography", { key: 'b0c85dd9fe6adf2b4e014741b6b098f27cf9f552', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.hasFreeTrial() ? I18nService.translate('processing.atEndOfTrial') : ''), h("rebill-typography", { key: '6af4c69ad3b293b2c0af703971e67c8c14bd96e6', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getFormattedSubtotal(this.planAmount), ' ', I18nService.translate('processing.perMonth'))))), h("div", { key: '16fd48938a356debc1251f2f6d95dc5bda747b99', class: "success-page__card-divider" }), h("div", { key: '8e74365a032079c54e13581c583f2d808f3e504c', class: "success-page__download-container" }, h("svg", { key: 'e89ec4816ee4344a518287ba6fe6431309ca49b3', class: "download-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cc421397abe682efabc5f0dfc07ed863e40561ef', d: "M13.498 9.83333V12.1667C13.498 12.903 12.9011 13.5 12.1647 13.5H3.83138C3.095 13.5 2.49805 12.903 2.49805 12.1667V9.83333M7.99804 10V2.5M7.99804 10L5.66471 7.66667M7.99804 10L10.3314 7.66667", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("rebill-button", { key: '81cc88001158130315bb70af6e76dc37d8cebf19', type: "button", variant: "download", size: "small", onClick: this.handleDownloadReceipt }, h("rebill-typography", { key: '1566d391c697d99c31d991b964e649fba7866a07', variant: "overline", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.download')))), h("div", { key: 'fd6402104418368520b007ea3e6ddd305431e0e9', class: "success-page__contact-info" }, h("rebill-typography", { key: '00c8d50544a1653bc0c8fbad649f525e475f04f1', variant: "information-text", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.downloadDescription')))))));
     }
     static get is() { return "success-page"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/checkout-form/checkout-form.js

@@ -55,7 +55,7 @@ export class CheckoutForm {
         }
     }
     render() {
-        return (h("rebill-form", { key: '8bccdc58eef029f6ed82b4fe76413079e082389b', ref: el => (this.formElement = el), validationSchema: this.validationSchema, initialData: this.initialData, onSubmit: (event) => this.handleSubmit(event.detail), onChange: (event) => this.handleChange(event.detail), renderForm: this.renderForm }));
+        return (h("rebill-form", { key: '913b8b648f75c30fe3ee82b877c71b73e8e7a9ef', ref: el => (this.formElement = el), validationSchema: this.validationSchema, initialData: this.initialData, onSubmit: (event) => this.handleSubmit(event.detail), onChange: (event) => this.handleChange(event.detail), renderForm: this.renderForm }));
     }
     static get is() { return "rebill-checkout-form"; }
     static get properties() {

package/dist/collection/components/checkout/otp/otp.js

@@ -94,17 +94,17 @@ export class Otp {
         }
     };
     render() {
-        return (h("div", { key: '3bc40c6b51638c164203999e2b15aabaa2310dd6', class: "otp__otp-container" }, h("div", { key: '2a8c4c4abb0d8d4e54ba49ad456480622fd9a08a', class: "otp__user-information" }, h("div", { key: '082cf7a3b04d2c706b6b113cc4b945a663de15bb', class: "otp__otp-description-container" }, h("rebill-typography", { key: '77dd174b9a8d9889c12f4a4db0c8a72e1e8e2e85', variant: "body2", class: "otp__otp-description" }, I18nService.translate('otp.description')), h("rebill-typography", { key: '8f5e8cb60e361f4d76b88d9134b5e9bafb8a57e7', variant: "subtitle-bold", class: "otp__otp-description-digits" }, ' ', h("strong", { key: '886b8486ca1caf2d914e553b6e83db1822531f42' }, I18nService.translate('otp.descriptionDigits')), ' '), h("rebill-typography", { key: '6fa12a2e4137fbeb5fc3d9489c979091aaa09a87', variant: "body2", class: "otp__otp-description-email" }, I18nService.translate('otp.descriptionEmail'))), h("rebill-typography", { key: '74a00be12cdbb80d5830a703e5f69dae6bccfd5c', variant: "body2", class: "otp__otp-email-line" }, sessionState.data.userInformation.email, ' ', !sessionState.data.prefilledData?.email && (h("span", { key: 'feda3a02bae97ec34d2dcff455c3df132f80fc34', class: "otp__change-email", onClick: () => {
+        return (h("div", { key: '1124eac37dc54f6d3e4fdf8575bae2ec51e0ad9b', class: "otp__otp-container" }, h("div", { key: 'dd578affb2dd03d93d5f799340f545b4e8e49684', class: "otp__user-information" }, h("div", { key: '3668bd0dc5834b0af06df4cf1062de1b6d9573fb', class: "otp__otp-description-container" }, h("rebill-typography", { key: '8f187701066eab97cd715d7d10e9abe54ccf8df5', variant: "body2", class: "otp__otp-description" }, I18nService.translate('otp.description')), h("rebill-typography", { key: 'cdeb77366d825819ba95aef6bd40bc85d6a63631', variant: "subtitle-bold", class: "otp__otp-description-digits" }, ' ', h("strong", { key: 'c31c005123e3d7e6abba74a4ca9f47740ed90f0c' }, I18nService.translate('otp.descriptionDigits')), ' '), h("rebill-typography", { key: '8863a76a9b9b901989958913849d0636916d6070', variant: "body2", class: "otp__otp-description-email" }, I18nService.translate('otp.descriptionEmail'))), h("rebill-typography", { key: 'ef2bbdf4e25f0a57f4bede92478fa01d8ae375d6', variant: "body2", class: "otp__otp-email-line" }, sessionState.data.userInformation.email, ' ', !sessionState.data.prefilledData?.email && (h("span", { key: 'bdd7af00af0eac899c545962d9e4c6cfe509bd58', class: "otp__change-email", onClick: () => {
                 this.otpValue = '';
                 this.error = false;
                 this.returnForm.emit(false);
-            } }, I18nService.translate('otp.change'))))), h("input-otp", { key: 'd34b114b71d335e10aabec484d79accca4cfb20d', otp: this.otpValue, onOtpChange: event => this.handleOtpChange(event.detail), error: this.error ? I18nService.translate('otp.error') : '' }), this.isVerifying && (h("div", { key: 'ee9a763d8d58ef2a80486b972b99fc22699121b5', class: "otp__verifying-container" }, h("rebill-typography", { key: 'c715e750cacf1a5c3248dc1287e911a50fc26ce9', variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('otp.verifyingCode')), h("div", { key: '2fb434d44c08cc078af406daccad3f1949158a2e', class: "otp__spinner" }))), h("rebill-button", { key: '6d4763e7a42f813d286b99b89bd713c6196c940a', type: "button", variant: "outline", theme: this.isTimerRunning ? 'secondary' : 'primary', disabled: this.isTimerRunning, onClick: this.handleResendCode, size: "small", style: { height: '24px', marginBottom: '8px' } }, this.isTimerRunning
+            } }, I18nService.translate('otp.change'))))), h("input-otp", { key: '7471c843f8dd5450d8c62027b014d9fdb94f1ba0', otp: this.otpValue, onOtpChange: event => this.handleOtpChange(event.detail), error: this.error ? I18nService.translate('otp.error') : '' }), this.isVerifying && (h("div", { key: 'ae324f212d96bf320da9cbb3d22dc85b6d186825', class: "otp__verifying-container" }, h("rebill-typography", { key: '0b8014cf9441a4f972bad53d02494bbf25378aca', variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('otp.verifyingCode')), h("div", { key: '7969178c1d69da5c9445752f75ae029f3783a34d', class: "otp__spinner" }))), h("rebill-button", { key: 'ae03bb0fda79d6abb90d376fec3fee1fca92931c', type: "button", variant: "outline", theme: this.isTimerRunning ? 'secondary' : 'primary', disabled: this.isTimerRunning, onClick: this.handleResendCode, size: "small", style: { height: '24px', marginBottom: '8px' } }, this.isTimerRunning
             ? `${I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`
-            : I18nService.translate('otp.resendCode')), this.codeResent && (h("div", { key: 'd327976319a3f9a2b104f99cc0bbc508cba46abc', class: "otp__code-resent-container" }, h("rebill-typography", { key: 'b80f6df3092a27aa1664089c7203cc900b9888e1', variant: "subtitle2", color: COLORS_ENUM.GREEN }, h("rebill-icon", { key: '0ac3c09556cb99a4a3bedcab47800aef298de265', name: "check-radio" }), I18nService.translate('otp.codeResent')))), h("rebill-alert", { key: '987b3222a320a5d8f68792f27c149085bfae1e77', class: "otp__rebill-alert", type: "secure", variant: "variant-info", message: I18nService.translate('otp.infoMessage'), icon: "circle-info", alertTitle: I18nService.translate('otp.infoTitle'), colorIcon: COLORS_ENUM.PRIMARY_DARK_LIGHT }), h("div", { key: '82ad4a1f2b2a557a7bbacd089681f46bca99e35c', class: "otp__alternative" }, h("rebill-typography", { key: 'b821225ea5cb63041bc11763420c9982bfd87577', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK }, "o")), h("div", { key: '83efad3f58efaadcac27bc82868e19180aa39043', class: "otp__guest-options" }, h("rebill-button", { key: 'd2df54d921231cb411cb0b61d486555bea706b23', type: "button", variant: "outline", theme: "secondary", size: "medium", onClick: () => {
+            : I18nService.translate('otp.resendCode')), this.codeResent && (h("div", { key: '987f6e8c24dcff5a25ba2156d0385b5f3d926b23', class: "otp__code-resent-container" }, h("rebill-typography", { key: '90fa96b10fb27aeff99945467f950b47dbb542b6', variant: "subtitle2", color: COLORS_ENUM.GREEN }, h("rebill-icon", { key: '348d5aeb1519c42a2c0e55b021bb7dc1fea7d241', name: "check-radio" }), I18nService.translate('otp.codeResent')))), h("rebill-alert", { key: 'ffe394d4d54e1325d19da201e6e523f7473d0302', class: "otp__rebill-alert", type: "secure", variant: "variant-info", message: I18nService.translate('otp.infoMessage'), icon: "circle-info", alertTitle: I18nService.translate('otp.infoTitle'), colorIcon: COLORS_ENUM.PRIMARY_DARK_LIGHT }), h("div", { key: 'ef979f9b54840511db1ea6dcb2fdeee728a5c162', class: "otp__alternative" }, h("rebill-typography", { key: 'f4b528125adf4186ba098a9b835b69109f58b30c', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK }, "o")), h("div", { key: 'e2b1f77e9a374509e8109ff6bb9937a524c03060', class: "otp__guest-options" }, h("rebill-button", { key: 'd397f7db305d6b7790f7ac485e3765c94a8b64e0', type: "button", variant: "outline", theme: "secondary", size: "medium", onClick: () => {
                 this.otpValue = '';
                 this.error = false;
                 this.returnForm.emit(false);
-            } }, I18nService.translate('otp.continueAsGuest')), h("rebill-alert", { key: '7c7bf4d864458c2157b591cde80e4276fddd9acf', type: "secure", variant: "variant-secure", icon: "lock-outline", message: I18nService.translate('otp.secureMessage') }))));
+            } }, I18nService.translate('otp.continueAsGuest')), h("rebill-alert", { key: 'f51cad69765e40648182d9e0d37fd7a8f20aa72d', type: "secure", variant: "variant-secure", icon: "lock-outline", message: I18nService.translate('otp.secureMessage') }))));
     }
     static get is() { return "otp-component"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/payment-method-selector/card-fields/card-fields-wrapper.js

@@ -9,9 +9,9 @@ export class CardFieldsWrapper {
     showDocument;
     customCSS;
     render() {
-        return (h("div", { key: '475cc2c6587cc8be54bd57a0c1d7e671aa8edb9c', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("card-iframe", { key: '3480c89afadb9ba070b0c79a1ccd044d0a0c9862', customCSS: this.customCSS }), !renewalState.isInitialized &&
+        return (h("div", { key: 'd2d13c8b43ac83c032a20a27cd26a35a27478270', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("card-iframe", { key: '88bedb4599965f2e811d21a015c503e468a421cd', customCSS: this.customCSS }), !renewalState.isInitialized &&
             sessionState.data?.itemInformation?.type !== SESSION_ITEM_TYPE_ENUM.PLAN &&
-            sessionState.data.cardInformation?.installments?.installments.length > 0 && (h("rebill-installments", { key: 'd91afd60efd4ad18762339569dbeea4573aa2235', error: this.installmentsError })), this.showDocument && (h("card-identification", { key: '4ea5405c165c38dab857f64427624d98b307a08e', documentTypeError: this.documentTypeError, documentNumberError: this.documentNumberError }))));
+            sessionState.data.cardInformation?.installments?.installments.length > 0 && (h("rebill-installments", { key: 'e5e2f139eb7b0e857d48b7e8ae20b1deba4e4bf3', error: this.installmentsError })), this.showDocument && (h("card-identification", { key: '150f5355fe805e3ec12aa91f322a2096a43ee9ca', documentTypeError: this.documentTypeError, documentNumberError: this.documentNumberError }))));
     }
     static get is() { return "card-fields-wrapper"; }
     static get properties() {

package/dist/collection/components/checkout/payment-method-selector/card-fields/identification/identification.js

@@ -62,7 +62,7 @@ export class Identification {
             label: documentType.value,
             value: documentType.value,
         }));
-        return (h(h.Fragment, null, h("rebill-input-combo", { key: '23210f89a5683feb3b8ac77eacc1515940ce7a9d', "select-id": "documentType", "input-id": "documentNumber", "on-input": this.handleInputChange, "select-placeholder": I18nService.translate('document.typePlaceholder'), "input-placeholder": I18nService.translate('document.numberPlaceholder'), error: I18nService.translate(error), options: options, disabled: this.disabled })));
+        return (h(h.Fragment, null, h("rebill-input-combo", { key: '3a995ac7c50c2b36c0827ab9d9696b3682160311', "select-id": "documentType", "input-id": "documentNumber", "on-input": this.handleInputChange, "select-placeholder": I18nService.translate('document.typePlaceholder'), "input-placeholder": I18nService.translate('document.numberPlaceholder'), error: I18nService.translate(error), options: options, disabled: this.disabled })));
     }
     static get is() { return "card-identification"; }
     static get properties() {

package/dist/collection/components/checkout/payment-method-selector/card-fields/iframe/CardIframe.js

@@ -334,12 +334,12 @@ export class CardIframe {
         }
     };
     render() {
-        return (h("div", { key: '6acb3fa64fcb457467278d8a051839b47525c330', style: {
+        return (h("div", { key: 'bbc86deffbe89ea5d34d8373eecc4d2c91a68730', style: {
                 width: '100%',
                 height: this.iframeHeight,
                 position: 'relative',
                 overflow: 'hidden',
-            } }, !this.iframeLoaded && h("card-skeleton", { key: '908424a0b5430e758592f3a03095ac18b5a82656' }), h("iframe", { key: '231b2bb1f1d1b2f8c9c6c70d191a61d2fb48c207', ref: el => (this.iframeRef = el), src: this.getIframeURL(), style: {
+            } }, !this.iframeLoaded && h("card-skeleton", { key: '8c2505c2a2411374c3af667e779f28dd62dc8ebe' }), h("iframe", { key: '6f7ae6cf9d4899370b88cb61521bb622b87d9e0f', ref: el => (this.iframeRef = el), src: this.getIframeURL(), style: {
                 width: '100%',
                 height: '100%',
                 border: 'none',

package/dist/collection/components/checkout/payment-method-selector/card-fields/iframe/skeleton/CardSkeleton.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class CardSkeleton {
     render() {
-        return (h("div", { key: '8d4ebddb59892f6dbb090290f96f1775b06ca146', class: "iframe-skeleton" }, h("div", { key: '143f20cdfa98fd72eaf1423074b9427329f91bb8', class: "input-skeleton" }), h("div", { key: '62ce9251b51d34382f4c9e0882d5c67139b72456', class: "input-skeleton" })));
+        return (h("div", { key: '65268605af4713cf31ea230eb2ca28372b462ae9', class: "iframe-skeleton" }, h("div", { key: '703a201ac037d042b1ab8a4727c17b8ab85cdedc', class: "input-skeleton" }), h("div", { key: 'f2dbb0d69cf6b4fa7f5b51c7db8ab5b0da0ea32d', class: "input-skeleton" })));
     }
     static get is() { return "card-skeleton"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/payment-method-selector/card-fields/installments/installments.js

@@ -40,11 +40,11 @@ export class Installments {
         });
     }
     render() {
-        return (h("div", { key: '2f60849281be2e756c126b23cd7b261711e35c56' }, h("rebill-input-select", { key: this.isDisabled.toString(), id: "installments", variant: "outlined", value: this.value, options: sessionState.data.cardInformation?.installments?.installments.map(installment => ({
+        return (h("div", { key: '4af075549b78b088506e275cb19a75967a9ae39f' }, h("rebill-input-select", { key: this.isDisabled.toString(), id: "installments", variant: "outlined", value: this.value, options: sessionState.data.cardInformation?.installments?.installments.map(installment => ({
                 label: getInstallmentLabel(installment.installment, getRecalculatedInstallmentAmount(installment.installmentAmount), sessionState.data.pricing?.currency, installment.cft, installment.model),
                 value: installment?.installment?.toString(),
             })) || [], loading: sessionState.data.fetchingInstallments, placeholder: this.placeholder, disabled: this.isDisabled, "on-input": this.handleInstallments, error: I18nService.translate(this.error) }), sessionState.data.cardInformation?.installments?.installments.find(installment => installment.installment ===
-            sessionState.data.cardInformation?.installments?.selectedInstallment?.installment)?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (h("rebill-typography", { key: '552a970b2345f074bcb83f9a53ec4b04cf202c6e', variant: "italic", color: COLORS_ENUM.SECONDARY }, I18nService.translate('installments.interest')))));
+            sessionState.data.cardInformation?.installments?.selectedInstallment?.installment)?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (h("rebill-typography", { key: '812dd9796b719b349ed1a07ad4619a3d619f2ba8', variant: "italic", color: COLORS_ENUM.SECONDARY }, I18nService.translate('installments.interest')))));
     }
     static get is() { return "rebill-installments"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/rebill-footer/rebill-footer.js

@@ -23,7 +23,7 @@ export class RebillFooter {
         SessionStore.changeLanguage(event.detail.value);
     };
     render() {
-        return (h("div", { key: '40eed1b41c08658b9cf0e002e780f5afab369ee3', class: "rebill-footer__footer-content" }, h("div", { key: 'ef17c0b4dd2ec599aa9e7238af84fed8c47bcc37', class: "terms-and-conditions" }, !isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) && (h("rebill-typography", { key: '936b33c8e1efd322db8a660456df22bfbcec93ab', variant: "subtitle3", color: COLORS_ENUM.SECONDARY, class: "footer-powered" }, I18nService.translate('footer.poweredBy'))), h("rebill-icon", { key: '7c385f29b85e738198512f995b55f87d6bf320a4', name: "rebill-logo", color: COLORS_ENUM.SECONDARY }), h("rebill-icon", { key: '4dc36474db4f67f4564f51aae3af12f620ec6890', name: "rebill", color: COLORS_ENUM.SECONDARY }), h("rebill-typography", { key: 'f541c9ff1ff3d99f5f536bf65a93adea42f7c7a6', variant: "subtitle3", color: COLORS_ENUM.SECONDARY, class: "footer-separator" }, "|"), h("rebill-typography", { key: '02991f280839ef40f7b411af243a2e12e679c385', variant: "subtitle3", color: COLORS_ENUM.SECONDARY, class: "footer-link" }, h("a", { key: 'ce498289420535ca8a1e70f395ea4d3b9d3d8fbb', href: "https://www.rebill.com/terminos-y-condiciones-usuarios-finales", target: "_blank" }, I18nService.translate('footer.termsAndConditions')))), h("div", { key: '1126a3165ef798e73a76b246914f2c26bce37b1c', class: "language-selector" }, h("rebill-icon", { key: '57736ddea89f3dd830ff047bfb0bc425d29efe27', name: "world" }), h("rebill-input-select", { key: '18fe8e7f1838aab4a97367bdf6480f5c5b52116e', id: "language-selector", variant: "underlined", backgroundColor: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP)
+        return (h("div", { key: 'a01a21f9dcecdc73e30311dff6329545233ffa2e', class: "rebill-footer__footer-content" }, h("div", { key: 'f3ebd54eda491ff9ce727260c4475ca32f831cbf', class: "terms-and-conditions" }, !isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) && (h("rebill-typography", { key: '9b3587814c80ea82c98f46793c3a9f7466fe8fc7', variant: "subtitle3", color: COLORS_ENUM.SECONDARY, class: "footer-powered" }, I18nService.translate('footer.poweredBy'))), h("rebill-icon", { key: 'b5f0eda6f26619143ab7f45d392a07942e83c0d1', name: "rebill-logo", color: COLORS_ENUM.SECONDARY }), h("rebill-icon", { key: 'bb3d90ca79ce26e4cf23b09ed880b4ebb1268ab8', name: "rebill", color: COLORS_ENUM.SECONDARY }), h("rebill-typography", { key: 'b8eda0b1357fb13bafee74c60199186e029663c2', variant: "subtitle3", color: COLORS_ENUM.SECONDARY, class: "footer-separator" }, "|"), h("rebill-typography", { key: '68eadcd5b8043fbabb55d8208beb436bbed73c10', variant: "subtitle3", color: COLORS_ENUM.SECONDARY, class: "footer-link" }, h("a", { key: 'e7499bb9ff3c7daa5ffe61a25563e1d18d379e6a', href: "https://www.rebill.com/terminos-y-condiciones-usuarios-finales", target: "_blank" }, I18nService.translate('footer.termsAndConditions')))), h("div", { key: '06e153ccd9092a6d0a9dfc44c59a6850288a72b5', class: "language-selector" }, h("rebill-icon", { key: '994a74a0af832f9cabf2e9ff0fd53c0b812b25d9', name: "world" }), h("rebill-input-select", { key: 'ba481c0e98aff6092ea2901f61c81dfc928c4c38', id: "language-selector", variant: "underlined", backgroundColor: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP)
                 ? ''
                 : 'var(--rebill-color-background-left)', options: [
                 { label: 'EN', value: LOCALES_ENUM.EN },

package/dist/collection/components/checkout/user-information/user-information-phone.js

@@ -56,7 +56,7 @@ export class UserInformationPhone {
         }
     }
     render() {
-        return (h(Host, { key: '8055d21e666b3d2678c413a1ccf5624059fbaa8b' }, h("div", { key: '4a39e79589f206ff2db4f644583645662f53554e' }, h("rebill-input-phone", { key: 'bb94d618d16788b120bb16978cb78efbf03c06d1', disabled: this.disabled, validationErrorId: "isValidPhoneNumber", phoneNumberId: "phoneNumber", countryCodeId: "countryCodePhoneNumber", placeholder: I18nService.translate('userInformation.phoneNumberPlaceholder'), "initial-country": this.countryCode?.toLowerCase() || 'ar', error: this.error, required: true, searchable: true, searchPlaceholder: I18nService.translate('userInformation.searchCountriesPlaceholder') }))));
+        return (h(Host, { key: '22a19f5259c0c44af49eccf475a23f2184f86aa7' }, h("div", { key: '936709bd5c83400535819879936335948358d0dd' }, h("rebill-input-phone", { key: '65163b7395a0219ced0b86bd65041afe4ca07dee', disabled: this.disabled, validationErrorId: "isValidPhoneNumber", phoneNumberId: "phoneNumber", countryCodeId: "countryCodePhoneNumber", placeholder: I18nService.translate('userInformation.phoneNumberPlaceholder'), "initial-country": this.countryCode?.toLowerCase() || 'ar', error: this.error, required: true, searchable: true, searchPlaceholder: I18nService.translate('userInformation.searchCountriesPlaceholder') }))));
     }
     static get is() { return "user-information-phone"; }
     static get originalStyleUrls() {