From e984e08cc10c01a1f48b801a514aea5d506a0cdb Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Mon, 14 Jun 2021 12:22:30 -1000 Subject: [PATCH 01/12] add beneficial owners step --- src/components/TextLink.js | 20 ++- .../Navigation/AppNavigator/AuthScreens.js | 7 + .../AppNavigator/ModalStackNavigators.js | 9 ++ src/libs/Navigation/linkingConfig.js | 5 + src/pages/BeneficialOwnersStep.js | 142 ++++++++++++++++++ src/styles/styles.js | 6 + 6 files changed, 186 insertions(+), 3 deletions(-) create mode 100644 src/pages/BeneficialOwnersStep.js diff --git a/src/components/TextLink.js b/src/components/TextLink.js index d3ac720f06b9..711fef983aee 100644 --- a/src/components/TextLink.js +++ b/src/components/TextLink.js @@ -1,22 +1,31 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; -import {Text, Pressable, Linking} from 'react-native'; +import {Pressable, Linking} from 'react-native'; +import Text from './Text'; import styles from '../styles/styles'; const propTypes = { /** Link to open in new tab */ - href: PropTypes.string.isRequired, + href: PropTypes.string, /** Text content child */ - children: PropTypes.string.isRequired, + children: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array, + ]).isRequired, /** Additional style props */ style: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), + + /** Overwrites the default link behavior with a custom callback */ + onPress: PropTypes.func, }; const defaultProps = { + href: '', style: [], + onPress: undefined, }; const TextLink = (props) => { @@ -25,6 +34,11 @@ const TextLink = (props) => { { e.preventDefault(); + if (props.onPress) { + props.onPress(); + return; + } + Linking.openURL(props.href); }} accessibilityRole="link" diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 912fbe06e388..c78ae0431455 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -52,6 +52,7 @@ import { BusinessBankAccountModalStackNavigator, AddPersonalBankAccountModalStackNavigator, NewWorkspaceStackNavigator, + BeneficialOwnersModalStackNavigator, } from './ModalStackNavigators'; import SCREENS from '../../../SCREENS'; import Timers from '../../Timers'; @@ -289,6 +290,12 @@ class AuthScreens extends React.Component { component={BusinessBankAccountModalStackNavigator} listeners={modalScreenListeners} /> + ); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 238629c640f6..6565945da68d 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -23,6 +23,7 @@ import EnablePaymentsPage from '../../../pages/EnablePayments'; import BusinessBankAccountNewPage from '../../../pages/BusinessBankAccount/NewPage'; import AddPersonalBankAccountPage from '../../../pages/AddPersonalBankAccountPage'; import NewWorkspacePage from '../../../pages/workspace/NewWorkspacePage'; +import BeneficialOwnersStep from '../../../pages/BeneficialOwnersStep'; const defaultSubRouteOptions = { cardStyle: styles.navigationScreenCardStyle, @@ -166,6 +167,13 @@ const BusinessBankAccountModalStackNavigator = createModalStackNavigator([ }, ]); +const BeneficialOwnersModalStackNavigator = createModalStackNavigator([ + { + Component: BeneficialOwnersStep, + name: 'BeneficialOwners_Root', + }, +]); + export { IOUBillStackNavigator, IOURequestModalStackNavigator, @@ -180,4 +188,5 @@ export { BusinessBankAccountModalStackNavigator, AddPersonalBankAccountModalStackNavigator, NewWorkspaceStackNavigator, + BeneficialOwnersModalStackNavigator, }; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 58ca48d1cae9..94f8ed299d4a 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -124,6 +124,11 @@ export default { NewWorkspace_Root: ROUTES.WORKSPACE_NEW, }, }, + BeneficialOwners: { + screens: { + BeneficialOwners_Root: 'beneficial', + }, + }, }, }, }; diff --git a/src/pages/BeneficialOwnersStep.js b/src/pages/BeneficialOwnersStep.js new file mode 100644 index 000000000000..97069c0ec922 --- /dev/null +++ b/src/pages/BeneficialOwnersStep.js @@ -0,0 +1,142 @@ +import _ from 'underscore'; +import React from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import Text from '../components/Text'; +import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; +import styles from '../styles/styles'; +import CheckboxWithLabel from '../components/CheckboxWithLabel'; +import TextLink from '../components/TextLink'; +import Button from '../components/Button'; + +const propTypes = { + companyName: PropTypes.string, +}; + +const defaultProps = { + companyName: 'Unknown', +}; + +class BeneficialOwnersStep extends React.Component { + constructor(props) { + super(props); + + this.removeBeneficialOwner = this.removeBeneficialOwner.bind(this); + this.submit = this.submit.bind(this); + + this.state = { + ownsMoreThan25Percent: false, + hasOtherBeneficialOwners: false, + acceptTermsAndConditions: false, + certifyTrueInformation: false, + beneficialOwners: [], + }; + } + + removeBeneficialOwner() { + + } + + /** + * @returns {Boolean} + */ + canAddMoreBeneficialOwners() { + return _.size(this.state.beneficialOwners) < 3 + || (_.size(this.state.beneficialOwners) === 3 && !this.state.ownsMoreThan25Percent); + } + + submit() { + + } + + render() { + return ( + + + + + {'Additional Information: '} + (check all that apply, otherwise leave blank) + + this.setState(prevState => ({ + ownsMoreThan25Percent: !prevState.ownsMoreThan25Percent, + }))} + LabelComponent={() => ( + + {'I own more than 25% of '} + {this.props.companyName} + + )} + /> + this.setState(prevState => ({ + hasOtherBeneficialOwners: !prevState.hasOtherBeneficialOwners, + }))} + LabelComponent={() => ( + + {'Somebody else owns more than 25% of '} + {this.props.companyName} + + )} + /> + {this.state.hasOtherBeneficialOwners && ( + + + Additional Beneficial Owner + Remove this beneficial owner + + {this.canAddMoreBeneficialOwners() && ( + + {'Add another individual who owns more than 25% of '} + {this.props.companyName} + + )} + + )} + Agreement: + this.setState(prevState => ({ + acceptTermsAndConditions: !prevState.acceptTermsAndConditions, + }))} + LabelComponent={() => ( + + I accept the + terms and conditions. + + )} + /> + this.setState(prevState => ({ + certifyTrueInformation: !prevState.certifyTrueInformation, + }))} + LabelComponent={() => ( + I certify that the information provided is true and accurate + )} + /> +