Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add back qr code download feature #49595

Merged
merged 6 commits into from
Sep 27, 2024
Merged

Add back qr code download feature #49595

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
af9e990
add back qr code download
lakchote Sep 23, 2024
f4b92c2
fix lint
lakchote Sep 23, 2024
d0bbf56
add back the qr code download option on native platforms
lakchote Sep 24, 2024
8e3855b
fix lint
lakchote Sep 24, 2024
94f3ef9
use compatible version with new Fabric arch
lakchote Sep 25, 2024
ebdeca5
add comments to indicate platform specific logic should be avoided at…
lakchote Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 21 additions & 15 deletions src/pages/ShareCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -58,7 +59,8 @@ function ShareCodePage({report, policy}: 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;
Expand All @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this hasn't been discussed previously, why didn't we follow the no specific platform conditions rule?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have the answer to that question. It is preexisting code, I think that's @robertjchen that did this feature.

I just didn't want to introduce potential side effects that may make this feature broken, since this PR aims to put back code that was present before.

(You've subscribed to this PR since I've chatted with you yesterday about react-native-view-shot)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right lol, had already forgotten

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know its annoying, but if we do ship the isMobile condition we should state the reason why. The more we have, the more people will use it as justification to introduce more.

Copy link
Contributor

@robertjchen robertjchen Sep 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this was from a while back- IIRC we added this hack due to limitations with the QR library, in order to get the feature working in time for a conference. 🤔

Since there's no time pressure anymore- maybe we can look into fixing this by seeing if the limitation still exists, and if we still need this check?

Copy link
Contributor Author

@lakchote lakchote Sep 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are the errors:

image image

And the warnings:
image

Copy link
Contributor Author

@lakchote lakchote Sep 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @Julesssss @robertjchen I think we still need to keep the platform check for now.

We'll remove the condition once #19834 is done.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:sadcat_okay: Yep, that would be the proper issue to handle this.

Could we make a big comment there noting that this is a bad thing and that it'll be addressed in #19834 🙏

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough, thanks for investigating

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added comments to make sure we don't follow the same logic elsewhere in our codebase.

Thank you both @Julesssss @robertjchen for checking!

const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
const url = isReport
? `${urlWithTrailingSlash}${ROUTES.REPORT_WITH_ID.getRoute(report.reportID)}`
Expand Down Expand Up @@ -111,24 +115,17 @@ function ShareCodePage({report, policy}: 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>

Expand All @@ -142,6 +139,15 @@ function ShareCodePage({report, policy}: ShareCodePageProps) {
onPress={() => Clipboard.setString(url)}
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`)}
Expand Down
31 changes: 18 additions & 13 deletions src/pages/workspace/WorkspaceProfileSharePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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();

Expand Down Expand Up @@ -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}
/>
Expand All @@ -126,6 +122,15 @@ 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>
Expand Down
Loading