MPDX-9121 Add Mutations to MHA

pages/accountLists/[accountListId]/reports/housingAllowance/[requestId].page.tsx

@@ -26,6 +26,7 @@ const RequestPageWrapper = styled(Box)(({ theme }) => ({
 const HousingAllowanceRequestPage: React.FC = () => {
   const { t } = useTranslation();
   const router = useRouter();
+  const [isNavListOpen, setIsNavListOpen] = useState(false);
   const { requestId, mode } = router.query;
 
   if (!requestId) {
@@ -54,8 +55,6 @@ const HousingAllowanceRequestPage: React.FC = () => {
     mode: pageType,
   });
 
-  const [isNavListOpen, setIsNavListOpen] = useState(false);
-
   const handleNavListToggle = () => {
     setIsNavListOpen(!isNavListOpen);
   };

pages/accountLists/[accountListId]/reports/salaryCalculator/salaryCalculator.page.test.tsx

@@ -12,10 +12,10 @@ const TestComponent = () => (
 );
 
 describe('SalaryCalculatorPage', () => {
-  it('renders the Salary Calculator header', () => {
-    const { getByRole } = render(<TestComponent />);
+  it('renders the Salary Calculator header', async () => {
+    const { findByRole } = render(<TestComponent />);
     expect(
-      getByRole('heading', { name: /Salary Calculator/i }),
+      await findByRole('heading', { name: /Salary Calculator/i }),
     ).toBeInTheDocument();
   });
 

src/components/Reports/AdditionalSalaryRequest/AboutForm/AboutForm.tsx

@@ -9,7 +9,7 @@ import { AdditionalSalaryRequestSection } from '../SharedComponents/AdditionalSa
 import { SpouseComponent } from '../SharedComponents/SpouseComponent';
 
 export const AboutForm: React.FC = () => {
-  const { currentStep } = useAdditionalSalaryRequest();
+  const { currentIndex } = useAdditionalSalaryRequest();
   const { t } = useTranslation();
   const theme = useTheme();
 
@@ -20,7 +20,7 @@ export const AboutForm: React.FC = () => {
   const remainingAllowableSalary = 17500.0;
 
   return (
-    <AdditionalSalaryRequestSection title={getHeader(t, currentStep)}>
+    <AdditionalSalaryRequestSection title={getHeader(t, currentIndex)}>
       <Trans t={t}>
         <Typography variant="body1" paragraph>
           You can use this form to electronically submit additional salary

src/components/Reports/AdditionalSalaryRequest/AdditionalSalaryRequest.tsx

@@ -74,13 +74,15 @@ export const AdditionalSalaryRequest: React.FC = () => {
   const { isDrawerOpen, toggleDrawer, steps, currentIndex, percentComplete } =
     useAdditionalSalaryRequest();
 
+  const iconPanelItems = useIconPanelItems(isDrawerOpen, toggleDrawer);
+
   return (
     <PanelLayout
       panelType={PanelTypeEnum.Other}
       percentComplete={percentComplete}
       steps={steps}
       currentIndex={currentIndex}
-      icons={useIconPanelItems(isDrawerOpen, toggleDrawer)}
+      icons={iconPanelItems}
       sidebarContent={<StepsList steps={steps} />}
       sidebarTitle={t('Additional Salary Request')}
       isSidebarOpen={isDrawerOpen}

src/components/Reports/AdditionalSalaryRequest/CompleteForm/CompleteForm.tsx

@@ -13,7 +13,7 @@ import { NetAdditionalSalary } from './NetAdditionalSalary/NetAdditionalSalary';
 
 export const CompleteForm: React.FC = () => {
   const { t } = useTranslation();
-  const { currentStep } = useAdditionalSalaryRequest();
+  const { currentIndex } = useAdditionalSalaryRequest();
 
   const theme = useTheme();
   const name = 'Doc, John';
@@ -22,7 +22,7 @@ export const CompleteForm: React.FC = () => {
   const remainingAllowableSalary = 17500.0;
 
   return (
-    <AdditionalSalaryRequestSection title={getHeader(t, currentStep)}>
+    <AdditionalSalaryRequestSection title={getHeader(t, currentIndex)}>
       <Box
         sx={{
           display: 'flex',

src/components/Reports/AdditionalSalaryRequest/CurrentStep.tsx

@@ -3,33 +3,29 @@ import { useTranslation } from 'react-i18next';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { Receipt } from '../Shared/CalculationReports/ReceiptStep/Receipt';
 import { AboutForm } from './AboutForm/AboutForm';
-import { AdditionalSalaryRequestSectionEnum } from './AdditionalSalaryRequestHelper';
 import { CompleteForm } from './CompleteForm/CompleteForm';
 import { useAdditionalSalaryRequest } from './Shared/AdditionalSalaryRequestContext';
 import { AdditionalSalaryRequestSection } from './SharedComponents/AdditionalSalaryRequestSection';
 
 export const CurrentStep: React.FC = () => {
-  const { currentStep } = useAdditionalSalaryRequest();
+  const { currentIndex } = useAdditionalSalaryRequest();
   const { t } = useTranslation();
   const accountListId = useAccountListId();
 
   const pageLink = `/accountLists/${accountListId}/reports/additionalSalaryRequest`;
 
-  switch (currentStep) {
-    case AdditionalSalaryRequestSectionEnum.AboutForm:
-      return <AboutForm />;
-    case AdditionalSalaryRequestSectionEnum.CompleteForm:
-      return <CompleteForm />;
-    case AdditionalSalaryRequestSectionEnum.Receipt:
-      return (
-        <AdditionalSalaryRequestSection>
-          <Receipt
-            formTitle={t('Additional Salary Request')}
-            buttonText={t('View Your Additional Salary Request')}
-            viewLink={pageLink}
-            isEdit={false}
-          />
-        </AdditionalSalaryRequestSection>
-      );
-  }
+  const steps = [
+    <AboutForm key="about-form" />,
+    <CompleteForm key="complete-form" />,
+    <AdditionalSalaryRequestSection key="receipt-section">
+      <Receipt
+        formTitle={t('Additional Salary Request')}
+        buttonText={t('View Your Additional Salary Request')}
+        viewLink={pageLink}
+        isEdit={false}
+      />
+    </AdditionalSalaryRequestSection>,
+  ];
+
+  return steps[currentIndex] ?? null;
 };

src/components/Reports/AdditionalSalaryRequest/Shared/AdditionalSalaryRequestContext.test.tsx

@@ -7,13 +7,13 @@ import { useAdditionalSalaryRequest } from './AdditionalSalaryRequestContext';
 import { getHeader } from './Helper/getHeader';
 
 const TestComponent: React.FC = () => {
-  const { currentStep, handleNextStep, isDrawerOpen, toggleDrawer } =
+  const { currentIndex, handleNextStep, isDrawerOpen, toggleDrawer } =
     useAdditionalSalaryRequest();
   const { t } = useTranslation();
 
   return (
     <div>
-      <h2>{getHeader(t, currentStep)}</h2>
+      <h2>{getHeader(t, currentIndex)}</h2>
       <div aria-label="drawer state" data-open={isDrawerOpen}>
         Drawer: {isDrawerOpen ? 'open' : 'closed'}
       </div>

src/components/Reports/AdditionalSalaryRequest/Shared/AdditionalSalaryRequestContext.tsx

@@ -9,14 +9,12 @@
 import { FormEnum } from '../../Shared/CalculationReports/Shared/sharedTypes';
 import { Steps } from '../../Shared/CalculationReports/StepsList/StepsList';
 import { CompleteFormValues } from '../AdditionalSalaryRequest';
-import { AdditionalSalaryRequestSectionEnum } from '../AdditionalSalaryRequestHelper';
 import { calculateCompletionPercentage } from './calculateCompletionPercentage';
 
 export type AdditionalSalaryRequestType = {
   steps: Steps[];
   currentIndex: number;
   percentComplete: number;
-  currentStep: AdditionalSalaryRequestSectionEnum;
   handleNextStep: () => void;
   handlePreviousStep: () => void;
   isDrawerOpen: boolean;
@@ -43,165 +41,143 @@
   initialValues?: CompleteFormValues;
 }
 
-const objects = Object.values(AdditionalSalaryRequestSectionEnum);
-
 export const AdditionalSalaryRequestProvider: React.FC<Props> = ({
   children,
   initialValues: providedInitialValues,
 }) => {
   const { t } = useTranslation();
-  const { steps, nextStep, previousStep, currentIndex } = useStepList(
-    FormEnum.AdditionalSalary,
-  );
+  const { steps, handleNextStep, handlePreviousStep, currentIndex } =
+    useStepList(FormEnum.AdditionalSalary);
   const locale = useLocale();
 
   const createCurrencyValidation = useCallback(
     (fieldName: string, max?: number) => {
       let schema = amount(fieldName, t);
       if (max) {
         schema = schema.max(
           max,
           t('Exceeds {{amount}} limit', {
             amount: currencyFormat(max, 'USD', locale, {
               showTrailingZeros: true,
             }),
           }),
         );
       }
       return schema;
     },
     [t],
   );
 
   const initialValues: CompleteFormValues = {
     currentYearSalary: '0',
     previousYearSalary: '0',
     additionalSalary: '0',
     adoption: '0',
     contribution403b: '0',
     counseling: '0',
     healthcareExpenses: '0',
     babysitting: '0',
     childrenMinistryTrip: '0',
     childrenCollege: '0',
     movingExpense: '0',
     seminary: '0',
     housingDownPayment: '0',
     autoPurchase: '0',
     reimbursableExpenses: '0',
     defaultPercentage: false,
     telephoneNumber: '',
   };
 
   const validationSchema = useMemo(
     () =>
       yup.object({
         currentYearSalary: createCurrencyValidation(t("Current Year's Salary")),
         previousYearSalary: createCurrencyValidation(
           t("Previous Year's Salary"),
         ),
         additionalSalary: createCurrencyValidation(t('Additional Salary')),
         adoption: createCurrencyValidation(t('Adoption'), 15000), // replace with MpdGoalMiscConstants value when possible
         contribution403b: createCurrencyValidation(t('403(b) Contribution')), // Can't be greater than salary (will be pulled from HCM)
         counseling: createCurrencyValidation(t('Counseling')),
         healthcareExpenses: createCurrencyValidation(t('Healthcare Expenses')),
         babysitting: createCurrencyValidation(t('Babysitting')),
         childrenMinistryTrip: createCurrencyValidation(
           t("Children's Ministry Trip"),
         ), // Need to pull number of children from HCM and multiply by 21000 for max
         childrenCollege: createCurrencyValidation(t("Children's College")),
         movingExpense: createCurrencyValidation(t('Moving Expense')),
         seminary: createCurrencyValidation(t('Seminary')),
         housingDownPayment: createCurrencyValidation(
           t('Housing Down Payment'),
           50000,
         ), // replace with MpdGoalMiscConstants value when possible
         autoPurchase: createCurrencyValidation(t('Auto Purchase')), // Max will eventually be a constant, no determined value yet
         reimbursableExpenses: createCurrencyValidation(
           t('Reimbursable Expenses'),
         ),
         defaultPercentage: yup.boolean(),
         telephoneNumber: yup
           .string()
           .required(t('Telephone number is required'))
           .matches(
             /^[\d\s\-\(\)\+]+$/,
             t('Please enter a valid telephone number'),
           ),
       }),
     [createCurrencyValidation, t],
   );
 
-  // Step Handlers
-  const [currentStep, setCurrentStep] = useState(
-    AdditionalSalaryRequestSectionEnum.AboutForm,
-  );
-
-  const handleNextStep = useCallback(() => {
-    const next = objects[currentIndex + 1];
-    nextStep();
-
-    setCurrentStep(next);
-  }, [currentIndex, objects, nextStep]);
-
-  const handlePreviousStep = useCallback(() => {
-    const next = objects[currentIndex - 1];
-    previousStep();
-
-    setCurrentStep(next);
-  }, [currentIndex, objects, previousStep]);
-
   const [isDrawerOpen, setIsDrawerOpen] = useState(true);
   const toggleDrawer = useCallback(() => {
     setIsDrawerOpen((prev) => !prev);
   }, []);
 
   const handleCancel = () => {
     // Implement cancel logic here
   };
 
   const handleSubmit = useCallback(
     (_values: CompleteFormValues) => {
       //TODO: Submit form values
       handleNextStep();
     },
     [handleNextStep],
   );
 
   const formik = useFormik<CompleteFormValues>({
     initialValues: providedInitialValues || initialValues,
     validationSchema,
     onSubmit: handleSubmit,
     enableReinitialize: true,
   });
 
   const percentComplete = useMemo(
     () => calculateCompletionPercentage(formik.values),
     [formik.values],
   );
 
   const contextValue = useMemo<AdditionalSalaryRequestType>(
     () => ({
       steps,
       currentIndex,
       percentComplete,
-      currentStep,
       handleNextStep,
       handlePreviousStep,
       isDrawerOpen,
       toggleDrawer,
       setIsDrawerOpen,
       handleCancel,
     }),
     [
       steps,
       currentIndex,
       percentComplete,
-      currentStep,
       handleNextStep,
       handlePreviousStep,
       isDrawerOpen,
       toggleDrawer,
+      setIsDrawerOpen,
+      handleCancel,
     ],
   );
 

src/components/Reports/AdditionalSalaryRequest/Shared/Helper/getHeader.ts

@@ -1,16 +1,14 @@
 import { TFunction } from 'i18next';
-import { AdditionalSalaryRequestSectionEnum } from '../../AdditionalSalaryRequestHelper';
 
-export const getHeader = (
-  t: TFunction,
-  step: AdditionalSalaryRequestSectionEnum,
-): string => {
+export const getHeader = (t: TFunction, step: number): string => {
   switch (step) {
-    case AdditionalSalaryRequestSectionEnum.AboutForm:
+    case 0:
       return 'About this Form';
-    case AdditionalSalaryRequestSectionEnum.CompleteForm:
+    case 1:
       return 'Complete the Form';
-    case AdditionalSalaryRequestSectionEnum.Receipt:
+    case 2:
       return 'Receipt';
+    default:
+      return '';
   }
 };

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

@@ -30,9 +30,8 @@ export const EligibleDisplay: React.FC<EligibleDisplayProps> = ({
             <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 on the
-              &quot;Duplicate Last Year&apos;s MHA&quot; button below or
-              &quot;Request New MHA&quot; below.
+              below. If you would like to apply for a new MHA, click
+              &quot;Update Current MHA&quot;.
             </p>
           </Trans>
         )}

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

@@ -34,10 +34,13 @@ export const IneligibleDisplay: React.FC = () => {
                 Completing a Minister's Housing Allowance will submit the
                 request for {preferredName}. {spousePreferredName} has not
                 completed the required IBS courses to meet eligibility criteria.
-                When you calculate your salary, you will see the approved amount
-                that can be applied to {preferredName}'s salary. If you
-                believe this is incorrect, please contact Personnel Records at
-                407-826-2252 or <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
+              </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 407-826-2252 or{' '}
+                <a href="mailto:MHA@cru.org">MHA@cru.org</a>.
               </p>
             </Trans>
           </Box>