@malga-checkout/core/dist/collection/components/malga-payments-credit/partials/malga-payments-credit-saved-cards/malga-payments-credit-saved-cards.js

Core components for Malga Checkout

import { Component, Host, h } from '@stencil/core';
import { getCardBrand } from '@malga-checkout/utils';
import payment from '../../../../stores/payment';
import savedCards from '../../../../stores/saved-cards';
import settings from '../../../../stores/settings';
import dialog from '../../../../stores/dialog';
import { MalgaPaymentsCreditSavedCardsService } from './malga-payments-credit-saved-cards.service';
import { centsToReal } from '../malga-payments-credit-form/malga-payments-credit-form.utils';
import { t } from '@malga-checkout/i18n';
export class MalgaPaymentsCreditSavedCards {
  constructor() {
    this.handleSelectCard = (value, cardId) => {
      payment.selectedPaymentMethod = value;
      payment.cardId = cardId;
    };
    this.handleCvvChange = (event) => {
      payment.cvv = event.target.value.trim();
    };
    this.handleInstallmentsChange = (event) => {
      payment.installments = event.target.value;
    };
    this.renderInstallmentOptions = () => {
      const installmentOptions = Array.from({
        length: settings.paymentMethods.credit.installments.quantity,
      }).map((_, index) => {
        const currentInstallment = index + 1;
        const installmentValue = settings.transactionConfig.amount / currentInstallment;
        return {
          label: `${currentInstallment}x ${centsToReal(installmentValue, settings.transactionConfig.currency)}, ${t('common.total', settings.locale)} ${centsToReal(settings.transactionConfig.amount, settings.transactionConfig.currency)}`,
          value: currentInstallment,
        };
      });
      return installmentOptions;
    };
    this.fetchSavedCards = () => {
      const savedCardsService = new MalgaPaymentsCreditSavedCardsService();
      savedCardsService.listSavedCards();
    };
    this.handleShowDialog = (dialogData) => {
      dialog.configs = Object.assign(Object.assign({}, dialog.configs), dialogData);
    };
    this.handleErrorModalButtonClicked = () => {
      this.handleShowDialog({ open: false });
    };
    this.handleSuccessModalButtonClicked = () => {
      if (settings.dialogConfig.successRedirectUrl) {
        location.assign(settings.dialogConfig.successRedirectUrl);
      }
      this.handleShowDialog({ open: false });
    };
  }
  componentWillLoad() {
    this.fetchSavedCards();
  }
  renderSavedCards() {
    const mappedCards = savedCards.cards
      .filter((card) => card.status !== 'failed')
      .map((card, index) => {
      var _a, _b, _c;
      const value = `credit-${index}`;
      const isChecked = payment.selectedPaymentMethod === value;
      const validationCvv = payment.cvv.trim().length && payment.cvv.trim().length < 3;
      const validationInstallments = payment.installments === 'none';
      return (h("div", { class: { 'malga-payments-credit-saved-cards__card': true } },
        h("checkout-radio-field", { fullWidth: true, label: `${t('paymentMethods.card.savedCards.card', settings.locale)} ${card.last4digits}`, value: value, endIcon: getCardBrand(card.first6digits), isChecked: isChecked, onClicked: () => this.handleSelectCard(value, card.id) }),
        isChecked && (h("div", { class: { 'malga-payments-credit-saved-cards__content': true } },
          h("checkout-typography", { variation: "field", color: "dark", content: t('paymentMethods.card.savedCards.fields.cvv.description', settings.locale) }),
          h("div", { class: {
              'malga-payments-credit-saved-cards__cvv-container': true,
            } },
            h("checkout-text-field", { fullWidth: true, name: "cvv", label: t('paymentMethods.card.savedCards.fields.cvv.label', settings.locale), mask: "9999", value: payment.cvv, onChanged: this.handleCvvChange, inputmode: "numeric", hasValidation: validationCvv, hasError: validationCvv }),
            !!validationCvv && (h("checkout-error-message", { message: t('paymentMethods.card.savedCards.fields.cvv.errorMessage', settings.locale) }))),
          ((_c = (_b = (_a = settings.paymentMethods) === null || _a === void 0 ? void 0 : _a.credit) === null || _b === void 0 ? void 0 : _b.installments) === null || _c === void 0 ? void 0 : _c.show) && (h("div", null,
            h("checkout-select-field", { fullWidth: true, name: "installments", label: t('paymentMethods.card.savedCards.fields.installments.label', settings.locale), value: payment.installments, onChanged: this.handleInstallmentsChange, options: this.renderInstallmentOptions(), hasError: validationInstallments }),
            !!validationInstallments && (h("checkout-error-message", { message: t('paymentMethods.card.savedCards.fields.installments.errorMessage', settings.locale) }))))))));
    });
    return mappedCards;
  }
  render() {
    return (h(Host, { class: { 'malga-payments-credit-saved-cards__container': true } },
      this.renderSavedCards(),
      settings.dialogConfig.show && dialog.configs.open && (h("checkout-modal", { locale: settings.locale, currency: settings.transactionConfig.currency, mode: dialog.configs.mode, open: dialog.configs.open, amount: dialog.configs.amount, errorDescription: dialog.configs.errorMessage, actionButtonLabel: settings.dialogConfig.actionButtonLabel, successActionButtonLabel: settings.dialogConfig.successActionButtonLabel, errorActionButtonLabel: settings.dialogConfig.errorActionButtonLabel, onSuccessButtonClicked: this.handleSuccessModalButtonClicked, onErrorButtonClicked: this.handleErrorModalButtonClicked }))));
  }
  static get is() { return "malga-payments-credit-saved-cards"; }
  static get originalStyleUrls() { return {
    "$": ["malga-payments-credit-saved-cards.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["malga-payments-credit-saved-cards.css"]
  }; }
}