packages/components/payments/client-extensions/useMethods.ts

   1 import { c } from 'ttag';
   2
   3 import { type IconName } from '@proton/components/components/icon/Icon';
   4 import useApi from '@proton/components/hooks/useApi';
   5 import useAuthentication from '@proton/components/hooks/useAuthentication';
   6 import type { AvailablePaymentMethod, PaymentMethodFlows, SavedPaymentMethod } from '@proton/payments';
   7 import { PAYMENT_METHOD_TYPES, type PaymentMethodSepa, isSignupFlow } from '@proton/payments';
   8
   9 import type { MethodsHook, Props } from '../react-extensions/useMethods';
  10 import { useMethods as _useMethods } from '../react-extensions/useMethods';
  11
  12 export interface ViewPaymentMethod extends AvailablePaymentMethod {
  13     readonly icon: IconName | undefined;
  14     readonly text: string;
  15 }
  16
  17 interface ClientMethodsHook extends MethodsHook {
  18     usedMethods: ViewPaymentMethod[];
  19     newMethods: ViewPaymentMethod[];
  20     allMethods: ViewPaymentMethod[];
  21     lastUsedMethod: ViewPaymentMethod | undefined;
  22 }
  23
  24 const getIcon = (paymentMethod: SavedPaymentMethod): IconName | undefined => {
  25     if (
  26         paymentMethod.Type === PAYMENT_METHOD_TYPES.PAYPAL ||
  27         paymentMethod.Type === PAYMENT_METHOD_TYPES.CHARGEBEE_PAYPAL
  28     ) {
  29         return 'brand-paypal';
  30     }
  31
  32     if (
  33         paymentMethod.Type === PAYMENT_METHOD_TYPES.CARD ||
  34         paymentMethod.Type === PAYMENT_METHOD_TYPES.CHARGEBEE_CARD
  35     ) {
  36         switch (paymentMethod.Details.Brand.toLowerCase()) {
  37             case 'american express':
  38                 return 'brand-amex';
  39             case 'visa':
  40                 return 'brand-visa';
  41             case 'mastercard':
  42                 return 'brand-mastercard';
  43             case 'Discover':
  44                 return 'brand-discover';
  45             default:
  46                 return 'credit-card';
  47         }
  48     }
  49
  50     if (paymentMethod.Type === PAYMENT_METHOD_TYPES.CHARGEBEE_SEPA_DIRECT_DEBIT) {
  51         return 'bank';
  52     }
  53 };
  54
  55 export function formattedSavedSepaDetails(method: PaymentMethodSepa): string {
  56     const NBSP_HTML = '\u00A0';
  57     const {
  58         Details: { Country, Last4 },
  59     } = method;
  60
  61     return c('Info').t`IBAN${NBSP_HTML}${Country}${NBSP_HTML}••••${NBSP_HTML}${Last4}`;
  62 }
  63
  64 const getMethod = (paymentMethod: SavedPaymentMethod): string => {
  65     switch (paymentMethod.Type) {
  66         case PAYMENT_METHOD_TYPES.CARD:
  67         case PAYMENT_METHOD_TYPES.CHARGEBEE_CARD:
  68             const brand = paymentMethod.Details.Brand;
  69             const last4 = paymentMethod.Details.Last4;
  70             // translator: example would be: "Mastercard" ending in "7777"
  71             return c('new_plans: info').t`${brand} ending in ${last4}`;
  72         case PAYMENT_METHOD_TYPES.PAYPAL:
  73         case PAYMENT_METHOD_TYPES.CHARGEBEE_PAYPAL:
  74             return `PayPal - ${paymentMethod.Details.PayerID}`;
  75         case PAYMENT_METHOD_TYPES.CHARGEBEE_SEPA_DIRECT_DEBIT:
  76             return `Bank transfer - ${formattedSavedSepaDetails(paymentMethod)}`;
  77         default:
  78             return '';
  79     }
  80 };
  81
  82 /**
  83  * Transform the payment method object from the react-extensions package to a view model that can be used in the UI.
  84  */
  85 export function convertMethod(
  86     method: AvailablePaymentMethod,
  87     getSavedMethodById: MethodsHook['getSavedMethodByID'],
  88     flow: PaymentMethodFlows
  89 ): ViewPaymentMethod {
  90     if (method.paymentMethodId) {
  91         const savedMethod = getSavedMethodById(method.paymentMethodId) as SavedPaymentMethod;
  92         return {
  93             icon: getIcon(savedMethod),
  94             text: [getMethod(savedMethod), method.isExpired && `(${c('Info').t`Expired`})`].filter(Boolean).join(' '),
  95             ...method,
  96         };
  97     }
  98
  99     if (method.type === PAYMENT_METHOD_TYPES.PAYPAL || method.type === PAYMENT_METHOD_TYPES.PAYPAL_CREDIT) {
 100         return {
 101             icon: 'brand-paypal' as const,
 102             text: c('Payment method option').t`PayPal`,
 103             ...method,
 104         };
 105     } else if (method.type === PAYMENT_METHOD_TYPES.BITCOIN || method.type === PAYMENT_METHOD_TYPES.CHARGEBEE_BITCOIN) {
 106         return {
 107             icon: 'brand-bitcoin' as const,
 108             text: c('Payment method option').t`Bitcoin`,
 109             ...method,
 110         };
 111     } else if (method.type === PAYMENT_METHOD_TYPES.CASH) {
 112         return {
 113             icon: 'money-bills' as const,
 114             text: c('Label').t`Cash`,
 115             ...method,
 116         };
 117     } else if (method.type === PAYMENT_METHOD_TYPES.CHARGEBEE_CARD) {
 118         return {
 119             icon: 'credit-card' as const,
 120             text: c('Payment method option').t`Credit/debit card`,
 121             ...method,
 122         };
 123     } else if (method.type === PAYMENT_METHOD_TYPES.CHARGEBEE_PAYPAL) {
 124         return {
 125             icon: 'brand-paypal' as const,
 126             text: c('Payment method option').t`PayPal`,
 127             ...method,
 128         };
 129     } else if (method.type === PAYMENT_METHOD_TYPES.CHARGEBEE_SEPA_DIRECT_DEBIT) {
 130         return {
 131             icon: 'bank' as const,
 132             text: c('Payment method option').t`Bank transfer`,
 133             ...method,
 134         };
 135     }
 136
 137     return {
 138         icon: 'credit-card' as const,
 139         text: isSignupFlow(flow)
 140             ? c('Payment method option').t`Credit/debit card`
 141             : c('Payment method option').t`New credit/debit card`,
 142         ...method,
 143     };
 144 }
 145
 146 /**
 147  * Enhance the methods hook with client specific data like icons and text.
 148  * @param methodsHook - output of the useMethods hook from the react-extensions package
 149  * @param flow – current payment flow. Might modify the text of the payment methods
 150  * @returns
 151  */
 152 export const wrapMethods = (methodsHook: MethodsHook, flow: PaymentMethodFlows): ClientMethodsHook => {
 153     const { getSavedMethodByID, usedMethods, newMethods, allMethods, lastUsedMethod } = methodsHook;
 154
 155     return {
 156         ...methodsHook,
 157         usedMethods: usedMethods.map((method) => convertMethod(method, getSavedMethodByID, flow)),
 158         newMethods: newMethods.map((method) => convertMethod(method, getSavedMethodByID, flow)),
 159         allMethods: allMethods.map((method) => convertMethod(method, getSavedMethodByID, flow)),
 160         lastUsedMethod: lastUsedMethod && convertMethod(lastUsedMethod, getSavedMethodByID, flow),
 161     };
 162 };
 163
 164 /**
 165  * A preconfigured version of the useMethods hook from the react-extensions package.
 166  * Returns view models of methods that can be used in the UI.
 167  */
 168 export const useMethods = (props: Props): ClientMethodsHook => {
 169     const api = useApi();
 170     const { UID } = useAuthentication();
 171     const isAuthenticated = !!UID;
 172
 173     const internalResult = _useMethods(props, { api, isAuthenticated });
 174
 175     return wrapMethods(internalResult, props.flow);
 176 };