From 10d487bd82cad8520232b90b071ea37cbcda8407 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Tue, 20 Feb 2024 17:22:33 +0200
Subject: [PATCH 01/11] Add Share page for Workspace Profile

---
 src/ROUTES.ts                                 |  4 +
 src/SCREENS.ts                                |  1 +
 .../AppNavigator/ModalStackNavigators.tsx     |  1 +
 .../CENTRAL_PANE_TO_RHP_MAPPING.ts            |  2 +-
 src/libs/Navigation/linkingConfig/config.ts   |  3 +
 src/libs/Navigation/types.ts                  |  1 +
 src/pages/workspace/WorkspaceProfilePage.js   | 14 +++
 .../workspace/WorkspaceProfileSharePage.tsx   | 93 +++++++++++++++++++
 src/pages/workspace/download/index.native.tsx | 23 +++++
 src/pages/workspace/download/index.tsx        |  8 ++
 10 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/workspace/WorkspaceProfileSharePage.tsx
 create mode 100644 src/pages/workspace/download/index.native.tsx
 create mode 100644 src/pages/workspace/download/index.tsx

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index c5480d363019..df2f61f51b1b 100644
--- a/src/ROUTES.ts
+++ b/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,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index ee3c64e8d804..d6fb17e43139 100644
--- a/src/SCREENS.ts
+++ b/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',
     },
 
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index d9835b01ceff..6fef34990086 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/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,
diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
index a2fcff927a93..7e38ed99105e 100755
--- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
+++ b/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],
 };
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 74a00dec0a1f..67ddd7f825fd 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/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,
                         },
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 04bc25736887..0be45c93097e 100644
--- a/src/libs/Navigation/types.ts
+++ b/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;
     };
