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

Only show the QR code and not the download button #40171

Merged
merged 6 commits into from
Apr 12, 2024
+64 −10
Merged

Only show the QR code and not the download button #40171

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a2d4e1
Revert "Merge pull request #40109 from Expensify/lucien/temp-fix-qrCo…
lakchote Apr 12, 2024
ac0fc52
show the qr code but not the download button
lakchote Apr 12, 2024
4ddabf3
add back comment
lakchote Apr 12, 2024
d2f4f29
fix prettier
lakchote Apr 12, 2024
4f6506b
add back subtitle
lakchote Apr 12, 2024
90f0ada
fix logoRatio
lakchote Apr 12, 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
23 changes: 21 additions & 2 deletions src/pages/ShareCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import React, {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';
Expand All @@ -13,10 +15,14 @@ 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';
import QRShare from '@components/QRShare';
import type { QRShareHandle } from '@components/QRShare/types';

type ShareCodePageOnyxProps = {
/** The report currently being looked at */
Expand All @@ -29,10 +35,12 @@ 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 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 +54,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={title}
logo={isReport ? expensifyLogo : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType)}
lakchote marked this conversation as resolved.
Show resolved Hide resolved
logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
logoMarginRatio={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
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
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';
Expand All @@ -13,17 +15,22 @@ 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 QRShare from '@components/QRShare';
import type { QRShareHandle } from '@components/QRShare/types';
import withPolicy from './withPolicy';
import type {WithPolicyProps} from './withPolicy';

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
Loading