From 9a2d4e14f61f83a041997435a090a1a70fbd4a27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 12:21:55 +0200
Subject: [PATCH 1/6] Revert "Merge pull request #40109 from
 Expensify/lucien/temp-fix-qrCode-downloadBtn"

This reverts commit 4e4f55ab148e09f08a41381575c536e630614f59, reversing
changes made to bbc676100f7309a4495307885d0c6823b2825d47.
---
 src/pages/ShareCodePage.tsx                   | 59 ++++++++++++++++---
 .../workspace/WorkspaceProfileSharePage.tsx   | 37 +++++++++---
 2 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index ce2d8e005e4d..4f1bac01b556 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
+import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
+import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -12,8 +16,11 @@ import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
+import getPlatform from '@libs/getPlatform';
 import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import * as Url from '@libs/Url';
+import * as UserUtils from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
@@ -29,14 +36,36 @@ function ShareCodePage({report}: ShareCodePageProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
+    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
     const isReport = !!report?.reportID;
 
+    const subtitle = useMemo(() => {
+        if (isReport) {
+            if (ReportUtils.isExpenseReport(report)) {
+                return ReportUtils.getPolicyName(report);
+            }
+            if (ReportUtils.isMoneyRequestReport(report)) {
+                // generate subtitle from participants
+                return ReportUtils.getVisibleMemberIDs(report)
+                    .map((accountID) => ReportUtils.getDisplayNameForParticipant(accountID))
+                    .join(' & ');
+            }
+
+            return ReportUtils.getParentNavigationSubtitle(report).workspaceName ?? ReportUtils.getChatRoomSubtitle(report);
+        }
+
+        return currentUserPersonalDetails.login;
+    }, [report, currentUserPersonalDetails, isReport]);
+
+    const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? '';
     const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
     const url = isReport
         ? `${urlWithTrailingSlash}${ROUTES.REPORT_WITH_ID.getRoute(report.reportID)}`
         : `${urlWithTrailingSlash}${ROUTES.PROFILE.getRoute(currentUserPersonalDetails.accountID ?? '')}`;
+    const platform = getPlatform();
+    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
     return (
         <ScreenWrapper testID={ShareCodePage.displayName}>
@@ -46,13 +75,17 @@ function ShareCodePage({report}: ShareCodePageProps) {
                 shouldShowBackButton
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
-                {/* 
-                    Right now QR code download button is not shown anymore
-                    This is a temporary measure because right now it's broken because of the Fabric update.
-                    We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed.
-                    
-                    Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled.
-                */}
+                <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph5]}>
+                    <QRShareWithDownload
+                        ref={qrCodeRef}
+                        url={url}
+                        title={title}
+                        subtitle={subtitle}
+                        logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
+                        logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                        logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                    />
+                </View>
 
                 <View style={themeStyles.mt9}>
                     <ContextMenuItem
@@ -65,6 +98,16 @@ function ShareCodePage({report}: ShareCodePageProps) {
                         shouldLimitWidth={false}
                     />
 
+                    {isNative && (
+                        <MenuItem
+                            isAnonymousAction
+                            title={translate('common.download')}
+                            icon={Expensicons.Download}
+                            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                            onPress={() => qrCodeRef.current?.download?.()}
+                        />
+                    )}
+
                     <MenuItem
                         title={translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
                         icon={Expensicons.Cash}
diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
index 916723f60c9f..340c63c19ea7 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {View} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
+import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
 import {useSession} from '@components/OnyxProvider';
+import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
+import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useEnvironment from '@hooks/useEnvironment';
@@ -12,7 +17,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
+import shouldAllowDownloadQRCode from '@libs/shouldAllowDownloadQRCode';
 import * as Url from '@libs/Url';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
@@ -21,9 +28,11 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
+    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
     const {isSmallScreenWidth} = useWindowDimensions();
     const session = useSession();
 
+    const policyName = policy?.name ?? '';
     const id = policy?.id ?? '';
     const adminEmail = session?.email ?? '';
     const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
@@ -41,13 +50,16 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
                 <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
-                    {/* 
-                        Right now QR code download button is not shown anymore
-                        This is a temporary measure because right now it's broken because of the Fabric update.
-                        We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed.
-                        
-                        Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled.
-                    */}
+                    <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph9]}>
+                        <QRShareWithDownload
+                            ref={qrCodeRef}
+                            url={url}
+                            title={policyName}
+                            logo={(policy?.avatar ? policy.avatar : expensifyLogo) as ImageSourcePropType}
+                            logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                            logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                        />
+                    </View>
 
                     <View style={[themeStyles.mt3, themeStyles.ph4]}>
                         <ContextMenuItem
@@ -60,6 +72,15 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                             shouldLimitWidth={false}
                             wrapperStyle={themeStyles.sectionMenuItemTopDescription}
                         />
+                        {shouldAllowDownloadQRCode && (
+                            <MenuItem
+                                isAnonymousAction
+                                title={translate('common.download')}
+                                icon={Expensicons.Download}
+                                onPress={() => qrCodeRef.current?.download?.()}
+                                wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+                            />
+                        )}
                     </View>
                 </View>
             </ScrollView>

From ac0fc5223a3bf5cfb0bb35dd7f5867751ebb4ff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 12:59:43 +0200
Subject: [PATCH 2/6] show the qr code but not the download button

---
 src/pages/ShareCodePage.tsx                   | 57 +++++--------------
 .../workspace/WorkspaceProfileSharePage.tsx   | 21 ++-----
 2 files changed, 18 insertions(+), 60 deletions(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 4f1bac01b556..323143f584ed 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useRef} from 'react';
+import React, {useRef} from 'react';
 import {View} from 'react-native';
 import type {ImageSourcePropType} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -7,8 +7,6 @@ import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
-import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
-import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -16,7 +14,6 @@ import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
-import getPlatform from '@libs/getPlatform';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as Url from '@libs/Url';
@@ -24,6 +21,8 @@ import * as UserUtils from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
+import QRShare from '@components/QRShare';
+import type { QRShareHandle } from '@components/QRShare/types';
 
 type ShareCodePageOnyxProps = {
     /** The report currently being looked at */
@@ -36,36 +35,16 @@ function ShareCodePage({report}: ShareCodePageProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
-    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
+    const qrCodeRef = useRef<QRShareHandle>(null);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
     const isReport = !!report?.reportID;
 
-    const subtitle = useMemo(() => {
-        if (isReport) {
-            if (ReportUtils.isExpenseReport(report)) {
-                return ReportUtils.getPolicyName(report);
-            }
-            if (ReportUtils.isMoneyRequestReport(report)) {
-                // generate subtitle from participants
-                return ReportUtils.getVisibleMemberIDs(report)
-                    .map((accountID) => ReportUtils.getDisplayNameForParticipant(accountID))
-                    .join(' & ');
-            }
-
-            return ReportUtils.getParentNavigationSubtitle(report).workspaceName ?? ReportUtils.getChatRoomSubtitle(report);
-        }
-
-        return currentUserPersonalDetails.login;
-    }, [report, currentUserPersonalDetails, isReport]);
-
     const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? '';
     const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
     const url = isReport
         ? `${urlWithTrailingSlash}${ROUTES.REPORT_WITH_ID.getRoute(report.reportID)}`
         : `${urlWithTrailingSlash}${ROUTES.PROFILE.getRoute(currentUserPersonalDetails.accountID ?? '')}`;
-    const platform = getPlatform();
-    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
     return (
         <ScreenWrapper testID={ShareCodePage.displayName}>
@@ -76,15 +55,15 @@ function ShareCodePage({report}: ShareCodePageProps) {
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
                 <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph5]}>
-                    <QRShareWithDownload
-                        ref={qrCodeRef}
-                        url={url}
-                        title={title}
-                        subtitle={subtitle}
-                        logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
-                        logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
-                        logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
-                    />
+                <QRShare
+                    ref={qrCodeRef}
+                    url={url}
+                    title={title}
+                    subtitle={title}
+                    logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
+                    logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                    logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                />
                 </View>
 
                 <View style={themeStyles.mt9}>
@@ -98,16 +77,6 @@ function ShareCodePage({report}: ShareCodePageProps) {
                         shouldLimitWidth={false}
                     />
 
-                    {isNative && (
-                        <MenuItem
-                            isAnonymousAction
-                            title={translate('common.download')}
-                            icon={Expensicons.Download}
-                            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                            onPress={() => qrCodeRef.current?.download?.()}
-                        />
-                    )}
-
                     <MenuItem
                         title={translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
                         icon={Expensicons.Cash}
diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
index 340c63c19ea7..76834873f4fe 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -5,10 +5,7 @@ import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
-import MenuItem from '@components/MenuItem';
 import {useSession} from '@components/OnyxProvider';
-import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
-import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useEnvironment from '@hooks/useEnvironment';
@@ -17,10 +14,11 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
-import shouldAllowDownloadQRCode from '@libs/shouldAllowDownloadQRCode';
 import * as Url from '@libs/Url';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import QRShare from '@components/QRShare';
+import type { QRShareHandle } from '@components/QRShare/types';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
 
@@ -28,7 +26,7 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
-    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
+    const qrCodeRef = useRef<QRShareHandle>(null);
     const {isSmallScreenWidth} = useWindowDimensions();
     const session = useSession();
 
@@ -51,14 +49,14 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
             <ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
                 <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
                     <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph9]}>
-                        <QRShareWithDownload
+                        <QRShare
                             ref={qrCodeRef}
                             url={url}
                             title={policyName}
                             logo={(policy?.avatar ? policy.avatar : expensifyLogo) as ImageSourcePropType}
                             logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                             logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
-                        />
+                        />                        
                     </View>
 
                     <View style={[themeStyles.mt3, themeStyles.ph4]}>
@@ -72,15 +70,6 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                             shouldLimitWidth={false}
                             wrapperStyle={themeStyles.sectionMenuItemTopDescription}
                         />
-                        {shouldAllowDownloadQRCode && (
-                            <MenuItem
-                                isAnonymousAction
-                                title={translate('common.download')}
-                                icon={Expensicons.Download}
-                                onPress={() => qrCodeRef.current?.download?.()}
-                                wrapperStyle={themeStyles.sectionMenuItemTopDescription}
-                            />
-                        )}
                     </View>
                 </View>
             </ScrollView>

From 4ddabf3d5e43ef3d063686bfe4060a1a43f1b6e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 13:05:02 +0200
Subject: [PATCH 3/6] add back comment

---
 src/pages/ShareCodePage.tsx                       | 7 +++++++
 src/pages/workspace/WorkspaceProfileSharePage.tsx | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 323143f584ed..0a40dcb472ad 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -55,6 +55,13 @@ function ShareCodePage({report}: ShareCodePageProps) {
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
                 <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph5]}>
+                {/* 
+                    Right now QR code download button is not shown anymore
+                    This is a temporary measure because right now it's broken because of the Fabric update.
+                    We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed.
+                    
+                    Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled.
+                */}                    
                 <QRShare
                     ref={qrCodeRef}
                     url={url}
diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
index 76834873f4fe..f839dcc96e32 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -49,6 +49,13 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
             <ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
                 <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
                     <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph9]}>
