@malga-checkout/core

Version:
Core components for Malga Checkout
48 lines (47 loc) • 2.67 kB
JavaScript
import { Component, Host, h, State } from '@stencil/core';
import credit from '../../stores/credit';
import settings from '../../stores/settings';
import dialog from '../../stores/dialog';
export class MalgaPaymentsCredit {
  constructor() {
    this.currentFieldFocused = 'cardNumber';
    this.currentCardMask = '';
    this.currentTypeCard = '';
    this.handleShowDialog = (dialogData) => {
      dialog.configs = Object.assign(Object.assign({}, dialog.configs), dialogData);
    };
    this.handleSetFocusedField = (field) => {
      this.currentFieldFocused = field;
    };
    this.handleErrorModalButtonClicked = () => {
      this.handleShowDialog({ open: false });
    };
    this.handleSuccessModalButtonClicked = () => {
      if (settings.dialogConfig.successRedirectUrl) {
        location.assign(settings.dialogConfig.successRedirectUrl);
      }
      this.handleShowDialog({ open: false });
    };
  }
  render() {
    return (h(Host, { class: { 'malga-payments-credit__container': true } },
      settings.paymentMethods.credit.showCreditCard && (h("checkout-credit-card", { locale: settings.locale, focused: this.currentFieldFocused, cvv: credit.form.cvv, expiry: credit.form.expirationDate, name: credit.form.name, number: credit.form.cardNumber, mask: this.currentCardMask, issuer: this.currentTypeCard })),
      h("malga-payments-credit-form", { onCurrentFieldChange: ({ detail: { field } }) => this.handleSetFocusedField(field), onCardMaskChange: ({ detail: { mask, type } }) => {
          this.currentCardMask = mask;
          this.currentTypeCard = type;
        } }),
      settings.dialogConfig.show && dialog.configs.open && (h("checkout-modal", { locale: settings.locale, isSession: !!settings.sessionId, hasSuccessRedirectUrl: !!settings.dialogConfig.successRedirectUrl, 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"; }
  static get originalStyleUrls() { return {
    "$": ["malga-payments-credit.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["malga-payments-credit.css"]
  }; }
  static get states() { return {
    "currentFieldFocused": {},
    "currentCardMask": {},
    "currentTypeCard": {}
  }; }
}