Remove field validation from mha

Author: Katelyn Grimes

src/components/HrTools/MinisterHousingAllowance/Steps/StepThree/CalcComponents/CostOfHome.tsx

@@ -24,7 +24,7 @@ export const CostOfHome: React.FC<CostOfHomeProps> = ({
   const locale = useLocale();
   const currency = 'USD';
 
-  const { values, touched, errors } = useFormikContext<CalculationFormValues>();
+  const { values } = useFormikContext<CalculationFormValues>();
 
   const { totalCostOfHome, annualCostOfHome } = useAnnualTotal(
     values,
@@ -49,10 +49,6 @@ export const CostOfHome: React.FC<CostOfHomeProps> = ({
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.mortgageOrRentPayment && errors.mortgageOrRentPayment
-                ? '2px solid red'
-                : '',
           }}
         >
           <AutosaveCustomTextField
@@ -80,10 +76,6 @@ export const CostOfHome: React.FC<CostOfHomeProps> = ({
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.furnitureCostsTwo && errors.furnitureCostsTwo
-                ? '2px solid red'
-                : '',
           }}
         >
           <AutosaveCustomTextField
@@ -111,8 +103,6 @@ export const CostOfHome: React.FC<CostOfHomeProps> = ({
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.repairCosts && errors.repairCosts ? '2px solid red' : '',
           }}
         >
           <AutosaveCustomTextField
@@ -143,10 +133,6 @@ export const CostOfHome: React.FC<CostOfHomeProps> = ({
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.avgUtilityTwo && errors.avgUtilityTwo
-                ? '2px solid red'
-                : '',
           }}
         >
           <AutosaveCustomTextField
@@ -173,10 +159,6 @@ export const CostOfHome: React.FC<CostOfHomeProps> = ({
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.unexpectedExpenses && errors.unexpectedExpenses
-                ? '2px solid red'
-                : '',
           }}
         >
           <AutosaveCustomTextField

src/components/HrTools/MinisterHousingAllowance/Steps/StepThree/CalcComponents/FairRentalValue.tsx

@@ -20,7 +20,7 @@ export const FairRentalValue: React.FC<FairRentalValueProps> = ({ schema }) => {
   const locale = useLocale();
   const currency = 'USD';
 
-  const { values, touched, errors } = useFormikContext<CalculationFormValues>();
+  const { values } = useFormikContext<CalculationFormValues>();
 
   const { totalFairRental, annualFairRental } = useAnnualTotal(
     values,
@@ -50,8 +50,6 @@ export const FairRentalValue: React.FC<FairRentalValueProps> = ({ schema }) => {
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.rentalValue && errors.rentalValue ? '2px solid red' : '',
           }}
         >
           <AutosaveCustomTextField
@@ -85,10 +83,6 @@ export const FairRentalValue: React.FC<FairRentalValueProps> = ({ schema }) => {
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.furnitureCostsOne && errors.furnitureCostsOne
-                ? '2px solid red'
-                : '',
           }}
         >
           <AutosaveCustomTextField
@@ -114,10 +108,6 @@ export const FairRentalValue: React.FC<FairRentalValueProps> = ({ schema }) => {
           sx={{
             width: '30%',
             color: 'text.secondary',
-            border:
-              touched.avgUtilityOne && errors.avgUtilityOne
-                ? '2px solid red'
-                : '',
           }}
         >
           <AutosaveCustomTextField

src/components/HrTools/MinisterHousingAllowance/Steps/StepThree/Calculation.test.tsx

@@ -130,44 +130,6 @@ describe('Calculation', () => {
     expect(getByRole('button', { name: /submit/i })).toBeInTheDocument();
   });
 
-  it('should show validation error when inputs are invalid', async () => {
-    const { findByText, getByRole, findByRole, getByText } = render(
-      <TestComponent
-        contextValue={{
-          ...defaultContext,
-          requestData: {
-            ...mockMHARequest,
-            id: 'request-id',
-          },
-        }}
-      />,
-    );
-
-    const row = await findByRole('row', {
-      name: /average monthly amount for unexpected/i,
-    });
-    const input = within(row).getByPlaceholderText(/\$0/i);
-
-    userEvent.type(input, '100');
-    expect(input).toHaveValue('100');
-    userEvent.clear(input);
-    expect(input).toHaveValue('');
-
-    input.focus();
-    userEvent.tab();
-
-    expect(await findByText('Required field.')).toBeInTheDocument();
-
-    const submitButton = getByRole('button', { name: /submit/i });
-
-    userEvent.click(submitButton);
-
-    expect(await findByRole('alert')).toBeInTheDocument();
-    expect(
-      getByText('Please enter a value for all required fields.'),
-    ).toBeInTheDocument();
-  });
-
   it('should show validation error when checkbox is not checked', async () => {
     const { findByText, findByRole, getByText } = render(
       <TestComponent contextValue={defaultContext} />,
@@ -230,34 +192,6 @@ describe('Calculation', () => {
     expect(await findByText('Invalid email address.')).toBeInTheDocument();
   });
 
-  it('shows validation error when input is 0', async () => {
-    const { findByRole, findByText } = render(
-      <TestComponent
-        contextValue={{
-          ...defaultContext,
-          requestData: {
-            ...mockMHARequest,
-            id: 'request-id',
-          },
-        }}
-      />,
-    );
-
-    const row = await findByRole('row', {
-      name: /average monthly amount for unexpected/i,
-    });
-    const input = within(row).getByPlaceholderText(/\$0/i);
-
-    userEvent.type(input, '0');
-
-    input.focus();
-    userEvent.tab();
-
-    expect(input).toHaveValue('$0.00');
-
-    expect(await findByText('Must be greater than $0.')).toBeInTheDocument();
-  });
-
   it('shows confirmation modal when submit is clicked', async () => {
     const { getByRole, getByText, findByRole } = render(
       <TestComponent
@@ -268,6 +202,7 @@ describe('Calculation', () => {
             id: 'request-id',
             requestAttributes: {
               ...mockMHARequest.requestAttributes,
+              rentOrOwn: MhaRentOrOwnEnum.Rent,
               iUnderstandMhaPolicy: false,
               phoneNumber: '1234567890',
               emailAddress: 'john.doe@cru.org',
@@ -296,16 +231,10 @@ describe('Calculation', () => {
     });
     const input4 = within(row4).getByPlaceholderText(/\$0/i);
 
-    const row5 = getByRole('row', {
-      name: /average monthly amount for unexpected/i,
-    });
-    const input5 = within(row5).getByPlaceholderText(/\$0/i);
-
     userEvent.type(input1, '1000');
     userEvent.type(input2, '200');
     userEvent.type(input3, '300');
     userEvent.type(input4, '400');
-    userEvent.type(input5, '500');
     const checkbox = getByRole('checkbox', {
       name: /i understand that my approved/i,
     });
@@ -337,7 +266,22 @@ describe('Calculation', () => {
     userEvent.click(confirmButton);
 
     await waitFor(() => {
-      expect(mutationSpy).toHaveBeenCalledTimes(6);
+      expect(mutationSpy).toHaveBeenCalledTimes(5); // 4 field updates + 1 submit
+    });
+
+    expect(updateMutation).toHaveBeenCalledWith({
+      variables: {
+        input: {
+          requestId: 'request-id',
+          requestAttributes: {
+            mortgageOrRentPayment: 1000,
+            furnitureCostsTwo: 200,
+            repairCosts: 300,
+            avgUtilityTwo: 400,
+            unexpectedExpenses: 0,
+          },
+        },
+      },
     });
 
     expect(mutationSpy).toHaveGraphqlOperation(

src/components/HrTools/MinisterHousingAllowance/Steps/StepThree/Calculation.tsx

@@ -63,26 +63,11 @@ export interface CalculationFormValues {
 
 const getValidationSchema = (rentOrOwn?: MhaRentOrOwnEnum) => {
   const baseSchema = {
-    mortgageOrRentPayment: yup
-      .number()
-      .moreThan(0, i18n.t('Must be greater than $0.'))
-      .required(i18n.t('Required field.')),
-    furnitureCostsTwo: yup
-      .number()
-      .moreThan(0, i18n.t('Must be greater than $0.'))
-      .required(i18n.t('Required field.')),
-    repairCosts: yup
-      .number()
-      .moreThan(0, i18n.t('Must be greater than $0.'))
-      .required(i18n.t('Required field.')),
-    avgUtilityTwo: yup
-      .number()
-      .moreThan(0, i18n.t('Must be greater than $0.'))
-      .required(i18n.t('Required field.')),
-    unexpectedExpenses: yup
-      .number()
-      .moreThan(0, i18n.t('Must be greater than $0.'))
-      .required(i18n.t('Required field.')),
+    mortgageOrRentPayment: yup.number().nullable(),
+    furnitureCostsTwo: yup.number().nullable(),
+    repairCosts: yup.number().nullable(),
+    avgUtilityTwo: yup.number().nullable(),
+    unexpectedExpenses: yup.number().nullable(),
     phoneNumber: phoneNumber(i18n.t).required(
       i18n.t('Phone Number is required.'),
     ),
@@ -99,18 +84,9 @@ const getValidationSchema = (rentOrOwn?: MhaRentOrOwnEnum) => {
   if (rentOrOwn === MhaRentOrOwnEnum.Own) {
     return yup.object({
       ...baseSchema,
-      rentalValue: yup
-        .number()
-        .moreThan(0, i18n.t('Must be greater than $0.'))
-        .required(i18n.t('Required field.')),
-      furnitureCostsOne: yup
-        .number()
-        .moreThan(0, i18n.t('Must be greater than $0.'))
-        .required(i18n.t('Required field.')),
-      avgUtilityOne: yup
-        .number()
-        .moreThan(0, i18n.t('Must be greater than $0.'))
-        .required(i18n.t('Required field.')),
+      rentalValue: yup.number().nullable(),
+      furnitureCostsOne: yup.number().nullable(),
+      avgUtilityOne: yup.number().nullable(),
     });
   }
 
@@ -154,6 +130,46 @@ export const Calculation: React.FC<CalculationProps> = ({
       },
     });
 
+  const transformNullValues = (values: CalculationFormValues) => {
+    const attributes = requestData?.requestAttributes;
+    const rent = attributes?.rentOrOwn === MhaRentOrOwnEnum.Rent;
+
+    if (rent) {
+      return updateMutation({
+        variables: {
+          input: {
+            requestId: requestData?.id ?? '',
+            requestAttributes: {
+              mortgageOrRentPayment: values.mortgageOrRentPayment ?? 0,
+              furnitureCostsTwo: values.furnitureCostsTwo ?? 0,
+              repairCosts: values.repairCosts ?? 0,
+              avgUtilityTwo: values.avgUtilityTwo ?? 0,
+              unexpectedExpenses: values.unexpectedExpenses ?? 0,
+            },
+          },
+        },
+      });
+    } else {
+      return updateMutation({
+        variables: {
+          input: {
+            requestId: requestData?.id ?? '',
+            requestAttributes: {
+              rentalValue: values.rentalValue ?? 0,
+              furnitureCostsOne: values.furnitureCostsOne ?? 0,
+              avgUtilityOne: values.avgUtilityOne ?? 0,
+              mortgageOrRentPayment: values.mortgageOrRentPayment ?? 0,
+              furnitureCostsTwo: values.furnitureCostsTwo ?? 0,
+              repairCosts: values.repairCosts ?? 0,
+              avgUtilityTwo: values.avgUtilityTwo ?? 0,
+              unexpectedExpenses: values.unexpectedExpenses ?? 0,
+            },
+          },
+        },
+      });
+    }
+  };
+
   const request = requestData ? requestData.requestAttributes : null;
 
   const actionRequired =
@@ -207,8 +223,10 @@ export const Calculation: React.FC<CalculationProps> = ({
       validationSchema={schema}
       validateOnChange
       validateOnBlur
-      onSubmit={() => {
+      onSubmit={async (values) => {
         try {
+          await transformNullValues(values);
+
           submitMutation({
             variables: { input: { requestId: requestData?.id ?? '' } },
           });