From 7827568830d1d98ce7e9097200098cee158910ff Mon Sep 17 00:00:00 2001
From: staszekscp <mariusz.stanisz@swmansion.com>
Date: Tue, 19 Dec 2023 10:55:06 +0100
Subject: [PATCH] update workspace overview layout

---
 src/pages/workspace/WorkspaceOverviewPage.js  | 67 ++++---------------
 .../workspace/WorkspacePageWithSections.js    |  8 ++-
 2 files changed, 17 insertions(+), 58 deletions(-)

diff --git a/src/pages/workspace/WorkspaceOverviewPage.js b/src/pages/workspace/WorkspaceOverviewPage.js
index 148dec8f7637..04da661e5a43 100644
--- a/src/pages/workspace/WorkspaceOverviewPage.js
+++ b/src/pages/workspace/WorkspaceOverviewPage.js
@@ -1,19 +1,16 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
-import {Keyboard, View} from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {withNetwork} from '@components/OnyxProvider';
 import Text from '@components/Text';
-import TextInput from '@components/TextInput';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -21,7 +18,6 @@ import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import * as ValidationUtils from '@libs/ValidationUtils';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -62,34 +58,6 @@ function WorkspaceOverviewPage({policy, currencyList, windowWidth, route}) {
 
     const formattedCurrency = !_.isEmpty(policy) && !_.isEmpty(currencyList) ? `${policy.outputCurrency} - ${currencyList[policy.outputCurrency].symbol}` : '';
 
-    const submit = useCallback(
-        (values) => {
-            if (policy.isPolicyUpdating) {
-                return;
-            }
-
-            Policy.updateGeneralSettings(policy.id, values.name.trim(), policy.outputCurrency);
-            Keyboard.dismiss();
-            Navigation.goBack(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id));
-        },
-        [policy.id, policy.isPolicyUpdating, policy.outputCurrency],
-    );
-
-    const validate = useCallback((values) => {
-        const errors = {};
-        const name = values.name.trim();
-
-        if (!ValidationUtils.isRequiredFulfilled(name)) {
-            errors.name = 'workspace.editor.nameIsRequiredError';
-        } else if ([...name].length > CONST.WORKSPACE_NAME_CHARACTER_LIMIT) {
-            // Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16
-            // code units.
-            errors.name = 'workspace.editor.nameIsTooLongError';
-        }
-
-        return errors;
-    }, []);
-
     const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW_CURRENCY.getRoute(policy.id)), [policy.id]);
 
     const policyName = lodashGet(policy, 'name', '');
@@ -101,15 +69,7 @@ function WorkspaceOverviewPage({policy, currencyList, windowWidth, route}) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_OVERVIEW}
         >
             {(hasVBA) => (
-                <FormProvider
-                    formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
-                    submitButtonText={translate('workspace.editor.save')}
-                    style={[styles.flexGrow1, styles.ph5]}
-                    scrollContextEnabled
-                    validate={validate}
-                    onSubmit={submit}
-                    enabledWhenOffline
-                >
+                <>
                     <AvatarWithImagePicker
                         source={lodashGet(policy, 'avatar')}
                         size={CONST.AVATAR_SIZE.LARGE}
@@ -127,7 +87,7 @@ function WorkspaceOverviewPage({policy, currencyList, windowWidth, route}) {
                         )}
                         type={CONST.ICON_TYPE_WORKSPACE}
                         fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                        style={[styles.mb3]}
+                        style={[styles.mb3, styles.mt5]}
                         anchorPosition={styles.createMenuPositionProfile(windowWidth)}
                         anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
                         isUsingDefaultAvatar={!lodashGet(policy, 'avatar', null)}
@@ -142,18 +102,15 @@ function WorkspaceOverviewPage({policy, currencyList, windowWidth, route}) {
                         originalFileName={policy.originalFileName}
                     />
                     <OfflineWithFeedback pendingAction={lodashGet(policy, 'pendingFields.generalSettings')}>
-                        <InputWrapper
-                            InputComponent={TextInput}
-                            role={CONST.ROLE.PRESENTATION}
-                            inputID="name"
-                            label={translate('workspace.editor.nameInputLabel')}
-                            accessibilityLabel={translate('workspace.editor.nameInputLabel')}
-                            defaultValue={policy.name}
-                            maxLength={CONST.WORKSPACE_NAME_CHARACTER_LIMIT}
-                            containerStyles={[styles.mt4]}
-                            spellCheck={false}
+                        <MenuItemWithTopDescription
+                            title={policy.name}
+                            description={translate('workspace.editor.nameInputLabel')}
+                            shouldShowRightIcon
+                            disabled={hasVBA}
+                            onPress={onPressCurrency}
                         />
-                        <View style={[styles.mt4, styles.mhn5]}>
+
+                        <View>
                             <MenuItemWithTopDescription
                                 title={formattedCurrency}
                                 description={translate('workspace.editor.currencyInputLabel')}
@@ -166,7 +123,7 @@ function WorkspaceOverviewPage({policy, currencyList, windowWidth, route}) {
                             </Text>
                         </View>
                     </OfflineWithFeedback>
-                </FormProvider>
+                </>
             )}
         </WorkspacePageWithSections>
     );
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 6b5c179a2e51..61eb12892565 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -10,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import BankAccount from '@libs/models/BankAccount';
 import Navigation from '@libs/Navigation/Navigation';
@@ -91,8 +92,8 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
     const hasVBA = achState === BankAccount.STATE.OPEN;
     const isUsingECard = lodashGet(user, 'isUsingExpensifyCard', false);
     const policyID = lodashGet(route, 'params.policyID');
-    const policyName = lodashGet(policy, 'name');
     const content = children(hasVBA, policyID, isUsingECard);
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     useEffect(() => {
         fetchData(shouldSkipVBBACall);
@@ -112,11 +113,12 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
             >
                 <HeaderWithBackButton
                     title={headerText}
-                    subtitle={policyName}
-                    shouldShowGetAssistanceButton
                     guidesCallTaskID={guidesCallTaskID}
+                    shouldShowBackButton={isSmallScreenWidth}
                     onBackButtonPress={() => Navigation.goBack(backButtonRoute || ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}
+                    shouldShowBorderBottom
                 />
+
                 {shouldUseScrollView ? (
                     <ScrollViewWithContext
                         keyboardShouldPersistTaps="handled"