packages/components/containers/payments/DowngradeModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Alert from '@proton/components/components/alert/Alert';
   5 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   6 import Prompt from '@proton/components/components/prompt/Prompt';
   7 import { MAIL_APP_NAME, VPN_APP_NAME } from '@proton/shared/lib/constants';
   8
   9 export interface DowngradeModalProps extends ModalProps {
  10     hasMail: boolean;
  11     hasVpn: boolean;
  12     onConfirm: () => void;
  13 }
  14
  15 const DowngradeModal = ({ hasMail, hasVpn, onConfirm, onClose, ...rest }: DowngradeModalProps) => {
  16     const hasBundle = hasMail && hasVpn;
  17
  18     return (
  19         <Prompt
  20             title={c('Title').t`Confirm downgrade`}
  21             buttons={[
  22                 <Button
  23                     onClick={() => {
  24                         onConfirm();
  25                         onClose?.();
  26                     }}
  27                     color="norm"
  28                     data-testid="confirm-downgrade-btn"
  29                 >
  30                     {c('Action').t`Downgrade`}
  31                 </Button>,
  32                 <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>,
  33             ]}
  34             onClose={onClose}
  35             data-testid="confirm-downgrade-modal"
  36             {...rest}
  37         >
  38             <Alert className="mb-4" type="error">
  39                 {(() => {
  40                     if (hasBundle) {
  41                         return c('Info')
  42                             .t`If you proceed with the downgrade, you will lose access to ${MAIL_APP_NAME} and ${VPN_APP_NAME} paid features.`;
  43                     }
  44
  45                     if (hasMail) {
  46                         return c('Info')
  47                             .t`If you proceed with the downgrade, you will lose access to ${MAIL_APP_NAME} paid features, including additional storage and filters.`;
  48                     }
  49
  50                     return c('Info')
  51                         .t`If you proceed with the downgrade, you will lose access to ${VPN_APP_NAME} paid features.`;
  52                 })()}
  53             </Alert>
  54             <Alert type="warning">
  55                 {[
  56                     hasMail &&
  57                         c('Info')
  58                             .t`You must disable or remove any additional ${MAIL_APP_NAME} users, addresses, and custom domains before you can downgrade.`,
  59                     hasVpn && c('Info').t`Downgrading will terminate any connections to paid ${VPN_APP_NAME} servers.`,
  60                 ]
  61                     .filter(Boolean)
  62                     .join(' ')}
  63             </Alert>
  64         </Prompt>
  65     );
  66 };
  67
  68 export default DowngradeModal;