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.

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

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

Merged
merged 1 commit into from
Sep 30, 2024
Merged
Changes from all commits
Commits
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

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
Original file line number Diff line number Diff line change
@@ -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",
42 changes: 15 additions & 27 deletions src/pages/ShareCodePage.tsx
Original file line number Diff line number Diff line change
@@ -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';
@@ -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';
@@ -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;
@@ -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)}`
@@ -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>

@@ -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`)}
34 changes: 13 additions & 21 deletions src/pages/workspace/WorkspaceProfileSharePage.tsx
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';
@@ -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';
@@ -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();

@@ -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}
/>
@@ -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>