feat: perform "back" actions througout the app using centralized hook (hl-1276)

frontend/benefit/handler/browser-tests/pages/7-handle-alteration.testcafe.ts

@@ -382,7 +382,7 @@ test('Handler handles the alteration from the last test properly', async (t: Tes
     )
     .ok();
   await t
-    .expect(item.find('dl dd').withText(getCurrencyString(180)).exists)
+    .expect(item.find('dl dd').withText(getCurrencyString(180, 0)).exists)
     .ok();
 });
 

frontend/benefit/handler/public/locales/en/common.json

@@ -1004,7 +1004,7 @@
           "calculationOutOfDate": "Laskelma ei ole ajan tasalla"
         },
         "actions": {
-          "close": "Peruuta",
+          "close": "Sulje",
           "handle": "Merkitse käsitellyksi",
           "returnToApplication": "Palaa hakemukseen",
           "returnToAlterationList": "Palaa muutosilmoituksiin"

frontend/benefit/handler/public/locales/sv/common.json

@@ -1004,7 +1004,7 @@
           "calculationOutOfDate": "Laskelma ei ole ajan tasalla"
         },
         "actions": {
-          "close": "Peruuta",
+          "close": "Sulje",
           "handle": "Merkitse käsitellyksi",
           "returnToApplication": "Palaa hakemukseen",
           "returnToAlterationList": "Palaa muutosilmoituksiin"

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>

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,15 +47,13 @@ type Props = {
   alteration: ApplicationAlteration;
   onError: (error: AxiosError<unknown>) => void;
   onSuccess: (isRecoverable: boolean) => void;
-  onClose: () => void;
 };
 
 const AlterationHandlingForm = ({
   application,
   alteration,
   onError,
   onSuccess,
-  onClose,
 }: Props): JSX.Element => {
   const {
     t,
@@ -79,6 +78,9 @@ const AlterationHandlingForm = ({
   const [isMessagesDrawerVisible, toggleMessagesDrawerVisibility] =
     useState<boolean>(false);
 
+
+  const { navigateBack } = useRouterNavigation(null, null, null, true);
+
   const [isCSVDownloadDone, setIsCSVDownloadDone] = useState<boolean>(false);
 
   const handleAlterationCsvDownload = (): void => {
@@ -256,8 +258,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={() =>

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`)}

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>

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}`);
-
   const isInPayment = (application: ApplicationListItemData): boolean =>
     [APPLICATION_STATUSES.ACCEPTED].includes(application.status) &&
     !isString(application.batch) &&

frontend/benefit/handler/src/components/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>
         )}

frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/HandlingApplicationActionsAhjo.tsx

@@ -6,6 +6,7 @@ import {
   StepActionType,
   StepStateType,
 } from 'benefit/handler/hooks/applicationHandling/useHandlingStepper';
+import { useRouterNavigation } from 'benefit/handler/hooks/applicationHandling/useRouterNavigation';
 import useCloneApplicationMutation from 'benefit/handler/hooks/useCloneApplicationMutation';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { Application } from 'benefit-shared/types/application';
@@ -73,6 +74,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();
@@ -88,9 +95,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 => {
@@ -99,7 +110,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
       isSavingAndClosing
     ) {
       setIsSavingAndClosing(false);
-      navigateToIndex();
+      void navigateBack();
     }
   };
 
@@ -136,6 +147,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
     stepState.activeStepIndex,
     isSavingAndClosing,
     navigateToIndex,
+    navigateBack,
   ]);
   React.useEffect(() => {
     setIsSavingAndClosing(false);
@@ -256,7 +268,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
     setIsSavingAndClosing(true);
   };
 
-  const handleClose = (): void => navigateToIndex();
+  const handleClose = (): void => void navigateBack();
 
   const { data: clonedData, mutate: cloneApplication } =
     useCloneApplicationMutation();
@@ -325,7 +337,7 @@ const HandlingApplicationActions: React.FC<Props> = ({
             <Button
               onClick={openDialog}
               theme="black"
-              disabled={isApplicationReadOnly}
+              disabled={isApplicationReadOnly && !application.ahjoCaseId}
               variant="supplementary"
               iconLeft={<IconTrash />}
             >

frontend/benefit/handler/src/components/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>
   );
 };

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>
   );
 };