diff --git a/src/pages/workspace/WorkspaceProfilePage.js b/src/pages/workspace/WorkspaceProfilePage.js
index 8a611898cbab..755410251ced 100644
--- a/src/pages/workspace/WorkspaceProfilePage.js
+++ b/src/pages/workspace/WorkspaceProfilePage.js
@@ -7,6 +7,7 @@ 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';
@@ -14,6 +15,7 @@ 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';
@@ -21,6 +23,7 @@ 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,6 +60,7 @@ 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}` : '';
@@ -64,6 +68,7 @@ function WorkspaceProfilePage({policy, currencyList, route}) {
     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>
diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
new file mode 100644
index 000000000000..8abc33dfee19
--- /dev/null
+++ b/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);
diff --git a/src/pages/workspace/download/index.native.tsx b/src/pages/workspace/download/index.native.tsx
new file mode 100644
index 000000000000..02fed0bd121f
--- /dev/null
+++ b/src/pages/workspace/download/index.native.tsx
@@ -0,0 +1,23 @@
+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';
+
+function DownloadMenuItem({download}: {download?: () => void}) {
+    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;
diff --git a/src/pages/workspace/download/index.tsx b/src/pages/workspace/download/index.tsx
new file mode 100644
index 000000000000..3d8bd37c7c12
--- /dev/null
+++ b/src/pages/workspace/download/index.tsx
@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DownloadMenuItem({download}: {download?: () => void}) {
+    return null
+}
+
+DownloadMenuItem.displayName = 'DownloadMenuItem';
+
+export default DownloadMenuItem;

From 21e7ef03cce260dbeadb3c3d19831e6e4127dfea Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Tue, 20 Feb 2024 17:37:32 +0200
Subject: [PATCH 02/11] Update linter

---
 src/pages/workspace/download/index.native.tsx | 3 ++-
 src/pages/workspace/download/index.tsx        | 6 ++++--
 src/pages/workspace/download/types.ts         | 5 +++++
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/workspace/download/types.ts

diff --git a/src/pages/workspace/download/index.native.tsx b/src/pages/workspace/download/index.native.tsx
index 02fed0bd121f..7642ef9fd628 100644
--- a/src/pages/workspace/download/index.native.tsx
+++ b/src/pages/workspace/download/index.native.tsx
@@ -3,8 +3,9 @@ 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 '@pages/workspace/download/types';
 
-function DownloadMenuItem({download}: {download?: () => void}) {
+function DownloadMenuItem({download}: DownloadQRCodeProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     return (
diff --git a/src/pages/workspace/download/index.tsx b/src/pages/workspace/download/index.tsx
index 3d8bd37c7c12..6a067400e674 100644
--- a/src/pages/workspace/download/index.tsx
+++ b/src/pages/workspace/download/index.tsx
@@ -1,6 +1,8 @@
+import type DownloadQRCodeProps from '@pages/workspace/download/types';
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function DownloadMenuItem({download}: {download?: () => void}) {
-    return null
+function DownloadMenuItem({download}: DownloadQRCodeProps) {
+    return null;
 }
 
 DownloadMenuItem.displayName = 'DownloadMenuItem';
diff --git a/src/pages/workspace/download/types.ts b/src/pages/workspace/download/types.ts
new file mode 100644
index 000000000000..adfaec015926
--- /dev/null
+++ b/src/pages/workspace/download/types.ts
@@ -0,0 +1,5 @@
+type DownloadQRCodeProps = {
+    download?: () => void;
+};
+
+export default DownloadQRCodeProps;

From 9ce5adc4787445ed646f1a5d1edb31c84467b146 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Tue, 20 Feb 2024 17:39:24 +0200
Subject: [PATCH 03/11] fix imports

---
 src/pages/workspace/download/index.native.tsx | 2 +-
 src/pages/workspace/download/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/download/index.native.tsx b/src/pages/workspace/download/index.native.tsx
index 7642ef9fd628..bedeaeb286e7 100644
--- a/src/pages/workspace/download/index.native.tsx
+++ b/src/pages/workspace/download/index.native.tsx
@@ -3,7 +3,7 @@ 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 '@pages/workspace/download/types';
+import type DownloadQRCodeProps from './types';
 
 function DownloadMenuItem({download}: DownloadQRCodeProps) {
     const themeStyles = useThemeStyles();
diff --git a/src/pages/workspace/download/index.tsx b/src/pages/workspace/download/index.tsx
index 6a067400e674..7d0d692e1cd5 100644
--- a/src/pages/workspace/download/index.tsx
+++ b/src/pages/workspace/download/index.tsx
@@ -1,4 +1,4 @@
-import type DownloadQRCodeProps from '@pages/workspace/download/types';
+import type DownloadQRCodeProps from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DownloadMenuItem({download}: DownloadQRCodeProps) {

From 8a8f56b502cc98c8fa91759668048b77f2bed458 Mon Sep 17 00:00:00 2001
From: narefyev91 <n.arefyev91@gmail.com>
Date: Wed, 21 Feb 2024 20:20:29 +0200
Subject: [PATCH 04/11] Update
 src/pages/workspace/WorkspaceProfileSharePage.tsx

Co-authored-by: Carlos Martins <luacmartins@gmail.com>
---
 src/pages/workspace/WorkspaceProfileSharePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
index 8abc33dfee19..e0a36fe27a77 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -44,7 +44,7 @@ function WorkspaceProfileSharePage({policy}: Props) {
         >
             <HeaderWithBackButton
                 title={translate('common.shareCode')}
-                onBackButtonPress={() => Navigation.goBack()}
+                onBackButtonPress={Navigation.goBack}
                 icon={Illustrations.QRCode}
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>

From 4c0ea5d6fbcf82214e1907382d5fa0bf4c87f2d9 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 00:13:08 +0200
Subject: [PATCH 05/11] updates after review

---
 .../shouldAllowDownloadQRCode/index.native.ts |  5 ++
 src/libs/shouldAllowDownloadQRCode/index.ts   |  5 ++
 src/libs/shouldAllowDownloadQRCode/types.ts   |  3 +
 src/pages/workspace/WorkspaceProfilePage.js   |  4 +-
 .../workspace/WorkspaceProfileSharePage.tsx   | 71 +++++++++----------
 src/pages/workspace/download/index.native.tsx | 24 -------
 src/pages/workspace/download/index.tsx        | 10 ---
 src/pages/workspace/download/types.ts         |  5 --
 src/styles/variables.ts                       |  2 +
 9 files changed, 50 insertions(+), 79 deletions(-)
 create mode 100644 src/libs/shouldAllowDownloadQRCode/index.native.ts
 create mode 100644 src/libs/shouldAllowDownloadQRCode/index.ts
 create mode 100644 src/libs/shouldAllowDownloadQRCode/types.ts
 delete mode 100644 src/pages/workspace/download/index.native.tsx
 delete mode 100644 src/pages/workspace/download/index.tsx
 delete mode 100644 src/pages/workspace/download/types.ts

diff --git a/src/libs/shouldAllowDownloadQRCode/index.native.ts b/src/libs/shouldAllowDownloadQRCode/index.native.ts
new file mode 100644
index 000000000000..ea9b2b9c8aa1
--- /dev/null
+++ b/src/libs/shouldAllowDownloadQRCode/index.native.ts
@@ -0,0 +1,5 @@
+import type ShouldAllowDownloadQRCode from './types';
+
+const shouldAllowDownloadQRCode: ShouldAllowDownloadQRCode = true;
+
+export default shouldAllowDownloadQRCode;
diff --git a/src/libs/shouldAllowDownloadQRCode/index.ts b/src/libs/shouldAllowDownloadQRCode/index.ts
new file mode 100644
index 000000000000..8331f7d4821f
--- /dev/null
+++ b/src/libs/shouldAllowDownloadQRCode/index.ts
@@ -0,0 +1,5 @@
+import type ShouldAllowDownloadQRCode from './types';
+
+const shouldAllowDownloadQRCode: ShouldAllowDownloadQRCode = false;
+
+export default shouldAllowDownloadQRCode;
diff --git a/src/libs/shouldAllowDownloadQRCode/types.ts b/src/libs/shouldAllowDownloadQRCode/types.ts
new file mode 100644
index 000000000000..3bd6c5dc4dd7
--- /dev/null
+++ b/src/libs/shouldAllowDownloadQRCode/types.ts
@@ -0,0 +1,3 @@
+type ShouldAllowDownloadQRCode = boolean;
+
+export default ShouldAllowDownloadQRCode;
diff --git a/src/pages/workspace/WorkspaceProfilePage.js b/src/pages/workspace/WorkspaceProfilePage.js
index 219a48b03493..d605d4b60e95 100644
--- a/src/pages/workspace/WorkspaceProfilePage.js
+++ b/src/pages/workspace/WorkspaceProfilePage.js
@@ -175,11 +175,11 @@ function WorkspaceProfilePage({policy, currencyList, route}) {
                             </OfflineWithFeedback>
                             {!readOnly && (
                                 <Button
-                                    style={[StyleUtils.getWidthStyle(variables.avatarSizeLarge), styles.mt6, styles.p0]}
+                                    style={styles.mt6}
+                                    innerStyles={[StyleUtils.getHeight(variables.workspaceShareButtonHeight), StyleUtils.getWidthStyle(variables.workspaceShareButtonWidth)]}
                                     text={translate('common.share')}
                                     onPress={onPressShare}
                                     small
-                                    shouldUseDefaultHover={false}
                                 />
                             )}
                         </Section>
diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
index e0a36fe27a77..dd03436042ca 100644
--- a/src/pages/workspace/WorkspaceProfileSharePage.tsx
+++ b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -5,27 +5,24 @@ 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 MenuItem from '@components/MenuItem';
 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 shouldAllowDownloadQRCode from '@libs/shouldAllowDownloadQRCode';
 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) {
+function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
@@ -43,45 +40,43 @@ function WorkspaceProfileSharePage({policy}: Props) {
             shouldShowOfflineIndicatorInWideScreen
         >
             <HeaderWithBackButton
-                title={translate('common.shareCode')}
+                title={translate('common.share')}
                 onBackButtonPress={Navigation.goBack}
-                icon={Illustrations.QRCode}
             />
-            <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
+            <ScrollView style={[themeStyles.flex1, themeStyles.pt2]}>
                 <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.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.mt1}>
-                            <ContextMenuItem
+                    <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
-                                text={translate('qrCodes.copy')}
-                                icon={Expensicons.Copy}
-                                successIcon={Expensicons.Checkmark}
-                                successText={translate('qrCodes.copied')}
-                                onPress={() => Clipboard.setString(url)}
-                                shouldLimitWidth={false}
+                                title={translate('common.download')}
+                                icon={Expensicons.Download}
+                                onPress={() => qrCodeRef.current?.download?.()}
                                 wrapperStyle={themeStyles.sectionMenuItemTopDescription}
                             />
-
-                            {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-                            <DownloadMenuItem download={() => qrCodeRef.current?.download?.()} />
-                        </View>
-                    </Section>
+                        )}
+                    </View>
                 </View>
             </ScrollView>
         </ScreenWrapper>
diff --git a/src/pages/workspace/download/index.native.tsx b/src/pages/workspace/download/index.native.tsx
deleted file mode 100644
index bedeaeb286e7..000000000000
--- a/src/pages/workspace/download/index.native.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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;
diff --git a/src/pages/workspace/download/index.tsx b/src/pages/workspace/download/index.tsx
deleted file mode 100644
index 7d0d692e1cd5..000000000000
--- a/src/pages/workspace/download/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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;
diff --git a/src/pages/workspace/download/types.ts b/src/pages/workspace/download/types.ts
deleted file mode 100644
index adfaec015926..000000000000
--- a/src/pages/workspace/download/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-type DownloadQRCodeProps = {
-    download?: () => void;
-};
-
-export default DownloadQRCodeProps;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c6c29fdc4b79..cec7dc968189 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -217,4 +217,6 @@ export default {
     updateTextViewContainerWidth: 310,
     updateViewHeaderHeight: 70,
     workspaceProfileName: 20,
+    workspaceShareButtonHeight: 40,
+    workspaceShareButtonWidth: 68,
 } as const;

From e56e46d7f7c147fbce1b2f09ff2b289ae91c03e5 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 15:57:52 +0200
Subject: [PATCH 06/11] fix imports

---
 src/pages/workspace/WorkspaceProfilePage.js | 4 ++--
 src/styles/variables.ts                     | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceProfilePage.js b/src/pages/workspace/WorkspaceProfilePage.js
index d605d4b60e95..1246007ecd1d 100644
--- a/src/pages/workspace/WorkspaceProfilePage.js
+++ b/src/pages/workspace/WorkspaceProfilePage.js
@@ -176,10 +176,10 @@ function WorkspaceProfilePage({policy, currencyList, route}) {
                             {!readOnly && (
                                 <Button
                                     style={styles.mt6}
-                                    innerStyles={[StyleUtils.getHeight(variables.workspaceShareButtonHeight), StyleUtils.getWidthStyle(variables.workspaceShareButtonWidth)]}
+                                    innerStyles={StyleUtils.getWidthStyle(variables.workspaceShareButtonWidth)}
                                     text={translate('common.share')}
                                     onPress={onPressShare}
-                                    small
+                                    medium
                                 />
                             )}
                         </Section>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index cec7dc968189..522f8704dc47 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -217,6 +217,5 @@ export default {
     updateTextViewContainerWidth: 310,
     updateViewHeaderHeight: 70,
     workspaceProfileName: 20,
-    workspaceShareButtonHeight: 40,
     workspaceShareButtonWidth: 68,
 } as const;

From b06928dcf4aad1b6b019fc041ed25c96a22d9b21 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 16:56:19 +0200
Subject: [PATCH 07/11] Clean up

---
 src/pages/workspace/WorkspaceProfilePage.js | 17 ++++++++++-------
 src/styles/variables.ts                     |  1 -
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/workspace/WorkspaceProfilePage.js b/src/pages/workspace/WorkspaceProfilePage.js
index 1246007ecd1d..93ff1edeb070 100644
--- a/src/pages/workspace/WorkspaceProfilePage.js
+++ b/src/pages/workspace/WorkspaceProfilePage.js
@@ -174,13 +174,16 @@ function WorkspaceProfilePage({policy, currencyList, route}) {
                                 </View>
                             </OfflineWithFeedback>
                             {!readOnly && (
-                                <Button
-                                    style={styles.mt6}
-                                    innerStyles={StyleUtils.getWidthStyle(variables.workspaceShareButtonWidth)}
-                                    text={translate('common.share')}
-                                    onPress={onPressShare}
-                                    medium
-                                />
+                                <View style={[styles.flexRow, styles.mnw120]}>
+                                    <Button
+                                        accessibilityLabel={translate('common.share')}
+                                        icon={Expensicons.QrCode}
+                                        style={styles.mt6}
+                                        text={translate('common.share')}
+                                        onPress={onPressShare}
+                                        medium
+                                    />
+                                </View>
                             )}
                         </Section>
                     </View>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 522f8704dc47..c6c29fdc4b79 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -217,5 +217,4 @@ export default {
     updateTextViewContainerWidth: 310,
     updateViewHeaderHeight: 70,
     workspaceProfileName: 20,
-    workspaceShareButtonWidth: 68,
 } as const;

From a4928b88bdbc1677dbd64c85ebe9833adbd84bd7 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 16:59:26 +0200
Subject: [PATCH 08/11] remove not needed imports

---
 src/pages/workspace/WorkspaceProfilePage.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceProfilePage.js b/src/pages/workspace/WorkspaceProfilePage.js
index 93ff1edeb070..901870118a3a 100644
--- a/src/pages/workspace/WorkspaceProfilePage.js
+++ b/src/pages/workspace/WorkspaceProfilePage.js
@@ -15,7 +15,6 @@ 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';
@@ -23,7 +22,6 @@ 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';
@@ -60,7 +58,6 @@ 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}` : '';

