Add Share page for Workspace Profile

src/ROUTES.ts

@@ -459,6 +459,10 @@ const ROUTES = {
         route: 'workspace/:policyID/profile/description',
         getRoute: (policyID: string) => `workspace/${policyID}/profile/description` as const,
     },
+    WORKSPACE_PROFILE_SHARE: {
+        route: 'workspace/:policyID/profile/share',
+        getRoute: (policyID: string) => `workspace/${policyID}/profile/share` as const,
+    },
     WORKSPACE_AVATAR: {
         route: 'workspace/:policyID/avatar',
         getRoute: (policyID: string) => `workspace/${policyID}/avatar` as const,

src/SCREENS.ts

@@ -209,6 +209,7 @@ const SCREENS = {
         INVITE_MESSAGE: 'Workspace_Invite_Message',
         CURRENCY: 'Workspace_Profile_Currency',
         DESCRIPTION: 'Workspace_Profile_Description',
+        SHARE: 'Workspace_Profile_Share',
         NAME: 'Workspace_Profile_Name',
     },
 

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -246,6 +246,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.INVITE_MESSAGE]: () => require('../../../pages/workspace/WorkspaceInviteMessagePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.NAME]: () => require('../../../pages/workspace/WorkspaceNamePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.DESCRIPTION]: () => require('../../../pages/workspace/WorkspaceProfileDescriptionPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.SHARE]: () => require('../../../pages/workspace/WorkspaceProfileSharePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CURRENCY]: () => require('../../../pages/workspace/WorkspaceProfileCurrencyPage').default as React.ComponentType,
     [SCREENS.REIMBURSEMENT_ACCOUNT]: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default as React.ComponentType,
     [SCREENS.GET_ASSISTANCE]: () => require('../../../pages/GetAssistancePage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -2,7 +2,7 @@ import type {CentralPaneName} from '@libs/Navigation/types';
 import SCREENS from '@src/SCREENS';
 
 const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> = {
-    [SCREENS.WORKSPACE.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION],
+    [SCREENS.WORKSPACE.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION, SCREENS.WORKSPACE.SHARE],
     [SCREENS.WORKSPACE.REIMBURSE]: [SCREENS.WORKSPACE.RATE_AND_UNIT, SCREENS.WORKSPACE.RATE_AND_UNIT_RATE, SCREENS.WORKSPACE.RATE_AND_UNIT_UNIT],
     [SCREENS.WORKSPACE.MEMBERS]: [SCREENS.WORKSPACE.INVITE, SCREENS.WORKSPACE.INVITE_MESSAGE],
 };

src/libs/Navigation/linkingConfig/config.ts

@@ -235,6 +235,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.DESCRIPTION]: {
                             path: ROUTES.WORKSPACE_PROFILE_DESCRIPTION.route,
                         },
+                        [SCREENS.WORKSPACE.SHARE]: {
+                            path: ROUTES.WORKSPACE_PROFILE_SHARE.route,
+                        },
                         [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
                             path: ROUTES.WORKSPACE_RATE_AND_UNIT.route,
                         },

src/libs/Navigation/types.ts

@@ -146,6 +146,7 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.CURRENCY]: undefined;
     [SCREENS.WORKSPACE.NAME]: undefined;
     [SCREENS.WORKSPACE.DESCRIPTION]: undefined;
+    [SCREENS.WORKSPACE.SHARE]: undefined;
     [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
         policyID: string;
     };

src/pages/workspace/WorkspaceProfilePage.js

@@ -7,20 +7,23 @@ import _ from 'underscore';
 import WorkspaceProfile from '@assets/images/workspace-profile.png';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
+import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
+import variables from '@styles/variables';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -57,13 +60,15 @@ const defaultProps = {
 function WorkspaceProfilePage({policy, currencyList, route}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
 
     const formattedCurrency = !_.isEmpty(policy) && !_.isEmpty(currencyList) && !!policy.outputCurrency ? `${policy.outputCurrency} - ${currencyList[policy.outputCurrency].symbol}` : '';
 
     const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_PROFILE_CURRENCY.getRoute(policy.id)), [policy.id]);
     const onPressName = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_PROFILE_NAME.getRoute(policy.id)), [policy.id]);
     const onPressDescription = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_PROFILE_DESCRIPTION.getRoute(policy.id)), [policy.id]);
