Merge pull request #76184 from situchan/revert-74667-fix/74496

Revert "Two updates to workspace Overview page"

(cherry picked from commit 294c3c1)

(cherry-picked to staging by marcaaron)

Author: marcaaron

src/components/Section/index.tsx

@@ -186,7 +186,7 @@ function Section({
                         />
                     )}
                     <View style={[styles.flexShrink1, styles.w100]}>
-                        {renderTitle ? renderTitle() : !!title && <Text style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}>{title}</Text>}
+                        {renderTitle ? renderTitle() : <Text style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}>{title}</Text>}
                     </View>
                     {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
                         <IconSection

src/pages/workspace/WorkspaceOverviewPage.tsx

@@ -1,11 +1,11 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import {accountIDSelector} from '@selectors/Session';
 import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
+import type {ImageStyle, StyleProp} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
-import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import ConfirmModal from '@components/ConfirmModal';
@@ -25,6 +25,7 @@ import usePayAndDowngrade from '@hooks/usePayAndDowngrade';
 import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolationOfWorkspace from '@hooks/useTransactionViolationOfWorkspace';
 import {close} from '@libs/actions/Modal';
@@ -70,6 +71,7 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const illustrations = useThemeIllustrations();
     const illustrationIcons = useMemoizedLazyIllustrations(['Building'] as const);
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Exit', 'FallbackWorkspaceAvatar', 'ImageCropSquareMask', 'QrCode', 'Transfer', 'Trashcan', 'UserPlus'] as const);
 
@@ -157,6 +159,7 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
     const readOnly = !isPolicyAdminPolicyUtils(policy);
     const currencyReadOnly = readOnly || isBankAccountVerified;
     const isOwner = isPolicyOwner(policy, currentUserAccountID);
+    const imageStyle: StyleProp<ImageStyle> = shouldUseNarrowLayout ? [styles.mhv12, styles.mhn5, styles.mbn5] : [styles.mhv8, styles.mhn8, styles.mbn5];
     const shouldShowAddress = !readOnly || !!formattedAddress;
     const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext);
     const [lastPaymentMethod] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {canBeMissing: true});
@@ -377,27 +380,20 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
     };
 
     const renderDropdownMenu = (options: Array<DropdownOption<string>>) => (
-        <ButtonWithDropdownMenu
-            ref={dropdownMenuRef}
-            success={false}
-            onPress={() => {}}
-            shouldAlwaysShowDropdownMenu
-            customText={translate('common.more')}
-            options={options}
-            isSplitButton={false}
-            wrapperStyle={isPolicyAdmin ? styles.flexGrow0 : styles.flexGrow1}
-        />
+        <View style={[!shouldUseNarrowLayout && styles.flexRow, !shouldUseNarrowLayout && styles.gap2]}>
+            <ButtonWithDropdownMenu
+                ref={dropdownMenuRef}
+                success={false}
+                onPress={() => {}}
+                shouldAlwaysShowDropdownMenu
+                customText={translate('common.more')}
+                options={options}
+                isSplitButton={false}
+                wrapperStyle={styles.flexGrow1}
+            />
+        </View>
     );
 
-    const handleInvitePress = useCallback(() => {
-        if (isAccountLocked) {
-            showLockedAccountModal();
-            return;
-        }
-        clearInviteDraft(route.params.policyID);
-        Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID, Navigation.getActiveRouteWithoutParams()));
-    }, [isAccountLocked, showLockedAccountModal, route.params.policyID]);
-
     const getHeaderButtons = () => {
         const secondaryActions: Array<DropdownOption<string>> = [];
         const canLeave = !isOwner;
@@ -415,6 +411,21 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
             return null;
         }
 
+        if (isPolicyAdmin) {
+            secondaryActions.push({
+                value: 'invite',
+                text: translate('common.invite'),
+                icon: expensifyIcons.UserPlus,
+                onSelected: () => {
+                    if (isAccountLocked) {
+                        showLockedAccountModal();
+                        return;
+                    }
+                    clearInviteDraft(route.params.policyID);
+                    Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID, Navigation.getActiveRouteWithoutParams()));
+                },
+            });
+        }
         secondaryActions.push({
             value: 'share',
             text: translate('common.share'),
@@ -451,22 +462,7 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
             });
         }
 
-        return (
-            <View style={[styles.flexRow, styles.gap2]}>
-                {isPolicyAdmin && (
-                    <Button
-                        success
-                        text={translate('common.invite')}
-                        icon={expensifyIcons.UserPlus}
-                        onPress={handleInvitePress}
-                        medium
-                        innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
-                        style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
-                    />
-                )}
-                {renderDropdownMenu(secondaryActions)}
-            </View>
-        );
+        return renderDropdownMenu(secondaryActions);
     };
 
     return (
@@ -495,6 +491,11 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
                         isCentralPane
                         title=""
                     >
+                        <Image
+                            style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
+                            source={illustrations.WorkspaceProfile}
+                            resizeMode="cover"
+                        />
                         <AvatarWithImagePicker
                             onViewPhotoPress={() => {
                                 if (!policy?.id) {
@@ -511,7 +512,12 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
                             DefaultAvatar={DefaultAvatar}
                             type={CONST.ICON_TYPE_WORKSPACE}
                             fallbackIcon={expensifyIcons.FallbackWorkspaceAvatar}
-                            style={[(policy?.errorFields?.avatarURL ?? shouldUseNarrowLayout) ? styles.mb1 : styles.mb3, styles.alignItemsStart, styles.sectionMenuItemTopDescription]}
+                            style={[
+                                (policy?.errorFields?.avatarURL ?? shouldUseNarrowLayout) ? styles.mb1 : styles.mb3,
+                                shouldUseNarrowLayout ? styles.mtn17 : styles.mtn20,
+                                styles.alignItemsStart,
+                                styles.sectionMenuItemTopDescription,
+                            ]}
                             editIconStyle={styles.smallEditIconWorkspace}
                             isUsingDefaultAvatar={!policy?.avatarURL}
                             onImageSelected={(file) => {