No-Jira - Disable Continue on Setup Step until values filled by user

src/components/Reports/PdsGoalCalculator/PdsGoalCalculator.test.tsx

@@ -1,8 +1,23 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import {
+  DesignationSupportSalaryType,
+  DesignationSupportStatus,
+} from 'src/graphql/types.generated';
 import { PdsGoalCalculator } from './PdsGoalCalculator';
 import { PdsGoalCalculatorTestWrapper } from './PdsGoalCalculatorTestWrapper';
 
+const completeSetupMock = {
+  id: 'goal-1',
+  name: 'Test Goal',
+  status: DesignationSupportStatus.FullTime,
+  salaryOrHourly: DesignationSupportSalaryType.Salaried,
+  payRate: 50000,
+  hoursWorkedPerWeek: null,
+  benefits: 1500,
+  geographicLocation: 'Orlando, FL',
+};
+
 describe('PdsGoalCalculator', () => {
   it('renders the setup step by default', () => {
     const { getByRole } = render(
@@ -15,4 +30,41 @@ describe('PdsGoalCalculator', () => {
       getByRole('heading', { level: 6, name: 'Calculator Setup' }),
     ).toBeInTheDocument();
   });
+
+  it('disables Continue on Setup step when a required field is missing', async () => {
+    const { findByRole } = render(
+      <PdsGoalCalculatorTestWrapper
+        calculationMock={{ ...completeSetupMock, name: '' }}
+      >
+        <PdsGoalCalculator />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    const continueButton = await findByRole('button', { name: /continue/i });
+    await waitFor(() => expect(continueButton).toBeDisabled());
+  });
+
+  it('disables Continue on Setup step when geographicLocation is not set', async () => {
+    const { findByRole } = render(
+      <PdsGoalCalculatorTestWrapper
+        calculationMock={{ ...completeSetupMock, geographicLocation: null }}
+      >
+        <PdsGoalCalculator />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    const continueButton = await findByRole('button', { name: /continue/i });
+    await waitFor(() => expect(continueButton).toBeDisabled());
+  });
+
+  it('enables Continue on Setup step when all required fields are filled', async () => {
+    const { findByRole } = render(
+      <PdsGoalCalculatorTestWrapper calculationMock={completeSetupMock}>
+        <PdsGoalCalculator />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    const continueButton = await findByRole('button', { name: /continue/i });
+    await waitFor(() => expect(continueButton).toBeEnabled());
+  });
 });

src/components/Reports/PdsGoalCalculator/PdsGoalCalculator.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { SectionList } from 'src/components/Reports/GoalCalculator/SharedComponents/SectionList';
 import { DirectionButtons } from 'src/components/Reports/Shared/CalculationReports/DirectionButtons/DirectionButtons';
+import {
+  AutosaveForm,
+  useAutosaveForm,
+} from 'src/components/Shared/Autosave/AutosaveForm';
 import { PdsGoalCalculatorStepEnum } from './PdsGoalCalculatorHelper';
 import { ReimbursableExpensesStep } from './ReimbursableExpenses/ReimbursableExpensesStep';
 import { SalaryStep } from './Salary/SalaryStep';
@@ -24,27 +28,38 @@ const CurrentStep: React.FC = () => {
   }
 };
 
-export const PdsGoalCalculator: React.FC = () => {
+const StepContent: React.FC = () => {
   const { currentStep, stepIndex, steps, handleContinue, handlePreviousStep } =
     usePdsGoalCalculator();
-  const sections = currentStep.sections;
-
+  const { allValid } = useAutosaveForm();
   const isLastStep = stepIndex === steps.length - 1;
 
+  return (
+    <>
+      <CurrentStep />
+      {!isLastStep && (
+        <DirectionButtons
+          formTitle={currentStep.title}
+          handleNextStep={handleContinue}
+          handlePreviousStep={handlePreviousStep}
+          disableNext={!allValid}
+        />
+      )}
+    </>
+  );
+};
+
+export const PdsGoalCalculator: React.FC = () => {
+  const { currentStep } = usePdsGoalCalculator();
+  const sections = currentStep.sections;
+
   return (
     <PdsGoalCalculatorLayout
       sectionListPanel={<SectionList sections={sections} />}
       mainContent={
-        <>
-          <CurrentStep />
-          {!isLastStep && (
-            <DirectionButtons
-              formTitle={currentStep.title}
-              handleNextStep={handleContinue}
-              handlePreviousStep={handlePreviousStep}
-            />
-          )}
-        </>
+        <AutosaveForm>
+          <StepContent />
+        </AutosaveForm>
       }
     />
   );

src/components/Reports/PdsGoalCalculator/Setup/SetupStep.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import CalculateIcon from '@mui/icons-material/Calculate';
 import {
   Autocomplete,
@@ -21,6 +21,7 @@
   CurrencyAdornment,
   PercentageAdornment,
 } from 'src/components/Reports/GoalCalculator/Shared/Adornments';
+import { useOptionalAutosaveForm } from 'src/components/Shared/Autosave/AutosaveForm';
 import { useGetUserQuery } from 'src/components/User/GetUser.generated';
 import {
   DesignationSupportSalaryType,
@@ -47,31 +48,52 @@
     () =>
       yup.object({
         name: yup.string().required(t('Goal Name is a required field')),
-        status: yup.string().nullable(),
-        salaryOrHourly: yup.string().nullable(),
+        status: yup
+          .string()
+          .required(t('Employment Status is a required field')),
+        salaryOrHourly: yup
+          .string()
+          .required(t('Pay Type is a required field')),
         payRate: yup
           .number()
-          .nullable()
+          .required(t('Pay Rate is a required field'))
           .min(0, t('Pay Rate must be a positive number')),
         hoursWorkedPerWeek: yup
           .number()
-          .nullable()
+          .required(t('Hours Worked is a required field'))
           .min(0, t('Hours Worked must be a positive number')),
         benefits: yup
           .number()
-          .nullable()
+          .required(t('Benefits is a required field'))
           .min(0, t('Benefits must be a positive number')),
+        geographicLocation: yup
+          .string()
+          .required(t('Geographic Multiplier is a required field')),
       }),
     [t],
   );
   const { goalGeographicConstantMap } = useGoalCalculatorConstants();
   const saveField = useSaveField();
 
   const locations = useMemo(
     () => Array.from(goalGeographicConstantMap.keys()),
     [goalGeographicConstantMap],
   );
 
+  const autosaveForm = useOptionalAutosaveForm();
+  const geographicLocationValue = calculation?.geographicLocation;
+  useEffect(() => {
+    if (!autosaveForm) {
+      return;
+    }
+    if (geographicLocationValue) {
+      autosaveForm.markValid('geographicLocation');
+    } else {
+      autosaveForm.markInvalid('geographicLocation');
+    }
+    return () => autosaveForm.markValid('geographicLocation');
+  }, [autosaveForm, geographicLocationValue]);
+
   const isSalaried =
     calculation?.salaryOrHourly === DesignationSupportSalaryType.Salaried;
   const isPartTime = calculation?.status === DesignationSupportStatus.PartTime;

src/components/Reports/Shared/CalculationReports/DirectionButtons/DirectionButtons.test.tsx

@@ -25,6 +25,7 @@ interface TestComponentProps {
   showBackButton?: boolean;
   buttonTitle?: string;
   isEdit?: boolean;
+  disableNext?: boolean;
 }
 
 const TestComponent: React.FC<TestComponentProps> = ({
@@ -33,6 +34,7 @@ const TestComponent: React.FC<TestComponentProps> = ({
   showBackButton = false,
   buttonTitle,
   isEdit,
+  disableNext,
 }) => (
   <ThemeProvider theme={theme}>
     <TestRouter
@@ -54,6 +56,7 @@ const TestComponent: React.FC<TestComponentProps> = ({
                 showBackButton={showBackButton}
                 buttonTitle={buttonTitle}
                 isEdit={isEdit}
+                disableNext={disableNext}
               />
             </MinisterHousingAllowanceProvider>
           </Formik>
@@ -114,6 +117,24 @@ describe('DirectionButtons', () => {
     expect(await findByRole('button', { name: title })).toBeInTheDocument();
   });
 
+  it('disables Continue when disableNext is true', async () => {
+    const { findByRole } = render(<TestComponent disableNext={true} />);
+
+    expect(await findByRole('button', { name: 'Continue' })).toBeDisabled();
+  });
+
+  it('enables Continue when disableNext is false', async () => {
+    const { findByRole } = render(<TestComponent disableNext={false} />);
+
+    expect(await findByRole('button', { name: 'Continue' })).toBeEnabled();
+  });
+
+  it('leaves Continue enabled when disableNext is not provided', async () => {
+    const { findByRole } = render(<TestComponent />);
+
+    expect(await findByRole('button', { name: 'Continue' })).toBeEnabled();
+  });
+
   it('renders Discard button', async () => {
     const { findByRole } = render(<TestComponent />);
 

src/components/Reports/Shared/CalculationReports/DirectionButtons/DirectionButtons.tsx

@@ -21,6 +21,7 @@
   additionalApproval?: boolean;
   splitAsr?: boolean;
   disableSubmit?: boolean;
+  disableNext?: boolean;
   //Formik validation for submit modal
   isSubmission?: boolean;
   submitForm?: () => Promise<void>;
@@ -51,96 +52,98 @@
   additionalApproval,
   splitAsr,
   disableSubmit,
+  disableNext,
 }) => {
   const { t } = useTranslation();
 
   const [openSubmitModal, setOpenSubmitModal] = useState(false);
   const [openDiscardModal, setOpenDiscardModal] = useState(false);
 
   const handleSubmit = async () => {
     if (!submitForm || !validateForm) {
       return;
     }
 
     const errors = await validateForm();
     if (Object.keys(errors).length === 0) {
       setOpenSubmitModal(true);
     } else {
       submitForm();
     }
   };
 
   const handleConfirm = async () => {
     if (submitForm) {
       try {
         await submitForm();
       } catch {
         return;
       }
     }
     setOpenSubmitModal(false);
   };
 
   const handleDiscardConfirm = () => {
     if (handleDiscard) {
       handleDiscard();
     }
     setOpenDiscardModal(false);
   };
 
   return (
     <Box
       sx={{
         mt: 5,
         display: 'flex',
         justifyContent:
           !handleDiscard && !showBackButton && !isSubmission
             ? 'flex-end'
             : 'space-between',
       }}
     >
       {handleDiscard && (
         <Button
           sx={{ color: 'error.light', px: 2, py: 1, fontWeight: 'bold' }}
           onClick={() => setOpenDiscardModal(true)}
         >
           {isEdit ? t('Discard Changes') : t('Discard')}
         </Button>
       )}
 
       <Box sx={{ display: 'flex', gap: 2 }}>
         {showBackButton && (
           <Button
             variant="contained"
             sx={{
               bgcolor: 'grey.300',
               color: 'text.primary',
               '&:hover': {
                 bgcolor: 'grey.400',
               },
               fontWeight: 'bold',
             }}
             onClick={handlePreviousStep}
           >
             <ChevronLeft sx={{ mr: 1 }} />
             {t('Back')}
           </Button>
         )}
         {isSubmission ? (
           <Button
             variant="contained"
             color="primary"
             onClick={handleSubmit}
             disabled={submitCount ? !isValid : false}
           >
             {t('Submit')}
             <ChevronRight sx={{ ml: 1 }} />
           </Button>
         ) : (
           <Button
             variant="contained"
             color="primary"
             onClick={overrideNext ?? handleNextStep}
+            disabled={disableNext}
           >
             {buttonTitle ?? t('Continue')}
             <ChevronRight sx={{ ml: 1 }} />