packages/components/payments/client-extensions/credit-card-type.ts

   1 import creditCardType from 'credit-card-type';
   2
   3 import { isNumber } from '@proton/shared/lib/helpers/validators';
   4
   5 const banks = require.context('@proton/styles/assets/img/credit-card-icons', true, /.svg$/);
   6
   7 type BanksMap = {
   8     [bank: string]: () => string | undefined;
   9 };
  10
  11 const banksMap = banks.keys().reduce<BanksMap>((acc, key) => {
  12     acc[key] = () => banks(key);
  13     return acc;
  14 }, {});
  15
  16 export const getBankSvg = (type = '') => {
  17     const key = `./cc-${type}.svg`;
  18
  19     if (!banksMap[key]) {
  20         return;
  21     }
  22
  23     return banksMap[key]();
  24 };
  25
  26 export const isValidNumber = (v: string) => !v || isNumber(v);
  27
  28 const withGaps = (value = '', gaps: number[] = []) => {
  29     return [...value].reduce((acc, digit, index) => {
  30         if (gaps.includes(index)) {
  31             return `${acc} ${digit}`;
  32         }
  33         return `${acc}${digit}`;
  34     }, '');
  35 };
  36
  37 export const formatCreditCardNumber = (value: string) => {
  38     const [firstCreditCardType] = creditCardType(value);
  39     const { type = '', niceType = '', gaps = [], code } = firstCreditCardType || {};
  40     const bankIcon = getBankSvg(type);
  41     const valueWithGaps = gaps.length ? withGaps(value, gaps) : value;
  42
  43     return {
  44         valueWithGaps,
  45         bankIcon,
  46         niceType,
  47         codeName: code?.name ?? 'CVV',
  48     };
  49 };