packages/components/containers/payments/RenewToggle.tsx

   1 import type { ReactNode } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { useSubscription } from '@proton/account/subscription/hooks';
   7 import { Button } from '@proton/atoms';
   8 import PrimaryButton from '@proton/components/components/button/PrimaryButton';
   9 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
  10 import Prompt from '@proton/components/components/prompt/Prompt';
  11 import Toggle from '@proton/components/components/toggle/Toggle';
  12 import { Autopay } from '@proton/payments';
  13 import { getHasConsumerVpnPlan } from '@proton/shared/lib/helpers/subscription';
  14
  15 import { useModalTwo } from '../../components/modalTwo/useModalTwo';
  16
  17 type DisableRenewModalOwnProps = { isVPNPlan: boolean };
  18 type DisableRenewModalPromiseProps = { onResolve: (result: boolean) => void; onReject: () => void };
  19 type DisableRenewModalProps = ModalProps & DisableRenewModalPromiseProps & DisableRenewModalOwnProps;
  20
  21 export const DisableRenewModal = ({ isVPNPlan, onResolve, onReject, ...rest }: DisableRenewModalProps) => {
  22     return (
  23         <Prompt
  24             data-testid="disable-renew-modal"
  25             title={c('Subscription renewal state').t`Are you sure?`}
  26             buttons={[
  27                 <Button data-testid="action-disable-autopay" onClick={() => onResolve(true)}>{c(
  28                     'Subscription renewal state'
  29                 ).t`Disable`}</Button>,
  30                 <PrimaryButton data-testid="action-keep-autopay" onClick={() => onResolve(false)}>{c(
  31                     'Subscription renewal state'
  32                 ).t`Keep auto-pay`}</PrimaryButton>,
  33             ]}
  34             {...rest}
  35         >
  36             <p>
  37                 {isVPNPlan
  38                     ? c('Subscription renewal state')
  39                           .t`Our system will no longer auto-charge you using this payment method, but your subscription will still renew at the end of the billing cycle. If you want to downgrade or change your subscription, you still need to do that yourself before the end of the billing period. Furthermore, if you forget to make a manual payment and auto-pay is disabled for all payment methods, we may auto-downgrade your account which will lead to the loss of many features.`
  40                     : c('Subscription renewal state')
  41                           .t`Our system will no longer auto-charge you using this payment method, but your subscription will still renew at the end of the billing cycle. If you want to downgrade or change your subscription, you still need to do that yourself before the end of the billing period. We cannot auto-downgrade you because if you are over free plan storage quota or using other paid features, we cannot auto delete files, emails, or other data for you. If you disable automatic payment, remember to pay your next subscription invoice before the due date to prevent account suspension.`}
  42             </p>
  43         </Prompt>
  44     );
  45 };
  46
  47 export interface UseRenewToggleOptions {
  48     initialRenewState?: Autopay;
  49 }
  50
  51 export interface UseRenewToggleResult {
  52     onChange: () => Promise<Autopay | null>;
  53     disableRenewModal: ReactNode | null;
  54     renewState: Autopay;
  55     setRenewState: (newState: Autopay) => void;
  56 }
  57
  58 export const useRenewToggle = ({ initialRenewState = Autopay.ENABLE }: UseRenewToggleOptions): UseRenewToggleResult => {
  59     const [subscription] = useSubscription();
  60     const isVPNPlan = getHasConsumerVpnPlan(subscription);
  61
  62     const [disableRenewModal, showDisableRenewModal] = useModalTwo(DisableRenewModal);
  63
  64     const [renewState, setRenewState] = useState(initialRenewState);
  65     const onChange = async (): Promise<Autopay | null> => {
  66         let newState: Autopay;
  67         if (renewState === Autopay.ENABLE) {
  68             const userDecidedDisable = await showDisableRenewModal({ isVPNPlan });
  69             if (!userDecidedDisable) {
  70                 return null;
  71             }
  72
  73             newState = Autopay.DISABLE;
  74         } else {
  75             newState = Autopay.ENABLE;
  76         }
  77
  78         setRenewState(newState);
  79         return newState;
  80     };
  81
  82     return { onChange, disableRenewModal, renewState, setRenewState };
  83 };
  84
  85 export type Props = {
  86     loading?: boolean;
  87     onChange: () => any;
  88 } & Pick<UseRenewToggleResult, 'renewState' | 'disableRenewModal'>;
  89
  90 const RenewToggle = ({ renewState, onChange, disableRenewModal, loading }: Props) => {
  91     const toggleId = 'toggle-subscription-renew';
  92     const checked = renewState === Autopay.ENABLE;
  93
  94     return (
  95         <>
  96             {disableRenewModal}
  97             <div className="flex justify-space-between mx-2">
  98                 <label htmlFor={toggleId}>
  99                     <span>{c('Subscription renewal state').t`Enable auto-pay support`}</span>
 100                 </label>
 101                 <Toggle
 102                     id={toggleId}
 103                     checked={checked}
 104                     onChange={onChange}
 105                     loading={loading}
 106                     data-testid="toggle-subscription-renew"
 107                 />
 108             </div>
 109         </>
 110     );
 111 };
 112
 113 export default RenewToggle;