rebill-web-components-sdk 1.10.0 → 1.10.2-beta.0
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.
- package/dist/cjs/apm-checkout_14.cjs.entry.js +5 -5
- package/dist/cjs/card-fields-wrapper.card-identification.card-iframe.card-skeleton.rebill-address-form.rebill-address-search.rebill-input-combo.rebill-input-phone.rebill-installments.selectable-card.single-payment-method.entry.cjs.js.map +1 -1
- package/dist/cjs/card-fields-wrapper_11.cjs.entry.js +18 -18
- package/dist/cjs/change-card-success.cjs.entry.js +15 -1
- package/dist/cjs/change-card-success.entry.cjs.js.map +1 -1
- package/dist/cjs/collapsible-card_3.cjs.entry.js +2 -2
- package/dist/cjs/index-C-VTnc0I.js.map +1 -1
- package/dist/cjs/input-otp.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/organization-logo_4.cjs.entry.js +1 -1
- package/dist/cjs/otp-component_5.cjs.entry.js +16 -16
- package/dist/cjs/rebill-alert.cjs.entry.js +2 -2
- package/dist/cjs/rebill-autofill-detector.cjs.entry.js +184 -0
- package/dist/cjs/rebill-autofill-detector.entry.cjs.js.map +1 -0
- package/dist/cjs/rebill-card-carousel.cjs.entry.js +1 -1
- package/dist/cjs/rebill-card.cjs.entry.js +1 -1
- package/dist/cjs/rebill-container_2.cjs.entry.js +2 -2
- package/dist/cjs/rebill-flex-container.cjs.entry.js +1 -1
- package/dist/cjs/rebill-form.cjs.entry.js +1 -1
- package/dist/cjs/rebill-grid-container.cjs.entry.js +1 -1
- package/dist/cjs/rebill-input-select.cjs.entry.js +2 -2
- package/dist/cjs/rebill-input-text.cjs.entry.js +2 -2
- package/dist/cjs/rebill-mode-sandbox_2.cjs.entry.js +1 -1
- package/dist/cjs/rebill-timeline-debit-day_2.cjs.entry.js +2 -2
- package/dist/cjs/rebill-vertical-divider.cjs.entry.js +1 -1
- package/dist/cjs/rebill-web-components-sdk.cjs.js +1 -1
- package/dist/cjs/renewal-success-page.cjs.entry.js +2 -2
- package/dist/cjs/root-component.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/change-card/change-card-success.js +21 -1
- package/dist/collection/components/change-card/change-card-success.js.map +1 -1
- package/dist/collection/components/checkout/address/address-search/address-search.js +4 -4
- package/dist/collection/components/checkout/address/address-search/address-search.js.map +1 -1
- package/dist/collection/components/checkout/address/autofill-detector/autofill-detector.css +0 -0
- package/dist/collection/components/checkout/address/autofill-detector/autofill-detector.js +277 -0
- package/dist/collection/components/checkout/address/autofill-detector/autofill-detector.js.map +1 -0
- package/dist/collection/components/checkout/apm/qr-code/qr-code.js +2 -2
- package/dist/collection/components/checkout/apm/reference-code/reference-code.js +1 -1
- package/dist/collection/components/checkout/card-success-page/success-page.js +9 -9
- package/dist/collection/components/checkout/checkout-form/checkout-form.js +1 -1
- package/dist/collection/components/checkout/otp/otp.js +4 -4
- package/dist/collection/components/checkout/payment-method-selector/card-fields/card-fields-wrapper.js +2 -2
- package/dist/collection/components/checkout/payment-method-selector/card-fields/identification/identification.js +1 -1
- package/dist/collection/components/checkout/payment-method-selector/card-fields/iframe/CardIframe.js +2 -2
- package/dist/collection/components/checkout/payment-method-selector/card-fields/iframe/skeleton/CardSkeleton.js +1 -1
- package/dist/collection/components/checkout/payment-method-selector/card-fields/installments/installments.js +2 -2
- package/dist/collection/components/checkout/rebill-footer/rebill-footer.js +1 -1
- package/dist/collection/components/checkout/user-information/user-information-phone.js +1 -1
- package/dist/collection/components/checkout/user-information/user-information.js +3 -3
- package/dist/collection/components/renewal/renewal-success-page/renewal-success-page.js +2 -2
- package/dist/collection/components/root-component/root-component.js +1 -1
- package/dist/collection/components/shared/alert/alert.js +2 -2
- package/dist/collection/components/shared/card/card.js +1 -1
- package/dist/collection/components/shared/card-carousel/card-carousel.js +1 -1
- package/dist/collection/components/shared/collapsible-card/collapsible-card.js +1 -1
- package/dist/collection/components/shared/divider/divider.js +1 -1
- package/dist/collection/components/shared/divider/vertical-divider.js +1 -1
- package/dist/collection/components/shared/form/form.js +1 -1
- package/dist/collection/components/shared/inputs/input-checkbox/input-checkbox.js +1 -1
- package/dist/collection/components/shared/inputs/input-combo/input-combo.js +1 -1
- package/dist/collection/components/shared/inputs/input-otp/input-otp.js +2 -2
- package/dist/collection/components/shared/inputs/input-phone/input-phone.js +2 -2
- package/dist/collection/components/shared/inputs/input-select/input-select.js +2 -2
- package/dist/collection/components/shared/inputs/input-text/input-text.js +2 -2
- package/dist/collection/components/shared/layouts/generics/container.js +1 -1
- package/dist/collection/components/shared/layouts/generics/flex.js +1 -1
- package/dist/collection/components/shared/layouts/generics/grid.js +1 -1
- package/dist/collection/components/shared/mode-sandbox/mode-sandbox-mobile.js +1 -1
- package/dist/collection/components/shared/selectable-card/selectable-card.js +2 -2
- package/dist/collection/components/shared/singlePaymentMethod/singlePaymentMethod.js +4 -4
- package/dist/collection/components/shared/timeline/timeline-debit-day.js +1 -1
- package/dist/collection/components/shared/timeline/timeline-free-trial.js +1 -1
- package/dist/components/apm-checkout.js +1 -1
- package/dist/components/bank-transfer.js +1 -1
- package/dist/components/card-fields-wrapper.js +1 -1
- package/dist/components/card-identification.js +1 -1
- package/dist/components/card-iframe.js +1 -1
- package/dist/components/card-skeleton.js +1 -1
- package/dist/components/change-card-success.js +1 -1
- package/dist/components/collapsible-card.js +1 -1
- package/dist/components/discount-coupon.js +1 -1
- package/dist/components/input-otp.js +1 -1
- package/dist/components/otp-component.js +1 -1
- package/dist/components/{p-Cy4AWMDG.js → p-0y1EkPsV.js} +4 -4
- package/dist/components/{p-Cy4AWMDG.js.map → p-0y1EkPsV.js.map} +1 -1
- package/dist/components/{p-BDqkAG1R.js → p-4NckTb-f.js} +4 -4
- package/dist/components/{p-BDqkAG1R.js.map → p-4NckTb-f.js.map} +1 -1
- package/dist/components/{p-CzOgUoiH.js → p-6gwr59D_.js} +6 -6
- package/dist/components/{p-CzOgUoiH.js.map → p-6gwr59D_.js.map} +1 -1
- package/dist/components/p-8BpuJ_V5.js.map +1 -1
- package/dist/components/{p-UUAqyvL7.js → p-AFaRRX6m.js} +14 -8
- package/dist/components/p-AFaRRX6m.js.map +1 -0
- package/dist/components/{p-BM7arRE4.js → p-BFqhozQ0.js} +4 -4
- package/dist/components/{p-BM7arRE4.js.map → p-BFqhozQ0.js.map} +1 -1
- package/dist/components/{p-B-Svp05F.js → p-BMX_V4NR.js} +5 -5
- package/dist/components/{p-B-Svp05F.js.map → p-BMX_V4NR.js.map} +1 -1
- package/dist/components/{p-xqbCGsb4.js → p-BMdmsMrv.js} +6 -6
- package/dist/components/{p-xqbCGsb4.js.map → p-BMdmsMrv.js.map} +1 -1
- package/dist/components/{p-BU6zbBCY.js → p-BhAb6Xb9.js} +4 -4
- package/dist/components/{p-BU6zbBCY.js.map → p-BhAb6Xb9.js.map} +1 -1
- package/dist/components/{p-Dow9Oa1e.js → p-BldhoZKa.js} +3 -3
- package/dist/components/{p-Dow9Oa1e.js.map → p-BldhoZKa.js.map} +1 -1
- package/dist/components/{p-9OVqnxbl.js → p-BmSGsGCP.js} +5 -5
- package/dist/components/{p-9OVqnxbl.js.map → p-BmSGsGCP.js.map} +1 -1
- package/dist/components/{p-CEM6OODt.js → p-Bo6Oy_rw.js} +12 -12
- package/dist/components/{p-CEM6OODt.js.map → p-Bo6Oy_rw.js.map} +1 -1
- package/dist/components/{p-hR7xARTs.js → p-BoKyp_AW.js} +3 -3
- package/dist/components/{p-hR7xARTs.js.map → p-BoKyp_AW.js.map} +1 -1
- package/dist/components/{p-DdCguZ5r.js → p-Bx5CO1DQ.js} +10 -10
- package/dist/components/{p-DdCguZ5r.js.map → p-Bx5CO1DQ.js.map} +1 -1
- package/dist/components/{p-BFb0C4n-.js → p-C0ukGjTv.js} +3 -3
- package/dist/components/{p-BFb0C4n-.js.map → p-C0ukGjTv.js.map} +1 -1
- package/dist/components/{p-BXdI0xHE.js → p-C62DbryS.js} +3 -3
- package/dist/components/{p-BXdI0xHE.js.map → p-C62DbryS.js.map} +1 -1
- package/dist/components/{p-BLD5qbS8.js → p-C9-xmJLv.js} +4 -4
- package/dist/components/{p-BLD5qbS8.js.map → p-C9-xmJLv.js.map} +1 -1
- package/dist/components/{p-DZKrZZwd.js → p-CJrBfF7b.js} +14 -14
- package/dist/components/{p-DZKrZZwd.js.map → p-CJrBfF7b.js.map} +1 -1
- package/dist/components/{p-BS5TOpnh.js → p-CNgxCj8J.js} +4 -4
- package/dist/components/{p-BS5TOpnh.js.map → p-CNgxCj8J.js.map} +1 -1
- package/dist/components/{p-CYv4ffn1.js → p-CSgNGaiV.js} +3 -3
- package/dist/components/{p-CYv4ffn1.js.map → p-CSgNGaiV.js.map} +1 -1
- package/dist/components/{p-FjbFSzY2.js → p-CYy5NAoy.js} +23 -8
- package/dist/components/p-CYy5NAoy.js.map +1 -0
- package/dist/components/p-Cb2XT9Pi.js +206 -0
- package/dist/components/p-Cb2XT9Pi.js.map +1 -0
- package/dist/components/{p-cS0M4sWc.js → p-Ccqq4BcO.js} +10 -10
- package/dist/components/{p-cS0M4sWc.js.map → p-Ccqq4BcO.js.map} +1 -1
- package/dist/components/{p-yRI_ZFvd.js → p-ChtneCGm.js} +3 -3
- package/dist/components/{p-yRI_ZFvd.js.map → p-ChtneCGm.js.map} +1 -1
- package/dist/components/{p-CY7UQa2f.js → p-CoRQkXBT.js} +6 -6
- package/dist/components/{p-CY7UQa2f.js.map → p-CoRQkXBT.js.map} +1 -1
- package/dist/components/{p-bKjZk5T9.js → p-CpBlNxfh.js} +3 -3
- package/dist/components/{p-bKjZk5T9.js.map → p-CpBlNxfh.js.map} +1 -1
- package/dist/components/{p-C5qSTRqe.js → p-Cs-pA3OO.js} +3 -3
- package/dist/components/{p-C5qSTRqe.js.map → p-Cs-pA3OO.js.map} +1 -1
- package/dist/components/{p-OIK5VUVA.js → p-CtrJsF6L.js} +3 -3
- package/dist/components/{p-OIK5VUVA.js.map → p-CtrJsF6L.js.map} +1 -1
- package/dist/components/{p-CcFiotn1.js → p-CvW9G05r.js} +7 -7
- package/dist/components/{p-CcFiotn1.js.map → p-CvW9G05r.js.map} +1 -1
- package/dist/components/{p-BVVBiDNt.js → p-CwYDVqU6.js} +3 -3
- package/dist/components/{p-BVVBiDNt.js.map → p-CwYDVqU6.js.map} +1 -1
- package/dist/components/{p-ClLeKt1B.js → p-D-FRnRNO.js} +4 -4
- package/dist/components/{p-ClLeKt1B.js.map → p-D-FRnRNO.js.map} +1 -1
- package/dist/components/{p-CobY14qx.js → p-D0N0vC0E.js} +8 -8
- package/dist/components/{p-CobY14qx.js.map → p-D0N0vC0E.js.map} +1 -1
- package/dist/components/{p-CjLWTQ-k.js → p-D13i5GRC.js} +3 -3
- package/dist/components/{p-CjLWTQ-k.js.map → p-D13i5GRC.js.map} +1 -1
- package/dist/components/{p-BjRD9lS0.js → p-DHO4T8Ax.js} +3 -3
- package/dist/components/{p-BjRD9lS0.js.map → p-DHO4T8Ax.js.map} +1 -1
- package/dist/components/{p-BrxxkM_7.js → p-DcndzUFT.js} +5 -5
- package/dist/components/{p-BrxxkM_7.js.map → p-DcndzUFT.js.map} +1 -1
- package/dist/components/{p-COYitAD7.js → p-DdSBiiVX.js} +5 -5
- package/dist/components/{p-COYitAD7.js.map → p-DdSBiiVX.js.map} +1 -1
- package/dist/components/{p-CZ4Ng3BX.js → p-Dgn-b0VN.js} +11 -5
- package/dist/components/p-Dgn-b0VN.js.map +1 -0
- package/dist/components/{p-dkScX4Ck.js → p-DoTMic8C.js} +5 -5
- package/dist/components/{p-dkScX4Ck.js.map → p-DoTMic8C.js.map} +1 -1
- package/dist/components/{p-WGf68eDg.js → p-Dp6bUSN1.js} +3 -3
- package/dist/components/{p-WGf68eDg.js.map → p-Dp6bUSN1.js.map} +1 -1
- package/dist/components/{p-B0FDvLRO.js → p-Ds466vGv.js} +4 -4
- package/dist/components/{p-B0FDvLRO.js.map → p-Ds466vGv.js.map} +1 -1
- package/dist/components/{p-BrO6uPL6.js → p-DuyVg_A7.js} +7 -7
- package/dist/components/{p-BrO6uPL6.js.map → p-DuyVg_A7.js.map} +1 -1
- package/dist/components/{p-CTCwiLaJ.js → p-RbKsk0NK.js} +4 -4
- package/dist/components/{p-CTCwiLaJ.js.map → p-RbKsk0NK.js.map} +1 -1
- package/dist/components/{p-BEVU1b9v.js → p-_qxwSXk5.js} +6 -6
- package/dist/components/{p-BEVU1b9v.js.map → p-_qxwSXk5.js.map} +1 -1
- package/dist/components/{p-BZaiuF56.js → p-iueBw_y3.js} +4 -4
- package/dist/components/{p-BZaiuF56.js.map → p-iueBw_y3.js.map} +1 -1
- package/dist/components/{p-CXPNkSli.js → p-mTzDbf1n.js} +4 -4
- package/dist/components/{p-CXPNkSli.js.map → p-mTzDbf1n.js.map} +1 -1
- package/dist/components/{p-DwZ2ffr1.js → p-wMEGQ8Q5.js} +3 -3
- package/dist/components/{p-DwZ2ffr1.js.map → p-wMEGQ8Q5.js.map} +1 -1
- package/dist/components/{p-qx8yDlp3.js → p-z3joV5yV.js} +4 -4
- package/dist/components/{p-qx8yDlp3.js.map → p-z3joV5yV.js.map} +1 -1
- package/dist/components/payment-method-selector.js +1 -1
- package/dist/components/qr-code.js +1 -1
- package/dist/components/rebill-address-form.js +1 -1
- package/dist/components/rebill-address-search.js +1 -1
- package/dist/components/rebill-address.js +1 -1
- package/dist/components/rebill-alert.js +1 -1
- package/dist/components/rebill-autofill-detector.d.ts +11 -0
- package/dist/components/rebill-autofill-detector.js +9 -0
- package/dist/components/rebill-autofill-detector.js.map +1 -0
- package/dist/components/rebill-bank-selector.js +1 -1
- package/dist/components/rebill-card-carousel.js +1 -1
- package/dist/components/rebill-card.js +1 -1
- package/dist/components/rebill-change-card.js +50 -44
- package/dist/components/rebill-change-card.js.map +1 -1
- package/dist/components/rebill-checkout-form.js +1 -1
- package/dist/components/rebill-checkout-single-column.js +1 -1
- package/dist/components/rebill-checkout.js +70 -64
- package/dist/components/rebill-checkout.js.map +1 -1
- package/dist/components/rebill-container.js +1 -1
- package/dist/components/rebill-divider.js +1 -1
- package/dist/components/rebill-flex-container.js +1 -1
- package/dist/components/rebill-footer.js +1 -1
- package/dist/components/rebill-form.js +1 -1
- package/dist/components/rebill-grid-container.js +1 -1
- package/dist/components/rebill-input-checkbox.js +1 -1
- package/dist/components/rebill-input-combo.js +1 -1
- package/dist/components/rebill-input-phone.js +1 -1
- package/dist/components/rebill-input-select.js +1 -1
- package/dist/components/rebill-input-text.js +1 -1
- package/dist/components/rebill-installments.js +1 -1
- package/dist/components/rebill-mode-sandbox-mobile.js +1 -1
- package/dist/components/rebill-processing-payment.js +1 -1
- package/dist/components/rebill-renewal.js +60 -54
- package/dist/components/rebill-renewal.js.map +1 -1
- package/dist/components/rebill-summary.js +1 -1
- package/dist/components/rebill-timeline-debit-day.js +1 -1
- package/dist/components/rebill-timeline-free-trial.js +1 -1
- package/dist/components/rebill-vertical-divider.js +1 -1
- package/dist/components/reference-code.js +1 -1
- package/dist/components/renewal-success-page.js +1 -1
- package/dist/components/renewal-summary.js +1 -1
- package/dist/components/root-component.js +6 -6
- package/dist/components/selectable-card.js +1 -1
- package/dist/components/single-payment-method.js +1 -1
- package/dist/components/success-page.js +1 -1
- package/dist/components/user-information-phone.js +1 -1
- package/dist/components/user-information.js +1 -1
- package/dist/esm/apm-checkout_14.entry.js +5 -5
- package/dist/esm/card-fields-wrapper.card-identification.card-iframe.card-skeleton.rebill-address-form.rebill-address-search.rebill-input-combo.rebill-input-phone.rebill-installments.selectable-card.single-payment-method.entry.js.map +1 -1
- package/dist/esm/card-fields-wrapper_11.entry.js +18 -18
- package/dist/esm/change-card-success.entry.js +16 -2
- package/dist/esm/change-card-success.entry.js.map +1 -1
- package/dist/esm/collapsible-card_3.entry.js +2 -2
- package/dist/esm/index-BTZ7D7jU.js.map +1 -1
- package/dist/esm/input-otp.entry.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/organization-logo_4.entry.js +1 -1
- package/dist/esm/otp-component_5.entry.js +16 -16
- package/dist/esm/rebill-alert.entry.js +2 -2
- package/dist/esm/rebill-autofill-detector.entry.js +182 -0
- package/dist/esm/rebill-autofill-detector.entry.js.map +1 -0
- package/dist/esm/rebill-card-carousel.entry.js +1 -1
- package/dist/esm/rebill-card.entry.js +1 -1
- package/dist/esm/rebill-container_2.entry.js +2 -2
- package/dist/esm/rebill-flex-container.entry.js +1 -1
- package/dist/esm/rebill-form.entry.js +1 -1
- package/dist/esm/rebill-grid-container.entry.js +1 -1
- package/dist/esm/rebill-input-select.entry.js +2 -2
- package/dist/esm/rebill-input-text.entry.js +2 -2
- package/dist/esm/rebill-mode-sandbox_2.entry.js +1 -1
- package/dist/esm/rebill-timeline-debit-day_2.entry.js +2 -2
- package/dist/esm/rebill-vertical-divider.entry.js +1 -1
- package/dist/esm/rebill-web-components-sdk.js +1 -1
- package/dist/esm/renewal-success-page.entry.js +2 -2
- package/dist/esm/root-component.entry.js +1 -1
- package/dist/rebill-web-components-sdk/card-fields-wrapper.card-identification.card-iframe.card-skeleton.rebill-address-form.rebill-address-search.rebill-input-combo.rebill-input-phone.rebill-installments.selectable-card.single-payment-method.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/change-card-success.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/{p-637ed8ea.entry.js → p-07ef4ea3.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-70febc7c.entry.js → p-1a99d53d.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-1f731eef.entry.js → p-1b4222b8.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-1c000e38.entry.js +2 -0
- package/dist/rebill-web-components-sdk/p-1c000e38.entry.js.map +1 -0
- package/dist/rebill-web-components-sdk/{p-b7e9af07.entry.js → p-1f253272.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-39c5f0f3.entry.js → p-26d57782.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-2c464942.entry.js +2 -0
- package/dist/rebill-web-components-sdk/p-37ce3457.entry.js +2 -0
- package/dist/rebill-web-components-sdk/{p-e3cc872d.entry.js → p-4355b35a.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-7eb0c863.entry.js → p-64d035a5.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-ca24b250.entry.js → p-728a5b5d.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-65be7025.entry.js → p-7f01ba37.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-a625d0fd.entry.js → p-82c4171e.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-be7e39cf.entry.js → p-860f0784.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-9a506148.entry.js +2 -0
- package/dist/rebill-web-components-sdk/{p-4d173895.entry.js → p-9a89f57f.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-BTZ7D7jU.js.map +1 -1
- package/dist/rebill-web-components-sdk/{p-2847a090.entry.js → p-aaa9fb70.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-dd3b420b.entry.js → p-ba5c9f7f.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-b5330b78.entry.js → p-d4c04783.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-d8089da8.entry.js +2 -0
- package/dist/rebill-web-components-sdk/{p-6a9b3bad.entry.js.map → p-d8089da8.entry.js.map} +1 -1
- package/dist/rebill-web-components-sdk/p-d827e221.entry.js +2 -0
- package/dist/rebill-web-components-sdk/p-d827e221.entry.js.map +1 -0
- package/dist/rebill-web-components-sdk/p-eb5a43f1.entry.js +2 -0
- package/dist/rebill-web-components-sdk/p-eb5a43f1.entry.js.map +1 -0
- package/dist/rebill-web-components-sdk/rebill-autofill-detector.entry.esm.js.map +1 -0
- package/dist/rebill-web-components-sdk/rebill-web-components-sdk.esm.js +1 -1
- package/dist/types/components/change-card/change-card-success.d.ts +4 -0
- package/dist/types/components/checkout/address/address-search/address-search.d.ts +1 -1
- package/dist/types/components/checkout/address/autofill-detector/autofill-detector.d.ts +20 -0
- package/dist/types/components.d.ts +49 -2
- package/package.json +1 -1
- package/dist/components/p-CZ4Ng3BX.js.map +0 -1
- package/dist/components/p-FjbFSzY2.js.map +0 -1
- package/dist/components/p-UUAqyvL7.js.map +0 -1
- package/dist/rebill-web-components-sdk/p-204e76c5.entry.js +0 -2
- package/dist/rebill-web-components-sdk/p-2a57ff1e.entry.js +0 -2
- package/dist/rebill-web-components-sdk/p-2a57ff1e.entry.js.map +0 -1
- package/dist/rebill-web-components-sdk/p-33ade3d2.entry.js +0 -2
- package/dist/rebill-web-components-sdk/p-6a9b3bad.entry.js +0 -2
- package/dist/rebill-web-components-sdk/p-71973b15.entry.js +0 -2
- package/dist/rebill-web-components-sdk/p-71973b15.entry.js.map +0 -1
- package/dist/rebill-web-components-sdk/p-cb4389ad.entry.js +0 -2
- /package/dist/rebill-web-components-sdk/{p-637ed8ea.entry.js.map → p-07ef4ea3.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-70febc7c.entry.js.map → p-1a99d53d.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-1f731eef.entry.js.map → p-1b4222b8.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-b7e9af07.entry.js.map → p-1f253272.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-39c5f0f3.entry.js.map → p-26d57782.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-33ade3d2.entry.js.map → p-2c464942.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-204e76c5.entry.js.map → p-37ce3457.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-e3cc872d.entry.js.map → p-4355b35a.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-7eb0c863.entry.js.map → p-64d035a5.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-ca24b250.entry.js.map → p-728a5b5d.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-65be7025.entry.js.map → p-7f01ba37.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-a625d0fd.entry.js.map → p-82c4171e.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-be7e39cf.entry.js.map → p-860f0784.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-cb4389ad.entry.js.map → p-9a506148.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-4d173895.entry.js.map → p-9a89f57f.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-2847a090.entry.js.map → p-aaa9fb70.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-dd3b420b.entry.js.map → p-ba5c9f7f.entry.js.map} +0 -0
- /package/dist/rebill-web-components-sdk/{p-b5330b78.entry.js.map → p-d4c04783.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-Dgn-b0VN.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/utils/google-maps.service.ts","src/components/checkout/address/address-search/address-search.css?tag=rebill-address-search","src/components/checkout/address/address-search/address-search.tsx"],"sourcesContent":["export interface AddressComponents {\n address: string;\n city: string;\n state: string;\n country: string;\n zip: string;\n addInformation?: string;\n}\n\nexport class GoogleMapsService {\n private static instance: GoogleMapsService;\n private isLoaded: boolean = false;\n private loadPromise: Promise<boolean> | null = null;\n\n static getInstance(): GoogleMapsService {\n if (!GoogleMapsService.instance) {\n GoogleMapsService.instance = new GoogleMapsService();\n }\n return GoogleMapsService.instance;\n }\n\n async waitForAPI(): Promise<boolean> {\n if (this.isLoaded && window.google?.maps?.places) {\n return true;\n }\n\n if (this.loadPromise) {\n return this.loadPromise;\n }\n\n this.loadPromise = new Promise(resolve => {\n let attempts = 0;\n const maxAttempts = 100; // 10 seconds max wait\n\n const checkAPI = () => {\n attempts++;\n\n if (window.google?.maps?.places) {\n this.isLoaded = true;\n resolve(true);\n } else if (attempts >= maxAttempts) {\n console.error('Google Maps API failed to load within timeout');\n resolve(false);\n } else {\n setTimeout(checkAPI, 100);\n }\n };\n checkAPI();\n });\n\n return this.loadPromise;\n }\n\n async createAutocomplete(\n inputElement: HTMLInputElement,\n onPlaceSelected: (address: AddressComponents) => void,\n ): Promise<google.maps.places.Autocomplete | null> {\n const isReady = await this.waitForAPI();\n if (!isReady) {\n console.error('Google Maps API not available');\n return null;\n }\n\n try {\n const autocomplete = new google.maps.places.Autocomplete(inputElement, {\n types: ['address'],\n fields: ['address_components', 'formatted_address', 'geometry'],\n });\n\n autocomplete.addListener('place_changed', () => {\n const place = autocomplete.getPlace();\n\n if (place?.address_components) {\n const address = this.parseAddressComponents(place.address_components);\n onPlaceSelected(address);\n }\n });\n\n return autocomplete;\n } catch (error) {\n console.error('Failed to create Google Maps autocomplete:', error);\n return null;\n }\n }\n\n private parseAddressComponents(\n components: google.maps.GeocoderAddressComponent[],\n ): AddressComponents {\n const getComponent = (type: string, useShortName = false) => {\n const component = components.find(c => c.types.includes(type));\n return component ? (useShortName ? component.short_name : component.long_name) : '';\n };\n\n const streetNumber = getComponent('street_number');\n const route = getComponent('route');\n\n return {\n address: `${streetNumber} ${route}`.trim(),\n city: getComponent('locality'),\n state: getComponent('administrative_area_level_1'),\n country: getComponent('country', true),\n zip: getComponent('postal_code'),\n };\n }\n\n static loadGoogleMapsScript(googleMapsApiKey?: string) {\n // Use hardcoded API key for SDK\n const apiKey = googleMapsApiKey || 'AIzaSyCViTfaoMntRf7oYbAfPZv8hbrNnOWHjQM';\n\n if (!apiKey) {\n console.warn('Google Maps API key not provided. Address autocomplete will not be available.');\n return;\n }\n\n // Check if script is already loaded\n if (document.querySelector('script[src*=\"maps.googleapis.com\"]')) {\n return;\n }\n\n const script = document.createElement('script');\n script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&loading=async&callback=initGoogleMaps`;\n script.async = true;\n script.defer = true;\n\n // Add global callback for when Google Maps is ready\n (window as any).initGoogleMaps = () => {\n delete (window as any).initGoogleMaps; // Clean up\n };\n\n script.onerror = () => {\n console.error(\n 'Failed to load Google Maps script. Please check your API key and network connection.',\n );\n };\n\n document.head.appendChild(script);\n }\n}\n",":host {\n display: block;\n}\n\n.address-search-container {\n width: 100%;\n margin-bottom: 24px;\n}\n\n.search-input-container {\n margin-bottom: 8px;\n}\n\n.manual-entry-link-wrapper {\n display: flex;\n justify-content: flex-start;\n}\n\n.manual-entry-link {\n background: none;\n border: none;\n color: var(--rebill-color-primary);\n cursor: pointer;\n font-size: 14px;\n padding: 4px 0;\n text-decoration: underline;\n text-decoration-color: var(--rebill-color-text-secondary);\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../../store/session.store';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport { AddressComponents, GoogleMapsService } from '../../../../utils/google-maps.service';\n\n@Component({\n tag: 'rebill-address-search',\n styleUrl: 'address-search.css',\n shadow: false,\n})\nexport class AddressSearch {\n @Element() el: HTMLElement;\n @State() isInitialized = false;\n @State() currentLocale: string = sessionState.currentLocale;\n\n @Prop() addressType: 'billing' | 'shipping' = 'billing';\n @Prop() placeholder?: string;\n @Prop() error?: string;\n @Prop() disabled: boolean = false;\n\n @Event() addressSelected: EventEmitter<AddressComponents>;\n @Event() manualEntryRequested: EventEmitter<void>;\n private googleMapsService = GoogleMapsService.getInstance();\n private autocomplete: google.maps.places.Autocomplete | null = null;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n async componentDidLoad() {\n await this.initializeAutocomplete();\n\n // Listen for language changes\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n }\n\n disconnectedCallback() {\n this.cleanup();\n\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n\n private async initializeAutocomplete() {\n if (this.isInitialized) return;\n\n try {\n const inputElement = await this.getInputElement();\n if (!inputElement) return;\n\n this.autocomplete = await this.googleMapsService.createAutocomplete(\n inputElement,\n (address: AddressComponents) => this.handleAddressSelected(address),\n );\n if (this.autocomplete) {\n this.isInitialized = true;\n }\n } catch (error) {\n console.error(`Failed to initialize ${this.addressType} autocomplete:`, error);\n }\n }\n\n private async getInputElement(): Promise<HTMLInputElement | null> {\n const inputComponent = this.el?.querySelector('rebill-input-text') as any;\n if (!inputComponent) {\n console.error(`Input component not found for ${this.addressType}-search`);\n return null;\n }\n\n try {\n return await inputComponent.getInputElement();\n } catch (error) {\n console.error(`Failed to get input element:`, error);\n return null;\n }\n }\n\n private handleAddressSelected(address: AddressComponents) {\n this.addressSelected.emit(address);\n }\n\n private handleManualEntry = () => {\n this.manualEntryRequested.emit();\n };\n private cleanup() {\n if (this.autocomplete) {\n this.autocomplete = null;\n }\n this.isInitialized = false;\n }\n\n render() {\n const translationKey = this.addressType === 'shipping' ? 'shippingAddress' : 'billingAddress';\n const defaultPlaceholder = I18nService.translate(\n `${translationKey}.searchPlaceholder`,\n 'Search for an address...',\n );\n\n return (\n <rebill-autofill-detector\n target-selector=\"rebill-input-text input\"\n disabled={this.disabled}\n onAutofillDetected={event => this.handleAddressSelected(event.detail)}\n onManualEntryRequested={() => this.handleManualEntry()}\n >\n <div class=\"address-search-container\">\n <div class=\"search-input-container\">\n <rebill-input-text\n id={`${this.addressType}-search`}\n placeholder={this.placeholder || defaultPlaceholder}\n rightIcon=\"search\"\n error={this.error}\n disabled={this.disabled}\n />\n </div>\n <div class=\"manual-entry-link-wrapper\">\n <button class=\"manual-entry-link\" type=\"button\" onClick={this.handleManualEntry}>\n <rebill-typography\n variant=\"subtitle2\"\n color={COLORS_ENUM.SECONDARY}\n class=\"footer-link\"\n >\n {I18nService.translate(`${translationKey}.manualEntry`, 'Enter address manually')}\n </rebill-typography>\n </button>\n </div>\n </div>\n </rebill-autofill-detector>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { c as copyToClipboard } from './p-OxmhgFET.js';
|
|
|
4
4
|
import { C as COLORS_ENUM } from './p-C5Pu-n-i.js';
|
|
5
5
|
import { i as isBase64Image, d as decodeQRData, a as generateQRCodeSVG, g as getCurrencyInstructions } from './p-C7VPIrfQ.js';
|
|
6
6
|
import { c as createCountdownTimer, f as formatTimeMMSSMax60 } from './p-bcHxwlBu.js';
|
|
7
|
-
import { d as defineCustomElement$4 } from './p-
|
|
7
|
+
import { d as defineCustomElement$4 } from './p-wMEGQ8Q5.js';
|
|
8
8
|
import { d as defineCustomElement$3 } from './p-sOHrcM75.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './p-Np4T5oyp.js';
|
|
10
10
|
import { d as defineCustomElement$1 } from './p-T8LQxh_O.js';
|
|
@@ -99,13 +99,13 @@ const QrCode = /*@__PURE__*/ proxyCustomElement(class QrCode extends H {
|
|
|
99
99
|
};
|
|
100
100
|
render() {
|
|
101
101
|
const instructionLines = this.getCurrentLanguageInstructions();
|
|
102
|
-
return (h("div", { key: '
|
|
102
|
+
return (h("div", { key: 'af12b0e17de3e9d15b3d50f6a775cfec0634c57d', class: "qr-code" }, h("div", { key: '049ac6a40747350848ab4de7b733ce0c3264b63d', class: "qr-code-header" }, h("div", { key: '25014acd9e5bfd42b7e67abc035b52703929732c', class: "expiration-section" }, h("rebill-icon", { key: 'f4892dd1c4e6cbfc58fe9a0768e72e3afa286010', name: "calendar-clock" }), h("span", { key: '74395a35eb90ab22fa8efcc763b5819e2b465b57', class: "expiration-text" }, I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })))), h("div", { key: '27b777bbba15c3a224e9c9d07ec6194f40caaa7b', class: "qr-code-content" }, h("div", { key: '38862683c888d46db81a5df22345024fdcc22fcc', class: "qr-section" }, h("div", { key: '2abcbbfad2d8031b2cfd0eca9daab29e8c65b2f7', class: "qr-instruction" }, h("rebill-typography", { key: '79f2500a17995c2f5b66be7a3afeab8ff1df01e9', variant: "subtitle-bold", style: { fontSize: '12px' }, color: COLORS_ENUM.GREY_300 }, I18nService.translate('qrCode.scanInstruction'))), h("div", { key: '181bd27896fb77c5afa1614a622242bb8b399167', class: "qr-container" }, this.isImage ? (h("img", { src: `data:image/png;base64,${this.qrCodeData}`, alt: "QR Code", class: "qr-image" })) : (h("div", { class: "qr-image", innerHTML: this.qrCodeSvg })), h("div", { key: '44a910457a4462bce56ee04fd7421b38c80f5701', class: "scanner-line" }), h("div", { key: '5ab93aeea71f4288525cc5c0ef7e864d322d625f', class: "corner-bottom-left" }), h("div", { key: '2dfa93e3952df855b38692caa5e446e67477ba78', class: "corner-bottom-right" })), this.code && (h("rebill-button", { key: '1a6e620bb374c27dccf12b910864920f2c7151ac', class: "copy-btn", variant: "secondary", size: "small", onClick: async () => {
|
|
103
103
|
if (!this.code)
|
|
104
104
|
return;
|
|
105
105
|
await copyToClipboard(this.code);
|
|
106
106
|
this.hasCopied = true;
|
|
107
107
|
setTimeout(() => (this.hasCopied = false), 2000);
|
|
108
|
-
}, type: "button" }, h("rebill-typography", { key: '
|
|
108
|
+
}, type: "button" }, h("rebill-typography", { key: '0bd8ad17dd4010b231889a3781686911638ad96d', variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('qrCode.copyCode')), this.hasCopied ? (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844", stroke: "#35B093", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("rebill-icon", { name: "copy", size: "16px" })))))), instructionLines.length > 0 && (h("collapsible-card", { key: '4e69b59086fab349bdbe54aaa7908d03f6af72e2', variant: "flat", header: I18nService.translate('qrCode.instructionsLabel'), open: false }, h("div", { key: 'a535d50416b7d0ad635c5c24f7c35258bf3ebbac' }, h("ol", { key: '0bcae653181b6f9bb62d43417d8811226ad135db', class: "instructions-list" }, instructionLines.map((line, index) => (h("li", { key: index, class: "instruction-item" }, h("div", { class: "instruction-number" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.GREY_300 }, index + 1)), h("div", { class: "instruction-text" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.GREY_300 }, line)))))))))));
|
|
109
109
|
}
|
|
110
110
|
static get style() { return qrCodeCss; }
|
|
111
111
|
}, [256, "qr-code", {
|
|
@@ -156,6 +156,6 @@ function defineCustomElement() {
|
|
|
156
156
|
defineCustomElement();
|
|
157
157
|
|
|
158
158
|
export { QrCode as Q, defineCustomElement as d };
|
|
159
|
-
//# sourceMappingURL=p-
|
|
159
|
+
//# sourceMappingURL=p-DoTMic8C.js.map
|
|
160
160
|
|
|
161
|
-
//# sourceMappingURL=p-
|
|
161
|
+
//# sourceMappingURL=p-DoTMic8C.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-dkScX4Ck.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/apm/qr-code/qr-code.css?tag=qr-code","src/components/checkout/apm/qr-code/qr-code.tsx"],"sourcesContent":[".qr-code {\n border: 1px solid var(--rebill-color-background-right);\n border-radius: 8px;\n background: var(--rebill-color-background);\n overflow: hidden;\n font-family: var(--rebill-font-family);\n margin-top: 24px;\n}\n\n.qr-code-header {\n padding: 16px 24px;\n background: var(--rebill-color-background-left);\n border-bottom: 1px solid var(--rebill-color-background-right);\n}\n\n.expiration-section {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n}\n\n.expiration-text {\n font-size: 12px;\n font-weight: 400;\n color: var(--rebill-color-text-secondary);\n}\n\n.qr-code-content {\n padding: 16px 0px 16px 0px;\n background: #ffffff !important;\n}\n\n.qr-section {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n background: #ffffff !important;\n}\n\n.qr-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px;\n background: var(--rebill-color-background);\n position: relative;\n border-radius: 8px;\n}\n\n.qr-container::before,\n.qr-container::after {\n content: '';\n position: absolute;\n width: 32px;\n height: 32px;\n border: 2px solid var(--rebill-color-green);\n}\n\n/* Top-left corner */\n.qr-container::before {\n top: -2px;\n left: -2px;\n border-right: none;\n border-bottom: none;\n border-top-left-radius: 8px;\n}\n\n/* Top-right corner */\n.qr-container::after {\n top: -2px;\n right: -2px;\n border-left: none;\n border-bottom: none;\n border-top-right-radius: 8px;\n}\n\n/* Bottom corners */\n.corner-bottom-left,\n.corner-bottom-right {\n position: absolute;\n width: 32px;\n height: 32px;\n border: 2px solid var(--rebill-color-green);\n}\n\n/* Bottom-left corner */\n.corner-bottom-left {\n bottom: -2px;\n left: -2px;\n border-right: none;\n border-top: none;\n border-bottom-left-radius: 8px;\n}\n\n/* Bottom-right corner */\n.corner-bottom-right {\n bottom: -2px;\n right: -2px;\n border-left: none;\n border-top: none;\n border-bottom-right-radius: 8px;\n}\n\n.qr-image {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 146px;\n height: 146px;\n background: #ffffff !important;\n border-radius: 4px;\n}\n\n.qr-image svg {\n width: 146px;\n height: 146px;\n border-radius: 4px;\n background: #ffffff !important;\n}\n\n.qr-image img {\n width: 146px;\n height: 146px;\n border-radius: 4px;\n background: #ffffff !important;\n}\n\n/* Scanner line animation */\n.scanner-line {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--rebill-color-green), transparent);\n box-shadow: 0 0 10px var(--rebill-color-green);\n animation: scanDown 2s ease-in-out;\n animation-fill-mode: forwards;\n z-index: 10;\n}\n\n@keyframes scanDown {\n 0% {\n top: 100%;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n top: 0;\n opacity: 0;\n }\n}\n\n.qr-instruction {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.instructions-section {\n background: var(--rebill-color-background-secondary);\n}\n\n.instructions-content {\n padding: 16px 16px 16px 16px;\n background: var(--rebill-color-background);\n}\n\n.instructions-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.instruction-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n text-align: left;\n}\n\n.instruction-item:not(:last-child) {\n margin-bottom: 8px;\n}\n\n.instruction-number {\n background: var(--rebill-color-background-right);\n width: 22px;\n height: 22px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n text-align: center;\n line-height: 1;\n}\n\n.instruction-number rebill-typography {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n.instruction-text {\n flex: 1;\n}\n\n.copy-btn {\n display: flex;\n padding: var(--padding-base, 6px) var(--padding-xl, 10px);\n justify-content: center;\n align-items: center;\n gap: var(--padding-lg, 8px);\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { PAYMENT_METHOD_ENUM } from '../../../../components';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { sessionState } from '../../../../store/session.store';\nimport { copyToClipboard } from '../../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport { decodeQRData, generateQRCodeSVG, isBase64Image } from '../../../../utils/qr-code';\nimport { getCurrencyInstructions } from '../../../../utils/qr-instructions';\nimport { createCountdownTimer, formatTimeMMSSMax60 } from '../../../../utils/timer';\n\n@Component({\n tag: 'qr-code',\n styleUrl: 'qr-code.css',\n shadow: false,\n})\nexport class QrCode {\n @Prop() qrCodeData: string;\n @Prop() providerName: string;\n @Prop() expirationDate: string;\n @Prop() paymentMethod: PAYMENT_METHOD_ENUM;\n @Prop() code: string;\n\n @State() qrCodeSvg: string = '';\n @State() isImage: boolean = false;\n @State() timeLeft: number = 3600; // 1 hora (3600 segundos) por defecto\n @State() formattedTime: string = '59:60';\n @State() hasCopied: boolean = false;\n\n @Event() timeUpdate: EventEmitter<number>; // Emitir minutos restantes\n\n private countdownTimer: ReturnType<typeof createCountdownTimer> | null = null;\n\n async componentWillLoad() {\n await this.generateQRCode();\n this.startCountdownTimer();\n // Emitir el tiempo inicial (60 minutos)\n this.timeUpdate.emit(60);\n }\n\n async componentWillUpdate() {\n // Regenerate QR code if data changes\n await this.generateQRCode();\n }\n\n disconnectedCallback() {\n // Limpiar el timer cuando el componente se desmonte\n if (this.countdownTimer) {\n this.countdownTimer.stop();\n }\n }\n\n private async generateQRCode() {\n try {\n if (!this.qrCodeData) {\n this.qrCodeSvg = '';\n this.isImage = false;\n return;\n }\n\n // Check if the data is already an image\n if (isBase64Image(this.qrCodeData)) {\n this.isImage = true;\n this.qrCodeSvg = ''; // No QR code needed for images\n return;\n }\n\n // For non-image data, generate QR code\n this.isImage = false;\n const decodedData = decodeQRData(this.qrCodeData);\n const qrCodeSvg = await generateQRCodeSVG(decodedData);\n this.qrCodeSvg = qrCodeSvg;\n } catch (error) {\n console.error('Error generating QR code:', error);\n this.qrCodeSvg = '';\n this.isImage = false;\n }\n }\n\n private startCountdownTimer = () => {\n if (this.countdownTimer) {\n this.countdownTimer.stop();\n }\n this.countdownTimer = createCountdownTimer({\n duration: 3600,\n onTick: (timeLeft: number) => {\n this.timeLeft = timeLeft;\n this.formattedTime = formatTimeMMSSMax60(timeLeft);\n\n const minutesLeft = Math.ceil(timeLeft / 60);\n this.timeUpdate.emit(minutesLeft);\n },\n onComplete: () => {\n this.timeLeft = 0;\n this.formattedTime = '00:00';\n this.timeUpdate.emit(0);\n },\n });\n\n this.countdownTimer.start();\n };\n\n private getCurrentLanguageInstructions = (): string[] => {\n const currentLanguage = I18nService.getCurrentLanguage();\n const currency = sessionState.data.pricing.country;\n return getCurrencyInstructions(currency, currentLanguage);\n };\n\n render() {\n const instructionLines = this.getCurrentLanguageInstructions();\n\n return (\n <div class=\"qr-code\">\n {/* Header with countdown timer */}\n <div class=\"qr-code-header\">\n <div class=\"expiration-section\">\n <rebill-icon name=\"calendar-clock\" />\n <span class=\"expiration-text\">\n {I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })}\n </span>\n </div>\n </div>\n\n {/* QR code content */}\n <div class=\"qr-code-content\">\n <div class=\"qr-section\">\n <div class=\"qr-instruction\">\n <rebill-typography\n variant=\"subtitle-bold\"\n style={{ fontSize: '12px' }}\n color={COLORS_ENUM.GREY_300}\n >\n {I18nService.translate('qrCode.scanInstruction')}\n </rebill-typography>\n </div>\n <div class=\"qr-container\">\n {this.isImage ? (\n <img\n src={`data:image/png;base64,${this.qrCodeData}`}\n alt=\"QR Code\"\n class=\"qr-image\"\n />\n ) : (\n <div class=\"qr-image\" innerHTML={this.qrCodeSvg}></div>\n )}\n <div class=\"scanner-line\"></div>\n <div class=\"corner-bottom-left\"></div>\n <div class=\"corner-bottom-right\"></div>\n </div>\n {this.code && (\n <rebill-button\n class=\"copy-btn\"\n variant=\"secondary\"\n size=\"small\"\n onClick={async () => {\n if (!this.code) return;\n await copyToClipboard(this.code);\n this.hasCopied = true;\n setTimeout(() => (this.hasCopied = false), 2000);\n }}\n type=\"button\"\n >\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('qrCode.copyCode')}\n </rebill-typography>\n {this.hasCopied ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844\"\n stroke=\"#35B093\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n ) : (\n <rebill-icon name=\"copy\" size=\"16px\" />\n )}\n </rebill-button>\n )}\n </div>\n </div>\n\n {/* Collapsible instructions */}\n {instructionLines.length > 0 && (\n <collapsible-card\n variant=\"flat\"\n header={I18nService.translate('qrCode.instructionsLabel')}\n open={false}\n >\n <div>\n <ol class=\"instructions-list\">\n {instructionLines.map((line, index) => (\n <li key={index} class=\"instruction-item\">\n <div class=\"instruction-number\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n {index + 1}\n </rebill-typography>\n </div>\n <div class=\"instruction-text\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n {line}\n </rebill-typography>\n </div>\n </li>\n ))}\n </ol>\n </div>\n </collapsible-card>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-DoTMic8C.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/apm/qr-code/qr-code.css?tag=qr-code","src/components/checkout/apm/qr-code/qr-code.tsx"],"sourcesContent":[".qr-code {\n border: 1px solid var(--rebill-color-background-right);\n border-radius: 8px;\n background: var(--rebill-color-background);\n overflow: hidden;\n font-family: var(--rebill-font-family);\n margin-top: 24px;\n}\n\n.qr-code-header {\n padding: 16px 24px;\n background: var(--rebill-color-background-left);\n border-bottom: 1px solid var(--rebill-color-background-right);\n}\n\n.expiration-section {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n}\n\n.expiration-text {\n font-size: 12px;\n font-weight: 400;\n color: var(--rebill-color-text-secondary);\n}\n\n.qr-code-content {\n padding: 16px 0px 16px 0px;\n background: #ffffff !important;\n}\n\n.qr-section {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n background: #ffffff !important;\n}\n\n.qr-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px;\n background: var(--rebill-color-background);\n position: relative;\n border-radius: 8px;\n}\n\n.qr-container::before,\n.qr-container::after {\n content: '';\n position: absolute;\n width: 32px;\n height: 32px;\n border: 2px solid var(--rebill-color-green);\n}\n\n/* Top-left corner */\n.qr-container::before {\n top: -2px;\n left: -2px;\n border-right: none;\n border-bottom: none;\n border-top-left-radius: 8px;\n}\n\n/* Top-right corner */\n.qr-container::after {\n top: -2px;\n right: -2px;\n border-left: none;\n border-bottom: none;\n border-top-right-radius: 8px;\n}\n\n/* Bottom corners */\n.corner-bottom-left,\n.corner-bottom-right {\n position: absolute;\n width: 32px;\n height: 32px;\n border: 2px solid var(--rebill-color-green);\n}\n\n/* Bottom-left corner */\n.corner-bottom-left {\n bottom: -2px;\n left: -2px;\n border-right: none;\n border-top: none;\n border-bottom-left-radius: 8px;\n}\n\n/* Bottom-right corner */\n.corner-bottom-right {\n bottom: -2px;\n right: -2px;\n border-left: none;\n border-top: none;\n border-bottom-right-radius: 8px;\n}\n\n.qr-image {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 146px;\n height: 146px;\n background: #ffffff !important;\n border-radius: 4px;\n}\n\n.qr-image svg {\n width: 146px;\n height: 146px;\n border-radius: 4px;\n background: #ffffff !important;\n}\n\n.qr-image img {\n width: 146px;\n height: 146px;\n border-radius: 4px;\n background: #ffffff !important;\n}\n\n/* Scanner line animation */\n.scanner-line {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--rebill-color-green), transparent);\n box-shadow: 0 0 10px var(--rebill-color-green);\n animation: scanDown 2s ease-in-out;\n animation-fill-mode: forwards;\n z-index: 10;\n}\n\n@keyframes scanDown {\n 0% {\n top: 100%;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n top: 0;\n opacity: 0;\n }\n}\n\n.qr-instruction {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.instructions-section {\n background: var(--rebill-color-background-secondary);\n}\n\n.instructions-content {\n padding: 16px 16px 16px 16px;\n background: var(--rebill-color-background);\n}\n\n.instructions-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.instruction-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n text-align: left;\n}\n\n.instruction-item:not(:last-child) {\n margin-bottom: 8px;\n}\n\n.instruction-number {\n background: var(--rebill-color-background-right);\n width: 22px;\n height: 22px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n text-align: center;\n line-height: 1;\n}\n\n.instruction-number rebill-typography {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n.instruction-text {\n flex: 1;\n}\n\n.copy-btn {\n display: flex;\n padding: var(--padding-base, 6px) var(--padding-xl, 10px);\n justify-content: center;\n align-items: center;\n gap: var(--padding-lg, 8px);\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { PAYMENT_METHOD_ENUM } from '../../../../components';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { sessionState } from '../../../../store/session.store';\nimport { copyToClipboard } from '../../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport { decodeQRData, generateQRCodeSVG, isBase64Image } from '../../../../utils/qr-code';\nimport { getCurrencyInstructions } from '../../../../utils/qr-instructions';\nimport { createCountdownTimer, formatTimeMMSSMax60 } from '../../../../utils/timer';\n\n@Component({\n tag: 'qr-code',\n styleUrl: 'qr-code.css',\n shadow: false,\n})\nexport class QrCode {\n @Prop() qrCodeData: string;\n @Prop() providerName: string;\n @Prop() expirationDate: string;\n @Prop() paymentMethod: PAYMENT_METHOD_ENUM;\n @Prop() code: string;\n\n @State() qrCodeSvg: string = '';\n @State() isImage: boolean = false;\n @State() timeLeft: number = 3600; // 1 hora (3600 segundos) por defecto\n @State() formattedTime: string = '59:60';\n @State() hasCopied: boolean = false;\n\n @Event() timeUpdate: EventEmitter<number>; // Emitir minutos restantes\n\n private countdownTimer: ReturnType<typeof createCountdownTimer> | null = null;\n\n async componentWillLoad() {\n await this.generateQRCode();\n this.startCountdownTimer();\n // Emitir el tiempo inicial (60 minutos)\n this.timeUpdate.emit(60);\n }\n\n async componentWillUpdate() {\n // Regenerate QR code if data changes\n await this.generateQRCode();\n }\n\n disconnectedCallback() {\n // Limpiar el timer cuando el componente se desmonte\n if (this.countdownTimer) {\n this.countdownTimer.stop();\n }\n }\n\n private async generateQRCode() {\n try {\n if (!this.qrCodeData) {\n this.qrCodeSvg = '';\n this.isImage = false;\n return;\n }\n\n // Check if the data is already an image\n if (isBase64Image(this.qrCodeData)) {\n this.isImage = true;\n this.qrCodeSvg = ''; // No QR code needed for images\n return;\n }\n\n // For non-image data, generate QR code\n this.isImage = false;\n const decodedData = decodeQRData(this.qrCodeData);\n const qrCodeSvg = await generateQRCodeSVG(decodedData);\n this.qrCodeSvg = qrCodeSvg;\n } catch (error) {\n console.error('Error generating QR code:', error);\n this.qrCodeSvg = '';\n this.isImage = false;\n }\n }\n\n private startCountdownTimer = () => {\n if (this.countdownTimer) {\n this.countdownTimer.stop();\n }\n this.countdownTimer = createCountdownTimer({\n duration: 3600,\n onTick: (timeLeft: number) => {\n this.timeLeft = timeLeft;\n this.formattedTime = formatTimeMMSSMax60(timeLeft);\n\n const minutesLeft = Math.ceil(timeLeft / 60);\n this.timeUpdate.emit(minutesLeft);\n },\n onComplete: () => {\n this.timeLeft = 0;\n this.formattedTime = '00:00';\n this.timeUpdate.emit(0);\n },\n });\n\n this.countdownTimer.start();\n };\n\n private getCurrentLanguageInstructions = (): string[] => {\n const currentLanguage = I18nService.getCurrentLanguage();\n const currency = sessionState.data.pricing.country;\n return getCurrencyInstructions(currency, currentLanguage);\n };\n\n render() {\n const instructionLines = this.getCurrentLanguageInstructions();\n\n return (\n <div class=\"qr-code\">\n {/* Header with countdown timer */}\n <div class=\"qr-code-header\">\n <div class=\"expiration-section\">\n <rebill-icon name=\"calendar-clock\" />\n <span class=\"expiration-text\">\n {I18nService.translate('qrCode.expirationLabel', { time: this.formattedTime })}\n </span>\n </div>\n </div>\n\n {/* QR code content */}\n <div class=\"qr-code-content\">\n <div class=\"qr-section\">\n <div class=\"qr-instruction\">\n <rebill-typography\n variant=\"subtitle-bold\"\n style={{ fontSize: '12px' }}\n color={COLORS_ENUM.GREY_300}\n >\n {I18nService.translate('qrCode.scanInstruction')}\n </rebill-typography>\n </div>\n <div class=\"qr-container\">\n {this.isImage ? (\n <img\n src={`data:image/png;base64,${this.qrCodeData}`}\n alt=\"QR Code\"\n class=\"qr-image\"\n />\n ) : (\n <div class=\"qr-image\" innerHTML={this.qrCodeSvg}></div>\n )}\n <div class=\"scanner-line\"></div>\n <div class=\"corner-bottom-left\"></div>\n <div class=\"corner-bottom-right\"></div>\n </div>\n {this.code && (\n <rebill-button\n class=\"copy-btn\"\n variant=\"secondary\"\n size=\"small\"\n onClick={async () => {\n if (!this.code) return;\n await copyToClipboard(this.code);\n this.hasCopied = true;\n setTimeout(() => (this.hasCopied = false), 2000);\n }}\n type=\"button\"\n >\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate('qrCode.copyCode')}\n </rebill-typography>\n {this.hasCopied ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.62256 10.8855L8.24756 13.5418L14.3726 6.45844\"\n stroke=\"#35B093\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n ) : (\n <rebill-icon name=\"copy\" size=\"16px\" />\n )}\n </rebill-button>\n )}\n </div>\n </div>\n\n {/* Collapsible instructions */}\n {instructionLines.length > 0 && (\n <collapsible-card\n variant=\"flat\"\n header={I18nService.translate('qrCode.instructionsLabel')}\n open={false}\n >\n <div>\n <ol class=\"instructions-list\">\n {instructionLines.map((line, index) => (\n <li key={index} class=\"instruction-item\">\n <div class=\"instruction-number\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n {index + 1}\n </rebill-typography>\n </div>\n <div class=\"instruction-text\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREY_300}>\n {line}\n </rebill-typography>\n </div>\n </li>\n ))}\n </ol>\n </div>\n </collapsible-card>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { s as state, S as SessionStore, c as formatAmountWithoutCurrency, I as I
|
|
|
4
4
|
import { C as COLORS_ENUM } from './p-C5Pu-n-i.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-sOHrcM75.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-Np4T5oyp.js';
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-4NckTb-f.js';
|
|
8
8
|
import { d as defineCustomElement$1 } from './p-T8LQxh_O.js';
|
|
9
9
|
|
|
10
10
|
const discountCouponCss = ".summary-row{gap:12px}.coupon-chip{display:flex;align-items:center;background:var(--rebill-color-background);border:1px solid var(--rebill-color-border-primary);justify-content:space-between;border-radius:6px;padding:4px 8px;gap:8px;width:fit-content}.coupon-chip--readonly{cursor:default}.coupon-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;vertical-align:middle}.coupon-close{cursor:pointer}.coupon-content{display:flex;flex-direction:row;align-items:flex-start;gap:4px}";
|
|
@@ -208,6 +208,6 @@ function defineCustomElement() {
|
|
|
208
208
|
defineCustomElement();
|
|
209
209
|
|
|
210
210
|
export { DiscountCoupon as D, defineCustomElement as d };
|
|
211
|
-
//# sourceMappingURL=p-
|
|
211
|
+
//# sourceMappingURL=p-Dp6bUSN1.js.map
|
|
212
212
|
|
|
213
|
-
//# sourceMappingURL=p-
|
|
213
|
+
//# sourceMappingURL=p-Dp6bUSN1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-WGf68eDg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/discount-coupon/discount-coupon.css?tag=discount-coupon","src/components/checkout/discount-coupon/discount-coupon.tsx"],"sourcesContent":[".summary-row {\n gap: 12px;\n}\n.coupon-chip {\n display: flex;\n align-items: center;\n background: var(--rebill-color-background);\n border: 1px solid var(--rebill-color-border-primary);\n justify-content: space-between;\n border-radius: 6px;\n padding: 4px 8px;\n gap: 8px;\n width: fit-content;\n}\n\n.coupon-chip--readonly {\n cursor: default;\n}\n\n.coupon-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n}\n\n.coupon-close {\n cursor: pointer;\n}\n\n.coupon-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: 4px;\n}\n","import { Component, Element, Event, EventEmitter, h, JSX, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { formatAmountWithoutCurrency } from '../../../utils';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nenum ACTION_STATUS {\n EDITING = 'editing',\n APPLIED = 'applied',\n NOT_APPLIED = 'not_applied',\n}\n\n@Component({\n tag: 'discount-coupon',\n styleUrl: 'discount-coupon.css',\n shadow: false,\n})\nexport class DiscountCoupon {\n @Element() el: HTMLElement;\n @Prop() hideLabel: boolean = false;\n @Prop() displayMode: 'editable' | 'readonly' = 'editable';\n @Prop() readonlyCouponCode?: string;\n @Prop() readonlyDiscountAmount?: number;\n @Prop() readonlyCurrency?: string;\n @State() couponCode: string = '';\n @State() actionStatus: ACTION_STATUS = ACTION_STATUS.NOT_APPLIED;\n @State() isLoading: boolean = false;\n @State() isError: boolean = false;\n @State() currentLocale: string = sessionState.currentLocale;\n @Event() discountApplied: EventEmitter<boolean>;\n private inputRef: HTMLRebillInputTextElement;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n componentWillLoad() {\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n\n if (this.readonlyCouponCode) {\n return;\n }\n\n if (\n sessionState.data.pricing.discountCouponCode &&\n sessionState.data.pricing.discountAmount > 0\n ) {\n this.actionStatus = ACTION_STATUS.APPLIED;\n this.couponCode = sessionState.data.pricing.discountCouponCode;\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n componentDidUpdate() {\n if (this.readonlyCouponCode) {\n return;\n }\n\n if (this.actionStatus === ACTION_STATUS.EDITING && this.inputRef) {\n setTimeout(async () => {\n const inputElement = await this.inputRef.getInputElement();\n if (inputElement) {\n inputElement.focus();\n }\n }, 0);\n }\n }\n\n private async onApplyCoupon() {\n if (this.readonlyCouponCode) return;\n const sessionId = sessionState.data.sessionId;\n if (!sessionId) {\n return;\n }\n this.isLoading = true;\n try {\n const response = await api.discountCoupon.applyDiscountCoupon({\n couponCode: this.couponCode,\n quantity: 1,\n sessionId: sessionId,\n organizationId: sessionState.data.organization.id,\n });\n this.actionStatus = ACTION_STATUS.APPLIED;\n SessionStore.setDiscount({\n couponCode: this.couponCode,\n amount: response.amount,\n discountType: response.discountType,\n discountAmount: response.discountedAmount,\n discountedPercentage: response?.discountedPercentage || 0,\n discountDuration: response?.discountDuration || null,\n });\n this.discountApplied.emit(true);\n } catch (error) {\n this.actionStatus = ACTION_STATUS.EDITING;\n this.discountApplied.emit(false);\n this.isError = true;\n SessionStore.setDiscount(null);\n } finally {\n this.isLoading = false;\n }\n }\n\n private onCancelCoupon() {\n if (this.readonlyCouponCode) return;\n this.actionStatus = ACTION_STATUS.NOT_APPLIED;\n this.couponCode = '';\n this.isError = false;\n }\n\n private renderCouponChip({\n couponCode,\n discountAmount,\n currency,\n readonly = false,\n onClick,\n onRemove,\n }: {\n couponCode?: string;\n discountAmount?: number | null;\n currency?: string | null;\n readonly?: boolean;\n onClick?: () => void;\n onRemove?: () => void;\n }): JSX.Element | null {\n if (!couponCode) {\n return null;\n }\n\n const hasDiscountAmount = typeof discountAmount === 'number';\n\n return (\n <div class={`coupon-chip${readonly ? ' coupon-chip--readonly' : ''}`}>\n <rebill-icon name=\"tag-sale\" size=\"16px\" />\n <div class=\"coupon-content\" onClick={!readonly ? onClick : undefined}>\n <rebill-typography variant=\"overline\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {couponCode}\n </rebill-typography>\n {hasDiscountAmount && (\n <rebill-typography variant=\"overline\" color={COLORS_ENUM.GREEN}>\n -$\n {formatAmountWithoutCurrency(discountAmount as number, currency as any)}\n </rebill-typography>\n )}\n </div>\n {!readonly && onRemove && (\n <div class=\"coupon-close\" onClick={onRemove}>\n <rebill-icon name=\"x\" size=\"20px\" color={COLORS_ENUM.PRIMARY_DARK_TEXT} />\n </div>\n )}\n </div>\n );\n }\n\n private renderReadonlyView() {\n if (!this.readonlyCouponCode && this.readonlyDiscountAmount) {\n return null;\n }\n\n return this.renderCouponChip({\n couponCode: this.readonlyCouponCode,\n discountAmount: this.readonlyDiscountAmount ?? null,\n currency: this.readonlyCurrency ?? null,\n readonly: true,\n });\n }\n\n render() {\n if (this.readonlyCouponCode) {\n return this.renderReadonlyView();\n }\n\n return (\n <div>\n <div\n class=\"summary-row\"\n style={{\n alignItems: this.actionStatus === ACTION_STATUS.EDITING ? 'flex-start' : 'center',\n display: 'flex',\n }}\n >\n {!this.hideLabel && (\n <rebill-typography\n variant=\"body2\"\n style={{ marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '7px' : '0px' }}\n >\n {I18nService.translate('discountCoupons.discount')}\n </rebill-typography>\n )}\n {this.actionStatus === ACTION_STATUS.NOT_APPLIED && (\n <rebill-button\n variant=\"filled\"\n size=\"small\"\n theme=\"primary-dark\"\n onClick={() => (this.actionStatus = ACTION_STATUS.EDITING)}\n >\n {I18nService.translate('discountCoupons.addDiscount')}\n </rebill-button>\n )}\n {this.actionStatus === ACTION_STATUS.EDITING && (\n <div class=\"summary-row\" style={{ alignItems: 'flex-start', display: 'flex' }}>\n <rebill-input-text\n ref={el => (this.inputRef = el)}\n id=\"discountCoupon\"\n value={this.couponCode}\n placeholder={I18nService.translate('discountCoupons.addDiscount')}\n disabled={this.isLoading}\n error={this.isError ? I18nService.translate('discountCoupons.error') : ''}\n clearable={true}\n uppercase={true}\n onInput={e => {\n e.stopPropagation();\n if (e.detail && e.detail.value !== undefined) {\n this.couponCode = e.detail.value;\n }\n }}\n onBlur={() => {\n if (!this.couponCode.trim()) {\n this.onCancelCoupon();\n }\n }}\n />\n <rebill-button\n variant=\"filled\"\n theme=\"primary-dark\"\n size=\"small\"\n loading={this.isLoading}\n disabled={this.isLoading || !this.couponCode.trim()}\n onClick={() => this.onApplyCoupon()}\n style={{ marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '3px' : '0px' }}\n >\n {I18nService.translate('discountCoupons.apply')}\n </rebill-button>\n </div>\n )}\n {this.actionStatus === ACTION_STATUS.APPLIED &&\n this.renderCouponChip({\n couponCode: sessionState.data.pricing.discountCouponCode,\n discountAmount: sessionState.data.pricing.discountAmount,\n currency: sessionState.data.pricing.currency,\n onClick: () => (this.actionStatus = ACTION_STATUS.EDITING),\n onRemove: () => {\n this.actionStatus = ACTION_STATUS.NOT_APPLIED;\n this.couponCode = '';\n SessionStore.setDiscount(null);\n this.discountApplied.emit(false);\n },\n })}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-Dp6bUSN1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/discount-coupon/discount-coupon.css?tag=discount-coupon","src/components/checkout/discount-coupon/discount-coupon.tsx"],"sourcesContent":[".summary-row {\n gap: 12px;\n}\n.coupon-chip {\n display: flex;\n align-items: center;\n background: var(--rebill-color-background);\n border: 1px solid var(--rebill-color-border-primary);\n justify-content: space-between;\n border-radius: 6px;\n padding: 4px 8px;\n gap: 8px;\n width: fit-content;\n}\n\n.coupon-chip--readonly {\n cursor: default;\n}\n\n.coupon-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n}\n\n.coupon-close {\n cursor: pointer;\n}\n\n.coupon-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: 4px;\n}\n","import { Component, Element, Event, EventEmitter, h, JSX, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { formatAmountWithoutCurrency } from '../../../utils';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nenum ACTION_STATUS {\n EDITING = 'editing',\n APPLIED = 'applied',\n NOT_APPLIED = 'not_applied',\n}\n\n@Component({\n tag: 'discount-coupon',\n styleUrl: 'discount-coupon.css',\n shadow: false,\n})\nexport class DiscountCoupon {\n @Element() el: HTMLElement;\n @Prop() hideLabel: boolean = false;\n @Prop() displayMode: 'editable' | 'readonly' = 'editable';\n @Prop() readonlyCouponCode?: string;\n @Prop() readonlyDiscountAmount?: number;\n @Prop() readonlyCurrency?: string;\n @State() couponCode: string = '';\n @State() actionStatus: ACTION_STATUS = ACTION_STATUS.NOT_APPLIED;\n @State() isLoading: boolean = false;\n @State() isError: boolean = false;\n @State() currentLocale: string = sessionState.currentLocale;\n @Event() discountApplied: EventEmitter<boolean>;\n private inputRef: HTMLRebillInputTextElement;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n componentWillLoad() {\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n\n if (this.readonlyCouponCode) {\n return;\n }\n\n if (\n sessionState.data.pricing.discountCouponCode &&\n sessionState.data.pricing.discountAmount > 0\n ) {\n this.actionStatus = ACTION_STATUS.APPLIED;\n this.couponCode = sessionState.data.pricing.discountCouponCode;\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n componentDidUpdate() {\n if (this.readonlyCouponCode) {\n return;\n }\n\n if (this.actionStatus === ACTION_STATUS.EDITING && this.inputRef) {\n setTimeout(async () => {\n const inputElement = await this.inputRef.getInputElement();\n if (inputElement) {\n inputElement.focus();\n }\n }, 0);\n }\n }\n\n private async onApplyCoupon() {\n if (this.readonlyCouponCode) return;\n const sessionId = sessionState.data.sessionId;\n if (!sessionId) {\n return;\n }\n this.isLoading = true;\n try {\n const response = await api.discountCoupon.applyDiscountCoupon({\n couponCode: this.couponCode,\n quantity: 1,\n sessionId: sessionId,\n organizationId: sessionState.data.organization.id,\n });\n this.actionStatus = ACTION_STATUS.APPLIED;\n SessionStore.setDiscount({\n couponCode: this.couponCode,\n amount: response.amount,\n discountType: response.discountType,\n discountAmount: response.discountedAmount,\n discountedPercentage: response?.discountedPercentage || 0,\n discountDuration: response?.discountDuration || null,\n });\n this.discountApplied.emit(true);\n } catch (error) {\n this.actionStatus = ACTION_STATUS.EDITING;\n this.discountApplied.emit(false);\n this.isError = true;\n SessionStore.setDiscount(null);\n } finally {\n this.isLoading = false;\n }\n }\n\n private onCancelCoupon() {\n if (this.readonlyCouponCode) return;\n this.actionStatus = ACTION_STATUS.NOT_APPLIED;\n this.couponCode = '';\n this.isError = false;\n }\n\n private renderCouponChip({\n couponCode,\n discountAmount,\n currency,\n readonly = false,\n onClick,\n onRemove,\n }: {\n couponCode?: string;\n discountAmount?: number | null;\n currency?: string | null;\n readonly?: boolean;\n onClick?: () => void;\n onRemove?: () => void;\n }): JSX.Element | null {\n if (!couponCode) {\n return null;\n }\n\n const hasDiscountAmount = typeof discountAmount === 'number';\n\n return (\n <div class={`coupon-chip${readonly ? ' coupon-chip--readonly' : ''}`}>\n <rebill-icon name=\"tag-sale\" size=\"16px\" />\n <div class=\"coupon-content\" onClick={!readonly ? onClick : undefined}>\n <rebill-typography variant=\"overline\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {couponCode}\n </rebill-typography>\n {hasDiscountAmount && (\n <rebill-typography variant=\"overline\" color={COLORS_ENUM.GREEN}>\n -$\n {formatAmountWithoutCurrency(discountAmount as number, currency as any)}\n </rebill-typography>\n )}\n </div>\n {!readonly && onRemove && (\n <div class=\"coupon-close\" onClick={onRemove}>\n <rebill-icon name=\"x\" size=\"20px\" color={COLORS_ENUM.PRIMARY_DARK_TEXT} />\n </div>\n )}\n </div>\n );\n }\n\n private renderReadonlyView() {\n if (!this.readonlyCouponCode && this.readonlyDiscountAmount) {\n return null;\n }\n\n return this.renderCouponChip({\n couponCode: this.readonlyCouponCode,\n discountAmount: this.readonlyDiscountAmount ?? null,\n currency: this.readonlyCurrency ?? null,\n readonly: true,\n });\n }\n\n render() {\n if (this.readonlyCouponCode) {\n return this.renderReadonlyView();\n }\n\n return (\n <div>\n <div\n class=\"summary-row\"\n style={{\n alignItems: this.actionStatus === ACTION_STATUS.EDITING ? 'flex-start' : 'center',\n display: 'flex',\n }}\n >\n {!this.hideLabel && (\n <rebill-typography\n variant=\"body2\"\n style={{ marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '7px' : '0px' }}\n >\n {I18nService.translate('discountCoupons.discount')}\n </rebill-typography>\n )}\n {this.actionStatus === ACTION_STATUS.NOT_APPLIED && (\n <rebill-button\n variant=\"filled\"\n size=\"small\"\n theme=\"primary-dark\"\n onClick={() => (this.actionStatus = ACTION_STATUS.EDITING)}\n >\n {I18nService.translate('discountCoupons.addDiscount')}\n </rebill-button>\n )}\n {this.actionStatus === ACTION_STATUS.EDITING && (\n <div class=\"summary-row\" style={{ alignItems: 'flex-start', display: 'flex' }}>\n <rebill-input-text\n ref={el => (this.inputRef = el)}\n id=\"discountCoupon\"\n value={this.couponCode}\n placeholder={I18nService.translate('discountCoupons.addDiscount')}\n disabled={this.isLoading}\n error={this.isError ? I18nService.translate('discountCoupons.error') : ''}\n clearable={true}\n uppercase={true}\n onInput={e => {\n e.stopPropagation();\n if (e.detail && e.detail.value !== undefined) {\n this.couponCode = e.detail.value;\n }\n }}\n onBlur={() => {\n if (!this.couponCode.trim()) {\n this.onCancelCoupon();\n }\n }}\n />\n <rebill-button\n variant=\"filled\"\n theme=\"primary-dark\"\n size=\"small\"\n loading={this.isLoading}\n disabled={this.isLoading || !this.couponCode.trim()}\n onClick={() => this.onApplyCoupon()}\n style={{ marginTop: this.actionStatus === ACTION_STATUS.EDITING ? '3px' : '0px' }}\n >\n {I18nService.translate('discountCoupons.apply')}\n </rebill-button>\n </div>\n )}\n {this.actionStatus === ACTION_STATUS.APPLIED &&\n this.renderCouponChip({\n couponCode: sessionState.data.pricing.discountCouponCode,\n discountAmount: sessionState.data.pricing.discountAmount,\n currency: sessionState.data.pricing.currency,\n onClick: () => (this.actionStatus = ACTION_STATUS.EDITING),\n onRemove: () => {\n this.actionStatus = ACTION_STATUS.NOT_APPLIED;\n this.couponCode = '';\n SessionStore.setDiscount(null);\n this.discountApplied.emit(false);\n },\n })}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -107,14 +107,14 @@ const InputOtp = /*@__PURE__*/ proxyCustomElement(class InputOtp extends H {
|
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
render() {
|
|
110
|
-
return (h("div", { key: '
|
|
110
|
+
return (h("div", { key: '65079854b05784b0266b1876aeb1edff4269c632', class: "otp-container" }, h("div", { key: '1705207ae6c34d53f8a3c3da7394651209097225', class: "email-icon" }, h("rebill-icon", { key: '26f6b3b59b95208e475035408498ffe453b37a4a', name: "invite" })), h("div", { key: 'a250c8a27ab6fda719919ce80dcb0ca335506465', class: "otp-input-container", onClick: this.handleFieldClick }, h("div", { key: 'e26733332d9da3a0d44ba779e0f1915a94597aa4', class: "otp-fields" }, [0, 1, 2, 3, 4, 5].map(index => (h("div", { key: index, style: { display: 'flex', alignItems: 'center' } }, h("div", { class: `otp-field ${this.error ? 'error' : ''}` }, h("input", { type: "text", maxlength: "1", placeholder: this.placeholder, value: this.otpValue[index] || '', onInput: e => this.handleInput(e, index), onClick: () => this.handleInputClick(), onKeyDown: e => this.handleKeyDown(e, index), onPaste: e => this.handlePaste(e), onFocus: e => {
|
|
111
111
|
this.el
|
|
112
112
|
?.querySelectorAll('.otp-field')
|
|
113
113
|
.forEach(field => field.classList.remove('active'));
|
|
114
114
|
e.target.parentElement?.classList.add('active');
|
|
115
115
|
}, onBlur: e => {
|
|
116
116
|
e.target.parentElement?.classList.remove('active');
|
|
117
|
-
} })), index === 2 && h("div", { class: "otp-separator" }, "-")))))), this.error && h("div", { key: '
|
|
117
|
+
} })), index === 2 && h("div", { class: "otp-separator" }, "-")))))), this.error && h("div", { key: '9d97735d8ccc557556c6a0c570173b22f6625660', class: "otp-error" }, this.error)));
|
|
118
118
|
}
|
|
119
119
|
static get style() { return inputOtpCss; }
|
|
120
120
|
}, [256, "input-otp", {
|
|
@@ -145,6 +145,6 @@ function defineCustomElement() {
|
|
|
145
145
|
defineCustomElement();
|
|
146
146
|
|
|
147
147
|
export { InputOtp as I, defineCustomElement as d };
|
|
148
|
-
//# sourceMappingURL=p-
|
|
148
|
+
//# sourceMappingURL=p-Ds466vGv.js.map
|
|
149
149
|
|
|
150
|
-
//# sourceMappingURL=p-
|
|
150
|
+
//# sourceMappingURL=p-Ds466vGv.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-B0FDvLRO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/inputs/input-otp/input-otp.css?tag=input-otp","src/components/shared/inputs/input-otp/input-otp.tsx"],"sourcesContent":[".otp-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n width: 100%;\n margin: 0 auto;\n}\n\n.otp-input-container {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-top: 8px;\n}\n\n.otp-fields {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.otp-field {\n width: 36px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n background: white;\n position: relative;\n}\n\n.otp-field.active {\n border-color: var(--rebill-color-primary-hover);\n transform: scale(1.02);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.otp-field input {\n width: 100%;\n height: 100%;\n border: none;\n text-align: center;\n font-size: 12px;\n color: var(--rebill-color-text-primary);\n background: transparent;\n outline: none;\n transition: all 0.3s ease;\n caret-color: transparent;\n}\n\n.otp-field input {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.otp-field input::placeholder {\n color: var(--rebill-color-text-secondary);\n transition:\n opacity 0.3s ease,\n color 0.3s ease;\n}\n\n.otp-field input:focus::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.otp-field {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.otp-separator {\n font-size: 18px;\n font-weight: 500;\n color: #6b7280;\n margin: 4px;\n user-select: none;\n line-height: 1;\n display: flex;\n align-items: center;\n}\n\n.otp-error {\n color: var(--rebill-color-error);\n font-size: 14px;\n font-weight: 400;\n}\n\n.otp-field.error {\n border-color: var(--rebill-color-error);\n border-width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'input-otp',\n styleUrl: 'input-otp.css',\n shadow: false,\n})\nexport class InputOtp {\n @Element() el: HTMLElement;\n @Prop() error: string = '';\n @Prop() otp: string = '';\n @Prop() clearable: boolean = false;\n @Prop() placeholder: string = '';\n @Event() otpChange: EventEmitter<string>;\n @State() otpValue: string = '';\n\n componentWillLoad() {\n this.otpValue = this.otp;\n }\n\n componentWillUpdate() {\n if (this.otp !== this.otpValue) {\n this.otpValue = this.otp;\n }\n }\n\n private handleOtpChange(value: string) {\n this.otpValue = value;\n this.otpChange.emit(value);\n }\n\n private findFirstEmptyIndex(): number {\n for (let i = 0; i < 6; i++) {\n if (!this.otpValue[i]) {\n return i;\n }\n }\n return 5;\n }\n\n private focusField(index: number) {\n const fields = this.el?.querySelectorAll('.otp-field input');\n if (fields && fields[index]) {\n (fields[index] as HTMLInputElement).focus();\n }\n }\n\n private handleFieldClick = () => {\n const firstEmptyIndex = this.findFirstEmptyIndex();\n this.focusField(firstEmptyIndex);\n };\n\n private handleInputClick = () => {\n this.handleFieldClick();\n };\n\n private handleKeyDown = (e: KeyboardEvent, index: number) => {\n if (e.key === 'Backspace') {\n const target = e.target as HTMLInputElement;\n // Si el campo actual está vacío y no es el primer campo, ir al anterior\n if (!target.value && index > 0) {\n e.preventDefault();\n const newValue = this.otpValue.split('');\n newValue[index - 1] = '';\n this.handleOtpChange(newValue.join(''));\n setTimeout(() => {\n this.focusField(index - 1);\n }, 0);\n } else if (target.value) {\n const newValue = this.otpValue.split('');\n newValue[index] = '';\n this.handleOtpChange(newValue.join(''));\n }\n }\n };\n\n private handleInput = (e: Event, index: number) => {\n const target = e.target as HTMLInputElement;\n const value = target.value;\n\n if (!/^\\d*$/.test(value)) {\n target.value = '';\n return;\n }\n\n const newValue = this.otpValue.split('');\n newValue[index] = value;\n this.handleOtpChange(newValue.join(''));\n\n if (value && index < 5) {\n setTimeout(() => {\n this.focusField(index + 1);\n }, 0);\n }\n };\n\n private handlePaste = (e: ClipboardEvent) => {\n e.preventDefault();\n const pastedData = e.clipboardData?.getData('text/plain') || '';\n\n const numbersOnly = pastedData.replace(/\\D/g, '');\n\n if (numbersOnly.length >= 6) {\n const otpCode = numbersOnly.substring(0, 6);\n this.handleOtpChange(otpCode);\n\n this.focusField(5);\n } else if (numbersOnly.length > 0) {\n const newValue = this.otpValue.split('');\n for (let i = 0; i < Math.min(numbersOnly.length, 6); i++) {\n newValue[i] = numbersOnly[i];\n }\n this.handleOtpChange(newValue.join(''));\n\n const nextIndex = Math.min(numbersOnly.length, 5);\n this.focusField(nextIndex);\n }\n };\n\n render() {\n return (\n <div class=\"otp-container\">\n {/* Icono de sobre azul */}\n <div class=\"email-icon\">\n <rebill-icon name=\"invite\" />\n </div>\n\n {/* Campos OTP */}\n <div class=\"otp-input-container\" onClick={this.handleFieldClick}>\n <div class=\"otp-fields\">\n {[0, 1, 2, 3, 4, 5].map(index => (\n <div key={index} style={{ display: 'flex', alignItems: 'center' }}>\n <div class={`otp-field ${this.error ? 'error' : ''}`}>\n <input\n type=\"text\"\n maxlength=\"1\"\n placeholder={this.placeholder}\n value={this.otpValue[index] || ''}\n onInput={e => this.handleInput(e, index)}\n onClick={() => this.handleInputClick()}\n onKeyDown={e => this.handleKeyDown(e, index)}\n onPaste={e => this.handlePaste(e)}\n onFocus={e => {\n this.el\n ?.querySelectorAll('.otp-field')\n .forEach(field => field.classList.remove('active'));\n (e.target as HTMLElement).parentElement?.classList.add('active');\n }}\n onBlur={e => {\n (e.target as HTMLElement).parentElement?.classList.remove('active');\n }}\n />\n </div>\n {index === 2 && <div class=\"otp-separator\">-</div>}\n </div>\n ))}\n </div>\n </div>\n\n {/* Mensaje de error */}\n {this.error && <div class=\"otp-error\">{this.error}</div>}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-Ds466vGv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/inputs/input-otp/input-otp.css?tag=input-otp","src/components/shared/inputs/input-otp/input-otp.tsx"],"sourcesContent":[".otp-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n width: 100%;\n margin: 0 auto;\n}\n\n.otp-input-container {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-top: 8px;\n}\n\n.otp-fields {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.otp-field {\n width: 36px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n background: white;\n position: relative;\n}\n\n.otp-field.active {\n border-color: var(--rebill-color-primary-hover);\n transform: scale(1.02);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.otp-field input {\n width: 100%;\n height: 100%;\n border: none;\n text-align: center;\n font-size: 12px;\n color: var(--rebill-color-text-primary);\n background: transparent;\n outline: none;\n transition: all 0.3s ease;\n caret-color: transparent;\n}\n\n.otp-field input {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.otp-field input::placeholder {\n color: var(--rebill-color-text-secondary);\n transition:\n opacity 0.3s ease,\n color 0.3s ease;\n}\n\n.otp-field input:focus::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.otp-field {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.otp-separator {\n font-size: 18px;\n font-weight: 500;\n color: #6b7280;\n margin: 4px;\n user-select: none;\n line-height: 1;\n display: flex;\n align-items: center;\n}\n\n.otp-error {\n color: var(--rebill-color-error);\n font-size: 14px;\n font-weight: 400;\n}\n\n.otp-field.error {\n border-color: var(--rebill-color-error);\n border-width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'input-otp',\n styleUrl: 'input-otp.css',\n shadow: false,\n})\nexport class InputOtp {\n @Element() el: HTMLElement;\n @Prop() error: string = '';\n @Prop() otp: string = '';\n @Prop() clearable: boolean = false;\n @Prop() placeholder: string = '';\n @Event() otpChange: EventEmitter<string>;\n @State() otpValue: string = '';\n\n componentWillLoad() {\n this.otpValue = this.otp;\n }\n\n componentWillUpdate() {\n if (this.otp !== this.otpValue) {\n this.otpValue = this.otp;\n }\n }\n\n private handleOtpChange(value: string) {\n this.otpValue = value;\n this.otpChange.emit(value);\n }\n\n private findFirstEmptyIndex(): number {\n for (let i = 0; i < 6; i++) {\n if (!this.otpValue[i]) {\n return i;\n }\n }\n return 5;\n }\n\n private focusField(index: number) {\n const fields = this.el?.querySelectorAll('.otp-field input');\n if (fields && fields[index]) {\n (fields[index] as HTMLInputElement).focus();\n }\n }\n\n private handleFieldClick = () => {\n const firstEmptyIndex = this.findFirstEmptyIndex();\n this.focusField(firstEmptyIndex);\n };\n\n private handleInputClick = () => {\n this.handleFieldClick();\n };\n\n private handleKeyDown = (e: KeyboardEvent, index: number) => {\n if (e.key === 'Backspace') {\n const target = e.target as HTMLInputElement;\n // Si el campo actual está vacío y no es el primer campo, ir al anterior\n if (!target.value && index > 0) {\n e.preventDefault();\n const newValue = this.otpValue.split('');\n newValue[index - 1] = '';\n this.handleOtpChange(newValue.join(''));\n setTimeout(() => {\n this.focusField(index - 1);\n }, 0);\n } else if (target.value) {\n const newValue = this.otpValue.split('');\n newValue[index] = '';\n this.handleOtpChange(newValue.join(''));\n }\n }\n };\n\n private handleInput = (e: Event, index: number) => {\n const target = e.target as HTMLInputElement;\n const value = target.value;\n\n if (!/^\\d*$/.test(value)) {\n target.value = '';\n return;\n }\n\n const newValue = this.otpValue.split('');\n newValue[index] = value;\n this.handleOtpChange(newValue.join(''));\n\n if (value && index < 5) {\n setTimeout(() => {\n this.focusField(index + 1);\n }, 0);\n }\n };\n\n private handlePaste = (e: ClipboardEvent) => {\n e.preventDefault();\n const pastedData = e.clipboardData?.getData('text/plain') || '';\n\n const numbersOnly = pastedData.replace(/\\D/g, '');\n\n if (numbersOnly.length >= 6) {\n const otpCode = numbersOnly.substring(0, 6);\n this.handleOtpChange(otpCode);\n\n this.focusField(5);\n } else if (numbersOnly.length > 0) {\n const newValue = this.otpValue.split('');\n for (let i = 0; i < Math.min(numbersOnly.length, 6); i++) {\n newValue[i] = numbersOnly[i];\n }\n this.handleOtpChange(newValue.join(''));\n\n const nextIndex = Math.min(numbersOnly.length, 5);\n this.focusField(nextIndex);\n }\n };\n\n render() {\n return (\n <div class=\"otp-container\">\n {/* Icono de sobre azul */}\n <div class=\"email-icon\">\n <rebill-icon name=\"invite\" />\n </div>\n\n {/* Campos OTP */}\n <div class=\"otp-input-container\" onClick={this.handleFieldClick}>\n <div class=\"otp-fields\">\n {[0, 1, 2, 3, 4, 5].map(index => (\n <div key={index} style={{ display: 'flex', alignItems: 'center' }}>\n <div class={`otp-field ${this.error ? 'error' : ''}`}>\n <input\n type=\"text\"\n maxlength=\"1\"\n placeholder={this.placeholder}\n value={this.otpValue[index] || ''}\n onInput={e => this.handleInput(e, index)}\n onClick={() => this.handleInputClick()}\n onKeyDown={e => this.handleKeyDown(e, index)}\n onPaste={e => this.handlePaste(e)}\n onFocus={e => {\n this.el\n ?.querySelectorAll('.otp-field')\n .forEach(field => field.classList.remove('active'));\n (e.target as HTMLElement).parentElement?.classList.add('active');\n }}\n onBlur={e => {\n (e.target as HTMLElement).parentElement?.classList.remove('active');\n }}\n />\n </div>\n {index === 2 && <div class=\"otp-separator\">-</div>}\n </div>\n ))}\n </div>\n </div>\n\n {/* Mensaje de error */}\n {this.error && <div class=\"otp-error\">{this.error}</div>}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -8,10 +8,10 @@ import { P as PDFGenerator } from './p-D13RM4_j.js';
|
|
|
8
8
|
import { d as defineCustomElement$8 } from './p-CLMKPBrB.js';
|
|
9
9
|
import { d as defineCustomElement$7 } from './p-sOHrcM75.js';
|
|
10
10
|
import { d as defineCustomElement$6 } from './p-N5kDm5Y3.js';
|
|
11
|
-
import { d as defineCustomElement$5 } from './p-
|
|
12
|
-
import { d as defineCustomElement$4 } from './p-
|
|
11
|
+
import { d as defineCustomElement$5 } from './p-CNgxCj8J.js';
|
|
12
|
+
import { d as defineCustomElement$4 } from './p-iueBw_y3.js';
|
|
13
13
|
import { d as defineCustomElement$3 } from './p-Np4T5oyp.js';
|
|
14
|
-
import { d as defineCustomElement$2 } from './p-
|
|
14
|
+
import { d as defineCustomElement$2 } from './p-C9-xmJLv.js';
|
|
15
15
|
import { d as defineCustomElement$1 } from './p-T8LQxh_O.js';
|
|
16
16
|
import { f as formatDateTime } from './p-CYpzJT4H.js';
|
|
17
17
|
|
|
@@ -214,9 +214,9 @@ const RenewalSuccessPage = /*@__PURE__*/ proxyCustomElement(class RenewalSuccess
|
|
|
214
214
|
return cardBrand && cardLastFour ? `${formattedBrand} - ${cardLastFour}` : formattedBrand;
|
|
215
215
|
};
|
|
216
216
|
render() {
|
|
217
|
-
return (h("rebill-checkout-single-column", { key: '
|
|
217
|
+
return (h("rebill-checkout-single-column", { key: 'a239b828fc27cf3abf25ef3a70c8ed70a7c6347e' }, h("div", { key: 'a6b98f63c3429afe4156f934d27082747ad421b7', class: "renewal-success-page__success-content" }, h("rebill-typography", { key: 'a5d9a81697e66e108fe474973eaf7e662dd3a9a8', variant: "h3", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.successTitle')), h("div", { key: 'aa1d2c45651941e83ab6a2ab153b913e6fd5aa56', class: "renewal-success-page__success-icon" }, h("svg", { key: '3a886e1c8c0aa11a4ac034d202bd82faecf932ea', width: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96', height: isBreakpointBelow(this.breakpoint, BREAKPOINT_ENUM.DESKTOP) ? '64' : '96', viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '37434d1a3f1275e185e4d5a32321bad0b0c0e103', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z", fill: "#35B093" }))), h("div", { key: '1cda6d758629c4829697814f226d78f72cdf739a', class: "renewal-success-page__info-card" }, h("div", { key: '7edc2f9bdad58f80f838ab9ec96ca3afc08c72af', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: 'b7a6e172ac1776bad3835b50419aaafb33e21348', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentMethod')), h("div", { key: 'bf04191d72701a6ff88c74846d86272283c5d43f', class: "renewal-success-page__card-value" }, h("div", { key: '1272075a876cf9c5db13612869e19780e7f6dcc7', class: "renewal-success-page__payment-method-display" }, this.typePaymentMethod === PAYMENT_METHOD_ENUM.CARD && (h(h.Fragment, null, h("rebill-card-icon", { key: 'b79718d298a67ed9d1a6e79c056ab69af5ad85ce', "card-brand": renewalState.data?.cardInformation?.brand || '' }), h("rebill-typography", { key: 'f74ca5245468cc02754234073219ca7d8fab9d90', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, this.textPaymentMethodCard()))), this.typePaymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (h("div", { key: '5e3c90bca337d977258b893085d535f41b8d6a64', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("div", { key: 'c1dd9a6dc407156084b4024642d06679cccf950d', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, this.getPaymentMethodConfig(PAYMENT_METHOD_ENUM.BANK_TRANSFER).icons.map(iconName => {
|
|
218
218
|
return h("rebill-icon", { name: iconName, size: "24px" });
|
|
219
|
-
})), h("rebill-typography", { key: '
|
|
219
|
+
})), h("rebill-typography", { key: '753c7d6154d22b5a531de138ef9df66bd50d58fc', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('paymentMethods.bank_transfer'))))))), h("div", { key: 'c22bd3cb7c434a0a96eb538700ec6d9e84765795', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: 'd9e9a384c86ebca08bf38525316ac1b2dfc7422d', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentDate')), h("rebill-typography", { key: '0b59d5dc390de214158840fb709af78525cfefea', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, formatDateTime(this.paymentDate || this.getPaymentDate()) || '')), h("div", { key: '50786fa0d89399297fb1acf844b65104cebae06e', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: '7d598f5fefe4dacee1de32d3d78cd7ea9637f199', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentEmail')), h("rebill-typography", { key: 'b6dde819b00efb0da2da325fb173341a3193c6c5', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, renewalState.data.subscription.customerEmail)), h("div", { key: '3c46859ffa572d51f74493ac2c5d6049fba0aa24', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: '421fcdb0c4a36d336bf2b6ef95a38386ca14bc5d', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.paymentReference')), h("rebill-typography", { key: '2c27b324746d67473d5f772b1686de99e2b6e5b9', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT, class: "renewal-success-page__reference-number" }, this.referenceNumber || ''))), h("div", { key: 'b8f9d223b0b8fc534a6d3d9f17e0f2e8f20a3597', class: "renewal-success-page__info-card" }, h("rebill-typography", { key: '253f52f1f3e28f28562c8e549b4e0af24b55ff2b', variant: "subtitle-bold", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.purchaseDetails')), h("div", { key: 'c517721f13f50084f87c3b9f25cb3096cdd1e96a', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: '1352deb43d6cfc98b573fd3ed6a51dede43938b1', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseDetail')), h("rebill-typography", { key: '85e18a0bb1f1f7051ddb7586ee38fe19507cc3d7', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, renewalState.data.subscription.name[0]?.text || 'Subscription')), h("div", { key: '666e7b196ddfccf2562adc1918a7aa425b40e36c', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: 'f12b5e447030ab9257bbad458fd981bf32f7071a', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseSubtotal')), h("rebill-typography", { key: 'bd3b76f6ad5fb9b537b47c0c97680711c2070410', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, formatAmount(renewalState.data.subscription.subTotalAmount, renewalState.data.price.currency))), this.hasDiscount() && (h("div", { key: 'e82bb80c805d68bb1ac54f351975a900fb982d50', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: 'a961d4d1a5620633ab5ca4c60c53d2706fba3d94', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('summary.discount')), h("rebill-typography", { key: 'f396c19717a68069ea000abf49fd1dcf05d34b60', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, formatAmount(this.getDiscountAmountValue(), renewalState.data.price.currency)))), h("div", { key: '3e2c645f7ec6b1b293db8d1984d7628279734d81', class: "renewal-success-page__card-row" }, h("rebill-typography", { key: '7629e972d8fda078945aa253d5a8086ab87570f3', variant: "body2", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.purchaseMontoTotal')), h("div", { key: 'e931d961c8563f38beba85ccf56bc5dff89f08e3', class: "renewal-success-page__total-amount-container" }, h("rebill-typography", { key: '7949389721ec12258633b839a3e1b8730d199776', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, formatAmount(renewalState.data.price.amount, renewalState.data.price.currency)))), h("div", { key: 'b1f798fefbf45fd5d35bae1f73e20c15e3678249', class: "renewal-success-page__card-divider" }), h("div", { key: '6833d7028be88cef990c46a1a55cea2d4b8bd840', class: "renewal-success-page__download-container" }, h("svg", { key: 'fa4cdf941d84391036358e49f099d70425c5b133', class: "download-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '30595c88a5ca2ba310be5bb1d14a8842fc0e8b42', d: "M13.498 9.83333V12.1667C13.498 12.903 12.9011 13.5 12.1647 13.5H3.83138C3.095 13.5 2.49805 12.903 2.49805 12.1667V9.83333M7.99804 10V2.5M7.99804 10L5.66471 7.66667M7.99804 10L10.3314 7.66667", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("rebill-button", { key: '3f2c1f7fc634652346c1b5ae17d59951b17b5e20', type: "button", variant: "download", size: "small", onClick: this.handleDownloadReceipt }, h("rebill-typography", { key: 'b0739a392b85c02d5b765beaa57df27fbed686d2', variant: "overline", color: COLORS_ENUM.PRIMARY_DARK_TEXT }, I18nService.translate('processing.download')))), h("div", { key: 'c60a0eec0d7c64e131877827a2bc1c78f692e20a', class: "renewal-success-page__contact-info" }, h("rebill-typography", { key: '875970bb426700e60d228a8201f749d932fcb7b6', variant: "information-text", color: COLORS_ENUM.SECONDARY }, I18nService.translate('processing.downloadDescription')))))));
|
|
220
220
|
}
|
|
221
221
|
static get style() { return renewalSuccessPageCss; }
|
|
222
222
|
}, [256, "renewal-success-page", {
|
|
@@ -293,6 +293,6 @@ function defineCustomElement() {
|
|
|
293
293
|
defineCustomElement();
|
|
294
294
|
|
|
295
295
|
export { RenewalSuccessPage as R, defineCustomElement as d };
|
|
296
|
-
//# sourceMappingURL=p-
|
|
296
|
+
//# sourceMappingURL=p-DuyVg_A7.js.map
|
|
297
297
|
|
|
298
|
-
//# sourceMappingURL=p-
|
|
298
|
+
//# sourceMappingURL=p-DuyVg_A7.js.map
|