From 36115d2bf17d541fa4655bf62a4cc53267628bff Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 4 Oct 2021 15:21:49 -0400 Subject: [PATCH 001/119] Add new routes and link configs --- src/ROUTES.js | 25 +++++++--- .../Navigation/AppNavigator/AuthScreens.js | 2 +- .../AppNavigator/ModalStackNavigators.js | 39 ++++++++++++++++ src/libs/Navigation/linkingConfig.js | 39 ++++++++++++---- src/pages/workspace/WorkspaceSidebar.js | 46 ++++++++++++++++--- 5 files changed, 128 insertions(+), 23 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 860b1f597ef3..cf197f736748 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -78,17 +78,28 @@ export default { LOGIN_WITH_VALIDATE_CODE_2FA_WORKSPACE_CARD: 'v/:accountID/:validateCode/2fa/workspace/:policyID/card', ENABLE_PAYMENTS: 'enable-payments', WORKSPACE: 'workspace', - WORKSPACE_CARD: ':policyID/card', - WORKSPACE_PEOPLE: ':policyID/people', WORKSPACE_NEW: 'workspace/new', - getWorkspaceCardRoute: policyID => `workspace/${policyID}/card`, - getWorkspacePeopleRoute: policyID => `workspace/${policyID}/people`, - getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`, WORKSPACE_INVITE: 'workspace/:policyID/invite', + WORKSPACE_SETTINGS: 'workspace/:policyID/settings', + WORKSPACE_CARD: 'workspace/:policyID/card', + WORKSPACE_REIMBURSE: 'workspace/:policyID/reimburse', + WORKSPACE_BILLS: 'workspace/:policyID/bills', + WORKSPACE_INVOICES: 'workspace/:policyID/invoices', + WORKSPACE_TRAVEL: 'workspace/:policyID/travel', + WORKSPACE_MEMBERS: 'workspace/:policyID/members', + WORKSPACE_BANKACCOUNT: 'workspace/:policyID/bankAccount', + getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`, + getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`, + getWorkspaceCardRoute: policyID => `workspace/${policyID}/card`, + getWorkspaceReimburseRoute: policyID => `workspace/${policyID}/reimburse`, + getWorkspaceBillsRoute: policyID => `workspace/${policyID}/bills`, + getWorkspaceInvoicesRoute: policyID => `workspace/${policyID}/invoices`, + getWorkspaceTravelRoute: policyID => `workspace/${policyID}/travel`, + getWorkspaceMembersRoute: policyID => `workspace/${policyID}/members`, + getWorkspaceBankAccountRoute: policyID => `workspace/${policyID}/bankAccount`, getRequestCallRoute: taskID => `request-call/${taskID}`, + REQUEST_CALL: 'request-call/:taskID', - getWorkspaceEditorRoute: policyID => `workspace/${policyID}/edit`, - WORKSPACE_EDITOR: 'workspace/:policyID/edit', /** * @param {String} route diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index ce580391a5fd..49b69ed23591 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -339,7 +339,7 @@ class AuthScreens extends React.Component { use a navigator */} diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index d64960f6feb7..7ecd6342c83a 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -129,6 +129,45 @@ const NewChatModalStackNavigator = createModalStackNavigator([{ name: 'NewChat_Root', }]); +const WorkspaceModalStackNavigator = createModalStackNavigator([ + { + Component: WorkspaceInitialPage, + name: 'Workspace_Root', + }, + { + Component: WorkspaceSettingsPage, + name: 'Workspace_Settings', + }, + { + Component: WorkspaceCardPage, + name: 'Workspace_Card', + }, + { + Component: WorkspaceReimbursePage, + name: 'Workspace_Reimburse', + }, + { + Component: WorkspaceBillsPage, + name: 'Workspace_Bills', + }, + { + Component: WorkspaceInvoicesPage, + name: 'Workspace_Invoices', + }, + { + Component: WorkspaceTravelPage, + name: 'Workspace_Travel', + }, + { + Component: WorkspaceMembersPage, + name: 'Workspace_Members', + }, + { + Component: WorkspaceBankAccountPage, + name: 'Workspace_BankAccount', + }, +]); + const SettingsModalStackNavigator = createModalStackNavigator([ { Component: SettingsInitialPage, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 5311901ab6d7..52efa1e19c31 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -36,6 +36,37 @@ export default { WorkspaceNew: ROUTES.WORKSPACE_NEW, // Modal Screens + Workspace: { + screens: { + Workspace_Root: { + path: ROUTES.WORKSPACE, + }, + Workspace_Settings: { + path: ROUTES.WORKSPACE_SETTINGS, + }, + Workspace_Card: { + path: ROUTES.WORKSPACE_CARD, + }, + Workspace_Reimburse: { + path: ROUTES.WORKSPACE_REIMBURSE, + }, + Workspace_Bills: { + path: ROUTES.WORKSPACE_BILLS, + }, + Workspace_Invoices: { + path: ROUTES.WORKSPACE_INVOICES, + }, + Workspace_Travel: { + path: ROUTES.WORKSPACE_TRAVEL, + }, + Workspace_Members: { + path: ROUTES.WORKSPACE_MEMBERS, + }, + WorkspaceBankAccountPage: { + path: ROUTES.WORKSPACE_BANKACCOUNT, + }, + }, + }, Settings: { screens: { Settings_Root: { @@ -153,14 +184,6 @@ export default { }, }, - WorkspaceSettings: { - path: ROUTES.WORKSPACE, - screens: { - WorkspaceCard: ROUTES.WORKSPACE_CARD, - WorkspacePeople: ROUTES.WORKSPACE_PEOPLE, - }, - }, - WorkspaceEditor: { screens: { WorkspaceEditor_Root: ROUTES.WORKSPACE_EDITOR, diff --git a/src/pages/workspace/WorkspaceSidebar.js b/src/pages/workspace/WorkspaceSidebar.js index 869bdde41e1e..176d1af2a440 100644 --- a/src/pages/workspace/WorkspaceSidebar.js +++ b/src/pages/workspace/WorkspaceSidebar.js @@ -58,22 +58,54 @@ const WorkspaceSidebar = ({ } const menuItems = [ + { + translationKey: 'workspace.common.settings', + icon: ExpensifyCard, + action: () => Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceSettingsRoute(policy.id)), + }, { translationKey: 'workspace.common.card', icon: ExpensifyCard, - action: () => { - Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)); - }, + action: () => Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)), isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceCardRoute(policy.id)), }, { - translationKey: 'common.people', + translationKey: 'workspace.common.reimburse', + icon: ExpensifyCard, + action: () => Navigation.navigate(ROUTES.getWorkspaceReimburseRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceReimburseRoute(policy.id)), + }, + { + translationKey: 'workspace.common.bills', + icon: ExpensifyCard, + action: () => Navigation.navigate(ROUTES.getWorkspaceBillsRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceBillsRoute(policy.id)), + }, + { + translationKey: 'workspace.common.invoices', + icon: ExpensifyCard, + action: () => Navigation.navigate(ROUTES.getWorkspaceInvoicesRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceInvoicesRoute(policy.id)), + }, + { + translationKey: 'workspace.common.travel', + icon: ExpensifyCard, + action: () => Navigation.navigate(ROUTES.getWorkspaceTravelRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceTravelRoute(policy.id)), + }, + { + translationKey: 'workspace.common.members', icon: Users, - action: () => { - Navigation.navigate(ROUTES.getWorkspacePeopleRoute(policy.id)); - }, + action: () => Navigation.navigate(ROUTES.getWorkspacePeopleRoute(policy.id)), isActive: Navigation.isActiveRoute(ROUTES.getWorkspacePeopleRoute(policy.id)), }, + { + translationKey: 'workspace.common.bankAccount', + icon: Users, + action: () => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceBankAccountRoute(policy.id)), + }, ]; const openEditor = () => Navigation.navigate(ROUTES.getWorkspaceEditorRoute(policy.id)); From eb2a2471819e83056964e7e0e5f80c24798785f8 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 4 Oct 2021 15:24:38 -0400 Subject: [PATCH 002/119] Rename some workspace pages --- .../AppNavigator/WorkspaceSettingsDrawerNavigator.js | 8 ++++---- .../{WorkspaceSidebar.js => WorkspaceInitialPage.js} | 10 +++++----- ...{WorkspacePeoplePage.js => WorkspaceMembersPage.js} | 10 +++++----- 3 files changed, 14 insertions(+), 14 deletions(-) rename src/pages/workspace/{WorkspaceSidebar.js => WorkspaceInitialPage.js} (97%) rename src/pages/workspace/{WorkspacePeoplePage.js => WorkspaceMembersPage.js} (97%) diff --git a/src/libs/Navigation/AppNavigator/WorkspaceSettingsDrawerNavigator.js b/src/libs/Navigation/AppNavigator/WorkspaceSettingsDrawerNavigator.js index 589dd6bda3c5..e46351815e69 100644 --- a/src/libs/Navigation/AppNavigator/WorkspaceSettingsDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/WorkspaceSettingsDrawerNavigator.js @@ -3,13 +3,13 @@ import React from 'react'; // Screens import BaseDrawerNavigator from './BaseDrawerNavigator'; import WorkspaceCardPage from '../../../pages/workspace/WorkspaceCardPage'; -import WorkspacePeoplePage from '../../../pages/workspace/WorkspacePeoplePage'; -import WorkspaceSidebar from '../../../pages/workspace/WorkspaceSidebar'; +import WorkspaceMembersPage from '../../../pages/workspace/WorkspaceMembersPage'; +import WorkspaceInitialPage from '../../../pages/workspace/WorkspaceInitialPage'; const WorkspaceSettingsDrawerNavigator = () => ( } + drawerContent={props => } screens={[ { name: 'WorkspaceCard', @@ -18,7 +18,7 @@ const WorkspaceSettingsDrawerNavigator = () => ( }, { name: 'WorkspacePeople', - component: WorkspacePeoplePage, + component: WorkspaceMembersPage, initialParams: {}, }, ]} diff --git a/src/pages/workspace/WorkspaceSidebar.js b/src/pages/workspace/WorkspaceInitialPage.js similarity index 97% rename from src/pages/workspace/WorkspaceSidebar.js rename to src/pages/workspace/WorkspaceInitialPage.js index 176d1af2a440..f56f3a207026 100644 --- a/src/pages/workspace/WorkspaceSidebar.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -50,7 +50,7 @@ const defaultProps = { policy: {}, }; -const WorkspaceSidebar = ({ +const WorkspaceInitialPage = ({ translate, isSmallScreenWidth, policy, isFocused, }) => { if (_.isEmpty(policy)) { @@ -205,9 +205,9 @@ const WorkspaceSidebar = ({ ); }; -WorkspaceSidebar.propTypes = propTypes; -WorkspaceSidebar.defaultProps = defaultProps; -WorkspaceSidebar.displayName = 'WorkspaceSidebar'; +WorkspaceInitialPage.propTypes = propTypes; +WorkspaceInitialPage.defaultProps = defaultProps; +WorkspaceInitialPage.displayName = 'WorkspaceSidebar'; export default compose( withLocalize, @@ -223,4 +223,4 @@ export default compose( }, }, }), -)(WorkspaceSidebar); +)(WorkspaceInitialPage); diff --git a/src/pages/workspace/WorkspacePeoplePage.js b/src/pages/workspace/WorkspaceMembersPage.js similarity index 97% rename from src/pages/workspace/WorkspacePeoplePage.js rename to src/pages/workspace/WorkspaceMembersPage.js index 481c38078270..5855d88ae653 100644 --- a/src/pages/workspace/WorkspacePeoplePage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -58,7 +58,7 @@ const defaultProps = { }, }; -class WorkspacePeoplePage extends React.Component { +class WorkspaceMembersPage extends React.Component { constructor(props) { super(props); @@ -279,9 +279,9 @@ class WorkspacePeoplePage extends React.Component { } } -WorkspacePeoplePage.propTypes = propTypes; -WorkspacePeoplePage.defaultProps = defaultProps; -WorkspacePeoplePage.displayName = 'WorkspacePeoplePage'; +WorkspaceMembersPage.propTypes = propTypes; +WorkspaceMembersPage.defaultProps = defaultProps; +WorkspaceMembersPage.displayName = 'WorkspacePeoplePage'; export default compose( withLocalize, @@ -300,4 +300,4 @@ export default compose( key: ONYXKEYS.BETAS, }, }), -)(WorkspacePeoplePage); +)(WorkspaceMembersPage); From 98e02af97d5637ab11eaf7855aef89bcca8febe5 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 4 Oct 2021 15:25:42 -0400 Subject: [PATCH 003/119] Rename editor to settings --- src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 4 ++-- .../{WorkspaceEditorPage.js => WorkspaceSettingsPage.js} | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) rename src/pages/workspace/{WorkspaceEditorPage.js => WorkspaceSettingsPage.js} (97%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 7ecd6342c83a..36349b089040 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -28,7 +28,7 @@ import WorkspaceInvitePage from '../../../pages/workspace/WorkspaceInvitePage'; import ReimbursementAccountPage from '../../../pages/ReimbursementAccount/ReimbursementAccountPage'; import RequestCallPage from '../../../pages/RequestCallPage'; import ReportDetailsPage from '../../../pages/ReportDetailsPage'; -import WorkspaceEditorPage from '../../../pages/workspace/WorkspaceEditorPage'; +import WorkspaceSettingsPage from '../../../pages/workspace/WorkspaceSettingsPage'; const defaultSubRouteOptions = { cardStyle: styles.navigationScreenCardStyle, @@ -237,7 +237,7 @@ const RequestCallModalStackNavigator = createModalStackNavigator([{ }]); const WorkspaceEditorNavigator = createModalStackNavigator([{ - Component: WorkspaceEditorPage, + Component: WorkspaceSettingsPage, name: 'WorkspaceEditor_Root', }]); diff --git a/src/pages/workspace/WorkspaceEditorPage.js b/src/pages/workspace/WorkspaceSettingsPage.js similarity index 97% rename from src/pages/workspace/WorkspaceEditorPage.js rename to src/pages/workspace/WorkspaceSettingsPage.js index c5f3f77b1967..6b1bcc3978c6 100644 --- a/src/pages/workspace/WorkspaceEditorPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -35,7 +35,7 @@ const defaultProps = { betas: [], }; -class WorkspaceEditorPage extends React.Component { +class WorkspaceSettingsPage extends React.Component { constructor(props) { super(props); @@ -151,8 +151,8 @@ class WorkspaceEditorPage extends React.Component { } } -WorkspaceEditorPage.propTypes = propTypes; -WorkspaceEditorPage.defaultProps = defaultProps; +WorkspaceSettingsPage.propTypes = propTypes; +WorkspaceSettingsPage.defaultProps = defaultProps; export default compose( withOnyx({ @@ -169,4 +169,4 @@ export default compose( }, }), withLocalize, -)(WorkspaceEditorPage); +)(WorkspaceSettingsPage); From 80f2d6d3b1fdba5c43fcfca63848765c162c4efc Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 4 Oct 2021 15:31:01 -0400 Subject: [PATCH 004/119] Add new skeleton pages --- src/pages/workspace/WorkspaceBankAccountPage.js | 3 +++ src/pages/workspace/WorkspaceBillsPage.js | 3 +++ src/pages/workspace/WorkspaceInvoicesPage.js | 3 +++ src/pages/workspace/WorkspaceReimbursePage.js | 3 +++ src/pages/workspace/WorkspaceTravelPage.js | 3 +++ 5 files changed, 15 insertions(+) create mode 100644 src/pages/workspace/WorkspaceBankAccountPage.js create mode 100644 src/pages/workspace/WorkspaceBillsPage.js create mode 100644 src/pages/workspace/WorkspaceInvoicesPage.js create mode 100644 src/pages/workspace/WorkspaceReimbursePage.js create mode 100644 src/pages/workspace/WorkspaceTravelPage.js diff --git a/src/pages/workspace/WorkspaceBankAccountPage.js b/src/pages/workspace/WorkspaceBankAccountPage.js new file mode 100644 index 000000000000..fee9e1798803 --- /dev/null +++ b/src/pages/workspace/WorkspaceBankAccountPage.js @@ -0,0 +1,3 @@ +const WorkspaceBankAccountPage = () => {}; + +export default WorkspaceBankAccountPage; diff --git a/src/pages/workspace/WorkspaceBillsPage.js b/src/pages/workspace/WorkspaceBillsPage.js new file mode 100644 index 000000000000..9a0505d39756 --- /dev/null +++ b/src/pages/workspace/WorkspaceBillsPage.js @@ -0,0 +1,3 @@ +const WorkspaceBillsPage = () => {}; + +export default WorkspaceBillsPage; diff --git a/src/pages/workspace/WorkspaceInvoicesPage.js b/src/pages/workspace/WorkspaceInvoicesPage.js new file mode 100644 index 000000000000..1725a435cfa1 --- /dev/null +++ b/src/pages/workspace/WorkspaceInvoicesPage.js @@ -0,0 +1,3 @@ +const WorkspaceInvoicesPage = () => {}; + +export default WorkspaceInvoicesPage; diff --git a/src/pages/workspace/WorkspaceReimbursePage.js b/src/pages/workspace/WorkspaceReimbursePage.js new file mode 100644 index 000000000000..2a49adc9947c --- /dev/null +++ b/src/pages/workspace/WorkspaceReimbursePage.js @@ -0,0 +1,3 @@ +const WorkspaceReimbursePage = () => {}; + +export default WorkspaceReimbursePage; diff --git a/src/pages/workspace/WorkspaceTravelPage.js b/src/pages/workspace/WorkspaceTravelPage.js new file mode 100644 index 000000000000..09f19cd92452 --- /dev/null +++ b/src/pages/workspace/WorkspaceTravelPage.js @@ -0,0 +1,3 @@ +const WorkspaceTravelPage = () => {}; + +export default WorkspaceTravelPage; From 414256675dfe0e49de3e2c30c00c22752764c2c7 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 5 Oct 2021 16:33:58 -0400 Subject: [PATCH 005/119] Get site running with navigation pieces in place --- src/ROUTES.js | 3 +- src/languages/en.js | 7 +++++ .../Navigation/AppNavigator/AuthScreens.js | 28 +++---------------- .../AppNavigator/ModalStackNavigators.js | 17 ++++++----- src/libs/Navigation/linkingConfig.js | 20 +++++++------ src/pages/settings/InitialPage.js | 2 +- src/pages/workspace/WorkspaceInitialPage.js | 10 +++++-- 7 files changed, 43 insertions(+), 44 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index cf197f736748..caac80159233 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -79,6 +79,7 @@ export default { ENABLE_PAYMENTS: 'enable-payments', WORKSPACE: 'workspace', WORKSPACE_NEW: 'workspace/new', + WORKSPACE_INITIAL: 'workspace/:policyID', WORKSPACE_INVITE: 'workspace/:policyID/invite', WORKSPACE_SETTINGS: 'workspace/:policyID/settings', WORKSPACE_CARD: 'workspace/:policyID/card', @@ -88,6 +89,7 @@ export default { WORKSPACE_TRAVEL: 'workspace/:policyID/travel', WORKSPACE_MEMBERS: 'workspace/:policyID/members', WORKSPACE_BANKACCOUNT: 'workspace/:policyID/bankAccount', + getWorkspaceInitialRoute: policyID => `workspace/${policyID}`, getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`, getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`, getWorkspaceCardRoute: policyID => `workspace/${policyID}/card`, @@ -98,7 +100,6 @@ export default { getWorkspaceMembersRoute: policyID => `workspace/${policyID}/members`, getWorkspaceBankAccountRoute: policyID => `workspace/${policyID}/bankAccount`, getRequestCallRoute: taskID => `request-call/${taskID}`, - REQUEST_CALL: 'request-call/:taskID', /** diff --git a/src/languages/en.js b/src/languages/en.js index 40c6a7be9b91..98eb817c1ee8 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -624,6 +624,13 @@ export default { card: 'Expensify Card', workspace: 'Workspace', edit: 'Edit workspace', + settings: 'Settings', + reimburse: 'Reimburse', + bills: 'Bills', + invoices: 'Invoices', + travel: 'Travel', + members: 'Members', + bankAccount: 'Bank Account', }, new: { newWorkspace: 'New workspace', diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 49b69ed23591..8019f2bfb418 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -4,7 +4,7 @@ import Onyx, {withOnyx} from 'react-native-onyx'; import moment from 'moment'; import _ from 'underscore'; import lodashGet from 'lodash/get'; -import styles, {getNavigationModalCardStyle} from '../../../styles/styles'; +import {getNavigationModalCardStyle} from '../../../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import CONST from '../../../CONST'; import compose from '../../compose'; @@ -58,14 +58,11 @@ import { WorkspaceInviteModalStackNavigator, RequestCallModalStackNavigator, ReportDetailsModalStackNavigator, - WorkspaceEditorNavigator, + WorkspaceModalStackNavigator, } from './ModalStackNavigators'; import SCREENS from '../../../SCREENS'; import Timers from '../../Timers'; import LogInWithShortLivedTokenPage from '../../../pages/LogInWithShortLivedTokenPage'; -import WorkspaceSettingsDrawerNavigator from './WorkspaceSettingsDrawerNavigator'; -import spacing from '../../../styles/utilities/spacing'; -import CardOverlay from '../../../components/CardOverlay'; import defaultScreenOptions from './defaultScreenOptions'; import * as API from '../../API'; import {setLocale} from '../../actions/App'; @@ -276,17 +273,6 @@ class AuthScreens extends React.Component { // when displaying a modal. This allows us to dismiss by clicking outside on web / large screens. isModal: true, }; - const fullscreenModalScreenOptions = { - ...commonModalScreenOptions, - cardStyle: { - ...styles.fullscreenCard, - padding: this.props.isSmallScreenWidth ? spacing.p0.padding : spacing.p5.padding, - }, - cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, true, props), - cardOverlayEnabled: !this.props.isSmallScreenWidth, - isFullScreenModal: true, - cardOverlay: CardOverlay, - }; return ( - ); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 36349b089040..605d1c2936d7 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -29,6 +29,14 @@ import ReimbursementAccountPage from '../../../pages/ReimbursementAccount/Reimbu import RequestCallPage from '../../../pages/RequestCallPage'; import ReportDetailsPage from '../../../pages/ReportDetailsPage'; import WorkspaceSettingsPage from '../../../pages/workspace/WorkspaceSettingsPage'; +import WorkspaceInitialPage from '../../../pages/workspace/WorkspaceInitialPage'; +import WorkspaceCardPage from '../../../pages/workspace/WorkspaceCardPage'; +import WorkspaceReimbursePage from '../../../pages/workspace/WorkspaceReimbursePage'; +import WorkspaceInvoicesPage from '../../../pages/workspace/WorkspaceInvoicesPage'; +import WorkspaceBillsPage from '../../../pages/workspace/WorkspaceBillsPage'; +import WorkspaceTravelPage from '../../../pages/workspace/WorkspaceTravelPage'; +import WorkspaceMembersPage from '../../../pages/workspace/WorkspaceMembersPage'; +import WorkspaceBankAccountPage from '../../../pages/workspace/WorkspaceBankAccountPage'; const defaultSubRouteOptions = { cardStyle: styles.navigationScreenCardStyle, @@ -132,7 +140,7 @@ const NewChatModalStackNavigator = createModalStackNavigator([{ const WorkspaceModalStackNavigator = createModalStackNavigator([ { Component: WorkspaceInitialPage, - name: 'Workspace_Root', + name: 'Workspace_Initial', }, { Component: WorkspaceSettingsPage, @@ -236,11 +244,6 @@ const RequestCallModalStackNavigator = createModalStackNavigator([{ name: 'RequestCall_Root', }]); -const WorkspaceEditorNavigator = createModalStackNavigator([{ - Component: WorkspaceSettingsPage, - name: 'WorkspaceEditor_Root', -}]); - export { IOUBillStackNavigator, IOURequestModalStackNavigator, @@ -258,5 +261,5 @@ export { ReimbursementAccountModalStackNavigator, WorkspaceInviteModalStackNavigator, RequestCallModalStackNavigator, - WorkspaceEditorNavigator, + WorkspaceModalStackNavigator, }; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 52efa1e19c31..81cc9af3634d 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -38,32 +38,41 @@ export default { // Modal Screens Workspace: { screens: { - Workspace_Root: { - path: ROUTES.WORKSPACE, + Workspace_Initial: { + path: ROUTES.WORKSPACE_INITIAL, + exact: true, }, Workspace_Settings: { path: ROUTES.WORKSPACE_SETTINGS, + exact: true, }, Workspace_Card: { path: ROUTES.WORKSPACE_CARD, + exact: true, }, Workspace_Reimburse: { path: ROUTES.WORKSPACE_REIMBURSE, + exact: true, }, Workspace_Bills: { path: ROUTES.WORKSPACE_BILLS, + exact: true, }, Workspace_Invoices: { path: ROUTES.WORKSPACE_INVOICES, + exact: true, }, Workspace_Travel: { path: ROUTES.WORKSPACE_TRAVEL, + exact: true, }, Workspace_Members: { path: ROUTES.WORKSPACE_MEMBERS, + exact: true, }, WorkspaceBankAccountPage: { path: ROUTES.WORKSPACE_BANKACCOUNT, + exact: true, }, }, }, @@ -183,13 +192,6 @@ export default { WorkspaceInvite_Root: ROUTES.WORKSPACE_INVITE, }, }, - - WorkspaceEditor: { - screens: { - WorkspaceEditor_Root: ROUTES.WORKSPACE_EDITOR, - }, - }, - RequestCall: { screens: { RequestCall_Root: ROUTES.REQUEST_CALL, diff --git a/src/pages/settings/InitialPage.js b/src/pages/settings/InitialPage.js index 37ca51a08910..da23f72c3d20 100755 --- a/src/pages/settings/InitialPage.js +++ b/src/pages/settings/InitialPage.js @@ -157,7 +157,7 @@ const InitialSettingsPage = ({ title: policy.name, icon: policy.avatarURL ? policy.avatarURL : Building, iconType: policy.avatarURL ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON, - action: () => Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)), + action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)), iconStyles: [styles.popoverMenuIconEmphasized], iconFill: themeColors.iconReversed, })) diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index f56f3a207026..ad2e0b6b658d 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -97,8 +97,8 @@ const WorkspaceInitialPage = ({ { translationKey: 'workspace.common.members', icon: Users, - action: () => Navigation.navigate(ROUTES.getWorkspacePeopleRoute(policy.id)), - isActive: Navigation.isActiveRoute(ROUTES.getWorkspacePeopleRoute(policy.id)), + action: () => Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id)), + isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceMembersRoute(policy.id)), }, { translationKey: 'workspace.common.bankAccount', @@ -112,6 +112,12 @@ const WorkspaceInitialPage = ({ return ( + Navigation.navigate(ROUTES.SETTINGS)} + onCloseButtonPress={() => Navigation.dismissModal(true)} + /> Date: Wed, 6 Oct 2021 11:14:01 -0400 Subject: [PATCH 006/119] Update link text and icons --- src/languages/en.js | 16 +++++++------- src/pages/workspace/WorkspaceInitialPage.js | 24 +++++++++------------ 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 98eb817c1ee8..8caf58a9d1ab 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -621,16 +621,16 @@ export default { }, workspace: { common: { - card: 'Expensify Card', + card: 'Issue corporate cards', workspace: 'Workspace', edit: 'Edit workspace', - settings: 'Settings', - reimburse: 'Reimburse', - bills: 'Bills', - invoices: 'Invoices', - travel: 'Travel', - members: 'Members', - bankAccount: 'Bank Account', + settings: 'General settings', + reimburse: 'Reimburse receipts', + bills: 'Pay bills', + invoices: 'Send invoices', + travel: 'Book travel', + members: 'Manage members', + bankAccount: 'Connect bank account', }, new: { newWorkspace: 'New workspace', diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index ad2e0b6b658d..8dc78f6894d7 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -11,10 +11,13 @@ import styles from '../../styles/styles'; import Text from '../../components/Text'; import Icon from '../../components/Icon'; import { - Users, + Bank, + Gear, ExpensifyCard, - Workspace, Pencil, + Receipt, + Users, + Workspace, } from '../../components/Icon/Expensicons'; import ScreenWrapper from '../../components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; @@ -60,7 +63,7 @@ const WorkspaceInitialPage = ({ const menuItems = [ { translationKey: 'workspace.common.settings', - icon: ExpensifyCard, + icon: Gear, action: () => Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(policy.id)), isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceSettingsRoute(policy.id)), }, @@ -72,7 +75,7 @@ const WorkspaceInitialPage = ({ }, { translationKey: 'workspace.common.reimburse', - icon: ExpensifyCard, + icon: Receipt, action: () => Navigation.navigate(ROUTES.getWorkspaceReimburseRoute(policy.id)), isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceReimburseRoute(policy.id)), }, @@ -102,7 +105,7 @@ const WorkspaceInitialPage = ({ }, { translationKey: 'workspace.common.bankAccount', - icon: Users, + icon: Bank, action: () => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(policy.id)), isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceBankAccountRoute(policy.id)), }, @@ -113,10 +116,10 @@ const WorkspaceInitialPage = ({ return ( Navigation.navigate(ROUTES.SETTINGS)} - onCloseButtonPress={() => Navigation.dismissModal(true)} + onCloseButtonPress={() => Navigation.dismissModal()} /> - {isSmallScreenWidth - && ( - Navigation.dismissModal()} - /> - )} Date: Wed, 6 Oct 2021 12:46:51 -0400 Subject: [PATCH 007/119] Add copy and a new component for ordered list --- src/components/OrderedList.js | 32 +++ src/languages/en.js | 6 + src/pages/workspace/WorkspaceCardPage.js | 299 ++++------------------ src/pages/workspace/WorkspaceCardPage2.js | 274 ++++++++++++++++++++ src/styles/styles.js | 7 + src/styles/utilities/flex.js | 4 + 6 files changed, 372 insertions(+), 250 deletions(-) create mode 100644 src/components/OrderedList.js create mode 100644 src/pages/workspace/WorkspaceCardPage2.js diff --git a/src/components/OrderedList.js b/src/components/OrderedList.js new file mode 100644 index 000000000000..a996461ad5d7 --- /dev/null +++ b/src/components/OrderedList.js @@ -0,0 +1,32 @@ +import React from 'react'; +import _ from 'underscore'; +import {Text, View} from 'react-native'; +import PropTypes from 'prop-types'; +import styles from '../styles/styles'; + +const propTypes = { + items: PropTypes.arrayOf(PropTypes.string), +}; +const defaultProps = { + items: [], +}; + +const OrderedList = ({items}) => ( + <> + {_.map(items, itemText => ( + + {'\u2022'} + {itemText} + + ))} + +); + +OrderedList.displayName = 'OrderedList'; +OrderedList.propTypes = propTypes; +OrderedList.defaultProps = defaultProps; + +export default OrderedList; diff --git a/src/languages/en.js b/src/languages/en.js index 8caf58a9d1ab..d8e8cf18059f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -652,6 +652,12 @@ export default { finishSetup: 'Finish setup', manageCards: 'Manage cards', cardReadyTagline: 'Your Expensify Cards are ready to go!', + header: 'Unlock free Expensify Cards', + noVBACopy: 'Connect a bank account to issue unlimited Expensify Cards for your workspace members, as well as all of these incredible benefits:', + benefit1: 'Up to 2% cash back', + benefit2: 'Digital and physical cards', + benefit3: 'No personal liability', + benefit4: 'Customizable limits', }, invite: { invitePeople: 'Invite people', diff --git a/src/pages/workspace/WorkspaceCardPage.js b/src/pages/workspace/WorkspaceCardPage.js index 652e8232e4f4..6de5f3db9253 100644 --- a/src/pages/workspace/WorkspaceCardPage.js +++ b/src/pages/workspace/WorkspaceCardPage.js @@ -1,274 +1,73 @@ import React from 'react'; -import { - View, ScrollView, StyleSheet, -} from 'react-native'; import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import _ from 'underscore'; -import {withNavigationFocus} from '@react-navigation/compat'; +import {View, Text, ScrollView} from 'react-native'; import styles from '../../styles/styles'; -import ONYXKEYS from '../../ONYXKEYS'; -import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; +import ROUTES from '../../ROUTES'; +import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import ScreenWrapper from '../../components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; -import compose from '../../libs/compose'; -import Text from '../../components/Text'; -import Button from '../../components/Button'; -import variables from '../../styles/variables'; -import themeDefault from '../../styles/themes/default'; -import ROUTES from '../../ROUTES'; -import CONST from '../../CONST'; -import Permissions from '../../libs/Permissions'; -import HeroCardWebImage from '../../../assets/images/cascading-cards-web.svg'; -import HeroCardMobileImage from '../../../assets/images/cascading-cards-mobile.svg'; -import BankAccount from '../../libs/models/BankAccount'; -import {openSignedInLink} from '../../libs/actions/App'; -import {setWorkspaceIDForReimbursementAccount} from '../../libs/actions/BankAccounts'; -import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes'; +import {Apple} from '../../components/Icon/Expensicons'; +import Icon from '../../components/Icon'; +import OrderedList from '../../components/OrderedList'; const propTypes = { - /* Onyx Props */ - - /** Beta features list */ - betas: PropTypes.arrayOf(PropTypes.string).isRequired, - - /** The details about the user that is signed in */ - user: PropTypes.shape({ - /** Whether or not the user has public domain */ - isFromPublicDomain: PropTypes.bool, - - /** Whether the user is using Expensify Card */ - isUsingExpensifyCard: PropTypes.bool, - }), - - /** URL Route params */ + /** The route object passed to this page from the navigator */ route: PropTypes.shape({ - /** Params from the URL path */ + /** Each parameter passed via the URL */ params: PropTypes.shape({ - /** policyID passed via route: /workspace/:policyID/people */ - policyID: PropTypes.string, - }), + /** The policyID that is being configured */ + policyID: PropTypes.string.isRequired, + }).isRequired, }).isRequired, - /** Bank account currently in setup */ - reimbursementAccount: reimbursementAccountPropTypes, - - /** Draft of bank account currently in setup */ - // eslint-disable-next-line react/forbid-prop-types - reimbursementAccountDraft: PropTypes.object, - - /** Is WorkspaceCard screen focused */ - isFocused: PropTypes.bool.isRequired, - ...withLocalizePropTypes, - ...windowDimensionsPropTypes, -}; - -const defaultProps = { - user: { - isFromPublicDomain: false, - isUsingExpensifyCard: false, - }, - reimbursementAccount: { - loading: false, - }, - reimbursementAccountDraft: {}, }; -class WorkspaceCardPage extends React.Component { - constructor(props) { - super(props); - - this.onPress = this.onPress.bind(this); - this.state = { - buttonText: this.props.translate('workspace.card.getStarted'), - }; - } - - componentDidMount() { - if (!Permissions.canUseFreePlan(this.props.betas)) { - console.debug('Not showing workspace card page because user is not on free plan beta'); - return Navigation.dismissModal(); - } - const buttonText = this.getButtonText(); - this.setState({buttonText}); - if (buttonText === this.props.translate('workspace.card.finishSetup')) { - this.openBankSetupModal(); - } - } - - shouldComponentUpdate(nextProps) { - if (this.props.isFocused || nextProps.isFocused) { - return true; - } - return false; - } - - componentDidUpdate() { - const buttonText = this.getButtonText(); - if (this.state.buttonText !== buttonText) { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({buttonText}); - } - } - - onPress() { - if (this.props.user.isFromPublicDomain) { - openSignedInLink(CONST.ADD_SECONDARY_LOGIN_URL); - } else if (this.props.user.isUsingExpensifyCard) { - openSignedInLink(CONST.MANAGE_CARDS_URL); - } else { - this.openBankSetupModal(); - } - } - - getButtonText() { - const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', ''); - const shouldFinishSetup = !_.every(Object.values(this.props.reimbursementAccountDraft), value => value === '') - || _.contains([ - BankAccount.STATE.SETUP, - BankAccount.STATE.VERIFYING, - BankAccount.STATE.PENDING, - BankAccount.STATE.OPEN, - ], achState); - - if (this.props.user.isFromPublicDomain) { - return this.props.translate('workspace.card.addEmail'); - } - if (this.props.user.isUsingExpensifyCard) { - return this.props.translate('workspace.card.manageCards'); - } - if (shouldFinishSetup) { - return this.props.translate('workspace.card.finishSetup'); - } - return this.props.translate('workspace.card.getStarted'); - } - - openBankSetupModal() { - setWorkspaceIDForReimbursementAccount(this.props.route.params.policyID); - Navigation.navigate(ROUTES.getBankAccountRoute()); - } +const WorkspaceCardPage = ({translate, route}) => ( + + Navigation.navigate(ROUTES.getWorkspaceInitialRoute(_.get(route, ['params', 'policyID'])))} + onCloseButtonPress={() => Navigation.dismissModal()} + /> + + + + + + + {translate('workspace.card.header')} + + + {/* TODO: Replace this with the proper icon */} + + + - render() { - return ( - - Navigation.dismissModal()} - onBackButtonPress={() => Navigation.goBack()} - shouldShowBackButton={this.props.isSmallScreenWidth} - shouldShowInboxCallButton - inboxCallTaskID="WorkspaceCompanyCards" - /> - - - - {this.props.isSmallScreenWidth || this.props.isMediumScreenWidth - ? ( - - ) - : ( - - )} + + + {translate('workspace.card.noVBACopy')} + - - - - {this.props.user.isUsingExpensifyCard - ? this.props.translate('workspace.card.cardReadyTagline') - : this.props.translate('workspace.card.tagline')} - - - {this.props.user.isFromPublicDomain - ? this.props.translate('workspace.card.publicCopy') - : this.props.translate('workspace.card.privateCopy')} - -