packages/components/containers/payments/methods/PaymentMethodSelector.tsx

   1 import type { DropdownSize } from '@proton/components/components/dropdown/utils';
   2 import { DropdownSizeUnit } from '@proton/components/components/dropdown/utils';
   3 import Icon from '@proton/components/components/icon/Icon';
   4 import Radio from '@proton/components/components/input/Radio';
   5 import Option from '@proton/components/components/option/Option';
   6 import type { ViewPaymentMethod } from '@proton/components/payments/client-extensions';
   7 import type { PaymentMethodType } from '@proton/payments';
   8 import clsx from '@proton/utils/clsx';
   9
  10 import { SelectTwo } from '../../../components';
  11
  12 interface Props {
  13     options: ViewPaymentMethod[];
  14     method?: PaymentMethodType;
  15     onChange: (value: PaymentMethodType) => void;
  16     lastUsedMethod?: ViewPaymentMethod;
  17     forceDropdown?: boolean;
  18     narrow?: boolean;
  19 }
  20
  21 const PaymentMethodSelector = ({ method, lastUsedMethod, options, onChange, forceDropdown, narrow }: Props) => {
  22     if (options.length <= 2 && !forceDropdown) {
  23         return (
  24             <>
  25                 {options.map(({ text, value, icon }) => {
  26                     return (
  27                         <label
  28                             htmlFor={value}
  29                             key={value}
  30                             className={clsx([
  31                                 'py-2 flex flex-nowrap items-center',
  32                                 lastUsedMethod?.value === value && 'border-bottom',
  33                             ])}
  34                         >
  35                             <Radio
  36                                 className="mr-2"
  37                                 id={value}
  38                                 name="value"
  39                                 checked={value === method}
  40                                 onChange={() => onChange(value)}
  41                             />
  42                             {icon && <Icon className="mr-2" name={icon} />}
  43                             <span className="text-cut">{text}</span>
  44                         </label>
  45                     );
  46                 })}
  47             </>
  48         );
  49     }
  50
  51     const size: DropdownSize | undefined = narrow
  52         ? {
  53               width: DropdownSizeUnit.Dynamic,
  54           }
  55         : undefined;
  56
  57     return (
  58         <SelectTwo
  59             id="select-method"
  60             value={method}
  61             onChange={({ value }) => onChange(value)}
  62             className={clsx(narrow && 'w-auto')}
  63             size={size}
  64             data-testid="payment-method-selector"
  65         >
  66             {options.flatMap((option) => {
  67                 const child = (
  68                     <Option key={option.value} value={option.value} title={option.text}>
  69                         <span className="inline-flex max-w-full flex-nowrap justify-start">
  70                             {option.icon && <Icon className="mr-2 my-auto shrink-0" name={option.icon} />}
  71                             <span className="text-ellipsis">{option.text}</span>
  72                         </span>
  73                     </Option>
  74                 );
  75                 if (lastUsedMethod?.value === option.value) {
  76                     return [
  77                         child,
  78                         <div className="py-2 block" key={`${option.value}-separator`}>
  79                             <hr className="my-0" />
  80                         </div>,
  81                     ];
  82                 }
  83                 return child;
  84             })}
  85         </SelectTwo>
  86     );
  87 };
  88
  89 export default PaymentMethodSelector;