packages/components/containers/payments/PayPalButton.tsx

   1 import { c } from 'ttag';
   2
   3 import type { ButtonProps } from '@proton/atoms';
   4 import { Button } from '@proton/atoms';
   5 import type { PaypalProcessorHook } from '@proton/components/payments/react-extensions/usePaypal';
   6 import type { PaymentMethodFlows } from '@proton/payments';
   7 import { type Currency } from '@proton/payments';
   8
   9 export type PayPalButtonProps = ButtonProps & {
  10     amount: number;
  11     flow?: PaymentMethodFlows;
  12     prefetchToken?: boolean;
  13     currency: Currency;
  14     paypal: PaypalProcessorHook;
  15 };
  16
  17 export const PayPalButton = ({
  18     amount,
  19     flow,
  20     children,
  21     paypal,
  22     loading,
  23     disabled: disabledProp,
  24     currency,
  25     onClick,
  26     ...rest
  27 }: PayPalButtonProps) => {
  28     const disabled = disabledProp || paypal.disabled;
  29
  30     if (paypal.verifyingToken) {
  31         return <Button loading {...rest}>{c('Action').t`Loading verification`}</Button>;
  32     }
  33
  34     if (paypal.verificationError) {
  35         return (
  36             <Button
  37                 onClick={paypal.fetchPaymentToken}
  38                 disabled={disabled}
  39                 loading={paypal.processingToken}
  40                 {...rest}
  41             >{c('Action').t`Retry`}</Button>
  42         );
  43     }
  44
  45     return (
  46         <Button loading={paypal.processingToken || loading} disabled={disabled} onClick={onClick} {...rest}>
  47             {children}
  48         </Button>
  49     );
  50 };
  51
  52 export default PayPalButton;