Revert "[Form Provider Refactor] IdologyQuestions"

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>
  );
 }