Merge pull request #49907 from Expensify/revert-49595-lucien/add-back…

…-qr-code-download [CP Staging] Revert "Add back qr code download feature" (cherry picked from commit b9226f4) (CP triggered by Julesssss)
Expensify · Sep 30, 2024 · e5c9173 · e5c9173
1 parent 7ae6436
commit e5c9173
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -169,7 +169,7 @@
     "react-native-svg": "15.6.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-view-shot": "4.0.0-alpha.3",
+    "react-native-view-shot": "3.8.0",
     "react-native-vision-camera": "4.0.0-beta.13",
     "react-native-web": "^0.19.12",
     "react-native-web-sound": "^0.1.3",

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
@@ -8,8 +8,8 @@ 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 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';
@@ -18,7 +18,6 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
-import getPlatform from '@libs/getPlatform';
 import Navigation from '@libs/Navigation/Navigation';
 import type {BackToParams} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -60,8 +59,7 @@ function ShareCodePage({report, policy, backTo}: ShareCodePageProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
-    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
-
+    const qrCodeRef = useRef<QRShareHandle>(null);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
     const isReport = !!report?.reportID;
@@ -85,11 +83,6 @@ function ShareCodePage({report, policy, backTo}: ShareCodePageProps) {
     }, [report, currentUserPersonalDetails, isReport]);
 
     const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? '';
-    // We should remove this logic once https://github.com/Expensify/App/issues/19834 is done
-    // We shouldn't introduce platform specific code in our codebase
-    // This is a temporary solution while Web is not supported for the QR code download feature
-    const platform = getPlatform();
-    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
     const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
     const url = isReport
         ? `${urlWithTrailingSlash}${ROUTES.REPORT_WITH_ID.getRoute(report.reportID)}`
@@ -119,17 +112,24 @@ function ShareCodePage({report, policy, backTo}: ShareCodePageProps) {
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
                 <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph5]}>
-                    <QRShareWithDownload
+                    {/* 
+                    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={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}
+                        logo={logo}
                         svgLogo={svgLogo}
-                        svgLogoFillColor={svgLogoFillColor}
                         logoBackgroundColor={logoBackgroundColor}
+                        svgLogoFillColor={svgLogoFillColor}
+                        logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                        logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                     />
                 </View>
 
@@ -143,18 +143,6 @@ function ShareCodePage({report, policy, backTo}: ShareCodePageProps) {
                         onPress={() => Clipboard.setString(url)}
                         shouldLimitWidth={false}
                     />
-                    {/* Remove this platform specific condition once https://github.com/Expensify/App/issues/19834 is done. 
-                    We shouldn't introduce platform specific code in our codebase. 
-                    This is a temporary solution while Web is not supported for the QR code download feature */}
-                    {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`)}

diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -1,14 +1,12 @@
 import React, {useMemo, 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 QRShare from '@components/QRShare';
+import type {QRShareHandle} from '@components/QRShare/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -21,7 +19,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
-import shouldAllowDownloadQRCode from '@libs/shouldAllowDownloadQRCode';
 import * as Url from '@libs/Url';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -34,7 +31,7 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
-    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
+    const qrCodeRef = useRef<QRShareHandle>(null);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const session = useSession();
 
@@ -99,14 +96,21 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                         </View>
 
                         <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph9]}>
-                            <QRShareWithDownload
+                            {/*
+                            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={policyName}
-                                logo={logo ?? expensifyLogo}
+                                logo={logo}
                                 svgLogo={svgLogo}
-                                svgLogoFillColor={svgLogoFillColor}
                                 logoBackgroundColor={logoBackgroundColor}
+                                svgLogoFillColor={svgLogoFillColor}
                                 logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                                 logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                             />
@@ -122,18 +126,6 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                                 shouldLimitWidth={false}
                                 wrapperStyle={themeStyles.sectionMenuItemTopDescription}
                             />
-                            {/* Remove this once https://github.com/Expensify/App/issues/19834 is done. 
-                            We shouldn't introduce platform specific code in our codebase. 
-                            This is a temporary solution while Web is not supported for the QR code download feature */}
-                            {shouldAllowDownloadQRCode && (
-                                <MenuItem
-                                    isAnonymousAction
-                                    title={translate('common.download')}
-                                    icon={Expensicons.Download}
-                                    onPress={() => qrCodeRef.current?.download?.()}
-                                    wrapperStyle={themeStyles.sectionMenuItemTopDescription}
-                                />
-                            )}
                         </View>
                     </View>
                 </ScrollView>