packages/components/containers/payments/AmountRow.tsx

   1 import { c } from 'ttag';
   2
   3 import Field from '@proton/components/components/container/Field';
   4 import Row from '@proton/components/components/container/Row';
   5 import type { PaymentMethodStatusExtended, PlainPaymentMethodType } from '@proton/payments';
   6 import { PAYMENT_METHOD_TYPES } from '@proton/payments';
   7 import { type Currency } from '@proton/payments';
   8
   9 import PaymentSelector from './PaymentSelector';
  10
  11 interface Props {
  12     paymentMethodType?: PlainPaymentMethodType;
  13     amount: number;
  14     onChangeAmount: (value: number) => void;
  15     currency: Currency;
  16     onChangeCurrency: (currency: Currency) => void;
  17     disableCurrencySelector: boolean;
  18     status: PaymentMethodStatusExtended;
  19 }
  20
  21 const AmountRow = ({
  22     paymentMethodType,
  23     amount,
  24     onChangeAmount,
  25     currency,
  26     onChangeCurrency,
  27     disableCurrencySelector,
  28     status,
  29 }: Props) => {
  30     if (paymentMethodType === PAYMENT_METHOD_TYPES.CASH) {
  31         return null;
  32     }
  33
  34     return (
  35         <Row>
  36             <span className="label" id="id_desc_amount">{c('Label').t`Amount`}</span>
  37             <Field>
  38                 <PaymentSelector
  39                     status={status}
  40                     amount={amount}
  41                     onChangeAmount={onChangeAmount}
  42                     currency={currency}
  43                     onChangeCurrency={onChangeCurrency}
  44                     disableCurrencySelector={disableCurrencySelector}
  45                 />
  46             </Field>
  47         </Row>
  48     );
  49 };
  50
  51 export default AmountRow;