feat: useRouterNavigation hook to centralize and perform "back" actio…

…ns througout the app
City-of-Helsinki · Oct 4, 2024 · b657400 · b657400
1 parent 9bb81d9
commit b657400
Show file tree

Hide file tree

Showing 17 changed files with 233 additions and 45 deletions.
diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
@@ -997,7 +997,7 @@
           "calculationOutOfDate": "Laskelma ei ole ajan tasalla"
         },
         "actions": {
-          "close": "Peruuta",
+          "close": "Sulje",
           "handle": "Merkitse käsitellyksi",
           "returnToApplication": "Palaa hakemukseen",
           "returnToAlterationList": "Palaa muutosilmoituksiin"

diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json
@@ -997,7 +997,7 @@
           "calculationOutOfDate": "Laskelma ei ole ajan tasalla"
         },
         "actions": {
-          "close": "Peruuta",
+          "close": "Sulje",
           "handle": "Merkitse käsitellyksi",
           "returnToApplication": "Palaa hakemukseen",
           "returnToAlterationList": "Palaa muutosilmoituksiin"

diff --git a/frontend/benefit/handler/src/components/alterationHandling/AlterationHandling.tsx b/frontend/benefit/handler/src/components/alterationHandling/AlterationHandling.tsx
@@ -140,9 +140,6 @@ const AlterationHandling = (): JSX.Element => {
           alteration={alteration}
           onError={onError}
           onSuccess={onSuccess}
-          onClose={() =>
-            router.push(`${ROUTES.APPLICATION}?id=${application.id}`)
-          }
         />
       ) : (
         <Container>

diff --git a/frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingForm.tsx b/frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingForm.tsx
@@ -15,6 +15,7 @@ import useAlterationHandlingForm from 'benefit/handler/components/alterationHand
 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 { useRouterNavigation } from 'benefit/handler/hooks/applicationHandling/useRouterNavigation';
 import {
   Application,
   ApplicationAlteration,
@@ -46,7 +47,6 @@ type Props = {
   alteration: ApplicationAlteration;
   onError: (error: AxiosError<unknown>) => void;
   onSuccess: (isRecoverable: boolean) => void;
-  onClose: () => void;
 };
 
 const handleAlterationCsvDownload = (): void => {
@@ -58,7 +58,6 @@ const AlterationHandlingForm = ({
   alteration,
   onError,
   onSuccess,
-  onClose,
 }: Props): JSX.Element => {
   const {
     t,
@@ -83,6 +82,8 @@ const AlterationHandlingForm = ({
   const [isMessagesDrawerVisible, toggleMessagesDrawerVisibility] =
     useState<boolean>(false);
 
+  const { navigateBack } = useRouterNavigation(null, null, null, true);
+
   const getErrorMessage = (fieldName: string): string | undefined =>
     getErrorText(formik.errors, formik.touched, fieldName, t, isSubmitted);
 
@@ -238,10 +239,11 @@ const AlterationHandlingForm = ({
                 <$TalpaGuideText>
                   {t(`${translationBase}.talpaCsv.guideText`)}
                 </$TalpaGuideText>
-                <AlterationCsvButton 
+                <AlterationCsvButton
                   alteration={alteration}
                   values={formik.values}
-                  onSubmit={handleAlterationCsvDownload} />
+                  onSubmit={handleAlterationCsvDownload}
+                />
               </$GridCell>
             </$Grid>
           </AlterationHandlingSection>
@@ -250,8 +252,12 @@ const AlterationHandlingForm = ({
       <StickyActionBar>
         <$StickyBarWrapper>
           <$StickyBarColumn>
-            <Button onClick={onClose} theme="black" variant="secondary">
-              {t(`${translationBase}.actions.close`)}
+            <Button
+              onClick={() => navigateBack()}
+              theme="black"
+              variant="secondary"
+            >
+              {t(`${translationBase}.actions.returnToAlterationList`)}
             </Button>
             <Button
               onClick={() =>

diff --git a/frontend/benefit/handler/src/components/applicationForm/ApplicationForm.tsx b/frontend/benefit/handler/src/components/applicationForm/ApplicationForm.tsx
@@ -1,4 +1,5 @@
 import { ROUTES } from 'benefit/handler/constants';
+import { useRouterNavigation } from 'benefit/handler/hooks/applicationHandling/useRouterNavigation';
 import { useApplicationFormContext } from 'benefit/handler/hooks/useApplicationFormContext';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import {
@@ -65,6 +66,8 @@ const ApplicationForm: React.FC = () => {
 
   const { isFormActionEdit, isFormActionNew } = useApplicationFormContext();
 
+  const { navigateBack } = useRouterNavigation(application.status);
+
   const stepperCss = {
     'pointer-events': 'none',
     p: {
@@ -245,7 +248,7 @@ const ApplicationForm: React.FC = () => {
               <Button
                 theme="coat"
                 variant="primary"
-                onClick={() => router.push(ROUTES.HOME)}
+                onClick={() => navigateBack()}
                 data-testid="modalBack"
               >
                 {t(`${translationsBase}.backWithoutSaving`)}

diff --git a/frontend/benefit/handler/src/components/applicationHeader/ApplicationHeader.tsx b/frontend/benefit/handler/src/components/applicationHeader/ApplicationHeader.tsx
@@ -93,7 +93,7 @@ const ApplicationHeader: React.FC<ApplicationReviewProps> = ({
               </$ItemWrapper>
             </$Col>
             <$Col>
-              <StatusLabel status={data.status} />
+              <StatusLabel status={data.status} archived={data.archived} />
             </$Col>
           </$InnerWrapper>
         </Container>

diff --git a/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx b/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx
@@ -257,9 +257,11 @@ const ApplicationList: React.FC<ApplicationListProps> = ({
                   </strong>
                 </div>
                 <ul>
-                  {ahjoError?.errorFromAhjo?.map(({ message }) => (
-                    <li>{message}</li>
-                  ))}
+                  {ahjoError?.errorFromAhjo?.map(
+                    ({ message, id: ahjoErrorId }) => (
+                      <li key={ahjoErrorId}>{message}</li>
+                    )
+                  )}
                 </ul>
               </Tooltip>
             </$ActionErrors>

diff --git a/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx b/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx
@@ -24,6 +24,15 @@ export interface ApplicationListProps {
 }
 const translationBase = 'common:applications.list.headings';
 
+const updateTabToUrl = (tabNumber: APPLICATION_LIST_TABS): void => {
+  const newUrl = `/?tab=${tabNumber}`;
+  window.history.replaceState(
+    { ...window.history.state, as: '/', url: newUrl },
+    '',
+    newUrl
+  );
+};
+
 const isBatchStatusHandlingComplete = (batchStatus: BATCH_STATUSES): boolean =>
   [
     BATCH_STATUSES.DECIDED_ACCEPTED,
@@ -113,9 +122,6 @@ const HandlerIndex: React.FC<ApplicationListProps> = ({
     );
   }
 
-  const updateTabToUrl = (tabNumber: APPLICATION_LIST_TABS): void =>
-    window.history.pushState({ tab }, '', `/?tab=${tabNumber}`);
-
   return (
     <FrontPageProvider>
       <$BackgroundWrapper backgroundColor={layoutBackgroundColor}>

diff --git a/...nents/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.tsx b/...nents/applicationReview/actions/handlingApplicationActions/HandlingApplicationActions.tsx
@@ -74,7 +74,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
             {t(`${translationsBase}.saveAndContinue`)}
           </Button>
         ) : (
-          <Button onClick={onSaveAndClose} theme="coat" variant="primary">
+          <Button onClick={onSaveAndClose} theme="black" variant="secondary">
             {t(`${translationsBase}.close`)}
           </Button>
         )}

diff --git a/...s/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx b/...s/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx
@@ -1,5 +1,6 @@
 import Sidebar from 'benefit/handler/components/sidebar/Sidebar';
 import { APPLICATION_LIST_TABS } from 'benefit/handler/constants';
+import { useRouterNavigation } from 'benefit/handler/hooks/applicationHandling/useRouterNavigation';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { Application } from 'benefit-shared/types/application';
 import {
@@ -71,6 +72,12 @@ const HandlingApplicationActions: React.FC<Props> = ({
     onDoneConfirmation,
   } = useHandlingApplicationActions(application);
 
+  const { navigateBack } = useRouterNavigation(
+    application?.status,
+    application?.batch?.status,
+    application?.archived
+  );
+
   const lastStep =
     stepState.activeStepIndex === Number(stepState.steps?.length) - 1;
   const router = useRouter();
@@ -86,9 +93,13 @@ const HandlingApplicationActions: React.FC<Props> = ({
     (): void =>
       void router.push({
         pathname: '/',
-        query: { tab: APPLICATION_LIST_TABS.HANDLING },
+        query: {
+          tab: APPLICATION_LIST_TABS[
+            application?.status as unknown as keyof typeof APPLICATION_LIST_TABS
+          ],
+        },
       }),
-    [router]
+    [router, application.status]
   );
 
   const effectSaveAndClose = (): void => {
@@ -97,7 +108,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
       isSavingAndClosing
     ) {
       setIsSavingAndClosing(false);
-      navigateToIndex();
+      void navigateBack();
     }
   };
 
@@ -134,6 +145,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
     stepState.activeStepIndex,
     isSavingAndClosing,
     navigateToIndex,
+    navigateBack,
   ]);
   React.useEffect(() => {
     setIsSavingAndClosing(false);
@@ -254,14 +266,15 @@ const HandlingApplicationActions: React.FC<Props> = ({
     setIsSavingAndClosing(true);
   };
 
-  const handleClose = (): void => navigateToIndex();
+  const handleClose = (): void => void navigateBack();
 
   return (
     <$Wrapper data-testid={dataTestId}>
       <$Column>
         <Button onClick={handleClose} theme="black" variant="secondary">
           {t(`${translationsBase}.close`)}
         </Button>
+
         {application.status === APPLICATION_STATUSES.HANDLING && (
           <Button
             loadingText={t('common:utility.loading')}
@@ -289,12 +302,11 @@ const HandlingApplicationActions: React.FC<Props> = ({
           APPLICATION_STATUSES.ACCEPTED,
           APPLICATION_STATUSES.REJECTED,
         ].includes(application.status) &&
-          !application.batch &&
           !application.archived && (
             <Button
               onClick={openDialog}
               theme="black"
-              disabled={isApplicationReadOnly}
+              disabled={isApplicationReadOnly && !application.ahjoCaseId}
               variant="supplementary"
               iconLeft={<IconTrash />}
             >

diff --git a/...nents/applicationReview/actions/receivedApplicationActions/ReceivedApplicationActions.tsx b/...nents/applicationReview/actions/receivedApplicationActions/ReceivedApplicationActions.tsx
@@ -1,5 +1,5 @@
+import { useRouterNavigation } from 'benefit/handler/hooks/applicationHandling/useRouterNavigation';
 import { useDetermineAhjoMode } from 'benefit/handler/hooks/useDetermineAhjoMode';
-import useHandlerReviewActions from 'benefit/handler/hooks/useHandlerReviewActions';
 import useUpdateApplicationQuery from 'benefit/handler/hooks/useUpdateApplicationQuery';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { Application, ApplicationData } from 'benefit-shared/types/application';
@@ -24,7 +24,10 @@ const ReceivedApplicationActions: React.FC<Props> = ({
 }) => {
   const translationsBase = 'common:review.actions';
   const { t } = useTranslation();
-  const { onSaveAndClose } = useHandlerReviewActions(application);
+  const { navigateBack } = useRouterNavigation(
+    application?.status,
+    application?.batch?.status
+  );
 
   const { mutate: updateApplication } = useUpdateApplicationQuery();
 
@@ -61,16 +64,20 @@ const ReceivedApplicationActions: React.FC<Props> = ({
 
   return (
     <$Grid data-testid={dataTestId}>
+      <$GridCell>
+        <Button
+          onClick={() => navigateBack()}
+          theme="black"
+          variant="secondary"
+        >
+          {t(`${translationsBase}.close`)}
+        </Button>
+      </$GridCell>
       <$GridCell $colSpan={2}>
         <Button onClick={handleStatusChange} theme="coat">
           {t(`${translationsBase}.handle`)}
         </Button>
       </$GridCell>
-      <$GridCell>
-        <Button onClick={onSaveAndClose} theme="black" variant="secondary">
-          {t(`${translationsBase}.close`)}
-        </Button>
-      </$GridCell>
     </$Grid>
   );
 };

diff --git a/frontend/benefit/handler/src/components/statusLabel/StatusLabel.tsx b/frontend/benefit/handler/src/components/statusLabel/StatusLabel.tsx
@@ -4,12 +4,17 @@ import React from 'react';
 
 import { $StatusLabel } from './StatusLabel.sc';
 
-const StatusLabel: React.FC<{ status: APPLICATION_STATUSES }> = ({
-  status,
-}) => {
+const StatusLabel: React.FC<{
+  status: APPLICATION_STATUSES;
+  archived?: boolean;
+}> = ({ status, archived }) => {
   const { t } = useTranslation();
   return (
-    <$StatusLabel status={status}>{t(`common:status.${status}`)}</$StatusLabel>
+    <$StatusLabel status={status}>
+      {t(`common:status.${status}`)}
+      {archived &&
+        ` / ${t('common:header.navigation.archive').toLocaleLowerCase()}`}
+    </$StatusLabel>
   );
 };