Merge pull request #5787 from Expensify/marcaaron-fixLoading

Only show fancy loading page when we are submitting verifications

src/components/FullscreenLoadingIndicator.js

@@ -1,30 +1,44 @@
+import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** Controls whether the loader is mounted and displayed */
     visible: PropTypes.bool,
+
+    /** Additional style props */
+    style: stylePropTypes,
 };
 
 const defaultProps = {
     visible: true,
+    style: [],
 };
 
 /**
  * Loading indication component intended to cover the whole page, while the page prepares for initial render
  *
  * @returns {JSX.Element}
  */
-const FullScreenLoadingIndicator = ({visible}) => visible && (
-    <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>
-        <ActivityIndicator color={themeColors.spinner} size="large" />
-    </View>
-);
+const FullScreenLoadingIndicator = ({visible, style}) => {
+    if (!visible) {
+        return null;
+    }
+
+    const additionalStyles = _.isArray(style) ? style : [style];
+    return (
+        <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, ...additionalStyles]}>
+            <ActivityIndicator color={themeColors.spinner} size="large" />
+        </View>
+    );
+};
 
 FullScreenLoadingIndicator.propTypes = propTypes;
 FullScreenLoadingIndicator.defaultProps = defaultProps;
+FullScreenLoadingIndicator.displayName = 'FullScreenLoadingIndicator';
 
 export default FullScreenLoadingIndicator;

src/components/ReimbursementAccountLoadingIndicator.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import CONST from '../CONST';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Text from './Text';
+import HeaderWithCloseButton from './HeaderWithCloseButton';
+import Navigation from '../libs/Navigation/Navigation';
+import ScreenWrapper from './ScreenWrapper';
+import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
+
+const propTypes = {
+    /** Whether the user is submitting verifications data */
+    isSubmittingVerificationsData: PropTypes.bool.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const ReimbursementAccountLoadingIndicator = ({translate, isSubmittingVerificationsData}) => (
+    <ScreenWrapper style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}>
+        <HeaderWithCloseButton
+            title={translate('reimbursementAccountLoadingAnimation.oneMoment')}
+            onCloseButtonPress={Navigation.dismissModal}
+        />
+        {isSubmittingVerificationsData ? (
+            <View style={[styles.pageWrapper]}>
+                <Image
+                    source={{uri: `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}}
+                    style={[
+                        styles.loadingVBAAnimation,
+                    ]}
+                />
+                <View style={[styles.ph6]}>
+                    <Text style={[styles.textAlignCenter]}>
+                        {translate('reimbursementAccountLoadingAnimation.explanationLine')}
+                    </Text>
+                </View>
+            </View>
+        ) : (
+            <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+        )}
+    </ScreenWrapper>
+);
+
+ReimbursementAccountLoadingIndicator.propTypes = propTypes;
+ReimbursementAccountLoadingIndicator.displayName = 'ReimbursementAccountLoadingIndicator';
+
+export default withLocalize(ReimbursementAccountLoadingIndicator);

src/languages/en.js

@@ -611,7 +611,7 @@ export default {
             certify: 'Must certify information is true and accurate',
         },
     },
-    vbaLoadingAnimation: {
+    reimbursementAccountLoadingAnimation: {
         oneMoment: 'One Moment',
         explanationLine: 'We’re taking a look at your information. You will be able to continue with next steps shortly.',
     },

src/languages/es.js

@@ -613,7 +613,7 @@ export default {
             certify: 'Debe certificar que la información es verdadera y precisa',
         },
     },
-    vbaLoadingAnimation: {
+    reimbursementAccountLoadingAnimation: {
         oneMoment: 'Un Momento',
         explanationLine: 'Estamos verificando tu información y podrás continuar con los siguientes pasos en unos momentos.',
     },

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
@@ -10,7 +11,7 @@ import {
     hideBankAccountErrors,
 } from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
-import VBALoadingIndicator from '../../components/VBALoadingIndicator';
+import ReimbursementAccountLoadingIndicator from '../../components/ReimbursementAccountLoadingIndicator';
 import Permissions from '../../libs/Permissions';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
@@ -150,8 +151,24 @@ class ReimbursementAccountPage extends React.Component {
             return null;
         }
 
+        // The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
+        // user left off. This view will refer to the achData as the single source of truth to determine which route to
+        // display. We can also specify a specific route to navigate to via route params when the component first
+        // mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical
+        // next step.
+        const achData = lodashGet(this.props, 'reimbursementAccount.achData', {});
+        const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
         if (this.props.reimbursementAccount.loading) {
-            return <VBALoadingIndicator />;
+            const isSubmittingVerificationsData = _.contains([
+                CONST.BANK_ACCOUNT.STEP.COMPANY,
+                CONST.BANK_ACCOUNT.STEP.REQUESTOR,
+                CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT,
+            ], currentStep);
+            return (
+                <ReimbursementAccountLoadingIndicator
+                    isSubmittingVerificationsData={isSubmittingVerificationsData}
+                />
+            );
         }
 
         let errorComponent;
@@ -188,13 +205,6 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
 
-        // The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
-        // user left off. This view will refer to the achData as the single source of truth to determine which route to
-        // display. We can also specify a specific route to navigate to via route params when the component first
-        // mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical
-        // next step.
-        const achData = lodashGet(this.props, 'reimbursementAccount.achData', {});
-        const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
         return (
             <ScreenWrapper>
                 <KeyboardAvoidingView>

src/styles/styles.js

@@ -1813,7 +1813,7 @@ const styles = {
         zIndex: 10,
     },
 
-    vbaFullScreenLoading: {
+    reimbursementAccountFullScreenLoading: {
         backgroundColor: themeColors.componentBG,
         opacity: 0.8,
         justifyContent: 'flex-start',