+    const onPressShare = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_PROFILE_SHARE.getRoute(policy.id)), [policy.id]);
 
     const policyName = lodashGet(policy, 'name', '');
     const policyDescription = lodashGet(policy, 'description', '');
@@ -168,6 +173,15 @@ function WorkspaceProfilePage({policy, currencyList, route}) {
                                     </Text>
                                 </View>
                             </OfflineWithFeedback>
+                            {!readOnly && (
+                                <Button
+                                    style={[StyleUtils.getWidthStyle(variables.avatarSizeLarge), styles.mt6, styles.p0]}
+                                    text={translate('common.share')}
+                                    onPress={onPressShare}
+                                    small
+                                    shouldUseDefaultHover={false}
+                                />
+                            )}
                         </Section>
                     </View>
                 </ScrollView>

src/pages/workspace/WorkspaceProfileSharePage.tsx

@@ -0,0 +1,93 @@
+import React, {useRef} from 'react';
+import {ScrollView, 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 * as Illustrations from '@components/Icon/Illustrations';
+import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
+import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
+import useEnvironment from '@hooks/useEnvironment';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+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 DownloadMenuItem from './download';
+import withPolicy from './withPolicy';
+import type {WithPolicyProps} from './withPolicy';
+
+type Props = WithPolicyProps;
+
+function WorkspaceProfileSharePage({policy}: Props) {
+    const themeStyles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {environmentURL} = useEnvironment();
+    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const policyName = policy?.name ?? '';
+    const id = policy?.id ?? '';
+    const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
+
+    const url = `${urlWithTrailingSlash}${ROUTES.WORKSPACE_PROFILE.getRoute(id)}`;
+    return (
+        <ScreenWrapper
+            testID={WorkspaceProfileSharePage.displayName}
+            shouldShowOfflineIndicatorInWideScreen
+        >
+            <HeaderWithBackButton
+                title={translate('common.shareCode')}
+                onBackButtonPress={() => Navigation.goBack()}
+                icon={Illustrations.QRCode}
+            />
+            <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
+                <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
+                    <Section
+                        title={translate('shareCodePage.title')}
+                        isCentralPane
+                        childrenStyles={themeStyles.pt5}
+                        titleStyles={themeStyles.accountSettingsSectionTitle}
+                    >
+                        <View style={[isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.qrShareSection]}>
+                            <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>
+
+                        <View style={themeStyles.mt1}>
+                            <ContextMenuItem
+                                isAnonymousAction
+                                text={translate('qrCodes.copy')}
+                                icon={Expensicons.Copy}
+                                successIcon={Expensicons.Checkmark}
+                                successText={translate('qrCodes.copied')}
+                                onPress={() => Clipboard.setString(url)}
+                                shouldLimitWidth={false}
+                                wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+                            />
+
+                            {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+                            <DownloadMenuItem download={() => qrCodeRef.current?.download?.()} />
+                        </View>
+                    </Section>
+                </View>
+            </ScrollView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceProfileSharePage.displayName = 'WorkspaceProfileSharePage';
+
+export default withPolicy(WorkspaceProfileSharePage);

src/pages/workspace/download/index.native.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type DownloadQRCodeProps from './types';
+
+function DownloadMenuItem({download}: DownloadQRCodeProps) {
+    const themeStyles = useThemeStyles();
+    const {translate} = useLocalize();
+    return (
+        <MenuItem
+            isAnonymousAction
+            title={translate('common.download')}
+            icon={Expensicons.Download}
+            onPress={download}
+            wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+        />
+    );
+}
+
+DownloadMenuItem.displayName = 'DownloadMenuItem';
+
+export default DownloadMenuItem;

src/pages/workspace/download/index.tsx

@@ -0,0 +1,10 @@
+import type DownloadQRCodeProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DownloadMenuItem({download}: DownloadQRCodeProps) {
+    return null;
+}
+
+DownloadMenuItem.displayName = 'DownloadMenuItem';
+
+export default DownloadMenuItem;

src/pages/workspace/download/types.ts

@@ -0,0 +1,5 @@
+type DownloadQRCodeProps = {
+    download?: () => void;
+};
+
+export default DownloadQRCodeProps;