packages/components/containers/payments/subscription/cancelSubscription/CancelSubscriptionSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   5 import SettingsSection from '@proton/components/containers/account/SettingsSection';
   6 import useCancellationFlow from '@proton/components/containers/payments/subscription/cancellationFlow/useCancellationFlow';
   7 import type { APP_NAMES } from '@proton/shared/lib/constants';
   8 import { BRAND_NAME } from '@proton/shared/lib/constants';
   9
  10 import { useCancelSubscriptionFlow } from './useCancelSubscriptionFlow';
  11
  12 export const CancelSubscriptionSection = ({ app }: { app: APP_NAMES }) => {
  13     const { redirectToCancellationFlow, b2bAccess, b2cAccess } = useCancellationFlow();
  14     const { loadingCancelSubscription, cancelSubscriptionModals, cancelSubscription } = useCancelSubscriptionFlow({
  15         app,
  16     });
  17
  18     if (loadingCancelSubscription) {
  19         return null;
  20     }
  21
  22     const handleContinueClick = () => {
  23         if (b2cAccess || b2bAccess) {
  24             redirectToCancellationFlow();
  25         } else {
  26             void cancelSubscription();
  27         }
  28     };
  29
  30     return (
  31         <>
  32             {cancelSubscriptionModals}
  33             <SettingsSection>
  34                 <SettingsParagraph>{c('Info')
  35                     .t`When you cancel, your subscription won't be renewed, but you can still enjoy plan benefits until the end of the subscription period. After that, you will be downgraded to the ${BRAND_NAME} Free plan.`}</SettingsParagraph>
  36                 <Button
  37                     onClick={handleContinueClick}
  38                     data-testid="CancelSubscriptionButton"
  39                     shape="outline"
  40                     disabled={loadingCancelSubscription}
  41                 >
  42                     {c('Action').t`Continue`}
  43                 </Button>
  44             </SettingsSection>
  45         </>
  46     );
  47 };