Merge pull request #32138 from Expensify/revert-31401-form-migration/…

…idology-questions

(cherry picked from commit c02c760)

src/components/FixedFooter.tsx

@@ -7,12 +7,12 @@ type FixedFooterProps = {
     children: ReactNode;
 
     /** Styles to be assigned to Container */
-    style?: StyleProp<ViewStyle>;
+    style: Array<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/FormWrapper.js

@@ -5,7 +5,6 @@ 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';
@@ -65,7 +64,7 @@ const propTypes = {
 
     errors: errorsPropType.isRequired,
 
-    inputRefs: PropTypes.objectOf(refPropTypes).isRequired,
+    inputRefs: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])).isRequired,
 };
 
 const defaultProps = {

src/components/RadioButtons.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
@@ -20,7 +21,7 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
-        <>
+        <View>
             {items.map((item) => (
                 <RadioButtonWithLabel
                     key={item.value}
@@ -33,11 +34,10 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
                     label={item.label}
                 />
             ))}
-        </>
+        </View>
     );
 }
 
 RadioButtons.displayName = 'RadioButtons';
 
-export type {Choice};
 export default RadioButtons;

src/pages/EnablePayments/IdologyQuestions.js

@@ -1,14 +1,17 @@
 import PropTypes from 'prop-types';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
-import SingleChoiceQuestion from '@components/SingleChoiceQuestion';
+import FixedFooter from '@components/FixedFooter';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
+import FormScrollView from '@components/FormScrollView';
+import OfflineIndicator from '@components/OfflineIndicator';
+import RadioButtons from '@components/RadioButtons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -48,13 +51,15 @@ const defaultProps = {
     walletAdditionalDetails: {},
 };
 
-function IdologyQuestions({questions, idNumber}) {
+function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
     const styles = useThemeStyles();
+    const formRef = useRef();
     const {translate} = useLocalize();
 
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
     const [shouldHideSkipAnswer, setShouldHideSkipAnswer] = useState(false);
     const [userAnswers, setUserAnswers] = useState([]);
+    const [error, setError] = useState('');
 
     const currentQuestion = questions[currentQuestionIndex] || {};
     const possibleAnswers = _.filter(
@@ -69,6 +74,7 @@ function IdologyQuestions({questions, idNumber}) {
             };
         }),
     );
+    const errorMessage = ErrorUtils.getLatestErrorMessage(walletAdditionalDetails) || error;
 
     /**
      * Put question answer in the state.
@@ -80,44 +86,38 @@ function IdologyQuestions({questions, idNumber}) {
         tempAnswers[currentQuestionIndex] = {question: currentQuestion.type, answer};
 
         setUserAnswers(tempAnswers);
+        setError('');
     };
 
     /**
      * Show next question or send all answers for Idology verifications when we've answered enough
      */
     const submitAnswers = () => {
         if (!userAnswers[currentQuestionIndex]) {
-            return;
-        }
-        // Get the number of questions that were skipped by the user.
-        const skippedQuestionsCount = _.filter(userAnswers, (answer) => answer.answer === SKIP_QUESTION_TEXT).length;
-
-        // We have enough answers, let's call expectID KBA to verify them
-        if (userAnswers.length - skippedQuestionsCount >= questions.length - MAX_SKIP) {
-            const tempAnswers = _.map(userAnswers, _.clone);
-
-            // Auto skip any remaining questions
-            if (tempAnswers.length < questions.length) {
-                for (let i = tempAnswers.length; i < questions.length; i++) {
-                    tempAnswers[i] = {question: questions[i].type, answer: SKIP_QUESTION_TEXT};
-                }
-            }
-
-            BankAccounts.answerQuestionsForWallet(tempAnswers, idNumber);
-            setUserAnswers(tempAnswers);
+            setError(translate('additionalDetailsStep.selectAnswer'));
         } else {
-            // Else, show next question
-            setCurrentQuestionIndex(currentQuestionIndex + 1);
-            setShouldHideSkipAnswer(skippedQuestionsCount >= MAX_SKIP);
-        }
-    };
+            // Get the number of questions that were skipped by the user.
+            const skippedQuestionsCount = _.filter(userAnswers, (answer) => answer.answer === SKIP_QUESTION_TEXT).length;
+
+            // We have enough answers, let's call expectID KBA to verify them
+            if (userAnswers.length - skippedQuestionsCount >= questions.length - MAX_SKIP) {
+                const tempAnswers = _.map(userAnswers, _.clone);
+
+                // Auto skip any remaining questions
+                if (tempAnswers.length < questions.length) {
+                    for (let i = tempAnswers.length; i < questions.length; i++) {
+                        tempAnswers[i] = {question: questions[i].type, answer: SKIP_QUESTION_TEXT};
+                    }
+                }
 
-    const validate = (values) => {
-        const errors = {};
-        if (!values.answer) {
-            errors.answer = translate('additionalDetailsStep.selectAnswer');
+                BankAccounts.answerQuestionsForWallet(tempAnswers, idNumber);
+                setUserAnswers(tempAnswers);
+            } else {
+                // Else, show next question
+                setCurrentQuestionIndex(currentQuestionIndex + 1);
+                setShouldHideSkipAnswer(skippedQuestionsCount >= MAX_SKIP);
+            }
         }
-        return errors;
     };
 
     return (
@@ -131,23 +131,33 @@ function IdologyQuestions({questions, idNumber}) {
                     {translate('additionalDetailsStep.helpLink')}
                 </TextLink>
             </View>
-            <FormProvider
-                formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
-                onSubmit={submitAnswers}
-                validate={validate}
-                scrollContextEnabled
-                style={[styles.flexGrow1, styles.ph5]}
-                submitButtonText={translate('common.saveAndContinue')}
-            >
-                <InputWrapper
-                    InputComponent={SingleChoiceQuestion}
-                    inputID="answer"
-                    prompt={currentQuestion.prompt}
-                    possibleAnswers={possibleAnswers}
-                    currentQuestionIndex={currentQuestionIndex}
-                    onValueChange={chooseAnswer}
+            <FormScrollView ref={formRef}>
+                <View
+                    style={styles.m5}
+                    key={currentQuestion.type}
+                >
+                    <Text style={[styles.textStrong, styles.mb5]}>{currentQuestion.prompt}</Text>
+                    <RadioButtons
+                        items={possibleAnswers}
+                        key={currentQuestionIndex}
+                        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]}
                 />
-            </FormProvider>
+                <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
+            </FixedFooter>
         </View>
     );
 }