packages/components/containers/contacts/group/ContactGroupDeleteModal.tsx

   1 import { c, msgid } 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 useApi from '@proton/components/hooks/useApi';
   8 import useEventManager from '@proton/components/hooks/useEventManager';
   9 import useNotifications from '@proton/components/hooks/useNotifications';
  10 import { useLoading } from '@proton/hooks';
  11 import { useContactGroups } from '@proton/mail';
  12 import { allSucceded } from '@proton/shared/lib/api/helpers/response';
  13 import { deleteLabels } from '@proton/shared/lib/api/labels';
  14 import type { ContactGroup } from '@proton/shared/lib/interfaces/contacts';
  15
  16 import { getDeleteText } from '../../general/helper';
  17
  18 export interface ContactGroupDeleteProps {
  19     groupIDs: string[];
  20     onDelete?: () => void;
  21     onClose?: () => void;
  22 }
  23
  24 type Props = ContactGroupDeleteProps & ModalProps;
  25
  26 const ContactGroupDeleteModal = ({ groupIDs = [], onDelete, ...rest }: Props) => {
  27     const api = useApi();
  28     const { createNotification } = useNotifications();
  29     const { call } = useEventManager();
  30     const [loading, withLoading] = useLoading();
  31     const [groups = []] = useContactGroups();
  32
  33     const handleDelete = async () => {
  34         const apiSuccess = allSucceded(await api(deleteLabels(groupIDs)));
  35         await call();
  36         onDelete?.();
  37         rest.onClose?.();
  38         if (!apiSuccess) {
  39             return createNotification({ text: c('Error').t`Some groups could not be deleted`, type: 'warning' });
  40         }
  41         createNotification({
  42             text: c('Success').ngettext(msgid`Contact group deleted`, `Contact groups deleted`, groupIDs.length),
  43         });
  44     };
  45
  46     const count = groupIDs.length;
  47     const { Name = '' } = groups.find((group: ContactGroup) => group.ID === groupIDs[0]) || {};
  48     const title =
  49         count === 1
  50             ? getDeleteText(Name)
  51             : // translator: the variable is a positive integer (written in digits) always strictly bigger than 1
  52               c('Title').ngettext(msgid`Delete ${count} contact group`, `Delete ${count} contact groups`, count);
  53
  54     let alertText = c('Warning').t`Are you sure you want to permanently delete this contact group?`;
  55     if (count > 1) {
  56         alertText = c('Warning').t`Are you sure you want to permanently delete these contact groups?`;
  57     }
  58
  59     let infoMessage = c('Info').t`Please note that addresses assigned to this group will NOT be deleted.`;
  60     if (count > 1) {
  61         infoMessage = c('Info').t`Please note that addresses assigned to these groups will NOT be deleted.`;
  62     }
  63
  64     return (
  65         <Prompt
  66             title={title}
  67             buttons={[
  68                 <Button
  69                     color="danger"
  70                     data-testid="delete-button"
  71                     onClick={() => withLoading(handleDelete())}
  72                     loading={loading}
  73                 >
  74                     {c('Action').t`Delete`}
  75                 </Button>,
  76                 <Button onClick={rest.onClose}>{c('Action').t`Cancel`}</Button>,
  77             ]}
  78             {...rest}
  79         >
  80             <Alert className="mb-4" type="info">
  81                 {infoMessage}
  82             </Alert>
  83             <Alert className="mb-4" type="error">
  84                 {alertText}
  85             </Alert>
  86         </Prompt>
  87     );
  88 };
  89
  90 export default ContactGroupDeleteModal;