Merge pull request Expensify#3582 from Expensify/nikki-requestorStep

[No QA] VBA Requestor Step (UI Only)
dklymenk · Jun 17, 2021 · 5394fc8 · 5394fc8
2 parents bb7d3d3 + 8be2c4a
commit 5394fc8
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 7 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -22,6 +22,8 @@ export default {
         not: 'Not',
         signIn: 'Sign In',
         continue: 'Continue',
+        firstName: 'First Name',
+        lastName: 'Last Name',
         phoneNumber: 'Phone Number',
         email: 'Email',
         and: 'and',
@@ -150,9 +152,7 @@ export default {
         profile: 'Profile',
         editPhoto: 'Edit Photo',
         tellUsAboutYourself: 'Tell us about yourself, we would love to get to know you!',
-        firstName: 'First Name',
         john: 'John',
-        lastName: 'Last Name',
         doe: 'Doe',
         preferredPronouns: 'Preferred Pronouns',
         selectYourPronouns: 'Select your pronouns',
@@ -352,6 +352,17 @@ export default {
         confirmCompanyIsNot: 'I confirm that this company is not on the',
         listOfRestrictedBusinesses: 'list of restricted businesses',
     },
+    requestorStep: {
+        headerTitle: 'Requestor Information',
+        financialRegulations: 'Financial regulation and bank rules require us to validate the identity of any individual setting up bank accounts on behalf of a company. ',
+        learnMore: 'Learn More',
+        isMyDataSafe: 'Is my data safe?',
+        onFidoConditions: 'By continuing with the request to add this bank account, you confirm that you have read, understand and accept ',
+        onFidoFacialScan: 'Onfido’s Facial Scan Policy and Release',
+        requestorAddressStreet: 'Your Personal Address',
+        ssnLast4: 'Last 4 Digits of SSN',
+        isAuthorized: 'I am authorized to use my company bank account for business spend',
+    },
     session: {
         offlineMessage: 'Looks like you\'re not connected to internet. Can you check your connection and try again?',
     },

diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -1,5 +1,103 @@
 import React from 'react';
-import {View} from 'react-native';
+import {View, ScrollView} from 'react-native';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import CONST from '../../CONST';
+import TextLink from '../../components/TextLink';
+import Navigation from '../../libs/Navigation/Navigation';
+import CheckboxWithLabel from '../../components/CheckboxWithLabel';
+import Text from '../../components/Text';
+import {goToWithdrawalAccountSetupStep} from '../../libs/actions/BankAccounts';
+import Button from '../../components/Button';
+import StatePicker from '../../components/StatePicker';
+import TextInputWithLabel from '../../components/TextInputWithLabel';
+import FixedFooter from '../../components/FixedFooter';
 
-const RequestorStep = () => <View />;
-export default RequestorStep;
+const RequestorStep = ({translate}) => (
+    <>
+        <HeaderWithCloseButton
+            title={translate('requestorStep.headerTitle')}
+            shouldShowBackButton
+            onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)}
+            onCloseButtonPress={Navigation.dismissModal}
+        />
+        <ScrollView style={[styles.flex1, styles.w100]}>
+            <View style={[styles.p4]}>
+                <View style={[styles.flexRow]}>
+                    <View style={[styles.flex2, styles.mr2]}>
+                        <TextInputWithLabel label={`${translate('common.firstName')}`} />
+                    </View>
+                    <View style={[styles.flex2]}>
+                        <TextInputWithLabel label={`${translate('common.lastName')}`} />
+                    </View>
+                </View>
+                <TextInputWithLabel label={`${translate('common.dob')}`} containerStyles={[styles.mt4]} />
+                <TextInputWithLabel label={`${translate('requestorStep.ssnLast4')}`} containerStyles={[styles.mt4]} />
+                <TextInputWithLabel label={translate('common.companyAddressNoPO')} containerStyles={[styles.mt4]} />
+                <View style={[styles.flexRow, styles.mt4]}>
+                    <View style={[styles.flex2, styles.mr2]}>
+                        <TextInputWithLabel label={translate('common.city')} />
+                    </View>
+                    <View style={[styles.flex1]}>
+                        <Text style={[styles.formLabel]}>{translate('common.state')}</Text>
+                        <StatePicker onChange={() => {}} />
+                    </View>
+                </View>
+                <TextInputWithLabel label={translate('common.zip')} containerStyles={[styles.mt4]} />
+                <CheckboxWithLabel
+                    isChecked={false}
+                    onPress={() => {}}
+                    LabelComponent={() => (
+                        <View style={[styles.flex1, styles.pr1]}>
+                            <Text>
+                                {translate('requestorStep.isAuthorized')}
+                            </Text>
+                        </View>
+                    )}
+                    style={[styles.mt4]}
+                />
+                <Text style={[styles.textMicroSupporting, styles.mt5]}>
+                    {translate('requestorStep.financialRegulations')}
+                    {/* eslint-disable-next-line max-len */}
+                    <TextLink href="https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account">
+                        {`${translate('requestorStep.learnMore')}`}
+                    </TextLink>
+                    {' | '}
+                    {/* eslint-disable-next-line max-len */}
+                    <TextLink href="https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information">
+                        {`${translate('requestorStep.isMyDataSafe')}`}
+                    </TextLink>
+                </Text>
+                <Text style={[styles.mt3, styles.textMicroSupporting]}>
+                    {translate('requestorStep.onFidoConditions')}
+                    <TextLink href="https://onfido.com/facial-scan-policy-and-release/">
+                        {`${translate('requestorStep.onFidoFacialScan')}`}
+                    </TextLink>
+                    {', '}
+                    <TextLink href="https://onfido.com/privacy/">
+                        {`${translate('common.privacyPolicy')}`}
+                    </TextLink>
+                    {` ${translate('common.and')} `}
+                    <TextLink href="https://onfido.com/terms-of-service/">
+                        {`${translate('common.termsOfService')}`}
+                    </TextLink>
+                </Text>
+            </View>
+        </ScrollView>
+        <FixedFooter style={[styles.mt5]}>
+            <Button
+                success
+                onPress={() => {
+                }}
+                style={[styles.w100]}
+                text={translate('common.saveAndContinue')}
+            />
+        </FixedFooter>
+    </>
+);
+
+RequestorStep.propTypes = withLocalizePropTypes;
+RequestorStep.displayName = 'RequestorStep';
+
+export default withLocalize(RequestorStep);
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
@@ -309,7 +309,7 @@ class ProfilePage extends Component {
                         <View style={[styles.flexRow, styles.mb6]}>
                             <View style={styles.flex1}>
                                 <Text style={[styles.mb1, styles.formLabel]}>
-                                    {this.props.translate('profilePage.firstName')}
+                                    {this.props.translate('common.firstName')}
                                 </Text>
                                 <TextInput
                                     style={styles.textInput}
@@ -321,7 +321,7 @@ class ProfilePage extends Component {
                             </View>
                             <View style={[styles.flex1, styles.ml2]}>
                                 <Text style={[styles.mb1, styles.formLabel]}>
-                                    {this.props.translate('profilePage.lastName')}
+                                    {this.props.translate('common.lastName')}
                                 </Text>
                                 <TextInput
                                     style={styles.textInput}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -455,6 +455,13 @@ const styles = {
         lineHeight: 16,
     },
 
+    textMicroSupporting: {
+        color: themeColors.textSupporting,
+        fontFamily: fontFamily.GTA,
+        fontSize: variables.fontSizeSmall,
+        lineHeight: 14,
+    },
+
     // Sidebar Styles
     sidebar: {
         backgroundColor: themeColors.sidebar,