update the design for group chats

Expensify · Sep 25, 2023 · 32df987 · 32df987
1 parent f5409e7
commit 32df987
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 74 deletions.
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
@@ -37,6 +37,7 @@ import variables from '../styles/variables';
 import * as ValidationUtils from '../libs/ValidationUtils';
 import Permissions from '../libs/Permissions';
 import ROUTES from '../ROUTES';
+import MenuItemWithTopDescription from '../components/MenuItemWithTopDescription';
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
@@ -136,6 +137,11 @@ function ProfilePage(props) {
 
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
+    const notificationPreference =
+        chatReportWithCurrentUser.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN
+            ? props.translate(`notificationPreferencesPage.notificationPreferences.${chatReportWithCurrentUser.notificationPreference}`)
+            : '';
+
     // eslint-disable-next-line rulesdir/prefer-early-return
     useEffect(() => {
         if (ValidationUtils.isValidAccountRoute(accountID) && !hasMinimumDetails) {
@@ -227,6 +233,14 @@ function ProfilePage(props) {
                                 </View>
                             ) : null}
                             {shouldShowLocalTime && <AutoUpdateTime timezone={timezone} />}
+                            {chatReportWithCurrentUser.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN && (
+                                <MenuItemWithTopDescription
+                                    shouldShowRightIcon
+                                    title={notificationPreference}
+                                    description={props.translate('notificationPreferencesPage.label')}
+                                    onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NOTIFICATION_PREFERENCES.getRoute(chatReportWithCurrentUser.reportID))}
+                                />
+                            )}
                         </View>
                         {!isCurrentUser && !Session.isAnonymousUser() && (
                             <MenuItem

diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import _ from 'underscore';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -9,7 +9,6 @@ import ONYXKEYS from '../ONYXKEYS';
 import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import Navigation from '../libs/Navigation/Navigation';
 import ScreenWrapper from '../components/ScreenWrapper';
-import OptionsList from '../components/OptionsList';
 import ROUTES from '../ROUTES';
 import personalDetailsPropType from './personalDetailsPropType';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
@@ -19,8 +18,11 @@ import reportPropTypes from './reportPropTypes';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
 import CONST from '../CONST';
-import * as UserUtils from '../libs/UserUtils';
-import * as LocalePhoneNumber from '../libs/LocalePhoneNumber';
+import * as OptionsListUtils from '../libs/OptionsListUtils';
+import * as Expensicons from '../components/Icon/Expensicons';
+import MultipleAvatars from '../components/MultipleAvatars';
+import DisplayNames from '../components/DisplayNames';
+import MenuItem from '../components/MenuItem';
 
 const propTypes = {
     /* Onyx Props */
@@ -46,64 +48,53 @@ const defaultProps = {
     personalDetails: {},
 };
 
-/**
- * Returns all the participants in the active report
- *
- * @param {Object} report The active report object
- * @param {Object} personalDetails The personal details of the users
- * @param {Object} translate The localize
- * @return {Array}
- */
-const getAllParticipants = (report, personalDetails, translate) => {
-    let participantAccountIDs = report.participantAccountIDs;
+function ReportParticipantsPage(props) {
+    const participants = useMemo(() => lodashGet(props.report, 'participantAccountIDs', []), [props.report]);
+    const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(props.report), [props.report]);
+    const participantAvatars = OptionsListUtils.getAvatarsForAccountIDs(participants, props.personalDetails);
+    const displayNamesWithTooltips = useMemo(() => {
+        const hasMultipleParticipants = participants.length > 1;
+        return ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participants, props.personalDetails), hasMultipleParticipants);
+    }, [participants, props.personalDetails]);
+    const menuItems = useMemo(() => {
+        const items = [];
 
-    // Build participants list for IOU report - there is a possibility that participantAccountIDs may be undefined/empty
-    if (ReportUtils.isIOUReport(report)) {
-        const managerID = report.managerID || '';
-        const ownerAccountID = report.ownerAccountID || '';
-        participantAccountIDs = [managerID, ownerAccountID];
-    }
+        if (isArchivedRoom) {
+            return items;
+        }
 
-    return _.chain(participantAccountIDs)
-        .map((accountID, index) => {
-            const userPersonalDetail = lodashGet(personalDetails, accountID, {displayName: personalDetails.displayName || translate('common.hidden'), avatar: ''});
-            const userLogin = LocalePhoneNumber.formatPhoneNumber(userPersonalDetail.login || '') || translate('common.hidden');
+        if (participants.length) {
+            items.push({
+                key: CONST.REPORT_DETAILS_MENU_ITEM.MEMBERS,
+                translationKey: 'common.members',
+                icon: Expensicons.Users,
+                subtitle: participants.length,
+                isAnonymousAction: false,
+                action: () => {
+                    Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(props.report.reportID));
+                },
+            });
+        }
 
-            return {
-                alternateText: userLogin,
-                displayName: userPersonalDetail.displayName,
-                accountID: userPersonalDetail.accountID,
-                icons: [
-                    {
-                        id: accountID,
-                        source: UserUtils.getAvatar(userPersonalDetail.avatar, accountID),
-                        name: userLogin,
-                        type: CONST.ICON_TYPE_AVATAR,
-                    },
-                ],
-                keyForList: `${index}-${userLogin}`,
-                login: userLogin,
-                text: userPersonalDetail.displayName,
-                tooltipText: userLogin,
-                participantsList: [{accountID, displayName: userPersonalDetail.displayName}],
-            };
-        })
-        .sortBy((participant) => participant.displayName.toLowerCase())
-        .value();
-};
+        items.push({
+            key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
+            translationKey: 'common.settings',
+            icon: Expensicons.Gear,
+            isAnonymousAction: false,
+            action: () => {
+                Navigation.navigate(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID));
+            },
+        });
 
-function ReportParticipantsPage(props) {
-    const participants = _.map(getAllParticipants(props.report, props.personalDetails, props.translate), (participant) => ({
-        ...participant,
-        isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),
-    }));
+        return items;
+    }, [props.report, participants, isArchivedRoom]);
 
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             testID={ReportParticipantsPage.displayName}
         >