+                        {/* 
+                            Right now QR code download button is not shown anymore
+                            This is a temporary measure because right now it's broken because of the Fabric update.
+                            We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed.
+                            
+                            Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled.
+                        */}                        
                         <QRShare
                             ref={qrCodeRef}
                             url={url}

From d2f4f29c0fc1e91a0a9c8b7370063cd2e51daea1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 13:14:47 +0200
Subject: [PATCH 4/6] fix prettier

---
 src/pages/ShareCodePage.tsx                   | 26 +++++++++----------
 .../workspace/WorkspaceProfileSharePage.tsx   |  8 +++---
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 0a40dcb472ad..97c9e313b320 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -7,6 +7,8 @@ import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
+import QRShare from '@components/QRShare';
+import type {QRShareHandle} from '@components/QRShare/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -21,8 +23,6 @@ import * as UserUtils from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
-import QRShare from '@components/QRShare';
-import type { QRShareHandle } from '@components/QRShare/types';
 
 type ShareCodePageOnyxProps = {
     /** The report currently being looked at */
@@ -55,22 +55,22 @@ function ShareCodePage({report}: ShareCodePageProps) {
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
                 <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph5]}>
-                {/* 
+                    {/* 
                     Right now QR code download button is not shown anymore
                     This is a temporary measure because right now it's broken because of the Fabric update.
                     We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed.
                     
                     Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled.
-                */}                    
-                <QRShare
-                    ref={qrCodeRef}
-                    url={url}
-                    title={title}
-                    subtitle={title}
-                    logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
-                    logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
-                    logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
-                />
+                */}
+                    <QRShare
+                        ref={qrCodeRef}
+                        url={url}
+                        title={title}
+                        subtitle={title}
+                        logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
+                        logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                        logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                    />
                 </View>
 
                 <View style={themeStyles.mt9}>
diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
index f839dcc96e32..73f24af7c325 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -6,6 +6,8 @@ import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {useSession} from '@components/OnyxProvider';
+import QRShare from '@components/QRShare';
+import type {QRShareHandle} from '@components/QRShare/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useEnvironment from '@hooks/useEnvironment';
@@ -17,8 +19,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as Url from '@libs/Url';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import QRShare from '@components/QRShare';
-import type { QRShareHandle } from '@components/QRShare/types';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
 
@@ -55,7 +55,7 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                             We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed.
                             
                             Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled.
-                        */}                        
+                        */}
                         <QRShare
                             ref={qrCodeRef}
                             url={url}
@@ -63,7 +63,7 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                             logo={(policy?.avatar ? policy.avatar : expensifyLogo) as ImageSourcePropType}
                             logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                             logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
-                        />                        
+                        />
                     </View>
 
                     <View style={[themeStyles.mt3, themeStyles.ph4]}>

From 4f6506b3054ba8623094e42728af21f3d845b1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 13:21:17 +0200
Subject: [PATCH 5/6] add back subtitle

---
 src/pages/ShareCodePage.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 97c9e313b320..f8b8d9b3de7a 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import type {ImageSourcePropType} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -40,6 +40,24 @@ function ShareCodePage({report}: ShareCodePageProps) {
 
     const isReport = !!report?.reportID;
 
+    const subtitle = useMemo(() => {
+        if (isReport) {
+            if (ReportUtils.isExpenseReport(report)) {
+                return ReportUtils.getPolicyName(report);
+            }
+            if (ReportUtils.isMoneyRequestReport(report)) {
+                // generate subtitle from participants
+                return ReportUtils.getVisibleMemberIDs(report)
+                    .map((accountID) => ReportUtils.getDisplayNameForParticipant(accountID))
+                    .join(' & ');
+            }
+
+            return ReportUtils.getParentNavigationSubtitle(report).workspaceName ?? ReportUtils.getChatRoomSubtitle(report);
+        }
+
+        return currentUserPersonalDetails.login;
+    }, [report, currentUserPersonalDetails, isReport]);
+
     const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? '';
     const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
     const url = isReport
@@ -66,7 +84,7 @@ function ShareCodePage({report}: ShareCodePageProps) {
                         ref={qrCodeRef}
                         url={url}
                         title={title}
-                        subtitle={title}
+                        subtitle={subtitle}
                         logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
                         logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                         logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}

From 90f0ada11d015f0b7cb523e54e13795043cf93cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 13:42:40 +0200
Subject: [PATCH 6/6] fix logoRatio

---
 src/pages/ShareCodePage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index f8b8d9b3de7a..d7e86b3101f5 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -86,8 +86,8 @@ function ShareCodePage({report}: ShareCodePageProps) {
                         title={title}
                         subtitle={subtitle}
                         logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
-                        logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
-                        logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                        logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                        logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                     />
                 </View>