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

DNB Eufemia Design System UI Library

"use strict";

require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.cardDataPropTypes = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Types = require("../utils/Types");
var _icons = require("../icons");
var _StatusOverlay = _interopRequireWildcard(require("./StatusOverlay"));
var _CardNumber = _interopRequireDefault(require("./CardNumber"));
var _CardType = _interopRequireDefault(require("./CardType"));
var _div;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const cardDataPropTypes = exports.cardDataPropTypes = _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
});
process.env.NODE_ENV !== "production" ? CardFigure.propTypes = {
  id: _propTypes.default.string,
  skeleton: _propTypes.default.bool,
  compact: _propTypes.default.bool,
  data: cardDataPropTypes.isRequired,
  cardStatus: _propTypes.default.string.isRequired,
  cardNumber: _propTypes.default.string.isRequired,
  translations: _propTypes.default.object.isRequired
} : void 0;
function CardFigure(_ref) {
  var _data$cardDesign;
  let {
    data,
    cardStatus,
    cardNumber,
    id = null,
    skeleton = false,
    compact = false,
    translations
  } = _ref;
  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 === _Types.BankAxeptType.BankAxept && data.cardType !== _Types.CardType.None;
    return _react.default.createElement("div", {
      className: `dnb-payment-card__card__providers ${multipleProviders ? 'dnb-payment-card__card__providers--multiple' : ''}`
    }, _react.default.createElement(_icons.BankAxeptLogo, {
      bankAxept: data.bankAxept,
      cardDesign: data.cardDesign
    }), multipleProviders && (_div || (_div = _react.default.createElement("div", {
      className: "provider--separator"
    }))), _react.default.createElement(_icons.TypeLogo, {
      cardType: data.cardType,
      cardDesign: data.cardDesign
    }));
  };
  return _react.default.createElement("div", {
    className: "dnb-payment-card__card__wrapper"
  }, _react.default.createElement("div", _extends({
    id: id,
    className: cardClasses
  }, (_data$cardDesign = data.cardDesign) !== null && _data$cardDesign !== void 0 && _data$cardDesign.backgroundImage ? {
    style: {
      backgroundImage: `url(${data.cardDesign.backgroundImage})`
    }
  } : {}), _react.default.createElement("div", {
    className: "dnb-payment-card__card__content"
  }, _react.default.createElement("div", {
    className: "dnb-payment-card__card__top"
  }, _react.default.createElement("div", {
    className: "dnb-payment-card__card__top__left"
  }, _react.default.createElement(_icons.BankLogo, {
    logoType: data.cardDesign.bankLogo
  }), _react.default.createElement(_icons.ProductLogo, {
    productType: data.productType,
    cardDesign: data.cardDesign
  })), _react.default.createElement("div", {
    className: "dnb-payment-card__card__top__right"
  }, compact ? _react.default.createElement(ProviderIcons, null) : _react.default.createElement(_CardType.default, {
    isCredit: data.bankAxept === _Types.BankAxeptType.Credit,
    skeleton: skeleton
  }))), !compact && _react.default.createElement("div", {
    className: "dnb-payment-card__card__bottom"
  }, _react.default.createElement("div", {
    className: "dnb-payment-card__card__bottom__left"
  }, _react.default.createElement(_CardNumber.default, {
    cardNumber: cardNumber,
    skeleton: skeleton
  })), _react.default.createElement("div", {
    className: "dnb-payment-card__card__bottom__right"
  }, _react.default.createElement(ProviderIcons, null))))), !compact && _react.default.createElement(_StatusOverlay.default, {
    cardStatus: cardStatus,
    cardDesign: data.cardDesign.cardStyle,
    translations: translations
  }));
}
var _default = exports.default = CardFigure;
//# sourceMappingURL=CardFigure.js.map