@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 = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Provider = _interopRequireDefault(require("../../shared/Provider.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../../components/space/SpacingUtils.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"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
const translationDefaultPropsProps = {
  textBlocked: null,
  textExpired: null,
  textNotActive: null,
  textNewOrder: null,
  textOrderInProcess: null,
  textReplaced: null,
  textRenewed: null,
  textNew: null,
  textUnknown: null
};
const paymentCardDefaultProps = {
  digits: 8,
  locale: null,
  cardStatus: 'active',
  variant: 'normal',
  id: null,
  rawData: null,
  skeleton: false,
  className: null,
  children: null
};
function PaymentCard(props) {
  const context = (0, _react.useContext)(_Context.default);
  const extendedProps = (0, _componentHelper.extendExistingPropsWithContext)({
    ...paymentCardDefaultProps,
    ...(0, _componentHelper.removeUndefinedProps)({
      ...props
    })
  }, paymentCardDefaultProps, {
    locale: context.locale
  }, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const {
    productCode,
    cardNumber,
    cardStatus,
    variant,
    digits,
    id,
    rawData,
    locale,
    skeleton,
    className,
    class: _className,
    children,
    ...attributes
  } = extendedProps;
  const cardData = rawData || getCardData(productCode);
  const params = (0, _SpacingUtils.applySpacing)(extendedProps, {
    className: (0, _clsx.default)(`dnb-payment-card dnb-payment-card--${variant}`, (0, _SkeletonHelper.createSkeletonClass)(null, skeleton, context), className, _className),
    ...attributes
  });
  (0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, context);
  (0, _componentHelper.validateDOMAttributes)(props, params);
  return (0, _jsxRuntime.jsx)(_Provider.default, {
    locale: locale,
    children: (0, _jsxRuntime.jsx)(PaymentCardContent, {
      props: props,
      params: params,
      cardData: cardData,
      cardStatus: cardStatus,
      cardNumber: cardNumber,
      digits: digits,
      id: id,
      skeleton: skeleton,
      variant: variant
    })
  });
}
function PaymentCardContent({
  props,
  params,
  cardData,
  cardStatus,
  cardNumber,
  digits,
  id,
  skeleton,
  variant
}) {
  const {
    translation
  } = (0, _react.useContext)(_Context.default);
  const translations = (0, _componentHelper.extendExistingPropsWithContext)({
    ...translationDefaultPropsProps,
    ...(0, _componentHelper.removeUndefinedProps)({
      ...props
    })
  }, translationDefaultPropsProps, translation.PaymentCard);
  return (0, _jsxRuntime.jsxs)("figure", {
    ...params,
    children: [(0, _jsxRuntime.jsx)("figcaption", {
      className: "dnb-sr-only dnb-payment-card__figcaption",
      children: cardData.productName
    }), (0, _jsxRuntime.jsx)(_CardFigure.default, {
      id: id,
      skeleton: skeleton,
      compact: variant === 'compact',
      data: cardData,
      cardStatus: cardStatus,
      cardNumber: (0, _CardNumber.formatCardNumber)(cardNumber, parseFloat(String(digits))),
      translations: translations
    })]
  });
}
var _default = exports.default = PaymentCard;
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