Skip to content

Commit

Permalink
Merge pull request #3689 from Expensify/nikki-requestor-api
Browse files Browse the repository at this point in the history 
Hook Request Step up to setupWithdrawalAccount
  • Loading branch information
@marcaaron
marcaaron authored Jun 22, 2021
2 parents 6fa4c8a + 31ef89e commit 2c831b0
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 90 deletions.
4 changes: 2 additions & 2 deletions src/languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,9 +375,9 @@ export default {
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',
isControllingOfficer: 'I am authorized to use my company bank account for business spend',
isControllingOfficerError: 'You must be a controlling officer with authorization to operate the business bank account.',
},
validationStep: {
headerTitle: 'Validate',
Expand Down
11 changes: 11 additions & 0 deletions src/languages/es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,17 @@ export default {
descriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación. Ejemplo: 1.51',
verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.',
},
requestorStep: {
headerTitle: 'Información del solicitante',
financialRegulations: 'Las leyes fiscales y el reglamento bancario nos obliga a verificar la identidad de todo individuo que desee añadir una cuenta bancaria representando a una compañía. ',
learnMore: 'Más información',
isMyDataSafe: '¿Están seguros mis datos?',
onFidoConditions: 'Al continuar con la solicitud de añadir esta cuenta bancaria, confirma que ha leído, entiende y acepta ',
facialScan: 'la política de reconocimiento facial y la exención de Onfido',
ssnLast4: 'Últimos 4 dígitos de su SSN',
isControllingOfficer: 'Estoy autorizado a utilizar la cuenta bancaria de mi compañía para gastos de empresa',
isControllingOfficerError: 'Debe ser un oficial controlador con autorización para operar la cuenta bancaria de la compañía',
},
requestCallPage: {
requestACall: 'Llámame por teléfono',
description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte.',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ReimbursementAccount/ReimbursementAccountPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ class ReimbursementAccountPage extends React.Component {
<CompanyStep achData={achData} />
)}
{currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
<RequestorStep />
<RequestorStep achData={achData} />
)}
{currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
<BeneficialOwnersStep companyName={achData.companyName} />
Expand Down
227 changes: 140 additions & 87 deletions src/pages/ReimbursementAccount/RequestorStep.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import lodashGet from 'lodash/get';
import {View, ScrollView} from 'react-native';
import styles from '../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
Expand All @@ -8,115 +9,167 @@ 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 {goToWithdrawalAccountSetupStep, setupWithdrawalAccount} from '../../libs/actions/BankAccounts';
import Button from '../../components/Button';
import FixedFooter from '../../components/FixedFooter';
import IdentityForm from './IdentityForm';
import Growl from '../../libs/Growl';
import Onfido from '../../components/Onfido';

class RequestorStep extends React.Component {
constructor(props) {
super(props);

this.submit = this.submit.bind(this);

this.state = {
firstName: '',
lastName: '',
street: '',
city: '',
state: '',
zipCode: '',
dob: '',
ssnLast4: '',
firstName: lodashGet(props, ['achData', 'firstName'], ''),
lastName: lodashGet(props, ['achData', 'lastName'], ''),
requestorAddressStreet: lodashGet(props, ['achData', 'requestorAddressStreet'], ''),
requestorAddressCity: lodashGet(props, ['achData', 'requestorAddressCity'], ''),
requestorAddressState: lodashGet(props, ['achData', 'requestorAddressState'], ''),
requestorAddressZipCode: lodashGet(props, ['achData', 'requestorAddressZipCode'], ''),
dob: lodashGet(props, ['achData', 'dob'], ''),
ssnLast4: lodashGet(props, ['achData', 'ssnLast4'], ''),
isControllingOfficer: lodashGet(props, ['achData', 'isControllingOfficer'], false),
onfidoData: lodashGet(props, ['achData', 'onfidoData'], ''),
isOnfidoSetupComplete: lodashGet(props, ['achData', 'isOnfidoSetupComplete'], false),
};
}

onFieldChange(field, value) {
const renamedFields = {
street: 'requestorAddressStreet',
city: 'requestorAddressCity',
state: 'requestorAddressState',
zipCode: 'requestorAddressZipCode',
};
const fieldName = lodashGet(renamedFields, field, field);
this.setState({[fieldName]: value});
}

validate() {
if (!this.state.isControllingOfficer) {
Growl.show(this.props.translate('requestorStep.isControllingOfficerError'), CONST.GROWL.ERROR);
return false;
}

return true;
}

submit() {
if (!this.validate()) {
return;
}
setupWithdrawalAccount({...this.state});
}

render() {
return (
<>
<HeaderWithCloseButton
title={this.props.translate('requestorStep.headerTitle')}
shouldShowBackButton
onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)}
onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY_STEP)}
onCloseButtonPress={Navigation.dismissModal}
/>
<ScrollView style={[styles.flex1, styles.w100]}>
<View style={[styles.p4]}>
<IdentityForm
onFieldChange={(field, value) => this.setState({[field]: value})}
values={{
firstName: this.state.firstName,
lastName: this.state.lastName,
street: this.state.street,
city: this.state.city,
state: this.state.state,
zipCode: this.state.zipCode,
dob: this.state.dob,
ssnLast4: this.state.ssnLast4,
}}
/>
<CheckboxWithLabel
isChecked={false}
onPress={() => {}}
LabelComponent={() => (
<View style={[styles.flex1, styles.pr1]}>
<Text>
{this.props.translate('requestorStep.isAuthorized')}
</Text>
</View>
)}
style={[styles.mt4]}
/>
<Text style={[styles.textMicroSupporting, styles.mt5]}>
{this.props.translate('requestorStep.financialRegulations')}
<TextLink
style={styles.textMicro}
// eslint-disable-next-line max-len
href="https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account"
>
{`${this.props.translate('requestorStep.learnMore')}`}
</TextLink>
{' | '}
<TextLink
style={styles.textMicro}
// eslint-disable-next-line max-len
href="https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information"
>
{`${this.props.translate('requestorStep.isMyDataSafe')}`}
</TextLink>
</Text>
<Text style={[styles.mt3, styles.textMicroSupporting]}>
{this.props.translate('requestorStep.onFidoConditions')}
<TextLink
style={styles.textMicro}
href="https://onfido.com/facial-scan-policy-and-release/"
>
{`${this.props.translate('requestorStep.onFidoFacialScan')}`}
</TextLink>
{', '}
<TextLink
style={styles.textMicro}
href="https://onfido.com/privacy/"
>
{`${this.props.translate('common.privacyPolicy')}`}
</TextLink>
{` ${this.props.translate('common.and')} `}
<TextLink
style={styles.textMicro}
href="https://onfido.com/terms-of-service/"
>
{`${this.props.translate('common.termsOfService')}`}
</TextLink>
</Text>
</View>
</ScrollView>
<FixedFooter style={[styles.mt5]}>
<Button
success
onPress={() => {
{this.props.achData.useOnfido && this.props.achData.sdkToken ? (
<Onfido
sdkToken={this.props.achData.sdkToken}
onUserExit={() => {
goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
}}
onSuccess={(onfidoData) => {
this.setState({
onfidoData,
isOnfidoSetupComplete: true,
}, this.submit);
}}
style={[styles.w100]}
text={this.props.translate('common.saveAndContinue')}
/>
</FixedFooter>
) : (
<>
<ScrollView style={[styles.flex1, styles.w100]}>
<View style={[styles.p4]}>
<IdentityForm
onFieldChange={(field, value) => this.onFieldChange(field, value)}
values={{
firstName: this.state.firstName,
lastName: this.state.lastName,
street: this.state.requestorAddressStreet,
city: this.state.requestorAddressCity,
state: this.state.requestorAddressCity,
zipCode: this.state.requestorAddressZipCode,
dob: this.state.dob,
ssnLast4: this.state.ssnLast4,
}}
/>
<CheckboxWithLabel
isChecked={this.state.isControllingOfficer}
onPress={() => this.setState(prevState => ({
isControllingOfficer: !prevState.isControllingOfficer,
}))}
LabelComponent={() => (
<View style={[styles.flex1, styles.pr1]}>
<Text>
{this.props.translate('requestorStep.isControllingOfficer')}
</Text>
</View>
)}
style={[styles.mt4]}
/>
<Text style={[styles.textMicroSupporting, styles.mt5]}>
{this.props.translate('requestorStep.financialRegulations')}
<TextLink
style={styles.textMicro}
// eslint-disable-next-line max-len
href="https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account"
>
{`${this.props.translate('requestorStep.learnMore')}`}
</TextLink>
{' | '}
<TextLink
style={styles.textMicro}
// eslint-disable-next-line max-len
href="https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information"
>
{`${this.props.translate('requestorStep.isMyDataSafe')}`}
</TextLink>
</Text>
<Text style={[styles.mt3, styles.textMicroSupporting]}>
{this.props.translate('requestorStep.onFidoConditions')}
<TextLink
style={styles.textMicro}
href="https://onfido.com/facial-scan-policy-and-release/"
>
{`${this.props.translate('requestorStep.onFidoFacialScan')}`}
</TextLink>
{', '}
<TextLink
style={styles.textMicro}
href="https://onfido.com/privacy/"
>
{`${this.props.translate('common.privacyPolicy')}`}
</TextLink>
{` ${this.props.translate('common.and')} `}
<TextLink
style={styles.textMicro}
href="https://onfido.com/terms-of-service/"
>
{`${this.props.translate('common.termsOfService')}`}
</TextLink>
</Text>
</View>
</ScrollView>
<FixedFooter style={[styles.mt5]}>
<Button
success
onPress={this.submit}
style={[styles.w100]}
text={this.props.translate('common.saveAndContinue')}
/>
</FixedFooter>
</>
)}
</>
);
}
Expand Down

0 comments on commit 2c831b0

Please sign in to comment.