Merge pull request #3618 from Expensify/update-staging-from-main

android/app/build.gradle

@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001006900
-        versionName "1.0.69-0"
+        versionCode 1001006901
+        versionName "1.0.69-1"
     }
     splits {
         abi {

ios/ExpensifyCash/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.69.0</string>
+	<string>1.0.69.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.69.0</string>
+	<string>1.0.69.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.69-0",
+  "version": "1.0.69-1",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.cash",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/CONST.js

@@ -6,8 +6,41 @@ const CONST = {
         IOS: 'https://apps.apple.com/us/app/expensify-cash/id1530278510',
         DESKTOP: 'https://expensify.cash/Expensify.cash.dmg',
     },
+    SMS: {
+        DOMAIN: '@expensify.sms',
+    },
     BANK_ACCOUNT: {
-        ADD_METHOD: {
+        STEP: {
+            // In the order they appear in the VBA flow
+            BANK_ACCOUNT: 'BankAccountStep',
+            COMPANY: 'CompanyStep',
+            REQUESTOR: 'RequestorStep',
+            ACH_CONTRACT: 'ACHContractStep',
+            VALIDATION: 'ValidationStep',
+            ENABLE: 'EnableStep',
+        },
+        SUBSTEP: {
+            MANUAL: 'manual',
+        },
+        VERIFICATIONS: {
+            ERROR_MESSAGE: 'verifications.errorMessage',
+            EXTERNAL_API_RESPONSES: 'verifications.externalApiResponses',
+            REQUESTOR_IDENTITY_ID: 'verifications.externalApiResponses.requestorIdentityID',
+            REQUESTOR_IDENTITY_ONFIDO: 'verifications.externalApiResponses.requestorIdentityOnfido',
+            THROTTLED: 'verifications.throttled',
+        },
+        FIELDS_TYPE: {
+            LOCAL: 'local',
+        },
+        ONFIDO_RESPONSE: {
+            SDK_TOKEN: 'apiResult.sdkToken',
+            PASS: 'pass',
+        },
+        QUESTIONS: {
+            QUESTION: 'apiResult.questions.question',
+            DIFFERENTIATOR_QUESTION: 'apiResult.differentiator-question',
+        },
+        SETUP_TYPE: {
             MANUAL: 'manual',
             PLAID: 'plaid',
         },
@@ -30,6 +63,12 @@ const CONST = {
         PRESSED: 'pressed',
         COMPLETE: 'complete',
     },
+    COUNTRY: {
+        US: 'US',
+        MX: 'MX',
+        AU: 'AU',
+        CA: 'CA',
+    },
     PLATFORM: {
         IOS: 'ios',
         ANDROID: 'android',
@@ -121,6 +160,8 @@ const CONST = {
         PAYPAL_ME_ADDRESS: 'expensify_payPalMeAddress',
         PRIORITY_MODE: 'priorityMode',
         TIMEZONE: 'timeZone',
+        FREE_PLAN_BANK_ACCOUNT_ID: 'expensify_freePlanBankAccountID',
+        ACH_DATA_THROTTLED: 'expensify_ACHData_throttled',
     },
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},

src/ONYXKEYS.js

@@ -101,4 +101,7 @@ export default {
 
     // Object containing Wallet terms step state
     WALLET_TERMS: 'walletTerms',
+
+    // Stores information about the active reimbursement account being set up
+    REIMBURSEMENT_ACCOUNT: 'reimbursementAccount',
 };

src/ROUTES.js

@@ -8,8 +8,8 @@ import {addTrailingForwardSlash} from './libs/Url';
 const REPORT = 'r';
 
 export default {
-    ADD_PERSONAL_BANK_ACCOUNT: 'add-personal-bank-account',
-    BANK_ACCOUNT_NEW: 'bank-account/new',
+    BANK_ACCOUNT: 'bank-account/:stepToOpen?',
+    BANK_ACCOUNT_PERSONAL: 'bank-account/personal',
     HOME: '',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
@@ -49,6 +49,8 @@ export default {
     VALIDATE_LOGIN_WITH_VALIDATE_CODE: 'v/:accountID/:validateCode',
     ENABLE_PAYMENTS: 'enable-payments',
     WORKSPACE_NEW: 'workspace/new',
+    WORKSPACE_INVITE: 'workspace/:policyID/invite',
+    getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
 
     /**
      * @param {String} route

src/components/Modal/BaseModal.js

@@ -1,15 +1,28 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import ReactNativeModal from 'react-native-modal';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import styles, {getModalPaddingStyles, getSafeAreaPadding} from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
-import {propTypes, defaultProps} from './ModalPropTypes';
+import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './ModalPropTypes';
 import getModalStyles from '../../styles/getModalStyles';
 import {setModalVisibility} from '../../libs/actions/Modal';
 
+const propTypes = {
+    ...modalPropTypes,
+
+    /** The ref to the modal container */
+    forwardedRef: PropTypes.func,
+};
+
+const defaultProps = {
+    ...modalDefaultProps,
+    forwardedRef: () => {},
+};
+
 class BaseModal extends PureComponent {
     constructor(props) {
         super(props);
@@ -94,6 +107,8 @@ class BaseModal extends PureComponent {
                 backdropColor={themeColors.modalBackdrop}
                 backdropOpacity={hideBackdrop ? 0 : 0.5}
                 backdropTransitionOutTiming={0}
+                hasBackdrop={this.props.fullscreen}
+                coverScreen={this.props.fullscreen}
                 style={modalStyle}
                 deviceHeight={this.props.windowHeight}
                 deviceWidth={this.props.windowWidth}
@@ -128,6 +143,7 @@ class BaseModal extends PureComponent {
                                     ...modalContainerStyle,
                                     ...modalPaddingStyles,
                                 }}
+                                ref={this.props.forwardedRef}
                             >
                                 {this.props.children}
                             </View>
@@ -142,4 +158,7 @@ class BaseModal extends PureComponent {
 BaseModal.propTypes = propTypes;
 BaseModal.defaultProps = defaultProps;
 BaseModal.displayName = 'BaseModal';
-export default BaseModal;
+export default React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BaseModal {...props} forwardedRef={ref} />
+));

src/components/Modal/ModalPropTypes.js

@@ -4,6 +4,12 @@ import CONST from '../../CONST';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
+    /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
+    fullscreen: PropTypes.bool,
+
+    /** Should we close modal on outside click */
+    shouldCloseOnOutsideClick: PropTypes.bool,
+
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
@@ -52,6 +58,8 @@ const propTypes = {
 };
 
 const defaultProps = {
+    fullscreen: true,
+    shouldCloseOnOutsideClick: false,
     shouldSetModalVisibility: true,
     onSubmit: null,
     type: '',

src/components/Modal/index.js

@@ -1,14 +1,47 @@
-import React from 'react';
+import React, {Component} from 'react';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './ModalPropTypes';
 
-const Modal = props => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <BaseModal {...props}>
-        {props.children}
-    </BaseModal>
-);
+class Modal extends Component {
+    constructor(props) {
+        super(props);
+        this.closeOnOutsideClick = this.closeOnOutsideClick.bind(this);
+    }
+
+    componentDidMount() {
+        if (this.props.shouldCloseOnOutsideClick) {
+            document.addEventListener('mousedown', this.closeOnOutsideClick);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.shouldCloseOnOutsideClick) {
+            document.removeEventListener('mousedown', this.closeOnOutsideClick);
+        }
+    }
+
+    closeOnOutsideClick(event) {
+        if (this.props.isVisible
+            && this.baseModalRef
+            && !this.baseModalRef.contains(event.target)
+            && this.props.shouldCloseOnOutsideClick) {
+            this.props.onClose();
+        }
+    }
+
+    render() {
+        return (
+            <BaseModal
+                ref={el => this.baseModalRef = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            >
+                {this.props.children}
+            </BaseModal>
+        );
+    }
+}
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;

src/components/Popover/PopoverPropTypes.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '../Modal/ModalPropTypes';
 
 const propTypes = {
-    ...(_.omit(modalPropTypes, 'type', 'popoverAnchorPosition')),
+    ...(_.omit(modalPropTypes, ['type', 'popoverAnchorPosition'])),
 
     /** The anchor position of the popover */
     anchorPosition: PropTypes.shape({
@@ -15,7 +15,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    ...(_.omit(defaultModalProps, 'type', 'popoverAnchorPosition')),
+    ...(_.omit(defaultModalProps, ['type', 'popoverAnchorPosition'])),
 
     // Anchor position is optional only because it is not relevant on mobile
     anchorPosition: {},

src/components/Popover/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {createPortal} from 'react-dom';
 import {propTypes, defaultProps} from './PopoverPropTypes';
 import CONST from '../../CONST';
 import Modal from '../Modal';
@@ -8,16 +9,32 @@ import withWindowDimensions from '../withWindowDimensions';
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-const Popover = props => (
-    <Modal
-        type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
-        popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
-        animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
-    />
-);
+const Popover = (props) => {
+    if (!props.fullscreen && !props.isSmallScreenWidth) {
+        return createPortal(
+            <Modal
+                type={CONST.MODAL.MODAL_TYPE.POPOVER}
+                popoverAnchorPosition={props.anchorPosition}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
+                animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+                shouldCloseOnOutsideClick
+            />,
+            document.body,
+        );
+    }
+    return (
+        <Modal
+            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+            popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
+            animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+        />
+    );
+};
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;