Workspace member has option to edit categories, which leads to not he…

…re page
daledah · Jun 19, 2024 · d164b7a · d164b7a
1 parent dc2b63c
commit d164b7a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2193,7 +2193,11 @@ export default {
             subtitle: 'Get a better overview of where money is being spent. Use our default categories or add your own.',
             emptyCategories: {
                 title: "You haven't created any categories",
+                memberTitle: (workspaceName: string) => `${workspaceName} doesn' have any categories enabled.`,
                 subtitle: 'Add a category to organize your spend.',
+                otherWorkspace: 'Categorize this expense by choosing a different workspace, or ',
+                askYourAdmin: 'ask your admin',
+                enableForThisWorkspace: ' to enable categories for this workspace.',
             },
             updateFailureMessage: 'An error occurred while updating the category, please try again.',
             createFailureMessage: 'An error occurred while creating the category, please try again.',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2230,6 +2230,10 @@ export default {
             emptyCategories: {
                 title: 'No has creado ninguna categoría',
                 subtitle: 'Añade una categoría para organizar tu gasto.',
+                memberTitle: (workspaceName: string) => `${workspaceName} no tiene ninguna categoría activada.`,
+                otherWorkspace: 'Categorice este gasto eligiendo un espacio de trabajo diferente, o ',
+                askYourAdmin: 'pida a su administrador',
+                enableForThisWorkspace: ' que habilite categorías para este espacio de trabajo.',
             },
             updateFailureMessage: 'Se ha producido un error al intentar eliminar la categoría. Por favor, inténtalo más tarde.',
             createFailureMessage: 'Se ha producido un error al intentar crear la categoría. Por favor, inténtalo más tarde.',

diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx
@@ -1,17 +1,20 @@
 import lodashIsEmpty from 'lodash/isEmpty';
 import React, {useEffect} from 'react';
+import type {ReactNode} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import CategoryPicker from '@components/CategoryPicker';
 import FixedFooter from '@components/FixedFooter';
+import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
 import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
-import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -85,6 +88,8 @@ function IOURequestStepCategory({
     const {translate} = useLocalize();
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const isEditingSplitBill = isEditing && iouType === CONST.IOU.TYPE.SPLIT;
+    const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const transactionCategory = ReportUtils.getTransactionDetails(isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction) ? splitDraftTransaction : transaction)?.category;
 
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -151,6 +156,36 @@ function IOURequestStepCategory({
         navigateBack();
     };
 
+    const renderCategoriesEmptyStateSection = (): ReactNode => (
+        <View style={[styles.pageWrapper, styles.workspaceSection, styles.ph8, shouldUseNarrowLayout ? styles.pv10 : styles.pv12, styles.flex1, styles.justifyContentCenter]}>
+            <Icon
+                src={Illustrations.EmptyStateExpenses}
+                width={184}
+                height={116}
+            />
+
+            <View style={[styles.w100, styles.pt5]}>
+                <View style={[styles.flexRow, styles.justifyContentCenter, styles.w100, styles.mh1, styles.flexShrink1]}>
+                    <Text style={[styles.textHeadline, styles.emptyCardSectionTitle]}>
+                        {isAdmin ? translate('workspace.categories.emptyCategories.title') : translate('workspace.categories.emptyCategories.memberTitle', policy?.name ?? '')}
+                    </Text>
+                </View>
+
+                <View style={[styles.flexRow, styles.justifyContentCenter, styles.w100, styles.mt1, styles.mh1]}>
+                    {isAdmin ? (
+                        <Text style={[styles.textNormal, styles.emptyCardSectionSubtitle]}>{translate('workspace.categories.emptyCategories.subtitle')}</Text>
+                    ) : (
+                        <Text style={[styles.textNormal, styles.emptyCardSectionSubtitle]}>
+                            {translate('workspace.categories.emptyCategories.otherWorkspace')}
+                            <TextLink onPress={() => {}}>{translate('workspace.categories.emptyCategories.askYourAdmin')}</TextLink>
+                            {translate('workspace.categories.emptyCategories.enableForThisWorkspace')}
+                        </Text>
+                    )}
+                </View>
+            </View>
+        </View>
+    );
+
     return (
         <StepScreenWrapper
             headerTitle={translate('common.category')}
@@ -168,27 +203,23 @@ function IOURequestStepCategory({
             )}
             {shouldShowEmptyState && (
                 <View style={[styles.flex1]}>
-                    <WorkspaceEmptyStateSection
-                        shouldStyleAsCard={false}
-                        icon={Illustrations.EmptyStateExpenses}
-                        title={translate('workspace.categories.emptyCategories.title')}
-                        subtitle={translate('workspace.categories.emptyCategories.subtitle')}
-                        containerStyle={[styles.flex1, styles.justifyContentCenter]}
-                    />
+                    {renderCategoriesEmptyStateSection()}
                     <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                         <Button
                             large
                             success
                             style={[styles.w100]}
                             onPress={() =>
-                                Navigation.navigate(
-                                    ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(
-                                        policy?.id ?? '-1',
-                                        ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, report?.reportID ?? '-1', backTo, reportActionID),
-                                    ),
-                                )
+                                isAdmin
+                                    ? Navigation.navigate(
+                                          ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(
+                                              policy?.id ?? '-1',
+                                              ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, report?.reportID ?? '-1', backTo, reportActionID),
+                                          ),
+                                      )
+                                    : Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_PARTICIPANTS.getRoute(CONST.IOU.TYPE.SUBMIT, transactionID, report?.reportID ?? '-1', undefined, action))
                             }
-                            text={translate('workspace.categories.editCategories')}
+                            text={isAdmin ? translate('workspace.categories.editCategories') : translate('common.buttonConfirm')}
                             pressOnEnter
                         />
                     </FixedFooter>