From af9e9906014f7def16b4e4a2dcef92becf737d3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 23 Sep 2024 13:58:56 +0200 Subject: [PATCH 1/6] add back qr code download --- .../workspace/WorkspaceProfileSharePage.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx index 16a076205ad3..32743bf290de 100644 --- a/src/pages/workspace/WorkspaceProfileSharePage.tsx +++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx @@ -1,12 +1,15 @@ 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 QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; @@ -19,6 +22,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 +35,7 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {environmentURL} = useEnvironment(); - const qrCodeRef = useRef(null); + const qrCodeRef = useRef(null); const {shouldUseNarrowLayout} = useResponsiveLayout(); const session = useSession(); @@ -96,21 +100,14 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) { - {/* - 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. - */} - @@ -126,6 +123,15 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) { shouldLimitWidth={false} wrapperStyle={themeStyles.sectionMenuItemTopDescription} /> + {shouldAllowDownloadQRCode && ( + qrCodeRef.current?.download?.()} + wrapperStyle={themeStyles.sectionMenuItemTopDescription} + /> + )} From f4b92c2488a64629a700272b7220cc118c0fe900 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Mon, 23 Sep 2024 14:11:34 +0200 Subject: [PATCH 2/6] fix lint --- src/pages/workspace/WorkspaceProfileSharePage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx index 32743bf290de..21db727f6450 100644 --- a/src/pages/workspace/WorkspaceProfileSharePage.tsx +++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx @@ -7,9 +7,8 @@ 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 QRShareWithDownload from '@components/QRShare/QRShareWithDownload'; -import QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types'; +import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; From d0bbf5646ae5ad7d4eb63055269b2130afc22d02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Tue, 24 Sep 2024 11:39:43 +0200 Subject: [PATCH 3/6] add back the qr code download option on native platforms --- src/pages/ShareCodePage.tsx | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index e11e99a6e852..2a417a9a8174 100644 --- 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 * as ReportUtils from '@libs/ReportUtils'; import * as Url from '@libs/Url'; @@ -58,7 +59,8 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {environmentURL} = useEnvironment(); - const qrCodeRef = useRef(null); + const qrCodeRef = useRef(null); + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const isReport = !!report?.reportID; @@ -82,6 +84,8 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { }, [report, currentUserPersonalDetails, isReport]); const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? ''; + 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)}` @@ -111,24 +115,14 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { /> - {/* - 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. - */} - @@ -142,6 +136,15 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { onPress={() => Clipboard.setString(url)} shouldLimitWidth={false} /> + {isNative && ( + qrCodeRef.current?.download?.()} + /> + )} Date: Tue, 24 Sep 2024 11:48:01 +0200 Subject: [PATCH 4/6] fix lint --- src/pages/ShareCodePage.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 2a417a9a8174..0f8edf2c8d63 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -123,6 +123,9 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { 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} + svgLogoFillColor={svgLogoFillColor} + logoBackgroundColor={logoBackgroundColor} /> From 94f3ef903c4a68621f14cd0b317905912fad93a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Wed, 25 Sep 2024 11:09:23 +0200 Subject: [PATCH 5/6] use compatible version with new Fabric arch --- package-lock.json | 7 ++++--- package.json | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 87c7dd3d2600..b2638d613999 100644 --- a/package-lock.json +++ b/package-lock.json @@ -112,7 +112,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", @@ -35666,8 +35666,9 @@ } }, "node_modules/react-native-view-shot": { - "version": "3.8.0", - "license": "MIT", + "version": "4.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-4.0.0-alpha.3.tgz", + "integrity": "sha512-o0KVgC6XZqWmLUKVc4q6Ev1QW1kA4g/TF45wj8CgYS13wJuWYJ+nPGCHT9C2jvX/L65mtTollKXp2L8hbDnelg==", "dependencies": { "html2canvas": "^1.4.1" }, diff --git a/package.json b/package.json index 056d29a36c19..a80a12758745 100644 --- 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", From ebdeca565a4043acc328c4942625dbf5cbd771f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucien=20Akchot=C3=A9?= Date: Fri, 27 Sep 2024 15:07:37 +0200 Subject: [PATCH 6/6] add comments to indicate platform specific logic should be avoided at all costs --- src/pages/ShareCodePage.tsx | 6 ++++++ src/pages/workspace/WorkspaceProfileSharePage.tsx | 3 +++ 2 files changed, 9 insertions(+) diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 0f8edf2c8d63..d2ef35d2daa8 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -84,6 +84,9 @@ function ShareCodePage({report, policy}: 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); @@ -139,6 +142,9 @@ function ShareCodePage({report, policy}: 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 && ( + {/* 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 && (