packages/components/containers/contacts/merge/ContactMergeViewContent.tsx

   1 import { useMemo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useAddresses } from '@proton/account/addresses/hooks';
   6 import { Button } from '@proton/atoms';
   7 import Loader from '@proton/components/components/loader/Loader';
   8 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   9 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  10 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  11 import { useContactGroups } from '@proton/mail';
  12 import { toMap } from '@proton/shared/lib/helpers/object';
  13 import type { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
  14 import type { VCardContact } from '@proton/shared/lib/interfaces/contacts/VCard';
  15 import noop from '@proton/utils/noop';
  16
  17 import useContactList from '../hooks/useContactList';
  18 import ContactView from '../view/ContactView';
  19
  20 interface Props {
  21     contact?: VCardContact;
  22     loading: boolean;
  23     beMergedIDs: string[];
  24     onSubmit: () => void;
  25     onClose?: () => void;
  26 }
  27
  28 const ContactMergeViewContent = ({ contact, loading: loadingContact, beMergedIDs, onSubmit, onClose }: Props) => {
  29     const [addresses = [], loadingAddresses] = useAddresses();
  30     const ownAddresses = useMemo(() => addresses.map(({ Email }) => Email), [addresses]);
  31
  32     const { loading: loadingContacts, contactEmailsMap } = useContactList({});
  33     const contactEmails = beMergedIDs.flatMap((contactID) => contactEmailsMap[contactID] as ContactEmail[]);
  34
  35     const [contactGroups = [], loadingContactGroups] = useContactGroups();
  36     const contactGroupsMap = useMemo(() => toMap(contactGroups), [contactGroups]);
  37
  38     const loading = loadingContact || loadingAddresses || loadingContacts || loadingContactGroups;
  39
  40     return (
  41         <>
  42             <ModalTwoHeader title={c('Title').t`Contact Details`} />
  43             <ModalTwoContent>
  44                 {loading ? (
  45                     <Loader />
  46                 ) : (
  47                     <ContactView
  48                         vCardContact={contact as VCardContact}
  49                         contactID=""
  50                         contactEmails={contactEmails}
  51                         contactGroupsMap={contactGroupsMap}
  52                         ownAddresses={ownAddresses}
  53                         onReload={noop}
  54                         onEdit={noop}
  55                         onEmailSettings={noop}
  56                         onGroupDetails={noop}
  57                         onGroupEdit={noop}
  58                         onUpgrade={noop}
  59                         onSignatureError={noop}
  60                         onDecryptionError={noop}
  61                         isPreview
  62                     />
  63                 )}
  64             </ModalTwoContent>
  65             <ModalTwoFooter>
  66                 <Button onClick={onClose}>{c('Action').t`Close`}</Button>
  67                 <Button color="norm" disabled={!contact} onClick={onSubmit}>
  68                     {c('Action').t`Merge`}
  69                 </Button>
  70             </ModalTwoFooter>
  71         </>
  72     );
  73 };
  74
  75 export default ContactMergeViewContent;