[Customer Portal][FE][Web] Centralize API Header Logic and Upgrade Oxygen UI to 0.4.0

apps/customer-portal/webapp/package.json

@@ -13,9 +13,9 @@
     "@asgardeo/react": "^0.10.0",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-query-devtools": "^5.91.2",
-    "@wso2/oxygen-ui": "^0.3.0",
+    "@wso2/oxygen-ui": "^0.4.0",
     "@wso2/oxygen-ui-charts-react": "^0.4.0",
-    "@wso2/oxygen-ui-icons-react": "^0.3.0",
+    "@wso2/oxygen-ui-icons-react": "^0.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router": "^7.1.5",

apps/customer-portal/webapp/src/api/useGetCasesFilters.ts

@@ -20,6 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockCaseMetadata } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { CaseMetadataResponse } from "@models/responses";
 
 /**
@@ -63,12 +64,7 @@ export default function useGetCasesFilters(
 
         const response = await fetch(requestUrl, {
           method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
         });
 
         if (!response.ok) {

apps/customer-portal/webapp/src/api/useGetProjectCases.ts

@@ -20,6 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockCases } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { CaseSearchRequest } from "@models/requests";
 import type { CaseSearchResponse } from "@models/responses";
 
@@ -90,12 +91,7 @@ export default function useGetProjectCases(
 
         const response = await fetch(requestUrl, {
           method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
           body: JSON.stringify(requestBody),
         });
 

apps/customer-portal/webapp/src/api/useGetProjectCasesStats.ts

@@ -20,6 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { getMockProjectCasesStats } from "@models/mockFunctions";
 import { useLogger } from "@hooks/useLogger";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { ProjectCasesStats } from "@models/responses";
 
 /**
@@ -68,12 +69,7 @@ export function useGetProjectCasesStats(
 
         const response = await fetch(requestUrl, {
           method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
         });
 
         logger.debug(

apps/customer-portal/webapp/src/api/useGetProjectDetails.ts

@@ -20,6 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockProjectDetails } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { ProjectDetails } from "@models/responses";
 
 /**
@@ -74,12 +75,7 @@ export default function useGetProjectDetails(
 
         const response = await fetch(requestUrl, {
           method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
         });
 
         logger.debug(

apps/customer-portal/webapp/src/api/useGetProjectStat.ts

@@ -21,6 +21,7 @@ import { getMockProjectStats } from "@models/mockFunctions";
 import { mockProjects } from "@models/mockData";
 import { useLogger } from "@hooks/useLogger";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { ProjectStatsResponse } from "@models/responses";
 
 /**
@@ -76,12 +77,7 @@ export function useGetProjectStat(
 
         const response = await fetch(requestUrl, {
           method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
         });
 
         logger.debug(

apps/customer-portal/webapp/src/api/useGetProjectSupportStats.ts

@@ -20,6 +20,7 @@ import { getMockProjectSupportStats } from "@models/mockFunctions";
 import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { ProjectSupportStats } from "@models/responses";
 
 /**
@@ -68,11 +69,7 @@ export function useGetProjectSupportStats(
 
         const response = await fetch(requestUrl, {
           method: "GET",
-          headers: {
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
         });
 
         logger.debug(

apps/customer-portal/webapp/src/api/useGetProjects.ts

@@ -20,6 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockProjects } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
+import { addApiHeaders } from "@utils/apiUtils";
 import type { SearchProjectsRequest } from "@models/requests";
 import type { SearchProjectsResponse } from "@models/responses";
 
@@ -90,12 +91,7 @@ export default function useGetProjects(
 
         const response = await fetch(requestUrl, {
           method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
           body: JSON.stringify(body),
         });
 

apps/customer-portal/webapp/src/api/useGetUserDetails.ts

@@ -20,6 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { mockUserDetails } from "@models/mockData";
 import { type UserDetails } from "@models/responses";
 import { useLogger } from "@hooks/useLogger";
+import { addApiHeaders } from "@utils/apiUtils";
 
 /**
  * Hook to get user details.
@@ -54,11 +55,7 @@ const useGetUserDetails = (): UseQueryResult<UserDetails, Error> => {
 
         const response = await fetch(requestUrl, {
           method: "GET",
-          headers: {
-            Accept: "application/json",
-            Authorization: `Bearer ${idToken}`,
-            "x-user-id-token": idToken,
-          },
+          headers: addApiHeaders(idToken),
         });
 
         logger.debug(`[useGetUserDetails] Response status: ${response.status}`);

apps/customer-portal/webapp/src/utils/apiUtils.ts

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+/**
+ * Builds standard API request headers for authenticated requests.
+ *
+ * @param {string} idToken - The ID token for authentication.
+ * @returns {Record<string, string>} Headers object for fetch requests.
+ */
+export function addApiHeaders(idToken: string): Record<string, string> {
+  return {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+    Authorization: `Bearer ${idToken}`,
+    "x-user-id-token": idToken,
+  };
+}