Merge branch 'open-contact-in-drawer-based-on-url' into 'main'

Open contacts in drawer, edit and create contacts and contacts groups based on URL content

See merge request web/clients!18803

Author: MargeBot

applications/mail/src/app/hooks/drawer/useAutoOpenContactsDrawer.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import useDrawer from '@proton/components/hooks/drawer/useDrawer';
+import { isContactSearchParams } from '@proton/mail/hooks/autoOpenContacts/helper';
+import { DRAWER_NATIVE_APPS } from '@proton/shared/lib/drawer/interfaces';
+
+const useAutoOpenContactsDrawer = () => {
+    const location = useLocation();
+
+    const { setAppInView } = useDrawer();
+
+    useEffect(() => {
+        if (isContactSearchParams(location)) {
+            setAppInView(DRAWER_NATIVE_APPS.CONTACTS);
+        }
+    }, []);
+};
+
+export default useAutoOpenContactsDrawer;

applications/mail/src/app/router/sideEffects/useMailboxContainerSideEffects.test.tsx

@@ -49,6 +49,11 @@ jest.mock('proton-mail/hooks/mailbox/usePreLoadElements', () => ({
     default: jest.fn(),
 }));
 
+jest.mock('proton-mail/hooks/drawer/useAutoOpenContactsDrawer', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
+
 const props = {
     labelID: 'inbox',
     isSearch: false,

applications/mail/src/app/router/sideEffects/useMailboxContainerSideEffects.tsx

@@ -2,6 +2,7 @@ import { useCalendarUserSettings } from '@proton/calendar/calendarUserSettings/h
 import { useCalendars } from '@proton/calendar/calendars/hooks';
 import { useInboxDesktopBadgeCount } from '@proton/components';
 
+import useAutoOpenContactsDrawer from 'proton-mail/hooks/drawer/useAutoOpenContactsDrawer';
 import useNewEmailNotification from 'proton-mail/hooks/mailbox/notifications/useNewEmailNotification';
 import { type EncryptedSearchParams, useApplyEncryptedSearch } from 'proton-mail/hooks/mailbox/useApplyEncryptedSearch';
 import { useMailboxFavicon } from 'proton-mail/hooks/mailbox/useMailboxFavicon';
@@ -47,6 +48,9 @@ export const useMailboxContainerSideEffects = ({
 
     useNewEmailNotification(() => handleCheckAll(false));
 
+    // When URL contains a contact route, we need to open the contact drawer app
+    useAutoOpenContactsDrawer();
+
     // Launch two calendar-specific API calls here to boost calendar widget performance
     useCalendars();
     useCalendarUserSettings();

packages/components/components/drawer/views/DrawerContactView.tsx

@@ -18,6 +18,7 @@ import ContactsWidgetGroupsContainer from '@proton/components/containers/contact
 import type { CustomAction } from '@proton/components/containers/contacts/widget/types';
 import { CONTACT_WIDGET_TABS } from '@proton/components/containers/contacts/widget/types';
 import useDrawerContactFocus from '@proton/components/hooks/useDrawerContactFocus';
+import useContactsDrawerFromURL from '@proton/mail/hooks/autoOpenContacts/useContactsDrawerFromURL';
 import type { Recipient } from '@proton/shared/lib/interfaces';
 import noop from '@proton/utils/noop';
 
@@ -58,6 +59,8 @@ const DrawerContactView = ({ onCompose, onMailTo = noop, customActions = [] }: P
         onLimitReached,
     } = useContactModals({ onMailTo, onCompose });
 
+    useContactsDrawerFromURL({ onEdit, onGroupEdit, onSelectGroupTab: () => setTab(options[1]) });
+
     const handleDetails = (contactID: string) => {
         void onDetails(contactID);
     };

packages/mail/hooks/autoOpenContacts/helper.ts

@@ -0,0 +1,24 @@
+import type { Location } from 'history';
+
+import { getSearchParams } from '@proton/shared/lib/helpers/url';
+
+export enum CONTACT_SEARCH_PARAMS {
+    CREATE_CONTACT = 'create-contact',
+    EDIT_CONTACT = 'edit-contact',
+    CREATE_CONTACT_GROUP = 'create-contact-group',
+    EDIT_CONTACT_GROUP = 'edit-contact-group',
+}
+
+export const contactSearchParams: CONTACT_SEARCH_PARAMS[] = Object.values(CONTACT_SEARCH_PARAMS);
+
+export const isContactSearchParams = (location: Location) => {
+    if (!location.hash) {
+        return false;
+    }
+
+    const params = getSearchParams(location.hash);
+
+    const res = Object.keys(params).some((key) => contactSearchParams.includes(key as CONTACT_SEARCH_PARAMS));
+
+    return res;
+};

packages/mail/hooks/autoOpenContacts/useContactsDrawerFromURL.ts

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { c } from 'ttag';
+
+import { useUserKeys } from '@proton/account/userKeys/hooks';
+import type { ContactEditProps } from '@proton/components/containers/contacts/edit/ContactEditModal';
+import type { ContactGroupEditProps } from '@proton/components/containers/contacts/group/ContactGroupEditModal';
+import useConfig from '@proton/components/hooks/useConfig';
+import useNotifications from '@proton/components/hooks/useNotifications';
+import type { PrivateKeyReference } from '@proton/crypto';
+import { CONTACT_SEARCH_PARAMS, isContactSearchParams } from '@proton/mail/hooks/autoOpenContacts/helper';
+import { useGetContact } from '@proton/mail/store/contacts/contactHooks';
+import { APPS } from '@proton/shared/lib/constants';
+import { prepareVCardContact } from '@proton/shared/lib/contacts/decrypt';
+import { getSearchParams } from '@proton/shared/lib/helpers/url';
+import type { DecryptedKey } from '@proton/shared/lib/interfaces';
+import { splitKeys } from '@proton/shared/lib/keys';
+
+interface Props {
+    onEdit: (props: ContactEditProps) => void;
+    onGroupEdit: (props: ContactGroupEditProps) => void;
+    onSelectGroupTab: () => void;
+}
+
+/**
+ * This hook allows ET app to open the contact drawer on the mail app using a deeplink
+ */
+const useContactsDrawerFromURL = ({ onEdit, onGroupEdit, onSelectGroupTab }: Props) => {
+    const { APP_NAME } = useConfig();
+    const history = useHistory();
+    const location = useLocation();
+    const [userKeysList] = useUserKeys();
+    const getContact = useGetContact();
+    const { createNotification } = useNotifications();
+
+    const handleEditContact = async (contactID: string, userKeysList: DecryptedKey<PrivateKeyReference>[]) => {
+        // To edit a contact we first need to get the contact vCard
+        const contact = await getContact(contactID);
+        const { publicKeys, privateKeys } = splitKeys(userKeysList);
+
+        const { vCardContact, errors } = await prepareVCardContact(contact, {
+            publicKeys,
+            privateKeys,
+        });
+
+        if (errors.length > 0) {
+            createNotification({ type: 'error', text: c('Error').t`Failed to open to contact` });
+            return;
+        }
+
+        onEdit({ contactID: contactID, vCardContact });
+    };
+
+    useEffect(() => {
+        if (APP_NAME !== APPS.PROTONMAIL || !isContactSearchParams(location) || !userKeysList) {
+            return;
+        }
+
+        const params = getSearchParams(location.hash);
+
+        const contactCreateMatch = CONTACT_SEARCH_PARAMS.CREATE_CONTACT in params;
+        const contactEditMatch = CONTACT_SEARCH_PARAMS.EDIT_CONTACT in params;
+        const contactGroupCreateMatch = CONTACT_SEARCH_PARAMS.CREATE_CONTACT_GROUP in params;
+        const contactGroupEditMatch = CONTACT_SEARCH_PARAMS.EDIT_CONTACT_GROUP in params;
+
+        // Check for group-related routes first to set the correct tab
+        if (contactGroupCreateMatch || contactGroupEditMatch) {
+            onSelectGroupTab();
+        }
+
+        if (contactCreateMatch) {
+            onEdit({});
+        } else if (contactGroupCreateMatch) {
+            onGroupEdit({});
+        } else if (contactEditMatch && params[CONTACT_SEARCH_PARAMS.EDIT_CONTACT]) {
+            void handleEditContact(params[CONTACT_SEARCH_PARAMS.EDIT_CONTACT], userKeysList);
+        } else if (contactGroupEditMatch && params[CONTACT_SEARCH_PARAMS.EDIT_CONTACT_GROUP]) {
+            onGroupEdit({ contactGroupID: params[CONTACT_SEARCH_PARAMS.EDIT_CONTACT_GROUP] });
+        }
+
+        // remove hash params so that closing the modal will not trigger a modal reopen
+        history.replace({ pathname: location.pathname, search: location.search });
+    }, [location.hash, handleEditContact, userKeysList, APP_NAME]);
+};
+
+export default useContactsDrawerFromURL;