packages/components/containers/payments/PaymentVerificationImage.tsx

   1 import creditCardType from 'credit-card-type';
   2
   3 import type { CardPayment, PaypalPayment } from '@proton/payments';
   4 import { PAYMENT_METHOD_TYPES, isCardPayment, isPaypalPayment } from '@proton/payments';
   5 import treeDSecureSvg from '@proton/styles/assets/img/bank-icons/3d-secure.svg';
   6 import americanExpressSafekeySvg from '@proton/styles/assets/img/bank-icons/amex-safekey.svg';
   7 import discoverProtectBuySvg from '@proton/styles/assets/img/bank-icons/discover-protectbuy.svg';
   8 import mastercardSecurecodeSvg from '@proton/styles/assets/img/bank-icons/mastercard-securecode.svg';
   9 import paypalSvg from '@proton/styles/assets/img/bank-icons/paypal.svg';
  10 import verifiedByVisaSvg from '@proton/styles/assets/img/bank-icons/visa-secure.svg';
  11
  12 const getImage = (type: string): string => {
  13     const images: Record<string, string> = {
  14         'american-express': americanExpressSafekeySvg,
  15         discover: discoverProtectBuySvg,
  16         mastercard: mastercardSecurecodeSvg,
  17         visa: verifiedByVisaSvg,
  18     };
  19
  20     return images[type] ?? treeDSecureSvg;
  21 };
  22
  23 export interface Props {
  24     payment: PaypalPayment | CardPayment | {};
  25     type: PAYMENT_METHOD_TYPES.PAYPAL | PAYMENT_METHOD_TYPES.PAYPAL_CREDIT | PAYMENT_METHOD_TYPES.CARD;
  26 }
  27
  28 const PaymentVerificationImage = ({ payment, type }: Props) => {
  29     const isPaypalType = [PAYMENT_METHOD_TYPES.PAYPAL, PAYMENT_METHOD_TYPES.PAYPAL_CREDIT].includes(type);
  30
  31     if (isPaypalPayment(payment) || isPaypalType) {
  32         return <img src={paypalSvg} alt="PayPal" />;
  33     }
  34
  35     if (!isCardPayment(payment)) {
  36         return null;
  37     }
  38
  39     const cardTypes = creditCardType(payment.Details.Number);
  40     const { type: cardType, niceType } = cardTypes[0] ?? { type: '', niceType: '' };
  41
  42     return <img src={getImage(cardType)} alt={niceType} />;
  43 };
  44
  45 export default PaymentVerificationImage;