MPDX-9336, MPDX-9333, MPDX-9332 - ASR/MHA loading states upon creation, hide Current MHA Request if request DNE

src/components/Reports/AdditionalSalaryRequest/RequestPage/RequestPage.test.tsx

@@ -665,6 +665,34 @@ describe('RequestPage', () => {
     });
   });
 
+  it('shows loading indicator when context loading is true and no request data', () => {
+    mockUseAdditionalSalaryRequest.mockReturnValue({
+      ...defaultMockContextValue,
+      loading: true,
+      requestData: null,
+    } as unknown as ReturnType<typeof useAdditionalSalaryRequest>);
+
+    const { getByTestId, queryByRole } = render(<TestWrapper />);
+
+    expect(getByTestId('Loading')).toBeInTheDocument();
+    expect(
+      queryByRole('button', { name: /continue/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows loading indicator when creating a new request', async () => {
+    mockUseAdditionalSalaryRequest.mockReturnValue({
+      ...defaultMockContextValue,
+      requestData: { latestAdditionalSalaryRequest: null },
+    } as unknown as ReturnType<typeof useAdditionalSalaryRequest>);
+
+    const { getByRole, findByTestId } = render(<TestWrapper />);
+
+    userEvent.click(getByRole('button', { name: /continue/i }));
+
+    expect(await findByTestId('Loading')).toBeInTheDocument();
+  });
+
   it('hides back href on About this Form step in New mode', () => {
     mockUseAdditionalSalaryRequest.mockReturnValue({
       ...defaultMockContextValue,

src/components/Reports/AdditionalSalaryRequest/RequestPage/RequestPage.tsx

@@ -49,7 +49,8 @@
     setIsNewAsr,
   } = useAdditionalSalaryRequest();
 
-  const [createRequest] = useCreateAdditionalSalaryRequestMutation();
+  const [createRequest, { loading: creatingRequest }] =
+    useCreateAdditionalSalaryRequestMutation();
 
   const { values, submitForm, validateForm, submitCount, isValid, errors } =
     useFormikContext<CompleteFormValues>();
@@ -100,8 +101,8 @@
     t,
   );
 
-  if (loading && !requestData) {
-    return <Loading loading={loading} />;
+  if (creatingRequest || (loading && !requestData)) {
+    return <Loading loading />;
   }
 
   return (

src/components/Reports/MinisterHousingAllowance/MinisterHousingAllowance.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { SnackbarProvider } from 'notistack';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
@@ -18,10 +19,16 @@ import {
   singleNoMhaNoException,
 } from '../Shared/HcmData/mockData';
 import { MinisterHousingAllowanceReport } from './MinisterHousingAllowance';
-import { MinistryHousingAllowanceRequestsQuery } from './MinisterHousingAllowance.generated';
+import {
+  CreateHousingAllowanceRequestMutation,
+  MinistryHousingAllowanceRequestsQuery,
+} from './MinisterHousingAllowance.generated';
 import { MinisterHousingAllowanceProvider } from './Shared/Context/MinisterHousingAllowanceContext';
 import { mockMHARequest } from './mockData';
 
+const mutationSpy = jest.fn();
+const mockPush = jest.fn();
+
 interface TestComponentProps {
   hcmMock: HcmDataQuery['hcm'];
   mhaRequestsMock: MinistryHousingAllowanceRequestsQuery['ministryHousingAllowanceRequests']['nodes'];
@@ -32,11 +39,12 @@ const TestComponent: React.FC<TestComponentProps> = ({
   mhaRequestsMock,
 }) => (
   <ThemeProvider theme={theme}>
-    <TestRouter>
+    <TestRouter router={{ push: mockPush }}>
       <SnackbarProvider>
         <GqlMockedProvider<{
           HcmData: HcmDataQuery;
           MinistryHousingAllowanceRequests: MinistryHousingAllowanceRequestsQuery;
+          CreateHousingAllowanceRequest: CreateHousingAllowanceRequestMutation;
         }>
           mocks={{
             HcmData: {
@@ -47,7 +55,15 @@ const TestComponent: React.FC<TestComponentProps> = ({
                 nodes: mhaRequestsMock,
               },
             },
+            CreateHousingAllowanceRequest: {
+              createMinistryHousingAllowanceRequest: {
+                ministryHousingAllowanceRequest: {
+                  id: 'new-mha-id',
+                },
+              },
+            },
           }}
+          onCall={mutationSpy}
         >
           <MinisterHousingAllowanceProvider>
             <MinisterHousingAllowanceReport />
@@ -240,4 +256,59 @@ describe('MinisterHousingAllowanceReport', () => {
 
     expect(await findByText('Current MHA Request')).toBeInTheDocument();
   });
+
+  it('does not render Current Request section when eligible user has no requests', async () => {
+    const { queryByText, findByText } = render(
+      <TestComponent hcmMock={singleMhaNoException} mhaRequestsMock={[]} />,
+    );
+
+    expect(await findByText('Your MHA')).toBeInTheDocument();
+    expect(queryByText('Current MHA Request')).not.toBeInTheDocument();
+  });
+
+  it('shows loading and calls router.push when creating a new MHA request', async () => {
+    const { findByText, findByTestId } = render(
+      <TestComponent
+        hcmMock={singleMhaNoException}
+        mhaRequestsMock={[
+          { ...mockMHARequest, status: MhaStatusEnum.BoardApproved },
+        ]}
+      />,
+    );
+
+    const requestButton = await findByText('Request New MHA');
+    userEvent.click(requestButton);
+
+    expect(await findByTestId('Loading')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(mutationSpy).toHaveGraphqlOperation(
+        'CreateHousingAllowanceRequest',
+      );
+    });
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(
+        '/accountLists/account-list-1/reports/housingAllowance/new-mha-id?mode=new',
+      );
+    });
+  });
+
+  it('shows success snackbar when MHA request is created', async () => {
+    const { findByText } = render(
+      <TestComponent
+        hcmMock={singleMhaNoException}
+        mhaRequestsMock={[
+          { ...mockMHARequest, status: MhaStatusEnum.BoardApproved },
+        ]}
+      />,
+    );
+
+    const requestButton = await findByText('Request New MHA');
+    userEvent.click(requestButton);
+
+    expect(
+      await findByText('Successfully created MHA Request.'),
+    ).toBeInTheDocument();
+  });
 });

src/components/Reports/MinisterHousingAllowance/MinisterHousingAllowance.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import { useRouter } from 'next/router';
+import React, { useState } from 'react';
 import { Box, Button, Container, Stack, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
+import Loading from 'src/components/Loading/Loading';
 import { Notification } from 'src/components/Notification/Notification';
 import { MhaStatusEnum } from 'src/graphql/types.generated';
 import { useAccountListId } from 'src/hooks/useAccountListId';
@@ -29,103 +31,104 @@
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
   const accountListId = useAccountListId();
+  const router = useRouter();
 
   const {
     data,
     error: requestsError,
     loading,
   } = useMinistryHousingAllowanceRequestsQuery();
   const requests = data?.ministryHousingAllowanceRequests.nodes ?? [];
 
   const {
     isMarried,
     preferredName,
     spousePreferredName,
     userEligibleForMHA,
     spouseEligibleForMHA,
     userHcmData,
     spouseHcmData,
   } = useMinisterHousingAllowance();
 
   const personNumber = userHcmData?.staffInfo?.personNumber ?? '';
   const spousePersonNumber = spouseHcmData?.staffInfo?.personNumber ?? '';
   const lastName = userHcmData?.staffInfo?.lastName ?? '';
   const spouseLastName = spouseHcmData?.staffInfo?.lastName ?? '';
 
   const names = isMarried
     ? `${preferredName} ${lastName} and ${spousePreferredName} ${spouseLastName}`
     : `${preferredName} ${lastName}`;
   const personNumbers = isMarried
     ? `${personNumber} and ${spousePersonNumber}`
     : personNumber;
 
   const [createMHA] = useCreateHousingAllowanceRequestMutation();
+  const [creatingRequest, setCreatingRequest] = useState(false);
 
   const onCreateMHARequest = async () => {
+    setCreatingRequest(true);
     await createMHA({
       variables: {
         requestAttributes: {
           phoneNumber: userHcmData?.staffInfo.primaryPhoneNumber,
           emailAddress: userHcmData?.staffInfo.emailAddress,
         },
       },
       onCompleted: ({ createMinistryHousingAllowanceRequest: newRequest }) => {
-        enqueueSnackbar(
-          t("Successfully created MHA Request. You'll be redirected shortly."),
-          {
-            variant: 'success',
-          },
-        );
+        enqueueSnackbar(t('Successfully created MHA Request.'), {
+          variant: 'success',
+        });
         const mhaRequestId = newRequest?.ministryHousingAllowanceRequest.id;
         const requestLink = getRequestUrl(accountListId, mhaRequestId, 'new');
-
-        // Wait 1 second before redirecting
-        setTimeout(() => {
-          window.location.href = requestLink;
-        }, 1000);
+        router.push(requestLink);
       },
       onError: (err) => {
+        setCreatingRequest(false);
         enqueueSnackbar(
           t('Error while creating MHA Request - {{error}}', {
             error: err.message,
           }),
           {
             variant: 'error',
           },
         );
       },
     });
   };
 
-  const currentRequest = requests[0] || {};
+  const currentRequest = requests[0] ?? undefined;
   // It default to true when no availableDate as the request is likely still being processed
   const isCurrentRequestPending =
-    currentRequest.status === MhaStatusEnum.BoardApproved &&
-    currentRequest.requestAttributes?.availableDate
-      ? DateTime.fromISO(currentRequest.requestAttributes.availableDate) >
+    currentRequest?.status === MhaStatusEnum.BoardApproved &&
+    currentRequest?.requestAttributes?.availableDate
+      ? DateTime.fromISO(currentRequest?.requestAttributes?.availableDate) >
         DateTime.now()
       : true;
 
   const previousApprovedRequest = requests
     .slice(1)
     ?.find(
       (request) =>
         request.status === MhaStatusEnum.BoardApproved &&
         isCurrentRequestPending,
     );
 
   const hasNoRequests = !requests.length;
 
   const bothEligible = userEligibleForMHA && spouseEligibleForMHA;
   const eitherPersonEligible = userEligibleForMHA || spouseEligibleForMHA;
 
   const showIneligibleDisplay =
     !userEligibleForMHA || (isMarried && !bothEligible);
   const showNewRequestButton =
     eitherPersonEligible && (!isCurrentRequestPending || hasNoRequests);
   const showCurrentRequest = eitherPersonEligible && currentRequest;
   const showPreviousRequests = eitherPersonEligible && previousApprovedRequest;
 
+  if (creatingRequest) {
+    return <Loading loading />;
+  }
+
   return (
     <PanelLayout
       panelType={PanelTypeEnum.Empty}