feat: open drawer on click of new messages bar (#2492)

City-of-Helsinki · Nov 22, 2023 · 11c80ab · 11c80ab
1 parent acc1147
commit 11c80ab
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 19 deletions.
diff --git a/...end/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.sc.ts b/...end/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.sc.ts
@@ -95,6 +95,7 @@ export const $ListInfo = styled.div`
 export const $ListInfoInner = styled.div`
   display: flex;
   align-items: center;
+  cursor: pointer;
 `;
 
 export const $ListInfoText = styled.div`

diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx
@@ -128,7 +128,7 @@ const ListItem: React.FC<ListItemProps> = (props) => {
             theme={
               status === APPLICATION_STATUSES.INFO_REQUIRED ? 'coat' : 'black'
             }
-            onClick={allowedAction.handleAction}
+            onClick={() => allowedAction.handleAction(false)}
             fullWidth
           >
             {allowedAction.label}
@@ -138,7 +138,7 @@ const ListItem: React.FC<ListItemProps> = (props) => {
       {Number(unreadMessagesCount) > 0 && (
         <$ListInfo>
           <$GridCell $colStart={2}>
-            <$ListInfoInner>
+            <$ListInfoInner onClick={() => allowedAction.handleAction(true)}>
               <IconSpeechbubbleText />
               <$ListInfoText>
                 {t('common:applications.list.common.newMessages', {

diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts b/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts
@@ -81,23 +81,27 @@ const useApplicationList = (status: string[]): ApplicationListProps => {
     id: string,
     applicationStatus: APPLICATION_STATUSES
   ): ApplicationAllowedAction => {
+    const handleAction = (openDrawer: boolean): void => {
+      void router.push(
+        `${ROUTES.APPLICATION_FORM}?id=${id}${
+          openDrawer ? '&openDrawer=1' : ''
+        }`
+      );
+    };
+
     switch (applicationStatus) {
       case APPLICATION_STATUSES.DRAFT:
       case APPLICATION_STATUSES.INFO_REQUIRED:
         return {
           label: t(`${translationListBase}.common.edit`),
-          handleAction: (): void => {
-            void router.push(`${ROUTES.APPLICATION_FORM}?id=${id}`);
-          },
+          handleAction,
           Icon: IconPen,
         };
 
       default:
         return {
           label: t(`${translationListBase}.common.check`),
-          handleAction: (): void => {
-            void router.push(`${ROUTES.APPLICATION_FORM}?id=${id}`);
-          },
+          handleAction,
         };
     }
   };

diff --git a/frontend/benefit/applicant/src/components/header/Header.tsx b/frontend/benefit/applicant/src/components/header/Header.tsx
@@ -21,7 +21,7 @@ const Header: React.FC = () => {
     unreadMessagesCount,
     isMessagesDrawerVisible,
     handleLanguageChange,
-    toggleMessagesDrawerVisiblity,
+    setMessagesDrawerVisiblity,
   } = useHeader();
   const router = useRouter();
   const { asPath } = router;
@@ -66,7 +66,7 @@ const Header: React.FC = () => {
                   size="small"
                   iconLeft={<IconSpeechbubbleText />}
                   theme="coat"
-                  onClick={toggleMessagesDrawerVisiblity}
+                  onClick={() => setMessagesDrawerVisiblity(true)}
                 >
                   {t('common:header.messages')}
                   {unreadMessagesCount
@@ -82,7 +82,7 @@ const Header: React.FC = () => {
       {isAuthenticated && hasMessenger && (
         <Messenger
           isOpen={isMessagesDrawerVisible}
-          onClose={toggleMessagesDrawerVisiblity}
+          onClose={() => setMessagesDrawerVisiblity(false)}
           customItemsMessages={
             <$CustomMessagesActions>
               <IconLock />

diff --git a/frontend/benefit/applicant/src/components/header/useHeader.ts b/frontend/benefit/applicant/src/components/header/useHeader.ts
@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 import { TFunction } from 'next-i18next';
 import React, { useEffect, useState } from 'react';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
-import useToggle from 'shared/hooks/useToggle';
 import { NavigationItem, OptionType } from 'shared/types/common';
 
 type ExtendedComponentProps = {
@@ -21,22 +20,23 @@ type ExtendedComponentProps = {
   ) => void;
   handleNavigationItemClick: (url: string) => void;
   unreadMessagesCount: number | undefined | null;
-  toggleMessagesDrawerVisiblity: () => void;
+  setMessagesDrawerVisiblity: (state: boolean) => void;
   isMessagesDrawerVisible: boolean;
 };
 
 const useHeader = (): ExtendedComponentProps => {
   const { t } = useTranslation();
   const router = useRouter();
   const id = router?.query?.id?.toString() ?? '';
+  const openDrawer = Boolean(router?.query?.openDrawer);
   const { axios } = useBackendAPI();
 
   const [hasMessenger, setHasMessenger] = useState<boolean>(false);
   const [unreadMessagesCount, setUnredMessagesCount] = useState<
     number | undefined | null
   >(null);
-  const [isMessagesDrawerVisible, toggleMessagesDrawerVisiblity] =
-    useToggle(false);
+  const [isMessagesDrawerVisible, setMessagesDrawerVisiblity] =
+    useState(openDrawer);
   const { pathname, asPath, query } = router;
 
   const languageOptions = React.useMemo(
@@ -58,14 +58,16 @@ const useHeader = (): ExtendedComponentProps => {
     if (isMessagesDrawerVisible && Number(unreadMessagesCount) > 0) {
       setUnredMessagesCount(null);
     }
-  }, [isMessagesDrawerVisible, unreadMessagesCount]);
+    if (openDrawer) {
+      setMessagesDrawerVisiblity(true);
+    }
+  }, [isMessagesDrawerVisible, unreadMessagesCount, openDrawer]);
 
   const status = React.useMemo(
     (): APPLICATION_STATUSES =>
       application?.status || APPLICATION_STATUSES.DRAFT,
     [application]
   );
-
   useEffect(() => {
     setHasMessenger(
       status === APPLICATION_STATUSES.INFO_REQUIRED ||
@@ -96,7 +98,7 @@ const useHeader = (): ExtendedComponentProps => {
     t,
     handleLanguageChange,
     handleNavigationItemClick,
-    toggleMessagesDrawerVisiblity,
+    setMessagesDrawerVisiblity,
     languageOptions,
     hasMessenger,
     unreadMessagesCount,

diff --git a/frontend/benefit/shared/src/types/application.d.ts b/frontend/benefit/shared/src/types/application.d.ts
@@ -78,7 +78,7 @@ export type ApplicationInBatch = {
 
 interface ApplicationAllowedAction {
   label: string;
-  handleAction: () => void;
+  handleAction: (openDrawer: boolean) => void;
   Icon?: React.FC;
 }