@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
123 lines (122 loc) • 5.57 kB
JavaScript
"use client";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["product_code", "card_number", "card_status", "variant", "digits", "id", "raw_data", "locale", "skeleton", "className", "class", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Context from '../../shared/Context';
import Provider from '../../shared/Provider';
import { isTrue, validateDOMAttributes, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
import { spacingPropTypes, createSpacingClasses } from '../../components/space/SpacingHelper';
import { skeletonDOMAttributes, createSkeletonClass } from '../../components/skeleton/SkeletonHelper';
import { formatCardNumber } from './components/CardNumber';
import CardFigure, { cardDataPropTypes } from './components/CardFigure';
import { ProductType, CardType, BankAxeptType } from './utils/Types';
import Designs, { defaultDesign } from './utils/CardDesigns';
import cardProducts from './utils/cardProducts';
export { Designs, ProductType, CardType, BankAxeptType };
export { formatCardNumber };
const translationDefaultPropsProps = {
text_blocked: null,
text_expired: null,
text_not_active: null,
text_new_order: null,
text_order_in_process: null,
text_replaced: null,
text_renewed: null,
text_new: null,
text_unknown: null
};
export default class PaymentCard extends React.PureComponent {
render() {
var _this$context;
const props = extendPropsWithContextInClassComponent(this.props, PaymentCard.defaultProps, {
locale: this.context.locale
}, {
skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
});
const {
product_code,
card_number,
card_status,
variant,
digits,
id,
raw_data,
locale,
skeleton,
className,
class: _className,
children
} = props,
attributes = _objectWithoutProperties(props, _excluded);
const cardData = raw_data || getCardData(product_code);
const params = _objectSpread({
className: classnames(`dnb-payment-card dnb-payment-card--${variant}`, createSkeletonClass(null, skeleton, this.context), createSpacingClasses(props), className, _className)
}, attributes);
skeletonDOMAttributes(params, skeleton, this.context);
validateDOMAttributes(this.props, params);
return React.createElement(Provider, {
locale: locale
}, React.createElement(Context.Consumer, null, _ref => {
let {
translation
} = _ref;
const translations = extendPropsWithContextInClassComponent(this.props, translationDefaultPropsProps, translation.PaymentCard);
return React.createElement("figure", params, React.createElement("figcaption", {
className: "dnb-sr-only dnb-payment-card__figcaption"
}, cardData.productName), React.createElement(CardFigure, {
id: id,
skeleton: isTrue(skeleton),
compact: variant === 'compact',
data: cardData,
cardStatus: card_status,
cardNumber: formatCardNumber(card_number, parseFloat(digits)),
translations: translations
}));
}));
}
}
_defineProperty(PaymentCard, "contextType", Context);
_defineProperty(PaymentCard, "defaultProps", _objectSpread({
digits: 8,
locale: null,
card_status: 'active',
variant: 'normal',
id: null,
raw_data: null,
skeleton: false,
className: null,
children: null
}, translationDefaultPropsProps));
process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = _objectSpread(_objectSpread({
product_code: PropTypes.string.isRequired,
card_number: PropTypes.string.isRequired,
card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active', 'new_order', 'new', 'order_in_process', 'renewed', 'replaced', 'unknown']),
variant: PropTypes.oneOf(['normal', 'compact']),
digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
raw_data: cardDataPropTypes,
id: PropTypes.string,
locale: PropTypes.string,
skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
}, spacingPropTypes), {}, {
className: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
}) : void 0;
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