Add back qr code download feature (with stable version)

ios/Podfile.lock

@@ -1981,8 +1981,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-view-shot (3.8.0):
+  - react-native-view-shot (4.0.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-webview (13.8.6):
     - DoubleConversion
     - glog
@@ -3231,7 +3250,7 @@ SPEC CHECKSUMS:
   react-native-quick-sqlite: 7c793c9f5834e756b336257a8d8b8239b7ceb451
   react-native-release-profiler: 131ec5e4145d900b2be2a8d6641e2ce0dd784259
   react-native-safe-area-context: 38fdd9b3c5561de7cabae64bd0cd2ce05d2768a1
-  react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688
+  react-native-view-shot: 6bafd491eb295b5834e05c469a37ecbd796d5b22
   react-native-webview: ad29375839c9aa0409ce8e8693291b42bdc067a4
   React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d
   React-NativeModulesApple: 7ff2e2cfb2e5fa5bdedcecf28ce37e696c6ef1e1

package.json

@@ -171,7 +171,7 @@
     "react-native-svg": "15.9.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-view-shot": "3.8.0",
+    "react-native-view-shot": "4.0.0",
     "react-native-vision-camera": "^4.6.1",
     "react-native-web": "0.19.13",
     "react-native-webview": "13.8.6",

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 QRShare from '@components/QRShare';
-import type {QRShareHandle} from '@components/QRShare/types';
+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';
@@ -21,6 +21,7 @@ import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
 import type {BackToParams} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
+import shouldAllowDownloadQRCode from '@libs/shouldAllowDownloadQRCode';
 import * as Url from '@libs/Url';
 import * as UserUtils from '@libs/UserUtils';
 import CONST from '@src/CONST';
@@ -59,7 +60,8 @@ function ShareCodePage({report, policy, backTo}: ShareCodePageProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
-    const qrCodeRef = useRef<QRShareHandle>(null);
+    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
+
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
 
     const isReport = !!report?.reportID;
@@ -112,24 +114,17 @@ function ShareCodePage({report, policy, backTo}: 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
+                    <QRShareWithDownload
                         ref={qrCodeRef}
                         url={url}
                         title={title}
                         subtitle={subtitle}
-                        logo={logo}
+                        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}
                         svgLogo={svgLogo}
-                        logoBackgroundColor={logoBackgroundColor}
                         svgLogoFillColor={svgLogoFillColor}
-                        logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
-                        logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
+                        logoBackgroundColor={logoBackgroundColor}
                     />
                 </View>
 
@@ -143,6 +138,18 @@ 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 */}
+                    {shouldAllowDownloadQRCode && (
+                        <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`)}

src/pages/workspace/WorkspaceProfileSharePage.tsx

@@ -1,12 +1,14 @@
 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 QRShare from '@components/QRShare';
-import type {QRShareHandle} from '@components/QRShare/types';
+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 Text from '@components/Text';
@@ -19,6 +21,7 @@ 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';
@@ -31,7 +34,7 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
-    const qrCodeRef = useRef<QRShareHandle>(null);
+    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const session = useSession();
 
@@ -96,21 +99,14 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                         </View>
 
                         <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
+                            <QRShareWithDownload
                                 ref={qrCodeRef}
                                 url={url}
                                 title={policyName}
-                                logo={logo}
+                                logo={logo ?? expensifyLogo}
                                 svgLogo={svgLogo}
-                                logoBackgroundColor={logoBackgroundColor}
                                 svgLogoFillColor={svgLogoFillColor}
+                                logoBackgroundColor={logoBackgroundColor}
                                 logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                                 logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                             />
@@ -126,6 +122,18 @@ 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>