@dnb/eufemia/extensions/payment-card/PaymentCard.js

DNB Eufemia Design System UI Library

"use client";

import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Context from "../../shared/Context.js";
import Provider from "../../shared/Provider.js";
import { isTrue, validateDOMAttributes, extendPropsWithContextInClassComponent } from "../../shared/component-helper.js";
import { spacingPropTypes, createSpacingClasses } from "../../components/space/SpacingHelper.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../../components/skeleton/SkeletonHelper.js";
import { formatCardNumber } from "./components/CardNumber.js";
import CardFigure from "./components/CardFigure.js";
import { ProductType, CardType, BankAxeptType } from "./utils/Types.js";
import Designs, { defaultDesign } from "./utils/CardDesigns.js";
import cardProducts from "./utils/cardProducts.js";
export { Designs, ProductType, CardType, BankAxeptType };
export { formatCardNumber };
const translationDefaultPropsProps = {
  text_blocked: null,
  text_expired: null,
  text_not_active: null,
  text_new_order: null,
  text_order_in_process: null,
  text_replaced: null,
  text_renewed: null,
  text_new: null,
  text_unknown: null
};
export default class PaymentCard extends React.PureComponent {
  render() {
    var _this$context;
    const props = extendPropsWithContextInClassComponent(this.props, PaymentCard.defaultProps, {
      locale: this.context.locale
    }, {
      skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
    });
    const {
      product_code,
      card_number,
      card_status,
      variant,
      digits,
      id,
      raw_data,
      locale,
      skeleton,
      className,
      class: _className,
      children,
      ...attributes
    } = props;
    const cardData = raw_data || getCardData(product_code);
    const params = {
      className: classnames(`dnb-payment-card dnb-payment-card--${variant}`, createSkeletonClass(null, skeleton, this.context), createSpacingClasses(props), className, _className),
      ...attributes
    };
    skeletonDOMAttributes(params, skeleton, this.context);
    validateDOMAttributes(this.props, params);
    return React.createElement(Provider, {
      locale: locale
    }, React.createElement(Context.Consumer, null, ({
      translation
    }) => {
      const translations = extendPropsWithContextInClassComponent(this.props, translationDefaultPropsProps, translation.PaymentCard);
      return React.createElement("figure", params, React.createElement("figcaption", {
        className: "dnb-sr-only dnb-payment-card__figcaption"
      }, cardData.productName), React.createElement(CardFigure, {
        id: id,
        skeleton: isTrue(skeleton),
        compact: variant === 'compact',
        data: cardData,
        cardStatus: card_status,
        cardNumber: formatCardNumber(card_number, parseFloat(digits)),
        translations: translations
      }));
    }));
  }
}
_defineProperty(PaymentCard, "contextType", Context);
_defineProperty(PaymentCard, "defaultProps", {
  digits: 8,
  locale: null,
  card_status: 'active',
  variant: 'normal',
  id: null,
  raw_data: null,
  skeleton: false,
  className: null,
  children: null,
  ...translationDefaultPropsProps
});
process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = {
  product_code: PropTypes.string.isRequired,
  card_number: PropTypes.string.isRequired,
  card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active', 'new_order', 'new', 'order_in_process', 'renewed', 'replaced', 'unknown']),
  variant: PropTypes.oneOf(['normal', 'compact']),
  digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  raw_data: PropTypes.shape({
    productCode: PropTypes.string.isRequired,
    productName: PropTypes.string.isRequired,
    displayName: PropTypes.string.isRequired,
    cardDesign: PropTypes.object.isRequired,
    cardType: PropTypes.object.isRequired,
    productType: PropTypes.object.isRequired,
    bankAxept: PropTypes.object.isRequired
  }),
  id: PropTypes.string,
  locale: PropTypes.string,
  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  ...spacingPropTypes,
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
} : void 0;
export const getCardData = productCode => {
  const card = cardProducts.find(item => item.productCode === productCode);
  return card || defaultCard(productCode);
};
const defaultCard = productCode => ({
  productCode,
  productName: '',
  displayName: '',
  cardDesign: defaultDesign,
  cardType: CardType.None,
  productType: ProductType.None,
  bankAxept: BankAxeptType.None
});
//# sourceMappingURL=PaymentCard.js.map