npm - rebill-web-components-sdk - Versions diffs - 1.8.3-beta.4 → 1.8.3-beta.5 - Mend

rebill-web-components-sdk 1.8.3-beta.4 → 1.8.3-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (267) hide show

package/dist/rebill-web-components-sdk/{p-8f949cf1.entry.js.map → p-a780e6e8.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["otpCss","Otp","changeEmailClick","timeLeft","isTimerRunning","codeResent","isVerifying","otpValue","returnForm","codeVerified","error","timer","createCountdownTimer","duration","onTick","this","onComplete","messageTimer","disconnectedCallback","stop","startTimer","start","handleResendCode","async","api","otp","generate","sessionState","data","sessionId","email","userInformation","handleOtpChange","value","length","handleVerifyOtp","response","verify","code","emit","SessionStore","setUserInformation","customer","fullName","firstName","lastName","trim","phoneNumber","number","phoneNumbers","countryCode","address","billingAddress","addresses","lineOne","zip","zipCode","city","state","country","documentType","identifications","type","documentNumber","setAccessToken","accessToken","setCustomerId","id","render","h","key","class","variant","I18nService","translate","prefilledData","onClick","onOtpChange","event","detail","color","COLORS_ENUM","PRIMARY","theme","disabled","size","style","height","marginBottom","getFormattedTime","GREEN","name","message","icon","alertTitle","colorIcon","PRIMARY_DARK_LIGHT","PRIMARY_DARK","modalOverlayCss","ModalOverlay","visible","languageUpdateTrigger","unsubscribeCurrentLocaleStore","componentDidLoad","onChange","closeModal","ORANGE","modeSandboxMobileCss","RebillTestModeChipMobile","isPanelVisible","currentLanguage","getCurrentLanguage","componentWillLoad","i18n","on","handleLanguageChange","off","togglePanel","handleCopy","text","copyToClipboard","handleDocsClick","window","open","renderBasicChip","renderCardsPanel","GREY_700","ERROR","successPageCss","CardSuccessPage","typePaymentMethod","PAYMENT_METHOD_ENUM","CARD","bank","paymentMethodName","cardLastFour","paymentDate","referenceNumber","trialPeriodDays","debitDay","planAmount","currentLocale","breakpoint","BREAKPOINT_ENUM","DESKTOP","successRedirect","loaderProgress","isLoadingLottie","showRedirectMessage","timeToRedirect","progressInterval","lottieContainer","lottieAnimation","successDisplayTimeout","applyStartCaseToBrand","brand","toLowerCase","split","map","word","charAt","toUpperCase","slice","join","getPaymentDate","payment","createdAt","getBreakpoint","innerWidth","itemInformation","redirectSuccess","setTimeout","loadLottieAnimation","redirectUrl","stopLoaderAnimation","addEventListener","handleResize","clearTimeout","removeEventListener","lottie","import","then","n","l","animationData","fetch","getAssetURL","animationJson","json","default","loadAnimation","container","renderer","loop","autoplay","startLoaderAnimation","interval","increment","setInterval","Math","min","clearInterval","undefined","destroy","handleDownloadReceipt","PDFGenerator","generateAndDownloadReceipt","paymentMethod","textPaymentMethodCard","BANK_TRANSFER","cardBrand","cardInformation","lastFour","formatDateTime","productTitle","title","subtotal","getFormattedSubtotal","total","getFormattedTotal","currency","pricing","installments","selectedInstallment","getInstallmentLabelSummary","installment","getRecalculatedInstallmentAmount","installmentAmount","cft","model","find","ENUM_INSTALLMENT_MODEL","CUSTOMER_FINANCED","discountAmount","getFormattedDiscountAmount","trial","trialEndDate","hasFreeTrial","getTrialEndDateFormatted","debitDate","hasDebitDay","getDebitDateFormatted","isBankTransfer","console","formattedAmount","formatAmount","SESSION_ITEM_TYPE_ENUM","PLAN","trialEndsAt","trialPeriodEndsAt","date","Date","locale","toLocaleDateString","month","getDate","today","targetDate","setMonth","getMonth","setDate","formattedBrand","hasRedirect","PRIMARY_DARK_TEXT","ref","el","width","isBreakpointBelow","viewBox","fill","xmlns","d","SECONDARY","Fragment","display","alignItems","gap","getPaymentMethodDisplayName","flexDirection","textAlign","align","GREEN_TEXT","days","count","stroke","userInformationCss","UserInformation","errors","customerExists","onRebillAccountClick","translateError","errorKey","includes","handleInputChange","handleBlur","getCardLabels","labels","push","label","handleRebillAccountClick","renderInputs","hasPrefilledEmail","hasPrefilledName","inputs","placeholder","clearable","marginTop","customerExistsButton","visibility","opacity","transition","hasAnyPrefilled","Host","cardTitle","cardLabels"],"sources":["src/components/checkout/otp/otp.css?tag=otp-component","src/components/checkout/otp/otp.tsx","src/components/shared/modal-overlay/modal-overlay.css?tag=rebill-modal-overlay","src/components/shared/modal-overlay/modal-overlay.tsx","src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx","src/components/checkout/card-success-page/success-page.css?tag=success-page","src/components/checkout/card-success-page/success-page.tsx","src/components/checkout/user-information/user-information.css?tag=user-information","src/components/checkout/user-information/user-information.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",".modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 12px 16px;\n box-sizing: border-box;\n}\n\n.modal-content {\n background: white;\n border-radius: 8px;\n padding: 16px 20px;\n width: 350px;\n box-shadow:\n 0 4px 12px -2px rgba(0, 0, 0, 0.15),\n 0 2px 4px -1px rgba(0, 0, 0, 0.1);\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.modal-content .alert {\n margin: 0;\n flex: 1;\n padding: 0;\n background: transparent;\n border: none;\n box-shadow: none;\n}\n\n/ Override para quitar cualquier color de fondo del modal /\n.modal-content .alert {\n background-color: transparent !important;\n border-color: transparent !important;\n}\n\n.modal-content .alert-message {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.modal-content .close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background-color 0.2s ease;\n padding: 0;\n margin: 0;\n outline: none;\n box-shadow: none;\n line-height: 1;\n}\n\n.modal-content .close-button:focus {\n outline: none;\n box-shadow: none;\n}\n\n.modal-content .close-button:hover {\n background-color: #f0f0f0;\n}\n\n.modal-content .close-button rebill-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@media (max-width: 768px) {\n .modal-overlay {\n padding: 8px 12px;\n }\n\n .modal-content {\n padding: 12px 16px;\n flex-direction: column;\n gap: 8px;\n text-align: center;\n }\n\n .modal-content .close-button {\n width: 100%;\n }\n}\n","import { Component, h, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { SessionStore } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-modal-overlay',\n styleUrl: 'modal-overlay.css',\n shadow: false,\n})\nexport class ModalOverlay {\n @State() visible: boolean = true;\n @State() languageUpdateTrigger: number = 0;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n componentDidLoad() {\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.languageUpdateTrigger++;\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n\n private closeModal = () => {\n this.visible = false;\n };\n\n render() {\n if (!this.visible) return null;\n\n return (\n <div class=\"modal-overlay\">\n <div class=\"modal-content\">\n <div class=\"alert info filled medium\">\n <div class=\"alert-icon\">\n <rebill-icon name=\"circle-info\" size=\"16px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <div class=\"alert-message\">\n <div class=\"alert-title\">\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('session.refreshedTitle')}\n </rebill-typography>\n </div>\n <div class=\"alert-message-text\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('session.refreshedMessage')}\n </rebill-typography>\n </div>\n </div>\n </div>\n <button onClick={this.closeModal} class=\"close-button\" type=\"button\">\n <rebill-icon name=\"close\" size=\"20px\" />\n </button>\n </div>\n </div>\n );\n }\n}\n",":host {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.mode-sandbox-mobile__overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 5;\n animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile {\n display: flex;\n width: 100%;\n min-width: auto;\n max-width: 100%;\n height: 40px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n z-index: 20;\n}\n\n.mode-sandbox-mobile__chip-content-mobile {\n display: flex;\n align-items: center;\n gap: 2px;\n justify-content: flex-end;\n min-height: 24px;\n flex-shrink: 0;\n width: 100%;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__info-icon {\n display: flex;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {\n justify-content: flex-end;\n width: 100%;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n}\n\n/ Sección de Docs /\n.mode-sandbox-mobile__docs-section {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n margin-left: 0;\n transition: background-color 0.2s ease;\n justify-content: flex-end;\n padding: 8px;\n margin-top: 8px;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n width: 100%;\n background: #ffffff;\n border-top: none;\n border-left: 1px solid #e5e7eb;\n border-right: 1px solid #e5e7eb;\n border-bottom: 1px solid #e5e7eb;\n margin-top: 16px;\n z-index: 25;\n animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: top center;\n}\n\n.mode-sandbox-mobile__card-section {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.mode-sandbox-mobile__header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-details {\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n margin: 8px;\n min-height: 208px;\n display: flex;\n flex-direction: column;\n}\n\n.mode-sandbox-mobile__card-row {\n display: flex;\n gap: 12px;\n align-items: stretch;\n background: #ffffff;\n justify-content: space-around;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n height: auto;\n padding: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-value {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n}\n\n.mode-sandbox-mobile__field-value {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n max-height: 20px;\n}\n\n.mode-sandbox-mobile__copy-button {\n align-items: center;\n margin-left: auto;\n margin-right: 0;\n}\n\n.mode-sandbox-mobile__icon-button {\n margin-left: auto;\n margin-right: 16px;\n}\n\n/ Animaciones /\n\n@keyframes expandDown {\n from {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-mode-sandbox-mobile',\n styleUrl: 'mode-sandbox-mobile.css',\n shadow: false,\n})\nexport class RebillTestModeChipMobile {\n @Element() el: HTMLElement;\n @State() isPanelVisible = false;\n @State() currentLanguage: string = I18nService.getCurrentLanguage();\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.currentLanguage = I18nService.getCurrentLanguage();\n };\n\n private togglePanel = () => {\n this.isPanelVisible = !this.isPanelVisible;\n };\n\n private handleCopy = (text: string) => {\n copyToClipboard(text);\n this.isPanelVisible = false;\n };\n\n private handleDocsClick = () => {\n window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n };\n\n private renderBasicChip() {\n return (\n <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n <div class=\"mode-sandbox-mobile__info-icon\">\n <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.testMode')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__icon-button\">\n <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n <rebill-icon name=\"hamburger\" />\n </rebill-button>\n </div>\n </div>\n );\n }\n\n private renderCardsPanel() {\n return (\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n <rebill-icon name=\"card-test\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.cardTest')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-details\">\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.successPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4539148803436467\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.rejectedPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4485364739527352\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('sandbox.docs')}\n </rebill-typography>\n <rebill-icon name=\"external-link\" />\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <div\n class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n >\n {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n <div\n class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n >\n {this.renderBasicChip()}\n </div>\n {this.isPanelVisible && this.renderCardsPanel()}\n </div>\n );\n }\n}\n","@import '../../../styles/variables.css';\n\n/ Text Content /\n.text-content {\n margin-bottom: 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n/ Success View Styles /\n.success-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n width: 100%;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n.lottie-container {\n width: 80px;\n height: 80px;\n}\n/ Eliminar márgenes del h3 en el componente de éxito /\n.success-content rebill-typography[variant='h3'] {\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.success-icon {\n display: flex;\n justify-content: center;\n margin: 0.5rem 0;\n}\n\n/ Info Cards /\n.success-page__info-card {\n padding: 24px;\n gap: 16px;\n width: 100%;\n max-width: 450px;\n border: 1px solid #ebedef;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n.success-page__card-row {\n display: flex;\n justify-content: space-between;\n align-items: start;\n min-height: 20px;\n gap: 15%;\n}\n\n.success-page__card-row:last-of-type {\n margin-bottom: 0;\n}\n\n.success-page__card-value {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payment-method-display {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n}\n\n.payment-method-display rebill-card-icon {\n display: inline-block;\n flex-shrink: 0;\n margin-right: 8px;\n vertical-align: middle;\n}\n\n.payment-method-display rebill-card-icon svg {\n display: block;\n}\n\n.payment-method-display rebill-icon {\n display: inline-block;\n vertical-align: middle;\n margin-right: 8px;\n}\n\n.payment-method-display rebill-icon div {\n display: block;\n}\n\n.success-page__card-divider {\n height: 1px;\n background: #e5e7eb;\n}\n\n.download-container {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 2px;\n text-decoration: none;\n cursor: pointer;\n}\n\n.contact-info {\n text-align: left;\n}\n\n.reference-number {\n word-break: break-all;\n overflow-wrap: break-word;\n hyphens: auto;\n max-width: 100%;\n text-align: right;\n}\n\n.total-amount-container {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n flex-direction: row;\n}\n\n.trial-pill {\n background-color: var(--rebill-color-green-light-2);\n border-radius: 4px;\n padding: 4px 6px 4px 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.next-charge-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 12px;\n}\n\n.next-charge-details {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.next-charge-amount {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n}\n\n.next-charge-date {\n text-align: right;\n}\n\n/ Responsive Styles /\n@media (max-width: 1024px) {\n .success-content {\n max-width: 100%;\n gap: 1.5rem;\n margin-left: 16px;\n margin-right: 16px;\n }\n\n .success-page__info-card {\n width: 100%;\n max-width: 100%;\n padding: 12px;\n }\n .text-content {\n gap: 12px;\n }\n}\n\n@media (max-width: 767px) {\n .success-page__info-card {\n padding: 12px;\n }\n\n .processing-container {\n padding: 0 16px;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { ENUM_INSTALLMENT_MODEL } from '../../../models/enums/installment.enum';\nimport { PAYMENT_METHOD_ENUM } from '../../../models/enums/payment-methods.enum';\nimport { SESSION_ITEM_TYPE_ENUM } from '../../../models/enums/session.enum';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { formatDateTime } from '../../../utils';\nimport { getAssetURL } from '../../../utils/assets';\nimport { BREAKPOINT_ENUM, getBreakpoint, isBreakpointBelow } from '../../../utils/breakpoint';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { formatAmount } from '../../../utils/currency-formatter';\nimport { getPaymentMethodDisplayName } from '../../../utils/get-payment-method-display-name';\nimport {\n getInstallmentLabelSummary,\n getRecalculatedInstallmentAmount,\n} from '../../../utils/installment-utils';\nimport { PDFGenerator } from '../../../utils/pdf-generator';\n\n@Component({\n tag: 'success-page',\n styleUrl: 'success-page.css',\n shadow: false,\n})\nexport class CardSuccessPage {\n @Prop() typePaymentMethod: PAYMENT_METHOD_ENUM = PAYMENT_METHOD_ENUM.CARD;\n @Prop() country?: string = '';\n @Prop() bank?: string = '';\n @Prop() paymentMethodName?: string = '';\n @Prop() cardLastFour?: string = '';\n @Prop() paymentDate: string = '';\n @Prop() referenceNumber: string = '';\n @Prop() trialPeriodDays?: number = 0;\n @Prop() debitDay?: number = 0;\n @Prop() planAmount?: number = 0;\n @State() currentLocale: string = sessionState.currentLocale;\n @State() breakpoint: BREAKPOINT_ENUM = BREAKPOINT_ENUM.DESKTOP;\n\n @Event() successRedirect: EventEmitter<any>;\n @State() loaderProgress: number = 0;\n @State() isLoadingLottie: boolean = true;\n @State() showRedirectMessage: boolean = false;\n @Prop() timeToRedirect: number = 3000;\n private progressInterval?: number;\n private lottieContainer?: HTMLElement;\n private lottieAnimation?: any;\n private unsubscribeCurrentLocaleStore?: () => void;\n private successDisplayTimeout?: number;\n\n private applyStartCaseToBrand = (brand: string): string => {\n if (!brand) return '';\n\n return brand\n .toLowerCase()\n .split(/[\\s-]+/)\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n };\n\n private getPaymentDate = (): string => {\n const payment = sessionState?.data?.payment;\n if (!payment) return '';\n\n if ('createdAt' in payment) {\n return payment.createdAt;\n }\n\n return '';\n };\n\n componentWillLoad() {\n this.breakpoint = getBreakpoint(window.innerWidth);\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n\n if (sessionState.data?.itemInformation?.redirectSuccess) {\n this.successDisplayTimeout = window.setTimeout(() => {\n this.showRedirectMessage = true;\n this.loadLottieAnimation();\n }, 1500);\n\n setTimeout(() => {\n let redirectUrl = sessionState.data?.itemInformation?.redirectSuccess;\n if (redirectUrl) {\n this.successRedirect.emit({ redirectUrl });\n this.stopLoaderAnimation();\n }\n }, this.timeToRedirect);\n }\n }\n\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n if (!sessionState.data?.itemInformation?.redirectSuccess \|\| this.showRedirectMessage) {\n this.loadLottieAnimation();\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n if (this.successDisplayTimeout) {\n clearTimeout(this.successDisplayTimeout);\n }\n window.removeEventListener('resize', this.handleResize);\n this.stopLoaderAnimation();\n }\n\n private handleResize = () => {\n this.breakpoint = getBreakpoint(window.innerWidth);\n };\n private loadLottieAnimation = async () => {\n try {\n const lottie = await import('lottie-web');\n const animationData = await fetch(getAssetURL(`loader-redirect1.json`));\n const animationJson = await animationData.json();\n\n if (this.lottieContainer) {\n this.lottieAnimation = lottie.default.loadAnimation({\n container: this.lottieContainer,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n animationData: animationJson,\n });\n } else {\n this.startLoaderAnimation();\n }\n } catch (error) {\n this.startLoaderAnimation();\n }\n };\n\n private startLoaderAnimation = () => {\n const duration = 3000;\n const interval = 50;\n const increment = (interval / duration) 100;\n\n this.progressInterval = window.setInterval(() => {\n this.loaderProgress = Math.min(this.loaderProgress + increment, 100);\n if (this.loaderProgress >= 100) {\n this.stopLoaderAnimation();\n }\n }, interval);\n };\n\n private stopLoaderAnimation = () => {\n if (this.progressInterval) {\n clearInterval(this.progressInterval);\n this.progressInterval = undefined;\n }\n if (this.lottieAnimation) {\n this.lottieAnimation.destroy();\n this.lottieAnimation = undefined;\n }\n };\n\n private handleDownloadReceipt = async () => {\n try {\n await PDFGenerator.generateAndDownloadReceipt({\n paymentMethod:\n this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD\n ? this.textPaymentMethodCard()\n : this.paymentMethodName,\n ...(this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && { bank: this.bank }),\n ...(this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && {\n cardBrand: this.applyStartCaseToBrand(sessionState.data.cardInformation?.brand \|\| ''),\n }),\n ...(this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && {\n cardLastFour: this.cardLastFour ?? sessionState.data.cardInformation?.lastFour,\n }),\n paymentDate: formatDateTime(this.getPaymentDate()) \|\| '',\n email: sessionState?.data?.userInformation?.email \|\| '',\n referenceNumber: this.referenceNumber,\n productTitle: sessionState?.data?.itemInformation?.title \|\| '',\n subtotal: this.getFormattedSubtotal(),\n total: this.getFormattedTotal(),\n currency: sessionState?.data?.pricing?.currency \|\| ' ',\n installments:\n sessionState?.data?.pricing?.installments &&\n sessionState?.data?.cardInformation?.installments?.selectedInstallment\n ? `${getInstallmentLabelSummary(\n sessionState.data?.cardInformation?.installments?.selectedInstallment?.installment,\n getRecalculatedInstallmentAmount(\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.installmentAmount \|\| 0,\n ),\n sessionState.data?.pricing?.currency,\n sessionState.data?.cardInformation?.installments?.selectedInstallment?.cft,\n sessionState.data?.cardInformation?.installments?.selectedInstallment?.model,\n )}\\n( ${I18nService.translate('processing.purchaseTotal')}: ${this.getFormattedTotal()} )${\n sessionState.data.cardInformation?.installments?.installments.find(\n installment =>\n installment.installment ===\n sessionState.data.cardInformation?.installments?.selectedInstallment\n ?.installment,\n )?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED\n ? `\\n${I18nService.translate('installments.interest')}`\n : ''\n }`\n : '',\n discountAmount: this.getFormattedDiscountAmount(),\n trialPeriodDays:\n this.trialPeriodDays \|\| sessionState.data?.itemInformation?.trial?.trialPeriodDays,\n debitDay: this.debitDay \|\| sessionState.data?.itemInformation?.debitDay,\n planAmount: this.getFormattedSubtotal(this.planAmount),\n trialEndDate: this.hasFreeTrial() ? this.getTrialEndDateFormatted() : undefined,\n debitDate: this.hasDebitDay() ? this.getDebitDateFormatted() : undefined,\n isBankTransfer: this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER,\n });\n } catch (error) {\n console.error('Error downloading receipt:', error);\n }\n };\n\n private getFormattedDiscountAmount = () => {\n if (sessionState?.data?.pricing?.discountAmount > 0) {\n const formattedAmount = formatAmount(\n sessionState.data?.pricing?.discountAmount,\n sessionState.data?.pricing?.currency,\n );\n return `-${formattedAmount}`;\n }\n return undefined;\n };\n\n private getFormattedSubtotal = (planAmount: number = 0 \|\| null) => {\n return formatAmount(\n planAmount \|\| sessionState?.data?.pricing?.subtotal,\n sessionState?.data?.pricing?.currency,\n );\n };\n\n private getFormattedTotal = () => {\n if (this.trialPeriodDays > 0) {\n return formatAmount(0, sessionState?.data?.pricing?.currency);\n }\n return formatAmount(sessionState?.data?.pricing?.total, sessionState?.data?.pricing?.currency);\n };\n\n private hasFreeTrial = () => {\n return (\n sessionState.data?.itemInformation?.type === SESSION_ITEM_TYPE_ENUM.PLAN &&\n sessionState.data?.itemInformation?.trial?.trialPeriodDays &&\n sessionState.data?.itemInformation?.trial?.trialPeriodDays > 0\n );\n };\n\n private hasDebitDay = () => {\n const debitDay = sessionState.data?.itemInformation?.debitDay;\n return debitDay && debitDay > 0;\n };\n\n private getTrialEndDateFormatted = () => {\n const trialEndsAt = sessionState.data?.itemInformation?.trial?.trialPeriodEndsAt;\n if (!trialEndsAt) return '';\n\n const date = new Date(trialEndsAt);\n const currentLanguage = I18nService.getCurrentLanguage();\n const locale =\n currentLanguage === 'es' ? 'es-ES' : currentLanguage === 'pt' ? 'pt-BR' : 'en-US';\n\n if (currentLanguage === 'en') {\n return `${date.toLocaleDateString(locale, { month: 'long' })} ${date.getDate()}`;\n } else {\n return `${date.getDate()} de ${date.toLocaleDateString(locale, { month: 'long' })}`;\n }\n };\n\n private getDebitDateFormatted = () => {\n const debitDay = sessionState.data?.itemInformation?.debitDay;\n if (!debitDay \|\| debitDay <= 0) return '';\n\n const today = new Date();\n const targetDate = new Date(today);\n const currentLanguage = I18nService.getCurrentLanguage();\n const locale =\n currentLanguage === 'es' ? 'es-ES' : currentLanguage === 'pt' ? 'pt-BR' : 'en-US';\n if (debitDay < today.getDate()) {\n targetDate.setMonth(today.getMonth() + 1);\n }\n targetDate.setDate(debitDay);\n\n while (targetDate.getDate() !== debitDay) {\n targetDate.setDate(targetDate.getDate() - 1);\n }\n\n if (currentLanguage === 'en') {\n return `${targetDate.toLocaleDateString(locale, { month: 'long' })} ${targetDate.getDate()}`;\n } else {\n return `${targetDate.getDate()} de ${targetDate.toLocaleDateString(locale, { month: 'long' })}`;\n }\n };\n\n private textPaymentMethodCard = () => {\n const cardBrand = sessionState.data?.cardInformation?.brand;\n const cardLastFour = this.cardLastFour \|\| sessionState?.data?.cardInformation?.lastFour;\n\n const formattedBrand = this.applyStartCaseToBrand(cardBrand \|\| '');\n return cardBrand && cardLastFour ? `${formattedBrand} - ${cardLastFour}` : formattedBrand;\n };\n\n render() {\n const hasRedirect = sessionState.data?.itemInformation?.redirectSuccess;\n\n return (\n <rebill-checkout-single-column>\n <div class=\"success-content\">\n <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {hasRedirect && this.showRedirectMessage\n ? I18nService.translate('processing.redirectMessage')\n : I18nService.translate('processing.successTitle')}\n </rebill-typography>\n\n {hasRedirect && this.showRedirectMessage ? (\n <div class=\"redirect-message\">\n <div class=\"lottie-container\">\n <div ref={el => (this.lottieContainer = el)} class=\"lottie-animation\"></div>\n </div>\n </div>\n ) : (\n <div class=\"success-icon\">\n <svg\n width={isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96'}\n height={isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96'}\n viewBox=\"0 0 96 96\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z\"\n fill=\"#35B093\"\n />\n </svg>\n </div>\n )}\n\n {/* Payment Details Card /}\n <div class=\"success-page__info-card\">\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentMethod')}\n </rebill-typography>\n <div class=\"success-page__card-value\">\n <div class=\"payment-method-display\">\n {this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && (\n <>\n <rebill-card-icon\n card-brand={sessionState.data?.cardInformation?.brand \|\| ''}\n />\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.textPaymentMethodCard()}\n </rebill-typography>\n </>\n )}\n {this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (\n <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n <rebill-icon\n name={\n getPaymentMethodDisplayName(\n PAYMENT_METHOD_ENUM.BANK_TRANSFER,\n this.country,\n )?.toLowerCase() \|\| 'card'\n }\n />\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('paymentMethods.bank_transfer')}\n </rebill-typography>\n </div>\n )}\n </div>\n </div>\n </div>\n {sessionState?.data?.pricing?.installments &&\n sessionState?.data?.cardInformation?.installments?.selectedInstallment && (\n <div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('summary.installments')}\n </rebill-typography>\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: '10px',\n alignItems: 'end',\n }}\n >\n <rebill-typography\n variant=\"body2\"\n color={COLORS_ENUM.PRIMARY_DARK_TEXT}\n style={{ textAlign: 'end' }}\n >\n {getInstallmentLabelSummary(\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.installment,\n getRecalculatedInstallmentAmount(\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.installmentAmount \|\| 0,\n ),\n sessionState.data?.pricing?.currency,\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.cft,\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.model,\n )}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {`( ${I18nService.translate('processing.purchaseTotal')}: ${this.getFormattedTotal()} )`}\n </rebill-typography>\n {sessionState.data.cardInformation?.installments?.installments.find(\n installment =>\n installment.installment ===\n sessionState.data.cardInformation?.installments?.selectedInstallment\n ?.installment,\n )?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (\n <rebill-typography\n variant=\"italic\"\n color={COLORS_ENUM.SECONDARY}\n style={{ textAlign: 'end' }}\n >\n {`${I18nService.translate('installments.interest')}`}\n </rebill-typography>\n )}\n </div>\n </div>\n </div>\n )}\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentDate')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {formatDateTime(\n this.paymentDate \|\| this.getPaymentDate() \|\| sessionState.createdAt,\n ) \|\| ''}\n </rebill-typography>\n </div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentEmail')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {sessionState?.data?.userInformation?.email}\n </rebill-typography>\n </div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentReference')}\n </rebill-typography>\n <rebill-typography\n variant=\"body2\"\n color={COLORS_ENUM.PRIMARY_DARK_TEXT}\n class=\"reference-number\"\n >\n {this.referenceNumber \|\| ''}\n </rebill-typography>\n </div>\n </div>\n\n {/ Purchase Details Card /}\n <div class=\"success-page__info-card\">\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.purchaseDetails')}\n </rebill-typography>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.purchaseDetail')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {sessionState?.data?.itemInformation?.title \|\| ''}\n </rebill-typography>\n </div>\n {!this.trialPeriodDays && (\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.purchaseSubtotal')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedSubtotal()}\n </rebill-typography>\n </div>\n )}\n {sessionState?.data?.pricing?.discountAmount > 0 && (\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('summary.discount')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedDiscountAmount()}\n </rebill-typography>\n </div>\n )}\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.purchaseMontoTotal')}\n </rebill-typography>\n <div class=\"total-amount-container\">\n {this.trialPeriodDays > 0 && (\n <div class=\"trial-pill\">\n <rebill-typography\n variant=\"body2\"\n align=\"center\"\n color={COLORS_ENUM.GREEN_TEXT}\n >\n {I18nService.translate('processing.trialPill', {\n days: this.trialPeriodDays,\n count: this.trialPeriodDays,\n })}\n </rebill-typography>\n </div>\n )}\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedTotal()}\n </rebill-typography>\n </div>\n </div>\n {(this.trialPeriodDays \|\| this.hasDebitDay()) && (\n <div class=\"success-page__card-divider\"></div>\n )}\n\n {/ Next Charge Section /}\n {(this.hasFreeTrial() \|\| this.hasDebitDay()) && (\n <div class=\"next-charge-section\">\n <div class=\"next-charge-header\">\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.nextCharge')}\n </rebill-typography>\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.onDate', {\n date: this.hasFreeTrial()\n ? this.getTrialEndDateFormatted()\n : this.getDebitDateFormatted(),\n })}\n </rebill-typography>\n </div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.hasFreeTrial() ? I18nService.translate('processing.atEndOfTrial') : ''}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedSubtotal(this.planAmount)}{' '}\n {I18nService.translate('processing.perMonth')}\n </rebill-typography>\n </div>\n </div>\n )}\n <div class=\"success-page__card-divider\"></div>\n <div class=\"download-container\">\n <svg\n class=\"download-icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.498 9.83333V12.1667C13.498 12.903 12.9011 13.5 12.1647 13.5H3.83138C3.095 13.5 2.49805 12.903 2.49805 12.1667V9.83333M7.99804 10V2.5M7.99804 10L5.66471 7.66667M7.99804 10L10.3314 7.66667\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <rebill-button\n type=\"button\"\n variant=\"download\"\n size=\"small\"\n onClick={this.handleDownloadReceipt}\n >\n <rebill-typography variant=\"overline\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.download')}\n </rebill-typography>\n </rebill-button>\n </div>\n\n {/ Contact Info */}\n <div class=\"contact-info\">\n <rebill-typography variant=\"information-text\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.downloadDescription')}\n </rebill-typography>\n </div>\n </div>\n </div>\n </rebill-checkout-single-column>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.inputs-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n.customer-exists {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\n\n@Component({\n tag: 'user-information',\n styleUrl: 'user-information.css',\n shadow: false,\n})\nexport class UserInformation {\n @Prop() userInformation: {\n email?: string;\n fullName?: string;\n countryCode?: string;\n phoneNumber?: {\n number: string;\n countryCode: string;\n };\n } = {\n email: '',\n fullName: '',\n countryCode: '',\n };\n\n @Prop() errors: {\n email?: string;\n fullName?: string;\n } \| null = null;\n\n @Prop() customerExists: boolean = false;\n @Prop() disabled: boolean = false;\n @Event() onRebillAccountClick: EventEmitter<boolean>;\n\n private translateError(errorKey: string \| undefined): string {\n if (!errorKey) return '';\n if (errorKey.includes('validation.') \|\| errorKey.includes('paymentErrors.')) {\n return I18nService.translate(errorKey);\n }\n return errorKey;\n }\n\n @Listen('input')\n handleInputChange(event: CustomEvent<{ id: string; value: string }>) {\n if (!event.detail) return;\n\n const { id, value } = event.detail;\n SessionStore.setUserInformation({ [id]: value });\n }\n\n @Listen('blur')\n handleBlur(event: CustomEvent<{ id: string; value: string }>) {\n if (!event.detail) return;\n\n const { id, value } = event.detail;\n SessionStore.setUserInformation({ [id]: value });\n }\n\n private getCardLabels() {\n const labels = [];\n\n if (sessionState.data.prefilledData.email) {\n labels.push({\n label: I18nService.translate('userInformation.emailPlaceholder'),\n value: sessionState.data.prefilledData.email,\n });\n SessionStore.setUserInformation({\n ...sessionState.data.userInformation,\n email: sessionState.data.prefilledData.email,\n });\n }\n\n if (sessionState.data.prefilledData.fullName) {\n labels.push({\n label: I18nService.translate('userInformation.fullNamePlaceholder'),\n value: sessionState.data.prefilledData.fullName,\n });\n SessionStore.setUserInformation({\n ...sessionState.data.userInformation,\n fullName: sessionState.data.prefilledData.fullName,\n });\n }\n\n return labels;\n }\n private async handleRebillAccountClick() {\n api.otp.generate(sessionState.data.sessionId, {\n email: sessionState.data.userInformation.email,\n });\n this.onRebillAccountClick.emit(true);\n }\n\n private renderInputs() {\n const hasPrefilledEmail = sessionState.data.prefilledData.email;\n const hasPrefilledName = sessionState.data.prefilledData.fullName;\n\n const inputs = [];\n\n if (!hasPrefilledEmail) {\n inputs.push(\n <rebill-input-text\n id=\"email\"\n variant=\"floating\"\n label={I18nService.translate('userInformation.emailPlaceholder')}\n placeholder={I18nService.translate('userInformation.emailPlaceholder')}\n left-icon=\"email\"\n clearable={true}\n disabled={this.disabled}\n error={this.translateError(this.errors?.email)}\n />,\n );\n }\n\n if (!hasPrefilledName) {\n inputs.push(\n <rebill-input-text\n id=\"fullName\"\n variant=\"floating\"\n label={I18nService.translate('userInformation.fullNamePlaceholder')}\n placeholder={I18nService.translate('userInformation.fullNamePlaceholder')}\n disabled={this.disabled}\n error={this.translateError(this.errors?.fullName)}\n />,\n );\n }\n\n return inputs.length > 0 ? (\n <div\n class=\"inputs-container\"\n style={{\n marginTop: inputs.length > 0 && (hasPrefilledEmail \|\| hasPrefilledName) ? '1rem' : '0',\n }}\n >\n {inputs}\n </div>\n ) : null;\n }\n\n render() {\n const customerExistsButton = (\n <div class=\"customer-exists\">\n <rebill-button\n style={{\n visibility: this.customerExists ? 'visible' : 'hidden',\n opacity: this.customerExists ? '1' : '0',\n transition: 'opacity 0.3s ease-in-out',\n }}\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleRebillAccountClick()}\n icon=\"lock\"\n >\n {I18nService.translate('userInformation.rebillAccount')}\n <rebill-icon name=\"arrow-right\" />\n </rebill-button>\n </div>\n );\n\n const hasPrefilledEmail = sessionState.data.prefilledData.email;\n const hasPrefilledName = sessionState.data.prefilledData.fullName;\n const hasAnyPrefilled = hasPrefilledEmail \|\| hasPrefilledName;\n\n return (\n <Host>\n {customerExistsButton}\n {hasAnyPrefilled && (\n <rebill-card\n cardTitle={I18nService.translate('userInformation.personalInformation')}\n cardLabels={this.getCardLabels()}\n />\n )}\n {this.renderInputs()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["otpCss","Otp","changeEmailClick","timeLeft","isTimerRunning","codeResent","isVerifying","otpValue","returnForm","codeVerified","error","timer","createCountdownTimer","duration","onTick","this","onComplete","messageTimer","disconnectedCallback","stop","startTimer","start","handleResendCode","async","api","otp","generate","sessionState","data","sessionId","email","userInformation","handleOtpChange","value","length","handleVerifyOtp","response","verify","code","emit","SessionStore","setUserInformation","customer","fullName","firstName","lastName","trim","phoneNumber","number","phoneNumbers","countryCode","address","billingAddress","addresses","lineOne","zip","zipCode","city","state","country","documentType","identifications","type","documentNumber","setAccessToken","accessToken","setCustomerId","id","render","h","key","class","variant","I18nService","translate","prefilledData","onClick","onOtpChange","event","detail","color","COLORS_ENUM","PRIMARY","theme","disabled","size","style","height","marginBottom","getFormattedTime","GREEN","name","message","icon","alertTitle","colorIcon","PRIMARY_DARK_LIGHT","PRIMARY_DARK","modalOverlayCss","ModalOverlay","visible","languageUpdateTrigger","unsubscribeCurrentLocaleStore","componentDidLoad","onChange","closeModal","ORANGE","modeSandboxMobileCss","RebillTestModeChipMobile","isPanelVisible","currentLanguage","getCurrentLanguage","componentWillLoad","i18n","on","handleLanguageChange","off","togglePanel","handleCopy","text","copyToClipboard","handleDocsClick","window","open","renderBasicChip","renderCardsPanel","GREY_700","ERROR","successPageCss","CardSuccessPage","typePaymentMethod","PAYMENT_METHOD_ENUM","CARD","bank","paymentMethodName","cardLastFour","paymentDate","referenceNumber","trialPeriodDays","debitDay","planAmount","currentLocale","breakpoint","BREAKPOINT_ENUM","DESKTOP","successRedirect","loaderProgress","isLoadingLottie","showRedirectMessage","timeToRedirect","progressInterval","lottieContainer","lottieAnimation","successDisplayTimeout","applyStartCaseToBrand","brand","toLowerCase","split","map","word","charAt","toUpperCase","slice","join","getPaymentDate","payment","createdAt","getBreakpoint","innerWidth","itemInformation","redirectSuccess","setTimeout","loadLottieAnimation","redirectUrl","stopLoaderAnimation","addEventListener","handleResize","clearTimeout","removeEventListener","lottie","import","then","n","l","animationData","fetch","getAssetURL","animationJson","json","default","loadAnimation","container","renderer","loop","autoplay","startLoaderAnimation","interval","increment","setInterval","Math","min","clearInterval","undefined","destroy","handleDownloadReceipt","PDFGenerator","generateAndDownloadReceipt","paymentMethod","textPaymentMethodCard","BANK_TRANSFER","cardBrand","cardInformation","lastFour","formatDateTime","productTitle","title","subtotal","getFormattedSubtotal","total","getFormattedTotal","currency","pricing","installments","selectedInstallment","getInstallmentLabelSummary","installment","getRecalculatedInstallmentAmount","installmentAmount","cft","model","find","ENUM_INSTALLMENT_MODEL","CUSTOMER_FINANCED","discountAmount","getFormattedDiscountAmount","trial","trialEndDate","hasFreeTrial","getTrialEndDateFormatted","debitDate","hasDebitDay","getDebitDateFormatted","isBankTransfer","console","formattedAmount","formatAmount","SESSION_ITEM_TYPE_ENUM","PLAN","trialEndsAt","trialPeriodEndsAt","date","Date","locale","toLocaleDateString","month","getDate","today","targetDate","setMonth","getMonth","setDate","formattedBrand","hasRedirect","PRIMARY_DARK_TEXT","ref","el","width","isBreakpointBelow","viewBox","fill","xmlns","d","SECONDARY","Fragment","display","alignItems","gap","getPaymentMethodDisplayName","flexDirection","textAlign","align","GREEN_TEXT","days","count","stroke","userInformationCss","UserInformation","errors","customerExists","onRebillAccountClick","translateError","errorKey","includes","handleInputChange","handleBlur","getCardLabels","labels","push","label","handleRebillAccountClick","renderInputs","hasPrefilledEmail","hasPrefilledName","inputs","placeholder","clearable","marginTop","customerExistsButton","visibility","opacity","transition","hasAnyPrefilled","Host","cardTitle","cardLabels"],"sources":["src/components/checkout/otp/otp.css?tag=otp-component","src/components/checkout/otp/otp.tsx","src/components/shared/modal-overlay/modal-overlay.css?tag=rebill-modal-overlay","src/components/shared/modal-overlay/modal-overlay.tsx","src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx","src/components/checkout/card-success-page/success-page.css?tag=success-page","src/components/checkout/card-success-page/success-page.tsx","src/components/checkout/user-information/user-information.css?tag=user-information","src/components/checkout/user-information/user-information.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",".modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 12px 16px;\n box-sizing: border-box;\n}\n\n.modal-content {\n background: white;\n border-radius: 8px;\n padding: 16px 20px;\n width: 350px;\n box-shadow:\n 0 4px 12px -2px rgba(0, 0, 0, 0.15),\n 0 2px 4px -1px rgba(0, 0, 0, 0.1);\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.modal-content .alert {\n margin: 0;\n flex: 1;\n padding: 0;\n background: transparent;\n border: none;\n box-shadow: none;\n}\n\n/ Override para quitar cualquier color de fondo del modal /\n.modal-content .alert {\n background-color: transparent !important;\n border-color: transparent !important;\n}\n\n.modal-content .alert-message {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.modal-content .close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background-color 0.2s ease;\n padding: 0;\n margin: 0;\n outline: none;\n box-shadow: none;\n line-height: 1;\n}\n\n.modal-content .close-button:focus {\n outline: none;\n box-shadow: none;\n}\n\n.modal-content .close-button:hover {\n background-color: #f0f0f0;\n}\n\n.modal-content .close-button rebill-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@media (max-width: 768px) {\n .modal-overlay {\n padding: 8px 12px;\n }\n\n .modal-content {\n padding: 12px 16px;\n flex-direction: column;\n gap: 8px;\n text-align: center;\n }\n\n .modal-content .close-button {\n width: 100%;\n }\n}\n","import { Component, h, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { SessionStore } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-modal-overlay',\n styleUrl: 'modal-overlay.css',\n shadow: false,\n})\nexport class ModalOverlay {\n @State() visible: boolean = true;\n @State() languageUpdateTrigger: number = 0;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n componentDidLoad() {\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.languageUpdateTrigger++;\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n\n private closeModal = () => {\n this.visible = false;\n };\n\n render() {\n if (!this.visible) return null;\n\n return (\n <div class=\"modal-overlay\">\n <div class=\"modal-content\">\n <div class=\"alert info filled medium\">\n <div class=\"alert-icon\">\n <rebill-icon name=\"circle-info\" size=\"16px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <div class=\"alert-message\">\n <div class=\"alert-title\">\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('session.refreshedTitle')}\n </rebill-typography>\n </div>\n <div class=\"alert-message-text\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('session.refreshedMessage')}\n </rebill-typography>\n </div>\n </div>\n </div>\n <button onClick={this.closeModal} class=\"close-button\" type=\"button\">\n <rebill-icon name=\"close\" size=\"20px\" />\n </button>\n </div>\n </div>\n );\n }\n}\n",":host {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.mode-sandbox-mobile__overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 5;\n animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile {\n display: flex;\n width: 100%;\n min-width: auto;\n max-width: 100%;\n height: 40px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n z-index: 20;\n}\n\n.mode-sandbox-mobile__chip-content-mobile {\n display: flex;\n align-items: center;\n gap: 2px;\n justify-content: flex-end;\n min-height: 24px;\n flex-shrink: 0;\n width: 100%;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__info-icon {\n display: flex;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {\n justify-content: flex-end;\n width: 100%;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n}\n\n/ Sección de Docs /\n.mode-sandbox-mobile__docs-section {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n margin-left: 0;\n transition: background-color 0.2s ease;\n justify-content: flex-end;\n padding: 8px;\n margin-top: 8px;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n width: 100%;\n background: #ffffff;\n border-top: none;\n border-left: 1px solid #e5e7eb;\n border-right: 1px solid #e5e7eb;\n border-bottom: 1px solid #e5e7eb;\n margin-top: 16px;\n z-index: 25;\n animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: top center;\n}\n\n.mode-sandbox-mobile__card-section {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.mode-sandbox-mobile__header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-details {\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n margin: 8px;\n min-height: 208px;\n display: flex;\n flex-direction: column;\n}\n\n.mode-sandbox-mobile__card-row {\n display: flex;\n gap: 12px;\n align-items: stretch;\n background: #ffffff;\n justify-content: space-around;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n height: auto;\n padding: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-value {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n}\n\n.mode-sandbox-mobile__field-value {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n max-height: 20px;\n}\n\n.mode-sandbox-mobile__copy-button {\n align-items: center;\n margin-left: auto;\n margin-right: 0;\n}\n\n.mode-sandbox-mobile__icon-button {\n margin-left: auto;\n margin-right: 16px;\n}\n\n/ Animaciones /\n\n@keyframes expandDown {\n from {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-mode-sandbox-mobile',\n styleUrl: 'mode-sandbox-mobile.css',\n shadow: false,\n})\nexport class RebillTestModeChipMobile {\n @Element() el: HTMLElement;\n @State() isPanelVisible = false;\n @State() currentLanguage: string = I18nService.getCurrentLanguage();\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.currentLanguage = I18nService.getCurrentLanguage();\n };\n\n private togglePanel = () => {\n this.isPanelVisible = !this.isPanelVisible;\n };\n\n private handleCopy = (text: string) => {\n copyToClipboard(text);\n this.isPanelVisible = false;\n };\n\n private handleDocsClick = () => {\n window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n };\n\n private renderBasicChip() {\n return (\n <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n <div class=\"mode-sandbox-mobile__info-icon\">\n <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.testMode')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__icon-button\">\n <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n <rebill-icon name=\"hamburger\" />\n </rebill-button>\n </div>\n </div>\n );\n }\n\n private renderCardsPanel() {\n return (\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n <rebill-icon name=\"card-test\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.cardTest')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-details\">\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.successPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4539148803436467\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.rejectedPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4485364739527352\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('sandbox.docs')}\n </rebill-typography>\n <rebill-icon name=\"external-link\" />\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <div\n class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n >\n {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n <div\n class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n >\n {this.renderBasicChip()}\n </div>\n {this.isPanelVisible && this.renderCardsPanel()}\n </div>\n );\n }\n}\n","@import '../../../styles/variables.css';\n\n/ Text Content /\n.text-content {\n margin-bottom: 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n/ Success View Styles /\n.success-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n width: 100%;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n.lottie-container {\n width: 80px;\n height: 80px;\n}\n/ Eliminar márgenes del h3 en el componente de éxito /\n.success-content rebill-typography[variant='h3'] {\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.success-icon {\n display: flex;\n justify-content: center;\n margin: 0.5rem 0;\n}\n\n/ Info Cards /\n.success-page__info-card {\n padding: 24px;\n gap: 16px;\n width: 100%;\n max-width: 450px;\n border: 1px solid #ebedef;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n.success-page__card-row {\n display: flex;\n justify-content: space-between;\n align-items: start;\n min-height: 20px;\n gap: 15%;\n}\n\n.success-page__card-row:last-of-type {\n margin-bottom: 0;\n}\n\n.success-page__card-value {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payment-method-display {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n}\n\n.payment-method-display rebill-card-icon {\n display: inline-block;\n flex-shrink: 0;\n margin-right: 8px;\n vertical-align: middle;\n}\n\n.payment-method-display rebill-card-icon svg {\n display: block;\n}\n\n.payment-method-display rebill-icon {\n display: inline-block;\n vertical-align: middle;\n margin-right: 8px;\n}\n\n.payment-method-display rebill-icon div {\n display: block;\n}\n\n.success-page__card-divider {\n height: 1px;\n background: #e5e7eb;\n}\n\n.download-container {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 2px;\n text-decoration: none;\n cursor: pointer;\n}\n\n.contact-info {\n text-align: left;\n}\n\n.reference-number {\n word-break: break-all;\n overflow-wrap: break-word;\n hyphens: auto;\n max-width: 100%;\n text-align: right;\n}\n\n.total-amount-container {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n flex-direction: row;\n}\n\n.trial-pill {\n background-color: var(--rebill-color-green-light-2);\n border-radius: 4px;\n padding: 4px 6px 4px 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.next-charge-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 12px;\n}\n\n.next-charge-details {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.next-charge-amount {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n}\n\n.next-charge-date {\n text-align: right;\n}\n\n/ Responsive Styles /\n@media (max-width: 1024px) {\n .success-content {\n max-width: 100%;\n gap: 1.5rem;\n margin-left: 16px;\n margin-right: 16px;\n }\n\n .success-page__info-card {\n width: 100%;\n max-width: 100%;\n padding: 12px;\n }\n .text-content {\n gap: 12px;\n }\n}\n\n@media (max-width: 767px) {\n .success-page__info-card {\n padding: 12px;\n }\n\n .processing-container {\n padding: 0 16px;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { ENUM_INSTALLMENT_MODEL } from '../../../models/enums/installment.enum';\nimport { PAYMENT_METHOD_ENUM } from '../../../models/enums/payment-methods.enum';\nimport { SESSION_ITEM_TYPE_ENUM } from '../../../models/enums/session.enum';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { formatDateTime } from '../../../utils';\nimport { getAssetURL } from '../../../utils/assets';\nimport { BREAKPOINT_ENUM, getBreakpoint, isBreakpointBelow } from '../../../utils/breakpoint';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { formatAmount } from '../../../utils/currency-formatter';\nimport { getPaymentMethodDisplayName } from '../../../utils/get-payment-method-display-name';\nimport {\n getInstallmentLabelSummary,\n getRecalculatedInstallmentAmount,\n} from '../../../utils/installment-utils';\nimport { PDFGenerator } from '../../../utils/pdf-generator';\n\n@Component({\n tag: 'success-page',\n styleUrl: 'success-page.css',\n shadow: false,\n})\nexport class CardSuccessPage {\n @Prop() typePaymentMethod: PAYMENT_METHOD_ENUM = PAYMENT_METHOD_ENUM.CARD;\n @Prop() country?: string = '';\n @Prop() bank?: string = '';\n @Prop() paymentMethodName?: string = '';\n @Prop() cardLastFour?: string = '';\n @Prop() paymentDate: string = '';\n @Prop() referenceNumber: string = '';\n @Prop() trialPeriodDays?: number = 0;\n @Prop() debitDay?: number = 0;\n @Prop() planAmount?: number = 0;\n @State() currentLocale: string = sessionState.currentLocale;\n @State() breakpoint: BREAKPOINT_ENUM = BREAKPOINT_ENUM.DESKTOP;\n\n @Event() successRedirect: EventEmitter<any>;\n @State() loaderProgress: number = 0;\n @State() isLoadingLottie: boolean = true;\n @State() showRedirectMessage: boolean = false;\n @Prop() timeToRedirect: number = 3000;\n private progressInterval?: number;\n private lottieContainer?: HTMLElement;\n private lottieAnimation?: any;\n private unsubscribeCurrentLocaleStore?: () => void;\n private successDisplayTimeout?: number;\n\n private applyStartCaseToBrand = (brand: string): string => {\n if (!brand) return '';\n\n return brand\n .toLowerCase()\n .split(/[\\s-]+/)\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n };\n\n private getPaymentDate = (): string => {\n const payment = sessionState?.data?.payment;\n if (!payment) return '';\n\n if ('createdAt' in payment) {\n return payment.createdAt;\n }\n\n return '';\n };\n\n componentWillLoad() {\n this.breakpoint = getBreakpoint(window.innerWidth);\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n\n if (sessionState.data?.itemInformation?.redirectSuccess) {\n this.successDisplayTimeout = window.setTimeout(() => {\n this.showRedirectMessage = true;\n this.loadLottieAnimation();\n }, 1500);\n\n setTimeout(() => {\n let redirectUrl = sessionState.data?.itemInformation?.redirectSuccess;\n if (redirectUrl) {\n this.successRedirect.emit({ redirectUrl });\n this.stopLoaderAnimation();\n }\n }, this.timeToRedirect);\n }\n }\n\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n if (!sessionState.data?.itemInformation?.redirectSuccess \|\| this.showRedirectMessage) {\n this.loadLottieAnimation();\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n if (this.successDisplayTimeout) {\n clearTimeout(this.successDisplayTimeout);\n }\n window.removeEventListener('resize', this.handleResize);\n this.stopLoaderAnimation();\n }\n\n private handleResize = () => {\n this.breakpoint = getBreakpoint(window.innerWidth);\n };\n private loadLottieAnimation = async () => {\n try {\n const lottie = await import('lottie-web');\n const animationData = await fetch(getAssetURL(`loader-redirect1.json`));\n const animationJson = await animationData.json();\n\n if (this.lottieContainer) {\n this.lottieAnimation = lottie.default.loadAnimation({\n container: this.lottieContainer,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n animationData: animationJson,\n });\n } else {\n this.startLoaderAnimation();\n }\n } catch (error) {\n this.startLoaderAnimation();\n }\n };\n\n private startLoaderAnimation = () => {\n const duration = 3000;\n const interval = 50;\n const increment = (interval / duration) 100;\n\n this.progressInterval = window.setInterval(() => {\n this.loaderProgress = Math.min(this.loaderProgress + increment, 100);\n if (this.loaderProgress >= 100) {\n this.stopLoaderAnimation();\n }\n }, interval);\n };\n\n private stopLoaderAnimation = () => {\n if (this.progressInterval) {\n clearInterval(this.progressInterval);\n this.progressInterval = undefined;\n }\n if (this.lottieAnimation) {\n this.lottieAnimation.destroy();\n this.lottieAnimation = undefined;\n }\n };\n\n private handleDownloadReceipt = async () => {\n try {\n await PDFGenerator.generateAndDownloadReceipt({\n paymentMethod:\n this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD\n ? this.textPaymentMethodCard()\n : this.paymentMethodName,\n ...(this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && { bank: this.bank }),\n ...(this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && {\n cardBrand: this.applyStartCaseToBrand(sessionState.data.cardInformation?.brand \|\| ''),\n }),\n ...(this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && {\n cardLastFour: this.cardLastFour ?? sessionState.data.cardInformation?.lastFour,\n }),\n paymentDate: formatDateTime(this.getPaymentDate()) \|\| '',\n email: sessionState?.data?.userInformation?.email \|\| '',\n referenceNumber: this.referenceNumber,\n productTitle: sessionState?.data?.itemInformation?.title \|\| '',\n subtotal: this.getFormattedSubtotal(),\n total: this.getFormattedTotal(),\n currency: sessionState?.data?.pricing?.currency \|\| ' ',\n installments:\n sessionState?.data?.pricing?.installments &&\n sessionState?.data?.cardInformation?.installments?.selectedInstallment\n ? `${getInstallmentLabelSummary(\n sessionState.data?.cardInformation?.installments?.selectedInstallment?.installment,\n getRecalculatedInstallmentAmount(\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.installmentAmount \|\| 0,\n ),\n sessionState.data?.pricing?.currency,\n sessionState.data?.cardInformation?.installments?.selectedInstallment?.cft,\n sessionState.data?.cardInformation?.installments?.selectedInstallment?.model,\n )}\\n( ${I18nService.translate('processing.purchaseTotal')}: ${this.getFormattedTotal()} )${\n sessionState.data.cardInformation?.installments?.installments.find(\n installment =>\n installment.installment ===\n sessionState.data.cardInformation?.installments?.selectedInstallment\n ?.installment,\n )?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED\n ? `\\n${I18nService.translate('installments.interest')}`\n : ''\n }`\n : '',\n discountAmount: this.getFormattedDiscountAmount(),\n trialPeriodDays:\n this.trialPeriodDays \|\| sessionState.data?.itemInformation?.trial?.trialPeriodDays,\n debitDay: this.debitDay \|\| sessionState.data?.itemInformation?.debitDay,\n planAmount: this.getFormattedSubtotal(this.planAmount),\n trialEndDate: this.hasFreeTrial() ? this.getTrialEndDateFormatted() : undefined,\n debitDate: this.hasDebitDay() ? this.getDebitDateFormatted() : undefined,\n isBankTransfer: this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER,\n });\n } catch (error) {\n console.error('Error downloading receipt:', error);\n }\n };\n\n private getFormattedDiscountAmount = () => {\n if (sessionState?.data?.pricing?.discountAmount > 0) {\n const formattedAmount = formatAmount(\n sessionState.data?.pricing?.discountAmount,\n sessionState.data?.pricing?.currency,\n );\n return `-${formattedAmount}`;\n }\n return undefined;\n };\n\n private getFormattedSubtotal = (planAmount: number = 0 \|\| null) => {\n return formatAmount(\n planAmount \|\| sessionState?.data?.pricing?.subtotal,\n sessionState?.data?.pricing?.currency,\n );\n };\n\n private getFormattedTotal = () => {\n if (this.trialPeriodDays > 0) {\n return formatAmount(0, sessionState?.data?.pricing?.currency);\n }\n return formatAmount(sessionState?.data?.pricing?.total, sessionState?.data?.pricing?.currency);\n };\n\n private hasFreeTrial = () => {\n return (\n sessionState.data?.itemInformation?.type === SESSION_ITEM_TYPE_ENUM.PLAN &&\n sessionState.data?.itemInformation?.trial?.trialPeriodDays &&\n sessionState.data?.itemInformation?.trial?.trialPeriodDays > 0\n );\n };\n\n private hasDebitDay = () => {\n const debitDay = sessionState.data?.itemInformation?.debitDay;\n return debitDay && debitDay > 0;\n };\n\n private getTrialEndDateFormatted = () => {\n const trialEndsAt = sessionState.data?.itemInformation?.trial?.trialPeriodEndsAt;\n if (!trialEndsAt) return '';\n\n const date = new Date(trialEndsAt);\n const currentLanguage = I18nService.getCurrentLanguage();\n const locale =\n currentLanguage === 'es' ? 'es-ES' : currentLanguage === 'pt' ? 'pt-BR' : 'en-US';\n\n if (currentLanguage === 'en') {\n return `${date.toLocaleDateString(locale, { month: 'long' })} ${date.getDate()}`;\n } else {\n return `${date.getDate()} de ${date.toLocaleDateString(locale, { month: 'long' })}`;\n }\n };\n\n private getDebitDateFormatted = () => {\n const debitDay = sessionState.data?.itemInformation?.debitDay;\n if (!debitDay \|\| debitDay <= 0) return '';\n\n const today = new Date();\n const targetDate = new Date(today);\n const currentLanguage = I18nService.getCurrentLanguage();\n const locale =\n currentLanguage === 'es' ? 'es-ES' : currentLanguage === 'pt' ? 'pt-BR' : 'en-US';\n if (debitDay < today.getDate()) {\n targetDate.setMonth(today.getMonth() + 1);\n }\n targetDate.setDate(debitDay);\n\n while (targetDate.getDate() !== debitDay) {\n targetDate.setDate(targetDate.getDate() - 1);\n }\n\n if (currentLanguage === 'en') {\n return `${targetDate.toLocaleDateString(locale, { month: 'long' })} ${targetDate.getDate()}`;\n } else {\n return `${targetDate.getDate()} de ${targetDate.toLocaleDateString(locale, { month: 'long' })}`;\n }\n };\n\n private textPaymentMethodCard = () => {\n const cardBrand = sessionState.data?.cardInformation?.brand;\n const cardLastFour = this.cardLastFour \|\| sessionState?.data?.cardInformation?.lastFour;\n\n const formattedBrand = this.applyStartCaseToBrand(cardBrand \|\| '');\n return cardBrand && cardLastFour ? `${formattedBrand} - ${cardLastFour}` : formattedBrand;\n };\n\n render() {\n const hasRedirect = sessionState.data?.itemInformation?.redirectSuccess;\n\n return (\n <rebill-checkout-single-column>\n <div class=\"success-content\">\n <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {hasRedirect && this.showRedirectMessage\n ? I18nService.translate('processing.redirectMessage')\n : I18nService.translate('processing.successTitle')}\n </rebill-typography>\n\n {hasRedirect && this.showRedirectMessage ? (\n <div class=\"redirect-message\">\n <div class=\"lottie-container\">\n <div ref={el => (this.lottieContainer = el)} class=\"lottie-animation\"></div>\n </div>\n </div>\n ) : (\n <div class=\"success-icon\">\n <svg\n width={isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96'}\n height={isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96'}\n viewBox=\"0 0 96 96\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z\"\n fill=\"#35B093\"\n />\n </svg>\n </div>\n )}\n\n {/* Payment Details Card /}\n <div class=\"success-page__info-card\">\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentMethod')}\n </rebill-typography>\n <div class=\"success-page__card-value\">\n <div class=\"payment-method-display\">\n {this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && (\n <>\n <rebill-card-icon\n card-brand={sessionState.data?.cardInformation?.brand \|\| ''}\n />\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.textPaymentMethodCard()}\n </rebill-typography>\n </>\n )}\n {this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (\n <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n <rebill-icon\n name={\n getPaymentMethodDisplayName(\n PAYMENT_METHOD_ENUM.BANK_TRANSFER,\n this.country,\n )?.toLowerCase() \|\| 'card'\n }\n />\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('paymentMethods.bank_transfer')}\n </rebill-typography>\n </div>\n )}\n </div>\n </div>\n </div>\n {sessionState?.data?.pricing?.installments &&\n sessionState?.data?.cardInformation?.installments?.selectedInstallment && (\n <div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('summary.installments')}\n </rebill-typography>\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: '10px',\n alignItems: 'end',\n }}\n >\n <rebill-typography\n variant=\"body2\"\n color={COLORS_ENUM.PRIMARY_DARK_TEXT}\n style={{ textAlign: 'end' }}\n >\n {getInstallmentLabelSummary(\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.installment,\n getRecalculatedInstallmentAmount(\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.installmentAmount \|\| 0,\n ),\n sessionState.data?.pricing?.currency,\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.cft,\n sessionState.data?.cardInformation?.installments?.selectedInstallment\n ?.model,\n )}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {`( ${I18nService.translate('processing.purchaseTotal')}: ${this.getFormattedTotal()} )`}\n </rebill-typography>\n {sessionState.data.cardInformation?.installments?.installments.find(\n installment =>\n installment.installment ===\n sessionState.data.cardInformation?.installments?.selectedInstallment\n ?.installment,\n )?.model === ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (\n <rebill-typography\n variant=\"italic\"\n color={COLORS_ENUM.SECONDARY}\n style={{ textAlign: 'end' }}\n >\n {`${I18nService.translate('installments.interest')}`}\n </rebill-typography>\n )}\n </div>\n </div>\n </div>\n )}\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentDate')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {formatDateTime(\n this.paymentDate \|\| this.getPaymentDate() \|\| sessionState.createdAt,\n ) \|\| ''}\n </rebill-typography>\n </div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentEmail')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {sessionState?.data?.userInformation?.email}\n </rebill-typography>\n </div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.paymentReference')}\n </rebill-typography>\n <rebill-typography\n variant=\"body2\"\n color={COLORS_ENUM.PRIMARY_DARK_TEXT}\n class=\"reference-number\"\n >\n {this.referenceNumber \|\| ''}\n </rebill-typography>\n </div>\n </div>\n\n {/ Purchase Details Card /}\n <div class=\"success-page__info-card\">\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.purchaseDetails')}\n </rebill-typography>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.purchaseDetail')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {sessionState?.data?.itemInformation?.title \|\| ''}\n </rebill-typography>\n </div>\n {!this.trialPeriodDays && (\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.purchaseSubtotal')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedSubtotal()}\n </rebill-typography>\n </div>\n )}\n {sessionState?.data?.pricing?.discountAmount > 0 && (\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('summary.discount')}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedDiscountAmount()}\n </rebill-typography>\n </div>\n )}\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.purchaseMontoTotal')}\n </rebill-typography>\n <div class=\"total-amount-container\">\n {this.trialPeriodDays > 0 && (\n <div class=\"trial-pill\">\n <rebill-typography\n variant=\"body2\"\n align=\"center\"\n color={COLORS_ENUM.GREEN_TEXT}\n >\n {I18nService.translate('processing.trialPill', {\n days: this.trialPeriodDays,\n count: this.trialPeriodDays,\n })}\n </rebill-typography>\n </div>\n )}\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedTotal()}\n </rebill-typography>\n </div>\n </div>\n {(this.trialPeriodDays \|\| this.hasDebitDay()) && (\n <div class=\"success-page__card-divider\"></div>\n )}\n\n {/ Next Charge Section /}\n {(this.hasFreeTrial() \|\| this.hasDebitDay()) && (\n <div class=\"next-charge-section\">\n <div class=\"next-charge-header\">\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.nextCharge')}\n </rebill-typography>\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.onDate', {\n date: this.hasFreeTrial()\n ? this.getTrialEndDateFormatted()\n : this.getDebitDateFormatted(),\n })}\n </rebill-typography>\n </div>\n <div class=\"success-page__card-row\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.hasFreeTrial() ? I18nService.translate('processing.atEndOfTrial') : ''}\n </rebill-typography>\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {this.getFormattedSubtotal(this.planAmount)}{' '}\n {I18nService.translate('processing.perMonth')}\n </rebill-typography>\n </div>\n </div>\n )}\n <div class=\"success-page__card-divider\"></div>\n <div class=\"download-container\">\n <svg\n class=\"download-icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.498 9.83333V12.1667C13.498 12.903 12.9011 13.5 12.1647 13.5H3.83138C3.095 13.5 2.49805 12.903 2.49805 12.1667V9.83333M7.99804 10V2.5M7.99804 10L5.66471 7.66667M7.99804 10L10.3314 7.66667\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <rebill-button\n type=\"button\"\n variant=\"download\"\n size=\"small\"\n onClick={this.handleDownloadReceipt}\n >\n <rebill-typography variant=\"overline\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('processing.download')}\n </rebill-typography>\n </rebill-button>\n </div>\n\n {/ Contact Info */}\n <div class=\"contact-info\">\n <rebill-typography variant=\"information-text\" color={COLORS_ENUM.SECONDARY}>\n {I18nService.translate('processing.downloadDescription')}\n </rebill-typography>\n </div>\n </div>\n </div>\n </rebill-checkout-single-column>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.inputs-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n.customer-exists {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\n\n@Component({\n tag: 'user-information',\n styleUrl: 'user-information.css',\n shadow: false,\n})\nexport class UserInformation {\n @Prop() userInformation: {\n email?: string;\n fullName?: string;\n countryCode?: string;\n phoneNumber?: {\n number: string;\n countryCode: string;\n };\n } = {\n email: '',\n fullName: '',\n countryCode: '',\n };\n\n @Prop() errors: {\n email?: string;\n fullName?: string;\n } \| null = null;\n\n @Prop() customerExists: boolean = false;\n @Prop() disabled: boolean = false;\n @Event() onRebillAccountClick: EventEmitter<boolean>;\n\n private translateError(errorKey: string \| undefined): string {\n if (!errorKey) return '';\n if (errorKey.includes('validation.') \|\| errorKey.includes('paymentErrors.')) {\n return I18nService.translate(errorKey);\n }\n return errorKey;\n }\n\n @Listen('input')\n handleInputChange(event: CustomEvent<{ id: string; value: string }>) {\n if (!event.detail) return;\n\n const { id, value } = event.detail;\n SessionStore.setUserInformation({ [id]: value });\n }\n\n @Listen('blur')\n handleBlur(event: CustomEvent<{ id: string; value: string }>) {\n if (!event.detail) return;\n\n const { id, value } = event.detail;\n SessionStore.setUserInformation({ [id]: value });\n }\n\n private getCardLabels() {\n const labels = [];\n\n if (sessionState.data.prefilledData.email) {\n labels.push({\n label: I18nService.translate('userInformation.emailPlaceholder'),\n value: sessionState.data.prefilledData.email,\n });\n SessionStore.setUserInformation({\n ...sessionState.data.userInformation,\n email: sessionState.data.prefilledData.email,\n });\n }\n\n if (sessionState.data.prefilledData.fullName) {\n labels.push({\n label: I18nService.translate('userInformation.fullNamePlaceholder'),\n value: sessionState.data.prefilledData.fullName,\n });\n SessionStore.setUserInformation({\n ...sessionState.data.userInformation,\n fullName: sessionState.data.prefilledData.fullName,\n });\n }\n\n return labels;\n }\n private async handleRebillAccountClick() {\n api.otp.generate(sessionState.data.sessionId, {\n email: sessionState.data.userInformation.email,\n });\n this.onRebillAccountClick.emit(true);\n }\n\n private renderInputs() {\n const hasPrefilledEmail = sessionState.data.prefilledData.email;\n const hasPrefilledName = sessionState.data.prefilledData.fullName;\n\n const inputs = [];\n\n if (!hasPrefilledEmail) {\n inputs.push(\n <rebill-input-text\n id=\"email\"\n variant=\"floating\"\n label={I18nService.translate('userInformation.emailPlaceholder')}\n placeholder={I18nService.translate('userInformation.emailPlaceholder')}\n left-icon=\"email\"\n clearable={true}\n disabled={this.disabled}\n error={this.translateError(this.errors?.email)}\n />,\n );\n }\n\n if (!hasPrefilledName) {\n inputs.push(\n <rebill-input-text\n id=\"fullName\"\n variant=\"floating\"\n label={I18nService.translate('userInformation.fullNamePlaceholder')}\n placeholder={I18nService.translate('userInformation.fullNamePlaceholder')}\n disabled={this.disabled}\n error={this.translateError(this.errors?.fullName)}\n />,\n );\n }\n\n return inputs.length > 0 ? (\n <div\n class=\"inputs-container\"\n style={{\n marginTop: inputs.length > 0 && (hasPrefilledEmail \|\| hasPrefilledName) ? '1rem' : '0',\n }}\n >\n {inputs}\n </div>\n ) : null;\n }\n\n render() {\n const customerExistsButton = (\n <div class=\"customer-exists\">\n <rebill-button\n style={{\n visibility: this.customerExists ? 'visible' : 'hidden',\n opacity: this.customerExists ? '1' : '0',\n transition: 'opacity 0.3s ease-in-out',\n }}\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleRebillAccountClick()}\n icon=\"lock\"\n >\n {I18nService.translate('userInformation.rebillAccount')}\n <rebill-icon name=\"arrow-right\" />\n </rebill-button>\n </div>\n );\n\n const hasPrefilledEmail = sessionState.data.prefilledData.email;\n const hasPrefilledName = sessionState.data.prefilledData.fullName;\n const hasAnyPrefilled = hasPrefilledEmail \|\| hasPrefilledName;\n\n return (\n <Host>\n {customerExistsButton}\n {hasAnyPrefilled && (\n <rebill-card\n cardTitle={I18nService.translate('userInformation.personalInformation')}\n cardLabels={this.getCardLabels()}\n />\n )}\n {this.renderInputs()}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/rebill-web-components-sdk/p-bf4f1bcc.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as i}from"./p-DyaDabZ4.js";import{c as r}from"./p-BFhvUZPU.js";import{a as o,C as n}from"./p-C6wUNEUc.js";import{P as a,G as s,a as l}from"./p-A1UFEvOV.js";import{P as c,I as d}from"./p-dYKOc01W.js";import{r as h,R as m,o as u}from"./p-StCSFC25.js";import{B as p,g as f,i as b}from"./p-Do_vNuMa.js";import{C as y}from"./p-DA598vBj.js";import{m as g,i as x,g as w,P as k,a as v}from"./p-BqMM9Bcr.js";import"./p-BFTU3MAI.js";import"./p-B2LDUv1-.js";import"./p-uZj1dMLQ.js";import"./p-CTQZ1Sio.js";import"./p-BYrqevT1.js";import"./p-Bf6g23G6.js";import"./p-lWh04UqG.js";const q=async(e,t,i)=>{const r=await o.checkout.getRequiredFields({currency:e,method:t},i);return{fields:g(r.data),original:r.data}};const C=async()=>{const e=[...new Set(h.data.paymentMethods.map((e=>e.type)))];const t=e.map((async e=>{try{const t=a.mapToAPMPaymentMethod(e,h.data.price.country);const i=await q(h.data.price.currency,t,h.data.organization.id);return{paymentMethod:e,...i}}catch(t){console.error(`Error getting required fields for ${e}:`,t);return{paymentMethod:e,fields:[],original:[]}}}));const i=await Promise.all(t);const r={};i.forEach((e=>{r[e.paymentMethod]={fields:e.fields,original:e.original}}));return r};const j=(e,t)=>{const i=t[e];if(i){return i}else{return{fields:[],original:[]}}};const M=":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class='qr-'],[class='success'],[class='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}@media (max-width: 1024px){.rebill-checkout-renewal{flex-direction:column;gap:0;justify-content:flex-start;background:var(--rebill-color-background);padding:20px}.right-section .left-section{width:100%;height:100%;background:var(--rebill-color-background)}.checkout-form-section{display:flex;flex-direction:column;justify-content:flex-start;gap:24px;height:100%;margin-top:24px}.otp-container{display:flex;flex-direction:column;justify-content:flex-start;gap:24px}}@media (min-width: 1025px){.rebill-checkout-renewal{width:100vw;min-height:100vh;display:flex;flex-direction:row;justify-content:center;overflow-y:auto}.left-section{display:flex;width:60%;background:var(--rebill-color-background-left);justify-content:space-around}.right-section{display:flex;padding-top:72px;width:40%;background:var(--rebill-color-background-right);position:sticky;top:0;justify-content:center}.checkout-form-section{display:flex;flex-direction:column;justify-content:flex-start;margin-bottom:36px;margin-top:24px;gap:32px}.left-section-container{max-width:450px;min-width:450px;margin:2.5rem 2rem 1.5rem 2rem;display:flex;flex-direction:column}.checkout-summary-section{max-width:450px;min-width:350px;margin:0rem 2rem;background:var(--rebill-color-background-right);display:flex;flex-direction:column;justify-content:flex-start;width:100%}.checkout-form-section user-information,.checkout-form-section payment-method-selector,.checkout-form-section rebill-address,.checkout-summary-section rebill-summary{width:100%}.pac-container{border-radius:4px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);border:1px solid #e0e0e0;margin-top:4px;font-family:inherit}.pac-item{padding:10px 12px;cursor:pointer;border-top:none}.pac-item:first-child{border-top:none}.pac-item:hover{background-color:#f5f5f5}.pac-item-query{font-weight:500}.pac-icon{display:none}}.payment-button-container{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}.animated-component{transition:all 0.3s ease-in-out;overflow:visible}.fade-in{animation:fadeIn 0.4s ease-in-out}.slide-in{animation:slideIn 0.5s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{opacity:0;transform:translateX(-20px);max-height:0}to{opacity:1;transform:translateX(0);max-height:450px}}.animated-component.hide{animation:fadeOut 0.3s ease-in-out forwards}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}rebill-mode-sandbox{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);z-index:1000}@media (max-width: 1024px){rebill-test-mode-chip{bottom:46px}}@media (min-width: 1025px){rebill-test-mode-chip{bottom:46px}}.mode-sandbox-mobile-container{display:flex;align-items:center;width:100%;padding:0;margin:0;box-sizing:border-box}@media (min-width: 1451px){.left-section-container{min-width:450px;margin:2.5rem 5rem 1.5rem 5rem}.checkout-summary-section{min-width:450px;margin:0rem 5rem}}";const D=class{constructor(i){e(this,i);this.success=t(this,"success");this.paymentError=t(this,"paymentError");this.paymentMethodSelected=t(this,"paymentMethodSelected")}renewalData;renewalToken;currentPaymentMethod=c.CARD;isSubmitting=false;isCardSubmitting=false;isCardSuccess=false;errorMessage=null;breakpoint=p.DESKTOP;errorPaymentCard=false;errorPaymentAPM=false;initialData={};checkoutResponse=null;currentApmPaymentMethod=null;countries=[];allRequiredFields={};currentRequiredFields=[];errorCardInvalid=false;cardMode="select";success;paymentError;paymentMethodSelected;validationSchema={phoneNumber:r().when([],{is:()=>x("phoneNumber",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.phoneRequired"),otherwise:e=>e.notRequired()}),"billing-country":r().when([],{is:()=>x("billing-country",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.countryRequired"),otherwise:e=>e.notRequired()}),"billing-state":r().when([],{is:()=>x("billing-state",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.stateRequired"),otherwise:e=>e.notRequired()}),"billing-address":r().when([],{is:()=>x("billing-address",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.addressRequired"),otherwise:e=>e.notRequired()}),"billing-city":r().when([],{is:()=>x("billing-city",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.cityRequired"),otherwise:e=>e.notRequired()}),"billing-zip":r().when([],{is:()=>x("billing-zip",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.zipRequired"),otherwise:e=>e.notRequired()}),bankId:r().when([],{is:()=>x("bankId",this.currentRequiredFields),then:e=>e.required("validation.bankRequired"),otherwise:e=>e.notRequired()}),documentType:r().when([],{is:()=>x("documentType",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.documentTypeRequired"),otherwise:e=>e.notRequired()}),documentNumber:r().when([],{is:()=>x("documentNumber",this.currentRequiredFields)&&this.cardMode==="input",then:e=>e.required("validation.documentNumberRequired").min(7,"validation.documentInvalid"),otherwise:e=>e.notRequired()})};resizeHandler=()=>{this.breakpoint=f(window.innerWidth)};async componentWillLoad(){this.resizeHandler();window.addEventListener("resize",this.resizeHandler);const e=typeof this.renewalData==="string"?JSON.parse(this.renewalData):this.renewalData;m.initializeRenewal({...e,token:this.renewalToken});s.loadGoogleMapsScript();try{const e=await o.data.getCountries();this.countries=e.data}catch(e){console.error("Error loading countries:",e)}try{this.allRequiredFields=await C()}catch(e){console.error("Error loading required fields:",e)}if(h.data.paymentMethods.length>0){const e=h.data.paymentMethods[0].type;this.currentPaymentMethod=e;m.setSelectedPaymentMethod(e);try{this.currentRequiredFields=j(e,this.allRequiredFields).fields}catch(e){console.error("Error getting required fields for method:",e)}await this.initializeFingerprint(e)}this.initialData=this.getInitialData();this.cardMode=h.cardMode;u("cardMode",(()=>{this.cardMode=h.cardMode}))}disconnectedCallback(){window.removeEventListener("resize",this.resizeHandler)}async handlePaymentMethodSelected(e){e.stopPropagation();if(this.currentPaymentMethod===e.detail){return}this.currentPaymentMethod=e.detail;m.setSelectedPaymentMethod(this.currentPaymentMethod);if(this.currentPaymentMethod!==c.CARD){this.cardMode="input";m.setCardMode("input")}try{this.currentRequiredFields=j(this.currentPaymentMethod,this.allRequiredFields).fields}catch(e){console.error("Error getting required fields for method:",e)}await this.initializeFingerprint(this.currentPaymentMethod);this.paymentMethodSelected.emit(e.detail)}async initializeFingerprint(e){if(e===c.CARD&&!h.deviceId){try{const e=crypto.randomUUID();const t=await o.fingerPrint.getFingerPrint(e);m.setDeviceId(e);const i=t.result.script;const r=document.createElement("script");r.innerHTML=i;document.body.appendChild(r)}catch(e){console.error("Failed to initialize fingerprint:",e)}}}handleBankSelected(e){e.stopPropagation();m.setSelectedBankId(e.detail)}handleCardSelected(e){const{card:t,cvv:i}=e.detail;m.setSelectedCard(t);m.setCvv(i\|\|"")}get currentPaymentError(){if(this.currentPaymentMethod===c.CARD){return this.errorPaymentCard}else if(this.currentPaymentMethod===c.CASH\|\|this.currentPaymentMethod===c.BANK_TRANSFER){return this.errorPaymentAPM}return false}async handleSubmit(e){if(this.isSubmitting){return}if(this.currentPaymentMethod===c.CARD){await this.handleCardRenewal(e)}else{await this.handleAPMRenewal(e)}}async handleCardRenewal(e){const t=e?.detail\|\|this.getInitialData();if(!h.data.cardId&&!h.data.cardTokenId){this.errorCardInvalid=true;return}if(!h.data.cardInformation&&!h.data.cardId){this.errorCardInvalid=true;return}this.errorCardInvalid=false;this.isSubmitting=true;this.isCardSubmitting=true;m.setLoading(true);try{const e={transaction:{quantity:1},...h.data.cardId&&{cardId:h.data.cardId},...h.data.cardTokenId&&{cardTokenId:h.data.cardTokenId},customAttributes:{...h.deviceId&&{deviceId:h.deviceId}},...this.cardMode==="input"&&{customer:{firstName:t.fullName?.split(" ")[0]\|\|h.data.subscription.customerName?.split(" ")[0],lastName:t.fullName?.split(" ").slice(1).join(" ")\|\|h.data.subscription.customerName?.split(" ").slice(1).join(" "),email:t.email\|\|h.data.subscription.customerEmail,phone:{countryCode:t.countryCodePhoneNumber\|\|"",number:t.phoneNumber\|\|""}},billingDetails:{address:{lineOne:t["billing-address"]\|\|"",city:t["billing-city"]\|\|"",state:t["billing-state"]\|\|"",country:t["billing-country"]\|\|"",zipCode:t["billing-zip"]\|\|""},identification:{type:t.documentType\|\|"",value:t.documentNumber\|\|""}}}};const i=w();const r=await o.checkout.createCardCheckoutRequest(h.data.id,i,e,h.token);this.isSubmitting=false;this.isCardSubmitting=false;m.setLoading(false);m.setCheckoutResponse(r.data);if(r.data.result?.status.toUpperCase()===n.APPROVED){this.isCardSuccess=true}else{this.isCardSuccess=false;this.errorPaymentCard=true;this.errorMessage={message:r.data.error?.error?.message,type:r.data.error?.error?.type}}}catch(e){this.isSubmitting=false;this.isCardSubmitting=false;m.setLoading(false);this.errorPaymentCard=true;this.errorMessage={message:e.data?.error?.message,type:e.data?.error?.type}}}async handleAPMRenewal(e){this.isSubmitting=true;m.setLoading(true);try{const t=a.mapToAPMPaymentMethod(this.currentPaymentMethod,h.data.price.country);const i=e?.detail\|\|this.getFormData();const r={address:{country:i["billing-country"],state:i["billing-state"]\|\|"",city:i["billing-city"]\|\|"",zipCode:i["billing-zip"]\|\|"",lineOne:i["billing-address"]\|\|""},identification:{type:i.documentType\|\|"dni",value:i.documentNumber\|\|""}};const s={transaction:{quantity:1},method:t,billingDetails:r,redirect:{approved:window.location.origin+"/renewal/success",rejected:window.location.origin+"/renewal/failure"},paymentMetadata:{orderId:h.data.id,source:"renewal-web"},customAttributes:{bank:i.bankId\|\|""},...t!==l.CO_TRANSFERENCE_PSE&&{targetCurrency:h.data.price.currency}};s.customer={firstName:i.fullName?.split(" ")[0]\|\|h.data.subscription.customerName.split(" ")[0]\|\|"",lastName:i.fullName?.split(" ").slice(1).join(" ")\|\|h.data.subscription.customerName.split(" ").slice(1).join(" ")\|\|"",email:i.email\|\|h.data.subscription.customerEmail,phone:{countryCode:i.countryCodePhoneNumber\|\|"",number:i.phoneNumber\|\|""}};const c=w();const d=await o.checkout.createAPMCheckoutRequest(h.data.id,c,s);this.isSubmitting=false;m.setLoading(false);m.setCheckoutResponse(d.data);this.checkoutResponse=d.data;if(d.data.result?.status.toUpperCase()===n.APPROVED){this.isCardSuccess=true}else{this.paymentError.emit(d.data);m.setCheckoutResponse(d.data);this.errorPaymentAPM=true;this.errorMessage={alertTitle:d.data?.error?.message,message:d.data.error?.message,type:d.data.error?.type,paymentMethod:this.currentPaymentMethod}}}catch(e){this.isSubmitting=false;m.setLoading(false);this.paymentError.emit(e);this.errorPaymentAPM=true;this.errorMessage={alertTitle:e.data?.error?.message,message:e.data?.error?.message,type:e.data?.error?.type,paymentMethod:this.currentPaymentMethod}}}getFormData=()=>this.initialData;getInitialData=()=>({email:h.data.subscription.customerEmail,fullName:h.data.subscription.customerName,card:"","billing-country":"","billing-state":"","billing-address":"","billing-city":"","billing-zip":"",bankId:"",phoneNumber:"",countryCodePhoneNumber:"",documentType:"",documentNumber:""});hasPrefilledAddress=()=>{const e=["billing-country","billing-state","billing-address","billing-city","billing-zip"];return e.some((e=>{const t=this.initialData[e];return t&&t.trim()!==""}))};getPaymentDate=()=>{const e=h.form.checkoutResponse;if(!e)return"";if("date"in e){return e.date}return""};getReferenceNumber=()=>{const e=h.form.checkoutResponse;if(!e)return"";if("traceId"in e){return e.traceId}return""};render(){if(!h.isInitialized){return i("div",{class:"loading"},d.translate("renewal.loading"))}const e=e=>i("renewal-summary",{totalAmount:h.data.price.amount,currency:h.data.price.currency,subscriptionTitle:h.data.subscription.name[0]?.text\|\|"Subscription",subscriptionAmount:h.data.subscription.amount,nextChargeDate:h.data.subscription.nextChargeDate,frequency:h.data.subscription.frequency,...e});return i(i.Fragment,null,i("rebill-processing-payment",{style:{display:this.isCardSubmitting?"block":"none"}}),this.isCardSuccess?i("renewal-success-page",{typePaymentMethod:this.currentPaymentMethod,paymentDate:this.getPaymentDate(),referenceNumber:this.getReferenceNumber(),cardLastFour:h.data.subscription.cardLastFour,country:h.data.price.country,paymentMethodName:a.mapToAPMPaymentMethod(this.currentPaymentMethod,h.data?.price?.country),bank:h.form?.selectedBankId\|\|""}):i("rebill-checkout-form",{style:{display:this.isCardSubmitting\|\|this.isCardSuccess?"none":"block"},validationSchema:this.validationSchema,initialData:this.initialData,onSubmit:e=>this.handleSubmit(e),renderForm:({submit:t,formData:r,errors:o})=>i("div",{class:"rebill-checkout-renewal"},i("div",{class:"left-section"},i("div",{class:"left-section-container"},i("organization-logo",{organization:h.data.organization}),i("div",{class:"checkout-form-section"},i("user-information-static",{userInfo:{customerName:h.data.subscription.customerName,customerEmail:h.data.subscription.customerEmail}}),b(this.breakpoint,p.DESKTOP)&&e({displayedComponents:"header"}),b(this.breakpoint,p.DESKTOP)&&e({displayedComponents:"details"}),i("div",{style:{display:"flex",flexDirection:"column",gap:"32px"}},i("payment-method-selector",{enabledPaymentMethods:[...new Set(h.data.paymentMethods.map((e=>e.type)))],defaultSelected:this.currentPaymentMethod,errorComponent:{showErrorComponent:this.currentPaymentError,message:k.getErrorMessage(this.errorMessage)},cardError:{showCardInvalid:this.errorCardInvalid,type:null},country:h.data.price.country,documentTypeError:o?.documentType,documentNumberError:o?.documentNumber,showDocument:this.cardMode==="input"&&(x("documentType",this.currentRequiredFields)\|\|x("documentNumber",this.currentRequiredFields))}),this.currentPaymentMethod!==c.CARD&&i("rebill-alert",{type:"info",message:d.translate("renewal.paymentMethodAlert",{cardLastFour:h.data.subscription.cardLastFour\|\|"***"}),icon:"calendar-edit",variant:"outlined",colorIcon:y.PRIMARY}),this.cardMode==="input"&&x("bankId",this.currentRequiredFields)&&i("div",{class:"animated-component fade-in"},i("rebill-bank-selector",{banks:v("bank",this.allRequiredFields[this.currentPaymentMethod]?.original)\|\|[],defaultSelectedBankId:r.bankId\|\|"",error:o?.bankId}))),this.cardMode==="input"&&(x("billing-country",this.currentRequiredFields)\|\|x("billing-state",this.currentRequiredFields)\|\|x("billing-address",this.currentRequiredFields)\|\|x("billing-city",this.currentRequiredFields)\|\|x("billing-zip",this.currentRequiredFields))&&i("div",{class:"animated-component slide-in"},i("rebill-address",{countryOptions:this.countries.map((e=>({label:e.country,value:e.isoCountryCode}))),billingView:this.hasPrefilledAddress()?"form":"search",errors:{"billing-country":o["billing-country"],"billing-state":o["billing-state"],"billing-address":o["billing-address"],"billing-city":o["billing-city"],"billing-zip":o["billing-zip"]}})),this.cardMode==="input"&&x("phoneNumber",this.currentRequiredFields)&&i("div",{class:"animated-component fade-in"},i("user-information-phone",{error:o?.phoneNumber})),this.checkoutResponse?.result&&(this.currentPaymentMethod===c.CASH\|\|this.currentPaymentMethod===c.BANK_TRANSFER)&&i("apm-checkout",{paymentMethod:this.currentPaymentMethod,referenceId:this.currentPaymentMethod===c.CASH?this.checkoutResponse.result.data.referenceId:undefined,qrCodeData:this.currentPaymentMethod===c.BANK_TRANSFER?this.checkoutResponse.result.data.qrCode:undefined,providerName:h.data.organization?.name\|\|"",expirationDate:(()=>{const e=new Date;e.setDate(e.getDate()+30);return e.toISOString()})(),country:h.data.price.country,redirectUrl:this.checkoutResponse.result.data.url}),b(this.breakpoint,p.DESKTOP)&&e({displayedComponents:"summary"}),i("div",{style:{display:"flex",flexDirection:"column",gap:"16px"}},i("payment-button",{paymentMethod:this.currentPaymentMethod,isLoading:this.isSubmitting,isRenewal:true,trialPeriodDays:h.data.subscription.trialPeriodDays,redirectUrl:!!this.checkoutResponse?.result?.data?.url,timeToRedirect:5e3,country:h.data.price.country,isDisabled:h.fetchingInstallments,onSubmit:()=>t()}),i("rebill-alert",{type:"secure",variant:"variant-secure",icon:"lock-outline",message:d.translate("otp.secureMessage")}))),i("rebill-footer",null))),!b(this.breakpoint,p.DESKTOP)&&i("div",{class:"right-section"},i("div",{class:"checkout-summary-section"},e({displayedComponents:["header","details","summary"]}))))}))}};D.style=M;export{D as rebill_renewal};
2	+ //# sourceMappingURL=p-bf4f1bcc.entry.js.map