-            {({safeAreaPaddingBottomStyle}) => (
+            {() => (
                 <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || ReportUtils.isArchivedRoom(props.report)}>
                     <HeaderWithBackButton
                         title={props.translate(
@@ -120,27 +111,41 @@ function ReportParticipantsPage(props) {
                         style={[styles.containerWithSpaceBetween]}
                     >
                         {Boolean(participants.length) && (
-                            <OptionsList
-                                sections={[
-                                    {
-                                        title: '',
-                                        data: participants,
-                                        shouldShow: true,
-                                        indexOffset: 0,
-                                    },
-                                ]}
-                                onSelectRow={(option) => {
-                                    Navigation.navigate(ROUTES.PROFILE.getRoute(option.accountID));
-                                }}
-                                hideSectionHeaders
-                                showTitleTooltip
-                                showScrollIndicator
-                                disableFocusOptions
-                                boldStyle
-                                optionHoveredStyle={styles.hoveredComponentBG}
-                                contentContainerStyles={[safeAreaPaddingBottomStyle]}
-                            />
+                            <View>
+                                <MultipleAvatars
+                                    icons={participantAvatars}
+                                    shouldStackHorizontally
+                                    size="small"
+                                    isHovered={props.isHovered}
+                                    shouldUseCardBackground
+                                />
+                                <View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
+                                    <DisplayNames
+                                        displayNamesWithTooltips={displayNamesWithTooltips}
+                                        tooltipEnabled
+                                        numberOfLines={1}
+                                        textStyles={[styles.textHeadline, styles.textAlignCenter, styles.pre]}
+                                        shouldUseFullTitle
+                                    />
+                                </View>
+                            </View>
                         )}
+                        {_.map(menuItems, (item) => {
+                            const brickRoadIndicator =
+                                ReportUtils.hasReportNameError(props.report) && item.key === CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+                            return (
+                                <MenuItem
+                                    key={item.key}
+                                    title={props.translate(item.translationKey)}
+                                    subtitle={item.subtitle}
+                                    icon={item.icon}
+                                    onPress={item.action}
+                                    isAnonymousAction={item.isAnonymousAction}
+                                    shouldShowRightIcon
+                                    brickRoadIndicator={brickRoadIndicator || item.brickRoadIndicator}
+                                />
+                            );
+                        })}
                     </View>
                 </FullPageNotFoundView>
             )}

diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -26,7 +26,7 @@ const propTypes = {
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
 function NotificationPreferencePage(props) {
-    const shouldDisableNotificationPreferences = ReportUtils.shouldDisableSettings(props.report) || ReportUtils.isArchivedRoom(props.report);
+    const shouldDisableNotificationPreferences = ReportUtils.isArchivedRoom(props.report);
     const notificationPreferenceOptions = _.map(
         _.filter(_.values(CONST.REPORT.NOTIFICATION_PREFERENCE), (pref) => pref !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN),
         (preference) => ({

diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
@@ -63,7 +63,7 @@ function ReportSettingsPage(props) {
     const shouldDisableWelcomeMessage =
         ReportUtils.isArchivedRoom(report) || !ReportUtils.isChatRoom(report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN;
 
-    const shouldDisableSettings = _.isEmpty(report) || ReportUtils.shouldDisableSettings(report) || ReportUtils.isArchivedRoom(report);
+    const shouldDisableSettings = _.isEmpty(report) || ReportUtils.isArchivedRoom(report);
     const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report);
     const notificationPreference =
         report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN