Merge pull request Expensify#72446 from samranahm/revert-72436-revert-66883-65210/edit-room-avatar

feat: allow users to change user created workspace room avatar

Author: Beamanator

src/CONST/index.ts

@@ -1337,6 +1337,7 @@ const CONST = {
                     REMOVE_FROM_ROOM: 'REMOVEFROMROOM',
                     LEAVE_ROOM: 'LEAVEROOM',
                     UPDATE_ROOM_DESCRIPTION: 'UPDATEROOMDESCRIPTION',
+                    UPDATE_ROOM_AVATAR: 'UPDATEROOMAVATAR',
                 },
                 REJECTEDTRANSACTION_THREAD: 'REJECTEDTRANSACTION_THREAD',
                 REJECTED_TRANSACTION_MARKASRESOLVED: 'REJECTEDTRANSACTIONMARKASRESOLVED',

src/components/AvatarButtonWithIcon.tsx

@@ -61,6 +61,9 @@ type AvatarButtonWithIconProps = {
 
     /** Optionally override the default "Edit" icon */
     editIcon?: IconAsset;
+
+    /** The name associated with avatar */
+    name?: string;
 };
 
 /**
@@ -82,6 +85,7 @@ function AvatarButtonWithIcon({
     disabled = false,
     editIcon = Expensicons.Pencil,
     anchorRef,
+    name = '',
 }: AvatarButtonWithIconProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -110,6 +114,7 @@ function AvatarButtonWithIcon({
                             fallbackIcon={fallbackIcon}
                             size={size}
                             type={type}
+                            name={name}
                         />
                     ) : (
                         <DefaultAvatar />

src/components/AvatarWithImagePicker.tsx

@@ -69,6 +69,9 @@ type AvatarWithImagePickerProps = Omit<AvatarButtonWithIconProps, 'text' | 'onPr
 
     /** Allows to open an image without Attachment Picker. */
     enablePreview?: boolean;
+
+    /** The name associated with avatar */
+    name?: string;
 };
 
 const anchorAlignment = {horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP};
