packages/components/containers/payments/LossLoyaltyModal.tsx

   1 import { c, msgid } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   5 import Prompt from '@proton/components/components/prompt/Prompt';
   6 import { BRAND_NAME, VPN_APP_NAME } from '@proton/shared/lib/constants';
   7 import humanSize from '@proton/shared/lib/helpers/humanSize';
   8 import type { Organization } from '@proton/shared/lib/interfaces';
   9
  10 interface Props extends ModalProps {
  11     organization: Organization;
  12     onConfirm: () => void;
  13 }
  14
  15 const LossLoyaltyModal = ({ organization, onConfirm, onClose, ...rest }: Props) => {
  16     const bonusSpace = organization.BonusSpace && humanSize({ bytes: organization.BonusSpace, unit: 'GB' });
  17
  18     return (
  19         <Prompt
  20             title={c('Title').t`Confirm loss of ${BRAND_NAME} bonuses`}
  21             buttons={[
  22                 <Button
  23                     onClick={() => {
  24                         onConfirm();
  25                         onClose?.();
  26                     }}
  27                     color="danger"
  28                     data-testid="confirm-loss-btn"
  29                 >
  30                     {c('Action').t`Remove bonuses`}
  31                 </Button>,
  32                 <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>,
  33             ]}
  34             onClose={onClose}
  35             data-testid="confirm-loss"
  36             {...rest}
  37         >
  38             <div className="mb-4">
  39                 {c('Info').t`Since you're a loyal user, your account has additional features enabled.`}
  40             </div>
  41             <div>
  42                 {c('Info')
  43                     .t`By downgrading to a Free plan, you will permanently lose these benefits, even if you upgrade again in the future.`}
  44                 <ul>
  45                     {organization.BonusSpace ? <li>{c('Info').t`+${bonusSpace} bonus storage`}</li> : null}
  46                     {organization.BonusVPN ? (
  47                         <li>
  48                             {c('Info').ngettext(
  49                                 msgid`+${organization.BonusVPN} connection for ${VPN_APP_NAME} (allows you to connect more devices to VPN)`,
  50                                 `+${organization.BonusVPN} connections for ${VPN_APP_NAME} (allows you to connect more devices to VPN)`,
  51                                 organization.BonusVPN
  52                             )}
  53                         </li>
  54                     ) : null}
  55                 </ul>
  56             </div>
  57         </Prompt>
  58     );
  59 };
  60
  61 export default LossLoyaltyModal;