From c3b082027ad31f29b86834b0391bda612a18a77d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilia=20M=C3=A4kel=C3=A4?= <emilia.makela@vincit.fi>
Date: Wed, 12 Jun 2024 10:11:30 +0300
Subject: [PATCH] feat: extend access to handler sidebar notes (#3084)
 (HL-1343)

- Notes can now be added even if the application has been handled
- The sidebar is now available in the alteration handling view
---
 .../handler/public/locales/en/common.json     |  2 +-
 .../handler/public/locales/fi/common.json     |  2 +-
 .../handler/public/locales/sv/common.json     |  2 +-
 .../AlterationHandlingForm.tsx                | 33 ++++++++++++++++++-
 .../HandlingApplicationActions.tsx            | 10 +++---
 .../HandlingApplicationActionsAhjo.tsx        | 10 +++---
 .../useHandlingApplicationActions.ts          |  6 ++--
 .../src/components/sidebar/ChangeList.tsx     | 11 +++----
 .../src/components/sidebar/Sidebar.tsx        | 12 ++++---
 .../src/components/sidebar/useSidebar.ts      |  5 +--
 10 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
index 2d2b197721..f588f1c23d 100644
--- a/frontend/benefit/handler/public/locales/en/common.json
+++ b/frontend/benefit/handler/public/locales/en/common.json
@@ -40,7 +40,7 @@
       "note": ""
     },
     "showEveryone": "Nämä viestit näkyvät hakijalle",
-    "showToHanlderOnly": "Näkyy vain käsittelijöille",
+    "showToHandlerOnly": "Näkyy vain käsittelijöille",
     "compose": "Kirjoita viesti",
     "composeNote": "Kirjoita sisäinen muistiinpano",
     "send": "Lähetä",
diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json
index daefb765d6..bb03c3f6fe 100644
--- a/frontend/benefit/handler/public/locales/fi/common.json
+++ b/frontend/benefit/handler/public/locales/fi/common.json
@@ -40,7 +40,7 @@
       "note": ""
     },
     "showEveryone": "Nämä viestit näkyvät hakijalle",
-    "showToHanlderOnly": "Näkyy vain käsittelijöille",
+    "showToHandlerOnly": "Näkyy vain käsittelijöille",
     "compose": "Kirjoita viesti",
     "composeNote": "Kirjoita sisäinen muistiinpano",
     "send": "Lähetä",
diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json
index 2d2b197721..f588f1c23d 100644
--- a/frontend/benefit/handler/public/locales/sv/common.json
+++ b/frontend/benefit/handler/public/locales/sv/common.json
@@ -40,7 +40,7 @@
       "note": ""
     },
     "showEveryone": "Nämä viestit näkyvät hakijalle",
-    "showToHanlderOnly": "Näkyy vain käsittelijöille",
+    "showToHandlerOnly": "Näkyy vain käsittelijöille",
     "compose": "Kirjoita viesti",
     "composeNote": "Kirjoita sisäinen muistiinpano",
     "send": "Lähetä",
diff --git a/frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingForm.tsx b/frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingForm.tsx
index e9c0a27e21..6a1f8c382c 100644
--- a/frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingForm.tsx
+++ b/frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingForm.tsx
@@ -12,7 +12,11 @@ import AlterationHandlingConfirmationModal from 'benefit/handler/components/alte
 import AlterationHandlingSection from 'benefit/handler/components/alterationHandling/AlterationHandlingSection';
 import AlterationSummary from 'benefit/handler/components/alterationHandling/AlterationSummary';
 import useAlterationHandlingForm from 'benefit/handler/components/alterationHandling/useAlterationHandlingForm';
