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

[CP Staging] Comment the QR code download button until it can be fixed #40109

Merged
merged 6 commits into from
Apr 12, 2024
+16 −80
Merged

[CP Staging] Comment the QR code download button until it can be fixed #40109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90647dd
comment the QR code download button until it can be fixed
lakchote Apr 11, 2024
f8deb98
add GH to comment to add back the download button as soon as it's pos…
lakchote Apr 11, 2024
ff3e484
fix lint
lakchote Apr 11, 2024
dbd8a9c
delete unused code
lakchote Apr 11, 2024
67d6942
only keep comment
lakchote Apr 11, 2024
1d978c3
fix prettier
lakchote Apr 11, 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
59 changes: 8 additions & 51 deletions src/pages/ShareCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
import React, {useMemo, useRef} from 'react';
import React from 'react';
import {View} from 'react-native';
import type {ImageSourcePropType} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
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 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';
import useEnvironment from '@hooks/useEnvironment';
import useLocalize from '@hooks/useLocalize';
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';
import * as UserUtils from '@libs/UserUtils';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {Report} from '@src/types/onyx';
Expand All @@ -36,36 +29,14 @@ function ShareCodePage({report}: ShareCodePageProps) {
const themeStyles = useThemeStyles();
const {translate} = useLocalize();
const {environmentURL} = useEnvironment();
const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
const currentUserPersonalDetails = useCurrentUserPersonalDetails();

const isReport = !!report?.reportID;

const subtitle = useMemo(() => {
if (isReport) {
if (ReportUtils.isExpenseReport(report)) {
return ReportUtils.getPolicyName(report);
}
if (ReportUtils.isMoneyRequestReport(report)) {
// generate subtitle from participants
return ReportUtils.getVisibleMemberIDs(report)
.map((accountID) => ReportUtils.getDisplayNameForParticipant(accountID))
.join(' & ');
}

return ReportUtils.getParentNavigationSubtitle(report).workspaceName ?? ReportUtils.getChatRoomSubtitle(report);
}

return currentUserPersonalDetails.login;
}, [report, currentUserPersonalDetails, isReport]);

const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? '';
const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
const url = isReport
? `${urlWithTrailingSlash}${ROUTES.REPORT_WITH_ID.getRoute(report.reportID)}`
: `${urlWithTrailingSlash}${ROUTES.PROFILE.getRoute(currentUserPersonalDetails.accountID ?? '')}`;
const platform = getPlatform();
const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;

return (
<ScreenWrapper testID={ShareCodePage.displayName}>
Expand All @@ -75,17 +46,13 @@ function ShareCodePage({report}: ShareCodePageProps) {
shouldShowBackButton
/>
<ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
<View style={[themeStyles.workspaceSectionMobile, themeStyles.ph5]}>
<QRShareWithDownload
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}
/>
</View>
{/*
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.
*/}

<View style={themeStyles.mt9}>
<ContextMenuItem
Expand All @@ -98,16 +65,6 @@ function ShareCodePage({report}: ShareCodePageProps) {
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`)}
icon={Expensicons.Cash}
Expand Down
37 changes: 8 additions & 29 deletions src/pages/workspace/WorkspaceProfileSharePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import React, {useRef} from 'react';
import React 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 ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import useEnvironment from '@hooks/useEnvironment';
Expand All @@ -17,9 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Clipboard from '@libs/Clipboard';
import Navigation from '@libs/Navigation/Navigation';
import shouldAllowDownloadQRCode from '@libs/shouldAllowDownloadQRCode';
import * as Url from '@libs/Url';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import withPolicy from './withPolicy';
import type {WithPolicyProps} from './withPolicy';
Expand All @@ -28,11 +21,9 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
const themeStyles = useThemeStyles();
const {translate} = useLocalize();
const {environmentURL} = useEnvironment();
const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
const {isSmallScreenWidth} = useWindowDimensions();
const session = useSession();

const policyName = policy?.name ?? '';
const id = policy?.id ?? '';
const adminEmail = session?.email ?? '';
const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
Expand All @@ -50,16 +41,13 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
/>
<ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
<View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
<View style={[themeStyles.workspaceSectionMobile, themeStyles.ph9]}>
<QRShareWithDownload
ref={qrCodeRef}
url={url}
title={policyName}
logo={(policy?.avatar ? policy.avatar : expensifyLogo) as ImageSourcePropType}
logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
/>
</View>
{/*
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.
*/}

<View style={[themeStyles.mt3, themeStyles.ph4]}>
<ContextMenuItem
Expand All @@ -72,15 +60,6 @@ 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