From 33b4a16cdad9f553d595e94c790de0ab0efdc545 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 14 Jun 2021 12:53:38 -0700 Subject: [PATCH 1/4] base level view for RequestorStep --- src/CONST.js | 13 ++ src/languages/en.js | 14 ++ .../ReimbursementAccountPage.js | 2 +- .../ReimbursementAccount/RequestorStep.js | 175 +++++++++++++++++- 4 files changed, 200 insertions(+), 4 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 0d090cd7fe61..bedf70640170 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -47,6 +47,19 @@ const CONST = { IBAN: /^[A-Za-z0-9]{2,30}$/, SWIFT_BIC: /^[A-Za-z0-9]{8,11}$/, }, + STATES: [ + 'AK', 'AL', 'AR', 'AZ', 'CA', + 'CO', 'CT', 'DC', 'DE', 'FL', + 'GA', 'GU', 'HI', 'IA', 'ID', + 'IL', 'IN', 'KS', 'KY', 'LA', + 'MA', 'MD', 'ME', 'MI', 'MN', + 'MO', 'MS', 'MT', 'NC', 'ND', + 'NE', 'NH', 'NJ', 'NM', 'NV', + 'NY', 'OH', 'OK', 'OR', 'PA', + 'PR', 'RI', 'SC', 'SD', 'TN', + 'TX', 'UT', 'VA', 'VI', 'VT', + 'WA', 'WI', 'WV', 'WY', + ], }, BETAS: { ALL: 'all', diff --git a/src/languages/en.js b/src/languages/en.js index fea831a19833..4a314d497708 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -275,6 +275,20 @@ export default { iAcceptThe: 'I accept the ', hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.', hasBeenThrottledError: ({fromNow}) => `For security reasons, we're taking a break from bank account setup so you can double-check your company information. Please try again ${fromNow}. Sorry!`, + 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', + personalAddress: 'Your Personal Address (PO Boxes not allowed)', + street: 'Street', + city: 'City', + state: 'State', + zipCode: 'Zip Code', + dob: 'Date of Birth', + ssn: 'SSN (Last 4)', + ssnPlaceholder: 'Last 4 Digits', + isAuthorized: 'I am authorized to use my company bank account for business spend', }, addPersonalBankAccountPage: { enterPassword: 'Enter password', diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 4435525e47fd..60eb2c7f8d25 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -102,7 +102,7 @@ class ReimbursementAccountPage extends React.Component { // We grab the currentStep from the achData to determine which view to display. The SetupWithdrawalAccount flow // allows us to continue the flow from various points depending on where the user left off. - const currentStep = this.props.reimbursementAccount.achData.currentStep; + const currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR; //this.props.reimbursementAccount.achData.currentStep; return ( {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && ( diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 350e3b58471c..dc1b508e9feb 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -1,5 +1,174 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, TextInput} 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 Icon from '../../components/Icon'; +import TextInputWithLabel from '../../components/TextInputWithLabel'; +import CheckboxWithLabel from '../../components/CheckboxWithLabel'; +import Text from '../../components/Text'; +import Picker from '../../components/Picker'; +import {DownArrow} from '../../components/Icon/Expensicons'; +import BankAccount from '../../libs/models/BankAccount'; -const RequestorStep = () => ; -export default RequestorStep; +const propTypes = { + ...withLocalizePropTypes, +}; + +class RequestorStep extends React.Component { + constructor(props) { + super(props); + + this.toggleAuthorization = this.toggleAuthorization.bind(this); + + this.state = { + firstName: '', + lastName: '', + street: '', + city: '', + state: '', + zipCode: '', + dob: '', + ssn: '', + }; + } + + toggleAuthorization() { + this.setState(prevState => ({ + isAuthorized: !prevState.isAuthorized, + })); + } + + render() { + return ( + + BankAccount.goToWithdrawalStepID(CONST.BANK_ACCOUNT.STEP.REQUESTOR)} + onCloseButtonPress={Navigation.dismissModal} + /> + + + {this.props.translate('bankAccount.financialRegulations')} + + {`${this.props.translate('bankAccount.learnMore')}`} + + {' | '} + + {`${this.props.translate('bankAccount.isMyDataSafe')}`} + + + + {this.props.translate('bankAccount.onFidoConditions')} + + {`${this.props.translate('bankAccount.onFidoFacialScan')}`} + + {', '} + + {`${this.props.translate('common.privacyPolicy')}`} + + {` ${this.props.translate('common.and')} `} + + {`${this.props.translate('common.termsOfService')}`} + + + + + this.setState({firstName})} + /> + + + this.setState({lastName})} + /> + + + + this.setState({street})} + /> + this.setState({city})} + /> + + + this.setState({state})} + items={CONST.BANK_ACCOUNT.STATES.map(state => ({value: state, label: state}))} + placeholder={{ + value: '', + label: this.props.translate('bankAccount.state'), + }} + value={this.state.state} + icon={() => } + /> + + + this.setState({zipCode})} + /> + + + + + this.setState({dob})} + /> + + + this.setState({ssn})} + /> + + ( + + + {this.props.translate('bankAccount.isAuthorized')} + + + )} + /> + + + ); + } +} + +RequestorStep.propTypes = propTypes; + +export default withLocalize(RequestorStep); From 8da5ea0cc2838745aa9ddbfdff40882746d00fcd Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 14 Jun 2021 17:25:59 -0700 Subject: [PATCH 2/4] stylistic update for the requestor step --- src/languages/en.js | 14 +- .../ReimbursementAccountPage.js | 2 +- .../ReimbursementAccount/RequestorStep.js | 173 ++++++++++-------- 3 files changed, 101 insertions(+), 88 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 4a314d497708..ba4b81ba64e1 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -280,14 +280,12 @@ 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', - personalAddress: 'Your Personal Address (PO Boxes not allowed)', - street: 'Street', - city: 'City', - state: 'State', - zipCode: 'Zip Code', - dob: 'Date of Birth', - ssn: 'SSN (Last 4)', - ssnPlaceholder: 'Last 4 Digits', + requestorAddressStreet: 'Your Personal Address', + requestorAddressCity: 'City', + requestorAddressState: 'State', + requestorAddressZipCode: 'Zip Code', + dob: 'Date of Birth (YYYY-MM-DD)', + ssnLast4: 'Last 4 Digits of SSN', isAuthorized: 'I am authorized to use my company bank account for business spend', }, addPersonalBankAccountPage: { diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 60eb2c7f8d25..8c2facaf4d9a 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -102,7 +102,7 @@ class ReimbursementAccountPage extends React.Component { // We grab the currentStep from the achData to determine which view to display. The SetupWithdrawalAccount flow // allows us to continue the flow from various points depending on where the user left off. - const currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR; //this.props.reimbursementAccount.achData.currentStep; + const currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR; // this.props.reimbursementAccount.achData.currentStep; return ( {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && ( diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index dc1b508e9feb..e18c494d4e7a 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -1,4 +1,5 @@ import React from 'react'; +import _ from 'underscore'; import {View, TextInput} from 'react-native'; import styles from '../../styles/styles'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; @@ -7,12 +8,12 @@ import CONST from '../../CONST'; import TextLink from '../../components/TextLink'; import Navigation from '../../libs/Navigation/Navigation'; import Icon from '../../components/Icon'; -import TextInputWithLabel from '../../components/TextInputWithLabel'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import Text from '../../components/Text'; import Picker from '../../components/Picker'; import {DownArrow} from '../../components/Icon/Expensicons'; import BankAccount from '../../libs/models/BankAccount'; +import Button from '../../components/Button'; const propTypes = { ...withLocalizePropTypes, @@ -27,12 +28,13 @@ class RequestorStep extends React.Component { this.state = { firstName: '', lastName: '', - street: '', - city: '', - state: '', - zipCode: '', + requestorAddressStreet: '', + requestorAddressCity: '', + requestorAddressState: '', + requestorAddressZipCode: '', dob: '', - ssn: '', + ssnLast4: '', + isAuthorized: false, }; } @@ -42,7 +44,19 @@ class RequestorStep extends React.Component { })); } + + /** + * Submits the form for the Requestor Step + */ + submit() { + if (!this.state.isAuthorized) { + console.error('Must be authorized for company spend before proceeding'); + } + } + render() { + // Whether or not the form has been completely filled out + const unfilledFormValues = _.filter(this.state, value => value === '' || value === false); return ( BankAccount.goToWithdrawalStepID(CONST.BANK_ACCOUNT.STEP.REQUESTOR)} onCloseButtonPress={Navigation.dismissModal} /> - - - {this.props.translate('bankAccount.financialRegulations')} - - {`${this.props.translate('bankAccount.learnMore')}`} - - {' | '} - - {`${this.props.translate('bankAccount.isMyDataSafe')}`} - - - - {this.props.translate('bankAccount.onFidoConditions')} - - {`${this.props.translate('bankAccount.onFidoFacialScan')}`} - - {', '} - - {`${this.props.translate('common.privacyPolicy')}`} - - {` ${this.props.translate('common.and')} `} - - {`${this.props.translate('common.termsOfService')}`} - - - + + - this.setState({firstName})} /> - this.setState({lastName})} /> - this.setState({street})} + this.setState({dob})} + /> + this.setState({ssnLast4})} /> this.setState({city})} + style={[styles.textInput, styles.mb4]} + placeholder={this.props.translate('bankAccount.requestorAddressStreet')} + value={this.state.requestorAddressStreet} + onChangeText={requestorAddressStreet => this.setState({requestorAddressStreet})} /> - + + this.setState({requestorAddressCity})} + /> + + this.setState({state})} + onChange={requestorAddressState => this.setState({requestorAddressState})} items={CONST.BANK_ACCOUNT.STATES.map(state => ({value: state, label: state}))} placeholder={{ value: '', - label: this.props.translate('bankAccount.state'), + label: this.props.translate('bankAccount.requestorAddressState'), }} - value={this.state.state} + value={this.state.requestorAddressState} icon={() => } /> - - this.setState({zipCode})} - /> - - - - this.setState({dob})} - /> - - - this.setState({ssn})} + this.setState({requestorAddressZipCode})} /> )} /> + + {this.props.translate('bankAccount.financialRegulations')} + {/* eslint-disable-next-line max-len */} + + {`${this.props.translate('bankAccount.learnMore')}`} + + {' | '} + {/* eslint-disable-next-line max-len */} + + {`${this.props.translate('bankAccount.isMyDataSafe')}`} + + + + {this.props.translate('bankAccount.onFidoConditions')} + + {`${this.props.translate('bankAccount.onFidoFacialScan')}`} + + {', '} + + {`${this.props.translate('common.privacyPolicy')}`} + + {` ${this.props.translate('common.and')} `} + + {`${this.props.translate('common.termsOfService')}`} + + +