diff --git a/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.test.tsx b/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.test.tsx index 3b2a0da0d1..122f5cf538 100644 --- a/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.test.tsx +++ b/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.test.tsx @@ -21,9 +21,25 @@ const trackMutation = jest.fn(); 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; +} + +const TestComponent: React.FC = ({ + fieldName = 'mortgageOrRentPayment', + additionalSaveFields, + requestAttributes = { mortgageOrRentPayment: null }, +}) => ( ( trackMutation, requestData: { id: 'request-id', - requestAttributes: { mortgageOrRentPayment: null }, + requestAttributes, }, } as unknown as ContextType } > @@ -111,4 +128,62 @@ describe('AutosaveCustomTextField', () => { await waitFor(() => expect(input).toHaveValue('')); }); + + it('saves to additional fields alongside the primary field', async () => { + const { getByRole } = render( + , + ); + + 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( + , + ); + + const input = getByRole('textbox'); + userEvent.clear(input); + userEvent.tab(); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation( + 'UpdateMinistryHousingAllowanceRequest', + { + input: { + requestId: 'request-id', + requestAttributes: { + avgUtilityOne: null, + avgUtilityTwo: null, + }, + }, + }, + ), + ); + }); }); diff --git a/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.tsx b/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.tsx index 8a6f66f3c9..e7afdb957d 100644 --- a/src/components/Reports/MinisterHousingAllowance/Shared/AutoSave/AutosaveCustomTextField.tsx +++ b/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; 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 = + { [fieldName]: value }; + additionalSaveFields?.forEach((field) => { + attributes[field] = value; + }); + return saveField(attributes); + }, fieldName, schema, setFieldValue, diff --git a/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/CostOfHome.tsx b/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/CostOfHome.tsx index e337082bfb..ddf50f660e 100644 --- a/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/CostOfHome.tsx +++ b/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/CostOfHome.tsx @@ -153,6 +153,7 @@ export const CostOfHome: React.FC = ({ placeholder={currencyFormat(0, currency, locale)} InputProps={{ disableUnderline: true, inputMode: 'decimal' }} fieldName="avgUtilityTwo" + additionalSaveFields={['avgUtilityOne']} schema={schema} /> diff --git a/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/FairRentalValue.tsx b/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/FairRentalValue.tsx index b22f4e7f16..73a464964f 100644 --- a/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/FairRentalValue.tsx +++ b/src/components/Reports/MinisterHousingAllowance/Steps/StepThree/CalcComponents/FairRentalValue.tsx @@ -123,6 +123,7 @@ export const FairRentalValue: React.FC = ({ schema }) => { placeholder={currencyFormat(0, currency, locale)} InputProps={{ disableUnderline: true, inputMode: 'decimal' }} fieldName="avgUtilityOne" + additionalSaveFields={['avgUtilityTwo']} schema={schema} />