@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
290 lines (289 loc) • 13.8 kB
JavaScript
;
"use client";
require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "BankAxeptType", {
enumerable: true,
get: function () {
return _Types.BankAxeptType;
}
});
Object.defineProperty(exports, "CardType", {
enumerable: true,
get: function () {
return _Types.CardType;
}
});
Object.defineProperty(exports, "Designs", {
enumerable: true,
get: function () {
return _CardDesigns.default;
}
});
Object.defineProperty(exports, "ProductType", {
enumerable: true,
get: function () {
return _Types.ProductType;
}
});
exports.getCardData = exports.formatCardNumber = exports.default = void 0;
require("core-js/modules/es.string.replace.js");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _Provider = _interopRequireDefault(require("../../shared/Provider"));
var _componentHelper = require("../../shared/component-helper");
var _SpacingHelper = require("../../components/space/SpacingHelper");
var _SkeletonHelper = require("../../components/skeleton/SkeletonHelper");
var _P = _interopRequireDefault(require("../../elements/P"));
var _Types = require("./utils/Types");
var _CardDesigns = _interopRequireWildcard(require("./utils/CardDesigns"));
var _cardProducts = _interopRequireDefault(require("./utils/cardProducts"));
var _icons = require("./icons");
const _excluded = ["product_code", "card_number", "card_status", "variant", "digits", "id", "raw_data", "locale", "skeleton", "className", "class", "children"];
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); }
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; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const cardDataPropTypes = process.env.NODE_ENV !== "production" ? _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
}) : {};
const translationDefaultPropsProps = {
text_card_number: null,
text_expired: null,
text_blocked: null,
text_not_active: null,
text_order_in_process: null,
text_renewed: null,
text_replaced: null,
text_unknown: null
};
class PaymentCard extends _react.default.PureComponent {
render() {
var _this$context;
const props = (0, _componentHelper.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: (0, _classnames.default)(`dnb-payment-card dnb-payment-card--${variant}`, (0, _SkeletonHelper.createSkeletonClass)(null, skeleton, this.context), (0, _SpacingHelper.createSpacingClasses)(props), className, _className)
}, attributes);
(0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, this.context);
(0, _componentHelper.validateDOMAttributes)(this.props, params);
return _react.default.createElement(_Provider.default, {
locale: locale
}, _react.default.createElement(_Context.default.Consumer, null, _ref => {
let {
translation
} = _ref;
const translations = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, translationDefaultPropsProps, translation.PaymentCard);
return _react.default.createElement("figure", params, _react.default.createElement("figcaption", {
className: "dnb-sr-only dnb-payment-card__figcaption"
}, cardData.productName), _react.default.createElement(NormalCard, {
id: id,
skeleton: (0, _componentHelper.isTrue)(skeleton),
data: cardData,
cardStatus: card_status,
cardNumber: formatCardNumber(card_number, parseFloat(digits)),
translations: translations
}));
}));
}
}
exports.default = PaymentCard;
_defineProperty(PaymentCard, "contextType", _Context.default);
_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.default.string.isRequired,
card_number: _propTypes.default.string.isRequired,
card_status: _propTypes.default.oneOf(['active', 'blocked', 'expired', 'not_active', 'order_in_process', 'renewed', 'replaced', 'unknown']),
variant: _propTypes.default.oneOf(['normal', 'compact']),
digits: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
raw_data: cardDataPropTypes,
id: _propTypes.default.string,
locale: _propTypes.default.string,
skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
}, _SpacingHelper.spacingPropTypes), {}, {
className: _propTypes.default.string,
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func])
}) : void 0;
const formatCardNumberRegex = /(?=(?:....)*$)/g;
const formatCardNumber = function (cardNumber) {
let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 8;
if (!cardNumber) {
return cardNumber;
}
if (digits && digits <= cardNumber.length) {
return cardNumber.slice(cardNumber.length - digits, cardNumber.length).replace(formatCardNumberRegex, ' ').trim();
}
return cardNumber.replace(formatCardNumberRegex, ' ').trim();
};
exports.formatCardNumber = formatCardNumber;
const getCardData = productCode => {
const card = _cardProducts.default.find(item => item.productCode === productCode);
return card || defaultCard(productCode);
};
exports.getCardData = getCardData;
const defaultCard = productCode => ({
productCode,
productName: '',
displayName: '',
cardDesign: _CardDesigns.defaultDesign,
cardType: _Types.CardType.None,
productType: _Types.ProductType.None,
bankAxept: _Types.BankAxeptType.None
});
process.env.NODE_ENV !== "production" ? StatusOverlay.propTypes = {
cardStatus: _propTypes.default.string.isRequired,
translations: _propTypes.default.object.isRequired
} : void 0;
const BlockingOverlay = (_ref2, skeleton) => {
let {
cardStatus,
text
} = _ref2;
return _react.default.createElement("div", {
className: (0, _classnames.default)('dnb-payment-card__blocking__overlay', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton))
}, _react.default.createElement("div", {
className: "dnb-payment-card__blocking__center"
}, _react.default.createElement(_icons.StatusIcon, {
status: cardStatus
}), _react.default.createElement(_P.default, {
top: "xx-small"
}, text)));
};
function StatusOverlay(_ref3) {
let {
cardStatus,
translations
} = _ref3;
const cardStatusMap = {
not_active: translations.text_not_active,
order_in_process: translations.text_order_in_process,
renewed: translations.text_renewed,
replaced: translations.text_replaced,
blocked: translations.text_blocked,
expired: translations.text_expired,
unknown: translations.text_unknown
};
return cardStatusMap[cardStatus] ? _react.default.createElement(BlockingOverlay, {
cardStatus: cardStatus,
text: cardStatusMap[cardStatus]
}) : null;
}
process.env.NODE_ENV !== "production" ? CardText.propTypes = {
cardNumber: _propTypes.default.string.isRequired,
translations: _propTypes.default.object.isRequired,
skeleton: _propTypes.default.bool.isRequired
} : void 0;
function CardText(_ref4) {
let {
cardNumber,
translations,
skeleton
} = _ref4;
return _react.default.createElement("span", {
className: (0, _classnames.default)('dnb-payment-card__card__wrapper', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton))
}, _react.default.createElement(_P.default, {
className: "dnb-payment-card__card__holder",
modifier: "x-small medium"
}, translations.text_card_number), _react.default.createElement(_P.default, {
className: "dnb-payment-card__card__numbers"
}, cardNumber));
}
process.env.NODE_ENV !== "production" ? NormalCard.propTypes = {
id: _propTypes.default.string,
skeleton: _propTypes.default.bool,
data: cardDataPropTypes.isRequired,
cardStatus: _propTypes.default.string.isRequired,
cardNumber: _propTypes.default.string.isRequired,
translations: _propTypes.default.object.isRequired
} : void 0;
function NormalCard(_ref5) {
var _data$cardDesign;
let {
data,
cardStatus,
cardNumber,
id = null,
skeleton = null,
translations
} = _ref5;
return _react.default.createElement("div", _extends({
id: id,
className: `dnb-payment-card__card dnb-payment-card__${data.cardDesign.cardStyle}`
}, (_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(_icons.BankLogo, {
logoType: data.cardDesign.bankLogo
}), _react.default.createElement(_icons.ProductLogo, {
productType: data.productType,
cardDesign: data.cardDesign
}), _react.default.createElement(_icons.BankAxeptLogo, {
bankAxept: data.bankAxept,
cardDesign: data.cardDesign
})), _react.default.createElement("div", {
className: "dnb-payment-card__card__bottom"
}, _react.default.createElement(CardText, {
cardNumber: cardNumber,
displayName: data.displayName,
translations: translations,
skeleton: skeleton
}), _react.default.createElement(_icons.TypeLogo, {
cardType: data.cardType,
cardDesign: data.cardDesign
}))), _react.default.createElement(StatusOverlay, {
cardStatus: cardStatus,
translations: translations
}));
}
//# sourceMappingURL=PaymentCard.js.map