Display an explanatory text on categories screen

src/languages/en.ts

@@ -1897,7 +1897,7 @@ export default {
             categoryRequiredError: 'Category name is required.',
             existingCategoryError: 'A category with this name already exists.',
             invalidCategoryName: 'Invalid category name.',
-            importedFromAccountingSoftware: 'The categories below are imported from your',
+            importedFromAccountingSoftware: `The categories below are imported from your`,
         },
         moreFeatures: {
             spendSection: {

src/languages/es.ts

@@ -1921,7 +1921,7 @@ export default {
             categoryRequiredError: 'Lo nombre de la categoría es obligatorio.',
             existingCategoryError: 'Ya existe una categoría con este nombre.',
             invalidCategoryName: 'Lo nombre de la categoría es invalido.',
-            importedFromAccountingSoftware: 'Categorías importadas desde QuickBooks Online',
+            importedFromAccountingSoftware: `Categorías importadas desde`,
         },
         moreFeatures: {
             spendSection: {

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -1,5 +1,4 @@
-import type {RouteProp} from '@react-navigation/native';
-import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -30,16 +29,15 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import localeCompare from '@libs/LocaleCompare';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import type {WorkspacesCentralPaneNavigatorParamList} from '@navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 
@@ -48,12 +46,14 @@ type PolicyOption = ListItem & {
     keyForList: string;
 };
 
-type WorkspaceCategoriesPageProps = {
+type WorkspaceCategoriesPageOnyxProps = {
     /** The policy the user is accessing. */
     policy: OnyxEntry<OnyxTypes.Policy>;
 };
 
-function WorkspaceCategoriesPage({policy}: WorkspaceCategoriesPageProps) {
+type WorkspaceCategoriesPageProps = WithPolicyConnectionsProps & WorkspaceCategoriesPageOnyxProps;
+
+function WorkspaceCategoriesPage({policy, route}: WorkspaceCategoriesPageProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -63,9 +63,8 @@ function WorkspaceCategoriesPage({policy}: WorkspaceCategoriesPageProps) {
     const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false);
     const isFocused = useIsFocused();
     const {environmentURL} = useEnvironment();
-    const route = useRoute<RouteProp<WorkspacesCentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.CATEGORIES>>();
-    const policyId = route.params.policyID;
-    const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}` as const);
+    const policyId = route.params.policyID ?? '';
+    const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`);
 
     const fetchCategories = useCallback(() => {
         Policy.openPolicyCategoriesPage(policyId);
@@ -282,14 +281,14 @@ function WorkspaceCategoriesPage({policy}: WorkspaceCategoriesPageProps) {
                         />
                         {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
                         <View style={[styles.ph5, styles.pb5, styles.pt3]}>
-                            {policy?.connections ? (
+                            {Object.keys(policy?.connections ?? {}).length ? (
                                 <Text>
                                     <Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.categories.importedFromAccountingSoftware')} `}</Text>
                                     <TextLink
                                         style={[styles.textNormal, styles.link]}
                                         href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyId)}`}
                                     >
-                                        {`${translate('workspace.accounting.qbo')} settings`}
+                                        {`${translate('workspace.accounting.qbo')}, ${translate('common.settings')}`}
                                     </TextLink>
                                 </Text>
                             ) : (

src/pages/workspace/withPolicyConnections.tsx

@@ -58,3 +58,5 @@ function withPolicyConnections(WrappedComponent: ComponentType<WithPolicyConnect
 }
 
 export default withPolicyConnections;
+
+export type {WithPolicyConnectionsProps};