Merge pull request #49595 from Expensify/lucien/add-back-qr-code-down…

…load Add back qr code download feature
Expensify · Sep 27, 2024 · 21f6a04 · 21f6a04
2 parents 0856034 + ebdeca5
commit 21f6a04
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 32 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": "3.8.0",
+    "react-native-view-shot": "4.0.0-alpha.3",
     "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 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';
@@ -18,6 +18,7 @@ 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';
@@ -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;
@@ -83,6 +85,11 @@ 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)}`
@@ -112,24 +119,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 +143,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 */}
+                    {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,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>