packages/components/containers/account/DeleteSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { useAddresses } from '@proton/account/addresses/hooks';
   4 import { useSubscription } from '@proton/account/subscription/hooks';
   5 import { Button, Href } from '@proton/atoms';
   6 import Loader from '@proton/components/components/loader/Loader';
   7 import useModalState from '@proton/components/components/modalTwo/useModalState';
   8 import useConfig from '@proton/components/hooks/useConfig';
   9 import { ADDRESS_TYPE, APPS, MAIL_APP_NAME, VPN_APP_NAME } from '@proton/shared/lib/constants';
  10 import { hasMigrationDiscount, hasVisionary } from '@proton/shared/lib/helpers/subscription';
  11
  12 import { DiscountWarningModal, VisionaryWarningModal } from '../payments/subscription/PlanLossWarningModal';
  13 import DeleteAccountModal from './DeleteAccountModal';
  14 import MozillaInfoPanel from './MozillaInfoPanel';
  15 import SettingsParagraph from './SettingsParagraph';
  16
  17 const DeleteSection = () => {
  18     const [addresses, loadingAddresses] = useAddresses();
  19     const [subscription, loadingSubscription] = useSubscription();
  20     const { APP_NAME } = useConfig();
  21     const [deleteAccountModalProps, setDeleteAccountModalOpen, renderDeleteAccountModal] = useModalState();
  22     const [migrationDiscountModalProps, setMigrationDiscountModal, renderDiscountModal] = useModalState();
  23     const [visionaryLossModalProps, setVisionaryLossModal, renderVisionaryLossModal] = useModalState();
  24
  25     if (loadingAddresses || loadingSubscription) {
  26         return <Loader />;
  27     }
  28
  29     if (
  30         APP_NAME === APPS.PROTONVPN_SETTINGS &&
  31         addresses?.some((address) => address.Type !== ADDRESS_TYPE.TYPE_EXTERNAL)
  32     ) {
  33         const loginLink = (
  34             <Href key="0" href="https://account.proton.me/login?product=mail">
  35                 mail.proton.me
  36             </Href>
  37         );
  38
  39         return (
  40             <SettingsParagraph>
  41                 {c('Info')
  42                     .jt`Your ${VPN_APP_NAME} and ${MAIL_APP_NAME} accounts are linked. To delete them both, please sign in at ${loginLink} and delete your account there.`}
  43             </SettingsParagraph>
  44         );
  45     }
  46
  47     if (subscription?.isManagedByMozilla) {
  48         return <MozillaInfoPanel />;
  49     }
  50
  51     return (
  52         <>
  53             {renderDiscountModal && (
  54                 <DiscountWarningModal
  55                     type="delete"
  56                     {...migrationDiscountModalProps}
  57                     onConfirm={() => {
  58                         if (hasVisionary(subscription)) {
  59                             setVisionaryLossModal(true);
  60                             return;
  61                         }
  62                         setDeleteAccountModalOpen(true);
  63                     }}
  64                 />
  65             )}
  66             {renderVisionaryLossModal && (
  67                 <VisionaryWarningModal
  68                     type="delete"
  69                     {...visionaryLossModalProps}
  70                     onConfirm={() => {
  71                         setDeleteAccountModalOpen(true);
  72                     }}
  73                 />
  74             )}
  75             {renderDeleteAccountModal && <DeleteAccountModal {...deleteAccountModalProps} />}
  76             <SettingsParagraph>
  77                 {c('Info')
  78                     .t`This will permanently delete your account and all of its data. You will not be able to reactivate this account.`}
  79             </SettingsParagraph>
  80             <Button
  81                 color="danger"
  82                 shape="outline"
  83                 id="deleteButton"
  84                 onClick={() => {
  85                     if (hasMigrationDiscount(subscription)) {
  86                         setMigrationDiscountModal(true);
  87                         return;
  88                     }
  89                     if (hasVisionary(subscription)) {
  90                         setVisionaryLossModal(true);
  91                         return;
  92                     }
  93                     setDeleteAccountModalOpen(true);
  94                 }}
  95             >
  96                 {c('Action').t`Delete your account`}
  97             </Button>
  98         </>
  99     );
 100 };
 101
 102 export default DeleteSection;