MPDX-9334 - Save both average utility costs when one is modified

src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.test.tsx

@@ -21,9 +21,25 @@
 
 const defaultSchema = yup.object({
   mortgageOrRentPayment: yup.number().required('Mortgage Payment is required'),
+  avgUtilityOne: yup.number().nullable(),
+  avgUtilityTwo: yup.number().nullable(),
 });
 
-const TestComponent: React.FC = () => (
+interface TestComponentProps {
+  fieldName?: keyof import('../../Steps/StepThree/Calculation').CalculationFormValues &
+    string;
+  additionalSaveFields?: Array<
+    keyof import('../../Steps/StepThree/Calculation').CalculationFormValues &
+      string
+  >;
+  requestAttributes?: Record<string, unknown>;
+}
+
+const TestComponent: React.FC<TestComponentProps> = ({
+  fieldName = 'mortgageOrRentPayment',
+  additionalSaveFields,
+  requestAttributes = { mortgageOrRentPayment: null },
+}) => (
   <ThemeProvider theme={theme}>
     <SnackbarProvider>
       <GqlMockedProvider<{
@@ -38,14 +54,15 @@
               trackMutation,
               requestData: {
                 id: 'request-id',
-                requestAttributes: { mortgageOrRentPayment: null },
+                requestAttributes,
               },
             } as unknown as ContextType
           }
         >
           <Formik initialValues={{}} onSubmit={submit}>
             <AutosaveCustomTextField
-              fieldName="mortgageOrRentPayment"
+              fieldName={fieldName}
+              additionalSaveFields={additionalSaveFields}
               schema={defaultSchema}
             />
           </Formik>
@@ -111,4 +128,62 @@
 
     await waitFor(() => expect(input).toHaveValue(''));
   });
+
+  it('saves to additional fields alongside the primary field', async () => {
+    const { getByRole } = render(
+      <TestComponent
+        fieldName="avgUtilityOne"
+        additionalSaveFields={['avgUtilityTwo']}
+        requestAttributes={{ avgUtilityOne: null, avgUtilityTwo: null }}
+      />,
+    );
+
+    const input = getByRole('textbox');
+    userEvent.type(input, '200');
+    input.blur();
+
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation(
+        'UpdateMinistryHousingAllowanceRequest',
+        {
+          input: {
+            requestId: 'request-id',
+            requestAttributes: {
+              avgUtilityOne: 200,
+              avgUtilityTwo: 200,
+            },
+          },
+        },
+      ),
+    );
+  });
+
+  it('saves null to all fields when additional fields are specified and input is cleared', async () => {
+    const { getByRole } = render(
+      <TestComponent
+        fieldName="avgUtilityOne"
+        additionalSaveFields={['avgUtilityTwo']}
+        requestAttributes={{ avgUtilityOne: 100, avgUtilityTwo: 100 }}
+      />,
+    );
+
+    const input = getByRole('textbox');
+    userEvent.clear(input);
+    userEvent.tab();
+
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation(
+        'UpdateMinistryHousingAllowanceRequest',
+        {
+          input: {
+            requestId: 'request-id',
+            requestAttributes: {
+              avgUtilityOne: null,
+              avgUtilityTwo: null,
+            },
+          },
+        },
+      ),
+    );
+  });
 });

src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.tsx

@@ -1,6 +1,7 @@
 import { TextField, TextFieldProps } from '@mui/material';
 import { useFormikContext } from 'formik';
 import * as yup from 'yup';
+import { MinistryHousingAllowanceRequestAttributesInput } from 'pages/api/graphql-rest.page.generated';
 import { PageEnum } from 'src/components/Reports/Shared/CalculationReports/Shared/sharedTypes';
 import { useCustomAutoSave } from '../../../Shared/CalculationReports/CustomAutosave/useCustomAutosave';
 import { CalculationFormValues } from '../../Steps/StepThree/Calculation';
@@ -14,12 +15,13 @@ export interface AutosaveCustomTextFieldProps
   > {
   variant?: 'standard' | 'outlined';
   fieldName: keyof CalculationFormValues & string;
+  additionalSaveFields?: Array<keyof CalculationFormValues & string>;
   schema: yup.Schema;
 }
 
 export const AutosaveCustomTextField: React.FC<
   AutosaveCustomTextFieldProps
-> = ({ variant, fieldName, schema, ...props }) => {
+> = ({ variant, fieldName, additionalSaveFields, schema, ...props }) => {
   const { pageType, requestData } = useMinisterHousingAllowance();
   const request = requestData?.requestAttributes;
 
@@ -34,7 +36,14 @@ export const AutosaveCustomTextField: React.FC<
 
   const fieldProps = useCustomAutoSave({
     value: request?.[fieldName],
-    saveValue: (value) => saveField({ [fieldName]: value }),
+    saveValue: (value) => {
+      const attributes: Partial<MinistryHousingAllowanceRequestAttributesInput> =
+        { [fieldName]: value };
+      additionalSaveFields?.forEach((field) => {
+        attributes[field] = value;
+      });
+      return saveField(attributes);
+    },
     fieldName,
     schema,
     setFieldValue,

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

@@ -153,6 +153,7 @@
             placeholder={currencyFormat(0, currency, locale)}
             InputProps={{ disableUnderline: true, inputMode: 'decimal' }}
             fieldName="avgUtilityTwo"
+            additionalSaveFields={['avgUtilityOne']}
             schema={schema}
           />
         </TableCell>

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

@@ -123,6 +123,7 @@
             placeholder={currencyFormat(0, currency, locale)}
             InputProps={{ disableUnderline: true, inputMode: 'decimal' }}
             fieldName="avgUtilityOne"
+            additionalSaveFields={['avgUtilityTwo']}
             schema={schema}
           />
         </TableCell>