Skip to content

[Form Provider Refactor] ACHContractStep #30665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
cdOut wants to merge 17 commits into from
Closed

[Form Provider Refactor] ACHContractStep #30665

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fb3c0f6
Add FormProvider in ACHContractStep
cdOut Oct 31, 2023
517699f
Add FormProvider in IdentityForm
cdOut Oct 31, 2023
a763bca
fix prettier
cdOut Oct 31, 2023
08aa021
Merge branch 'main' into form-migration/ach-contract-step
cdOut Nov 7, 2023
2211d44
add input wrappers around checkboxes
cdOut Nov 8, 2023
b8e4aac
fix prettier
cdOut Nov 8, 2023
c4aa84c
Add FormProvider in required other steps
cdOut Nov 9, 2023
42f5e59
fix prettier
cdOut Nov 9, 2023
60a04c8
remove unused imports
cdOut Nov 9, 2023
c42ff32
pass inputValues through children in FormProvider
cdOut Nov 9, 2023
87ff9ba
fix CheckboxWithLabel typing errors
cdOut Nov 9, 2023
164d535
Merge branch 'main' into form-migration/ach-contract-step
cdOut Nov 14, 2023
cc98132
fix saving draft values
cdOut Nov 20, 2023
2c13adb
fix prettier
cdOut Nov 20, 2023
48b9287
merge main into form-migration/ach-contract-step
cdOut Nov 20, 2023
9f358c0
fix draft saving
cdOut Nov 20, 2023
16247e7
fix lint errors
cdOut Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/components/Form/FormProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ const propTypes = {
errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
}),

/** Contains draft values for each input in the form */
draftValues: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.objectOf(Date)])),

/** Should the button be enabled when offline */
enabledWhenOffline: PropTypes.bool,

Expand Down Expand Up @@ -77,6 +80,7 @@ const defaultProps = {
formState: {
isLoading: false,
},
draftValues: {},
enabledWhenOffline: false,
isSubmitActionDangerous: false,
scrollContextEnabled: false,
Expand All @@ -100,7 +104,7 @@ function getInitialValueByType(valueType) {
}
}

function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, onSubmit, ...rest}) {
function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, draftValues, onSubmit, ...rest}) {
const inputRefs = useRef({});
const touchedInputs = useRef({});
const [inputValues, setInputValues] = useState({});
Expand Down Expand Up @@ -208,7 +212,9 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC

if (!_.isUndefined(propsToParse.value)) {
inputValues[inputID] = propsToParse.value;
} else if (propsToParse.shouldUseDefaultValue) {
} else if (propsToParse.shouldSaveDraft && !_.isUndefined(draftValues[inputID]) && _.isUndefined(inputValues[inputID])) {
inputValues[inputID] = draftValues[inputID];
} else if (propsToParse.shouldUseDefaultValue && _.isUndefined(inputValues[inputID])) {
// We force the form to set the input value from the defaultValue props if there is a saved valid value
inputValues[inputID] = propsToParse.defaultValue;
} else if (_.isUndefined(inputValues[inputID])) {
Expand Down Expand Up @@ -300,7 +306,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
});

if (propsToParse.shouldSaveDraft) {
FormActions.setDraftValues(propsToParse.formID, {[inputKey]: value});
FormActions.setDraftValues(formID, {[inputKey]: value});
}

if (_.isFunction(propsToParse.onValueChange)) {
Expand All @@ -309,7 +315,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
},
};
},
[errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
[draftValues, formID, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
);
const value = useMemo(() => ({registerInput}), [registerInput]);

Expand Down Expand Up @@ -340,5 +346,8 @@ export default compose(
formState: {
key: (props) => props.formID,
},
draftValues: {
key: (props) => `${props.formID}Draft`,
},
}),
)(FormProvider);