@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
94 lines • 3.78 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
var _div;
import React from 'react';
import PropTypes from 'prop-types';
import { CardType, BankAxeptType } from '../utils/Types';
import { ProductLogo, TypeLogo, BankLogo, BankAxeptLogo } from '../icons';
import StatusOverlay, { isCardBlocked } from './StatusOverlay';
import CardNumberText from './CardNumber';
import CardTypeText from './CardType';
export const cardDataPropTypes = PropTypes.shape({
productCode: PropTypes.string.isRequired,
productName: PropTypes.string.isRequired,
displayName: PropTypes.string.isRequired,
cardDesign: PropTypes.object.isRequired,
cardType: PropTypes.object.isRequired,
productType: PropTypes.object.isRequired,
bankAxept: PropTypes.object.isRequired
});
process.env.NODE_ENV !== "production" ? CardFigure.propTypes = {
id: PropTypes.string,
skeleton: PropTypes.bool,
compact: PropTypes.bool,
data: cardDataPropTypes.isRequired,
cardStatus: PropTypes.string.isRequired,
cardNumber: PropTypes.string.isRequired,
translations: PropTypes.object.isRequired
} : void 0;
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 === BankAxeptType.BankAxept && data.cardType !== CardType.None;
return React.createElement("div", {
className: `dnb-payment-card__card__providers ${multipleProviders ? 'dnb-payment-card__card__providers--multiple' : ''}`
}, React.createElement(BankAxeptLogo, {
bankAxept: data.bankAxept,
cardDesign: data.cardDesign
}), multipleProviders && (_div || (_div = React.createElement("div", {
className: "provider--separator"
}))), React.createElement(TypeLogo, {
cardType: data.cardType,
cardDesign: data.cardDesign
}));
};
return React.createElement("div", {
className: "dnb-payment-card__card__wrapper"
}, React.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.createElement("div", {
className: "dnb-payment-card__card__content"
}, React.createElement("div", {
className: "dnb-payment-card__card__top"
}, React.createElement("div", {
className: "dnb-payment-card__card__top__left"
}, React.createElement(BankLogo, {
logoType: data.cardDesign.bankLogo
}), React.createElement(ProductLogo, {
productType: data.productType,
cardDesign: data.cardDesign
})), React.createElement("div", {
className: "dnb-payment-card__card__top__right"
}, compact ? React.createElement(ProviderIcons, null) : React.createElement(CardTypeText, {
isCredit: data.bankAxept === BankAxeptType.Credit,
skeleton: skeleton
}))), !compact && React.createElement("div", {
className: "dnb-payment-card__card__bottom"
}, React.createElement("div", {
className: "dnb-payment-card__card__bottom__left"
}, React.createElement(CardNumberText, {
cardNumber: cardNumber,
skeleton: skeleton
})), React.createElement("div", {
className: "dnb-payment-card__card__bottom__right"
}, React.createElement(ProviderIcons, null))))), !compact && React.createElement(StatusOverlay, {
cardStatus: cardStatus,
cardDesign: data.cardDesign.cardStyle,
translations: translations
}));
}
export default CardFigure;
//# sourceMappingURL=CardFigure.js.map