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

[CP Staging] Revert "Add back qr code download feature" #49907

Merged
merged 1 commit into from
Sep 30, 2024
+32 −53
Merged

[CP Staging] Revert "Add back qr code download feature" #49907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 3 additions & 4 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": "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",
Expand Down
42 changes: 15 additions & 27 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 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';
Expand All @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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)}`
Expand Down Expand Up @@ -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>

Expand All @@ -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`)}
Expand Down
34 changes: 13 additions & 21 deletions src/pages/workspace/WorkspaceProfileSharePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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();

Expand Down Expand Up @@ -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}
/>
Expand All @@ -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>
Expand Down
Loading