@malga-checkout/core
Version:
Core components for Malga Checkout
39 lines (33 loc) • 6.41 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ebe81290.js');
const i18n_es = require('./i18n.es-2b830471.js');
const payment = require('./payment-8a793522.js');
const settings = require('./settings-914617c5.js');
const savedCards = require('./saved-cards-368e2592.js');
const malgaPaymentsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\"); :root{--malga-checkout-color-page-background:#eef2f6;--malga-checkout-color-brand-accent-light:#79DBD4;--malga-checkout-color-brand-accent-normal:#39BFAD;--malga-checkout-color-brand-clean:#C3F4EF;--malga-checkout-color-brand-light:#79DBD4;--malga-checkout-color-brand-normal:#39BFAD;--malga-checkout-color-brand-middle:#2FAC9B;--malga-checkout-color-brand-dark:#147F70;--malga-checkout-color-grey-light:#666666;--malga-checkout-color-grey-normal:#4D4D4D;--malga-checkout-color-grey-middle:#333333;--malga-checkout-color-grey-dark:#1A1A1A;--malga-checkout-color-grey-darkness:#000000;--malga-checkout-color-accent-light:#ffffff;--malga-checkout-color-accent-normal:#F1F1F1;--malga-checkout-color-accent-middle:#CBCBCB;--malga-checkout-color-warning-light:#FFF8E6;--malga-checkout-color-warning-normal:#F9DF8D;--malga-checkout-color-warning-middle:#FFA400;--malga-checkout-color-warning-dark:#ED3A3D;--malga-checkout-color-modal-success:#00AE42;--malga-checkout-color-modal-error:#ED3A3D;--malga-checkout-color-modal-neutral:#4D4D4D;--malga-checkout-color-disabled:#F9F9F9;--malga-checkout-color-modal-action-button-error:#000000;--malga-checkout-color-modal-action-button-error-hover:#333333;--malga-checkout-color-modal-action-button-success:#000000;--malga-checkout-color-modal-action-button-success-hover:#333333;--malga-checkout-color-modal-action-button-success-font-color:#ffffff;--malga-checkout-color-modal-action-button-error-font-color:#ffffff;--malga-checkout-typography-family:\"Inter\", sans-serif;--malga-checkout-spacing-xxs:4px;--malga-checkout-spacing-xs:8px;--malga-checkout-spacing-sm:16px;--malga-checkout-spacing-default:24px;--malga-checkout-spacing-md:32px;--malga-checkout-spacing-lg:48px;--malga-checkout-spacing-xlg:64px;--malga-checkout-spacing-xxlg:96px;--malga-checkout-size-min-width:250px;--malga-checkout-border-radius-default:4px;--malga-checkout-border-radius-md:6px;--malga-checkout-border-radius-lg:20px;--malga-checkout-transition-slow:0.3s;--malga-checkout-transition-default:0.5s}.malga-payments__container{display:flex;width:100%;margin-left:auto;margin-right:auto}.malga-payments__content{display:flex;flex-direction:column;width:100%}.malga-payments__content>checkout-radio-field{margin-bottom:calc( var(--malga-checkout-spacing-xxs) + var(--malga-checkout-spacing-xs) )}.malga-payments__content>malga-payments-boleto>checkout-manual-payment,.malga-payments__content>malga-payments-pix>checkout-manual-payment{margin-bottom:var(--malga-checkout-spacing-sm)}.malga-payments__content>malga-payments-boleto>checkout-manual-payment>checkout-typography,.malga-payments__content>malga-payments-pix>checkout-manual-payment>checkout-typography{padding:0px var(--malga-checkout-spacing-sm)}";
const MalgaPayments = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.paymentFail = index.createEvent(this, "paymentFail", 7);
this.paymentMethods = ['credit', 'pix', 'boleto', 'drip'];
this.handlePaymentChange = (value) => {
payment.state.selectedPaymentMethod = value;
};
this.showCurrentPaymentMethod = (paymentMethod) => {
const showPaymentMethod = this.paymentMethods.includes(paymentMethod);
return showPaymentMethod;
};
}
renderCreditCardLabel() {
if (savedCards.state.hasCards) {
return i18n_es.Z('paymentMethods.card.newCardTitle', settings.state.locale);
}
return i18n_es.Z('paymentMethods.card.title', settings.state.locale);
}
render() {
return (index.h(index.Host, { class: { 'malga-payments__container': true } }, index.h("section", { class: { 'malga-payments__content': true } }, this.showCurrentPaymentMethod('credit') && (index.h(index.Fragment, null, settings.state.transactionConfig.customerId && (index.h("malga-payments-credit-saved-cards", null)), index.h("checkout-radio-field", { fullWidth: true, label: this.renderCreditCardLabel(), value: "credit", isChecked: payment.state.selectedPaymentMethod === 'credit', onClicked: () => this.handlePaymentChange('credit') }), payment.state.selectedPaymentMethod === 'credit' && (index.h("malga-payments-credit", null)))), this.showCurrentPaymentMethod('boleto') && (index.h(index.Fragment, null, index.h("checkout-radio-field", { fullWidth: true, label: i18n_es.Z('paymentMethods.boleto.title', settings.state.locale), value: "boleto", isChecked: payment.state.selectedPaymentMethod === 'boleto', onClicked: () => this.handlePaymentChange('boleto') }), payment.state.selectedPaymentMethod === 'boleto' && (index.h("malga-payments-boleto", null)))), this.showCurrentPaymentMethod('pix') && (index.h(index.Fragment, null, index.h("checkout-radio-field", { fullWidth: true, label: i18n_es.Z('paymentMethods.pix.title', settings.state.locale), value: "pix", endIcon: "pix", isChecked: payment.state.selectedPaymentMethod === 'pix', onClicked: () => this.handlePaymentChange('pix') }), payment.state.selectedPaymentMethod === 'pix' && (index.h("malga-payments-pix", { onPixPaymentFailed: ({ detail: { error } }) => this.paymentFail.emit({ error }) })))), this.showCurrentPaymentMethod('nupay') && (index.h(index.Fragment, null, index.h("checkout-radio-field", { fullWidth: true, label: i18n_es.Z('paymentMethods.nupay.title', settings.state.locale), value: "nupay", endIcon: "nubank", isChecked: payment.state.selectedPaymentMethod === 'nupay', onClicked: () => this.handlePaymentChange('nupay') }), payment.state.selectedPaymentMethod === 'nupay' && (index.h("malga-payments-nupay", null)))), this.showCurrentPaymentMethod('drip') && (index.h(index.Fragment, null, index.h("checkout-radio-field", { fullWidth: true, label: i18n_es.Z('paymentMethods.drip.title', settings.state.locale), value: "drip", endIcon: "drip", isChecked: payment.state.selectedPaymentMethod === 'drip', onClicked: () => this.handlePaymentChange('drip') }), index.h("malga-payments-drip", null))))));
}
};
MalgaPayments.style = malgaPaymentsCss;
exports.malga_payments = MalgaPayments;