@dnb/eufemia/cjs/extensions/payment-card/components/CardFigure.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _index = require("../icons/index.js");
var _StatusOverlay = _interopRequireWildcard(require("./StatusOverlay.js"));
var _CardNumber = _interopRequireDefault(require("./CardNumber.js"));
var _CardType = _interopRequireDefault(require("./CardType.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _div;
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 CardFigure({
  data,
  cardStatus,
  cardNumber,
  id = null,
  skeleton = false,
  compact = false,
  translations
}) {
  var _data$cardDesign;
  const cardClasses = `dnb-payment-card__card dnb-payment-card__${data.cardDesign.cardStyle} ${(0, _StatusOverlay.isCardBlocked)(cardStatus) ? 'dnb-payment-card__card--blocked' : ''}`;
  const ProviderIcons = () => {
    const multipleProviders = data.bankAxept.tag === 'BankAxept' && data.cardType.tag !== 'None';
    return (0, _jsxRuntime.jsxs)("div", {
      className: `dnb-payment-card__card__providers ${multipleProviders ? 'dnb-payment-card__card__providers--multiple' : ''}`,
      children: [(0, _jsxRuntime.jsx)(_index.BankAxeptLogo, {
        bankAxept: data.bankAxept,
        cardDesign: data.cardDesign
      }), multipleProviders && (_div || (_div = (0, _jsxRuntime.jsx)("div", {
        className: "provider--separator"
      }))), (0, _jsxRuntime.jsx)(_index.TypeLogo, {
        cardType: data.cardType,
        cardDesign: data.cardDesign
      })]
    });
  };
  return (0, _jsxRuntime.jsxs)("div", {
    className: "dnb-payment-card__card__wrapper",
    children: [(0, _jsxRuntime.jsx)("div", {
      id: id,
      className: cardClasses,
      ...((_data$cardDesign = data.cardDesign) !== null && _data$cardDesign !== void 0 && _data$cardDesign.backgroundImage ? {
        style: {
          backgroundImage: `url(${data.cardDesign.backgroundImage})`
        }
      } : {}),
      children: (0, _jsxRuntime.jsxs)("div", {
        className: "dnb-payment-card__card__content",
        children: [(0, _jsxRuntime.jsxs)("div", {
          className: "dnb-payment-card__card__top",
          children: [(0, _jsxRuntime.jsxs)("div", {
            className: "dnb-payment-card__card__top__left",
            children: [(0, _jsxRuntime.jsx)(_index.BankLogo, {
              logoType: data.cardDesign.bankLogo
            }), (0, _jsxRuntime.jsx)(_index.ProductLogo, {
              productType: data.productType,
              cardDesign: data.cardDesign
            })]
          }), (0, _jsxRuntime.jsx)("div", {
            className: "dnb-payment-card__card__top__right",
            children: compact ? (0, _jsxRuntime.jsx)(ProviderIcons, {}) : (0, _jsxRuntime.jsx)(_CardType.default, {
              isCredit: data.bankAxept.tag === 'Credit',
              skeleton: skeleton
            })
          })]
        }), !compact && (0, _jsxRuntime.jsxs)("div", {
          className: "dnb-payment-card__card__bottom",
          children: [(0, _jsxRuntime.jsx)("div", {
            className: "dnb-payment-card__card__bottom__left",
            children: (0, _jsxRuntime.jsx)(_CardNumber.default, {
              cardNumber: cardNumber,
              skeleton: skeleton
            })
          }), (0, _jsxRuntime.jsx)("div", {
            className: "dnb-payment-card__card__bottom__right",
            children: (0, _jsxRuntime.jsx)(ProviderIcons, {})
          })]
        })]
      })
    }), !compact && (0, _jsxRuntime.jsx)(_StatusOverlay.default, {
      cardStatus: cardStatus,
      cardDesign: data.cardDesign.cardStyle,
      translations: translations
    })]
  });
}
var _default = exports.default = CardFigure;
//# sourceMappingURL=CardFigure.js.map