merge workspace/reimburse pages

src/pages/workspace/reimburse/WorkspaceReimbursePage.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import WorkspaceReimburseNoVBAView from './WorkspaceReimburseNoVBAView';
-import WorkspaceReimburseVBAView from './WorkspaceReimburseVBAView';
+import WorkspaceReimburseView from './WorkspaceReimburseView';
 import WorkspacePageWithSections from '../WorkspacePageWithSections';
 import CONST from '../../../CONST';
 
@@ -26,13 +25,7 @@ const WorkspaceReimbursePage = props => (
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
     >
         {(hasVBA, policyID) => (
-            <>
-                {!hasVBA ? (
-                    <WorkspaceReimburseNoVBAView policyID={policyID} />
-                ) : (
-                    <WorkspaceReimburseVBAView policyID={policyID} />
-                )}
-            </>
+            <WorkspaceReimburseView policyID={policyID} hasVBA={hasVBA} />
         )}
     </WorkspacePageWithSections>
 );

src/pages/workspace/reimburse/WorkspaceReimburseNoVBAView.js → src/pages/workspace/reimburse/WorkspaceReimburseView.js

@@ -27,6 +27,9 @@ const propTypes = {
     /** The policy ID currently being configured */
     policyID: PropTypes.string.isRequired,
 
+    /** Does the user has a VBA into its account? */
+    hasVBA: PropTypes.bool.isRequired,
+
     /** Policy values needed in the component */
     policy: PropTypes.shape({
         customUnit: PropTypes.shape({
@@ -45,7 +48,7 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-class WorkspaceReimburseNoVBAView extends React.Component {
+class WorkspaceReimburseView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -188,31 +191,52 @@ class WorkspaceReimburseNoVBAView extends React.Component {
                     </View>
                 </Section>
 
-                <Section
-                    title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')}
-                    icon={Illustrations.JewelBoxGreen}
-                >
-                    <View style={[styles.mv4]}>
-                        <Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text>
-                    </View>
-                    <Button
-                        text={this.props.translate('workspace.common.bankAccount')}
-                        onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(this.props.policyID))}
-                        icon={Expensicons.Bank}
-                        style={[styles.mt4]}
-                        iconStyles={[styles.mr5]}
-                        shouldShowRightIcon
-                        extraLarge
-                        success
-                    />
-                </Section>
+                {!this.props.hasVBA && (
+                    <Section
+                        title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')}
+                        icon={Illustrations.JewelBoxGreen}
+                    >
+                        <View style={[styles.mv4]}>
+                            <Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text>
+                        </View>
+                        <Button
+                            text={this.props.translate('workspace.common.bankAccount')}
+                            onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(this.props.policyID))}
+                            icon={Expensicons.Bank}
+                            style={[styles.mt4]}
+                            iconStyles={[styles.mr5]}
+                            shouldShowRightIcon
+                            extraLarge
+                            success
+                        />
+                    </Section>
+                )}
+                {Boolean(this.props.hasVBA) && (
+                    <Section
+                        title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')}
+                        icon={Illustrations.BankUserGreen}
+                        menuItems={[
+                            {
+                                title: this.props.translate('workspace.reimburse.reimburseReceipts'),
+                                onPress: () => Link.openOldDotLink(`reports?policyID=${this.props.policyID}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`),
+                                icon: Expensicons.Bank,
+                                shouldShowRightIcon: true,
+                                iconRight: Expensicons.NewWindow,
+                            },
+                        ]}
+                    >
+                        <View style={[styles.mv4]}>
+                            <Text>{this.props.translate('workspace.reimburse.fastReimbursementsVBACopy')}</Text>
+                        </View>
+                    </Section>
+                )}
             </>
         );
     }
 }
 
-WorkspaceReimburseNoVBAView.propTypes = propTypes;
-WorkspaceReimburseNoVBAView.displayName = 'WorkspaceReimburseNoVBAView';
+WorkspaceReimburseView.propTypes = propTypes;
+WorkspaceReimburseView.displayName = 'WorkspaceReimburseView';
 
 export default compose(
     withFullPolicy,
@@ -222,4 +246,4 @@ export default compose(
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
         },
     }),
-)(WorkspaceReimburseNoVBAView);
+)(WorkspaceReimburseView);