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

DNB Eufemia Design System UI Library

var _div;
import React from 'react';
import { ProductLogo, TypeLogo, BankLogo, BankAxeptLogo } from "../icons/index.js";
import StatusOverlay, { isCardBlocked } from "./StatusOverlay.js";
import CardNumberText from "./CardNumber.js";
import CardTypeText from "./CardType.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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} ${isCardBlocked(cardStatus) ? 'dnb-payment-card__card--blocked' : ''}`;
  const ProviderIcons = () => {
    const multipleProviders = data.bankAxept.tag === 'BankAxept' && data.cardType.tag !== 'None';
    return _jsxs("div", {
      className: `dnb-payment-card__card__providers ${multipleProviders ? 'dnb-payment-card__card__providers--multiple' : ''}`,
      children: [_jsx(BankAxeptLogo, {
        bankAxept: data.bankAxept,
        cardDesign: data.cardDesign
      }), multipleProviders && (_div || (_div = _jsx("div", {
        className: "provider--separator"
      }))), _jsx(TypeLogo, {
        cardType: data.cardType,
        cardDesign: data.cardDesign
      })]
    });
  };
  return _jsxs("div", {
    className: "dnb-payment-card__card__wrapper",
    children: [_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: _jsxs("div", {
        className: "dnb-payment-card__card__content",
        children: [_jsxs("div", {
          className: "dnb-payment-card__card__top",
          children: [_jsxs("div", {
            className: "dnb-payment-card__card__top__left",
            children: [_jsx(BankLogo, {
              logoType: data.cardDesign.bankLogo
            }), _jsx(ProductLogo, {
              productType: data.productType,
              cardDesign: data.cardDesign
            })]
          }), _jsx("div", {
            className: "dnb-payment-card__card__top__right",
            children: compact ? _jsx(ProviderIcons, {}) : _jsx(CardTypeText, {
              isCredit: data.bankAxept.tag === 'Credit',
              skeleton: skeleton
            })
          })]
        }), !compact && _jsxs("div", {
          className: "dnb-payment-card__card__bottom",
          children: [_jsx("div", {
            className: "dnb-payment-card__card__bottom__left",
            children: _jsx(CardNumberText, {
              cardNumber: cardNumber,
              skeleton: skeleton
            })
          }), _jsx("div", {
            className: "dnb-payment-card__card__bottom__right",
            children: _jsx(ProviderIcons, {})
          })]
        })]
      })
    }), !compact && _jsx(StatusOverlay, {
      cardStatus: cardStatus,
      cardDesign: data.cardDesign.cardStyle,
      translations: translations
    })]
  });
}
export default CardFigure;
//# sourceMappingURL=CardFigure.js.map