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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["product_code", "card_number", "card_status", "variant", "digits", "id", "raw_data", "locale", "skeleton", "className", "class", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Context from '../../shared/Context';
import Provider from '../../shared/Provider';
import { isTrue, validateDOMAttributes, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
import { spacingPropTypes, createSpacingClasses } from '../../components/space/SpacingHelper';
import { skeletonDOMAttributes, createSkeletonClass } from '../../components/skeleton/SkeletonHelper';
import P from '../../elements/P';
import { ProductType, CardType, BankAxeptType } from './utils/Types';
import Designs, { defaultDesign } from './utils/CardDesigns';
import cardProducts from './utils/cardProducts';
import { ProductLogo, TypeLogo, BankLogo, StatusIcon, BankAxeptLogo } from './icons';
export { Designs, ProductType, CardType, BankAxeptType };
const cardDataPropTypes = process.env.NODE_ENV !== "production" ? 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
}) : {};
const translationDefaultPropsProps = {
  text_card_number: null,
  text_expired: null,
  text_blocked: null,
  text_not_active: null,
  text_order_in_process: null,
  text_renewed: null,
  text_replaced: 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
      } = props,
      attributes = _objectWithoutProperties(props, _excluded);
    const cardData = raw_data || getCardData(product_code);
    const params = _objectSpread({
      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(NormalCard, {
        id: id,
        skeleton: isTrue(skeleton),
        data: cardData,
        cardStatus: card_status,
        cardNumber: formatCardNumber(card_number, parseFloat(digits)),
        translations: translations
      }));
    }));
  }
}
_defineProperty(PaymentCard, "contextType", Context);
_defineProperty(PaymentCard, "defaultProps", _objectSpread({
  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 = _objectSpread(_objectSpread({
  product_code: PropTypes.string.isRequired,
  card_number: PropTypes.string.isRequired,
  card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active', 'order_in_process', 'renewed', 'replaced', 'unknown']),
  variant: PropTypes.oneOf(['normal', 'compact']),
  digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  raw_data: cardDataPropTypes,
  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;
const formatCardNumberRegex = /(?=(?:....)*$)/g;
export const formatCardNumber = (cardNumber, digits = 8) => {
  if (!cardNumber) {
    return cardNumber;
  }
  if (digits && digits <= cardNumber.length) {
    return cardNumber.slice(cardNumber.length - digits, cardNumber.length).replace(formatCardNumberRegex, ' ').trim();
  }
  return cardNumber.replace(formatCardNumberRegex, ' ').trim();
};
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
});
process.env.NODE_ENV !== "production" ? StatusOverlay.propTypes = {
  cardStatus: PropTypes.string.isRequired,
  translations: PropTypes.object.isRequired
} : void 0;
const BlockingOverlay = ({
  cardStatus,
  text
}, skeleton) => {
  return React.createElement("div", {
    className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
  }, React.createElement("div", {
    className: "dnb-payment-card__blocking__center"
  }, React.createElement(StatusIcon, {
    status: cardStatus
  }), React.createElement(P, {
    top: "xx-small"
  }, text)));
};
function StatusOverlay({
  cardStatus,
  translations
}) {
  const cardStatusMap = {
    not_active: translations.text_not_active,
    order_in_process: translations.text_order_in_process,
    renewed: translations.text_renewed,
    replaced: translations.text_replaced,
    blocked: translations.text_blocked,
    expired: translations.text_expired,
    unknown: translations.text_unknown
  };
  return cardStatusMap[cardStatus] ? React.createElement(BlockingOverlay, {
    cardStatus: cardStatus,
    text: cardStatusMap[cardStatus]
  }) : null;
}
process.env.NODE_ENV !== "production" ? CardText.propTypes = {
  cardNumber: PropTypes.string.isRequired,
  translations: PropTypes.object.isRequired,
  skeleton: PropTypes.bool.isRequired
} : void 0;
function CardText({
  cardNumber,
  translations,
  skeleton
}) {
  return React.createElement("span", {
    className: classnames('dnb-payment-card__card__wrapper', createSkeletonClass('font', skeleton))
  }, React.createElement(P, {
    className: "dnb-payment-card__card__holder",
    modifier: "x-small medium"
  }, translations.text_card_number), React.createElement(P, {
    className: "dnb-payment-card__card__numbers"
  }, cardNumber));
}
process.env.NODE_ENV !== "production" ? NormalCard.propTypes = {
  id: PropTypes.string,
  skeleton: PropTypes.bool,
  data: cardDataPropTypes.isRequired,
  cardStatus: PropTypes.string.isRequired,
  cardNumber: PropTypes.string.isRequired,
  translations: PropTypes.object.isRequired
} : void 0;
function NormalCard({
  data,
  cardStatus,
  cardNumber,
  id = null,
  skeleton = null,
  translations
}) {
  var _data$cardDesign;
  return React.createElement("div", _extends({
    id: id,
    className: `dnb-payment-card__card dnb-payment-card__${data.cardDesign.cardStyle}`
  }, (_data$cardDesign = data.cardDesign) !== null && _data$cardDesign !== void 0 && _data$cardDesign.backgroundImage ? {
    style: {
      backgroundImage: `url(${data.cardDesign.backgroundImage})`
    }
  } : {}), React.createElement("div", {
    className: "dnb-payment-card__card__content"
  }, React.createElement("div", {
    className: "dnb-payment-card__card__top"
  }, React.createElement(BankLogo, {
    logoType: data.cardDesign.bankLogo
  }), React.createElement(ProductLogo, {
    productType: data.productType,
    cardDesign: data.cardDesign
  }), React.createElement(BankAxeptLogo, {
    bankAxept: data.bankAxept,
    cardDesign: data.cardDesign
  })), React.createElement("div", {
    className: "dnb-payment-card__card__bottom"
  }, React.createElement(CardText, {
    cardNumber: cardNumber,
    displayName: data.displayName,
    translations: translations,
    skeleton: skeleton
  }), React.createElement(TypeLogo, {
    cardType: data.cardType,
    cardDesign: data.cardDesign
  }))), React.createElement(StatusOverlay, {
    cardStatus: cardStatus,
    translations: translations
  }));
}
//# sourceMappingURL=PaymentCard.js.map