[Form Provider Refactor] IdologyQuestions

src/components/FixedFooter.tsx

@@ -7,12 +7,12 @@ type FixedFooterProps = {
  children: ReactNode;
 
  /** Styles to be assigned to Container */
- style: Array<StyleProp<ViewStyle>>;
+ style?: StyleProp<ViewStyle>;
 };
 
 function FixedFooter({style = [], children}: FixedFooterProps) {
  const styles = useThemeStyles();
- return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, ...style]}>{children}</View>;
+ return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, style]}>{children}</View>;
 }
 
 FixedFooter.displayName = 'FixedFooter';

src/components/Form/FormProvider.js

@@ -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,
 
@@ -70,13 +73,16 @@ const propTypes = {
  shouldValidateOnBlur: PropTypes.bool,
 
  shouldValidateOnChange: PropTypes.bool,
+
+ customErrorMessage: PropTypes.string,
 };
 
 const defaultProps = {
  isSubmitButtonVisible: true,
  formState: {
  isLoading: false,
  },
+ draftValues: {},
  enabledWhenOffline: false,
  isSubmitActionDangerous: false,
  scrollContextEnabled: false,
@@ -85,6 +91,7 @@ const defaultProps = {
  validate: () => {},
  shouldValidateOnBlur: true,
  shouldValidateOnChange: true,
+ customErrorMessage: '',
 };
 
 function getInitialValueByType(valueType) {
@@ -100,7 +107,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({});
@@ -208,6 +215,8 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
 
  if (!_.isUndefined(propsToParse.value)) {
  inputValues[inputID] = propsToParse.value;
+ } else if(propsToParse.shouldSaveDraft && draftValues[inputID] !== undefined && inputValues[inputID] === undefined) {
+ inputValues[inputID] = draftValues[inputID];
  } else if (propsToParse.shouldUseDefaultValue) {
  // We force the form to set the input value from the defaultValue props if there is a saved valid value
  inputValues[inputID] = propsToParse.defaultValue;
@@ -302,7 +311,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
  },
  };
  },
- [errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
+ [draftValues, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
  );
  const value = useMemo(() => ({registerInput}), [registerInput]);
 
@@ -333,5 +342,8 @@ export default compose(
  formState: {
  key: (props) => props.formID,
  },
+ draftValues: {
+ key: (props) => `${props.formID}Draft`,
+ },
  }),
 )(FormProvider);

src/components/Form/FormWrapper.js

@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormSubmit from '@components/FormSubmit';
+import refPropTypes from '@components/refPropTypes';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -64,7 +65,9 @@ const propTypes = {
 
  errors: errorsPropType.isRequired,
 
- inputRefs: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])).isRequired,
+ inputRefs: PropTypes.objectOf(refPropTypes).isRequired,
+
+ customErrorMessage: PropTypes.string,
 };
 
 const defaultProps = {
@@ -78,6 +81,7 @@ const defaultProps = {
  footerContent: null,
  style: [],
  submitButtonStyles: [],
+ customErrorMessage: '',
 };
 
 function FormWrapper(props) {
@@ -96,13 +100,17 @@ function FormWrapper(props) {
  enabledWhenOffline,
  isSubmitActionDangerous,
  formID,
+ customErrorMessage,
  } = props;
  const formRef = useRef(null);
  const formContentRef = useRef(null);
  const errorMessage = useMemo(() => {
+ if (customErrorMessage) {
+ return customErrorMessage;
+ }
  const latestErrorMessage = ErrorUtils.getLatestErrorMessage(formState);
  return typeof latestErrorMessage === 'string' ? latestErrorMessage : '';
- }, [formState]);
+ }, [customErrorMessage, formState]);
 
  const scrollViewContent = useCallback(
  (safeAreaPaddingBottomStyle) => (

src/pages/EnablePayments/IdologyQuestions.js

@@ -1,11 +1,9 @@
 import PropTypes from 'prop-types';
-import React, {useRef, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import FixedFooter from '@components/FixedFooter';
-import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
-import FormScrollView from '@components/FormScrollView';
+import FormProvider from '@components/Form/FormProvider';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RadioButtons from '@components/RadioButtons';
 import Text from '@components/Text';
@@ -53,7 +51,6 @@ const defaultProps = {
 
 function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
  const styles = useThemeStyles();
- const formRef = useRef();
  const {translate} = useLocalize();
 
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
@@ -131,7 +128,17 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
  {translate('additionalDetailsStep.helpLink')}
  </TextLink>
  </View>
- <FormScrollView ref={formRef}>
+ <FormProvider
+ customErrorMessage={errorMessage}
+ submitButtonStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd]}
+ formID="idologyQuestionsForm"
+ onSubmit={submitAnswers}
+ scrollContextEnabled
+ style={[styles.mh0, styles.mv0, styles.mb0, styles.flex1]}
+ submitButtonText={translate('common.saveAndContinue')}
+ isLoading={walletAdditionalDetails.isLoading}
+ footerContent={<OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />}
+ >
  <View
  style={styles.m5}
  key={currentQuestion.type}
@@ -143,21 +150,7 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
  onPress={chooseAnswer}
  />
  </View>
- </FormScrollView>
- <FixedFooter>
- <FormAlertWithSubmitButton
- isAlertVisible={Boolean(errorMessage)}
- onSubmit={submitAnswers}
- onFixTheErrorsLinkPressed={() => {
- formRef.current.scrollTo({y: 0, animated: true});
- }}
- message={errorMessage}
- isLoading={walletAdditionalDetails.isLoading}
- buttonText={translate('common.saveAndContinue')}
- containerStyles={[styles.mh0, styles.mv0, styles.mb0]}
- />
- <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
- </FixedFooter>
+ </FormProvider>
  </View>
  );
 }