From 01d3c096a338827e98857aa230f959ea15fb0d89 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 17:35:45 +0200
Subject: [PATCH 09/11] New prop for icon in the button

---
 src/components/Button/index.tsx             | 6 +++++-
 src/pages/workspace/WorkspaceProfilePage.js | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1777b239e714..be35c20d5695 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -39,6 +39,9 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
     /** The fill color to pass into the icon. */
     iconFill?: string;
 
+    /** Indicates whether the icon should be small. */
+    isIconSmall?: boolean;
+
     /** Any additional styles to pass to the left icon container. */
     iconStyles?: StyleProp<ViewStyle>;
 
@@ -164,6 +167,7 @@ function Button(
         iconFill,
         iconStyles = [],
         iconRightStyles = [],
+        isIconSmall = false,
 
         small = false,
         large = false,
@@ -241,7 +245,7 @@ function Button(
                                 <Icon
                                     src={icon}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
-                                    small={small}
+                                    small={isIconSmall}
                                 />
                             </View>
                         )}
diff --git a/src/pages/workspace/WorkspaceProfilePage.js b/src/pages/workspace/WorkspaceProfilePage.js
index 901870118a3a..37c350386d15 100644
--- a/src/pages/workspace/WorkspaceProfilePage.js
+++ b/src/pages/workspace/WorkspaceProfilePage.js
@@ -179,6 +179,7 @@ function WorkspaceProfilePage({policy, currencyList, route}) {
                                         text={translate('common.share')}
                                         onPress={onPressShare}
                                         medium
+                                        isIconSmall
                                     />
                                 </View>
                             )}

