packages/components/containers/payments/CurrencySelector.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import ButtonGroup from '@proton/components/components/button/ButtonGroup';
   5 import Option from '@proton/components/components/option/Option';
   6 import type { SelectTwoProps } from '@proton/components/components/selectTwo/SelectTwo';
   7 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
   8 import { type Currency, DEFAULT_CURRENCY, mainCurrencies } from '@proton/payments';
   9 import clsx from '@proton/utils/clsx';
  10
  11 interface SharedProps {
  12     onSelect: (newCurrency: Currency) => void;
  13     currency?: Currency;
  14     currencies: readonly Currency[];
  15 }
  16
  17 type InternalSelectProps = Omit<SelectTwoProps<Currency>, 'onSelect' | 'children'> &
  18     SharedProps & {
  19         mode: 'select-two';
  20     };
  21
  22 type ButtonGroupProps = {
  23     mode: 'buttons';
  24     loading?: boolean;
  25     className?: string;
  26     id?: string;
  27     disabled?: boolean;
  28 } & SharedProps;
  29
  30 type Props = ButtonGroupProps | InternalSelectProps;
  31
  32 const CurrencySelector = (props: Props) => {
  33     const options = (props.currencies ?? mainCurrencies).map((c) => ({ text: c, value: c }));
  34
  35     if (props.mode === 'buttons') {
  36         // extracting `mode` and `currencies` in order to remove them from ...rest
  37         const { currency = DEFAULT_CURRENCY, onSelect, loading, mode, currencies, ...rest } = props;
  38         return (
  39             <ButtonGroup {...rest}>
  40                 {options.map(({ text, value }) => {
  41                     return (
  42                         <Button
  43                             className={clsx([currency === value && 'is-selected'])}
  44                             key={value}
  45                             onClick={() => onSelect(value as Currency)}
  46                             disabled={loading}
  47                         >
  48                             {text}
  49                         </Button>
  50                     );
  51                 })}
  52             </ButtonGroup>
  53         );
  54     }
  55
  56     if (props.mode === 'select-two') {
  57         // extracting `mode` and `currencies` in order to remove them from ...rest
  58         const { currency = DEFAULT_CURRENCY, onSelect, loading, mode, currencies, ...rest } = props;
  59         const handleChange = ({ value }: { value: Currency }) => onSelect(value);
  60         return (
  61             <SelectTwo
  62                 value={currency}
  63                 onChange={handleChange}
  64                 loading={loading}
  65                 aria-describedby={c('Title').t`Currency`}
  66                 data-testid="currency-selector"
  67                 {...rest}
  68             >
  69                 {options.map(({ text, value }) => {
  70                     return (
  71                         <Option value={value} title={text} key={value} data-testid={`currency-option-${value}`}>
  72                             {text}
  73                         </Option>
  74                     );
  75                 })}
  76             </SelectTwo>
  77         );
  78     }
  79
  80     return null;
  81 };
  82
  83 export default CurrencySelector;