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

   1 import { c, msgid } from 'ttag';
   2
   3 import { useUser } from '@proton/account/user/hooks';
   4 import { Button } from '@proton/atoms';
   5 import Icon from '@proton/components/components/icon/Icon';
   6 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   7 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   8 import Tooltip from '@proton/components/components/tooltip/Tooltip';
   9 import { useContactGroups } from '@proton/mail';
  10 import { useContactEmails } from '@proton/mail/contactEmails/hooks';
  11 import type { Recipient } from '@proton/shared/lib/interfaces';
  12 import noop from '@proton/utils/noop';
  13
  14 import ModalContent from '../../../components/modalTwo/ModalContent';
  15 import ModalFooter from '../../../components/modalTwo/ModalFooter';
  16 import ModalHeader from '../../../components/modalTwo/ModalHeader';
  17 import type { ContactExportingProps } from '../modals/ContactExportingModal';
  18 import RecipientDropdownItem from '../view/RecipientDropdownItem';
  19 import type { ContactGroupDeleteProps } from './ContactGroupDeleteModal';
  20 import type { ContactGroupEditProps } from './ContactGroupEditModal';
  21
  22 import './ContactGroupDetailsModal.scss';
  23
  24 export interface ContactGroupDetailsProps {
  25     contactGroupID: string;
  26     onEdit: (props: ContactGroupEditProps) => void;
  27     onDelete: (props: ContactGroupDeleteProps) => void;
  28     onExport: (props: ContactExportingProps) => void;
  29     onUpgrade: () => void;
  30     onCompose?: (recipients: Recipient[], attachments: File[]) => void;
  31     onCloseContactDetailsModal?: () => void;
  32 }
  33
  34 type Props = ContactGroupDetailsProps & ModalProps;
  35
  36 const ContactGroupDetailsModal = ({
  37     contactGroupID,
  38     onEdit,
  39     onDelete,
  40     onExport,
  41     onUpgrade,
  42     onCompose,
  43     onCloseContactDetailsModal,
  44     ...rest
  45 }: Props) => {
  46     const [user] = useUser();
  47     const [contactGroups = [], loadingGroups] = useContactGroups();
  48     const [contactEmails = [], loadingEmails] = useContactEmails();
  49     const loading = loadingGroups || loadingEmails;
  50     const group = contactGroups.find(({ ID }) => ID === contactGroupID);
  51     const emails = contactEmails.filter(({ LabelIDs = [] }: { LabelIDs: string[] }) =>
  52         LabelIDs.includes(contactGroupID)
  53     );
  54     const emailsCount = emails.length;
  55
  56     const handleEdit = () => {
  57         if (!user.hasPaidMail) {
  58             onUpgrade();
  59             return;
  60         }
  61         onEdit({ contactGroupID });
  62         rest.onClose?.();
  63     };
  64
  65     const handleDelete = () => {
  66         onDelete({ groupIDs: [contactGroupID] });
  67         rest.onClose?.();
  68     };
  69
  70     const handleExportContactGroup = () => {
  71         onExport({ contactGroupID });
  72     };
  73
  74     const handleCompose = () => {
  75         if (onCompose) {
  76             const recipients = emails.map((email) => ({ Name: email.Name, Address: email.Email }));
  77             onCompose([...recipients], []);
  78             rest.onClose?.();
  79             onCloseContactDetailsModal?.();
  80         }
  81     };
  82
  83     const handleComposeSingle = (recipient: Recipient) => {
  84         if (onCompose) {
  85             onCompose([recipient], []);
  86             rest.onClose?.();
  87             onCloseContactDetailsModal?.();
  88         }
  89     };
  90
  91     const getComposeAction = (recipient: Recipient) => {
  92         return (
  93             onCompose && (
  94                 <div className="mr-2">
  95                     <Tooltip title={c('Action').t`Compose`}>
  96                         <Button color="weak" shape="ghost" icon onClick={() => handleComposeSingle(recipient)}>
  97                             <Icon name="pen-square" alt={c('Action').t`Compose`} />
  98                         </Button>
  99                     </Tooltip>
 100                 </div>
 101             )
 102         );
 103     };
 104
 105     return (
 106         <ModalTwo size="large" className="contacts-modal" {...rest}>
 107             <ModalHeader
 108                 title={
 109                     <div className="flex flex-nowrap items-center gap-2">
 110                         <span
 111                             style={{ backgroundColor: group?.Color ?? '', '--w-custom': '2.125rem' }}
 112                             className="rounded w-custom text-center shrink-0"
 113                         >
 114                             <Icon color="white" name="users" />
 115                         </span>
 116                         <span className="text-ellipsis" title={group?.Name}>
 117                             {group?.Name}
 118                         </span>
 119                     </div>
 120                 }
 121                 actions={[
 122                     <Tooltip title={c('Action').t`Edit`}>
 123                         <Button
 124                             icon
 125                             shape="ghost"
 126                             color="weak"
 127                             onClick={handleEdit}
 128                             disabled={loading}
 129                             className="inline-flex ml-2"
 130                             data-testid="group-summary:edit"
 131                         >
 132                             <Icon name="pen" alt={c('Action').t`Edit`} />
 133                         </Button>
 134                     </Tooltip>,
 135                     <Tooltip title={c('Action').t`Export contact group`}>
 136                         <Button
 137                             color="weak"
 138                             shape="ghost"
 139                             icon
 140                             onClick={handleExportContactGroup}
 141                             disabled={loading}
 142                             className="inline-flex ml-2"
 143                             data-testid="group-summary:export"
 144                         >
 145                             <Icon name="arrow-up-from-square" alt={c('Action').t`Export contact group`} />
 146                         </Button>
 147                     </Tooltip>,
 148                     <Tooltip title={c('Action').t`Delete`}>
 149                         <Button
 150                             color="weak"
 151                             shape="ghost"
 152                             icon
 153                             onClick={handleDelete}
 154                             disabled={loading}
 155                             className="inline-flex ml-2"
 156                             data-testid="group-summary:delete"
 157                         >
 158                             <Icon name="trash" alt={c('Action').t`Delete`} />
 159                         </Button>
 160                     </Tooltip>,
 161                 ]}
 162             />
 163             <ModalContent>
 164                 <h4 className="mb-4 color-weak text-lg">
 165                     {c('Title').ngettext(
 166                         msgid`${emailsCount} email address`,
 167                         `${emailsCount} email addresses`,
 168                         emailsCount
 169                     )}
 170                 </h4>
 171                 {emails.map((email) => {
 172                     const recipient: Recipient = { Name: email.Name, Address: email.Email };
 173                     return (
 174                         <RecipientDropdownItem
 175                             label={recipient.Name}
 176                             recipient={recipient}
 177                             displaySenderImage={false}
 178                             closeDropdown={noop}
 179                             additionalAction={getComposeAction(recipient)}
 180                             simple
 181                             key={email.Email}
 182                         />
 183                     );
 184                 })}
 185             </ModalContent>
 186             <ModalFooter>
 187                 <Button onClick={rest.onClose}>{c('Action').t`Close`}</Button>
 188                 {onCompose && (
 189                     <Button
 190                         color="norm"
 191                         onClick={handleCompose}
 192                         disabled={loading}
 193                         className="inline-flex justify-center"
 194                     >
 195                         <Icon name="pen-square" className="self-center mr-2" alt={c('Action').t`New message`} />
 196                         {c('Action').t`New message`}
 197                     </Button>
 198                 )}
 199             </ModalFooter>
 200         </ModalTwo>
 201     );
 202 };
 203
 204 export default ContactGroupDetailsModal;