@malga-checkout/core
Version:
Core components for Malga Checkout
35 lines (31 loc) • 6.05 kB
JavaScript
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-2a32ffa8.js';
import { Z } from './i18n.es-92f2761e.js';
import { s as state } from './payment-050c6ea4.js';
import { s as state$2 } from './settings-00efd3d2.js';
import { s as state$1 } from './saved-cards-730e6496.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) {
registerInstance(this, hostRef);
this.paymentFail = createEvent(this, "paymentFail", 7);
this.paymentMethods = ['credit', 'pix', 'boleto', 'drip'];
this.handlePaymentChange = (value) => {
state.selectedPaymentMethod = value;
};
this.showCurrentPaymentMethod = (paymentMethod) => {
const showPaymentMethod = this.paymentMethods.includes(paymentMethod);
return showPaymentMethod;
};
}
renderCreditCardLabel() {
if (state$1.hasCards) {
return Z('paymentMethods.card.newCardTitle', state$2.locale);
}
return Z('paymentMethods.card.title', state$2.locale);
}
render() {
return (h(Host, { class: { 'malga-payments__container': true } }, h("section", { class: { 'malga-payments__content': true } }, this.showCurrentPaymentMethod('credit') && (h(Fragment, null, state$2.transactionConfig.customerId && (h("malga-payments-credit-saved-cards", null)), h("checkout-radio-field", { fullWidth: true, label: this.renderCreditCardLabel(), value: "credit", isChecked: state.selectedPaymentMethod === 'credit', onClicked: () => this.handlePaymentChange('credit') }), state.selectedPaymentMethod === 'credit' && (h("malga-payments-credit", null)))), this.showCurrentPaymentMethod('boleto') && (h(Fragment, null, h("checkout-radio-field", { fullWidth: true, label: Z('paymentMethods.boleto.title', state$2.locale), value: "boleto", isChecked: state.selectedPaymentMethod === 'boleto', onClicked: () => this.handlePaymentChange('boleto') }), state.selectedPaymentMethod === 'boleto' && (h("malga-payments-boleto", null)))), this.showCurrentPaymentMethod('pix') && (h(Fragment, null, h("checkout-radio-field", { fullWidth: true, label: Z('paymentMethods.pix.title', state$2.locale), value: "pix", endIcon: "pix", isChecked: state.selectedPaymentMethod === 'pix', onClicked: () => this.handlePaymentChange('pix') }), state.selectedPaymentMethod === 'pix' && (h("malga-payments-pix", { onPixPaymentFailed: ({ detail: { error } }) => this.paymentFail.emit({ error }) })))), this.showCurrentPaymentMethod('nupay') && (h(Fragment, null, h("checkout-radio-field", { fullWidth: true, label: Z('paymentMethods.nupay.title', state$2.locale), value: "nupay", endIcon: "nubank", isChecked: state.selectedPaymentMethod === 'nupay', onClicked: () => this.handlePaymentChange('nupay') }), state.selectedPaymentMethod === 'nupay' && (h("malga-payments-nupay", null)))), this.showCurrentPaymentMethod('drip') && (h(Fragment, null, h("checkout-radio-field", { fullWidth: true, label: Z('paymentMethods.drip.title', state$2.locale), value: "drip", endIcon: "drip", isChecked: state.selectedPaymentMethod === 'drip', onClicked: () => this.handlePaymentChange('drip') }), h("malga-payments-drip", null))))));
}
};
MalgaPayments.style = malgaPaymentsCss;
export { MalgaPayments as malga_payments };