packages/components/containers/payments/MemberDowngradeModal.tsx

   1 import type { FormEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button, Card } from '@proton/atoms';
   7 import Form from '@proton/components/components/form/Form';
   8 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   9 import Modal from '@proton/components/components/modalTwo/Modal';
  10 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
  11 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
  12 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  13 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
  14 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  15 import { BRAND_NAME } from '@proton/shared/lib/constants';
  16 import { requiredValidator } from '@proton/shared/lib/helpers/formValidators';
  17 import type { Organization } from '@proton/shared/lib/interfaces';
  18 import { getOrganizationDenomination } from '@proton/shared/lib/organization/helper';
  19
  20 interface Props extends ModalProps {
  21     organization: Organization;
  22     onConfirm: () => void;
  23 }
  24
  25 const MemberDowngradeModal = ({ organization, onConfirm, onClose, ...rest }: Props) => {
  26     const { validator, onFormSubmit } = useFormErrors();
  27     const [confirmText, setConfirmText] = useState('');
  28     const organizationName = organization.Name;
  29     const hasFamilyOrDuo = getOrganizationDenomination(organization) === 'familyGroup';
  30
  31     const modalTitle = hasFamilyOrDuo
  32         ? c('familyOffer_2023:Title').t`Delete family group?`
  33         : c('familyOffer_2023:Title').t`Delete organization?`;
  34     const warningMessage = hasFamilyOrDuo
  35         ? c('familyOffer_2023:Member downgrade modal')
  36               .t`This will remove all ${BRAND_NAME} premium features for every family member.`
  37         : c('familyOffer_2023:Member downgrade modal')
  38               .t`This will permanently delete all sub-users, accounts, and data associated with your organization.`;
  39     const label = hasFamilyOrDuo
  40         ? c('familyOffer_2023:Label').t`Enter family group name to confirm`
  41         : c('familyOffer_2023:Label').t`Enter organization name to confirm`;
  42     const validatorError = hasFamilyOrDuo
  43         ? c('familyOffer_2023:Error').t`Family group not recognized. Try again.`
  44         : c('familyOffer_2023:Error').t`Organization not recognized. Try again.`;
  45
  46     return (
  47         <Modal
  48             as={Form}
  49             onSubmit={(event: FormEvent) => {
  50                 event.preventDefault();
  51                 if (!onFormSubmit()) {
  52                     return;
  53                 }
  54                 onConfirm();
  55                 onClose?.();
  56             }}
  57             onClose={onClose}
  58             {...rest}
  59         >
  60             <ModalHeader title={modalTitle} />
  61             <ModalContent>
  62                 <div className="mb-4">{warningMessage}</div>
  63                 <Card rounded className="text-break user-select mb-4">
  64                     {organizationName}
  65                 </Card>
  66                 <InputFieldTwo
  67                     id="confirm-text"
  68                     bigger
  69                     label={label}
  70                     error={validator([
  71                         requiredValidator(confirmText),
  72                         confirmText !== organizationName ? validatorError : '',
  73                     ])}
  74                     autoFocus
  75                     value={confirmText}
  76                     onValue={setConfirmText}
  77                 />
  78             </ModalContent>
  79             <ModalFooter>
  80                 <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>
  81                 <Button type="submit" color="danger" data-testid="confirm-member-delete">
  82                     {c('Action').t`Delete`}
  83                 </Button>
  84             </ModalFooter>
  85         </Modal>
  86     );
  87 };
  88
  89 export default MemberDowngradeModal;