ORV2-3023 Display correlation id in application related pages

frontend/src/features/permits/hooks/cart.ts

@@ -9,6 +9,9 @@ import {
   getCartCount,
   removeFromCart,
 } from "../apiManager/cart";
+import { AxiosError } from "axios";
+import { ERROR_ROUTES } from "../../../routes/constants";
+import { useNavigate } from "react-router-dom";
 
 const CART_KEY = "cart";
 const CART_COUNT_KEY = "cart-count";
@@ -19,6 +22,7 @@ const CART_ITEM = "cart-item";
  * @returns Mutation object for adding items to cart
  */
 export const useAddToCart = () => {
+  const navigate = useNavigate();
   return useMutation({
     mutationFn: ({
       companyId,
@@ -27,6 +31,13 @@ export const useAddToCart = () => {
       companyId: number;
       applicationIds: string[];
     }) => addToCart(companyId, applicationIds),
+    onError: (error: AxiosError) => {
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
+    },
   });
 };
 

frontend/src/features/permits/hooks/hooks.ts

@@ -11,7 +11,11 @@ import {
 import { Application, ApplicationFormData } from "../types/application";
 import { IssuePermitsResponse } from "../types/permit";
 import { StartTransactionResponseData } from "../types/payment";
-import { APPLICATION_STEPS, ApplicationStep } from "../../../routes/constants";
+import {
+  APPLICATION_STEPS,
+  ApplicationStep,
+  ERROR_ROUTES,
+} from "../../../routes/constants";
 import { isPermitTypeValid } from "../types/PermitType";
 import { isPermitIdNumeric } from "../helpers/permitState";
 import { deserializeApplicationResponse } from "../helpers/deserializeApplication";
@@ -36,6 +40,7 @@ import {
   getPendingPermits,
 } from "../apiManager/permitsAPI";
 import { getDefaultRequiredVal } from "../../../common/helpers/util";
+import { useNavigate } from "react-router-dom";
 
 const QUERY_KEYS = {
   PERMIT_DETAIL: (
@@ -58,6 +63,7 @@ const QUERY_KEYS = {
  */
 export const useSaveApplicationMutation = () => {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   return useMutation({
     mutationFn: async ({
       data,
@@ -86,6 +92,14 @@ export const useSaveApplicationMutation = () => {
         };
       }
     },
+    onError: (error: AxiosError) => {
+      console.error(error);
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
+    },
   });
 };
 
@@ -196,10 +210,7 @@ export const useApplicationDetailsQuery = ({
  * @param permitId permit id for the permit
  * @returns Query object containing the permit details
  */
-export const usePermitDetailsQuery = (
-  companyId: number,
-  permitId: string,
-) => {
+export const usePermitDetailsQuery = (companyId: number, permitId: string) => {
   return useQuery({
     queryKey: QUERY_KEYS.PERMIT_DETAIL(permitId, companyId),
     queryFn: async () => {
@@ -221,7 +232,7 @@ export const useStartTransaction = () => {
   const [transaction, setTransaction] =
     useState<Nullable<StartTransactionResponseData>>(undefined);
   const queryClient = useQueryClient();
-
+  const navigate = useNavigate();
   const mutation = useMutation({
     mutationFn: startTransaction,
     retry: false,
@@ -232,9 +243,14 @@ export const useStartTransaction = () => {
       queryClient.setQueryData(["transaction"], transactionData);
       setTransaction(transactionData);
     },
-    onError: (err: unknown) => {
-      console.error(err);
+    onError: (error: AxiosError) => {
+      console.error(error);
       setTransaction(undefined);
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
     },
   });
 
@@ -335,12 +351,9 @@ export const useIssuePermits = () => {
     useState<Nullable<IssuePermitsResponse>>(undefined);
 
   const queryClient = useQueryClient();
-
+  const navigate = useNavigate();
   const mutation = useMutation({
-    mutationFn: (data: {
-      companyId: number;
-      applicationIds: string[];
-    }) =>
+    mutationFn: (data: { companyId: number; applicationIds: string[] }) =>
       issuePermits(data.companyId, data.applicationIds),
     retry: false,
     onSuccess: (issueResponseData) => {
@@ -349,9 +362,14 @@ export const useIssuePermits = () => {
       });
       setIssueResults(issueResponseData);
     },
-    onError: (err: unknown) => {
-      console.error(err);
+    onError: (error: AxiosError) => {
+      console.error(error);
       setIssueResults(null);
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
     },
   });
 
@@ -368,6 +386,7 @@ export const useIssuePermits = () => {
  */
 export const useAmendPermit = (companyId: number) => {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   return useMutation({
     mutationFn: async (data: AmendPermitFormData) => {
       const amendResult = await amendPermit(data, companyId);
@@ -382,10 +401,7 @@ export const useAmendPermit = (companyId: number) => {
           ),
         });
         queryClient.invalidateQueries({
-          queryKey: QUERY_KEYS.PERMIT_HISTORY(
-            data.originalPermitId,
-            companyId,
-          ),
+          queryKey: QUERY_KEYS.PERMIT_HISTORY(data.originalPermitId, companyId),
         });
 
         return {
@@ -398,11 +414,20 @@ export const useAmendPermit = (companyId: number) => {
         status: amendResult.status,
       };
     },
+    onError: (error: AxiosError) => {
+      console.error(error);
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
+    },
   });
 };
 
 export const useModifyAmendmentApplication = () => {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   return useMutation({
     mutationFn: async (data: {
       application: AmendPermitFormData;
@@ -435,6 +460,14 @@ export const useModifyAmendmentApplication = () => {
         status: amendResult.status,
       };
     },
+    onError: (error: AxiosError) => {
+      console.error(error);
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
+    },
   });
 };
 
@@ -481,14 +514,11 @@ export const useApplicationsInProgressQuery = (companyId: number) => {
       sorting,
     ],
     queryFn: () =>
-      getApplicationsInProgress(
-        companyId,
-        {
-          page: pagination.pageIndex,
-          take: pagination.pageSize,
-          orderBy,
-        },
-      ),
+      getApplicationsInProgress(companyId, {
+        page: pagination.pageIndex,
+        take: pagination.pageSize,
+        orderBy,
+      }),
     refetchOnWindowFocus: false, // prevent unnecessary multiple queries on page showing up in foreground
     refetchOnMount: "always",
     placeholderData: keepPreviousData,
@@ -518,13 +548,10 @@ export const usePendingPermitsQuery = (companyId: number) => {
   const { data: pendingPermits } = useQuery({
     queryKey: ["pendingPermits", pagination.pageIndex, pagination.pageSize],
     queryFn: () =>
-      getPendingPermits(
-        companyId,
-        {
-          page: pagination.pageIndex,
-          take: pagination.pageSize,
-        },
-      ),
+      getPendingPermits(companyId, {
+        page: pagination.pageIndex,
+        take: pagination.pageSize,
+      }),
     refetchOnWindowFocus: false, // prevent unnecessary multiple queries on page showing up in foreground
     refetchOnMount: "always",
     placeholderData: keepPreviousData,

frontend/src/features/settings/hooks/creditAccount.ts

@@ -290,8 +290,12 @@ export const useUpdateCreditAccountStatusMutation = () => {
         ...getResultingSnackbarOptionsFromAction(updateStatusAction),
       });
     },
-    onError: () => {
-      navigate(ERROR_ROUTES.UNEXPECTED);
+    onError: (error: AxiosError) => {
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
     },
   });
 };