-import { DEFAULT_MINIMUM_RECOVERY_AMOUNT } from 'benefit/handler/constants';
+import { $CustomNotesActions } from 'benefit/handler/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.sc';
+import Sidebar from 'benefit/handler/components/sidebar/Sidebar';
+import {
+  DEFAULT_MINIMUM_RECOVERY_AMOUNT,
+} from 'benefit/handler/constants';
 import {
   Application,
   ApplicationAlteration,
@@ -22,6 +26,8 @@ import {
   Button,
   IconAlertCircleFill,
   IconCheck,
+  IconLock,
+  IconPen,
   Notification,
   RadioButton,
   SelectionGroup,
@@ -72,6 +78,9 @@ const AlterationHandlingForm = ({
   const [isConfirmationModalOpen, setConfirmationModalOpen] =
     useState<boolean>(false);
 
+  const [isMessagesDrawerVisible, toggleMessagesDrawerVisibility] =
+    useState<boolean>(false);
+
   const getErrorMessage = (fieldName: string): string | undefined =>
     getErrorText(formik.errors, formik.touched, fieldName, t, isSubmitted);
 
@@ -239,6 +248,16 @@ const AlterationHandlingForm = ({
             <Button onClick={onClose} theme="black" variant="secondary">
               {t(`${translationBase}.actions.close`)}
             </Button>
+            <Button
+              onClick={() =>
+                toggleMessagesDrawerVisibility(!isMessagesDrawerVisible)
+              }
+              theme="black"
+              variant="secondary"
+              iconLeft={<IconPen />}
+            >
+              {t('common:review.actions.handlingPanel')}
+            </Button>
           </$StickyBarColumn>
           <$StickyBarColumn>
             {hasErrors && isSubmitted && (
@@ -279,6 +298,18 @@ const AlterationHandlingForm = ({
         isWorking={isSubmitting}
         values={formik.values}
       />
+      <Sidebar
+        isOpen={isMessagesDrawerVisible}
+        messagesReadOnly
+        application={application}
+        onClose={() => toggleMessagesDrawerVisibility(false)}
+        customItemsNotes={
+          <$CustomNotesActions>
+            <IconLock />
+            <p>{t('common:messenger.showToHandlerOnly')}</p>
+          </$CustomNotesActions>
+        }
+      />
     </>
   );
 };
diff --git a/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.tsx b/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.tsx
index 306837992d..969ab53b46 100644
--- a/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.tsx
@@ -40,7 +40,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
     onDoneConfirmation,
     onBackToHandling,
     onSaveAndClose,
-    toggleMessagesDrawerVisiblity,
+    toggleMessagesDrawerVisibility,
     openDialog,
     closeDialog,
     closeDoneDialog,
@@ -90,7 +90,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
             </Button>
           )}
         <Button
-          onClick={toggleMessagesDrawerVisiblity}
+          onClick={toggleMessagesDrawerVisibility}
           theme="black"
           variant="secondary"
           iconLeft={<IconPen />}
@@ -155,16 +155,16 @@ const HandlingApplicationActions: React.FC<Props> = ({
       )}
       <Sidebar
         isOpen={isMessagesDrawerVisible}
-        isReadOnly={
+        messagesReadOnly={
           application.status && HANDLED_STATUSES.includes(application.status)
         }
         application={application}
-        onClose={toggleMessagesDrawerVisiblity}
+        onClose={toggleMessagesDrawerVisibility}
         customItemsMessages={<EditAction application={application} />}
         customItemsNotes={
           <$CustomNotesActions>
             <IconLock />
-            <p>{t('common:messenger.showToHanlderOnly')}</p>
+            <p>{t('common:messenger.showToHandlerOnly')}</p>
           </$CustomNotesActions>
         }
       />
diff --git a/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx b/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx
index 9b56ad2d2d..5e97dd3ee8 100644
--- a/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx
@@ -61,7 +61,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
 }) => {
   const {
     t,
-    toggleMessagesDrawerVisiblity,
+    toggleMessagesDrawerVisibility,
     openDialog,
     closeDialog,
     closeDoneDialog,
@@ -279,7 +279,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
         )}
 
         <Button
-          onClick={toggleMessagesDrawerVisiblity}
+          onClick={toggleMessagesDrawerVisibility}
           theme="black"
           variant="secondary"
           iconLeft={<IconPen />}
@@ -376,16 +376,16 @@ const HandlingApplicationActions: React.FC<Props> = ({
       <Sidebar
         application={application}
         isOpen={isMessagesDrawerVisible}
-        isReadOnly={
+        messagesReadOnly={
           isApplicationReadOnly ||
           (application.status && HANDLED_STATUSES.includes(application.status))
         }
-        onClose={toggleMessagesDrawerVisiblity}
+        onClose={toggleMessagesDrawerVisibility}
         customItemsMessages={<EditAction application={application} />}
         customItemsNotes={
           <$CustomNotesActions>
             <IconLock />
-            <p>{t('common:messenger.showToHanlderOnly')}</p>
+            <p>{t('common:messenger.showToHandlerOnly')}</p>
           </$CustomNotesActions>
         }
       />
diff --git a/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/useHandlingApplicationActions.ts b/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/useHandlingApplicationActions.ts
index 4ded0358af..904cfb87a6 100644
--- a/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/useHandlingApplicationActions.ts
+++ b/frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/useHandlingApplicationActions.ts
@@ -16,7 +16,7 @@ type ExtendedComponentProps = {
   onSaveAndClose: () => void;
   onBackToHandling: () => void;
   onCommentsChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  toggleMessagesDrawerVisiblity: () => void;
+  toggleMessagesDrawerVisibility: () => void;
   handleCancel: (application: HandledAplication) => void;
   openDialog: () => void;
   closeDialog: () => void;
@@ -42,7 +42,7 @@ const useHandlingApplicationActions = (
     React.useContext(AppContext);
   const router = useRouter();
   const { openDrawer } = router.query;
-  const [isMessagesDrawerVisible, toggleMessagesDrawerVisiblity] = useToggle(
+  const [isMessagesDrawerVisible, toggleMessagesDrawerVisibility] = useToggle(
     Boolean(openDrawer)
   );
 
@@ -104,7 +104,7 @@ const useHandlingApplicationActions = (
     onSaveAndClose,
     onCommentsChange,
     onBackToHandling,
-    toggleMessagesDrawerVisiblity,
+    toggleMessagesDrawerVisibility,
     handleCancel,
     openDialog,
     closeDialog,
diff --git a/frontend/benefit/handler/src/components/sidebar/ChangeList.tsx b/frontend/benefit/handler/src/components/sidebar/ChangeList.tsx
index ca26193c45..24d673867f 100644
--- a/frontend/benefit/handler/src/components/sidebar/ChangeList.tsx
+++ b/frontend/benefit/handler/src/components/sidebar/ChangeList.tsx
@@ -50,17 +50,16 @@ const ChangeList: React.FC<ChangeListProps> = ({ data }: ChangeListProps) => {
   return (
     <$Actions>
       {combinedAndOrderedChangeSets.map((changeSet, index) => (
-        <>
+        <React.Fragment
+          key={`${changeSet.date}-${changeSet.reason}-${changeSet.user}`}
+        >
           {!doesPreviousDateMatch(
             changeSet,
             combinedAndOrderedChangeSets,
             index
           ) && <p>{convertToUIDateFormat(changeSet.date)}</p>}
-          <ChangeSet
-            key={`${changeSet.date}-${changeSet.reason}-${changeSet.user}`}
-            data={changeSet}
-          />
-        </>
+          <ChangeSet data={changeSet} />
+        </React.Fragment>
       ))}
     </$Actions>
   );
diff --git a/frontend/benefit/handler/src/components/sidebar/Sidebar.tsx b/frontend/benefit/handler/src/components/sidebar/Sidebar.tsx
index 0173c494f7..51354163dd 100644
--- a/frontend/benefit/handler/src/components/sidebar/Sidebar.tsx
+++ b/frontend/benefit/handler/src/components/sidebar/Sidebar.tsx
@@ -11,7 +11,8 @@ import { useSidebar } from './useSidebar';
 
 interface ComponentProps {
   isOpen: boolean;
-  isReadOnly?: boolean;
+  messagesReadOnly?: boolean;
+  notesReadOnly?: boolean;
   onClose?: () => void;
   customItemsMessages?: React.ReactNode;
   customItemsNotes?: React.ReactNode;
@@ -20,14 +21,15 @@ interface ComponentProps {
 
 const Sidebar: React.FC<ComponentProps> = ({
   isOpen,
-  isReadOnly,
+  messagesReadOnly,
+  notesReadOnly,
   customItemsMessages,
   customItemsNotes,
   onClose,
   application,
 }) => {
   const { t, messages, notes, handleSendMessage, handleCreateNote } =
-    useSidebar();
+    useSidebar(application?.id);
 
   return (
     <Drawer
@@ -50,7 +52,7 @@ const Sidebar: React.FC<ComponentProps> = ({
           `}
         >
           <Messages data={messages} variant="message" withScroll />
-          {!isReadOnly && (
+          {!messagesReadOnly && (
             <Actions
               customItems={customItemsMessages}
               sendText={t('common:messenger.send')}
@@ -68,7 +70,7 @@ const Sidebar: React.FC<ComponentProps> = ({
             flex-grow: 1;
           `}
         >
-          {!isReadOnly && (
+          {!notesReadOnly && (
             <Actions
               customItems={customItemsNotes}
               sendText={t('common:messenger.save')}
diff --git a/frontend/benefit/handler/src/components/sidebar/useSidebar.ts b/frontend/benefit/handler/src/components/sidebar/useSidebar.ts
index 368da34cb2..e883458d8a 100644
--- a/frontend/benefit/handler/src/components/sidebar/useSidebar.ts
+++ b/frontend/benefit/handler/src/components/sidebar/useSidebar.ts
@@ -2,7 +2,6 @@ import useCreateMessageQuery from 'benefit/handler/hooks/useCreateMessageQuery';
 import useMessagesQuery from 'benefit/handler/hooks/useMessagesQuery';
 import { MESSAGE_TYPES, MESSAGE_URLS } from 'benefit-shared/constants';
 import { Message } from 'benefit-shared/types/application';
-import { useRouter } from 'next/router';
 import { TFunction, useTranslation } from 'next-i18next';
 
 type ExtendedComponentProps = {
@@ -13,10 +12,8 @@ type ExtendedComponentProps = {
   handleCreateNote: (note: string) => void;
 };
 
-const useSidebar = (): ExtendedComponentProps => {
+const useSidebar = (applicationId: string): ExtendedComponentProps => {
   const { t } = useTranslation();
-  const router = useRouter();
-  const applicationId = router.query.id ?? '';
   const { data: messages } = useMessagesQuery(
     applicationId.toString(),
     MESSAGE_URLS.MESSAGES