[Form Provider Refactor] IdologyQuestions

src/components/FixedFooter.tsx

@@ -7,11 +7,11 @@ type FixedFooterProps = {
  children: ReactNode;
 
  /** Styles to be assigned to Container */
- style: Array<StyleProp<ViewStyle>>;
+ style?: StyleProp<ViewStyle>;
 };
 
 function FixedFooter({style = [], children}: FixedFooterProps) {
- 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

@@ -70,6 +70,8 @@ const propTypes = {
  shouldValidateOnBlur: PropTypes.bool,
 
  shouldValidateOnChange: PropTypes.bool,
+
+ customErrorMessage: PropTypes.string,
 };
 
 const defaultProps = {
@@ -85,6 +87,7 @@ const defaultProps = {
  validate: () => {},
  shouldValidateOnBlur: true,
  shouldValidateOnChange: true,
+ customErrorMessage: '',
 };
 
 function getInitialValueByType(valueType) {

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) {
@@ -95,13 +99,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';
@@ -52,7 +50,6 @@ const defaultProps = {
 };
 
 function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
- const formRef = useRef();
  const {translate} = useLocalize();
 
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
@@ -130,7 +127,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}
@@ -142,21 +149,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>
  );
 }