rebill-web-components-sdk 1.8.33 → 1.8.34-beta.0

package/dist/cjs/apm-checkout_19.cjs.entry.js

@@ -8,7 +8,7 @@ var colorClassMapper = require('./color-class-mapper-CtKnrxwI.js');
 var googleMaps_service = require('./google-maps.service-BA3zCexY.js');
 var html2canvas = require('./pdf-generator-DV2OJH6J.js');
 var clipboard = require('./clipboard-QX5QCUa7.js');
-var renewal_store = require('./renewal.store-C9AesGY1.js');
+var renewal_store = require('./renewal.store-BaH9Id4E.js');
 var index_esm = require('./index.esm-4vgDEvoy.js');
 var assets = require('./assets-NXtaSrgy.js');
 var breakpoint = require('./breakpoint-CWd4pcNv.js');
@@ -556,9 +556,9 @@ const CardFieldsWrapper = class {
     showDocument;
     customCSS;
     render() {
-        return (index$1.h("div", { key: '5136861b53a04501727e77298fd35c3e3dc35ddb', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, index$1.h("card-iframe", { key: 'd9305c548cdfcfc5a89a4a9cea4abe320655ce93', customCSS: this.customCSS }), !renewal_store.renewalState.isInitialized &&
+        return (index$1.h("div", { key: '5f1248723599b981c30f9a54124b5a94a5f53dad', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, index$1.h("card-iframe", { key: '8bfe7e4a7b26c30bf1de8c4d937690a429429f3a', customCSS: this.customCSS }), !renewal_store.renewalState.isInitialized &&
             i18n_service.state.data?.itemInformation?.type !== i18n_service.SESSION_ITEM_TYPE_ENUM.PLAN &&
-            i18n_service.state.data.cardInformation?.installments?.installments.length > 0 && (index$1.h("rebill-installments", { key: '4dbd0ba36b3c99a857636201498f4186c71b1a28', error: this.installmentsError })), this.showDocument && (index$1.h("card-identification", { key: '58f62d19b4c5c5cfd1a6ad7437f767b054917741', documentTypeError: this.documentTypeError, documentNumberError: this.documentNumberError }))));
+            i18n_service.state.data.cardInformation?.installments?.installments.length > 0 && (index$1.h("rebill-installments", { key: 'd95b4b20414db198f5483cb1dc1ac070e0204009', error: this.installmentsError })), this.showDocument && (index$1.h("card-identification", { key: '11d048b3a791db2061befd07a4b33a039e03de24', documentTypeError: this.documentTypeError, documentNumberError: this.documentNumberError }))));
     }
 };
 
@@ -4676,10 +4676,10 @@ const InputPhone = class {
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
         const displayError = translatedError || translatedValidationError;
-        return (index$1.h("div", { key: '4c2d918c3ab74ad51d73b38d6f46a6ead8d72682', class: "input-container" }, index$1.h("div", { key: '98eb3935a957dbafffca5f72c736537bb533b65f', class: inputClasses }, index$1.h("div", { key: '710ee9264f5da6467e7e8484084ea4ea1754b8a3', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, index$1.h("span", { key: '633a1f80fef6c8f194235f8e7caeeff5b1118032', class: "flag" }, this.selectedCountry.flag), index$1.h("span", { key: 'abdbf7c6fdb491888489bcc919ae41b73c016b7e', class: "dial-code" }, this.selectedCountry.dialCode), index$1.h("span", { key: 'c8cf27250a6cdea2b4e3ee955c37179ed4a793d4', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (index$1.h("div", { key: '678d98ca2988fd02cda20ecdeb8936d09c5be2f3', class: "country-dropdown" }, this.searchable && (index$1.h("div", { key: '14f05e18b67b12b0617563b3b832adcfc528c9ea', class: "search-container", onClick: this.handleSearchClick }, index$1.h("div", { key: 'd0301d235db091cbd3f04cf0548b9da93febe2bc', class: "search-input-wrapper" }, index$1.h("rebill-icon", { key: 'd710e1a3df6664cbbfb14249014a4e21295c7e29', name: "search", size: "16px", class: "search-icon" }), index$1.h("input", { key: '684ed183b3748a6e4da7f5a783d3234dd2f335d3', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (index$1.h("button", { key: '12f252406e3ecf9e0965eae9785d1cccca94e7f8', type: "button", class: "clear-search", onClick: event => {
+        return (index$1.h("div", { key: '10cfe50d2b05b73d1c5c908d1219408d1695f18b', class: "input-container" }, index$1.h("div", { key: 'f74c9646e980ffaf53527f17737c2706998b612d', class: inputClasses }, index$1.h("div", { key: 'fb01d51d718603925839be3810c5ae4f3646293b', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, index$1.h("span", { key: '4236bf3ad916ae749e2801370b333318d0e232fc', class: "flag" }, this.selectedCountry.flag), index$1.h("span", { key: '9d0edd7c8cf05120844ea7b5134a4ac327aa1ced', class: "dial-code" }, this.selectedCountry.dialCode), index$1.h("span", { key: 'a08a740944e9c00f4a22e4bb1632029c4946284d', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (index$1.h("div", { key: 'f651d9017bac7448cfd55dd2712b67fe0099cf2a', class: "country-dropdown" }, this.searchable && (index$1.h("div", { key: '0b5c593a2aa8976a79eb45b159ef7242c6736469', class: "search-container", onClick: this.handleSearchClick }, index$1.h("div", { key: 'd44705bca279fbbf1c3992e90014db93a0eda2c2', class: "search-input-wrapper" }, index$1.h("rebill-icon", { key: '0bfe2d73b46de9db3fc6a46b62f4720cd8ebbd59', name: "search", size: "16px", class: "search-icon" }), index$1.h("input", { key: '4aec9d63677ef103a9e23b833b6361fecf2e6c44', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (index$1.h("button", { key: 'fc068fa9c0484aa3c1eb35237fc08441854a66e8', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, index$1.h("rebill-icon", { key: '56e4cd9c246ac490c7d853875243393a35681b1a', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (index$1.h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, index$1.h("span", { class: "flag" }, country.flag), index$1.h("span", { class: "country-name" }, country.name), index$1.h("span", { class: "dial-code" }, country.dialCode))))) : (index$1.h("div", { class: "no-results" }, "No se encontraron resultados")))), index$1.h("input", { key: '6c5b6f8fd3d58a821b503d8f88f75a8390270647', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && index$1.h("span", { key: '9990ca38ae106410434a39f952cb31266497f4c4', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, index$1.h("rebill-icon", { key: 'f62e8e989586b3af2f72261828f00e56216d5302', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (index$1.h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, index$1.h("span", { class: "flag" }, country.flag), index$1.h("span", { class: "country-name" }, country.name), index$1.h("span", { class: "dial-code" }, country.dialCode))))) : (index$1.h("div", { class: "no-results" }, "No se encontraron resultados")))), index$1.h("input", { key: 'bd1553158f5eb5a2548f7e037843362e4a9e04c6', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && index$1.h("span", { key: 'e2f7d553f3f881a26ad5786c1205be08a99449fc', class: "error-message" }, displayError)));
     }
 };
 InputPhone.style = inputPhoneCss;
@@ -4765,11 +4765,11 @@ const SelectableCard = class {
         this.selectableCardClick.emit(this.cardKey);
     };
     render() {
-        return (index$1.h("button", { key: '5c0c943a5423aa1fdfc9f863d79ca642c9b7ab95', class: {
+        return (index$1.h("button", { key: '4c24158fbfb72e9300cb020667c0fa67f88d6775', class: {
                 'selectable-card': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, index$1.h("div", { key: '1a445dd4149ac71e22db55af4da047ae0df63fa9', class: "icon" }, index$1.h("slot", { key: '8e25979ec5567c23844466f2b078dc746cee3690', name: "icon" })), index$1.h("span", { key: 'd34e5cc893acb3a03fa05672d7d068a9e7d19dca', class: "label" }, this.label)));
+            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, index$1.h("div", { key: '5cb1e550f3e7ac20b1067df1d1071eb02612fa53', class: "icon" }, index$1.h("slot", { key: 'c11b6b312f80b180e0b6dde93469d32f8c6ebc06', name: "icon" })), index$1.h("span", { key: '60c89e7aa7c9af391c9e2f0de0f20872d1e4e9ca', class: "label" }, this.label)));
     }
 };
 SelectableCard.style = selectableCardCss;
@@ -4785,14 +4785,14 @@ const SinglePaymentMethod = class {
     paymentMethodDetails;
     icons = [];
     render() {
-        return (index$1.h("div", { key: '0083cbb1efa4d31cdcdad66c40a926da75097b8c', class: "single-payment-method" }, index$1.h("div", { key: '8105522c55eff7d35b9ac3c905cde1e849af3ba7', class: "payment-method" }, this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD && index$1.h("rebill-icon", { key: 'f322ab93d2741ba0db1c99bfd227207012ff1ce6', name: "card" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry === 'AR' && index$1.h("rebill-icon", { key: 'a47cd14a9538f9dd77406ff55b132504b3e2184c', name: "qr-code" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry !== 'AR' && index$1.h("rebill-icon", { key: '96025d544c7542a8cdf5e67ad2b827cef8ae7c65', name: "bank" }), index$1.h("rebill-typography", { key: '73a2f8453bf364c19ee8f9af50628fbbc1f3d81c', variant: "body2-small", color: colorClassMapper.COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, i18n_service.I18nService.translate(this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD
+        return (index$1.h("div", { key: '156c1e562b2444664488a2380d42a146d931b4d2', class: "single-payment-method" }, index$1.h("div", { key: '92438af1d82d60ecd43095ecd2b20e5791531df7', class: "payment-method" }, this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD && index$1.h("rebill-icon", { key: '0d070da6565d34eaf7d96f68b7bc3a6965a9c0d8', name: "card" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry === 'AR' && index$1.h("rebill-icon", { key: '39fca9b18700e74ae5ca04762448b0d97fbbf53a', name: "qr-code" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry !== 'AR' && index$1.h("rebill-icon", { key: '3f53faaf50581c921016d058ffa867d08716af96', name: "bank" }), index$1.h("rebill-typography", { key: 'ebf2f81bbcc27e0cc32d609991f7ffbdd8bd65d1', variant: "body2-small", color: colorClassMapper.COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, i18n_service.I18nService.translate(this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD
             ? 'paymentMethods.cardDescription'
             : this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
                 this.currencyCountry === 'AR'
                 ? 'paymentMethods.bank_transfer_qr'
-                : `paymentMethods.${this.paymentMethod}`))), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER && (index$1.h("div", { key: '136cb1d4f9d4e1788688ceabaf229b2a5d04fc16', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => index$1.h("rebill-icon", { name: iconName, key: iconName }))) : (index$1.h("rebill-icon", { name: "card" }))))));
+                : `paymentMethods.${this.paymentMethod}`))), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER && (index$1.h("div", { key: '570bcb9415b1a4d65482c3d52d497c3a9829f98e', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => index$1.h("rebill-icon", { name: iconName, key: iconName }))) : (index$1.h("rebill-icon", { name: "card" }))))));
     }
 };
 SinglePaymentMethod.style = singlePaymentMethodCss;
@@ -4857,7 +4857,7 @@ const UserInformationPhone = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '58047d7c4a5be632008532c3579106baa102ac8d' }, index$1.h("div", { key: 'aa120414d1b730bb782aa3e41c243678137383a2' }, index$1.h("rebill-input-phone", { key: '31ff24440e54d19cc4c0fc2ed5c4e22e47be6f4e', disabled: this.disabled, validationErrorId: "isValidPhoneNumber", phoneNumberId: "phoneNumber", countryCodeId: "countryCodePhoneNumber", placeholder: i18n_service.I18nService.translate('userInformation.phoneNumberPlaceholder'), "initial-country": this.countryCode?.toLowerCase() || 'ar', error: this.error, required: true, searchable: true, searchPlaceholder: i18n_service.I18nService.translate('userInformation.searchCountriesPlaceholder') }))));
+        return (index$1.h(index$1.Host, { key: 'f5a7cde227c1bd554c5010b50704f3fb6b6502d9' }, index$1.h("div", { key: '4f9c6dfb9105d29d0b7d7368e333b8ecf6951fba' }, index$1.h("rebill-input-phone", { key: '23e25f0cf70d3fedf4f94fa5ff8041e77402b732', disabled: this.disabled, validationErrorId: "isValidPhoneNumber", phoneNumberId: "phoneNumber", countryCodeId: "countryCodePhoneNumber", placeholder: i18n_service.I18nService.translate('userInformation.phoneNumberPlaceholder'), "initial-country": this.countryCode?.toLowerCase() || 'ar', error: this.error, required: true, searchable: true, searchPlaceholder: i18n_service.I18nService.translate('userInformation.searchCountriesPlaceholder') }))));
     }
 };
 UserInformationPhone.style = userInformationCss;

package/dist/cjs/card-identification_5.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-C-VTnc0I.js');
 var index$1 = require('./index-BCzOaoSU.js');
 var i18n_service = require('./i18n.service-DjVTlGfF.js');
-var renewal_store = require('./renewal.store-C9AesGY1.js');
+var renewal_store = require('./renewal.store-BaH9Id4E.js');
 var config = require('./config-ClgjQet_.js');
 var installmentUtils = require('./installment-utils-DmE9Dn69.js');
 var colorClassMapper = require('./color-class-mapper-CtKnrxwI.js');
@@ -70,7 +70,7 @@ const Identification = class {
             label: documentType.value,
             value: documentType.value,
         }));
-        return (index.h(index.h.Fragment, null, index.h("rebill-input-combo", { key: '6823049ae91bcbbf61c0b0e9b913ae4b581e21b9', "select-id": "documentType", "input-id": "documentNumber", "on-input": this.handleInputChange, "select-placeholder": i18n_service.I18nService.translate('document.typePlaceholder'), "input-placeholder": i18n_service.I18nService.translate('document.numberPlaceholder'), error: i18n_service.I18nService.translate(error), options: options, disabled: this.disabled })));
+        return (index.h(index.h.Fragment, null, index.h("rebill-input-combo", { key: '075b874873f297d3e2e72e54625db2d5cc49c619', "select-id": "documentType", "input-id": "documentNumber", "on-input": this.handleInputChange, "select-placeholder": i18n_service.I18nService.translate('document.typePlaceholder'), "input-placeholder": i18n_service.I18nService.translate('document.numberPlaceholder'), error: i18n_service.I18nService.translate(error), options: options, disabled: this.disabled })));
     }
 };
 
@@ -401,12 +401,12 @@ const CardIframe = class {
         }
     };
     render() {
-        return (index.h("div", { key: 'e6b649919e417b6766f8b57c4b14200973fbffbc', style: {
+        return (index.h("div", { key: '21cee6426b31b15e214272bed3b893a89cfebdc3', style: {
                 width: '100%',
                 height: this.iframeHeight,
                 position: 'relative',
                 overflow: 'hidden',
-            } }, !this.iframeLoaded && index.h("card-skeleton", { key: '0188319bd207a9b6bc7d81d0812550b1788e1bb4' }), index.h("iframe", { key: '7fd8a416e1d52a0a303ad14048cdc7e2803da0c7', ref: el => (this.iframeRef = el), src: this.getIframeURL(), style: {
+            } }, !this.iframeLoaded && index.h("card-skeleton", { key: '66bbb20d750975f5e6a15a72c55f21ac209c9a10' }), index.h("iframe", { key: '8f9c689ea04b5b88511cbcc69b792454460b2a48', ref: el => (this.iframeRef = el), src: this.getIframeURL(), style: {
                 width: '100%',
                 height: '100%',
                 border: 'none',
@@ -422,7 +422,7 @@ const CardSkeleton = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'd87e835e37bd5986d77a45a98237a8dd3a7b3682', class: "iframe-skeleton" }, index.h("div", { key: '3a31614b30459c736eb66f29bc998d9aee635a6b', class: "input-skeleton" }), index.h("div", { key: '9149d975b4da18fa231e434520f278632c39e38b', class: "input-skeleton" })));
+        return (index.h("div", { key: '76c432f43c597f9ff92b949c16d70b1b6840e378', class: "iframe-skeleton" }, index.h("div", { key: '9c77a9eeda10a23004890c934f30f8d25be7fbf1', class: "input-skeleton" }), index.h("div", { key: 'd26032fe4bbb41dd0107e9fa5d8bd041da401351', class: "input-skeleton" })));
     }
 };
 CardSkeleton.style = cardSkeletonCss;
@@ -602,7 +602,7 @@ const InputCombo = class {
     render() {
         const selectedLabel = this.getSelectedOptionLabel();
         const hasSelectValue = this.selectValue !== '';
-        return (index.h("div", { key: 'acc0186f37b641ea3d432b5c3dc020ffef1948b7', class: "input-container" }, this.label && (index.h("label", { key: '793f258597ce2a5ebb85aa1a04b841575f609944', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '59b00e15043885b09e14b9c4f5e0d22bcb7e215f', class: `input-combo-wrapper combo-wrapper ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, index.h("div", { key: '64bd573a8c8a17183524960a845aa6b18088fdfe', class: "select-section", style: { width: this.selectWidth } }, index.h("div", { key: '57cbb932a7ec053f1f15ac9ec5a0f7e7981adfce', ref: el => (this.triggerRef = el), class: `input-combo-select select-combo-trigger ${!hasSelectValue ? 'placeholder' : ''}`, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown, onBlur: this.onSelectBlur, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox" }, index.h("span", { key: 'fb572ee0350ec89f05db26e8109da0c0402449ef', class: "select-value" }, selectedLabel), index.h("div", { key: 'e7a6826e68b2d6ae6a69894b51b10110811d5dd9', class: "icon-wrapper" }, index.h("rebill-icon", { key: 'e39c6b9d60cc34fce37d0dd0ec2e764b62f4d52e', name: "chevron-up-down", size: "20px", class: "select-icon" }))), this.isOpen && (index.h("div", { key: '383b264b2359af0e64152f122b4fcb793d7d378e', ref: el => (this.dropdownRef = el), class: "select-dropdown", role: "listbox" }, this.options.map((option, index$1) => (index.h("div", { class: `select-option ${this.selectValue === option.value ? 'selected' : ''} ${this.highlightedIndex === index$1 ? 'highlighted' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectValue === option.value ? 'true' : 'false' }, option.label)))))), index.h("div", { key: '3ae30dbfc77ac17074107ad7ba4d64176cbf3ad7', class: "combo-divider" }), index.h("div", { key: 'ece93859123a7618977f7372d5bb4eea5f9ffdc7', class: "input-section" }, index.h("input", { key: '35a3e5136b2863373c7aac96735aba61bc8090d2', type: "text", class: "input-combo-element combo-input", placeholder: this.inputPlaceholder, value: this.inputValue, onInput: this.onInputChange, onBlur: this.onInputBlur, disabled: this.disabled }))), this.error && index.h("span", { key: '84addbc346d45632fa68942e36339a80ec81c787', class: "error-message" }, this.error)));
+        return (index.h("div", { key: '78274d3e83b4a14ec044ff3852e833a99feb8348', class: "input-container" }, this.label && (index.h("label", { key: '1c49d0001d73ada9f2a892bb28438fd44f369828', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: 'f8fdecad81908c55d33c3c5612afacf122916635', class: `input-combo-wrapper combo-wrapper ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, index.h("div", { key: '2b824e4efec1d67539fcc5e3dd3cd750e65e342a', class: "select-section", style: { width: this.selectWidth } }, index.h("div", { key: 'dc0116959636baf538f158a1c018087cf9c8890a', ref: el => (this.triggerRef = el), class: `input-combo-select select-combo-trigger ${!hasSelectValue ? 'placeholder' : ''}`, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown, onBlur: this.onSelectBlur, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox" }, index.h("span", { key: '0fd9d93421d8fd546771e806c93a29c0200ee408', class: "select-value" }, selectedLabel), index.h("div", { key: '6a3b3431c75f00bcb97d91e907c982e7abca3435', class: "icon-wrapper" }, index.h("rebill-icon", { key: 'b473ae6f95bdd29a45dc57b8a617c4311d89f3d3', name: "chevron-up-down", size: "20px", class: "select-icon" }))), this.isOpen && (index.h("div", { key: '90337b81ac236c22559e7bfd1c21169452e6196a', ref: el => (this.dropdownRef = el), class: "select-dropdown", role: "listbox" }, this.options.map((option, index$1) => (index.h("div", { class: `select-option ${this.selectValue === option.value ? 'selected' : ''} ${this.highlightedIndex === index$1 ? 'highlighted' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectValue === option.value ? 'true' : 'false' }, option.label)))))), index.h("div", { key: 'b23f197692e344ba927859c95da58ac610d68239', class: "combo-divider" }), index.h("div", { key: '53947485ce5b7f58baa9755d2cbbe32d3d2d63dd', class: "input-section" }, index.h("input", { key: 'a4350c9c44ab5915671ba9ab26ddd98bfe443544', type: "text", class: "input-combo-element combo-input", placeholder: this.inputPlaceholder, value: this.inputValue, onInput: this.onInputChange, onBlur: this.onInputBlur, disabled: this.disabled }))), this.error && index.h("span", { key: 'fc58be7909cf174089b791270720da65050d7e19', class: "error-message" }, this.error)));
     }
 };
 InputCombo.style = inputComboCss;
@@ -648,11 +648,11 @@ const Installments = class {
         });
     }
     render() {
-        return (index.h("div", { key: '6a5c00fc287b609ed3bd074d3c9ea028e5770190' }, index.h("rebill-input-select", { key: this.isDisabled.toString(), id: "installments", variant: "outlined", value: this.value, options: i18n_service.state.data.cardInformation?.installments?.installments.map(installment => ({
+        return (index.h("div", { key: 'a7e2147789a5664d4b5857c86652c85f78a88872' }, index.h("rebill-input-select", { key: this.isDisabled.toString(), id: "installments", variant: "outlined", value: this.value, options: i18n_service.state.data.cardInformation?.installments?.installments.map(installment => ({
                 label: installmentUtils.getInstallmentLabel(installment.installment, installmentUtils.getRecalculatedInstallmentAmount(installment.installmentAmount), i18n_service.state.data.pricing?.currency, installment.cft, installment.model),
                 value: installment?.installment?.toString(),
             })) || [], loading: i18n_service.state.data.fetchingInstallments, placeholder: this.placeholder, disabled: this.isDisabled, "on-input": this.handleInstallments, error: i18n_service.I18nService.translate(this.error) }), i18n_service.state.data.cardInformation?.installments?.installments.find(installment => installment.installment ===
-            i18n_service.state.data.cardInformation?.installments?.selectedInstallment?.installment)?.model === installmentUtils.ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (index.h("rebill-typography", { key: '0e3cc1cbf51fd540b927d64d16c8d2107c98f06f', variant: "italic", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('installments.interest')))));
+            i18n_service.state.data.cardInformation?.installments?.selectedInstallment?.installment)?.model === installmentUtils.ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (index.h("rebill-typography", { key: '77b18f5f22cf47c79a6a2f30655117f4aaa60987', variant: "italic", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('installments.interest')))));
     }
 };
 Installments.style = installmentsCss;

package/dist/cjs/collapsible-card.cjs.entry.js

@@ -23,7 +23,7 @@ const CollapsibleCard = class {
         this.toggled.emit(this.isOpen);
     };
     render() {
-        return (index.h("div", { key: '70ba239467a88ca0ce6058bcd8020807e71c4022', class: `collapsible-card ${this.variant}` }, index.h("button", { key: '6d99d6a0f2e56070b4efa1bff7c9d284bdb0c290', class: "collapsible-card-header", onClick: this.toggle, "aria-expanded": this.isOpen, type: "button" }, index.h("rebill-typography", { key: '697665ffeca15b33eaa22fd91be373ec7e7e6c3e', variant: this.variant === 'flat' ? 'subtitle2' : 'overline', color: colorClassMapper.COLORS_ENUM.TEXT_PRIMARY }, this.header), index.h("span", { key: 'b41772f04b16818c1bf1dbd2bb33a7e90bf60825', class: { chevron: true, open: this.isOpen } }, index.h("rebill-icon", { key: 'dc46d84a9f2caae5104822e1335a8a8828a10a03', name: "chevron-down", size: "20px", color: "currentColor" }))), index.h("div", { key: '2a7dc6e7724c6c8586a83173eeca435b6b5630f0', class: { content: true, open: this.isOpen } }, index.h("slot", { key: '03aad6340006dd225a4b68251605413a9e1f1ce8' }))));
+        return (index.h("div", { key: '1457cbc26b83000ec71d1b8a9330b36339bcacc3', class: `collapsible-card ${this.variant}` }, index.h("button", { key: '5f21229da2ab3dbb265a4b80cad04e72364cc934', class: "collapsible-card-header", onClick: this.toggle, "aria-expanded": this.isOpen, type: "button" }, index.h("rebill-typography", { key: 'c6f347bbc712d4ede42b5c63a81b1145297bf36e', variant: this.variant === 'flat' ? 'subtitle2' : 'overline', color: colorClassMapper.COLORS_ENUM.TEXT_PRIMARY }, this.header), index.h("span", { key: '7e53c8c84a60126d856a12199871ab9d328c932f', class: { chevron: true, open: this.isOpen } }, index.h("rebill-icon", { key: '7f3310ed9e9abcfacd8d0050f26a81ba2771a3ff', name: "chevron-down", size: "20px", color: "currentColor" }))), index.h("div", { key: '4ab6b819a7305f97c2b4093ee5f313021c73bfc9', class: { content: true, open: this.isOpen } }, index.h("slot", { key: '68fd3a2c949a723f6703fb1e2b6c0fe6ad4e5877' }))));
     }
 };
 CollapsibleCard.style = collapsibleCardCss;

package/dist/cjs/discount-coupon.rebill-divider.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"discount-coupon.rebill-divider.entry.cjs.js","sources":["src/components/checkout/discount-coupon/discount-coupon.css?tag=discount-coupon","src/components/checkout/discount-coupon/discount-coupon.tsx","src/components/shared/divider/divider.css?tag=rebill-divider","src/components/shared/divider/divider.tsx"],"sourcesContent":[".summary-row {\n  gap: 12px;\n}\n.coupon-chip {\n  display: flex;\n  align-items: center;\n  background: var(--rebill-color-background);\n  border: 1px solid var(--rebill-color-border-primary);\n  justify-content: space-between;\n  border-radius: 6px;\n  padding: 4px 8px;\n  gap: 8px;\n  width: fit-content;\n}\n\n.coupon-chip--readonly {\n  cursor: default;\n}\n\n.coupon-icon {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n.coupon-close {\n  cursor: pointer;\n}\n\n.coupon-content {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 4px;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { formatAmountWithoutCurrency } from '../../../utils';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nenum ACTION_STATUS {\n  EDITING = 'editing',\n  APPLIED = 'applied',\n  NOT_APPLIED = 'not_applied',\n}\n\n@Component({\n  tag: 'discount-coupon',\n  styleUrl: 'discount-coupon.css',\n  shadow: false,\n})\nexport class DiscountCoupon {\n  @Element() el: HTMLElement;\n  @Prop() hideLabel: boolean = false;\n  @Prop() displayMode: 'editable' | 'readonly' = 'editable';\n  @Prop() readonlyCouponCode?: string;\n  @Prop() readonlyDiscountAmount?: number;\n  @Prop() readonlyCurrency?: string;\n  @State() couponCode: string = '';\n  @State() actionStatus: ACTION_STATUS = ACTION_STATUS.NOT_APPLIED;\n  @State() isLoading: boolean = false;\n  @State() isError: boolean = false;\n  @State() currentLocale: string = sessionState.currentLocale;\n  @Event() discountApplied: EventEmitter<boolean>;\n  private inputRef: HTMLRebillInputTextElement;\n  private unsubscribeCurrentLocaleStore?: () => void;\n\n  componentWillLoad() {\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.currentLocale = sessionState.currentLocale;\n    });\n\n    if (this.readonlyCouponCode) {\n      return;\n    }\n\n    if (\n      sessionState.data.pricing.discountCouponCode &&\n      sessionState.data.pricing.discountAmount > 0\n    ) {\n      this.actionStatus = ACTION_STATUS.APPLIED;\n      this.couponCode = sessionState.data.pricing.discountCouponCode;\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n  }\n  componentDidUpdate() {\n    if (this.readonlyCouponCode) {\n      return;\n    }\n\n    if (this.actionStatus === ACTION_STATUS.EDITING && this.inputRef) {\n      setTimeout(async () => {\n        const inputElement = await this.inputRef.getInputElement();\n        if (inputElement) {\n          inputElement.focus();\n        }\n      }, 0);\n    }\n  }\n\n  private async onApplyCoupon() {\n    if (this.readonlyCouponCode) return;\n    const sessionId = sessionState.data.sessionId;\n    if (!sessionId) {\n      return;\n    }\n    this.isLoading = true;\n    try {\n      const response = await api.discountCoupon.applyDiscountCoupon({\n        couponCode: this.couponCode,\n        quantity: 1,\n        sessionId: sessionId,\n        organizationId: sessionState.data.organization.id,\n      });\n      this.actionStatus = ACTION_STATUS.APPLIED;\n      SessionStore.setDiscount({\n        couponCode: this.couponCode,\n        amount: response.amount,\n        discountType: response.discountType,\n        discountAmount: response.discountedAmount,\n        discountedPercentage: response?.discountedPercentage || 0,\n        discountDuration: response?.discountDuration || null,\n      });\n      this.discountApplied.emit(true);\n    } catch (error) {\n      this.actionStatus = ACTION_STATUS.EDITING;\n      this.discountApplied.emit(false);\n      this.isError = true;\n      SessionStore.setDiscount(null);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  private onCancelCoupon() {\n    if (this.readonlyCouponCode) return;\n    this.actionStatus = ACTION_STATUS.NOT_APPLIED;\n    this.couponCode = '';\n    this.isError = false;\n  }\n\n  private renderReadonlyView() {\n    if (!this.readonlyCouponCode && this.readonlyDiscountAmount) {\n      return null;\n    }\n\n    return (\n      <div class=\"coupon-chip coupon-chip--readonly\">\n        <rebill-icon name=\"tag-sale\" size=\"16px\" />\n        <div class=\"coupon-content\">\n          <rebill-typography variant=\"overline\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n            {this.readonlyCouponCode}\n          </rebill-typography>\n          {this.readonlyDiscountAmount && (\n            <rebill-typography variant=\"overline\" color={COLORS_ENUM.GREEN}>\n              -$\n              {formatAmountWithoutCurrency(\n                this.readonlyDiscountAmount,\n                this.readonlyCurrency as any,\n              )}\n            </rebill-typography>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.readonlyCouponCode) {\n      return this.renderReadonlyView();\n    }\n\n    return (\n      <div>\n        <div\n          class=\"summary-row\"\n          style={{\n            alignItems: this.actionStatus === ACTION_STATUS.EDITING ? 'flex-start' : 'center',\n            display: 'flex',\n          }}\n        >\n          {!this.hideLabel && (\n            <rebill-typography\n              variant=\"body2\"\n              style={{ marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '7px' : '0px' }}\n            >\n              {I18nService.translate('discountCoupons.discount')}\n            </rebill-typography>\n          )}\n          {this.actionStatus === ACTION_STATUS.NOT_APPLIED && (\n            <rebill-button\n              variant=\"filled\"\n              size=\"small\"\n              theme=\"primary-dark\"\n              onClick={() => (this.actionStatus = ACTION_STATUS.EDITING)}\n            >\n              {I18nService.translate('discountCoupons.addDiscount')}\n            </rebill-button>\n          )}\n          {this.actionStatus === ACTION_STATUS.EDITING && (\n            <div class=\"summary-row\" style={{ alignItems: 'flex-start', display: 'flex' }}>\n              <rebill-input-text\n                ref={el => (this.inputRef = el)}\n                id=\"discountCoupon\"\n                value={this.couponCode}\n                placeholder={I18nService.translate('discountCoupons.addDiscount')}\n                disabled={this.isLoading}\n                error={this.isError ? I18nService.translate('discountCoupons.error') : ''}\n                clearable={true}\n                uppercase={true}\n                onInput={e => {\n                  e.stopPropagation();\n                  if (e.detail && e.detail.value !== undefined) {\n                    this.couponCode = e.detail.value;\n                  }\n                }}\n                onBlur={() => {\n                  if (!this.couponCode.trim()) {\n                    this.onCancelCoupon();\n                  }\n                }}\n              />\n              <rebill-button\n                variant=\"filled\"\n                theme=\"primary-dark\"\n                size=\"small\"\n                loading={this.isLoading}\n                disabled={this.isLoading || !this.couponCode.trim()}\n                onClick={() => this.onApplyCoupon()}\n                style={{ marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '3px' : '0px' }}\n              >\n                {I18nService.translate('discountCoupons.apply')}\n              </rebill-button>\n            </div>\n          )}\n          {this.actionStatus === ACTION_STATUS.APPLIED && (\n            <div class=\"coupon-chip\">\n              <rebill-icon name=\"tag-sale\" size=\"16px\" />\n              <div\n                class=\"coupon-content\"\n                onClick={() => (this.actionStatus = ACTION_STATUS.EDITING)}\n              >\n                <rebill-typography variant=\"overline\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n                  {sessionState.data.pricing.discountCouponCode}\n                </rebill-typography>\n                <rebill-typography variant=\"overline\" color={COLORS_ENUM.GREEN}>\n                  -$\n                  {formatAmountWithoutCurrency(\n                    sessionState.data.pricing.discountAmount,\n                    sessionState.data.pricing.currency,\n                  )}\n                </rebill-typography>\n              </div>\n              <div\n                class=\"coupon-close\"\n                onClick={() => {\n                  this.actionStatus = ACTION_STATUS.NOT_APPLIED;\n                  this.couponCode = '';\n                  SessionStore.setDiscount(null);\n                  this.discountApplied.emit(false);\n                }}\n              >\n                <rebill-icon name=\"x\" size=\"20px\" color={COLORS_ENUM.PRIMARY_DARK_TEXT} />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n",".rebill-divider {\n  border: none;\n  border-top: 0.5px solid var(--rebill-color-border-primary);\n  width: 100%;\n  height: 0.5px;\n}\n","import { Component, h } from '@stencil/core';\nimport './divider.css';\n\n@Component({\n  tag: 'rebill-divider',\n  styleUrl: 'divider.css',\n  shadow: false,\n})\nexport class Divider {\n  render() {\n    return <div class=\"rebill-divider\"></div>;\n  }\n}\n"],"names":["sessionState","SessionStore","api","h","COLORS_ENUM","formatAmountWithoutCurrency","I18nService"],"mappings":"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"}

package/dist/cjs/discount-coupon_2.cjs.entry.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var index = require('./index-C-VTnc0I.js');
+var index$1 = require('./index-BCzOaoSU.js');
+var i18n_service = require('./i18n.service-DjVTlGfF.js');
+var colorClassMapper = require('./color-class-mapper-CtKnrxwI.js');
+require('./_commonjsHelpers-B83fTs8d.js');
+require('./config-ClgjQet_.js');
+
+const discountCouponCss = ".summary-row{gap:12px}.coupon-chip{display:flex;align-items:center;background:var(--rebill-color-background);border:1px solid var(--rebill-color-border-primary);justify-content:space-between;border-radius:6px;padding:4px 8px;gap:8px;width:fit-content}.coupon-chip--readonly{cursor:default}.coupon-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;vertical-align:middle}.coupon-close{cursor:pointer}.coupon-content{display:flex;flex-direction:row;align-items:flex-start;gap:4px}";
+
+var ACTION_STATUS;
+(function (ACTION_STATUS) {
+    ACTION_STATUS["EDITING"] = "editing";
+    ACTION_STATUS["APPLIED"] = "applied";
+    ACTION_STATUS["NOT_APPLIED"] = "not_applied";
+})(ACTION_STATUS || (ACTION_STATUS = {}));
+const DiscountCoupon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.discountApplied = index.createEvent(this, "discountApplied");
+    }
+    get el() { return index.getElement(this); }
+    hideLabel = false;
+    displayMode = 'editable';
+    readonlyCouponCode;
+    readonlyDiscountAmount;
+    readonlyCurrency;
+    couponCode = '';
+    actionStatus = ACTION_STATUS.NOT_APPLIED;
+    isLoading = false;
+    isError = false;
+    currentLocale = i18n_service.state.currentLocale;
+    discountApplied;
+    inputRef;
+    unsubscribeCurrentLocaleStore;
+    componentWillLoad() {
+        this.unsubscribeCurrentLocaleStore = i18n_service.SessionStore.onChange('currentLocale', () => {
+            this.currentLocale = i18n_service.state.currentLocale;
+        });
+        if (this.readonlyCouponCode) {
+            return;
+        }
+        if (i18n_service.state.data.pricing.discountCouponCode &&
+            i18n_service.state.data.pricing.discountAmount > 0) {
+            this.actionStatus = ACTION_STATUS.APPLIED;
+            this.couponCode = i18n_service.state.data.pricing.discountCouponCode;
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribeCurrentLocaleStore) {
+            this.unsubscribeCurrentLocaleStore();
+        }
+    }
+    componentDidUpdate() {
+        if (this.readonlyCouponCode) {
+            return;
+        }
+        if (this.actionStatus === ACTION_STATUS.EDITING && this.inputRef) {
+            setTimeout(async () => {
+                const inputElement = await this.inputRef.getInputElement();
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
+        }
+    }
+    async onApplyCoupon() {
+        if (this.readonlyCouponCode)
+            return;
+        const sessionId = i18n_service.state.data.sessionId;
+        if (!sessionId) {
+            return;
+        }
+        this.isLoading = true;
+        try {
+            const response = await index$1.api.discountCoupon.applyDiscountCoupon({
+                couponCode: this.couponCode,
+                quantity: 1,
+                sessionId: sessionId,
+                organizationId: i18n_service.state.data.organization.id,
+            });
+            this.actionStatus = ACTION_STATUS.APPLIED;
+            i18n_service.SessionStore.setDiscount({
+                couponCode: this.couponCode,
+                amount: response.amount,
+                discountType: response.discountType,
+                discountAmount: response.discountedAmount,
+                discountedPercentage: response?.discountedPercentage || 0,
+                discountDuration: response?.discountDuration || null,
+            });
+            this.discountApplied.emit(true);
+        }
+        catch (error) {
+            this.actionStatus = ACTION_STATUS.EDITING;
+            this.discountApplied.emit(false);
+            this.isError = true;
+            i18n_service.SessionStore.setDiscount(null);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    onCancelCoupon() {
+        if (this.readonlyCouponCode)
+            return;
+        this.actionStatus = ACTION_STATUS.NOT_APPLIED;
+        this.couponCode = '';
+        this.isError = false;
+    }
+    renderReadonlyView() {
+        if (!this.readonlyCouponCode && this.readonlyDiscountAmount) {
+            return null;
+        }
+        return (index.h("div", { class: "coupon-chip coupon-chip--readonly" }, index.h("rebill-icon", { name: "tag-sale", size: "16px" }), index.h("div", { class: "coupon-content" }, index.h("rebill-typography", { variant: "overline", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT }, this.readonlyCouponCode), this.readonlyDiscountAmount && (index.h("rebill-typography", { variant: "overline", color: colorClassMapper.COLORS_ENUM.GREEN }, "-$", i18n_service.formatAmountWithoutCurrency(this.readonlyDiscountAmount, this.readonlyCurrency))))));
+    }
+    render() {
+        if (this.readonlyCouponCode) {
+            return this.renderReadonlyView();
+        }
+        return (index.h("div", null, index.h("div", { class: "summary-row", style: {
+                alignItems: this.actionStatus === ACTION_STATUS.EDITING ? 'flex-start' : 'center',
+                display: 'flex',
+            } }, !this.hideLabel && (index.h("rebill-typography", { variant: "body2", style: { marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '7px' : '0px' } }, i18n_service.I18nService.translate('discountCoupons.discount'))), this.actionStatus === ACTION_STATUS.NOT_APPLIED && (index.h("rebill-button", { variant: "filled", size: "small", theme: "primary-dark", onClick: () => (this.actionStatus = ACTION_STATUS.EDITING) }, i18n_service.I18nService.translate('discountCoupons.addDiscount'))), this.actionStatus === ACTION_STATUS.EDITING && (index.h("div", { class: "summary-row", style: { alignItems: 'flex-start', display: 'flex' } }, index.h("rebill-input-text", { ref: el => (this.inputRef = el), id: "discountCoupon", value: this.couponCode, placeholder: i18n_service.I18nService.translate('discountCoupons.addDiscount'), disabled: this.isLoading, error: this.isError ? i18n_service.I18nService.translate('discountCoupons.error') : '', clearable: true, uppercase: true, onInput: e => {
+                e.stopPropagation();
+                if (e.detail && e.detail.value !== undefined) {
+                    this.couponCode = e.detail.value;
+                }
+            }, onBlur: () => {
+                if (!this.couponCode.trim()) {
+                    this.onCancelCoupon();
+                }
+            } }), index.h("rebill-button", { variant: "filled", theme: "primary-dark", size: "small", loading: this.isLoading, disabled: this.isLoading || !this.couponCode.trim(), onClick: () => this.onApplyCoupon(), style: { marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '3px' : '0px' } }, i18n_service.I18nService.translate('discountCoupons.apply')))), this.actionStatus === ACTION_STATUS.APPLIED && (index.h("div", { class: "coupon-chip" }, index.h("rebill-icon", { name: "tag-sale", size: "16px" }), index.h("div", { class: "coupon-content", onClick: () => (this.actionStatus = ACTION_STATUS.EDITING) }, index.h("rebill-typography", { variant: "overline", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT }, i18n_service.state.data.pricing.discountCouponCode), index.h("rebill-typography", { variant: "overline", color: colorClassMapper.COLORS_ENUM.GREEN }, "-$", i18n_service.formatAmountWithoutCurrency(i18n_service.state.data.pricing.discountAmount, i18n_service.state.data.pricing.currency))), index.h("div", { class: "coupon-close", onClick: () => {
+                this.actionStatus = ACTION_STATUS.NOT_APPLIED;
+                this.couponCode = '';
+                i18n_service.SessionStore.setDiscount(null);
+                this.discountApplied.emit(false);
+            } }, index.h("rebill-icon", { name: "x", size: "20px", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT })))))));
+    }
+};
+DiscountCoupon.style = discountCouponCss;
+
+const dividerCss = ".rebill-divider{border:none;border-top:0.5px solid var(--rebill-color-border-primary);width:100%;height:0.5px}";
+
+const Divider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return index.h("div", { key: 'e473487d16557d2a754a133173d72ca6ce5a7767', class: "rebill-divider" });
+    }
+};
+Divider.style = dividerCss;
+
+exports.discount_coupon = DiscountCoupon;
+exports.rebill_divider = Divider;
+//# sourceMappingURL=discount-coupon.rebill-divider.entry.cjs.js.map