packages/components/containers/payments/bitcoin/Bitcoin.tsx

   1 import type { ReactNode } from 'react';
   2 import { useEffect } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import Alert from '@proton/components/components/alert/Alert';
   8 import Bordered from '@proton/components/components/container/Bordered';
   9 import Loader from '@proton/components/components/loader/Loader';
  10 import Price from '@proton/components/components/price/Price';
  11 import type { BitcoinHook } from '@proton/components/payments/react-extensions/useBitcoin';
  12 import { MAX_BITCOIN_AMOUNT, MIN_BITCOIN_AMOUNT } from '@proton/payments';
  13
  14 import BitcoinDetails from './BitcoinDetails';
  15 import type { OwnProps as BitcoinQRCodeProps } from './BitcoinQRCode';
  16 import BitcoinQRCode from './BitcoinQRCode';
  17
  18 export type Props = BitcoinHook;
  19
  20 const Bitcoin = ({
  21     amount,
  22     currency,
  23     processingBitcoinToken,
  24     bitcoinPaymentValidated,
  25     model,
  26     loading,
  27     error,
  28     request,
  29     billingAddress,
  30 }: Props) => {
  31     useEffect(() => {
  32         void request();
  33     }, [amount, currency, billingAddress?.CountryCode, billingAddress?.State]);
  34
  35     if (amount < MIN_BITCOIN_AMOUNT) {
  36         const i18n = (amount: ReactNode) => c('Info').jt`Amount below minimum (${amount}).`;
  37         return (
  38             <Alert className="mb-4" type="warning">
  39                 {i18n(
  40                     <Price key="price" currency={currency}>
  41                         {MIN_BITCOIN_AMOUNT}
  42                     </Price>
  43                 )}
  44             </Alert>
  45         );
  46     }
  47     if (amount > MAX_BITCOIN_AMOUNT) {
  48         const i18n = (amount: ReactNode) => c('Info').jt`Amount above maximum (${amount}).`;
  49         return (
  50             <Alert className="mb-4" type="warning">
  51                 {i18n(
  52                     <Price key="price" currency={currency}>
  53                         {MAX_BITCOIN_AMOUNT}
  54                     </Price>
  55                 )}
  56             </Alert>
  57         );
  58     }
  59
  60     if (loading) {
  61         return <Loader />;
  62     }
  63
  64     if (error || !model.amountBitcoin || !model.address) {
  65         return (
  66             <>
  67                 <Alert className="mb-4" type="error">{c('Error').t`Error connecting to the Bitcoin API.`}</Alert>
  68                 <Button onClick={request} data-testid="bitcoin-try-again">{c('Action').t`Try again`}</Button>
  69             </>
  70         );
  71     }
  72
  73     const qrCodeStatus: BitcoinQRCodeProps['status'] = (() => {
  74         if (processingBitcoinToken) {
  75             return 'pending';
  76         }
  77         if (bitcoinPaymentValidated) {
  78             return 'confirmed';
  79         }
  80         return 'initial';
  81     })();
  82
  83     const btcAmountBold = (
  84         <span className="text-bold" key="btc-info-amount">
  85             {model.amountBitcoin} BTC
  86         </span>
  87     );
  88
  89     return (
  90         <Bordered className="p-6 rounded" data-testid="bitcoin-payment-data">
  91             <div>
  92                 <span>
  93                     {c('Info').jt`To complete your payment, please send ${btcAmountBold} to the address below.`}
  94                 </span>
  95                 <div className="my-6 flex justify-center">
  96                     <BitcoinQRCode
  97                         className="flex items-center flex-column"
  98                         amount={model.amountBitcoin}
  99                         address={model.address}
 100                         status={qrCodeStatus}
 101                     />
 102                 </div>
 103             </div>
 104             <BitcoinDetails amount={model.amountBitcoin} address={model.address} />
 105         </Bordered>
 106     );
 107 };
 108
 109 export default Bitcoin;