From e9eeb448e193ffa7ed52108d8c02155fc1da6697 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 17:55:51 +0200
Subject: [PATCH 10/11] rollback

---
 src/components/Button/index.tsx              | 6 +-----
 src/pages/workspace/WorkspaceProfilePage.tsx | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index be35c20d5695..1777b239e714 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -39,9 +39,6 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
     /** The fill color to pass into the icon. */
     iconFill?: string;
 
-    /** Indicates whether the icon should be small. */
-    isIconSmall?: boolean;
-
     /** Any additional styles to pass to the left icon container. */
     iconStyles?: StyleProp<ViewStyle>;
 
@@ -167,7 +164,6 @@ function Button(
         iconFill,
         iconStyles = [],
         iconRightStyles = [],
-        isIconSmall = false,
 
         small = false,
         large = false,
@@ -245,7 +241,7 @@ function Button(
                                 <Icon
                                     src={icon}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
-                                    small={isIconSmall}
+                                    small={small}
                                 />
                             </View>
                         )}
diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index 43ce05b2af34..aa89e577df59 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -169,7 +169,6 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                         text={translate('common.share')}
                                         onPress={onPressShare}
                                         medium
-                                        isIconSmall
                                     />
                                 </View>
                             )}

From 6bffec57b0281c253abad4f6975634f84badc4a8 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 22 Feb 2024 18:08:26 +0200
Subject: [PATCH 11/11] remove icon

---
 src/pages/workspace/WorkspaceProfilePage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index aa89e577df59..4ce5822dfaa0 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -164,7 +164,6 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                 <View style={[styles.flexRow, styles.mnw120]}>
                                     <Button
                                         accessibilityLabel={translate('common.share')}
-                                        icon={Expensicons.QrCode}
                                         style={styles.mt6}
                                         text={translate('common.share')}
                                         onPress={onPressShare}