#35715 workspace member details page

src/ROUTES.ts

@@ -550,6 +550,15 @@ 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, backTo?: string) => getUrlWithBackToParam(`workspace/${policyID}/members/${accountID}`, backTo),
+    },
+    WORKSPACE_MEMBER_ROLE_SELECTION: {
+        route: 'workspace/:policyID/members/:accountID/role-selection',
+        getRoute: (policyID: string, accountID: number) => `workspace/${policyID}/members/${accountID}/role-selection` as const,
+    },
+
     // Referral program promotion
     REFERRAL_DETAILS_MODAL: {
         route: 'referral/:contentType',

src/SCREENS.ts

@@ -225,6 +225,8 @@ const SCREENS = {
         NAME: 'Workspace_Profile_Name',
         CATEGORY_SETTINGS: 'Category_Settings',
         CATEGORIES_SETTINGS: 'Categories_Settings',
+        MEMBER_DETAILS: 'Workspace_Member_Details',
+        MEMBER_DETAILS_ROLE_SELECTION: 'Workspace_Member_Details_Role_Selection',
     },
 
     EDIT_REQUEST: {

src/languages/en.ts

@@ -1805,6 +1805,9 @@ 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',
+            removeMemberPrompt: ({memberName}) => `Are you sure you want to remove ${memberName}`,
+            removeMemberTitle: 'Remove member',
             makeMember: 'Make member',
             makeAdmin: 'Make admin',
             selectAll: 'Select all',

src/languages/es.ts

@@ -1829,6 +1829,9 @@ 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',
+            removeMemberPrompt: ({memberName}) => `¿Estás seguro de que deseas eliminar a ${memberName}`,
+            removeMemberTitle: 'Eliminar miembro',
             makeMember: 'Hacer miembro',
             makeAdmin: 'Hacer administrador',
             selectAll: 'Seleccionar todo',

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -251,6 +251,8 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.CURRENCY]: () => 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.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION]: () => require('../../../pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage').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,

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<Record<CentralPaneName, string[]>> = {
     [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.MEMBER_DETAILS_ROLE_SELECTION],
     [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],
 };

src/libs/Navigation/linkingConfig/config.ts

@@ -280,6 +280,12 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: {
                             path: ROUTES.WORKSPACE_CATEGORIES_SETTINGS.route,
                         },
+                        [SCREENS.WORKSPACE.MEMBER_DETAILS]: {
+                            path: ROUTES.WORKSPACE_MEMBER_DETAILS.route,
+                        },
+                        [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION]: {
+                            path: ROUTES.WORKSPACE_MEMBER_ROLE_SELECTION.route,
+                        },
                         [SCREENS.REIMBURSEMENT_ACCOUNT]: {
                             path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.route,
                             exact: true,

src/libs/Navigation/types.ts

@@ -88,6 +88,12 @@ type CentralPaneNavigatorParamList = {
     [SCREENS.WORKSPACE.MEMBERS]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.MEMBER_DETAILS]: {
+        policyID: string;
+    };
+    [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.CATEGORIES]: {
         policyID: string;
     };
@@ -204,6 +210,13 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.MEMBER_DETAILS]: {
+        accountID: string;
+        backTo: Routes;
+    };
+    [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION]: {
+        accountID: string;
+    };
     [SCREENS.GET_ASSISTANCE]: {
         backTo: Routes;
     };

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -254,6 +254,19 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
         [selectedEmployees, addUser, removeUser],
     );
 
+    /** Opens the member details page */
+    const openMemberDetails = useCallback(
+        (item: MemberOption) => {
+            if (!isPolicyAdmin) {
+                Navigation.navigate(ROUTES.PROFILE.getRoute(item.accountID));
+                return;
+            }
+
+            Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID, route.path));
+        },
+        [isPolicyAdmin, route.params.policyID, route.path],
+    );
+
     /**
      * Dismisses the errors on one item
      */
@@ -523,13 +536,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                         disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                         headerMessage={getHeaderMessage()}
                         headerContent={getHeaderContent()}