@@ -96,6 +99,7 @@ function AvatarWithImagePicker({
     onViewPhotoPress,
     enablePreview = false,
     editIcon = Expensicons.Pencil,
+    name = '',
 }: AvatarWithImagePickerProps) {
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
@@ -264,6 +268,7 @@ function AvatarWithImagePicker({
                                         type={type}
                                         disabledStyle={disabledStyle}
                                         editIconStyle={editIconStyle}
+                                        name={name}
                                     />
                                 </OfflineWithFeedback>
                                 <PopoverMenu

src/components/RoomHeaderAvatars.tsx

@@ -1,25 +1,33 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {clearAvatarErrors, getCurrentUserAccountID, updatePolicyRoomAvatar} from '@libs/actions/Report';
 import Navigation from '@libs/Navigation/Navigation';
+import {isUserCreatedPolicyRoom} from '@libs/ReportUtils';
+import {isDefaultAvatar} from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import type {Policy, Report} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
+import AvatarWithImagePicker from './AvatarWithImagePicker';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithoutFocus from './Pressable/PressableWithoutFocus';
 import Text from './Text';
 
 type RoomHeaderAvatarsProps = {
     icons: Icon[];
-    reportID: string;
+    report: Report;
+    policy: OnyxEntry<Policy>;
+    participants: number[];
 };
 
-function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
+function RoomHeaderAvatars({icons, report, policy, participants}: RoomHeaderAvatarsProps) {
     const navigateToAvatarPage = (icon: Icon) => {
         if (icon.type === CONST.ICON_TYPE_WORKSPACE && icon.id) {
-            Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(reportID, icon.id.toString()));
+            Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report?.reportID, icon.id.toString()));
             return;
         }
 
@@ -30,6 +38,8 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
 
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const currentUserAccountID = getCurrentUserAccountID();
+    const canEditRoomAvatar = isUserCreatedPolicyRoom(report) && participants.includes(currentUserAccountID) && !!policy && policy.role !== CONST.POLICY.ROLE.AUDITOR;
 
     if (!icons.length) {
         return null;
@@ -42,6 +52,31 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
             return;
         }
 
+        if (canEditRoomAvatar) {
+            return (
+                <AvatarWithImagePicker
+                    source={icon.source || report.avatarUrl}
+                    avatarID={icon.id}
+                    isUsingDefaultAvatar={!report.avatarUrl || isDefaultAvatar(icon.source)}
+                    size={CONST.AVATAR_SIZE.X_LARGE}
+                    avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]}
+                    onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID))}
+                    onImageRemoved={() => updatePolicyRoomAvatar(report.reportID)}
+                    onImageSelected={(file) => updatePolicyRoomAvatar(report.reportID, file)}
+                    editIcon={Expensicons.Camera}
+                    editIconStyle={styles.smallEditIconAccount}
+                    pendingAction={report.pendingFields?.avatar}
+                    errors={report.errorFields?.avatar ?? null}
+                    errorRowStyles={styles.mt6}
+                    onErrorClose={() => clearAvatarErrors(report.reportID)}
+                    style={[styles.w100, styles.mb3, styles.alignItemsStart, styles.sectionMenuItemTopDescription]}
+                    type={icon.type}
+                    editorMaskImage={Expensicons.ImageCropSquareMask}
+                    name={icon.name}
+                />
+            );
+        }
+
         return (
             <PressableWithoutFocus
                 style={styles.noOutline}

src/languages/de.ts

@@ -7170,6 +7170,8 @@ ${amount} für ${merchant} - ${date}`,
     roomChangeLog: {
         updateRoomDescription: 'setze die Raumbeschreibung auf:',
         clearRoomDescription: 'Raumbeschreibung gelöscht',
+        changedRoomAvatar: 'Hat das Raum-Avatar geändert',
+        removedRoomAvatar: 'Hat das Raum-Avatar entfernt',
     },
     delegate: {
         switchAccount: 'Konten wechseln:',

src/languages/en.ts

@@ -7118,6 +7118,8 @@ const translations = {
     roomChangeLog: {
         updateRoomDescription: 'set the room description to:',
         clearRoomDescription: 'cleared the room description',
+        changedRoomAvatar: 'changed the room avatar',
+        removedRoomAvatar: 'removed the room avatar',
     },
     delegate: {
         switchAccount: 'Switch accounts:',

src/languages/es.ts

@@ -7614,6 +7614,8 @@ ${amount} para ${merchant} - ${date}`,
     roomChangeLog: {
         updateRoomDescription: 'establece la descripción de la sala a:',
         clearRoomDescription: 'la descripción de la habitación ha sido borrada',
+        changedRoomAvatar: 'Cambió el avatar de la sala',
+        removedRoomAvatar: 'Eliminó el avatar de la sala',
     },
     delegate: {
         switchAccount: 'Cambiar de cuenta:',

src/languages/fr.ts

@@ -7173,6 +7173,8 @@ ${amount} pour ${merchant} - ${date}`,
     roomChangeLog: {
         updateRoomDescription: 'définir la description de la salle sur :',
         clearRoomDescription: 'effacé la description de la salle',
+        changedRoomAvatar: 'A changé l’avatar de la salle',
+        removedRoomAvatar: 'A supprimé l’avatar de la salle',
     },
     delegate: {
         switchAccount: 'Changer de compte :',

src/languages/it.ts

@@ -7178,6 +7178,8 @@ ${amount} per ${merchant} - ${date}`,
     roomChangeLog: {
         updateRoomDescription: 'imposta la descrizione della stanza su:',
         clearRoomDescription: 'cancellato la descrizione della stanza',
+        changedRoomAvatar: "Ha cambiato l'avatar della stanza",
+        removedRoomAvatar: "Ha rimosso l'avatar della stanza",
     },
     delegate: {
         switchAccount: 'Cambia account:',

src/languages/ja.ts

@@ -7107,6 +7107,8 @@ ${date} - ${merchant}に${amount}`,
     roomChangeLog: {
         updateRoomDescription: '部屋の説明を次のように設定します：',
         clearRoomDescription: '部屋の説明をクリアしました',
+        changedRoomAvatar: 'ルームのアバターを変更しました',
+        removedRoomAvatar: 'ルームのアバターを削除しました',
     },
     delegate: {
         switchAccount: 'アカウントを切り替える:',