packages/components/containers/payments/Checkout.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import Icon from '@proton/components/components/icon/Icon';
   6 import { type MethodsHook } from '@proton/components/payments/react-extensions';
   7 import { PAYMENT_METHOD_TYPES, type PlanIDs } from '@proton/payments';
   8 import { type Currency } from '@proton/payments';
   9 import { isLifetimePlanSelected } from '@proton/shared/lib/helpers/planIDs';
  10 import type { UserModel } from '@proton/shared/lib/interfaces';
  11
  12 import CurrencySelector from './CurrencySelector';
  13
  14 export interface Props {
  15     currencies: readonly Currency[];
  16     currency: Currency;
  17     onChangeCurrency: (newCurrency: Currency) => void;
  18     loading?: boolean;
  19     children: ReactNode;
  20     hasGuarantee?: boolean;
  21     description?: ReactNode;
  22     renewNotice: ReactNode;
  23     paymentMethods: MethodsHook;
  24     user: UserModel;
  25     planIDs: PlanIDs;
  26 }
  27
  28 const Checkout = ({
  29     currencies,
  30     currency,
  31     onChangeCurrency,
  32     loading,
  33     children,
  34     hasGuarantee,
  35     description,
  36     renewNotice,
  37     paymentMethods,
  38     user,
  39     planIDs,
  40 }: Props) => {
  41     const isSepaDirectDebit = paymentMethods.selectedMethod?.type === PAYMENT_METHOD_TYPES.CHARGEBEE_SEPA_DIRECT_DEBIT;
  42     const isLifetimeWithCredits = user.Credit > 0 && isLifetimePlanSelected(planIDs);
  43
  44     const disableCurrencySelector = isSepaDirectDebit || isLifetimeWithCredits || loading;
  45
  46     return (
  47         <div className="p-6">
  48             <div className="flex flex-nowrap mb-5">
  49                 <h2 className="h3 text-bold mt-1 mb-0 text-cut flex-1">{c('Title').t`Summary`}</h2>
  50                 <span className="shrink-0" data-testid="checkoutCurrencyDropdown">
  51                     <CurrencySelector
  52                         currencies={currencies}
  53                         currency={currency}
  54                         onSelect={onChangeCurrency}
  55                         mode="select-two"
  56                         disabled={disableCurrencySelector}
  57                     />
  58                 </span>
  59             </div>
  60
  61             <div className={loading ? 'opacity-50 *:pointer-events-none' : ''}>{children}</div>
  62             <div className="text-sm lh-standard">
  63                 {renewNotice && (
  64                     <div className="flex flex-nowrap color-weak">
  65                         <span className="shrink-0 mr-2">
  66                             <Icon name="info-circle" size={4} />
  67                         </span>
  68                         <span className="flex-1" data-testid="checkout:renew-notice">
  69                             {renewNotice}
  70                         </span>
  71                     </div>
  72                 )}
  73                 <div className="flex flex-nowrap color-weak my-2">
  74                     <span className="shrink-0 mr-2">
  75                         <Icon name="shield" />
  76                     </span>
  77                     <span className="flex-1">{c('Info')
  78                         .t`Payments are protected with TLS encryption and Swiss privacy laws.`}</span>
  79                 </div>
  80                 {hasGuarantee && (
  81                     <div className="flex flex-nowrap color-weak">
  82                         <span className="shrink-0 mr-2">
  83                             <Icon name="clock" />
  84                         </span>
  85                         <span className="flex-1">{c('Info').t`30-day money-back guarantee.`}</span>
  86                     </div>
  87                 )}
  88             </div>
  89             {description}
  90         </div>
  91     );
  92 };
  93
  94 export default Checkout;