From 35f56187374bb73bc6ee0dd433634c448f3d8c8d Mon Sep 17 00:00:00 2001 From: burczu Date: Fri, 1 Mar 2024 12:23:11 +0100 Subject: [PATCH 01/28] basic member details page added --- src/ROUTES.ts | 5 +++++ src/SCREENS.ts | 1 + .../AppNavigator/ModalStackNavigators.tsx | 1 + .../linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts | 2 +- src/libs/Navigation/linkingConfig/config.ts | 3 +++ src/libs/Navigation/types.ts | 3 +++ src/pages/workspace/WorkspaceMembersPage.tsx | 8 +++++++- .../members/WorkspaceMemberDetailsPage.tsx | 13 +++++++++++++ 8 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index cfc287ba2cdcb..9e9e5a74edfc1 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -550,6 +550,11 @@ const ROUTES = { route: 'workspace/:policyID/tags', getRoute: (policyID: string) => `workspace/${policyID}/tags` as const, }, + WORKSPACE_MEMBER_DETAILS: { + route: 'workspace/:policyID/members/:accountID', + getRoute: (policyID: string, accountID: number) => `workspace/${policyID}/members/${accountID}` as const, + }, + // Referral program promotion REFERRAL_DETAILS_MODAL: { route: 'referral/:contentType', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 2369fe435febe..6ed470ff1f2b3 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -225,6 +225,7 @@ const SCREENS = { NAME: 'Workspace_Profile_Name', CATEGORY_SETTINGS: 'Category_Settings', CATEGORIES_SETTINGS: 'Categories_Settings', + MEMBER_DETAILS: 'Workspace_Member_Details', }, EDIT_REQUEST: { diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 545641957c9a6..3f20330cfd43e 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -251,6 +251,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/workspace/WorkspaceProfileCurrencyPage').default as React.ComponentType, [SCREENS.WORKSPACE.CATEGORY_SETTINGS]: () => require('../../../pages/workspace/categories/CategorySettingsPage').default as React.ComponentType, [SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: () => require('../../../pages/workspace/categories/WorkspaceCategoriesSettingsPage').default as React.ComponentType, + [SCREENS.WORKSPACE.MEMBER_DETAILS]: () => require('../../../pages/workspace/members/WorkspaceMemberDetailsPage').default as React.ComponentType, [SCREENS.REIMBURSEMENT_ACCOUNT]: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default as React.ComponentType, [SCREENS.GET_ASSISTANCE]: () => require('../../../pages/GetAssistancePage').default as React.ComponentType, [SCREENS.SETTINGS.TWO_FACTOR_AUTH]: () => require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default as React.ComponentType, diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index 7959999ee8138..863e9098f88de 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -4,7 +4,7 @@ import SCREENS from '@src/SCREENS'; const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = { [SCREENS.WORKSPACE.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION, SCREENS.WORKSPACE.SHARE], [SCREENS.WORKSPACE.REIMBURSE]: [SCREENS.WORKSPACE.RATE_AND_UNIT, SCREENS.WORKSPACE.RATE_AND_UNIT_RATE, SCREENS.WORKSPACE.RATE_AND_UNIT_UNIT], - [SCREENS.WORKSPACE.MEMBERS]: [SCREENS.WORKSPACE.INVITE, SCREENS.WORKSPACE.INVITE_MESSAGE], + [SCREENS.WORKSPACE.MEMBERS]: [SCREENS.WORKSPACE.INVITE, SCREENS.WORKSPACE.INVITE_MESSAGE, SCREENS.WORKSPACE.MEMBER_DETAILS], [SCREENS.WORKSPACE.WORKFLOWS]: [SCREENS.WORKSPACE.WORKFLOWS_APPROVER, SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY, SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET], [SCREENS.WORKSPACE.CATEGORIES]: [SCREENS.WORKSPACE.CATEGORY_SETTINGS, SCREENS.WORKSPACE.CATEGORIES_SETTINGS], }; diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 3ceb3c1ac7df0..c5d56d917a5c5 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -280,6 +280,9 @@ const config: LinkingOptions['config'] = { [SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: { path: ROUTES.WORKSPACE_CATEGORIES_SETTINGS.route, }, + [SCREENS.WORKSPACE.MEMBER_DETAILS]: { + path: ROUTES.WORKSPACE_MEMBER_DETAILS.route, + }, [SCREENS.REIMBURSEMENT_ACCOUNT]: { path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.route, exact: true, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 6ffbb3a358b00..734cca11f87f6 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -200,6 +200,9 @@ type SettingsNavigatorParamList = { [SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: { policyID: string; }; + [SCREENS.WORKSPACE.MEMBER_DETAILS]: { + accountID: string; + }, [SCREENS.GET_ASSISTANCE]: { backTo: Routes; }; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index b43659a776d94..7ca46e4b98a33 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -253,6 +253,11 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se [selectedEmployees, addUser, removeUser], ); + /** Opens the member details page */ + const openMemberDetails = useCallback((item: MemberOption) => { + Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID)); + }, [route.params.policyID]); + /** * Dismisses the errors on one item */ @@ -507,7 +512,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se disableKeyboardShortcuts={removeMembersConfirmModalVisible} headerMessage={getHeaderMessage()} headerContent={getHeaderContent()} - onSelectRow={(item) => toggleUser(item.accountID)} + onSelectRow={openMemberDetails} + onCheckboxPress={(item) => toggleUser(item.accountID)} onSelectAll={() => toggleAllUsers(data)} onDismissError={dismissError} showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) || isEmptyObject(policyMembers))} diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx new file mode 100644 index 0000000000000..18b74f89e39f4 --- /dev/null +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import {View} from "react-native"; +import Text from "@components/Text"; + +function WorkspaceMemberDetailsPage() { + return ( + + Workspace Member Details + + ); +} + +export default WorkspaceMemberDetailsPage; From be5275965754ad073b57eb4974cff414fc3c575a Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 5 Mar 2024 13:19:10 +0100 Subject: [PATCH 02/28] passing personal details, policy members and routes to details page --- .../members/WorkspaceMemberDetailsPage.tsx | 52 ++++++++++++++++--- 1 file changed, 45 insertions(+), 7 deletions(-) diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 18b74f89e39f4..616753c3c6c4a 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -1,13 +1,51 @@ -import React from "react"; -import {View} from "react-native"; -import Text from "@components/Text"; +import type {StackScreenProps} from '@react-navigation/stack'; +import React from 'react'; +import type {OnyxEntry} from 'react-native-onyx'; +import { withOnyx} from 'react-native-onyx'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import Navigation from '@navigation/Navigation'; +import type {SettingsNavigatorParamList} from '@navigation/types'; +import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; +import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type SCREENS from '@src/SCREENS'; +import type {PersonalDetailsList} from '@src/types/onyx'; + +type WorkspacePolicyOnyxProps = { + /** Personal details of all users */ + personalDetails: OnyxEntry; +}; + +type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & WorkspacePolicyOnyxProps & StackScreenProps; + +function WorkspaceMemberDetailsPage({policyMembers, personalDetails, route}: WorkspaceMemberDetailsPageProps) { + const {translate} = useLocalize(); + + const navigateBackTo = route?.params?.backTo; -function WorkspaceMemberDetailsPage() { return ( - + + + Navigation.goBack(navigateBackTo)} + /> + Workspace Member Details - + ); } -export default WorkspaceMemberDetailsPage; +WorkspaceMemberDetailsPage.displayName = 'WorkspaceMemberDetailsPage'; + +export default withPolicyAndFullscreenLoading( + withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + })(WorkspaceMemberDetailsPage), +); From 69ee8a17bc8c5fbcb4a453473335b57b4f5fd474 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 5 Mar 2024 13:19:30 +0100 Subject: [PATCH 03/28] passing backTo parameter to the details route --- src/ROUTES.ts | 2 +- src/libs/Navigation/types.ts | 3 ++- src/pages/workspace/WorkspaceMembersPage.tsx | 9 ++++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 9e9e5a74edfc1..e31bd3f7dfea7 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -552,7 +552,7 @@ const ROUTES = { }, WORKSPACE_MEMBER_DETAILS: { route: 'workspace/:policyID/members/:accountID', - getRoute: (policyID: string, accountID: number) => `workspace/${policyID}/members/${accountID}` as const, + getRoute: (policyID: string, accountID: number, backTo?: string) => getUrlWithBackToParam(`workspace/${policyID}/members/${accountID}`, backTo), }, // Referral program promotion diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 734cca11f87f6..c1cf58f61fdb2 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -202,7 +202,8 @@ type SettingsNavigatorParamList = { }; [SCREENS.WORKSPACE.MEMBER_DETAILS]: { accountID: string; - }, + backTo: Routes; + }; [SCREENS.GET_ASSISTANCE]: { backTo: Routes; }; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 7ca46e4b98a33..90280e56c747a 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -254,9 +254,12 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se ); /** Opens the member details page */ - const openMemberDetails = useCallback((item: MemberOption) => { - Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID)); - }, [route.params.policyID]); + const openMemberDetails = useCallback( + (item: MemberOption) => { + Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID, route.path)); + }, + [route.params.policyID], + ); /** * Dismisses the errors on one item From 210d2943d6b66167b7cb5125e767a2d4e465c8ec Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 5 Mar 2024 13:34:33 +0100 Subject: [PATCH 04/28] showing member details page title from its personal details --- .../members/WorkspaceMemberDetailsPage.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 616753c3c6c4a..334bd6a0d5111 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -6,7 +6,6 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; -import useLocalize from '@hooks/useLocalize'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; @@ -23,16 +22,23 @@ type WorkspacePolicyOnyxProps = { type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & WorkspacePolicyOnyxProps & StackScreenProps; function WorkspaceMemberDetailsPage({policyMembers, personalDetails, route}: WorkspaceMemberDetailsPageProps) { - const {translate} = useLocalize(); + const accountID = route?.params?.accountID; + const backTo = route?.params?.backTo; - const navigateBackTo = route?.params?.backTo; + const getHeaderButtonTitle = () => { + if (personalDetails && personalDetails[accountID]) { + return personalDetails?.[accountID]?.displayName ?? ''; + } + + return ''; + } return ( Navigation.goBack(navigateBackTo)} + title={getHeaderButtonTitle()} + onBackButtonPress={() => Navigation.goBack(backTo)} /> Workspace Member Details From 8e0f762cb88b154ae63a31a99264035de31ad504 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 5 Mar 2024 13:50:20 +0100 Subject: [PATCH 05/28] showing avatar added --- .../members/WorkspaceMemberDetailsPage.tsx | 48 +++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 334bd6a0d5111..6f710b787d6b7 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -12,7 +12,16 @@ import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPol import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type {PersonalDetailsList} from '@src/types/onyx'; +import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx'; +import {View} from "react-native"; +import useThemeStyles from "@hooks/useThemeStyles"; +import ROUTES from "@src/ROUTES"; +import CONST from "@src/CONST"; +import OfflineWithFeedback from "@components/OfflineWithFeedback"; +import lodashGet from "lodash/get"; +import Avatar from "@components/Avatar"; +import * as UserUtils from "@libs/UserUtils"; +import PressableWithoutFocus from "@components/Pressable/PressableWithoutFocus"; type WorkspacePolicyOnyxProps = { /** Personal details of all users */ @@ -22,16 +31,17 @@ type WorkspacePolicyOnyxProps = { type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & WorkspacePolicyOnyxProps & StackScreenProps; function WorkspaceMemberDetailsPage({policyMembers, personalDetails, route}: WorkspaceMemberDetailsPageProps) { - const accountID = route?.params?.accountID; + const styles = useThemeStyles(); + + const accountID = Number(route?.params?.accountID) ?? 0; const backTo = route?.params?.backTo; - const getHeaderButtonTitle = () => { - if (personalDetails && personalDetails[accountID]) { - return personalDetails?.[accountID]?.displayName ?? ''; - } + const details = personalDetails?.[accountID] ?? {} as PersonalDetails; + const avatar = details.avatar ?? UserUtils.getDefaultAvatar(); + const fallbackIcon = details.fallbackIcon ?? ''; - return ''; - } + // TODO: may be extended to return sutitle or other details + const getHeaderButtonTitle = () => details.displayName ?? ''; return ( @@ -40,8 +50,28 @@ function WorkspaceMemberDetailsPage({policyMembers, personalDetails, route}: Wor title={getHeaderButtonTitle()} onBackButtonPress={() => Navigation.goBack(backTo)} /> + + + Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))} + accessibilityLabel="Edit Avatar" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} + > + + + + + + Workspace Member Details + - Workspace Member Details ); } From 6dc39ced78ad5f9065954bb57d397719232a1be1 Mon Sep 17 00:00:00 2001 From: burczu Date: Tue, 5 Mar 2024 13:59:06 +0100 Subject: [PATCH 06/28] lint and prettier fixes --- src/libs/Navigation/types.ts | 3 +++ src/pages/workspace/WorkspaceMembersPage.tsx | 2 +- .../members/WorkspaceMemberDetailsPage.tsx | 25 +++++++++---------- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index c1cf58f61fdb2..2431d766396e2 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -88,6 +88,9 @@ type CentralPaneNavigatorParamList = { [SCREENS.WORKSPACE.MEMBERS]: { policyID: string; }; + [SCREENS.WORKSPACE.MEMBER_DETAILS]: { + policyID: string; + }; [SCREENS.WORKSPACE.CATEGORIES]: { policyID: string; }; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 90280e56c747a..70a05c076a5cb 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -258,7 +258,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se (item: MemberOption) => { Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID, route.path)); }, - [route.params.policyID], + [route.params.policyID, route.path], ); /** diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 6f710b787d6b7..4864c7bbfdd59 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -1,27 +1,26 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; +import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import { withOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import Avatar from '@components/Avatar'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as UserUtils from '@libs/UserUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx'; -import {View} from "react-native"; -import useThemeStyles from "@hooks/useThemeStyles"; -import ROUTES from "@src/ROUTES"; -import CONST from "@src/CONST"; -import OfflineWithFeedback from "@components/OfflineWithFeedback"; -import lodashGet from "lodash/get"; -import Avatar from "@components/Avatar"; -import * as UserUtils from "@libs/UserUtils"; -import PressableWithoutFocus from "@components/Pressable/PressableWithoutFocus"; type WorkspacePolicyOnyxProps = { /** Personal details of all users */ @@ -30,13 +29,13 @@ type WorkspacePolicyOnyxProps = { type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & WorkspacePolicyOnyxProps & StackScreenProps; -function WorkspaceMemberDetailsPage({policyMembers, personalDetails, route}: WorkspaceMemberDetailsPageProps) { +function WorkspaceMemberDetailsPage({personalDetails, route}: WorkspaceMemberDetailsPageProps) { const styles = useThemeStyles(); const accountID = Number(route?.params?.accountID) ?? 0; const backTo = route?.params?.backTo; - const details = personalDetails?.[accountID] ?? {} as PersonalDetails; + const details = personalDetails?.[accountID] ?? ({} as PersonalDetails); const avatar = details.avatar ?? UserUtils.getDefaultAvatar(); const fallbackIcon = details.fallbackIcon ?? ''; @@ -58,7 +57,7 @@ function WorkspaceMemberDetailsPage({policyMembers, personalDetails, route}: Wor accessibilityLabel="Edit Avatar" accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} > - + Date: Tue, 5 Mar 2024 14:22:17 +0100 Subject: [PATCH 07/28] remove from workspace button added --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + .../members/WorkspaceMemberDetailsPage.tsx | 55 +++++++++++-------- 3 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 0a52cca62ef55..71937e080e368 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1805,6 +1805,7 @@ export default { genericFailureMessage: 'An error occurred removing a user from the workspace, please try again.', removeMembersPrompt: 'Are you sure you want to remove these members?', removeMembersTitle: 'Remove members', + removeMemberButtonTitle: 'Remove from workspace', makeMember: 'Make member', makeAdmin: 'Make admin', selectAll: 'Select all', diff --git a/src/languages/es.ts b/src/languages/es.ts index 013255c1e11e3..8c81a8218c87c 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1829,6 +1829,7 @@ export default { genericFailureMessage: 'Se ha producido un error al intentar eliminar a un usuario del espacio de trabajo. Por favor, inténtalo más tarde.', removeMembersPrompt: '¿Estás seguro de que deseas eliminar a estos miembros?', removeMembersTitle: 'Eliminar miembros', + removeMemberButtonTitle: 'Quitar del espacio de trabajo', makeMember: 'Hacer miembro', makeAdmin: 'Hacer administrador', selectAll: 'Seleccionar todo', diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 4864c7bbfdd59..3952cbcc84519 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -7,7 +7,6 @@ import Avatar from '@components/Avatar'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -18,9 +17,11 @@ import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPol import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx'; +import Button from "@components/Button"; +import useLocalize from "@hooks/useLocalize"; +import * as Expensicons from "@components/Icon/Expensicons"; type WorkspacePolicyOnyxProps = { /** Personal details of all users */ @@ -31,6 +32,7 @@ type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & Wor function WorkspaceMemberDetailsPage({personalDetails, route}: WorkspaceMemberDetailsPageProps) { const styles = useThemeStyles(); + const {translate} = useLocalize(); const accountID = Number(route?.params?.accountID) ?? 0; const backTo = route?.params?.backTo; @@ -38,37 +40,46 @@ function WorkspaceMemberDetailsPage({personalDetails, route}: WorkspaceMemberDet const details = personalDetails?.[accountID] ?? ({} as PersonalDetails); const avatar = details.avatar ?? UserUtils.getDefaultAvatar(); const fallbackIcon = details.fallbackIcon ?? ''; + const displayName = details.displayName ?? ''; - // TODO: may be extended to return sutitle or other details - const getHeaderButtonTitle = () => details.displayName ?? ''; + const askForConfirmationToRemove = () => { + // TODO: Implement this + } return ( Navigation.goBack(backTo)} /> - Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))} - accessibilityLabel="Edit Avatar" - accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} - > - - - - + + + + {Boolean(details.displayName ?? '') && ( + + {displayName} + + )} +