Add support for viewing full screen Group Chat custom avatars

src/pages/NewChatConfirmPage.tsx

@@ -117,17 +117,17 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
                     source={stashedLocalAvatarImage ?? ReportUtils.getDefaultGroupAvatar(optimisticReportID.current)}
                     onImageSelected={(image) => {
                         fileRef.current = image;
-                        Report.setGroupDraft({avatarUri: image?.uri ?? ''});
+                        Report.setGroupDraft({avatarUri: image?.uri ?? '', originalFileName: image?.name});
                     }}
                     onImageRemoved={() => {
                         fileRef.current = undefined;
-                        Report.setGroupDraft({avatarUri: null});
+                        Report.setGroupDraft({avatarUri: null, originalFileName: null});
                     }}
                     size={CONST.AVATAR_SIZE.XLARGE}
                     avatarStyle={styles.avatarXLarge}
-                    shouldDisableViewPhoto
                     editIcon={Expensicons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
+                    onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(optimisticReportID.current))}
                 />
             </View>
             <MenuItemWithTopDescription

src/pages/ReportAvatar.tsx

@@ -10,33 +10,40 @@ import * as UserUtils from '@libs/UserUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {Policy, Report} from '@src/types/onyx';
+import type {NewGroupChatDraft, Policy, Report} from '@src/types/onyx';
 
 type ReportAvatarOnyxProps = {
     report: OnyxEntry<Report>;
     isLoadingApp: OnyxEntry<boolean>;
     policies: OnyxCollection<Policy>;
+    groupChatDraft: OnyxEntry<NewGroupChatDraft>;
 };
 
 type ReportAvatarProps = ReportAvatarOnyxProps & StackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT_AVATAR>;
 
-function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: ReportAvatarProps) {
+function ReportAvatar({report = {} as Report, policies, isLoadingApp = true, groupChatDraft}: ReportAvatarProps) {
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '0'}`];
-    const policyName = ReportUtils.getPolicyName(report, false, policy);
-    const avatarURL = ReportUtils.getWorkspaceAvatar(report);
+    const title = policy ? ReportUtils.getPolicyName(report, false, policy) : report?.reportName;
+    let avatarURL = policy ? ReportUtils.getWorkspaceAvatar(report) : report?.avatarUrl;
+    let fileName = policy?.originalFileName ?? title;
+
+    if (!avatarURL && groupChatDraft?.avatarUri && groupChatDraft?.originalFileName) {
+        avatarURL = groupChatDraft.avatarUri ?? null;
+        fileName = groupChatDraft.originalFileName ?? null;
+    }
 
     return (
         <AttachmentModal
-            headerTitle={policyName}
+            headerTitle={title}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, 0)}
             onModalClose={() => {
                 Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? ''));
             }}
             isWorkspaceAvatar
             maybeIcon
-            originalFileName={policy?.originalFileName ?? policyName}
-            shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
+            originalFileName={fileName}
+            shouldShowNotFoundPage={!report?.reportID && !groupChatDraft && !isLoadingApp}
             isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
         />
     );
@@ -54,4 +61,7 @@ export default withOnyx<ReportAvatarProps, ReportAvatarOnyxProps>({
     policies: {
         key: ONYXKEYS.COLLECTION.POLICY,
     },
+    groupChatDraft: {
+        key: ONYXKEYS.NEW_GROUP_CHAT_DRAFT,
+    },
 })(ReportAvatar);

src/pages/ReportDetailsPage.tsx

@@ -238,7 +238,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 isUsingDefaultAvatar={!report.avatarUrl}
                 size={CONST.AVATAR_SIZE.XLARGE}
                 avatarStyle={styles.avatarXLarge}
-                shouldDisableViewPhoto
                 onImageRemoved={() => {
                     // Calling this without a file will remove the avatar
                     Report.updateGroupChatAvatar(report.reportID ?? '');
@@ -250,6 +249,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 errors={report.errorFields?.avatar ?? null}
                 errorRowStyles={styles.mt6}
                 onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
+                onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID))}
             />
         ) : (
             <RoomHeaderAvatars

src/types/onyx/NewGroupChatDraft.ts

@@ -7,6 +7,7 @@ type NewGroupChatDraft = {
     participants: SelectedParticipant[];
     reportName: string | null;
     avatarUri: string | null;
+    originalFileName: string | null;
 };
 export type {SelectedParticipant};
 export default NewGroupChatDraft;