Merge pull request #8065 from mollfpr/feature/add-workspace-name

Add workspace name as subtitle in individual modal screens
Expensify · Mar 14, 2022 · 90e5af4 · 90e5af4
2 parents c1bb574 + 173d234
commit 90e5af4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/src/pages/workspace/WorkspaceBankAccountPage.js b/src/pages/workspace/WorkspaceBankAccountPage.js
@@ -1,4 +1,5 @@
 import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -19,11 +20,17 @@ import Section from '../../components/Section';
 import WorkspaceResetBankAccountModal from './WorkspaceResetBankAccountModal';
 import styles from '../../styles/styles';
 import CONST from '../../CONST';
+import withFullPolicy from './withFullPolicy';
 
 const propTypes = {
     /** ACH data for the withdrawal account actively being set up */
     reimbursementAccount: reimbursementAccountPropTypes,
 
+    /** Policy values needed in the component */
+    policy: PropTypes.shape({
+        name: PropTypes.string,
+    }).isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -43,6 +50,10 @@ class WorkspaceBankAccountPage extends React.Component {
 
     componentDidMount() {
         this.unsubscribe = this.props.navigation.addListener('focus', this.onScreenFocus);
+
+        if (!this.getShouldShowPage()) {
+            this.navigateToBankAccountRoute();
+        }
     }
 
     componentWillUnmount() {
@@ -82,15 +93,13 @@ class WorkspaceBankAccountPage extends React.Component {
     }
 
     render() {
-        if (!this.getShouldShowPage()) {
-            this.navigateToBankAccountRoute();
-            return null;
-        }
+        const policyName = lodashGet(this.props.policy, 'name');
 
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
                     title={this.props.translate('workspace.common.bankAccount')}
+                    subtitle={policyName}
                     onCloseButtonPress={Navigation.dismissModal}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(this.props.route.params.policyID))}
                     shouldShowGetAssistanceButton
@@ -137,4 +146,5 @@ export default compose(
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
     }),
+    withFullPolicy,
 )(WorkspaceBankAccountPage);
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
@@ -243,12 +243,15 @@ class WorkspaceInvitePage extends React.Component {
             Boolean(this.state.userToInvite),
             this.state.searchValue,
         );
+        const policyName = lodashGet(this.props.policy, 'name');
+
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
                     <KeyboardAvoidingView>
                         <HeaderWithCloseButton
                             title={this.props.translate('workspace.invite.invitePeople')}
+                            subtitle={policyName}
                             onCloseButtonPress={() => {
                                 this.clearErrors();
                                 Navigation.dismissModal();

diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
@@ -252,11 +252,13 @@ class WorkspaceMembersPage extends React.Component {
             .sortBy(person => person.displayName.toLowerCase())
             .value();
         const policyID = lodashGet(this.props.route, 'params.policyID');
+        const policyName = lodashGet(this.props.policy, 'name');
 
         return (
             <ScreenWrapper style={[styles.defaultModalContainer]}>
                 <HeaderWithCloseButton
                     title={this.props.translate('workspace.common.members')}
+                    subtitle={policyName}
                     onCloseButtonPress={() => Navigation.dismissModal()}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
                     shouldShowGetAssistanceButton

diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
@@ -16,6 +16,7 @@ import BankAccount from '../../libs/models/BankAccount';
 import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
 import userPropTypes from '../settings/userPropTypes';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
+import withFullPolicy from './withFullPolicy';
 
 const propTypes = {
     /** The text to display in the header */
@@ -46,6 +47,11 @@ const propTypes = {
     /** The guides call task ID to associate with the workspace page being shown */
     guidesCallTaskID: PropTypes.string,
 
+    /** Policy values needed in the component */
+    policy: PropTypes.shape({
+        name: PropTypes.string,
+    }).isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -68,12 +74,14 @@ class WorkspacePageWithSections extends React.Component {
         const hasVBA = achState === BankAccount.STATE.OPEN;
         const isUsingECard = lodashGet(this.props.user, 'isUsingExpensifyCard', false);
         const policyID = lodashGet(this.props.route, 'params.policyID');
+        const policyName = lodashGet(this.props.policy, 'name');
 
         return (
             <ScreenWrapper>
                 <KeyboardAvoidingView>
                     <HeaderWithCloseButton
                         title={this.props.headerText}
+                        subtitle={policyName}
                         shouldShowGetAssistanceButton
                         guidesCallTaskID={this.props.guidesCallTaskID}
                         shouldShowBackButton
@@ -109,4 +117,5 @@ export default compose(
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
     }),
+    withFullPolicy,
 )(WorkspacePageWithSections);