MPDX-9129 - MHA Form Ineligible Display logic

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

@@ -19,17 +19,15 @@ const TestComponent: React.FC<TestComponentProps> = ({ isPending }) => (
 );
 
 describe('EligibleDisplay', () => {
-  it('should render title and message when pending is true', () => {
+  it('should render message when pending is true', () => {
     const { getByText } = render(<TestComponent isPending={true} />);
 
-    expect(getByText('Your MHA')).toBeInTheDocument();
     expect(getByText(/waiting to be processed/i)).toBeInTheDocument();
   });
 
-  it('should render title and message when pending is false', () => {
+  it('should render message when pending is false', () => {
     const { getByText } = render(<TestComponent isPending={false} />);
 
-    expect(getByText('Your MHA')).toBeInTheDocument();
     expect(
       getByText(/our records indicate that you have an approved mha amount/i),
     ).toBeInTheDocument();

src/components/Reports/MinisterHousingAllowance/MainPages/EligibleDisplay.tsx

@@ -1,5 +1,5 @@
-import { Box, Typography } from '@mui/material';
-import { Trans, useTranslation } from 'react-i18next';
+import { Box } from '@mui/material';
+import { Trans } from 'react-i18next';
 
 interface EligibleDisplayProps {
   isPending: boolean;
@@ -8,34 +8,28 @@ interface EligibleDisplayProps {
 export const EligibleDisplay: React.FC<EligibleDisplayProps> = ({
   isPending,
 }) => {
-  const { t } = useTranslation();
   return (
-    <>
-      <Box mb={2}>
-        <Typography variant="h5">{t('Your MHA')}</Typography>
-      </Box>
-      <Box>
-        {isPending ? (
-          <Trans i18nKey="currentMhaRequest">
-            <p style={{ lineHeight: 1.5 }}>
-              Our records indicate that you have an MHA request{' '}
-              <strong>waiting to be processed</strong>. To view your MHA
-              request, click on the &quot;View Current MHA&quot; button below.
-              If you would like to make changes to your request, click on the
-              &quot;Edit Request&quot; button below.
-            </p>
-          </Trans>
-        ) : (
-          <Trans i18nKey="currentApprovedMha">
-            <p style={{ lineHeight: 1.5 }}>
-              Our records indicate that you have an approved MHA amount. To view
-              your MHA amount, click on the &quot;View Current MHA&quot; button
-              below. If you would like to apply for a new MHA, click
-              &quot;Update Current MHA&quot;.
-            </p>
-          </Trans>
-        )}
-      </Box>
-    </>
+    <Box>
+      {isPending ? (
+        <Trans i18nKey="currentMhaRequest">
+          <p style={{ lineHeight: 1.5 }}>
+            Our records indicate that you have an MHA request{' '}
+            <strong>waiting to be processed</strong>. To view your MHA request,
+            click on the &quot;View Current MHA&quot; button below. If you would
+            like to make changes to your request, click on the &quot;Edit
+            Request&quot; button below.
+          </p>
+        </Trans>
+      ) : (
+        <Trans i18nKey="currentApprovedMha">
+          <p style={{ lineHeight: 1.5 }}>
+            Our records indicate that you have an approved MHA amount. To view
+            your MHA amount, click on the &quot;View Current MHA&quot; button
+            below. If you would like to apply for a new MHA, click &quot;Update
+            Current MHA&quot;.
+          </p>
+        </Trans>
+      )}
+    </Box>
   );
 };

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

@@ -6,7 +6,6 @@ import { render } from '@testing-library/react';
 import theme from 'src/theme';
 import {
   ContextType,
-  HcmData,
   MinisterHousingAllowanceContext,
 } from '../Shared/Context/MinisterHousingAllowanceContext';
 import { IneligibleDisplay } from './IneligibleDisplay';
@@ -30,57 +29,67 @@ const TestComponent: React.FC<TestComponentProps> = ({ contextValue }) => {
 };
 
 describe('IneligibleDisplay', () => {
-  it('should render page with single staff', () => {
-    const { getByText, queryByText } = render(
+  it('should render single user ineligible message', () => {
+    const { getByTestId } = render(
       <TestComponent
         contextValue={{
           isMarried: false,
           preferredName: 'John',
-          spousePreferredName: '',
-          userHcmData: {
-            staffInfo: {
-              personNumber: '000123456',
-            },
-          } as unknown as HcmData,
-          spouseHcmData: null,
+          spousePreferredName: 'Jane',
+          userEligibleForMHA: false,
+          spouseEligibleForMHA: false,
+        }}
+      />,
+    );
+
+    expect(getByTestId('single-ineligible')).toBeInTheDocument();
+  });
+
+  it('should render both ineligible message when neither user is eligible', () => {
+    const { getByTestId } = render(
+      <TestComponent
+        contextValue={{
+          isMarried: true,
+          preferredName: 'John',
+          spousePreferredName: 'Jane',
+          userEligibleForMHA: false,
+          spouseEligibleForMHA: false,
+        }}
+      />,
+    );
+
+    expect(getByTestId('both-ineligible')).toBeInTheDocument();
+  });
+
+  it('should render user ineligible message when user ineligible', () => {
+    const { getByTestId } = render(
+      <TestComponent
+        contextValue={{
+          isMarried: true,
+          preferredName: 'John',
+          spousePreferredName: 'Jane',
+          userEligibleForMHA: false,
+          spouseEligibleForMHA: true,
         }}
       />,
     );
 
-    expect(getByText('Your MHA')).toBeInTheDocument();
-    expect(
-      getByText(
-        /our records indicate that you have not applied for minister's housing allowance/i,
-      ),
-    ).toBeInTheDocument();
-    expect(
-      queryByText(/Jane has not completed the required ibs courses/i),
-    ).not.toBeInTheDocument();
+    expect(getByTestId('one-ineligible')).toBeInTheDocument();
   });
 
-  it('should render page with married staff', () => {
-    const { getByText } = render(
+  it('should render spouse ineligible message when spouse ineligible', () => {
+    const { getByTestId } = render(
       <TestComponent
         contextValue={{
           isMarried: true,
           preferredName: 'John',
           spousePreferredName: 'Jane',
-          userHcmData: {
-            staffInfo: {
-              personNumber: '000123456',
-            },
-          } as unknown as HcmData,
-          spouseHcmData: {
-            staffInfo: {
-              personNumber: '100123456',
-            },
-          } as unknown as HcmData,
+          userEligibleForMHA: true,
+          spouseEligibleForMHA: false,
         }}
       />,
     );
 
-    expect(
-      getByText(/Jane has not completed the required ibs courses/i),
-    ).toBeInTheDocument();
+    expect(getByTestId('one-ineligible')).toBeInTheDocument();
   });
 });

src/components/Reports/MinisterHousingAllowance/MainPages/IneligibleDisplay.tsx

@@ -1,53 +1,96 @@
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { useMinisterHousingAllowance } from '../Shared/Context/MinisterHousingAllowanceContext';
 
 export const IneligibleDisplay: React.FC = () => {
-  const { t } = useTranslation();
-  const { isMarried, preferredName, spousePreferredName } =
-    useMinisterHousingAllowance();
+  const {
+    isMarried,
+    preferredName,
+    spousePreferredName,
+    userEligibleForMHA,
+    spouseEligibleForMHA,
+  } = useMinisterHousingAllowance();
 
-  // TODO - Add spouse to API and check eligibility
-  // We will get this from HCM data in the future
-  const spouseEligibleForMHA = false;
+  const { t } = useTranslation();
 
-  return (
-    <>
-      <Box mb={2}>
-        <Typography variant="h5">{t('Your MHA')}</Typography>
+  if (!isMarried) {
+    return (
+      <Box mt={2} data-testid="single-ineligible">
+        <Trans t={t}>
+          <p style={{ lineHeight: 1.5 }}>
+            You have not completed the required IBS courses to meet eligibility
+            criteria.
+          </p>
+          <p style={{ lineHeight: 1.5, marginTop: '1em' }}>
+            Once approved, when you calculate your salary, you will see the
+            approved amount that can be applied to your salary. If you believe
+            this is incorrect, please contact Personnel Records at{' '}
+            <a href="tel:4078262230">407-826-2230</a> or{' '}
+            <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
+          </p>
+        </Trans>
       </Box>
-      <Box>
+    );
+  }
+
+  const bothIneligible = !userEligibleForMHA && !spouseEligibleForMHA;
+
+  if (bothIneligible) {
+    return (
+      <Box mt={2} data-testid="both-ineligible">
         <Trans
-          i18nKey={isMarried ? 'newMhaRequestMarried' : 'newMhaRequestSingle'}
+          t={t}
+          values={{
+            preferredName,
+            spousePreferredName,
+          }}
         >
           <p style={{ lineHeight: 1.5 }}>
-            Our records indicate that you have not applied for Minister&apos;s
-            Housing Allowance. If you would like information about applying for
-            one, contact Personnel Records at{' '}
-            <a href="tel:407-826-2230">(407) 826-2230</a> or{' '}
+            {'{{preferredName}}'} and {'{{spousePreferredName}}'} have not
+            completed the required IBS courses to meet eligibility criteria.
+          </p>
+          <p style={{ lineHeight: 1.5, marginTop: '1em' }}>
+            Once approved, when you calculate your salary, you will see the
+            approved amount that can be applied to {'{{preferredName}}'} and{' '}
+            {'{{spousePreferredName}}'}&apos;s salary. If you believe this is
+            incorrect, please contact Personnel Records at{' '}
+            <a href="tel:4078262230">407-826-2230</a> or{' '}
             <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
           </p>
         </Trans>
-        {isMarried && spouseEligibleForMHA === false && (
-          <Box mt={2}>
-            <Trans i18nKey="spouseNotEligibleMha">
-              <p style={{ lineHeight: 1.5 }}>
-                Completing a Minister&apos;s Housing Allowance will submit the
-                request for {preferredName}. {spousePreferredName} has not
-                completed the required IBS courses to meet eligibility criteria.
-              </p>
-              <p style={{ lineHeight: 1.5, marginTop: '1em' }}>
-                Once approved, when you calculate your salary, you will see the
-                approved amount that can be applied to {preferredName}&apos;s
-                salary. If you believe this is incorrect, please contact
-                Personnel Records at{' '}
-                <a href="tel:407-826-2230">(407) 826-2230</a> or{' '}
-                <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
-              </p>
-            </Trans>
-          </Box>
-        )}
       </Box>
-    </>
+    );
+  }
+
+  const eligibleUserName = userEligibleForMHA
+    ? preferredName
+    : spousePreferredName;
+  const ineligibleUserName = userEligibleForMHA
+    ? spousePreferredName
+    : preferredName;
+
+  return (
+    <Box mt={2} data-testid="one-ineligible">
+      <Trans
+        t={t}
+        values={{
+          eligibleUserName,
+          ineligibleUserName,
+        }}
+      >
+        <p style={{ lineHeight: 1.5 }}>
+          Completing a Minister&apos;s Housing Allowance will submit the request
+          for {'{{eligibleUserName}}'}. {'{{ineligibleUserName}}'} has not
+          completed the required IBS courses to meet eligibility criteria.
+        </p>
+        <p style={{ lineHeight: 1.5, marginTop: '1em' }}>
+          Once approved, when you calculate your salary, you will see the
+          approved amount that can be applied to {'{{ineligibleUserName}}'}
+          &apos;s salary. If you believe this is incorrect, please contact
+          Personnel Records at <a href="tel:4078262230">407-826-2230</a> or{' '}
+          <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
+        </p>
+      </Trans>
+    </Box>
   );
 };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { render } from '@testing-library/react';
+import theme from 'src/theme';
+import { NoRequestsDisplay } from './NoRequestsDisplay';
+
+const TestComponent: React.FC = () => (
+  <ThemeProvider theme={theme}>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <NoRequestsDisplay />
+    </LocalizationProvider>
+  </ThemeProvider>
+);
+
+describe('NoRequestsDisplay', () => {
+  it('should render no requests message', () => {
+    const { getByTestId } = render(<TestComponent />);
+
+    expect(getByTestId('no-requests-display')).toBeInTheDocument();
+  });
+
+  it('should render contact email link', () => {
+    const { getByRole } = render(<TestComponent />);
+
+    expect(getByRole('link', { name: 'MHA@cru.org' })).toHaveAttribute(
+      'href',
+      'mailto:MHA@cru.org',
+    );
+  });
+});

src/components/Reports/MinisterHousingAllowance/MainPages/NoRequestsDisplay.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@mui/material';
+import { Trans, useTranslation } from 'react-i18next';
+
+export const NoRequestsDisplay: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box data-testid="no-requests-display">
+      <Trans t={t}>
+        <p style={{ lineHeight: 1.5 }}>
+          Our records indicate that you have not applied for Minister&apos;s
+          Housing Allowance. If you would like information about applying for
+          one, contact Personnel Records at{' '}
+          <a href="tel:4078262230">407-826-2230</a> or{' '}
+          <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
+        </p>
+      </Trans>
+    </Box>
+  );
+};