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

DNB Eufemia Design System UI Library

"use client";

import React, { useContext } from 'react';
import clsx from 'clsx';
import Context from "../../shared/Context.js";
import Provider from "../../shared/Provider.js";
import { validateDOMAttributes, extendExistingPropsWithContext, removeUndefinedProps } from "../../shared/component-helper.js";
import { applySpacing } from "../../components/space/SpacingUtils.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../../components/skeleton/SkeletonHelper.js";
import { formatCardNumber } from "./components/CardNumber.js";
import CardFigure from "./components/CardFigure.js";
import { ProductType, CardType, BankAxeptType } from "./utils/Types.js";
import Designs, { defaultDesign } from "./utils/CardDesigns.js";
import cardProducts from "./utils/cardProducts.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export { Designs, ProductType, CardType, BankAxeptType };
export { formatCardNumber };
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 = useContext(Context);
  const extendedProps = extendExistingPropsWithContext({
    ...paymentCardDefaultProps,
    ...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 = applySpacing(extendedProps, {
    className: clsx(`dnb-payment-card dnb-payment-card--${variant}`, createSkeletonClass(null, skeleton, context), className, _className),
    ...attributes
  });
  skeletonDOMAttributes(params, skeleton, context);
  validateDOMAttributes(props, params);
  return _jsx(Provider, {
    locale: locale,
    children: _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
  } = useContext(Context);
  const translations = extendExistingPropsWithContext({
    ...translationDefaultPropsProps,
    ...removeUndefinedProps({
      ...props
    })
  }, translationDefaultPropsProps, translation.PaymentCard);
  return _jsxs("figure", {
    ...params,
    children: [_jsx("figcaption", {
      className: "dnb-sr-only dnb-payment-card__figcaption",
      children: cardData.productName
    }), _jsx(CardFigure, {
      id: id,
      skeleton: skeleton,
      compact: variant === 'compact',
      data: cardData,
      cardStatus: cardStatus,
      cardNumber: formatCardNumber(cardNumber, parseFloat(String(digits))),
      translations: translations
    })]
  });
}
export default PaymentCard;
export const getCardData = productCode => {
  const card = cardProducts.find(item => item.productCode === productCode);
  return card || defaultCard(productCode);
};
const defaultCard = productCode => ({
  productCode,
  productName: '',
  displayName: '',
  cardDesign: defaultDesign,
  cardType: CardType.None,
  productType: ProductType.None,
  bankAxept: BankAxeptType.None
});
//# sourceMappingURL=PaymentCard.js.map