Fix/44462 show idology questions

src/components/SingleChoiceQuestion.tsx

@@ -22,7 +22,7 @@ function SingleChoiceQuestion({prompt, errorText, possibleAnswers, currentQuesti
         <>
             <Text
                 ref={ref}
-                style={[styles.textStrong, styles.mb5]}
+                style={[styles.mt3]}
             >
                 {prompt}
             </Text>

src/pages/EnablePayments/EnablePayments.tsx

@@ -40,7 +40,7 @@ function EnablePaymentsPage() {
         return (
             <>
                 <HeaderWithBackButton
-                    title={translate('additionalDetailsStep.headerTitle')}
+                    title={translate('personalInfoStep.personalInfo')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
                 />
                 <FailedKYC />

src/pages/EnablePayments/IdologyQuestions.tsx

@@ -3,11 +3,14 @@ import {View} from 'react-native';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
 import type {Choice} from '@components/RadioButtons';
 import SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
@@ -34,6 +37,7 @@ type Answer = {
 
 function IdologyQuestions({questions, idNumber}: IdologyQuestionsProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
 
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
@@ -103,13 +107,7 @@ function IdologyQuestions({questions, idNumber}: IdologyQuestionsProps) {
     return (
         <View style={styles.flex1}>
             <View style={styles.ph5}>
-                <Text style={styles.mb3}>{translate('additionalDetailsStep.helpTextIdologyQuestions')}</Text>
-                <TextLink
-                    style={styles.mb3}
-                    href={CONST.HELP_LINK_URL}
-                >
-                    {translate('additionalDetailsStep.helpLink')}
-                </TextLink>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('additionalDetailsStep.helpTextIdologyQuestions')}</Text>
             </View>
             <FormProvider
                 formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
@@ -121,17 +119,33 @@ function IdologyQuestions({questions, idNumber}: IdologyQuestionsProps) {
                 submitButtonText={translate('common.saveAndContinue')}
                 shouldHideFixErrorsAlert
             >
-                <InputWrapper
-                    InputComponent={SingleChoiceQuestion}
-                    inputID="answer"
-                    prompt={currentQuestion.prompt}
-                    possibleAnswers={possibleAnswers}
-                    currentQuestionIndex={currentQuestionIndex}
-                    onValueChange={(value) => {
-                        chooseAnswer(String(value));
-                    }}
-                    onInputChange={() => {}}
-                />
+                <>
+                    <InputWrapper
+                        InputComponent={SingleChoiceQuestion}
+                        inputID="answer"
+                        prompt={currentQuestion.prompt}
+                        possibleAnswers={possibleAnswers}
+                        currentQuestionIndex={currentQuestionIndex}
+                        onValueChange={(value) => {
+                            chooseAnswer(String(value));
+                        }}
+                        onInputChange={() => {}}
+                    />
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt6]}>
+                        <Icon
+                            src={Expensicons.QuestionMark}
+                            width={12}
+                            height={12}
+                            fill={theme.icon}
+                        />
+                        <TextLink
+                            style={[styles.textMicro, styles.ml2]}
+                            href={CONST.HELP_LINK_URL}
+                        >
+                            {translate('additionalDetailsStep.helpLink')}
+                        </TextLink>
+                    </View>
+                </>
             </FormProvider>
         </View>
     );

src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx

@@ -10,6 +10,7 @@ import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
+import IdologyQuestions from '@pages/EnablePayments/IdologyQuestions';
 import getInitialSubstepForPersonalInfo from '@pages/EnablePayments/utils/getInitialSubstepForPersonalInfo';
 import getSubstepValues from '@pages/EnablePayments/utils/getSubstepValues';
 import * as Wallet from '@userActions/Wallet';
@@ -41,6 +42,7 @@ const bodyContent: Array<React.ComponentType<SubStepProps>> = [FullName, DateOfB
 function PersonalInfoPage({walletAdditionalDetails, walletAdditionalDetailsDraft}: PersonalInfoPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const showIdologyQuestions = walletAdditionalDetails?.questions && walletAdditionalDetails?.questions.length > 0;
 
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, walletAdditionalDetailsDraft, walletAdditionalDetails), [walletAdditionalDetails, walletAdditionalDetailsDraft]);
     const submit = () => {
@@ -84,6 +86,10 @@ function PersonalInfoPage({walletAdditionalDetails, walletAdditionalDetailsDraft
             Wallet.updateCurrentStep(CONST.WALLET.STEP.ADD_BANK_ACCOUNT);
             return;
         }
+        if (showIdologyQuestions) {
+            Wallet.setAdditionalDetailsQuestions(null, '');
+            return;
+        }
         prevScreen();
     };
 
@@ -102,11 +108,18 @@ function PersonalInfoPage({walletAdditionalDetails, walletAdditionalDetailsDraft
                     stepNames={CONST.WALLET.STEP_NAMES}
                 />
             </View>
-            <SubStep
-                isEditing={isEditing}
-                onNext={nextScreen}
-                onMove={moveTo}
-            />
+            {showIdologyQuestions ? (
+                <IdologyQuestions
+                    questions={walletAdditionalDetails?.questions ?? []}
+                    idNumber={walletAdditionalDetails?.idNumber ?? ''}
+                />
+            ) : (
+                <SubStep
+                    isEditing={isEditing}
+                    onNext={nextScreen}
+                    onMove={moveTo}
+                />
+            )}
         </ScreenWrapper>
     );
 }