Add Share page for Workspace Profile

src/ROUTES.ts

@@ -463,6 +463,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

@@ -210,6 +210,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

@@ -247,6 +247,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/libs/shouldAllowDownloadQRCode/index.native.ts

@@ -0,0 +1,5 @@
+import type ShouldAllowDownloadQRCode from './types';
+
+const shouldAllowDownloadQRCode: ShouldAllowDownloadQRCode = true;
+
+export default shouldAllowDownloadQRCode;

src/libs/shouldAllowDownloadQRCode/index.ts

@@ -0,0 +1,5 @@
+import type ShouldAllowDownloadQRCode from './types';
+
+const shouldAllowDownloadQRCode: ShouldAllowDownloadQRCode = false;
+
+export default shouldAllowDownloadQRCode;

src/libs/shouldAllowDownloadQRCode/types.ts

@@ -0,0 +1,3 @@
+type ShouldAllowDownloadQRCode = boolean;
+
+export default ShouldAllowDownloadQRCode;

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={styles.mt6}
+                                    innerStyles={[StyleUtils.getHeight(variables.workspaceShareButtonHeight), StyleUtils.getWidthStyle(variables.workspaceShareButtonWidth)]}
+                                    text={translate('common.share')}
+                                    onPress={onPressShare}
+                                    small
+                                />
+                            )}
                         </Section>
                     </View>
                 </ScrollView>

src/pages/workspace/WorkspaceProfileSharePage.tsx

@@ -0,0 +1,88 @@
+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 MenuItem from '@components/MenuItem';
+import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
+import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
+import ScreenWrapper from '@components/ScreenWrapper';
+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 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';
+
+function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
+    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.share')}
+                onBackButtonPress={Navigation.goBack}
+            />
+            <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>
+
+                    <View style={[themeStyles.mt3, themeStyles.ph4]}>
+                        <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}
+                        />
+                        {shouldAllowDownloadQRCode && (
+                            <MenuItem
+                                isAnonymousAction
+                                title={translate('common.download')}
+                                icon={Expensicons.Download}
+                                onPress={() => qrCodeRef.current?.download?.()}
+                                wrapperStyle={themeStyles.sectionMenuItemTopDescription}
+                            />
+                        )}
+                    </View>
+                </View>
+            </ScrollView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceProfileSharePage.displayName = 'WorkspaceProfileSharePage';
+
+export default withPolicy(WorkspaceProfileSharePage);

src/styles/variables.ts

@@ -217,4 +217,6 @@ export default {
     updateTextViewContainerWidth: 310,
     updateViewHeaderHeight: 70,
     workspaceProfileName: 20,
+    workspaceShareButtonHeight: 40,
+    workspaceShareButtonWidth: 68,
 } as const;