packages/components/containers/payments/PayPalView.tsx

   1 import { c } from 'ttag';
   2
   3 import Alert from '@proton/components/components/alert/Alert';
   4 import Price from '@proton/components/components/price/Price';
   5 import type { PaypalProcessorHook } from '@proton/components/payments/react-extensions/usePaypal';
   6 import type { PaymentMethodFlows, PlainPaymentMethodType } from '@proton/payments';
   7 import { type Currency, PAYMENT_METHOD_TYPES } from '@proton/payments';
   8 import { MAX_PAYPAL_AMOUNT, MIN_PAYPAL_AMOUNT_CHARGEBEE, MIN_PAYPAL_AMOUNT_INHOUSE } from '@proton/payments';
   9
  10 import PayPalButton from './PayPalButton';
  11 import PayPalInfoMessage from './PayPalInfoMessage';
  12
  13 interface Props {
  14     paypal: PaypalProcessorHook;
  15     paypalCredit: PaypalProcessorHook;
  16     type?: PaymentMethodFlows;
  17     amount: number;
  18     currency: Currency;
  19     disabled?: boolean;
  20     prefetchToken?: boolean;
  21     onClick?: () => void;
  22     triggersDisabled?: boolean;
  23     showPaypalCredit: boolean;
  24     method: PlainPaymentMethodType;
  25 }
  26
  27 const PayPalView = ({
  28     type,
  29     amount,
  30     currency,
  31     paypalCredit,
  32     disabled,
  33     prefetchToken,
  34     onClick,
  35     triggersDisabled,
  36     showPaypalCredit,
  37     method,
  38 }: Props) => {
  39     const isChargebeePaypal = method === PAYMENT_METHOD_TYPES.CHARGEBEE_PAYPAL;
  40     const minAmount = isChargebeePaypal ? MIN_PAYPAL_AMOUNT_CHARGEBEE : MIN_PAYPAL_AMOUNT_INHOUSE;
  41
  42     if (amount < minAmount) {
  43         const minimumAmount = <Price currency={currency}>{minAmount}</Price>;
  44
  45         return (
  46             <Alert className="mb-4" type="error">
  47                 {c('Error').jt`Amount below minimum (${minimumAmount}).`}
  48             </Alert>
  49         );
  50     }
  51
  52     if (amount > MAX_PAYPAL_AMOUNT) {
  53         return <Alert className="mb-4" type="error">{c('Error').t`Amount above the maximum.`}</Alert>;
  54     }
  55
  56     const clickHere = (
  57         <PayPalButton
  58             id="paypal-credit"
  59             data-testid="paypal-credit-button"
  60             shape="outline"
  61             color="norm"
  62             flow={type}
  63             key="click-here"
  64             size="small"
  65             paypal={paypalCredit}
  66             amount={amount}
  67             disabled={disabled || paypalCredit.isInitialState || triggersDisabled}
  68             prefetchToken={prefetchToken}
  69             currency={currency}
  70             onClick={onClick}
  71             loading={paypalCredit.processingToken}
  72         >
  73             {c('Link').t`click here`}
  74         </PayPalButton>
  75     );
  76
  77     return (
  78         <div className="p-4 border rounded bg-weak mb-4" data-testid="paypal-view">
  79             <PayPalInfoMessage />
  80             {showPaypalCredit ? (
  81                 <>
  82                     <div className="mt-4 mb-4">
  83                         {c('Info')
  84                             .t`You must have a credit card or bank account linked with your PayPal account. If your PayPal account doesn't have that, please click on the button below.`}
  85                     </div>
  86                     <div>{clickHere}</div>
  87                 </>
  88             ) : null}
  89         </div>
  90     );
  91 };
  92
  93 export default PayPalView;