Skip to content

Commit

Permalink
Merge pull request #40171 from Expensify/lucien/fix-qrCode
Browse files Browse the repository at this point in the history 
Only show the QR code and not the download button
  • Loading branch information
@Beamanator
Beamanator authored Apr 12, 2024
2 parents b59ae94 + 90f0ada commit ed34d59
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 10 deletions.
41 changes: 39 additions & 2 deletions src/pages/ShareCodePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React from 'react';
import React, {useMemo, useRef} 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 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 @@ -13,7 +17,9 @@ import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import Clipboard from '@libs/Clipboard';
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 @@ -29,10 +35,30 @@ function ShareCodePage({report}: ShareCodePageProps) {
const themeStyles = useThemeStyles();
const {translate} = useLocalize();
const {environmentURL} = useEnvironment();
const qrCodeRef = useRef<QRShareHandle>(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)}`
Expand All @@ -46,13 +72,24 @@ function ShareCodePage({report}: ShareCodePageProps) {
shouldShowBackButton
/>
<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
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>

<View style={themeStyles.mt9}>
<ContextMenuItem
Expand Down
33 changes: 25 additions & 8 deletions src/pages/workspace/WorkspaceProfileSharePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import React from 'react';
import React, {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 {useSession} from '@components/OnyxProvider';
import QRShare from '@components/QRShare';
import type {QRShareHandle} from '@components/QRShare/types';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import useEnvironment from '@hooks/useEnvironment';
Expand All @@ -13,6 +17,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
import Clipboard from '@libs/Clipboard';
import Navigation from '@libs/Navigation/Navigation';
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 @@ -21,9 +26,11 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
const themeStyles = useThemeStyles();
const {translate} = useLocalize();
const {environmentURL} = useEnvironment();
const qrCodeRef = useRef<QRShareHandle>(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 @@ -41,13 +48,23 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
/>
<ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
<View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
{/*
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.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
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>

<View style={[themeStyles.mt3, themeStyles.ph4]}>
<ContextMenuItem
Expand Down

0 comments on commit ed34d59

Please sign in to comment.