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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "BankAxeptType", {
  enumerable: true,
  get: function () {
    return _Types.BankAxeptType;
  }
});
Object.defineProperty(exports, "CardType", {
  enumerable: true,
  get: function () {
    return _Types.CardType;
  }
});
Object.defineProperty(exports, "Designs", {
  enumerable: true,
  get: function () {
    return _CardDesigns.default;
  }
});
Object.defineProperty(exports, "ProductType", {
  enumerable: true,
  get: function () {
    return _Types.ProductType;
  }
});
exports.default = void 0;
Object.defineProperty(exports, "formatCardNumber", {
  enumerable: true,
  get: function () {
    return _CardNumber.formatCardNumber;
  }
});
exports.getCardData = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Provider = _interopRequireDefault(require("../../shared/Provider.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingHelper = require("../../components/space/SpacingHelper.js");
var _SkeletonHelper = require("../../components/skeleton/SkeletonHelper.js");
var _CardNumber = require("./components/CardNumber.js");
var _CardFigure = _interopRequireDefault(require("./components/CardFigure.js"));
var _Types = require("./utils/Types.js");
var _CardDesigns = _interopRequireWildcard(require("./utils/CardDesigns.js"));
var _cardProducts = _interopRequireDefault(require("./utils/cardProducts.js"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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
};
class PaymentCard extends _react.default.PureComponent {
  render() {
    var _this$context;
    const props = (0, _componentHelper.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: (0, _classnames.default)(`dnb-payment-card dnb-payment-card--${variant}`, (0, _SkeletonHelper.createSkeletonClass)(null, skeleton, this.context), (0, _SpacingHelper.createSpacingClasses)(props), className, _className),
      ...attributes
    };
    (0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, this.context);
    (0, _componentHelper.validateDOMAttributes)(this.props, params);
    return _react.default.createElement(_Provider.default, {
      locale: locale
    }, _react.default.createElement(_Context.default.Consumer, null, ({
      translation
    }) => {
      const translations = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, translationDefaultPropsProps, translation.PaymentCard);
      return _react.default.createElement("figure", params, _react.default.createElement("figcaption", {
        className: "dnb-sr-only dnb-payment-card__figcaption"
      }, cardData.productName), _react.default.createElement(_CardFigure.default, {
        id: id,
        skeleton: (0, _componentHelper.isTrue)(skeleton),
        compact: variant === 'compact',
        data: cardData,
        cardStatus: card_status,
        cardNumber: (0, _CardNumber.formatCardNumber)(card_number, parseFloat(digits)),
        translations: translations
      }));
    }));
  }
}
exports.default = PaymentCard;
_defineProperty(PaymentCard, "contextType", _Context.default);
_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.default.string.isRequired,
  card_number: _propTypes.default.string.isRequired,
  card_status: _propTypes.default.oneOf(['active', 'blocked', 'expired', 'not_active', 'new_order', 'new', 'order_in_process', 'renewed', 'replaced', 'unknown']),
  variant: _propTypes.default.oneOf(['normal', 'compact']),
  digits: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  raw_data: _propTypes.default.shape({
    productCode: _propTypes.default.string.isRequired,
    productName: _propTypes.default.string.isRequired,
    displayName: _propTypes.default.string.isRequired,
    cardDesign: _propTypes.default.object.isRequired,
    cardType: _propTypes.default.object.isRequired,
    productType: _propTypes.default.object.isRequired,
    bankAxept: _propTypes.default.object.isRequired
  }),
  id: _propTypes.default.string,
  locale: _propTypes.default.string,
  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  ..._SpacingHelper.spacingPropTypes,
  className: _propTypes.default.string,
  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func])
} : void 0;
const getCardData = productCode => {
  const card = _cardProducts.default.find(item => item.productCode === productCode);
  return card || defaultCard(productCode);
};
exports.getCardData = getCardData;
const defaultCard = productCode => ({
  productCode,
  productName: '',
  displayName: '',
  cardDesign: _CardDesigns.defaultDesign,
  cardType: _Types.CardType.None,
  productType: _Types.ProductType.None,
  bankAxept: _Types.BankAxeptType.None
});
//# sourceMappingURL=PaymentCard.js.map