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
|
@@ -18,7 +18,7 @@ var getPaymentMethodDisplayName = require('./get-payment-method-display-name-CSg
|
|
|
18
18
|
require('./_commonjsHelpers-BJu3ubxk.js');
|
|
19
19
|
require('./config-15uQkwgw.js');
|
|
20
20
|
|
|
21
|
-
const otpCss = ".
|
|
21
|
+
const otpCss = ".otp__otp-container{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;position:relative;margin-top:2rem}.otp__user-information{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;gap:8px}.otp__otp-description-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px}.otp__change-email{cursor:pointer;text-decoration:underline;margin-left:0}.otp__change-email:hover{color:var(--rebill-primary-color);text-decoration:underline}.otp__alternative{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;margin:32px;width:100%}.otp__rebill-alert{width:100%}.otp__guest-options{display:flex;flex-direction:column;width:100%;gap:8px;margin-top:auto}.otp__verifying-container{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}.otp__code-resent-container rebill-typography{display:flex;line-height:1}.otp__code-resent-container rebill-icon{flex-shrink:0;display:inline-flex;vertical-align:middle;margin-right:8px}.otp__spinner{width:15px;height:15px;border:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;border-top-color:var(--rebill-color-primary);animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1024px){.otp__otp-container{min-height:calc(100vh - 40px)}.otp__guest-options{margin-top:32px}}@media (min-width: 1025px){.otp__otp-container{justify-content:flex-start}.otp__guest-options{margin-top:auto;padding-bottom:2rem}}";
|
|
22
22
|
|
|
23
23
|
const Otp = class {
|
|
24
24
|
constructor(hostRef) {
|
|
@@ -116,17 +116,17 @@ const Otp = class {
|
|
|
116
116
|
}
|
|
117
117
|
};
|
|
118
118
|
render() {
|
|
119
|
-
return (index.h("div", { key: '
|
|
119
|
+
return (index.h("div", { key: '342b5631b2dfe15cc24880cf7d6d77b6c10ab12d', class: "otp__otp-container" }, index.h("div", { key: 'c6bf7502fa3f9c1940d1d07360a47c17cc2fdeb2', class: "otp__user-information" }, index.h("div", { key: '078a4cb4dd563ff1ddfbc02f70e8c923f6973d0f', class: "otp__otp-description-container" }, index.h("rebill-typography", { key: 'd8ae4e71ee4e35b033347c6bc99200e48e5b9705', variant: "body2", class: "otp__otp-description" }, i18n_service.I18nService.translate('otp.description')), index.h("rebill-typography", { key: '2466a357c835bcd8314aa5f53aefabb474fdf55f', variant: "subtitle-bold", class: "otp__otp-description-digits" }, ' ', index.h("strong", { key: '3a4263b93f5ad7f9aec482f1d1eef76952cf60d3' }, i18n_service.I18nService.translate('otp.descriptionDigits')), ' '), index.h("rebill-typography", { key: 'd77b23e3581d353e2fdd73debe4fbc0e987376c4', variant: "body2", class: "otp__otp-description-email" }, i18n_service.I18nService.translate('otp.descriptionEmail'))), index.h("rebill-typography", { key: '723a510062706eed71186cf6b1a252f58554a4fc', variant: "body2", class: "otp__otp-email-line" }, i18n_service.state.data.userInformation.email, ' ', !i18n_service.state.data.prefilledData?.email && (index.h("span", { key: '46fb8563cb20d2ae7a6d8bc8d369d8a985ff85f3', class: "otp__change-email", onClick: () => {
|
|
120
120
|
this.otpValue = '';
|
|
121
121
|
this.error = false;
|
|
122
122
|
this.returnForm.emit(false);
|
|
123
|
-
} }, i18n_service.I18nService.translate('otp.change'))))), index.h("input-otp", { key: '
|
|
123
|
+
} }, i18n_service.I18nService.translate('otp.change'))))), index.h("input-otp", { key: '8ed8dc00b9131753f6f23178e607049e6bc4ea72', otp: this.otpValue, onOtpChange: event => this.handleOtpChange(event.detail), error: this.error ? i18n_service.I18nService.translate('otp.error') : '' }), this.isVerifying && (index.h("div", { key: '364e208afc986a3272bf24b282c169fb243b86db', class: "otp__verifying-container" }, index.h("rebill-typography", { key: '02cec9d49145d0f953b84d9ee0fbf015f5004d8d', variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY }, i18n_service.I18nService.translate('otp.verifyingCode')), index.h("div", { key: 'b436acb222dd7db455a86e4063567519e309d85e', class: "otp__spinner" }))), index.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
|
|
124
124
|
? `${i18n_service.I18nService.translate('otp.resendCodeIn')} (${this.timer.getFormattedTime()})`
|
|
125
|
-
: i18n_service.I18nService.translate('otp.resendCode')), this.codeResent && (index.h("div", { key: '
|
|
125
|
+
: i18n_service.I18nService.translate('otp.resendCode')), this.codeResent && (index.h("div", { key: 'b5f54b7f537c0e382d2c1a3ff79a24f2cf4e63a9', class: "otp__code-resent-container" }, index.h("rebill-typography", { key: '4aeaeb7d4d37eab63ca63419dccb54e1b7d2fda8', variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.GREEN }, index.h("rebill-icon", { key: '4fea914f167a28bb06e0cf69d833fda493752d55', name: "check-radio" }), i18n_service.I18nService.translate('otp.codeResent')))), index.h("rebill-alert", { key: 'a8bcbdbc5af7a9e6a12bc842dd8142812638f3fa', class: "otp__rebill-alert", type: "secure", variant: "variant-info", message: i18n_service.I18nService.translate('otp.infoMessage'), icon: "circle-info", alertTitle: i18n_service.I18nService.translate('otp.infoTitle'), colorIcon: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_LIGHT }), index.h("div", { key: '9ff81fa5dce0deaec0a292d2e25d396f559a27a5', class: "otp__alternative" }, index.h("rebill-typography", { key: 'b8e4f23db473f1049f4f6eae5a489722053aa24a', variant: "body2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "o")), index.h("div", { key: '87a52e07d7c709c95517f0f3606d843c6580f9bf', class: "otp__guest-options" }, index.h("rebill-button", { key: '3fb138f038065cb6ec2852f313de1eae3d194748', type: "button", variant: "outline", theme: "secondary", size: "medium", onClick: () => {
|
|
126
126
|
this.otpValue = '';
|
|
127
127
|
this.error = false;
|
|
128
128
|
this.returnForm.emit(false);
|
|
129
|
-
} }, i18n_service.I18nService.translate('otp.continueAsGuest')), index.h("rebill-alert", { key: '
|
|
129
|
+
} }, i18n_service.I18nService.translate('otp.continueAsGuest')), index.h("rebill-alert", { key: '3bd11b6a8a91c2690998c2f7af36e872e485fffe', type: "secure", variant: "variant-secure", icon: "lock-outline", message: i18n_service.I18nService.translate('otp.secureMessage') }))));
|
|
130
130
|
}
|
|
131
131
|
};
|
|
132
132
|
Otp.style = otpCss;
|
|
@@ -161,7 +161,7 @@ const ModalOverlay = class {
|
|
|
161
161
|
};
|
|
162
162
|
ModalOverlay.style = modalOverlayCss;
|
|
163
163
|
|
|
164
|
-
const modeSandboxMobileCss = ":host{display:flex;position:relative;width:100%;justify-content:center;align-items:center}.
|
|
164
|
+
const modeSandboxMobileCss = ":host{display:flex;position:relative;width:100%;justify-content:center;align-items:center}.mode-sandbox-mobile__test-mode-container{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.mode-sandbox-mobile__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);z-index:5;animation:fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:auto;cursor:pointer}.mode-sandbox-mobile__test-mode-chip-mobile{display:flex;width:100%;min-width:auto;max-width:100%;height:40px;background:#ffffff;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;position:relative;z-index:20}.mode-sandbox-mobile__chip-content-mobile{display:flex;align-items:center;gap:2px;justify-content:flex-end;min-height:24px;flex-shrink:0;width:100%;margin:8px}.mode-sandbox-mobile__info-icon{display:flex;align-items:center}.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile{justify-content:flex-end;width:100%}.mode-sandbox-mobile__cards-dropdown-panel-header{display:flex;align-items:center;gap:8px;padding:8px}.mode-sandbox-mobile__docs-section{display:flex;align-items:center;gap:8px;cursor:pointer;margin-left:0;transition:background-color 0.2s ease;justify-content:flex-end;padding:8px;margin-top:8px}.mode-sandbox-mobile__cards-dropdown-panel{position:absolute;top:100%;left:0;right:0;width:100%;background:#ffffff;border-top:none;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin-top:16px;z-index:25;animation:expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center}.mode-sandbox-mobile__card-section{display:flex;flex-direction:column;justify-content:space-between}.mode-sandbox-mobile__header-content{display:flex;align-items:center;gap:8px;margin:8px}.mode-sandbox-mobile__card-details{background:#fafafa;border-radius:8px;border:1px solid #e5e7eb;margin:8px;min-height:208px;display:flex;flex-direction:column}.mode-sandbox-mobile__card-row{display:flex;gap:12px;align-items:stretch;background:#ffffff;justify-content:space-around;border-radius:8px;border:1px solid #e5e7eb;height:auto;padding:8px;margin:8px}.mode-sandbox-mobile__card-value{display:flex;flex-direction:column;gap:6px;flex:1}.mode-sandbox-mobile__field-value{display:flex;flex-direction:row;align-items:center;gap:8px;max-height:20px}.mode-sandbox-mobile__copy-button{align-items:center;margin-left:auto;margin-right:0}.mode-sandbox-mobile__icon-button{margin-left:auto;margin-right:16px}@keyframes expandDown{from{opacity:0;transform:translateY(-10px) scaleY(0.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
|
|
165
165
|
|
|
166
166
|
const RebillTestModeChipMobile = class {
|
|
167
167
|
constructor(hostRef) {
|
|
@@ -190,13 +190,13 @@ const RebillTestModeChipMobile = class {
|
|
|
190
190
|
window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');
|
|
191
191
|
};
|
|
192
192
|
renderBasicChip() {
|
|
193
|
-
return (index.h("div", { class: "
|
|
193
|
+
return (index.h("div", { class: "mode-sandbox-mobile__chip-content-mobile" }, index.h("div", { class: "mode-sandbox-mobile__info-icon" }, index.h("rebill-icon", { name: "circle-info", size: "24px", color: colorClassMapper.COLORS_ENUM.ORANGE })), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.testMode')), index.h("div", { class: "mode-sandbox-mobile__icon-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: this.togglePanel }, index.h("rebill-icon", { name: "hamburger" })))));
|
|
194
194
|
}
|
|
195
195
|
renderCardsPanel() {
|
|
196
|
-
return (index.h("div", { class: "
|
|
196
|
+
return (index.h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel" }, index.h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel-header" }, index.h("rebill-icon", { name: "card-test" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.cardTest'))), index.h("div", { class: "mode-sandbox-mobile__card-details" }, index.h("div", { class: "mode-sandbox-mobile__card-section" }, index.h("div", { class: "mode-sandbox-mobile__header-content" }, index.h("rebill-icon", { name: "succes", color: colorClassMapper.COLORS_ENUM.GREEN }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.successPayment'))), index.h("div", { class: "mode-sandbox-mobile__card-row" }, index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cardNumber')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-icon", { name: "visa" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.exp')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "01/99"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cvv')), index.h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "123"), index.h("div", { class: "mode-sandbox-mobile__copy-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, index.h("rebill-icon", { name: "copy" }))))))), index.h("div", { class: "mode-sandbox-mobile__card-section" }, index.h("div", { class: "mode-sandbox-mobile__header-content" }, index.h("rebill-icon", { name: "rejected", color: colorClassMapper.COLORS_ENUM.ERROR }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.rejectedPayment'))), index.h("div", { class: "mode-sandbox-mobile__card-row" }, index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cardNumber')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-icon", { name: "visa" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.exp')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "01/99"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cvv')), index.h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "123"), index.h("div", { class: "mode-sandbox-mobile__copy-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, index.h("rebill-icon", { name: "copy" })))))))), index.h("div", { class: "mode-sandbox-mobile__docs-section", onClick: this.handleDocsClick }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY }, i18n_service.I18nService.translate('sandbox.docs')), index.h("rebill-icon", { name: "external-link" }))));
|
|
197
197
|
}
|
|
198
198
|
render() {
|
|
199
|
-
return (index.h("div", { key: '
|
|
199
|
+
return (index.h("div", { key: '2051c42d557dcdfc491dc679684aa585e6b8375a', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && index.h("div", { key: '90291e86c59667a2055457ad99aad90deb8f1dd7', class: "mode-sandbox-mobile__overlay" }), index.h("div", { key: 'c405adb07262da6175badba97245914469480905', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
|
|
200
200
|
}
|
|
201
201
|
};
|
|
202
202
|
RebillTestModeChipMobile.style = modeSandboxMobileCss;
|