@malga-checkout/core
Version:
Core components for Malga Checkout
95 lines (94 loc) • 4.48 kB
JavaScript
import { Component, Host, h, Prop, Event, Fragment, } from '@stencil/core';
import { t } from '@malga-checkout/i18n';
import payment from '../../stores/payment';
import settings from '../../stores/settings';
import savedCards from '../../stores/saved-cards';
export class MalgaPayments {
constructor() {
this.paymentMethods = ['credit', 'pix', 'boleto', 'drip'];
this.handlePaymentChange = (value) => {
payment.selectedPaymentMethod = value;
};
this.showCurrentPaymentMethod = (paymentMethod) => {
const showPaymentMethod = this.paymentMethods.includes(paymentMethod);
return showPaymentMethod;
};
}
renderCreditCardLabel() {
if (savedCards.hasCards) {
return t('paymentMethods.card.newCardTitle', settings.locale);
}
return t('paymentMethods.card.title', settings.locale);
}
render() {
return (h(Host, { class: { 'malga-payments__container': true } },
h("section", { class: { 'malga-payments__content': true } },
this.showCurrentPaymentMethod('credit') && (h(Fragment, null,
settings.transactionConfig.customerId && (h("malga-payments-credit-saved-cards", null)),
h("checkout-radio-field", { fullWidth: true, label: this.renderCreditCardLabel(), value: "credit", isChecked: payment.selectedPaymentMethod === 'credit', onClicked: () => this.handlePaymentChange('credit') }),
payment.selectedPaymentMethod === 'credit' && (h("malga-payments-credit", null)))),
this.showCurrentPaymentMethod('boleto') && (h(Fragment, null,
h("checkout-radio-field", { fullWidth: true, label: t('paymentMethods.boleto.title', settings.locale), value: "boleto", isChecked: payment.selectedPaymentMethod === 'boleto', onClicked: () => this.handlePaymentChange('boleto') }),
payment.selectedPaymentMethod === 'boleto' && (h("malga-payments-boleto", null)))),
this.showCurrentPaymentMethod('pix') && (h(Fragment, null,
h("checkout-radio-field", { fullWidth: true, label: t('paymentMethods.pix.title', settings.locale), value: "pix", endIcon: "pix", isChecked: payment.selectedPaymentMethod === 'pix', onClicked: () => this.handlePaymentChange('pix') }),
payment.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: t('paymentMethods.nupay.title', settings.locale), value: "nupay", endIcon: "nubank", isChecked: payment.selectedPaymentMethod === 'nupay', onClicked: () => this.handlePaymentChange('nupay') }),
payment.selectedPaymentMethod === 'nupay' && (h("malga-payments-nupay", null)))),
this.showCurrentPaymentMethod('drip') && (h(Fragment, null,
h("checkout-radio-field", { fullWidth: true, label: t('paymentMethods.drip.title', settings.locale), value: "drip", endIcon: "drip", isChecked: payment.selectedPaymentMethod === 'drip', onClicked: () => this.handlePaymentChange('drip') }),
h("malga-payments-drip", null))))));
}
static get is() { return "malga-payments"; }
static get originalStyleUrls() { return {
"$": ["malga-payments.scss"]
}; }
static get styleUrls() { return {
"$": ["malga-payments.css"]
}; }
static get properties() { return {
"paymentMethods": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "PaymentMethods",
"resolved": "PaymentMethodsType[]",
"references": {
"PaymentMethods": {
"location": "import",
"path": "./malga-payments.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "['credit', 'pix', 'boleto', 'drip']"
}
}; }
static get events() { return [{
"method": "paymentFail",
"name": "paymentFail",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n error: MalgaPaymentsError\n }",
"resolved": "{ error: MalgaPaymentsError; }",
"references": {
"MalgaPaymentsError": {
"location": "import",
"path": "../../types/malga-payments-error.types"
}
}
}
}]; }
}