rebill-web-components-sdk 1.8.3-beta.3 → 1.8.3-beta.4
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/otp-component.cjs.entry.js +5 -5
- package/dist/cjs/otp-component.cjs.entry.js.map +1 -1
- package/dist/cjs/otp-component.entry.cjs.js.map +1 -1
- package/dist/cjs/otp-component.rebill-modal-overlay.rebill-mode-sandbox.rebill-mode-sandbox-mobile.rebill-summary.success-page.user-information.entry.cjs.js.map +1 -1
- package/dist/cjs/otp-component_7.cjs.entry.js +9 -9
- package/dist/cjs/otp-component_7.cjs.entry.js.map +1 -1
- package/dist/cjs/rebill-mode-sandbox-mobile.cjs.entry.js +4 -4
- package/dist/cjs/rebill-mode-sandbox-mobile.cjs.entry.js.map +1 -1
- package/dist/cjs/rebill-mode-sandbox-mobile.entry.cjs.js.map +1 -1
- package/dist/collection/components/checkout/otp/otp.css +16 -16
- package/dist/collection/components/checkout/otp/otp.js +4 -4
- package/dist/collection/components/checkout/otp/otp.js.map +1 -1
- package/dist/collection/components/shared/mode-sandbox/mode-sandbox-mobile.css +21 -16
- package/dist/collection/components/shared/mode-sandbox/mode-sandbox-mobile.js +3 -3
- package/dist/collection/components/shared/mode-sandbox/mode-sandbox-mobile.js.map +1 -1
- package/dist/components/mode-sandbox-mobile.js +4 -4
- package/dist/components/mode-sandbox-mobile.js.map +1 -1
- package/dist/components/otp.js +5 -5
- package/dist/components/otp.js.map +1 -1
- package/dist/components/{p-C-BFyHag.js → p-D3tnZHAe.js} +7 -7
- package/dist/components/p-D3tnZHAe.js.map +1 -0
- package/dist/components/p-Dp3ocPYP.js +85 -0
- package/dist/components/p-Dp3ocPYP.js.map +1 -0
- package/dist/esm/otp-component.entry.js +5 -5
- package/dist/esm/otp-component.entry.js.map +1 -1
- package/dist/esm/otp-component.rebill-modal-overlay.rebill-mode-sandbox.rebill-mode-sandbox-mobile.rebill-summary.success-page.user-information.entry.js.map +1 -1
- package/dist/esm/otp-component_7.entry.js +9 -9
- package/dist/esm/otp-component_7.entry.js.map +1 -1
- package/dist/esm/rebill-mode-sandbox-mobile.entry.js +4 -4
- package/dist/esm/rebill-mode-sandbox-mobile.entry.js.map +1 -1
- package/dist/rebill-web-components-sdk/otp-component.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/otp-component.entry.js +5 -5
- package/dist/rebill-web-components-sdk/otp-component.entry.js.map +1 -1
- package/dist/rebill-web-components-sdk/otp-component.rebill-modal-overlay.rebill-mode-sandbox.rebill-mode-sandbox-mobile.rebill-summary.success-page.user-information.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/p-8f949cf1.entry.js +2 -0
- package/dist/rebill-web-components-sdk/p-8f949cf1.entry.js.map +1 -0
- package/dist/rebill-web-components-sdk/rebill-mode-sandbox-mobile.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/rebill-mode-sandbox-mobile.entry.js +4 -4
- package/dist/rebill-web-components-sdk/rebill-mode-sandbox-mobile.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/p-Bl3lkRJY.js +0 -85
- package/dist/components/p-Bl3lkRJY.js.map +0 -1
- package/dist/components/p-C-BFyHag.js.map +0 -1
- package/dist/rebill-web-components-sdk/p-daa7cbb2.entry.js +0 -2
- package/dist/rebill-web-components-sdk/p-daa7cbb2.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"rebill-mode-sandbox-mobile.entry.cjs.js","mappings":"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","names":["I18nService","i18n","copyToClipboard","h","COLORS_ENUM"],"sources":["src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"sourcesContent":[":host {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n.test-mode-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 5;\n animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.test-mode-chip-mobile {\n display: flex;\n width: 100%;\n min-width: auto;\n max-width: 100%;\n height: 40px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n z-index: 20;\n}\n\n.chip-content-mobile {\n display: flex;\n align-items: center;\n gap: 2px;\n justify-content: flex-end;\n min-height: 24px;\n flex-shrink: 0;\n width: 100%;\n margin: 8px;\n}\n\n.test-mode-chip-mobile.expanded .chip-content-mobile {\n justify-content: flex-end;\n width: 100%;\n}\n\n.cards-dropdown-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n}\n\n/* Sección de Docs */\n.docs-section {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n margin-left: 0;\n transition: background-color 0.2s ease;\n justify-content: flex-end;\n padding: 8px;\n margin-top: 8px;\n}\n\n.cards-dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n width: 100%;\n background: #ffffff;\n border-top: none;\n border-left: 1px solid #e5e7eb;\n border-right: 1px solid #e5e7eb;\n border-bottom: 1px solid #e5e7eb;\n margin-top: 16px;\n z-index: 25;\n animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: top center;\n}\n\n.card-section {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px;\n}\n\n.card-details {\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n margin: 8px;\n min-height: 208px;\n display: flex;\n flex-direction: column;\n}\n\n.card-row {\n display: flex;\n gap: 12px;\n align-items: stretch;\n background: #ffffff;\n justify-content: space-around;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n height: auto;\n padding: 8px;\n margin: 8px;\n}\n\n.card-value {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n}\n\n.field-value {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n max-height: 20px;\n}\n\n.copy-button {\n align-items: center;\n margin-left: auto;\n margin-right: 0;\n}\n\n.icon-button {\n margin-left: auto;\n margin-right: 16px;\n}\n\n/* Animaciones */\n\n@keyframes expandDown {\n from {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-mode-sandbox-mobile',\n styleUrl: 'mode-sandbox-mobile.css',\n shadow: false,\n})\nexport class RebillTestModeChipMobile {\n @Element() el: HTMLElement;\n @State() isPanelVisible = false;\n @State() currentLanguage: string = I18nService.getCurrentLanguage();\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.currentLanguage = I18nService.getCurrentLanguage();\n };\n\n private togglePanel = () => {\n this.isPanelVisible = !this.isPanelVisible;\n };\n\n private handleCopy = (text: string) => {\n copyToClipboard(text);\n this.isPanelVisible = false;\n };\n\n private handleDocsClick = () => {\n window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n };\n\n private renderBasicChip() {\n return (\n <div class=\"chip-content-mobile\">\n <div class=\"info-icon\">\n <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.testMode')}\n </rebill-typography>\n <div class=\"icon-button\">\n <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n <rebill-icon name=\"hamburger\" />\n </rebill-button>\n </div>\n </div>\n );\n }\n\n private renderCardsPanel() {\n return (\n <div class=\"cards-dropdown-panel\">\n <div class=\"cards-dropdown-panel-header\">\n <rebill-icon name=\"card-test\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.cardTest')}\n </rebill-typography>\n </div>\n <div class=\"card-details\">\n <div class=\"card-section\">\n <div class=\"header-content\">\n <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.successPayment')}\n </rebill-typography>\n </div>\n <div class=\"card-row\">\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4539148803436467\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"field-value field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"card-section\">\n <div class=\"header-content\">\n <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.rejectedPayment')}\n </rebill-typography>\n </div>\n <div class=\"card-row\">\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4485364739527352\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"field-value field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"docs-section\" onClick={this.handleDocsClick}>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('sandbox.docs')}\n </rebill-typography>\n <rebill-icon name=\"external-link\" />\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <div class={`test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}>\n {this.isPanelVisible && <div class=\"overlay\"></div>}\n <div class={`test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}>\n {this.renderBasicChip()}\n </div>\n {this.isPanelVisible && this.renderCardsPanel()}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"rebill-mode-sandbox-mobile.entry.cjs.js","mappings":"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","names":["I18nService","i18n","copyToClipboard","h","COLORS_ENUM"],"sources":["src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"sourcesContent":[":host {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.mode-sandbox-mobile__overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 5;\n animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile {\n display: flex;\n width: 100%;\n min-width: auto;\n max-width: 100%;\n height: 40px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n z-index: 20;\n}\n\n.mode-sandbox-mobile__chip-content-mobile {\n display: flex;\n align-items: center;\n gap: 2px;\n justify-content: flex-end;\n min-height: 24px;\n flex-shrink: 0;\n width: 100%;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__info-icon {\n display: flex;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {\n justify-content: flex-end;\n width: 100%;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n}\n\n/* Sección de Docs */\n.mode-sandbox-mobile__docs-section {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n margin-left: 0;\n transition: background-color 0.2s ease;\n justify-content: flex-end;\n padding: 8px;\n margin-top: 8px;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n width: 100%;\n background: #ffffff;\n border-top: none;\n border-left: 1px solid #e5e7eb;\n border-right: 1px solid #e5e7eb;\n border-bottom: 1px solid #e5e7eb;\n margin-top: 16px;\n z-index: 25;\n animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: top center;\n}\n\n.mode-sandbox-mobile__card-section {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.mode-sandbox-mobile__header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-details {\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n margin: 8px;\n min-height: 208px;\n display: flex;\n flex-direction: column;\n}\n\n.mode-sandbox-mobile__card-row {\n display: flex;\n gap: 12px;\n align-items: stretch;\n background: #ffffff;\n justify-content: space-around;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n height: auto;\n padding: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-value {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n}\n\n.mode-sandbox-mobile__field-value {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n max-height: 20px;\n}\n\n.mode-sandbox-mobile__copy-button {\n align-items: center;\n margin-left: auto;\n margin-right: 0;\n}\n\n.mode-sandbox-mobile__icon-button {\n margin-left: auto;\n margin-right: 16px;\n}\n\n/* Animaciones */\n\n@keyframes expandDown {\n from {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-mode-sandbox-mobile',\n styleUrl: 'mode-sandbox-mobile.css',\n shadow: false,\n})\nexport class RebillTestModeChipMobile {\n @Element() el: HTMLElement;\n @State() isPanelVisible = false;\n @State() currentLanguage: string = I18nService.getCurrentLanguage();\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.currentLanguage = I18nService.getCurrentLanguage();\n };\n\n private togglePanel = () => {\n this.isPanelVisible = !this.isPanelVisible;\n };\n\n private handleCopy = (text: string) => {\n copyToClipboard(text);\n this.isPanelVisible = false;\n };\n\n private handleDocsClick = () => {\n window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n };\n\n private renderBasicChip() {\n return (\n <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n <div class=\"mode-sandbox-mobile__info-icon\">\n <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.testMode')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__icon-button\">\n <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n <rebill-icon name=\"hamburger\" />\n </rebill-button>\n </div>\n </div>\n );\n }\n\n private renderCardsPanel() {\n return (\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n <rebill-icon name=\"card-test\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.cardTest')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-details\">\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.successPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4539148803436467\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.rejectedPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4485364739527352\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('sandbox.docs')}\n </rebill-typography>\n <rebill-icon name=\"external-link\" />\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <div\n class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n >\n {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n <div\n class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n >\n {this.renderBasicChip()}\n </div>\n {this.isPanelVisible && this.renderCardsPanel()}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rebill-mode-sandbox-mobile.entry.cjs.js","sources":["src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"sourcesContent":[":host {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n.test-mode-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 5;\n animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.test-mode-chip-mobile {\n display: flex;\n width: 100%;\n min-width: auto;\n max-width: 100%;\n height: 40px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n z-index: 20;\n}\n\n.chip-content-mobile {\n display: flex;\n align-items: center;\n gap: 2px;\n justify-content: flex-end;\n min-height: 24px;\n flex-shrink: 0;\n width: 100%;\n margin: 8px;\n}\n\n.test-mode-chip-mobile.expanded .chip-content-mobile {\n justify-content: flex-end;\n width: 100%;\n}\n\n.cards-dropdown-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n}\n\n/* Sección de Docs */\n.docs-section {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n margin-left: 0;\n transition: background-color 0.2s ease;\n justify-content: flex-end;\n padding: 8px;\n margin-top: 8px;\n}\n\n.cards-dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n width: 100%;\n background: #ffffff;\n border-top: none;\n border-left: 1px solid #e5e7eb;\n border-right: 1px solid #e5e7eb;\n border-bottom: 1px solid #e5e7eb;\n margin-top: 16px;\n z-index: 25;\n animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: top center;\n}\n\n.card-section {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px;\n}\n\n.card-details {\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n margin: 8px;\n min-height: 208px;\n display: flex;\n flex-direction: column;\n}\n\n.card-row {\n display: flex;\n gap: 12px;\n align-items: stretch;\n background: #ffffff;\n justify-content: space-around;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n height: auto;\n padding: 8px;\n margin: 8px;\n}\n\n.card-value {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n}\n\n.field-value {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n max-height: 20px;\n}\n\n.copy-button {\n align-items: center;\n margin-left: auto;\n margin-right: 0;\n}\n\n.icon-button {\n margin-left: auto;\n margin-right: 16px;\n}\n\n/* Animaciones */\n\n@keyframes expandDown {\n from {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-mode-sandbox-mobile',\n styleUrl: 'mode-sandbox-mobile.css',\n shadow: false,\n})\nexport class RebillTestModeChipMobile {\n @Element() el: HTMLElement;\n @State() isPanelVisible = false;\n @State() currentLanguage: string = I18nService.getCurrentLanguage();\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.currentLanguage = I18nService.getCurrentLanguage();\n };\n\n private togglePanel = () => {\n this.isPanelVisible = !this.isPanelVisible;\n };\n\n private handleCopy = (text: string) => {\n copyToClipboard(text);\n this.isPanelVisible = false;\n };\n\n private handleDocsClick = () => {\n window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n };\n\n private renderBasicChip() {\n return (\n <div class=\"chip-content-mobile\">\n <div class=\"info-icon\">\n <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.testMode')}\n </rebill-typography>\n <div class=\"icon-button\">\n <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n <rebill-icon name=\"hamburger\" />\n </rebill-button>\n </div>\n </div>\n );\n }\n\n private renderCardsPanel() {\n return (\n <div class=\"cards-dropdown-panel\">\n <div class=\"cards-dropdown-panel-header\">\n <rebill-icon name=\"card-test\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.cardTest')}\n </rebill-typography>\n </div>\n <div class=\"card-details\">\n <div class=\"card-section\">\n <div class=\"header-content\">\n <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.successPayment')}\n </rebill-typography>\n </div>\n <div class=\"card-row\">\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4539148803436467\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"field-value field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"card-section\">\n <div class=\"header-content\">\n <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.rejectedPayment')}\n </rebill-typography>\n </div>\n <div class=\"card-row\">\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4485364739527352\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"field-value field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"docs-section\" onClick={this.handleDocsClick}>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('sandbox.docs')}\n </rebill-typography>\n <rebill-icon name=\"external-link\" />\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <div class={`test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}>\n {this.isPanelVisible && <div class=\"overlay\"></div>}\n <div class={`test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}>\n {this.renderBasicChip()}\n </div>\n {this.isPanelVisible && this.renderCardsPanel()}\n </div>\n );\n }\n}\n"],"names":["I18nService","i18n","copyToClipboard","h","COLORS_ENUM"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rebill-mode-sandbox-mobile.entry.cjs.js","sources":["src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"sourcesContent":[":host {\n display: flex;\n position: relative;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n}\n\n.mode-sandbox-mobile__overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 5;\n animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: auto;\n cursor: pointer;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile {\n display: flex;\n width: 100%;\n min-width: auto;\n max-width: 100%;\n height: 40px;\n background: #ffffff;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n z-index: 20;\n}\n\n.mode-sandbox-mobile__chip-content-mobile {\n display: flex;\n align-items: center;\n gap: 2px;\n justify-content: flex-end;\n min-height: 24px;\n flex-shrink: 0;\n width: 100%;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__info-icon {\n display: flex;\n align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {\n justify-content: flex-end;\n width: 100%;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n}\n\n/* Sección de Docs */\n.mode-sandbox-mobile__docs-section {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n margin-left: 0;\n transition: background-color 0.2s ease;\n justify-content: flex-end;\n padding: 8px;\n margin-top: 8px;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n width: 100%;\n background: #ffffff;\n border-top: none;\n border-left: 1px solid #e5e7eb;\n border-right: 1px solid #e5e7eb;\n border-bottom: 1px solid #e5e7eb;\n margin-top: 16px;\n z-index: 25;\n animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: top center;\n}\n\n.mode-sandbox-mobile__card-section {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.mode-sandbox-mobile__header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-details {\n background: #fafafa;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n margin: 8px;\n min-height: 208px;\n display: flex;\n flex-direction: column;\n}\n\n.mode-sandbox-mobile__card-row {\n display: flex;\n gap: 12px;\n align-items: stretch;\n background: #ffffff;\n justify-content: space-around;\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n height: auto;\n padding: 8px;\n margin: 8px;\n}\n\n.mode-sandbox-mobile__card-value {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n}\n\n.mode-sandbox-mobile__field-value {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n max-height: 20px;\n}\n\n.mode-sandbox-mobile__copy-button {\n align-items: center;\n margin-left: auto;\n margin-right: 0;\n}\n\n.mode-sandbox-mobile__icon-button {\n margin-left: auto;\n margin-right: 16px;\n}\n\n/* Animaciones */\n\n@keyframes expandDown {\n from {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n tag: 'rebill-mode-sandbox-mobile',\n styleUrl: 'mode-sandbox-mobile.css',\n shadow: false,\n})\nexport class RebillTestModeChipMobile {\n @Element() el: HTMLElement;\n @State() isPanelVisible = false;\n @State() currentLanguage: string = I18nService.getCurrentLanguage();\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.currentLanguage = I18nService.getCurrentLanguage();\n };\n\n private togglePanel = () => {\n this.isPanelVisible = !this.isPanelVisible;\n };\n\n private handleCopy = (text: string) => {\n copyToClipboard(text);\n this.isPanelVisible = false;\n };\n\n private handleDocsClick = () => {\n window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n };\n\n private renderBasicChip() {\n return (\n <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n <div class=\"mode-sandbox-mobile__info-icon\">\n <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n </div>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.testMode')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__icon-button\">\n <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n <rebill-icon name=\"hamburger\" />\n </rebill-button>\n </div>\n </div>\n );\n }\n\n private renderCardsPanel() {\n return (\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n <rebill-icon name=\"card-test\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.cardTest')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-details\">\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.successPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4539148803436467\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__card-section\">\n <div class=\"mode-sandbox-mobile__header-content\">\n <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n {I18nService.translate('sandbox.rejectedPayment')}\n </rebill-typography>\n </div>\n <div class=\"mode-sandbox-mobile__card-row\">\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cardNumber')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-icon name=\"visa\" />\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 4485364739527352\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.exp')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 01/99\n </rebill-typography>\n </div>\n </div>\n <div class=\"mode-sandbox-mobile__card-value\">\n <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n {I18nService.translate('sandbox.cvv')}\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n 123\n </rebill-typography>\n <div class=\"mode-sandbox-mobile__copy-button\">\n <rebill-button\n variant=\"text\"\n size=\"small\"\n onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n >\n <rebill-icon name=\"copy\" />\n </rebill-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('sandbox.docs')}\n </rebill-typography>\n <rebill-icon name=\"external-link\" />\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <div\n class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n >\n {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n <div\n class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n >\n {this.renderBasicChip()}\n </div>\n {this.isPanelVisible && this.renderCardsPanel()}\n </div>\n );\n }\n}\n"],"names":["I18nService","i18n","copyToClipboard","h","COLORS_ENUM"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.otp__otp-container {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
align-items: center;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
margin-top: 2rem;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.otp__user-information {
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: center;
|
|
@@ -17,25 +17,25 @@
|
|
|
17
17
|
gap: 8px;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.
|
|
20
|
+
.otp__otp-description-container {
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: row;
|
|
23
23
|
align-items: center;
|
|
24
24
|
justify-content: center;
|
|
25
25
|
gap: 4px;
|
|
26
26
|
}
|
|
27
|
-
.
|
|
27
|
+
.otp__change-email {
|
|
28
28
|
cursor: pointer;
|
|
29
29
|
text-decoration: underline;
|
|
30
30
|
margin-left: 0;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.
|
|
33
|
+
.otp__change-email:hover {
|
|
34
34
|
color: var(--rebill-primary-color);
|
|
35
35
|
text-decoration: underline;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.otp__alternative {
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-direction: row;
|
|
41
41
|
align-items: center;
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
width: 100%;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.
|
|
48
|
+
.otp__rebill-alert {
|
|
49
49
|
width: 100%;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.
|
|
52
|
+
.otp__guest-options {
|
|
53
53
|
display: flex;
|
|
54
54
|
flex-direction: column;
|
|
55
55
|
width: 100%;
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
margin-top: auto;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
.
|
|
60
|
+
.otp__verifying-container {
|
|
61
61
|
display: flex;
|
|
62
62
|
align-items: center;
|
|
63
63
|
justify-content: center;
|
|
@@ -65,19 +65,19 @@
|
|
|
65
65
|
margin: 8px 0;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.
|
|
68
|
+
.otp__code-resent-container rebill-typography {
|
|
69
69
|
display: flex;
|
|
70
70
|
line-height: 1;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.
|
|
73
|
+
.otp__code-resent-container rebill-icon {
|
|
74
74
|
flex-shrink: 0;
|
|
75
75
|
display: inline-flex;
|
|
76
76
|
vertical-align: middle;
|
|
77
77
|
margin-right: 8px;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
.
|
|
80
|
+
.otp__spinner {
|
|
81
81
|
width: 15px;
|
|
82
82
|
height: 15px;
|
|
83
83
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
@@ -95,21 +95,21 @@
|
|
|
95
95
|
|
|
96
96
|
/* Responsive adjustments */
|
|
97
97
|
@media (max-width: 1024px) {
|
|
98
|
-
.
|
|
98
|
+
.otp__otp-container {
|
|
99
99
|
min-height: calc(100vh - 40px);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
.
|
|
102
|
+
.otp__guest-options {
|
|
103
103
|
margin-top: 32px;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
@media (min-width: 1025px) {
|
|
108
|
-
.
|
|
108
|
+
.otp__otp-container {
|
|
109
109
|
justify-content: flex-start;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.
|
|
112
|
+
.otp__guest-options {
|
|
113
113
|
margin-top: auto;
|
|
114
114
|
padding-bottom: 2rem;
|
|
115
115
|
}
|
|
@@ -94,17 +94,17 @@ export class Otp {
|
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
96
|
render() {
|
|
97
|
-
return (h("div", { key: '
|
|
97
|
+
return (h("div", { key: '342b5631b2dfe15cc24880cf7d6d77b6c10ab12d', class: "otp__otp-container" }, h("div", { key: 'c6bf7502fa3f9c1940d1d07360a47c17cc2fdeb2', class: "otp__user-information" }, h("div", { key: '078a4cb4dd563ff1ddfbc02f70e8c923f6973d0f', class: "otp__otp-description-container" }, h("rebill-typography", { key: 'd8ae4e71ee4e35b033347c6bc99200e48e5b9705', variant: "body2", class: "otp__otp-description" }, I18nService.translate('otp.description')), h("rebill-typography", { key: '2466a357c835bcd8314aa5f53aefabb474fdf55f', variant: "subtitle-bold", class: "otp__otp-description-digits" }, ' ', h("strong", { key: '3a4263b93f5ad7f9aec482f1d1eef76952cf60d3' }, I18nService.translate('otp.descriptionDigits')), ' '), h("rebill-typography", { key: 'd77b23e3581d353e2fdd73debe4fbc0e987376c4', variant: "body2", class: "otp__otp-description-email" }, I18nService.translate('otp.descriptionEmail'))), h("rebill-typography", { key: '723a510062706eed71186cf6b1a252f58554a4fc', variant: "body2", class: "otp__otp-email-line" }, sessionState.data.userInformation.email, ' ', !sessionState.data.prefilledData?.email && (h("span", { key: '46fb8563cb20d2ae7a6d8bc8d369d8a985ff85f3', class: "otp__change-email", onClick: () => {
|
|
98
98
|
this.otpValue = '';
|
|
99
99
|
this.error = false;
|
|
100
100
|
this.returnForm.emit(false);
|
|
101
|
-
} }, I18nService.translate('otp.change'))))), h("input-otp", { key: '
|
|
101
|
+
} }, I18nService.translate('otp.change'))))), h("input-otp", { key: '8ed8dc00b9131753f6f23178e607049e6bc4ea72', otp: this.otpValue, onOtpChange: event => this.handleOtpChange(event.detail), error: this.error ? I18nService.translate('otp.error') : '' }), this.isVerifying && (h("div", { key: '364e208afc986a3272bf24b282c169fb243b86db', class: "otp__verifying-container" }, h("rebill-typography", { key: '02cec9d49145d0f953b84d9ee0fbf015f5004d8d', variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('otp.verifyingCode')), h("div", { key: 'b436acb222dd7db455a86e4063567519e309d85e', class: "otp__spinner" }))), h("rebill-button", { key: 'ac5bcb96f2fac2426579ac33ca2f84f36e3dda51', type: "button", variant: "outline", theme: this.isTimerRunning ? 'secondary' : 'primary', disabled: this.isTimerRunning, onClick: this.handleResendCode, size: "small", style: { height: '24px', marginBottom: '8px' } }, this.isTimerRunning
|
|
102
102
|
? `${I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`
|
|
103
|
-
: I18nService.translate('otp.resendCode')), this.codeResent && (h("div", { key: '
|
|
103
|
+
: I18nService.translate('otp.resendCode')), this.codeResent && (h("div", { key: 'b5f54b7f537c0e382d2c1a3ff79a24f2cf4e63a9', class: "otp__code-resent-container" }, h("rebill-typography", { key: '4aeaeb7d4d37eab63ca63419dccb54e1b7d2fda8', variant: "subtitle2", color: COLORS_ENUM.GREEN }, h("rebill-icon", { key: '4fea914f167a28bb06e0cf69d833fda493752d55', name: "check-radio" }), I18nService.translate('otp.codeResent')))), h("rebill-alert", { key: 'a8bcbdbc5af7a9e6a12bc842dd8142812638f3fa', class: "otp__rebill-alert", type: "secure", variant: "variant-info", message: I18nService.translate('otp.infoMessage'), icon: "circle-info", alertTitle: I18nService.translate('otp.infoTitle'), colorIcon: COLORS_ENUM.PRIMARY_DARK_LIGHT }), h("div", { key: '9ff81fa5dce0deaec0a292d2e25d396f559a27a5', class: "otp__alternative" }, h("rebill-typography", { key: 'b8e4f23db473f1049f4f6eae5a489722053aa24a', variant: "body2", color: COLORS_ENUM.PRIMARY_DARK }, "o")), h("div", { key: '87a52e07d7c709c95517f0f3606d843c6580f9bf', class: "otp__guest-options" }, h("rebill-button", { key: '3fb138f038065cb6ec2852f313de1eae3d194748', type: "button", variant: "outline", theme: "secondary", size: "medium", onClick: () => {
|
|
104
104
|
this.otpValue = '';
|
|
105
105
|
this.error = false;
|
|
106
106
|
this.returnForm.emit(false);
|
|
107
|
-
} }, I18nService.translate('otp.continueAsGuest')), h("rebill-alert", { key: '
|
|
107
|
+
} }, I18nService.translate('otp.continueAsGuest')), h("rebill-alert", { key: '3bd11b6a8a91c2690998c2f7af36e872e485fffe', type: "secure", variant: "variant-secure", icon: "lock-outline", message: I18nService.translate('otp.secureMessage') }))));
|
|
108
108
|
}
|
|
109
109
|
static get is() { return "otp-component"; }
|
|
110
110
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"otp.js","sourceRoot":"","sources":["../../../../src/components/checkout/otp/otp.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { OTPVerifyResponse } from '../../../api/entities/OTP/types';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { createCountdownTimer } from '../../../utils/timer';\n\n@Component({\n tag: 'otp-component',\n styleUrl: 'otp.css',\n shadow: false,\n})\nexport class Otp {\n @Event() changeEmailClick: EventEmitter<void>;\n @State() timeLeft: number = 59;\n @State() isTimerRunning: boolean = false;\n @State() codeResent: boolean = false;\n @State() isVerifying: boolean = false;\n @State() otpValue: string = '';\n @Event() returnForm: EventEmitter<boolean>;\n @Event() codeVerified: EventEmitter<OTPVerifyResponse>;\n @State() error: boolean = false;\n\n private timer = createCountdownTimer({\n duration: 59,\n onTick: timeLeft => {\n this.timeLeft = timeLeft;\n },\n onComplete: () => {\n this.isTimerRunning = false;\n },\n });\n\n private messageTimer = createCountdownTimer({\n duration: 5,\n onComplete: () => {\n this.codeResent = false;\n },\n });\n\n disconnectedCallback() {\n this.timer.stop();\n }\n\n startTimer() {\n this.timer.start();\n this.isTimerRunning = true;\n }\n\n handleResendCode = async () => {\n if (!this.isTimerRunning) {\n await api.otp.generate(sessionState.data.sessionId, {\n email: sessionState.data.userInformation.email,\n });\n this.codeResent = true;\n this.messageTimer.start();\n this.startTimer();\n\n this.error = false;\n }\n };\n\n handleOtpChange = (value: string) => {\n this.otpValue = value;\n\n if (value.length === 6) {\n this.handleVerifyOtp(value);\n this.error = false;\n }\n };\n\n handleVerifyOtp = async (otp: string) => {\n this.isVerifying = true;\n try {\n const response = await api.otp.verify(sessionState.data.sessionId, {\n email: sessionState.data.userInformation.email,\n code: otp,\n });\n\n this.codeVerified.emit(response.data);\n SessionStore.setUserInformation({\n ...response.data.customer,\n fullName: `${response.data.customer.firstName} ${response.data.customer.lastName}`.trim(),\n phoneNumber: {\n number: response.data.customer.phoneNumbers[0].number,\n countryCode: response.data.customer.phoneNumbers[0].countryCode,\n },\n address: {\n billingAddress: {\n address: response.data.customer.addresses[0].lineOne,\n zip: response.data.customer.addresses[0].zipCode,\n city: response.data.customer.addresses[0].city,\n state: response.data.customer.addresses[0].state,\n country: response.data.customer.addresses[0].country,\n },\n },\n documentType: response.data.customer.identifications[0].type,\n documentNumber: response.data.customer.identifications[0].value,\n });\n SessionStore.setAccessToken(response.data.accessToken);\n SessionStore.setCustomerId(response.data.customer.id);\n this.otpValue = '';\n this.error = false;\n } catch (error) {\n this.error = true;\n } finally {\n this.isVerifying = false;\n }\n };\n\n render() {\n return (\n <div class=\"otp-container\">\n <div class=\"user-information\">\n <div class=\"otp-description-container\">\n <rebill-typography variant=\"body2\" class=\"otp-description\">\n {I18nService.translate('otp.description')}\n </rebill-typography>\n <rebill-typography variant=\"subtitle-bold\" class=\"otp-description-digits\">\n {' '}\n <strong>{I18nService.translate('otp.descriptionDigits')}</strong>{' '}\n </rebill-typography>\n <rebill-typography variant=\"body2\" class=\"otp-description-email\">\n {I18nService.translate('otp.descriptionEmail')}\n </rebill-typography>\n </div>\n <rebill-typography variant=\"body2\" class=\"otp-email-line\">\n {sessionState.data.userInformation.email}{' '}\n {!sessionState.data.prefilledData?.email && (\n <span\n class=\"change-email\"\n onClick={() => {\n this.otpValue = '';\n this.error = false;\n this.returnForm.emit(false);\n }}\n >\n {I18nService.translate('otp.change')}\n </span>\n )}\n </rebill-typography>\n </div>\n <input-otp\n otp={this.otpValue}\n onOtpChange={event => this.handleOtpChange(event.detail)}\n error={this.error ? I18nService.translate('otp.error') : ''}\n />\n\n {this.isVerifying && (\n <div class=\"verifying-container\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('otp.verifyingCode')}\n </rebill-typography>\n <div class=\"spinner\"></div>\n </div>\n )}\n <rebill-button\n type=\"button\"\n variant=\"outline\"\n theme={this.isTimerRunning ? 'secondary' : 'primary'}\n disabled={this.isTimerRunning}\n onClick={this.handleResendCode}\n size=\"small\"\n style={{ height: '24px', marginBottom: '8px' }}\n >\n {this.isTimerRunning\n ? `${I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`\n : I18nService.translate('otp.resendCode')}\n </rebill-button>\n\n {this.codeResent && (\n <div class=\"code-resent-container\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREEN}>\n <rebill-icon name=\"check-radio\" />\n {I18nService.translate('otp.codeResent')}\n </rebill-typography>\n </div>\n )}\n <rebill-alert\n class=\"rebill-alert\"\n type=\"secure\"\n variant=\"variant-info\"\n message={I18nService.translate('otp.infoMessage')}\n icon=\"circle-info\"\n alertTitle={I18nService.translate('otp.infoTitle')}\n colorIcon={COLORS_ENUM.PRIMARY_DARK_LIGHT}\n />\n <div class=\"alternative\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK}>\n o\n </rebill-typography>\n </div>\n <div class=\"guest-options\">\n <rebill-button\n type=\"button\"\n variant=\"outline\"\n theme=\"secondary\"\n size=\"medium\"\n onClick={() => {\n this.otpValue = '';\n this.error = false;\n this.returnForm.emit(false);\n }}\n >\n {I18nService.translate('otp.continueAsGuest')}\n </rebill-button>\n\n <rebill-alert\n type=\"secure\"\n variant=\"variant-secure\"\n icon=\"lock-outline\"\n message={I18nService.translate('otp.secureMessage')}\n />\n </div>\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"otp.js","sourceRoot":"","sources":["../../../../src/components/checkout/otp/otp.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { OTPVerifyResponse } from '../../../api/entities/OTP/types';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { createCountdownTimer } from '../../../utils/timer';\n\n@Component({\n tag: 'otp-component',\n styleUrl: 'otp.css',\n shadow: false,\n})\nexport class Otp {\n @Event() changeEmailClick: EventEmitter<void>;\n @State() timeLeft: number = 59;\n @State() isTimerRunning: boolean = false;\n @State() codeResent: boolean = false;\n @State() isVerifying: boolean = false;\n @State() otpValue: string = '';\n @Event() returnForm: EventEmitter<boolean>;\n @Event() codeVerified: EventEmitter<OTPVerifyResponse>;\n @State() error: boolean = false;\n\n private timer = createCountdownTimer({\n duration: 59,\n onTick: timeLeft => {\n this.timeLeft = timeLeft;\n },\n onComplete: () => {\n this.isTimerRunning = false;\n },\n });\n\n private messageTimer = createCountdownTimer({\n duration: 5,\n onComplete: () => {\n this.codeResent = false;\n },\n });\n\n disconnectedCallback() {\n this.timer.stop();\n }\n\n startTimer() {\n this.timer.start();\n this.isTimerRunning = true;\n }\n\n handleResendCode = async () => {\n if (!this.isTimerRunning) {\n await api.otp.generate(sessionState.data.sessionId, {\n email: sessionState.data.userInformation.email,\n });\n this.codeResent = true;\n this.messageTimer.start();\n this.startTimer();\n\n this.error = false;\n }\n };\n\n handleOtpChange = (value: string) => {\n this.otpValue = value;\n\n if (value.length === 6) {\n this.handleVerifyOtp(value);\n this.error = false;\n }\n };\n\n handleVerifyOtp = async (otp: string) => {\n this.isVerifying = true;\n try {\n const response = await api.otp.verify(sessionState.data.sessionId, {\n email: sessionState.data.userInformation.email,\n code: otp,\n });\n\n this.codeVerified.emit(response.data);\n SessionStore.setUserInformation({\n ...response.data.customer,\n fullName: `${response.data.customer.firstName} ${response.data.customer.lastName}`.trim(),\n phoneNumber: {\n number: response.data.customer.phoneNumbers[0].number,\n countryCode: response.data.customer.phoneNumbers[0].countryCode,\n },\n address: {\n billingAddress: {\n address: response.data.customer.addresses[0].lineOne,\n zip: response.data.customer.addresses[0].zipCode,\n city: response.data.customer.addresses[0].city,\n state: response.data.customer.addresses[0].state,\n country: response.data.customer.addresses[0].country,\n },\n },\n documentType: response.data.customer.identifications[0].type,\n documentNumber: response.data.customer.identifications[0].value,\n });\n SessionStore.setAccessToken(response.data.accessToken);\n SessionStore.setCustomerId(response.data.customer.id);\n this.otpValue = '';\n this.error = false;\n } catch (error) {\n this.error = true;\n } finally {\n this.isVerifying = false;\n }\n };\n\n render() {\n return (\n <div class=\"otp__otp-container\">\n <div class=\"otp__user-information\">\n <div class=\"otp__otp-description-container\">\n <rebill-typography variant=\"body2\" class=\"otp__otp-description\">\n {I18nService.translate('otp.description')}\n </rebill-typography>\n <rebill-typography variant=\"subtitle-bold\" class=\"otp__otp-description-digits\">\n {' '}\n <strong>{I18nService.translate('otp.descriptionDigits')}</strong>{' '}\n </rebill-typography>\n <rebill-typography variant=\"body2\" class=\"otp__otp-description-email\">\n {I18nService.translate('otp.descriptionEmail')}\n </rebill-typography>\n </div>\n <rebill-typography variant=\"body2\" class=\"otp__otp-email-line\">\n {sessionState.data.userInformation.email}{' '}\n {!sessionState.data.prefilledData?.email && (\n <span\n class=\"otp__change-email\"\n onClick={() => {\n this.otpValue = '';\n this.error = false;\n this.returnForm.emit(false);\n }}\n >\n {I18nService.translate('otp.change')}\n </span>\n )}\n </rebill-typography>\n </div>\n <input-otp\n otp={this.otpValue}\n onOtpChange={event => this.handleOtpChange(event.detail)}\n error={this.error ? I18nService.translate('otp.error') : ''}\n />\n\n {this.isVerifying && (\n <div class=\"otp__verifying-container\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n {I18nService.translate('otp.verifyingCode')}\n </rebill-typography>\n <div class=\"otp__spinner\"></div>\n </div>\n )}\n <rebill-button\n type=\"button\"\n variant=\"outline\"\n theme={this.isTimerRunning ? 'secondary' : 'primary'}\n disabled={this.isTimerRunning}\n onClick={this.handleResendCode}\n size=\"small\"\n style={{ height: '24px', marginBottom: '8px' }}\n >\n {this.isTimerRunning\n ? `${I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`\n : I18nService.translate('otp.resendCode')}\n </rebill-button>\n\n {this.codeResent && (\n <div class=\"otp__code-resent-container\">\n <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.GREEN}>\n <rebill-icon name=\"check-radio\" />\n {I18nService.translate('otp.codeResent')}\n </rebill-typography>\n </div>\n )}\n <rebill-alert\n class=\"otp__rebill-alert\"\n type=\"secure\"\n variant=\"variant-info\"\n message={I18nService.translate('otp.infoMessage')}\n icon=\"circle-info\"\n alertTitle={I18nService.translate('otp.infoTitle')}\n colorIcon={COLORS_ENUM.PRIMARY_DARK_LIGHT}\n />\n <div class=\"otp__alternative\">\n <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK}>\n o\n </rebill-typography>\n </div>\n <div class=\"otp__guest-options\">\n <rebill-button\n type=\"button\"\n variant=\"outline\"\n theme=\"secondary\"\n size=\"medium\"\n onClick={() => {\n this.otpValue = '';\n this.error = false;\n this.returnForm.emit(false);\n }}\n >\n {I18nService.translate('otp.continueAsGuest')}\n </rebill-button>\n\n <rebill-alert\n type=\"secure\"\n variant=\"variant-secure\"\n icon=\"lock-outline\"\n message={I18nService.translate('otp.secureMessage')}\n />\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
align-items: center;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
.
|
|
9
|
+
.mode-sandbox-mobile__test-mode-container {
|
|
10
10
|
position: relative;
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: column;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
width: 100%;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.mode-sandbox-mobile__overlay {
|
|
19
19
|
position: fixed;
|
|
20
20
|
top: 0;
|
|
21
21
|
left: 0;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
cursor: pointer;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.
|
|
31
|
+
.mode-sandbox-mobile__test-mode-chip-mobile {
|
|
32
32
|
display: flex;
|
|
33
33
|
width: 100%;
|
|
34
34
|
min-width: auto;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
z-index: 20;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.
|
|
47
|
+
.mode-sandbox-mobile__chip-content-mobile {
|
|
48
48
|
display: flex;
|
|
49
49
|
align-items: center;
|
|
50
50
|
gap: 2px;
|
|
@@ -55,12 +55,17 @@
|
|
|
55
55
|
margin: 8px;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.
|
|
58
|
+
.mode-sandbox-mobile__info-icon {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {
|
|
59
64
|
justify-content: flex-end;
|
|
60
65
|
width: 100%;
|
|
61
66
|
}
|
|
62
67
|
|
|
63
|
-
.
|
|
68
|
+
.mode-sandbox-mobile__cards-dropdown-panel-header {
|
|
64
69
|
display: flex;
|
|
65
70
|
align-items: center;
|
|
66
71
|
gap: 8px;
|
|
@@ -68,7 +73,7 @@
|
|
|
68
73
|
}
|
|
69
74
|
|
|
70
75
|
/* Sección de Docs */
|
|
71
|
-
.
|
|
76
|
+
.mode-sandbox-mobile__docs-section {
|
|
72
77
|
display: flex;
|
|
73
78
|
align-items: center;
|
|
74
79
|
gap: 8px;
|
|
@@ -80,7 +85,7 @@
|
|
|
80
85
|
margin-top: 8px;
|
|
81
86
|
}
|
|
82
87
|
|
|
83
|
-
.
|
|
88
|
+
.mode-sandbox-mobile__cards-dropdown-panel {
|
|
84
89
|
position: absolute;
|
|
85
90
|
top: 100%;
|
|
86
91
|
left: 0;
|
|
@@ -97,20 +102,20 @@
|
|
|
97
102
|
transform-origin: top center;
|
|
98
103
|
}
|
|
99
104
|
|
|
100
|
-
.
|
|
105
|
+
.mode-sandbox-mobile__card-section {
|
|
101
106
|
display: flex;
|
|
102
107
|
flex-direction: column;
|
|
103
108
|
justify-content: space-between;
|
|
104
109
|
}
|
|
105
110
|
|
|
106
|
-
.
|
|
111
|
+
.mode-sandbox-mobile__header-content {
|
|
107
112
|
display: flex;
|
|
108
113
|
align-items: center;
|
|
109
114
|
gap: 8px;
|
|
110
115
|
margin: 8px;
|
|
111
116
|
}
|
|
112
117
|
|
|
113
|
-
.
|
|
118
|
+
.mode-sandbox-mobile__card-details {
|
|
114
119
|
background: #fafafa;
|
|
115
120
|
border-radius: 8px;
|
|
116
121
|
border: 1px solid #e5e7eb;
|
|
@@ -120,7 +125,7 @@
|
|
|
120
125
|
flex-direction: column;
|
|
121
126
|
}
|
|
122
127
|
|
|
123
|
-
.
|
|
128
|
+
.mode-sandbox-mobile__card-row {
|
|
124
129
|
display: flex;
|
|
125
130
|
gap: 12px;
|
|
126
131
|
align-items: stretch;
|
|
@@ -133,14 +138,14 @@
|
|
|
133
138
|
margin: 8px;
|
|
134
139
|
}
|
|
135
140
|
|
|
136
|
-
.
|
|
141
|
+
.mode-sandbox-mobile__card-value {
|
|
137
142
|
display: flex;
|
|
138
143
|
flex-direction: column;
|
|
139
144
|
gap: 6px;
|
|
140
145
|
flex: 1;
|
|
141
146
|
}
|
|
142
147
|
|
|
143
|
-
.
|
|
148
|
+
.mode-sandbox-mobile__field-value {
|
|
144
149
|
display: flex;
|
|
145
150
|
flex-direction: row;
|
|
146
151
|
align-items: center;
|
|
@@ -148,13 +153,13 @@
|
|
|
148
153
|
max-height: 20px;
|
|
149
154
|
}
|
|
150
155
|
|
|
151
|
-
.
|
|
156
|
+
.mode-sandbox-mobile__copy-button {
|
|
152
157
|
align-items: center;
|
|
153
158
|
margin-left: auto;
|
|
154
159
|
margin-right: 0;
|
|
155
160
|
}
|
|
156
161
|
|
|
157
|
-
.
|
|
162
|
+
.mode-sandbox-mobile__icon-button {
|
|
158
163
|
margin-left: auto;
|
|
159
164
|
margin-right: 16px;
|
|
160
165
|
}
|
|
@@ -27,13 +27,13 @@ export class RebillTestModeChipMobile {
|
|
|
27
27
|
window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');
|
|
28
28
|
};
|
|
29
29
|
renderBasicChip() {
|
|
30
|
-
return (h("div", { class: "
|
|
30
|
+
return (h("div", { class: "mode-sandbox-mobile__chip-content-mobile" }, h("div", { class: "mode-sandbox-mobile__info-icon" }, h("rebill-icon", { name: "circle-info", size: "24px", color: COLORS_ENUM.ORANGE })), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.testMode')), h("div", { class: "mode-sandbox-mobile__icon-button" }, h("rebill-button", { variant: "text", size: "small", onClick: this.togglePanel }, h("rebill-icon", { name: "hamburger" })))));
|
|
31
31
|
}
|
|
32
32
|
renderCardsPanel() {
|
|
33
|
-
return (h("div", { class: "
|
|
33
|
+
return (h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel" }, h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel-header" }, h("rebill-icon", { name: "card-test" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.cardTest'))), h("div", { class: "mode-sandbox-mobile__card-details" }, h("div", { class: "mode-sandbox-mobile__card-section" }, h("div", { class: "mode-sandbox-mobile__header-content" }, h("rebill-icon", { name: "succes", color: COLORS_ENUM.GREEN }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.successPayment'))), h("div", { class: "mode-sandbox-mobile__card-row" }, h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "mode-sandbox-mobile__copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, h("rebill-icon", { name: "copy" }))))))), h("div", { class: "mode-sandbox-mobile__card-section" }, h("div", { class: "mode-sandbox-mobile__header-content" }, h("rebill-icon", { name: "rejected", color: COLORS_ENUM.ERROR }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.rejectedPayment'))), h("div", { class: "mode-sandbox-mobile__card-row" }, h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "mode-sandbox-mobile__copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, h("rebill-icon", { name: "copy" })))))))), h("div", { class: "mode-sandbox-mobile__docs-section", onClick: this.handleDocsClick }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('sandbox.docs')), h("rebill-icon", { name: "external-link" }))));
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h("div", { key: '
|
|
36
|
+
return (h("div", { key: '2051c42d557dcdfc491dc679684aa585e6b8375a', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: '90291e86c59667a2055457ad99aad90deb8f1dd7', class: "mode-sandbox-mobile__overlay" }), h("div", { key: 'c405adb07262da6175badba97245914469480905', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "rebill-mode-sandbox-mobile"; }
|
|
39
39
|
static get originalStyleUrls() {
|