App: [HOLD for payment 2023-08-21] [$250] Migrate AdditionalDetailsStep.js to function component

GENERATED BY GPT : (Its the draft of functional component)

“In PR i will provide you complete code with full functionality”

`import _ from ‘underscore’; import React, { useState } from ‘react’; import PropTypes from ‘prop-types’; import { withOnyx } from ‘react-native-onyx’; import { View } from ‘react-native’; import moment from ‘moment/moment’; import { parsePhoneNumber } from ‘awesome-phonenumber’; import IdologyQuestions from ‘./IdologyQuestions’; import ScreenWrapper from ‘…/…/components/ScreenWrapper’; import HeaderWithBackButton from ‘…/…/components/HeaderWithBackButton’; import withLocalize, { withLocalizePropTypes } from ‘…/…/components/withLocalize’; import styles from ‘…/…/styles/styles’; import Text from ‘…/…/components/Text’; import CONST from ‘…/…/CONST’; import compose from ‘…/…/libs/compose’; import ONYXKEYS from ‘…/…/ONYXKEYS’; import TextLink from ‘…/…/components/TextLink’; import TextInput from ‘…/…/components/TextInput’; import * as Wallet from ‘…/…/libs/actions/Wallet’; import * as ValidationUtils from ‘…/…/libs/ValidationUtils’; import * as ErrorUtils from ‘…/…/libs/ErrorUtils’; import AddressForm from ‘…/ReimbursementAccount/AddressForm’; import DatePicker from ‘…/…/components/DatePicker’; import Form from ‘…/…/components/Form’; import withCurrentUserPersonalDetails, { withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps } from ‘…/…/components/withCurrentUserPersonalDetails’; import * as PersonalDetails from ‘…/…/libs/actions/PersonalDetails’; import OfflineIndicator from ‘…/…/components/OfflineIndicator’;

const propTypes = { …withLocalizePropTypes, …withCurrentUserPersonalDetailsPropTypes,

// Rest of the propTypes

};

const defaultProps = { walletAdditionalDetails: { errorFields: {}, isLoading: false, errors: {}, questions: [], idNumber: ‘’, errorCode: ‘’, }, …withCurrentUserPersonalDetailsDefaultProps, };

const INPUT_IDS = { // Rest of the INPUT_IDS };

const AdditionalDetailsStep = (props) => { const [minDate] = useState(moment().subtract(CONST.DATE_BIRTH.MAX_AGE, ‘Y’).toDate()); const [maxDate] = useState(moment().subtract(CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT, ‘Y’).toDate());

const errorTranslationKeys = {
    // Rest of the errorTranslationKeys
};

const fieldNameTranslationKeys = {
    // Rest of the fieldNameTranslationKeys
};

const validate = (values) => {
    // Rest of the validate function
};

const activateWallet = (values) => {
    // Rest of the activateWallet function
};

if (!_.isEmpty(props.walletAdditionalDetails.questions)) {
    return (
        <ScreenWrapper
            style={[styles.flex1]}
            keyboardAvoidingViewBehavior="height"
        >
            <HeaderWithBackButton
                title={props.translate('additionalDetailsStep.headerTitle')}
                onBackButtonPress={() => Wallet.setAdditionalDetailsQuestions(null)}
            />
            <IdologyQuestions
                questions={props.walletAdditionalDetails.questions}
                idNumber={props.walletAdditionalDetails.idNumber}
            />
        </ScreenWrapper>
    );
}
const shouldAskForFullSSN = props.walletAdditionalDetails.errorCode === CONST.WALLET.ERROR.SSN;

return (
    <>
        <HeaderWithBackButton title={props.translate('additionalDetailsStep.headerTitle')} />
        <View style={[styles.flex1]}>
            <View style={[styles.ph5]}>
                <Text style={styles.mb3}>{props.translate('additionalDetailsStep.helpText')}</Text>
                <TextLink
                    style={styles.mb3}
                    href="https://use.expensify.com/usa-patriot-act"
                >
                    {props.translate('additionalDetailsStep.helpLink')}
                </TextLink>
            </View>
            <Form
                formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
                validate={validate}
                onSubmit={activateWallet}
                scrollContextEnabled
                submitButtonText={props.translate('common.saveAndContinue')}
                style={[styles.mh5, styles.flexGrow1]}
            >
                <TextInput
                    inputID={INPUT_IDS.LEGAL_FIRST_NAME}
                    containerStyles={[styles.mt4]}
                    label={props.translate(fieldNameTranslationKeys.legalFirstName)}
                    accessibilityLabel={props.translate(fieldNameTranslationKeys.legalFirstName)}
                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                    defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(props.currentUserPersonalDetails).firstName}
                    shouldSaveDraft
                />
                {/* Rest of the JSX */}
                <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
            </Form>
        </View>
    </>
);

};

AdditionalDetailsStep.propTypes = propTypes; AdditionalDetailsStep.defaultProps = defaultProps;

export default compose( withLocalize, withCurrentUserPersonalDetails, withOnyx({ walletAdditionalDetails: { key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS, }, }), )(AdditionalDetailsStep); `

I think we’re all set here? Gonna close. Feel free to reopen if there’s anything left!

@allroundexperts Do you mean that Anshu should do this issue? I’m already assigned and working on a PR.

Let’s go with @AnshuAgarwal24 since they were the first to express there interest.

🎀 👀 🎀 C+ reviewed