From a7f2d716ad0cc330520fe3ae03ef42a4b1f630f8 Mon Sep 17 00:00:00 2001
From: Sampo Tawast <5328394+sirtawast@users.noreply.github.com>
Date: Mon, 9 Sep 2024 08:20:50 +0300
Subject: [PATCH] fix: add current tab number clicks to uri when each tab is
 clicked (#3288)

---
 .../applicationList/HandlerIndex.tsx          | 32 +++++++++++++++----
 frontend/benefit/handler/src/constants.ts     |  1 +
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx b/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx
index 1d839eae3c..3a7a5685e5 100644
--- a/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx
+++ b/frontend/benefit/handler/src/components/applicationList/HandlerIndex.tsx
@@ -1,4 +1,7 @@
-import { ALL_APPLICATION_STATUSES } from 'benefit/handler/constants';
+import {
+  ALL_APPLICATION_STATUSES,
+  APPLICATION_LIST_TABS,
+} from 'benefit/handler/constants';
 import FrontPageProvider from 'benefit/handler/context/FrontPageProvider';
 import { APPLICATION_STATUSES, BATCH_STATUSES } from 'benefit-shared/constants';
 import { ApplicationListItemData } from 'benefit-shared/types/application';
@@ -110,6 +113,9 @@ const HandlerIndex: React.FC<ApplicationListProps> = ({
     );
   }
 
+  const updateTabToUrl = (tabNumber: APPLICATION_LIST_TABS): void =>
+    window.history.pushState({ tab }, '', `/?tab=${tabNumber}`);
+
   return (
     <FrontPageProvider>
       <$BackgroundWrapper backgroundColor={layoutBackgroundColor}>
@@ -117,32 +123,44 @@ const HandlerIndex: React.FC<ApplicationListProps> = ({
         <Container>
           <Tabs theme={theme.components.tabs} initiallyActiveTab={activeTab}>
             <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
-              <Tabs.Tab>
+              <Tabs.Tab
+                onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.ALL)}
+              >
                 {getListHeadingByStatus('all', ALL_APPLICATION_STATUSES)}
               </Tabs.Tab>
-              <Tabs.Tab>
+              <Tabs.Tab
+                onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.DRAFT)}
+              >
                 {getListHeadingByStatus(APPLICATION_STATUSES.DRAFT, [
                   APPLICATION_STATUSES.DRAFT,
                 ])}
               </Tabs.Tab>
-              <Tabs.Tab>
+              <Tabs.Tab
+                onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.RECEIVED)}
+              >
                 {getListHeadingByStatus(APPLICATION_STATUSES.RECEIVED, [
                   APPLICATION_STATUSES.RECEIVED,
                 ])}
               </Tabs.Tab>
-              <Tabs.Tab>
+              <Tabs.Tab
+                onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.HANDLING)}
+              >
                 {getListHeadingByStatus(APPLICATION_STATUSES.HANDLING, [
                   APPLICATION_STATUSES.HANDLING,
                   APPLICATION_STATUSES.INFO_REQUIRED,
                 ])}
               </Tabs.Tab>
-              <Tabs.Tab>
+              <Tabs.Tab
+                onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.ACCEPTED)}
+              >
                 {getListHeadingByStatus('pending', [
                   APPLICATION_STATUSES.ACCEPTED,
                   APPLICATION_STATUSES.REJECTED,
                 ])}
               </Tabs.Tab>
-              <Tabs.Tab>
+              <Tabs.Tab
+                onClick={() => updateTabToUrl(APPLICATION_LIST_TABS.IN_PAYMENT)}
+              >
                 {getListHeadingByStatus('inPayment', [
                   APPLICATION_STATUSES.ACCEPTED,
                 ])}
diff --git a/frontend/benefit/handler/src/constants.ts b/frontend/benefit/handler/src/constants.ts
index d5b4c0b919..3ca0277ca7 100644
--- a/frontend/benefit/handler/src/constants.ts
+++ b/frontend/benefit/handler/src/constants.ts
@@ -234,6 +234,7 @@ export enum APPLICATION_LIST_TABS {
   HANDLING = '3',
   ACCEPTED = '4',
   REJECTED = '5',
+  IN_PAYMENT = '5',
 }
 
 export const DEFAULT_MINIMUM_RECOVERY_AMOUNT = 20;