-                        onSelectRow={(item) => {
-                            if (!isPolicyAdmin) {
-                                Navigation.navigate(ROUTES.PROFILE.getRoute(item.accountID));
-                                return;
-                            }
-                            toggleUser(item.accountID);
-                        }}
+                        onSelectRow={openMemberDetails}
+                        onCheckboxPress={(item) => toggleUser(item.accountID)}
                         onSelectAll={() => toggleAllUsers(data)}
                         onDismissError={dismissError}
                         showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(personalDetails) || isEmptyObject(policyMembers))}

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -0,0 +1,147 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import Avatar from '@components/Avatar';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+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 * as Policy from '@userActions/Policy';
+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';
+
+type WorkspacePolicyOnyxProps = {
+    /** Personal details of all users */
+    personalDetails: OnyxEntry<PersonalDetailsList>;
+};
+
+type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & WorkspacePolicyOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS>;
+
+function WorkspaceMemberDetailsPage({personalDetails, policyMembers, policy, route}: WorkspaceMemberDetailsPageProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+
+    const [removeMemberConfirmModalVisible, setRemoveMemberConfirmModalVisible] = React.useState(false);
+
+    const accountID = Number(route?.params?.accountID) ?? 0;
+    const backTo = route?.params?.backTo;
+
+    const member = policyMembers?.[accountID];
+    const details = personalDetails?.[accountID] ?? ({} as PersonalDetails);
+    const avatar = details.avatar ?? UserUtils.getDefaultAvatar();
+    const fallbackIcon = details.fallbackIcon ?? '';
+    const displayName = details.displayName ?? '';
+
+    const askForConfirmationToRemove = () => {
+        setRemoveMemberConfirmModalVisible(true);
+    };
+
+    const removeUser = useCallback(() => {
+        Policy.removeMembers([accountID], route.params.policyID);
+        setRemoveMemberConfirmModalVisible(false);
+        Navigation.goBack(backTo);
+    }, [accountID, backTo, route.params.policyID]);
+
+    const redirectToProfile = useCallback(() => {
+        Navigation.navigate(ROUTES.PROFILE.getRoute(accountID));
+    }, [accountID]);
+
+    const openRoleSelectionModal = useCallback(() => {
+        Navigation.navigate(ROUTES.WORKSPACE_MEMBER_ROLE_SELECTION.getRoute(route.params.policyID, accountID));
+    }, [accountID, route.params.policyID]);
+
+    return (
+        <ScreenWrapper testID={WorkspaceMemberDetailsPage.displayName}>
+            <FullPageNotFoundView>
+                <HeaderWithBackButton
+                    title={displayName}
+                    subtitle={policy?.name}
+                    onBackButtonPress={() => Navigation.goBack(backTo)}
+                />
+                <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone, styles.justifyContentStart]}>
+                    <View style={styles.avatarSectionWrapper}>
+                        <OfflineWithFeedback pendingAction={details.pendingFields?.avatar}>
+                            <Avatar
+                                containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
+                                imageStyles={[styles.avatarXLarge]}
+                                source={UserUtils.getAvatar(avatar, accountID)}
+                                size={CONST.AVATAR_SIZE.XLARGE}
+                                fallbackIcon={fallbackIcon}
+                            />
+                        </OfflineWithFeedback>
+                        {Boolean(details.displayName ?? '') && (
+                            <Text
+                                style={[styles.textHeadline, styles.pre, styles.mb6, styles.w100, styles.textAlignCenter]}
+                                numberOfLines={1}
+                            >
+                                {displayName}
+                            </Text>
+                        )}
+                        <Button
+                            text={translate('workspace.people.removeMemberButtonTitle')}
+                            onPress={askForConfirmationToRemove}
+                            medium
+                            icon={Expensicons.RemoveMembers}
+                            iconStyles={{transform: [{scale: 0.8}]}}
+                            style={styles.mv5}
+                        />
+                        <ConfirmModal
+                            danger
+                            title={translate('workspace.people.removeMemberTitle')}
+                            isVisible={removeMemberConfirmModalVisible}
+                            onConfirm={removeUser}
+                            onCancel={() => setRemoveMemberConfirmModalVisible(false)}
+                            prompt={translate('workspace.people.removeMemberPrompt', {memberName: displayName})}
+                            confirmText={translate('common.remove')}
+                            cancelText={translate('common.cancel')}
+                        />
+                    </View>
+                    <View style={styles.w100}>
+                        <MenuItemWithTopDescription
+                            title={member?.role === CONST.POLICY.ROLE.ADMIN ? translate('common.admin') : translate('common.member')}
+                            description={translate('common.role')}
+                            shouldShowRightIcon
+                            onPress={openRoleSelectionModal}
+                        />
+                        <MenuItemWithTopDescription
+                            title={translate('common.profile')}
+                            shouldShowRightIcon
+                            icon={Expensicons.Info}
+                            iconFill={theme.icon}
+                            onPress={redirectToProfile}
+                        />
+                    </View>
+                </View>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceMemberDetailsPage.displayName = 'WorkspaceMemberDetailsPage';
+
+export default withPolicyAndFullscreenLoading(
+    withOnyx<WorkspaceMemberDetailsPageProps, WorkspacePolicyOnyxProps>({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+    })(WorkspaceMemberDetailsPage),
+);

src/pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage.tsx

@@ -0,0 +1,75 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {View} from 'react-native';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+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 * as Policy from '@userActions/Policy';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
+
+type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION>;
+
+function WorkspaceMemberDetailsRoleSelectionPage({policyMembers, route}: WorkspaceMemberDetailsPageProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const accountID = Number(route?.params?.accountID) ?? 0;
+    const member = policyMembers?.[accountID];
+
+    const items = [
+        {
+            value: CONST.POLICY.ROLE.ADMIN,
+            text: translate('common.admin'),
+            isSelected: member?.role === CONST.POLICY.ROLE.ADMIN,
+            keyForList: CONST.POLICY.ROLE.ADMIN,
+        },
+        {
+            value: CONST.POLICY.ROLE.USER,
+            text: translate('common.member'),
+            isSelected: member?.role === CONST.POLICY.ROLE.USER,
+            keyForList: CONST.POLICY.ROLE.USER,
+        },
+    ];
+
+    const changeRole = () => {
+        if (!member) {
+            return;
+        }
+
+        const newRole = member.role === CONST.POLICY.ROLE.ADMIN ? CONST.POLICY.ROLE.USER : CONST.POLICY.ROLE.ADMIN;
+        Policy.updateWorkspaceMembersRole(route.params.policyID, [accountID], newRole);
+        Navigation.goBack();
+    };
+
+    return (
+        <ScreenWrapper testID={WorkspaceMemberDetailsRoleSelectionPage.displayName}>
+            <FullPageNotFoundView>
+                <HeaderWithBackButton
+                    title={translate('common.role')}
+                    onBackButtonPress={() => Navigation.goBack()}
+                />
+                <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
+                    <SelectionList
+                        sections={[{data: items, indexOffset: 0}]}
+                        ListItem={RadioListItem}
+                        onSelectRow={changeRole}
+                        initiallyFocusedOptionKey={items.find((item) => item.isSelected)?.keyForList}
+                    />
+                </View>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceMemberDetailsRoleSelectionPage.displayName = 'WorkspaceMemberDetailsRoleSelectionPage';
+
+export default withPolicyAndFullscreenLoading(WorkspaceMemberDetailsRoleSelectionPage);