From 2faa999467b6e644af7a480ab13e787dcfe90a40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= <lucien@expensify.com>
Date: Fri, 12 Apr 2024 07:16:47 +0200
Subject: [PATCH] Merge pull request #40109 from
 Expensify/lucien/temp-fix-qrCode-downloadBtn

[CP Staging] Comment the QR code download button until it can be fixed

(cherry picked from commit 4e4f55ab148e09f08a41381575c536e630614f59)
---
 src/pages/ShareCodePage.tsx                   | 59 +++----------------
 .../workspace/WorkspaceProfileSharePage.tsx   | 37 +++---------
 2 files changed, 16 insertions(+), 80 deletions(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 4f1bac01b556..ce2d8e005e4d 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -1,14 +1,10 @@
-import React, {useMemo, useRef} from 'react';
+import React 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';
@@ -16,11 +12,8 @@ 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';
@@ -36,36 +29,14 @@ 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}>
@@ -75,17 +46,13 @@ function ShareCodePage({report}: ShareCodePageProps) {
                 shouldShowBackButton
             />
             <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}
-                    />
-                </View>
+                {/* 
+                    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.mt9}>
                     <ContextMenuItem
@@ -98,16 +65,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..916723f60c9f 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -1,14 +1,9 @@
-import React, {useRef} from 'react';
+import React 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';
@@ -17,9 +12,7 @@ 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';
@@ -28,11 +21,9 @@ 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);
@@ -50,16 +41,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]}>
-                        <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>
+                    {/* 
+                        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.mt3, themeStyles.ph4]}>
                         <ContextMenuItem
@@ -72,15 +60,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>