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

package/dist/components/{p-B1BCKuQ0.js → p-D1lAYXxG.js}

@@ -3,8 +3,8 @@ import { a as api } from './p-Dh-yfb0D.js';
 import { s as state, a as SessionStore, I as I18nService } from './p-CMzpQU2o.js';
 import { C as COLORS_ENUM } from './p-DA598vBj.js';
 import { c as createCountdownTimer } from './p-bcHxwlBu.js';
-import { d as defineCustomElement$5 } from './p-wjfhDzgd.js';
-import { d as defineCustomElement$4 } from './p-Dr1acigj.js';
+import { d as defineCustomElement$5 } from './p-CKYowY5T.js';
+import { d as defineCustomElement$4 } from './p-xNgCL9nV.js';
 import { d as defineCustomElement$3 } from './p-DvWdkIUq.js';
 import { d as defineCustomElement$2 } from './p-CWY-g0zG.js';
 import { d as defineCustomElement$1 } from './p-C_txMekS.js';
@@ -110,17 +110,17 @@ const Otp = /*@__PURE__*/ proxyCustomElement(class Otp extends H {
         }
     };
     render() {
-        return (h("div", { key: '695c2a67abc70a6805f405f6e126551b1e39ded5', class: "otp__otp-container" }, h("div", { key: '083a89be24155bfaa7dd475e845dd7c392df68e2', class: "otp__user-information" }, h("div", { key: '4b0448680cd90d58278c60b504d54e3f920fdd33', class: "otp__otp-description-container" }, h("rebill-typography", { key: '6906f8348b6bbf4d8af6395b02b2ef3993f8999f', variant: "body2", class: "otp__otp-description" }, I18nService.translate('otp.description')), h("rebill-typography", { key: '03eced252bddbc83c80703b65ea0822fdc8f1286', variant: "subtitle-bold", class: "otp__otp-description-digits" }, ' ', h("strong", { key: 'be96707f15ba5e32bb7d542bd6e145b250b22bd5' }, I18nService.translate('otp.descriptionDigits')), ' '), h("rebill-typography", { key: 'c071f971e41a1000ca623e6bc86fd63d796d29b9', variant: "body2", class: "otp__otp-description-email" }, I18nService.translate('otp.descriptionEmail'))), h("rebill-typography", { key: '05830f22306e4ff106f39da5ec3d273502393047', variant: "body2", class: "otp__otp-email-line" }, state.data.userInformation.email, ' ', !state.data.prefilledData?.email && (h("span", { key: '2a0abb0311e9f6d468c76a18ce54670711ea58e8', class: "otp__change-email", onClick: () => {
+        return (h("div", { key: 'a60f4778e7b8c9d12db4f91f1052efb529421f61', class: "otp__otp-container" }, h("div", { key: '27f07a33bb7f89884e9f7c7451dde4d45ec70fa0', class: "otp__user-information" }, h("div", { key: 'dff426cbad1d5104cb190b577b62ace1f80c0397', class: "otp__otp-description-container" }, h("rebill-typography", { key: '46056e3d98013ec69b2f94ce09453741393a84d5', variant: "body2", class: "otp__otp-description" }, I18nService.translate('otp.description')), h("rebill-typography", { key: '1ce410c937cc81a6d3d94ba9ba324463c17d2e1a', variant: "subtitle-bold", class: "otp__otp-description-digits" }, ' ', h("strong", { key: '5cb7f9fc7dc6bcb884719bc6dfb36d46d67e7c3b' }, I18nService.translate('otp.descriptionDigits')), ' '), h("rebill-typography", { key: '08374eda7ff4ae8deadfec171a086d31c4c9160d', variant: "body2", class: "otp__otp-description-email" }, I18nService.translate('otp.descriptionEmail'))), h("rebill-typography", { key: '3bca7a94df9819bd9a235c0963b2190a0f7dcb2f', variant: "body2", class: "otp__otp-email-line" }, state.data.userInformation.email, ' ', !state.data.prefilledData?.email && (h("span", { key: '53ac959b54950773538dbce0c236bbd2a75fa906', class: "otp__change-email", onClick: () => {
                 this.otpValue = '';
                 this.error = false;
                 this.returnForm.emit(false);
-            } }, I18nService.translate('otp.change'))))), h("input-otp", { key: 'ea265a435d31d7074aa2f97c10e47f44d50d0a3c', otp: this.otpValue, onOtpChange: event => this.handleOtpChange(event.detail), error: this.error ? I18nService.translate('otp.error') : '' }), this.isVerifying && (h("div", { key: '367501f575edf463b9055785dfb3c72475ce449d', class: "otp__verifying-container" }, h("rebill-typography", { key: '5dd504a759d6dbcb47aa98b2ae2c27b30ce9e96c', variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('otp.verifyingCode')), h("div", { key: 'e5b194da4c703af89cada396bd9ada053507cbe5', class: "otp__spinner" }))), h("rebill-button", { key: '96cd7a684d0d51d8d3e0d47291fd2ab413f6a424', 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: '53416598d254b6f42b1771136d43f8ac612f3b43', otp: this.otpValue, onOtpChange: event => this.handleOtpChange(event.detail), error: this.error ? I18nService.translate('otp.error') : '' }), this.isVerifying && (h("div", { key: '41c766a5e21c9d810dca97de5c720450df6924af', class: "otp__verifying-container" }, h("rebill-typography", { key: '93ba72b7c85cb622f8fd3d1b1175817a736c7ede', variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('otp.verifyingCode')), h("div", { key: 'd8b11cf317c4d8cbbb3f840fe8c411738c8f095c', class: "otp__spinner" }))), h("rebill-button", { key: 'c07d1abbce11ca0a2f1f139d9b93c6808c85bfd0', 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: '9958622dcf2e3e7bdfbc3601c6a0dcc056a704d2', class: "otp__code-resent-container" }, h("rebill-typography", { key: 'e1fedeb2c1bcdefb2d2540eb0a1a1ee1aca8602b', variant: "subtitle2", color: COLORS_ENUM.GREEN }, h("rebill-icon", { key: 'bd5268ce74cf92d2df6c0c05af90f667a7cfc8ac', name: "check-radio" }), I18nService.translate('otp.codeResent')))), h("rebill-alert", { key: 'fbe9a4975a9f59c8dc13ad31fdd282b67065a738', 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: 'b897d0409df69be27b7ee403d96eb7af1e714f67', class: "otp__alternative" }, h("rebill-typography", { key: 'c823a4a3b01e46352b10c05d5aa4caf88aa751b9', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK }, "o")), h("div", { key: 'cf74b097bd2ce9846f6f848109e44698de57e128', class: "otp__guest-options" }, h("rebill-button", { key: '3c61d047f6f1c77ade4936e23afbadd1674c9d10', type: "button", variant: "outline", theme: "secondary", size: "medium", onClick: () => {
+            : I18nService.translate('otp.resendCode')), this.codeResent && (h("div", { key: '04892ba96af1f0cc56e8a662b4e758f8539d8181', class: "otp__code-resent-container" }, h("rebill-typography", { key: 'd5406c0cb371a85f796bb33950db186703aa2a96', variant: "subtitle2", color: COLORS_ENUM.GREEN }, h("rebill-icon", { key: 'd125a0363f9b5b584638b148e285323d57c507ee', name: "check-radio" }), I18nService.translate('otp.codeResent')))), h("rebill-alert", { key: '00f6d0350530b1ec22027a91dcafa7bd6de2887d', 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: '9a8c49f2d07459f11f447a430c5addf11da5d68c', class: "otp__alternative" }, h("rebill-typography", { key: 'aa6421edade435a60f2086666aadee7059c4381b', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK }, "o")), h("div", { key: 'cd8efa383a62cc1362e50dd854812bf80c3a930c', class: "otp__guest-options" }, h("rebill-button", { key: '95db9dfa82140c9de4fcf22d513f8401779d0bb5', 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: 'd301de3043c187804f7bea48eeb49e9ac4967480', type: "secure", variant: "variant-secure", icon: "lock-outline", message: I18nService.translate('otp.secureMessage') }))));
+            } }, I18nService.translate('otp.continueAsGuest')), h("rebill-alert", { key: 'd1f56385971910aed328b740498945e05d6a91ac', type: "secure", variant: "variant-secure", icon: "lock-outline", message: I18nService.translate('otp.secureMessage') }))));
     }
     static get style() { return otpCss; }
 }, [256, "otp-component", {
@@ -172,6 +172,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { Otp as O, defineCustomElement as d };
-//# sourceMappingURL=p-B1BCKuQ0.js.map
+//# sourceMappingURL=p-D1lAYXxG.js.map
 
-//# sourceMappingURL=p-B1BCKuQ0.js.map
+//# sourceMappingURL=p-D1lAYXxG.js.map

package/dist/components/{p-B1BCKuQ0.js.map → p-D1lAYXxG.js.map}

@@ -1 +1 @@
-{"file":"p-B1BCKuQ0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/otp/otp.css?tag=otp-component","src/components/checkout/otp/otp.tsx"],"sourcesContent":[".otp__otp-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n  position: relative;\n  margin-top: 2rem;\n}\n\n.otp__user-information {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n}\n\n.otp__otp-description-container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n.otp__change-email {\n  cursor: pointer;\n  text-decoration: underline;\n  margin-left: 0;\n}\n\n.otp__change-email:hover {\n  color: var(--rebill-primary-color);\n  text-decoration: underline;\n}\n\n.otp__alternative {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin: 32px;\n  width: 100%;\n}\n\n.otp__rebill-alert {\n  width: 100%;\n}\n\n.otp__guest-options {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  margin-top: auto;\n}\n\n.otp__verifying-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin: 8px 0;\n}\n\n.otp__code-resent-container rebill-typography {\n  display: flex;\n  line-height: 1;\n}\n\n.otp__code-resent-container rebill-icon {\n  flex-shrink: 0;\n  display: inline-flex;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n.otp__spinner {\n  width: 15px;\n  height: 15px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-radius: 50%;\n  border-top-color: var(--rebill-color-primary);\n  animation: spin 1s linear infinite;\n  display: inline-block;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Responsive adjustments */\n@media (max-width: 1024px) {\n  .otp__otp-container {\n    min-height: calc(100vh - 40px);\n  }\n\n  .otp__guest-options {\n    margin-top: 32px;\n  }\n}\n\n@media (min-width: 1025px) {\n  .otp__otp-container {\n    justify-content: flex-start;\n  }\n\n  .otp__guest-options {\n    margin-top: auto;\n    padding-bottom: 2rem;\n  }\n}\n","import { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { OTPVerifyResponse } from '../../../api/entities/OTP/types';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { createCountdownTimer } from '../../../utils/timer';\n\n@Component({\n  tag: 'otp-component',\n  styleUrl: 'otp.css',\n  shadow: false,\n})\nexport class Otp {\n  @Event() changeEmailClick: EventEmitter<void>;\n  @State() timeLeft: number = 59;\n  @State() isTimerRunning: boolean = false;\n  @State() codeResent: boolean = false;\n  @State() isVerifying: boolean = false;\n  @State() otpValue: string = '';\n  @Event() returnForm: EventEmitter<boolean>;\n  @Event() codeVerified: EventEmitter<OTPVerifyResponse>;\n  @State() error: boolean = false;\n\n  private timer = createCountdownTimer({\n    duration: 59,\n    onTick: timeLeft => {\n      this.timeLeft = timeLeft;\n    },\n    onComplete: () => {\n      this.isTimerRunning = false;\n    },\n  });\n\n  private messageTimer = createCountdownTimer({\n    duration: 5,\n    onComplete: () => {\n      this.codeResent = false;\n    },\n  });\n\n  disconnectedCallback() {\n    this.timer.stop();\n  }\n\n  startTimer() {\n    this.timer.start();\n    this.isTimerRunning = true;\n  }\n\n  handleResendCode = async () => {\n    if (!this.isTimerRunning) {\n      await api.otp.generate(sessionState.data.sessionId, {\n        email: sessionState.data.userInformation.email,\n      });\n      this.codeResent = true;\n      this.messageTimer.start();\n      this.startTimer();\n\n      this.error = false;\n    }\n  };\n\n  handleOtpChange = (value: string) => {\n    this.otpValue = value;\n\n    if (value.length === 6) {\n      this.handleVerifyOtp(value);\n      this.error = false;\n    }\n  };\n\n  handleVerifyOtp = async (otp: string) => {\n    this.isVerifying = true;\n    try {\n      const response = await api.otp.verify(sessionState.data.sessionId, {\n        email: sessionState.data.userInformation.email,\n        code: otp,\n      });\n\n      this.codeVerified.emit(response.data);\n      SessionStore.setUserInformation({\n        ...response.data.customer,\n        fullName: `${response.data.customer.firstName} ${response.data.customer.lastName}`.trim(),\n        phoneNumber: {\n          number: response.data.customer.phoneNumbers[0].number,\n          countryCode: response.data.customer.phoneNumbers[0].countryCode,\n        },\n        address: {\n          billingAddress: {\n            address: response.data.customer.addresses[0].lineOne,\n            zip: response.data.customer.addresses[0].zipCode,\n            city: response.data.customer.addresses[0].city,\n            state: response.data.customer.addresses[0].state,\n            country: response.data.customer.addresses[0].country,\n          },\n        },\n        documentType: response.data.customer.identifications[0].type,\n        documentNumber: response.data.customer.identifications[0].value,\n      });\n      SessionStore.setAccessToken(response.data.accessToken);\n      SessionStore.setCustomerId(response.data.customer.id);\n      this.otpValue = '';\n      this.error = false;\n    } catch (error) {\n      this.error = true;\n    } finally {\n      this.isVerifying = false;\n    }\n  };\n\n  render() {\n    return (\n      <div class=\"otp__otp-container\">\n        <div class=\"otp__user-information\">\n          <div class=\"otp__otp-description-container\">\n            <rebill-typography variant=\"body2\" class=\"otp__otp-description\">\n              {I18nService.translate('otp.description')}\n            </rebill-typography>\n            <rebill-typography variant=\"subtitle-bold\" class=\"otp__otp-description-digits\">\n              {' '}\n              <strong>{I18nService.translate('otp.descriptionDigits')}</strong>{' '}\n            </rebill-typography>\n            <rebill-typography variant=\"body2\" class=\"otp__otp-description-email\">\n              {I18nService.translate('otp.descriptionEmail')}\n            </rebill-typography>\n          </div>\n          <rebill-typography variant=\"body2\" class=\"otp__otp-email-line\">\n            {sessionState.data.userInformation.email}{' '}\n            {!sessionState.data.prefilledData?.email && (\n              <span\n                class=\"otp__change-email\"\n                onClick={() => {\n                  this.otpValue = '';\n                  this.error = false;\n                  this.returnForm.emit(false);\n                }}\n              >\n                {I18nService.translate('otp.change')}\n              </span>\n            )}\n          </rebill-typography>\n        </div>\n        <input-otp\n          otp={this.otpValue}\n          onOtpChange={event => this.handleOtpChange(event.detail)}\n          error={this.error ? I18nService.translate('otp.error') : ''}\n        />\n\n        {this.isVerifying && (\n          <div class=\"otp__verifying-container\">\n            <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n              {I18nService.translate('otp.verifyingCode')}\n            </rebill-typography>\n            <div class=\"otp__spinner\"></div>\n          </div>\n        )}\n        <rebill-button\n          type=\"button\"\n          variant=\"outline\"\n          theme={this.isTimerRunning ? 'secondary' : 'primary'}\n          disabled={this.isTimerRunning}\n          onClick={this.handleResendCode}\n          size=\"small\"\n          style={{ height: '24px', marginBottom: '8px' }}\n        >\n          {this.isTimerRunning\n            ? `${I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`\n            : I18nService.translate('otp.resendCode')}\n        </rebill-button>\n\n        {this.codeResent && (\n          <div class=\"otp__code-resent-container\">\n            <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREEN}>\n              <rebill-icon name=\"check-radio\" />\n              {I18nService.translate('otp.codeResent')}\n            </rebill-typography>\n          </div>\n        )}\n        <rebill-alert\n          class=\"otp__rebill-alert\"\n          type=\"secure\"\n          variant=\"variant-info\"\n          message={I18nService.translate('otp.infoMessage')}\n          icon=\"circle-info\"\n          alertTitle={I18nService.translate('otp.infoTitle')}\n          colorIcon={COLORS_ENUM.PRIMARY_DARK_LIGHT}\n        />\n        <div class=\"otp__alternative\">\n          <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK}>\n            o\n          </rebill-typography>\n        </div>\n        <div class=\"otp__guest-options\">\n          <rebill-button\n            type=\"button\"\n            variant=\"outline\"\n            theme=\"secondary\"\n            size=\"medium\"\n            onClick={() => {\n              this.otpValue = '';\n              this.error = false;\n              this.returnForm.emit(false);\n            }}\n          >\n            {I18nService.translate('otp.continueAsGuest')}\n          </rebill-button>\n\n          <rebill-alert\n            type=\"secure\"\n            variant=\"variant-secure\"\n            icon=\"lock-outline\"\n            message={I18nService.translate('otp.secureMessage')}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D1lAYXxG.js","mappings":";;;;;;;;;;;AAAA,MAAM,MAAM,GAAG,sgDAAsgD;;MCaxgD,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACL,IAAA,gBAAgB;IAChB,QAAQ,GAAW,EAAE;IACrB,cAAc,GAAY,KAAK;IAC/B,UAAU,GAAY,KAAK;IAC3B,WAAW,GAAY,KAAK;IAC5B,QAAQ,GAAW,EAAE;AACrB,IAAA,UAAU;AACV,IAAA,YAAY;IACZ,KAAK,GAAY,KAAK;IAEvB,KAAK,GAAG,oBAAoB,CAAC;AACnC,QAAA,QAAQ,EAAE,EAAE;QACZ,MAAM,EAAE,QAAQ,IAAG;AACjB,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;SACzB;QACD,UAAU,EAAE,MAAK;AACf,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;SAC5B;AACF,KAAA,CAAC;IAEM,YAAY,GAAG,oBAAoB,CAAC;AAC1C,QAAA,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,MAAK;AACf,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;SACxB;AACF,KAAA,CAAC;IAEF,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;IAGnB,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AAClB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;IAG5B,gBAAgB,GAAG,YAAW;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,MAAM,GAAG,CAAC,GAAG,CAAC,QAAQ,CAACC,KAAY,CAAC,IAAI,CAAC,SAAS,EAAE;AAClD,gBAAA,KAAK,EAAEA,KAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK;AAC/C,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;YACzB,IAAI,CAAC,UAAU,EAAE;AAEjB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;AAEtB,KAAC;AAED,IAAA,eAAe,GAAG,CAAC,KAAa,KAAI;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AAErB,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACtB,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AAC3B,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;AAEtB,KAAC;AAED,IAAA,eAAe,GAAG,OAAO,GAAW,KAAI;AACtC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI;AACF,YAAA,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,CAACA,KAAY,CAAC,IAAI,CAAC,SAAS,EAAE;AACjE,gBAAA,KAAK,EAAEA,KAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK;AAC9C,gBAAA,IAAI,EAAE,GAAG;AACV,aAAA,CAAC;YAEF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACrC,YAAY,CAAC,kBAAkB,CAAC;AAC9B,gBAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ;gBACzB,QAAQ,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAA,CAAA,EAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAE,CAAA,CAAC,IAAI,EAAE;AACzF,gBAAA,WAAW,EAAE;AACX,oBAAA,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM;AACrD,oBAAA,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW;AAChE,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,cAAc,EAAE;AACd,wBAAA,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;AACpD,wBAAA,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;AAChD,wBAAA,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI;AAC9C,wBAAA,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK;AAChD,wBAAA,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;AACrD,qBAAA;AACF,iBAAA;AACD,gBAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI;AAC5D,gBAAA,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK;AAChE,aAAA,CAAC;YACF,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACtD,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;AACrD,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;QAClB,OAAO,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;gBACT;AACR,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;AAE5B,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EACzC,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,EAC5D,EAAA,WAAW,CAAC,SAAS,CAAC,iBAAiB,CAAC,CACvB,EACpB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,6BAA6B,EAAA,EAC3E,GAAG,EACJ,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAS,WAAW,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAU,EAAC,GAAG,CACnD,EACpB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,4BAA4B,EAClE,EAAA,WAAW,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAC5B,CAChB,EACN,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAA,EAC3DA,KAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,EAC5C,CAACA,KAAY,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,KACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;aAC5B,EAAA,EAEA,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAC/B,CACR,CACiB,CAChB,EACN,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,WAAW,EAAE,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,EAC3D,CAAA,EAED,IAAI,CAAC,WAAW,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,WAAW,CAAC,OAAO,EAAA,EAC9D,WAAW,CAAC,SAAS,CAAC,mBAAmB,CAAC,CACzB,EACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,CAAO,CAC5B,CACP,EACD,CACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,SAAS,EACpD,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,EAE7C,IAAI,CAAC;AACJ,cAAE,CAAA,EAAG,WAAW,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA,EAAA,EAAK,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAG,CAAA;cACjF,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAC7B,EAEf,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAmB,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,WAAW,CAAC,KAAK,EAAA,EAC7D,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAG,CAAA,EACjC,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CACtB,CAChB,CACP,EACD,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,cAAc,EACtB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,iBAAiB,CAAC,EACjD,IAAI,EAAC,aAAa,EAClB,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,EAClD,SAAS,EAAE,WAAW,CAAC,kBAAkB,EACzC,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAmB,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAA,EAAA,GAAA,CAE9C,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;aAC5B,IAEA,WAAW,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAC/B,EAEhB,CACE,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,mBAAmB,CAAC,EACnD,CAAA,CACE,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/otp/otp.css?tag=otp-component","src/components/checkout/otp/otp.tsx"],"sourcesContent":[".otp__otp-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n  position: relative;\n  margin-top: 2rem;\n}\n\n.otp__user-information {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n}\n\n.otp__otp-description-container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n.otp__change-email {\n  cursor: pointer;\n  text-decoration: underline;\n  margin-left: 0;\n}\n\n.otp__change-email:hover {\n  color: var(--rebill-primary-color);\n  text-decoration: underline;\n}\n\n.otp__alternative {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin: 32px;\n  width: 100%;\n}\n\n.otp__rebill-alert {\n  width: 100%;\n}\n\n.otp__guest-options {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  margin-top: auto;\n}\n\n.otp__verifying-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin: 8px 0;\n}\n\n.otp__code-resent-container rebill-typography {\n  display: flex;\n  line-height: 1;\n}\n\n.otp__code-resent-container rebill-icon {\n  flex-shrink: 0;\n  display: inline-flex;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n.otp__spinner {\n  width: 15px;\n  height: 15px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-radius: 50%;\n  border-top-color: var(--rebill-color-primary);\n  animation: spin 1s linear infinite;\n  display: inline-block;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Responsive adjustments */\n@media (max-width: 1024px) {\n  .otp__otp-container {\n    min-height: calc(100vh - 40px);\n  }\n\n  .otp__guest-options {\n    margin-top: 32px;\n  }\n}\n\n@media (min-width: 1025px) {\n  .otp__otp-container {\n    justify-content: flex-start;\n  }\n\n  .otp__guest-options {\n    margin-top: auto;\n    padding-bottom: 2rem;\n  }\n}\n","import { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { OTPVerifyResponse } from '../../../api/entities/OTP/types';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { createCountdownTimer } from '../../../utils/timer';\n\n@Component({\n  tag: 'otp-component',\n  styleUrl: 'otp.css',\n  shadow: false,\n})\nexport class Otp {\n  @Event() changeEmailClick: EventEmitter<void>;\n  @State() timeLeft: number = 59;\n  @State() isTimerRunning: boolean = false;\n  @State() codeResent: boolean = false;\n  @State() isVerifying: boolean = false;\n  @State() otpValue: string = '';\n  @Event() returnForm: EventEmitter<boolean>;\n  @Event() codeVerified: EventEmitter<OTPVerifyResponse>;\n  @State() error: boolean = false;\n\n  private timer = createCountdownTimer({\n    duration: 59,\n    onTick: timeLeft => {\n      this.timeLeft = timeLeft;\n    },\n    onComplete: () => {\n      this.isTimerRunning = false;\n    },\n  });\n\n  private messageTimer = createCountdownTimer({\n    duration: 5,\n    onComplete: () => {\n      this.codeResent = false;\n    },\n  });\n\n  disconnectedCallback() {\n    this.timer.stop();\n  }\n\n  startTimer() {\n    this.timer.start();\n    this.isTimerRunning = true;\n  }\n\n  handleResendCode = async () => {\n    if (!this.isTimerRunning) {\n      await api.otp.generate(sessionState.data.sessionId, {\n        email: sessionState.data.userInformation.email,\n      });\n      this.codeResent = true;\n      this.messageTimer.start();\n      this.startTimer();\n\n      this.error = false;\n    }\n  };\n\n  handleOtpChange = (value: string) => {\n    this.otpValue = value;\n\n    if (value.length === 6) {\n      this.handleVerifyOtp(value);\n      this.error = false;\n    }\n  };\n\n  handleVerifyOtp = async (otp: string) => {\n    this.isVerifying = true;\n    try {\n      const response = await api.otp.verify(sessionState.data.sessionId, {\n        email: sessionState.data.userInformation.email,\n        code: otp,\n      });\n\n      this.codeVerified.emit(response.data);\n      SessionStore.setUserInformation({\n        ...response.data.customer,\n        fullName: `${response.data.customer.firstName} ${response.data.customer.lastName}`.trim(),\n        phoneNumber: {\n          number: response.data.customer.phoneNumbers[0].number,\n          countryCode: response.data.customer.phoneNumbers[0].countryCode,\n        },\n        address: {\n          billingAddress: {\n            address: response.data.customer.addresses[0].lineOne,\n            zip: response.data.customer.addresses[0].zipCode,\n            city: response.data.customer.addresses[0].city,\n            state: response.data.customer.addresses[0].state,\n            country: response.data.customer.addresses[0].country,\n          },\n        },\n        documentType: response.data.customer.identifications[0].type,\n        documentNumber: response.data.customer.identifications[0].value,\n      });\n      SessionStore.setAccessToken(response.data.accessToken);\n      SessionStore.setCustomerId(response.data.customer.id);\n      this.otpValue = '';\n      this.error = false;\n    } catch (error) {\n      this.error = true;\n    } finally {\n      this.isVerifying = false;\n    }\n  };\n\n  render() {\n    return (\n      <div class=\"otp__otp-container\">\n        <div class=\"otp__user-information\">\n          <div class=\"otp__otp-description-container\">\n            <rebill-typography variant=\"body2\" class=\"otp__otp-description\">\n              {I18nService.translate('otp.description')}\n            </rebill-typography>\n            <rebill-typography variant=\"subtitle-bold\" class=\"otp__otp-description-digits\">\n              {' '}\n              <strong>{I18nService.translate('otp.descriptionDigits')}</strong>{' '}\n            </rebill-typography>\n            <rebill-typography variant=\"body2\" class=\"otp__otp-description-email\">\n              {I18nService.translate('otp.descriptionEmail')}\n            </rebill-typography>\n          </div>\n          <rebill-typography variant=\"body2\" class=\"otp__otp-email-line\">\n            {sessionState.data.userInformation.email}{' '}\n            {!sessionState.data.prefilledData?.email && (\n              <span\n                class=\"otp__change-email\"\n                onClick={() => {\n                  this.otpValue = '';\n                  this.error = false;\n                  this.returnForm.emit(false);\n                }}\n              >\n                {I18nService.translate('otp.change')}\n              </span>\n            )}\n          </rebill-typography>\n        </div>\n        <input-otp\n          otp={this.otpValue}\n          onOtpChange={event => this.handleOtpChange(event.detail)}\n          error={this.error ? I18nService.translate('otp.error') : ''}\n        />\n\n        {this.isVerifying && (\n          <div class=\"otp__verifying-container\">\n            <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n              {I18nService.translate('otp.verifyingCode')}\n            </rebill-typography>\n            <div class=\"otp__spinner\"></div>\n          </div>\n        )}\n        <rebill-button\n          type=\"button\"\n          variant=\"outline\"\n          theme={this.isTimerRunning ? 'secondary' : 'primary'}\n          disabled={this.isTimerRunning}\n          onClick={this.handleResendCode}\n          size=\"small\"\n          style={{ height: '24px', marginBottom: '8px' }}\n        >\n          {this.isTimerRunning\n            ? `${I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`\n            : I18nService.translate('otp.resendCode')}\n        </rebill-button>\n\n        {this.codeResent && (\n          <div class=\"otp__code-resent-container\">\n            <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREEN}>\n              <rebill-icon name=\"check-radio\" />\n              {I18nService.translate('otp.codeResent')}\n            </rebill-typography>\n          </div>\n        )}\n        <rebill-alert\n          class=\"otp__rebill-alert\"\n          type=\"secure\"\n          variant=\"variant-info\"\n          message={I18nService.translate('otp.infoMessage')}\n          icon=\"circle-info\"\n          alertTitle={I18nService.translate('otp.infoTitle')}\n          colorIcon={COLORS_ENUM.PRIMARY_DARK_LIGHT}\n        />\n        <div class=\"otp__alternative\">\n          <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK}>\n            o\n          </rebill-typography>\n        </div>\n        <div class=\"otp__guest-options\">\n          <rebill-button\n            type=\"button\"\n            variant=\"outline\"\n            theme=\"secondary\"\n            size=\"medium\"\n            onClick={() => {\n              this.otpValue = '';\n              this.error = false;\n              this.returnForm.emit(false);\n            }}\n          >\n            {I18nService.translate('otp.continueAsGuest')}\n          </rebill-button>\n\n          <rebill-alert\n            type=\"secure\"\n            variant=\"variant-secure\"\n            icon=\"lock-outline\"\n            message={I18nService.translate('otp.secureMessage')}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BnBTbmTe.js → p-DA0QxWuE.js}

@@ -26,11 +26,11 @@ const SelectableCard = /*@__PURE__*/ proxyCustomElement(class SelectableCard ext
         this.selectableCardClick.emit(this.cardKey);
     };
     render() {
-        return (h("button", { key: '5c0c943a5423aa1fdfc9f863d79ca642c9b7ab95', class: {
+        return (h("button", { key: '4c24158fbfb72e9300cb020667c0fa67f88d6775', class: {
                 'selectable-card': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, h("div", { key: '1a445dd4149ac71e22db55af4da047ae0df63fa9', class: "icon" }, h("slot", { key: '8e25979ec5567c23844466f2b078dc746cee3690', name: "icon" })), h("span", { key: 'd34e5cc893acb3a03fa05672d7d068a9e7d19dca', class: "label" }, this.label)));
+            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, h("div", { key: '5cb1e550f3e7ac20b1067df1d1071eb02612fa53', class: "icon" }, h("slot", { key: 'c11b6b312f80b180e0b6dde93469d32f8c6ebc06', name: "icon" })), h("span", { key: '60c89e7aa7c9af391c9e2f0de0f20872d1e4e9ca', class: "label" }, this.label)));
     }
     static get style() { return selectableCardCss; }
 }, [260, "selectable-card", {
@@ -55,6 +55,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { SelectableCard as S, defineCustomElement as d };
-//# sourceMappingURL=p-BnBTbmTe.js.map
+//# sourceMappingURL=p-DA0QxWuE.js.map
 
-//# sourceMappingURL=p-BnBTbmTe.js.map
+//# sourceMappingURL=p-DA0QxWuE.js.map

package/dist/components/{p-BnBTbmTe.js.map → p-DA0QxWuE.js.map}

@@ -1 +1 @@
-{"file":"p-BnBTbmTe.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,09FAA09F;;MCOv+F,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAEjB,QAAQ,GAAY,KAAK;;AAEzB,IAAA,KAAK;;AAEL,IAAA,OAAO;;IAEP,QAAQ,GAAY,KAAK;AAExB,IAAA,mBAAmB;IAEpB,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;;QAEF,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7C,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/selectable-card/selectable-card.css?tag=selectable-card","src/components/shared/selectable-card/selectable-card.tsx"],"sourcesContent":["@import '../../../styles/variables.css';\n\n.selectable-card {\n  border: 2px solid var(--rebill-color-border);\n  background: var(--rebill-color-background);\n  border-radius: 8px;\n  padding: 12px 12px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 77px;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 8px;\n  cursor: pointer;\n  box-shadow: none;\n  outline: none;\n  transition: border 0.2s;\n  box-sizing: border-box;\n  min-width: 0;\n}\n\n.selectable-card.selected {\n  border: 2px solid var(--rebill-color-primary);\n}\n\n.icon {\n  color: var(--rebill-color-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  width: 100%;\n  min-width: 0;\n}\n\n.icon ::slotted(*) {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  max-height: 24px;\n  width: auto;\n}\n\n.label {\n  color: #000;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.selectable-card.selected .label {\n  color: var(--rebill-color-primary);\n}\n\n.selectable-card.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.selectable-card.disabled:not(.selected) {\n  opacity: 0.6;\n  border: 2px solid #d8dadf;\n}\n\n.selectable-card.disabled:not(.selected) .icon {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.selectable-card.disabled.selected .label {\n  color: var(--rebill-color-primary) !important;\n}\n\n.selectable-card.disabled.selected .icon {\n  color: var(--rebill-color-primary) !important;\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'selectable-card',\n  styleUrl: 'selectable-card.css',\n  shadow: false,\n})\nexport class SelectableCard {\n  /** Si la tarjeta está seleccionada */\n  @Prop() selected: boolean = false;\n  /** Texto de la tarjeta */\n  @Prop() label: string;\n  /** Evento al hacer click */\n  @Prop() cardKey: string;\n  /** Si la tarjeta está deshabilitada */\n  @Prop() disabled: boolean = false;\n\n  @Event() selectableCardClick: EventEmitter<string>;\n\n  private handleClick = () => {\n    if (this.disabled) {\n      return;\n    }\n    this.selectableCardClick.emit(this.cardKey);\n  };\n\n  render() {\n    return (\n      <button\n        class={{\n          'selectable-card': true,\n          'selected': this.selected,\n          'disabled': this.disabled,\n        }}\n        onClick={this.handleClick}\n        disabled={this.disabled}\n        part=\"button\"\n        type=\"button\"\n      >\n        <div class=\"icon\">\n          <slot name=\"icon\" />\n        </div>\n        <span class=\"label\">{this.label}</span>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DA0QxWuE.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,09FAA09F;;MCOv+F,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAEjB,QAAQ,GAAY,KAAK;;AAEzB,IAAA,KAAK;;AAEL,IAAA,OAAO;;IAEP,QAAQ,GAAY,KAAK;AAExB,IAAA,mBAAmB;IAEpB,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;;QAEF,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7C,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/selectable-card/selectable-card.css?tag=selectable-card","src/components/shared/selectable-card/selectable-card.tsx"],"sourcesContent":["@import '../../../styles/variables.css';\n\n.selectable-card {\n  border: 2px solid var(--rebill-color-border);\n  background: var(--rebill-color-background);\n  border-radius: 8px;\n  padding: 12px 12px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 77px;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 8px;\n  cursor: pointer;\n  box-shadow: none;\n  outline: none;\n  transition: border 0.2s;\n  box-sizing: border-box;\n  min-width: 0;\n}\n\n.selectable-card.selected {\n  border: 2px solid var(--rebill-color-primary);\n}\n\n.icon {\n  color: var(--rebill-color-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  width: 100%;\n  min-width: 0;\n}\n\n.icon ::slotted(*) {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  max-height: 24px;\n  width: auto;\n}\n\n.label {\n  color: #000;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.selectable-card.selected .label {\n  color: var(--rebill-color-primary);\n}\n\n.selectable-card.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.selectable-card.disabled:not(.selected) {\n  opacity: 0.6;\n  border: 2px solid #d8dadf;\n}\n\n.selectable-card.disabled:not(.selected) .icon {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.selectable-card.disabled.selected .label {\n  color: var(--rebill-color-primary) !important;\n}\n\n.selectable-card.disabled.selected .icon {\n  color: var(--rebill-color-primary) !important;\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'selectable-card',\n  styleUrl: 'selectable-card.css',\n  shadow: false,\n})\nexport class SelectableCard {\n  /** Si la tarjeta está seleccionada */\n  @Prop() selected: boolean = false;\n  /** Texto de la tarjeta */\n  @Prop() label: string;\n  /** Evento al hacer click */\n  @Prop() cardKey: string;\n  /** Si la tarjeta está deshabilitada */\n  @Prop() disabled: boolean = false;\n\n  @Event() selectableCardClick: EventEmitter<string>;\n\n  private handleClick = () => {\n    if (this.disabled) {\n      return;\n    }\n    this.selectableCardClick.emit(this.cardKey);\n  };\n\n  render() {\n    return (\n      <button\n        class={{\n          'selectable-card': true,\n          'selected': this.selected,\n          'disabled': this.disabled,\n        }}\n        onClick={this.handleClick}\n        disabled={this.disabled}\n        part=\"button\"\n        type=\"button\"\n      >\n        <div class=\"icon\">\n          <slot name=\"icon\" />\n        </div>\n        <span class=\"label\">{this.label}</span>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CpXk4UfE.js → p-DBi6K19S.js}

@@ -1,9 +1,9 @@
 import { proxyCustomElement, H, h } from './p-8BpuJ_V5.js';
 import { a as api } from './p-Dh-yfb0D.js';
 import { I as I18nService, s as state, e as instance, a as SessionStore } from './p-CMzpQU2o.js';
-import { r as renewalState, o as onChange, R as RenewalStore } from './p-RGadlsa-.js';
+import { r as renewalState, o as onChange, R as RenewalStore } from './p-hpg1lOUJ.js';
 import { d as defineCustomElement$2 } from './p-CWY-g0zG.js';
-import { d as defineCustomElement$1 } from './p-BL08tUBX.js';
+import { d as defineCustomElement$1 } from './p-DRTzT9ks.js';
 
 const Identification = /*@__PURE__*/ proxyCustomElement(class Identification extends H {
     constructor(registerHost) {
@@ -69,7 +69,7 @@ const Identification = /*@__PURE__*/ proxyCustomElement(class Identification ext
             label: documentType.value,
             value: documentType.value,
         }));
-        return (h(h.Fragment, null, h("rebill-input-combo", { key: '6823049ae91bcbbf61c0b0e9b913ae4b581e21b9', "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: '075b874873f297d3e2e72e54625db2d5cc49c619', "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 })));
     }
 }, [256, "card-identification", {
         "documentTypeError": [1, "document-type-error"],
@@ -105,6 +105,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { Identification as I, defineCustomElement as d };
-//# sourceMappingURL=p-CpXk4UfE.js.map
+//# sourceMappingURL=p-DBi6K19S.js.map
 
-//# sourceMappingURL=p-CpXk4UfE.js.map
+//# sourceMappingURL=p-DBi6K19S.js.map

package/dist/components/{p-CpXk4UfE.js.map → p-DBi6K19S.js.map}

@@ -1 +1 @@
-{"file":"p-CpXk4UfE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState","i18n"],"sources":["src/components/checkout/payment-method-selector/card-fields/identification/identification.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { api, DocumentType } from '../../../../../api';\nimport i18n from '../../../../../i18n/i18n.config';\nimport { I18nService } from '../../../../../i18n/i18n.service';\nimport { onChange, renewalState, RenewalStore } from '../../../../../store/renewal.store';\nimport { sessionState, SessionStore } from '../../../../../store/session.store';\n\n@Component({\n  tag: 'card-identification',\n  shadow: false,\n})\nexport class Identification {\n  @State() documentTypes: DocumentType[] = [];\n  @State() country: string = '';\n  @State() currentLanguage: string = I18nService.getCurrentLanguage();\n  @Prop() documentTypeError: string = '';\n  @Prop() documentNumberError: string = '';\n  @Prop() disabled?: boolean = false;\n\n  loadDocumentTypes = async () => {\n    const currentCountry = renewalState.isInitialized\n      ? renewalState.data?.price?.country\n      : sessionState?.data?.pricing?.country;\n\n    if (currentCountry && currentCountry !== this.country) {\n      try {\n        const response = await api.data.getDocumentTypes(currentCountry);\n        this.documentTypes = response.data;\n        this.country = currentCountry;\n      } catch (error) {\n        console.error('Error loading document types:', error);\n      }\n    }\n  };\n\n  async componentWillLoad() {\n    i18n.on('languageChanged', this.handleLanguageChange);\n\n    SessionStore.onChange('data', () => {\n      if (!renewalState.isInitialized) {\n        this.loadDocumentTypes();\n      }\n    });\n\n    onChange('data', () => {\n      if (renewalState.isInitialized) {\n        this.loadDocumentTypes();\n      }\n    });\n\n    await this.loadDocumentTypes();\n  }\n\n  handleInputChange = (event: CustomEvent) => {\n    const { id, value } = event.detail;\n\n    if (renewalState.isInitialized) {\n      RenewalStore.setUserIdentification({ [id]: value });\n    } else {\n      SessionStore.setUserInformation({ [id]: value });\n    }\n  };\n\n  disconnectedCallback() {\n    i18n.off('languageChanged', this.handleLanguageChange);\n  }\n\n  private handleLanguageChange = () => {\n    this.currentLanguage = I18nService.getCurrentLanguage();\n  };\n\n  render() {\n    // Determinar qué error mostrar (priorizar documentTypeError si ambos están presentes)\n    const error = this.documentTypeError || this.documentNumberError;\n\n    const options = this.documentTypes.map(documentType => ({\n      label: documentType.value,\n      value: documentType.value,\n    }));\n\n    return (\n      <>\n        <rebill-input-combo\n          select-id=\"documentType\"\n          input-id=\"documentNumber\"\n          on-input={this.handleInputChange}\n          select-placeholder={I18nService.translate('document.typePlaceholder')}\n          input-placeholder={I18nService.translate('document.numberPlaceholder')}\n          error={I18nService.translate(error)}\n          options={options}\n          disabled={this.disabled}\n        />\n      </>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DBi6K19S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState","i18n"],"sources":["src/components/checkout/payment-method-selector/card-fields/identification/identification.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { api, DocumentType } from '../../../../../api';\nimport i18n from '../../../../../i18n/i18n.config';\nimport { I18nService } from '../../../../../i18n/i18n.service';\nimport { onChange, renewalState, RenewalStore } from '../../../../../store/renewal.store';\nimport { sessionState, SessionStore } from '../../../../../store/session.store';\n\n@Component({\n  tag: 'card-identification',\n  shadow: false,\n})\nexport class Identification {\n  @State() documentTypes: DocumentType[] = [];\n  @State() country: string = '';\n  @State() currentLanguage: string = I18nService.getCurrentLanguage();\n  @Prop() documentTypeError: string = '';\n  @Prop() documentNumberError: string = '';\n  @Prop() disabled?: boolean = false;\n\n  loadDocumentTypes = async () => {\n    const currentCountry = renewalState.isInitialized\n      ? renewalState.data?.price?.country\n      : sessionState?.data?.pricing?.country;\n\n    if (currentCountry && currentCountry !== this.country) {\n      try {\n        const response = await api.data.getDocumentTypes(currentCountry);\n        this.documentTypes = response.data;\n        this.country = currentCountry;\n      } catch (error) {\n        console.error('Error loading document types:', error);\n      }\n    }\n  };\n\n  async componentWillLoad() {\n    i18n.on('languageChanged', this.handleLanguageChange);\n\n    SessionStore.onChange('data', () => {\n      if (!renewalState.isInitialized) {\n        this.loadDocumentTypes();\n      }\n    });\n\n    onChange('data', () => {\n      if (renewalState.isInitialized) {\n        this.loadDocumentTypes();\n      }\n    });\n\n    await this.loadDocumentTypes();\n  }\n\n  handleInputChange = (event: CustomEvent) => {\n    const { id, value } = event.detail;\n\n    if (renewalState.isInitialized) {\n      RenewalStore.setUserIdentification({ [id]: value });\n    } else {\n      SessionStore.setUserInformation({ [id]: value });\n    }\n  };\n\n  disconnectedCallback() {\n    i18n.off('languageChanged', this.handleLanguageChange);\n  }\n\n  private handleLanguageChange = () => {\n    this.currentLanguage = I18nService.getCurrentLanguage();\n  };\n\n  render() {\n    // Determinar qué error mostrar (priorizar documentTypeError si ambos están presentes)\n    const error = this.documentTypeError || this.documentNumberError;\n\n    const options = this.documentTypes.map(documentType => ({\n      label: documentType.value,\n      value: documentType.value,\n    }));\n\n    return (\n      <>\n        <rebill-input-combo\n          select-id=\"documentType\"\n          input-id=\"documentNumber\"\n          on-input={this.handleInputChange}\n          select-placeholder={I18nService.translate('document.typePlaceholder')}\n          input-placeholder={I18nService.translate('document.numberPlaceholder')}\n          error={I18nService.translate(error)}\n          options={options}\n          disabled={this.disabled}\n        />\n      </>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-gj5jUg6C.js → p-DDp9qjAz.js}

@@ -4,7 +4,7 @@ import { c as copyToClipboard } from './p-OxmhgFET.js';
 import { C as COLORS_ENUM } from './p-DA598vBj.js';
 import { i as isBase64Image, d as decodeQRData, g as generateQRCodeSVG, a as getCurrencyInstructions } from './p-DCh_nLnm.js';
 import { c as createCountdownTimer, f as formatTimeMMSSMax60 } from './p-bcHxwlBu.js';
-import { d as defineCustomElement$4 } from './p-DrAiGSzG.js';
+import { d as defineCustomElement$4 } from './p-Dp8EoajW.js';
 import { d as defineCustomElement$3 } from './p-DvWdkIUq.js';
 import { d as defineCustomElement$2 } from './p-CWY-g0zG.js';
 import { d as defineCustomElement$1 } from './p-C_txMekS.js';
@@ -156,6 +156,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { QrCode as Q, defineCustomElement as d };
-//# sourceMappingURL=p-gj5jUg6C.js.map
+//# sourceMappingURL=p-DDp9qjAz.js.map
 
-//# sourceMappingURL=p-gj5jUg6C.js.map
+//# sourceMappingURL=p-DDp9qjAz.js.map

package/dist/components/{p-gj5jUg6C.js.map → p-DDp9qjAz.js.map}

@@ -1 +1 @@
-{"file":"p-gj5jUg6C.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/apm/qr-code/qr-code.css?tag=qr-code","src/components/checkout/apm/qr-code/qr-code.tsx"],"sourcesContent":[".qr-code {\n  border: 1px solid var(--rebill-color-background-right);\n  border-radius: 8px;\n  background: var(--rebill-color-background);\n  overflow: hidden;\n  font-family: var(--rebill-font-family);\n  margin-top: 24px;\n}\n\n.qr-code-header {\n  padding: 16px 24px;\n  background: var(--rebill-color-background-left);\n  border-bottom: 1px solid var(--rebill-color-background-right);\n}\n\n.expiration-section {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: center;\n}\n\n.expiration-text {\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--rebill-color-text-secondary);\n}\n\n.qr-code-content {\n  padding: 16px 0px 16px 0px;\n  background: #ffffff !important;\n}\n\n.qr-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  background: #ffffff !important;\n}\n\n.qr-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 16px;\n  background: var(--rebill-color-background);\n  position: relative;\n  border-radius: 8px;\n}\n\n.qr-container::before,\n.qr-container::after {\n  content: '';\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  border: 2px solid var(--rebill-color-green);\n}\n\n/* Top-left corner */\n.qr-container::before {\n  top: -2px;\n  left: -2px;\n  border-right: none;\n  border-bottom: none;\n  border-top-left-radius: 8px;\n}\n\n/* Top-right corner */\n.qr-container::after {\n  top: -2px;\n  right: -2px;\n  border-left: none;\n  border-bottom: none;\n  border-top-right-radius: 8px;\n}\n\n/* Bottom corners */\n.corner-bottom-left,\n.corner-bottom-right {\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  border: 2px solid var(--rebill-color-green);\n}\n\n/* Bottom-left corner */\n.corner-bottom-left {\n  bottom: -2px;\n  left: -2px;\n  border-right: none;\n  border-top: none;\n  border-bottom-left-radius: 8px;\n}\n\n/* Bottom-right corner */\n.corner-bottom-right {\n  bottom: -2px;\n  right: -2px;\n  border-left: none;\n  border-top: none;\n  border-bottom-right-radius: 8px;\n}\n\n.qr-image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 146px;\n  height: 146px;\n  background: #ffffff !important;\n  border-radius: 4px;\n}\n\n.qr-image svg {\n  width: 146px;\n  height: 146px;\n  border-radius: 4px;\n  background: #ffffff !important;\n}\n\n.qr-image img {\n  width: 146px;\n  height: 146px;\n  border-radius: 4px;\n  background: #ffffff !important;\n}\n\n/* Scanner line animation */\n.scanner-line {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--rebill-color-green), transparent);\n  box-shadow: 0 0 10px var(--rebill-color-green);\n  animation: scanDown 2s ease-in-out;\n  animation-fill-mode: forwards;\n  z-index: 10;\n}\n\n@keyframes scanDown {\n  0% {\n    top: 100%;\n    opacity: 0;\n  }\n  10% {\n    opacity: 1;\n  }\n  90% {\n    opacity: 1;\n  }\n  100% {\n    top: 0;\n    opacity: 0;\n  }\n}\n\n.qr-instruction {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.instructions-section {\n  background: var(--rebill-color-background-secondary);\n}\n\n.instructions-content {\n  padding: 16px 16px 16px 16px;\n  background: var(--rebill-color-background);\n}\n\n.instructions-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.instruction-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  text-align: left;\n}\n\n.instruction-item:not(:last-child) {\n  margin-bottom: 8px;\n}\n\n.instruction-number {\n  background: var(--rebill-color-background-right);\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  text-align: center;\n  line-height: 1;\n}\n\n.instruction-number rebill-typography {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n.instruction-text {\n  flex: 1;\n}\n\n.copy-btn {\n  display: flex;\n  padding: var(--padding-base, 6px) var(--padding-xl, 10px);\n  justify-content: center;\n  align-items: center;\n  gap: var(--padding-lg, 8px);\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { PAYMENT_METHOD_ENUM } from '../../../../components';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { sessionState } from '../../../../store/session.store';\nimport { copyToClipboard } from '../../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport { decodeQRData, generateQRCodeSVG, isBase64Image } from '../../../../utils/qr-code';\nimport { getCurrencyInstructions } from '../../../../utils/qr-instructions';\nimport { createCountdownTimer, formatTimeMMSSMax60 } from '../../../../utils/timer';\n\n@Component({\n  tag: 'qr-code',\n  styleUrl: 'qr-code.css',\n  shadow: false,\n})\nexport class QrCode {\n  @Prop() qrCodeData: string;\n  @Prop() providerName: string;\n  @Prop() expirationDate: string;\n  @Prop() paymentMethod: PAYMENT_METHOD_ENUM;\n  @Prop() code: string;\n\n  @State() qrCodeSvg: string = '';\n  @State() isImage: boolean = false;\n  @State() timeLeft: number = 3600; // 1 hora (3600 segundos) por defecto\n  @State() formattedTime: string = '59:60';\n  @State() hasCopied: boolean = false;\n\n  @Event() timeUpdate: EventEmitter<number>; // Emitir minutos restantes\n\n  private countdownTimer: ReturnType<typeof createCountdownTimer> | null = null;\n\n  async componentWillLoad() {\n    await this.generateQRCode();\n    this.startCountdownTimer();\n    // Emitir el tiempo inicial (60 minutos)\n    this.timeUpdate.emit(60);\n  }\n\n  async componentWillUpdate() {\n    // Regenerate QR code if data changes\n    await this.generateQRCode();\n  }\n\n  disconnectedCallback() {\n    // Limpiar el timer cuando el componente se desmonte\n    if (this.countdownTimer) {\n      this.countdownTimer.stop();\n    }\n  }\n\n  private async generateQRCode() {\n    try {\n      if (!this.qrCodeData) {\n        this.qrCodeSvg = '';\n        this.isImage = false;\n        return;\n      }\n\n      // Check if the data is already an image\n      if (isBase64Image(this.qrCodeData)) {\n        this.isImage = true;\n        this.qrCodeSvg = ''; // No QR code needed for images\n        return;\n      }\n\n      // For non-image data, generate QR code\n      this.isImage = false;\n      const decodedData = decodeQRData(this.qrCodeData);\n      const qrCodeSvg = await generateQRCodeSVG(decodedData);\n      this.qrCodeSvg = qrCodeSvg;\n    } catch (error) {\n      console.error('Error generating QR code:', error);\n      this.qrCodeSvg = '';\n      this.isImage = false;\n    }\n  }\n\n  private startCountdownTimer = () => {\n    if (this.countdownTimer) {\n      this.countdownTimer.stop();\n    }\n    this.countdownTimer = createCountdownTimer({\n      duration: 3600,\n      onTick: (timeLeft: number) => {\n        this.timeLeft = timeLeft;\n        this.formattedTime = formatTimeMMSSMax60(timeLeft);\n\n        const minutesLeft = Math.ceil(timeLeft / 60);\n        this.timeUpdate.emit(minutesLeft);\n      },\n      onComplete: () => {\n        this.timeLeft = 0;\n        this.formattedTime = '00:00';\n        this.timeUpdate.emit(0);\n      },\n    });\n\n    this.countdownTimer.start();\n  };\n\n  private getCurrentLanguageInstructions = (): string[] => {\n    const currentLanguage = I18nService.getCurrentLanguage();\n    const currency = sessionState.data.pricing.country;\n    return getCurrencyInstructions(currency, currentLanguage);\n  };\n\n  render() {\n    const instructionLines = this.getCurrentLanguageInstructions();\n\n    return (\n      <div class=\"qr-code\">\n        {/* Header with countdown timer */}\n        <div class=\"qr-code-header\">\n          <div class=\"expiration-section\">\n            <rebill-icon name=\"calendar-clock\" />\n            <span class=\"expiration-text\">\n              {I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })}\n            </span>\n          </div>\n        </div>\n\n        {/* QR code content */}\n        <div class=\"qr-code-content\">\n          <div class=\"qr-section\">\n            <div class=\"qr-instruction\">\n              <rebill-typography\n                variant=\"subtitle-bold\"\n                style={{ fontSize: '12px' }}\n                color={COLORS_ENUM.GREY_300}\n              >\n                {I18nService.translate('qrCode.scanInstruction')}\n              </rebill-typography>\n            </div>\n            <div class=\"qr-container\">\n              {this.isImage ? (\n                <img\n                  src={`data:image/png;base64,${this.qrCodeData}`}\n                  alt=\"QR Code\"\n                  class=\"qr-image\"\n                />\n              ) : (\n                <div class=\"qr-image\" innerHTML={this.qrCodeSvg}></div>\n              )}\n              <div class=\"scanner-line\"></div>\n              <div class=\"corner-bottom-left\"></div>\n              <div class=\"corner-bottom-right\"></div>\n            </div>\n            {this.code && (\n              <rebill-button\n                class=\"copy-btn\"\n                variant=\"secondary\"\n                size=\"small\"\n                onClick={async () => {\n                  if (!this.code) return;\n                  await copyToClipboard(this.code);\n                  this.hasCopied = true;\n                  setTimeout(() => (this.hasCopied = false), 2000);\n                }}\n                type=\"button\"\n              >\n                <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n                  {I18nService.translate('qrCode.copyCode')}\n                </rebill-typography>\n                {this.hasCopied ? (\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844\"\n                      stroke=\"#35B093\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                    />\n                  </svg>\n                ) : (\n                  <rebill-icon name=\"copy\" size=\"16px\" />\n                )}\n              </rebill-button>\n            )}\n          </div>\n        </div>\n\n        {/* Collapsible instructions */}\n        {instructionLines.length > 0 && (\n          <collapsible-card\n            variant=\"flat\"\n            header={I18nService.translate('qrCode.instructionsLabel')}\n            open={false}\n          >\n            <div>\n              <ol class=\"instructions-list\">\n                {instructionLines.map((line, index) => (\n                  <li key={index} class=\"instruction-item\">\n                    <div class=\"instruction-number\">\n                      <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n                        {index + 1}\n                      </rebill-typography>\n                    </div>\n                    <div class=\"instruction-text\">\n                      <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n                        {line}\n                      </rebill-typography>\n                    </div>\n                  </li>\n                ))}\n              </ol>\n            </div>\n          </collapsible-card>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DDp9qjAz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/apm/qr-code/qr-code.css?tag=qr-code","src/components/checkout/apm/qr-code/qr-code.tsx"],"sourcesContent":[".qr-code {\n  border: 1px solid var(--rebill-color-background-right);\n  border-radius: 8px;\n  background: var(--rebill-color-background);\n  overflow: hidden;\n  font-family: var(--rebill-font-family);\n  margin-top: 24px;\n}\n\n.qr-code-header {\n  padding: 16px 24px;\n  background: var(--rebill-color-background-left);\n  border-bottom: 1px solid var(--rebill-color-background-right);\n}\n\n.expiration-section {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: center;\n}\n\n.expiration-text {\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--rebill-color-text-secondary);\n}\n\n.qr-code-content {\n  padding: 16px 0px 16px 0px;\n  background: #ffffff !important;\n}\n\n.qr-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  background: #ffffff !important;\n}\n\n.qr-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 16px;\n  background: var(--rebill-color-background);\n  position: relative;\n  border-radius: 8px;\n}\n\n.qr-container::before,\n.qr-container::after {\n  content: '';\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  border: 2px solid var(--rebill-color-green);\n}\n\n/* Top-left corner */\n.qr-container::before {\n  top: -2px;\n  left: -2px;\n  border-right: none;\n  border-bottom: none;\n  border-top-left-radius: 8px;\n}\n\n/* Top-right corner */\n.qr-container::after {\n  top: -2px;\n  right: -2px;\n  border-left: none;\n  border-bottom: none;\n  border-top-right-radius: 8px;\n}\n\n/* Bottom corners */\n.corner-bottom-left,\n.corner-bottom-right {\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  border: 2px solid var(--rebill-color-green);\n}\n\n/* Bottom-left corner */\n.corner-bottom-left {\n  bottom: -2px;\n  left: -2px;\n  border-right: none;\n  border-top: none;\n  border-bottom-left-radius: 8px;\n}\n\n/* Bottom-right corner */\n.corner-bottom-right {\n  bottom: -2px;\n  right: -2px;\n  border-left: none;\n  border-top: none;\n  border-bottom-right-radius: 8px;\n}\n\n.qr-image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 146px;\n  height: 146px;\n  background: #ffffff !important;\n  border-radius: 4px;\n}\n\n.qr-image svg {\n  width: 146px;\n  height: 146px;\n  border-radius: 4px;\n  background: #ffffff !important;\n}\n\n.qr-image img {\n  width: 146px;\n  height: 146px;\n  border-radius: 4px;\n  background: #ffffff !important;\n}\n\n/* Scanner line animation */\n.scanner-line {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--rebill-color-green), transparent);\n  box-shadow: 0 0 10px var(--rebill-color-green);\n  animation: scanDown 2s ease-in-out;\n  animation-fill-mode: forwards;\n  z-index: 10;\n}\n\n@keyframes scanDown {\n  0% {\n    top: 100%;\n    opacity: 0;\n  }\n  10% {\n    opacity: 1;\n  }\n  90% {\n    opacity: 1;\n  }\n  100% {\n    top: 0;\n    opacity: 0;\n  }\n}\n\n.qr-instruction {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.instructions-section {\n  background: var(--rebill-color-background-secondary);\n}\n\n.instructions-content {\n  padding: 16px 16px 16px 16px;\n  background: var(--rebill-color-background);\n}\n\n.instructions-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.instruction-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  text-align: left;\n}\n\n.instruction-item:not(:last-child) {\n  margin-bottom: 8px;\n}\n\n.instruction-number {\n  background: var(--rebill-color-background-right);\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  text-align: center;\n  line-height: 1;\n}\n\n.instruction-number rebill-typography {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n.instruction-text {\n  flex: 1;\n}\n\n.copy-btn {\n  display: flex;\n  padding: var(--padding-base, 6px) var(--padding-xl, 10px);\n  justify-content: center;\n  align-items: center;\n  gap: var(--padding-lg, 8px);\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { PAYMENT_METHOD_ENUM } from '../../../../components';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { sessionState } from '../../../../store/session.store';\nimport { copyToClipboard } from '../../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport { decodeQRData, generateQRCodeSVG, isBase64Image } from '../../../../utils/qr-code';\nimport { getCurrencyInstructions } from '../../../../utils/qr-instructions';\nimport { createCountdownTimer, formatTimeMMSSMax60 } from '../../../../utils/timer';\n\n@Component({\n  tag: 'qr-code',\n  styleUrl: 'qr-code.css',\n  shadow: false,\n})\nexport class QrCode {\n  @Prop() qrCodeData: string;\n  @Prop() providerName: string;\n  @Prop() expirationDate: string;\n  @Prop() paymentMethod: PAYMENT_METHOD_ENUM;\n  @Prop() code: string;\n\n  @State() qrCodeSvg: string = '';\n  @State() isImage: boolean = false;\n  @State() timeLeft: number = 3600; // 1 hora (3600 segundos) por defecto\n  @State() formattedTime: string = '59:60';\n  @State() hasCopied: boolean = false;\n\n  @Event() timeUpdate: EventEmitter<number>; // Emitir minutos restantes\n\n  private countdownTimer: ReturnType<typeof createCountdownTimer> | null = null;\n\n  async componentWillLoad() {\n    await this.generateQRCode();\n    this.startCountdownTimer();\n    // Emitir el tiempo inicial (60 minutos)\n    this.timeUpdate.emit(60);\n  }\n\n  async componentWillUpdate() {\n    // Regenerate QR code if data changes\n    await this.generateQRCode();\n  }\n\n  disconnectedCallback() {\n    // Limpiar el timer cuando el componente se desmonte\n    if (this.countdownTimer) {\n      this.countdownTimer.stop();\n    }\n  }\n\n  private async generateQRCode() {\n    try {\n      if (!this.qrCodeData) {\n        this.qrCodeSvg = '';\n        this.isImage = false;\n        return;\n      }\n\n      // Check if the data is already an image\n      if (isBase64Image(this.qrCodeData)) {\n        this.isImage = true;\n        this.qrCodeSvg = ''; // No QR code needed for images\n        return;\n      }\n\n      // For non-image data, generate QR code\n      this.isImage = false;\n      const decodedData = decodeQRData(this.qrCodeData);\n      const qrCodeSvg = await generateQRCodeSVG(decodedData);\n      this.qrCodeSvg = qrCodeSvg;\n    } catch (error) {\n      console.error('Error generating QR code:', error);\n      this.qrCodeSvg = '';\n      this.isImage = false;\n    }\n  }\n\n  private startCountdownTimer = () => {\n    if (this.countdownTimer) {\n      this.countdownTimer.stop();\n    }\n    this.countdownTimer = createCountdownTimer({\n      duration: 3600,\n      onTick: (timeLeft: number) => {\n        this.timeLeft = timeLeft;\n        this.formattedTime = formatTimeMMSSMax60(timeLeft);\n\n        const minutesLeft = Math.ceil(timeLeft / 60);\n        this.timeUpdate.emit(minutesLeft);\n      },\n      onComplete: () => {\n        this.timeLeft = 0;\n        this.formattedTime = '00:00';\n        this.timeUpdate.emit(0);\n      },\n    });\n\n    this.countdownTimer.start();\n  };\n\n  private getCurrentLanguageInstructions = (): string[] => {\n    const currentLanguage = I18nService.getCurrentLanguage();\n    const currency = sessionState.data.pricing.country;\n    return getCurrencyInstructions(currency, currentLanguage);\n  };\n\n  render() {\n    const instructionLines = this.getCurrentLanguageInstructions();\n\n    return (\n      <div class=\"qr-code\">\n        {/* Header with countdown timer */}\n        <div class=\"qr-code-header\">\n          <div class=\"expiration-section\">\n            <rebill-icon name=\"calendar-clock\" />\n            <span class=\"expiration-text\">\n              {I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })}\n            </span>\n          </div>\n        </div>\n\n        {/* QR code content */}\n        <div class=\"qr-code-content\">\n          <div class=\"qr-section\">\n            <div class=\"qr-instruction\">\n              <rebill-typography\n                variant=\"subtitle-bold\"\n                style={{ fontSize: '12px' }}\n                color={COLORS_ENUM.GREY_300}\n              >\n                {I18nService.translate('qrCode.scanInstruction')}\n              </rebill-typography>\n            </div>\n            <div class=\"qr-container\">\n              {this.isImage ? (\n                <img\n                  src={`data:image/png;base64,${this.qrCodeData}`}\n                  alt=\"QR Code\"\n                  class=\"qr-image\"\n                />\n              ) : (\n                <div class=\"qr-image\" innerHTML={this.qrCodeSvg}></div>\n              )}\n              <div class=\"scanner-line\"></div>\n              <div class=\"corner-bottom-left\"></div>\n              <div class=\"corner-bottom-right\"></div>\n            </div>\n            {this.code && (\n              <rebill-button\n                class=\"copy-btn\"\n                variant=\"secondary\"\n                size=\"small\"\n                onClick={async () => {\n                  if (!this.code) return;\n                  await copyToClipboard(this.code);\n                  this.hasCopied = true;\n                  setTimeout(() => (this.hasCopied = false), 2000);\n                }}\n                type=\"button\"\n              >\n                <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n                  {I18nService.translate('qrCode.copyCode')}\n                </rebill-typography>\n                {this.hasCopied ? (\n                  <svg\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844\"\n                      stroke=\"#35B093\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                    />\n                  </svg>\n                ) : (\n                  <rebill-icon name=\"copy\" size=\"16px\" />\n                )}\n              </rebill-button>\n            )}\n          </div>\n        </div>\n\n        {/* Collapsible instructions */}\n        {instructionLines.length > 0 && (\n          <collapsible-card\n            variant=\"flat\"\n            header={I18nService.translate('qrCode.instructionsLabel')}\n            open={false}\n          >\n            <div>\n              <ol class=\"instructions-list\">\n                {instructionLines.map((line, index) => (\n                  <li key={index} class=\"instruction-item\">\n                    <div class=\"instruction-number\">\n                      <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n                        {index + 1}\n                      </rebill-typography>\n                    </div>\n                    <div class=\"instruction-text\">\n                      <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n                        {line}\n                      </rebill-typography>\n                    </div>\n                  </li>\n                ))}\n              </ol>\n            </div>\n          </collapsible-card>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DlrQ_kVv.js → p-DIILFLsN.js}

@@ -9,10 +9,10 @@ import { P as PDFGenerator } from './p-BejsU9GH.js';
 import { d as defineCustomElement$8 } from './p-TtP-m545.js';
 import { d as defineCustomElement$7 } from './p-DvWdkIUq.js';
 import { d as defineCustomElement$6 } from './p-N5kDm5Y3.js';
-import { d as defineCustomElement$5 } from './p-BX1_zmbg.js';
-import { d as defineCustomElement$4 } from './p-D3QILlvg.js';
+import { d as defineCustomElement$5 } from './p-DvV5MmYi.js';
+import { d as defineCustomElement$4 } from './p-HzmATjhQ.js';
 import { d as defineCustomElement$3 } from './p-CWY-g0zG.js';
-import { d as defineCustomElement$2 } from './p-qI3t-gYu.js';
+import { d as defineCustomElement$2 } from './p-BZYd-So1.js';
 import { d as defineCustomElement$1 } from './p-C_txMekS.js';
 import { f as formatDateTime } from './p-CInOtzjF.js';
 
@@ -379,6 +379,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { CardSuccessPage as C, defineCustomElement as d };
-//# sourceMappingURL=p-DlrQ_kVv.js.map
+//# sourceMappingURL=p-DIILFLsN.js.map
 
-//# sourceMappingURL=p-DlrQ_kVv.js.map
+//# sourceMappingURL=p-DIILFLsN.js.map