feat: add note to clarify the workspace join link functionality

src/languages/en.ts

@@ -2061,6 +2061,11 @@ export default {
             lineItemLevel: 'Line-item level',
             reportLevel: 'Report level',
             appliedOnExport: 'Not imported into Expensify, applied on export',
+            shareNote: {
+                header: 'Easily share your workspace with other members.',
+                content:
+                    'Share this QR code or copy the link below to make it easy for members to request access to your workspace. All requests to join the workspace will show up in the #admins room for your review.',
+            },
             createNewConnection: 'Create new connection',
             reuseExistingConnection: 'Reuse existing connection',
             existingConnections: 'Existing connections',

src/languages/es.ts

@@ -2096,6 +2096,11 @@ export default {
             lineItemLevel: 'Nivel de partida',
             reportLevel: 'Nivel de informe',
             appliedOnExport: 'No se importa en Expensify, se aplica en la exportación',
+            shareNote: {
+                header: 'Comparte fácilmente tu espacio de trabajo con otros miembros.',
+                content:
+                    'Comparte este código QR o copia el enlace de abajo para facilitar que los miembros soliciten acceso a tu espacio de trabajo. Todas las solicitudes para unirse al espacio de trabajo aparecerán en la sala #admins para tu revisión.',
+            },
             createNewConnection: 'Crear una nueva conexión',
             reuseExistingConnection: 'Reutilizar la conexión existente',
             existingConnections: 'Conexiones existentes',

src/pages/workspace/WorkspaceProfileSharePage.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import type {ImageSourcePropType} from 'react-native';
 import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
@@ -10,19 +10,24 @@ import QRShare from '@components/QRShare';
 import type {QRShareHandle} from '@components/QRShare/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
 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 ReportUtils from '@libs/ReportUtils';
 import * as Url from '@libs/Url';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import AccessOrNotFoundWrapper from './AccessOrNotFoundWrapper';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
 
+const adminsRoomMentionText = '#admins';
+
 function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
@@ -37,6 +42,22 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL);
 
     const url = `${urlWithTrailingSlash}${ROUTES.WORKSPACE_JOIN_USER.getRoute(id, adminEmail)}`;
+    const adminRoom = useMemo(() => {
+        if (!policy?.id) {
+            return undefined;
+        }
+        return ReportUtils.getRoom(CONST.REPORT.CHAT_TYPE.POLICY_ADMINS, policy?.id);
+    }, [policy?.id]);
+
+    const shareNote = useMemo(() => {
+        const header = translate('workspace.common.shareNote.header');
+        const content = translate('workspace.common.shareNote.content');
+        const adminRoomMentionIndex = content.indexOf(adminsRoomMentionText);
+        return {
+            header,
+            contentParts: [content.slice(0, adminRoomMentionIndex), content.slice(adminRoomMentionIndex + adminsRoomMentionText.length)],
+        };
+    }, [translate]);
 
     return (
         <AccessOrNotFoundWrapper
@@ -51,8 +72,29 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                     title={translate('common.share')}
                     onBackButtonPress={Navigation.goBack}
                 />
-                <ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
+                <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
                     <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
+                        <View style={[themeStyles.mh5]}>
+                            <Text style={[themeStyles.textHeadlineH1, themeStyles.mb2]}>{shareNote.header}</Text>
+                        </View>
+                        <View style={[themeStyles.mh5, themeStyles.mb9]}>
+                            <Text style={[themeStyles.textNormal]}>
+                                {shareNote.contentParts[0]}
+                                <TextLink
+                                    style={themeStyles.link}
+                                    onPress={() => {
+                                        if (!adminRoom?.reportID) {
+                                            return;
+                                        }
+                                        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(adminRoom.reportID));
+                                    }}
+                                >
+                                    #admins
+                                </TextLink>
+                                {shareNote.contentParts[1]}
+                            </Text>
+                        </View>
+
                         <View style={[themeStyles.workspaceSectionMobile, themeStyles.ph9]}>
                             {/* 
                             Right now QR code download button is not shown anymore