diff --git a/src/languages/en.ts b/src/languages/en.ts index 728b214d65cf..0af5af59f9f1 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2036,6 +2036,7 @@ export default { tagRequiredError: 'Tag name is required.', existingTagError: 'A tag with this name already exists.', genericFailureMessage: 'An error occurred while updating the tag, please try again.', + importedFromAccountingSoftware: 'The tags below are imported from your', }, taxes: { subtitle: 'Add tax names, rates, and set defaults.', diff --git a/src/languages/es.ts b/src/languages/es.ts index 6ca7c4a210e1..afaf4f829c94 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2063,6 +2063,7 @@ export default { tagRequiredError: 'Lo nombre de la etiqueta es obligatorio.', existingTagError: 'Ya existe una etiqueta con este nombre.', genericFailureMessage: 'Se produjo un error al actualizar la etiqueta, inténtelo nuevamente.', + importedFromAccountingSoftware: 'Etiquetas importadas desde', }, taxes: { subtitle: 'Añade nombres, tasas y establezca valores por defecto para los impuestos.', diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index fafee7b3b74d..5c867ef43090 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -1,10 +1,8 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; @@ -18,7 +16,9 @@ import RightElementEnabledStatus from '@components/SelectionList/RightElementEna import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; import Text from '@components/Text'; +import TextLink from '@components/TextLink'; import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection'; +import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; @@ -28,15 +28,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 * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; @@ -55,14 +55,9 @@ type PolicyOption = ListItem & { keyForList: string; }; -type WorkspaceTagsOnyxProps = { - /** Collection of tags attached to a policy */ - policyTags: OnyxEntry; -}; - -type WorkspaceTagsPageProps = WorkspaceTagsOnyxProps & StackScreenProps; +type WorkspaceTagsPageProps = WithPolicyConnectionsProps; -function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { +function WorkspaceTagsPage({route, policy}: WorkspaceTagsPageProps) { const {isSmallScreenWidth} = useWindowDimensions(); const styles = useThemeStyles(); const theme = useTheme(); @@ -71,10 +66,14 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { const dropdownButtonRef = useRef(null); const [deleteTagsConfirmModalVisible, setDeleteTagsConfirmModalVisible] = useState(false); const isFocused = useIsFocused(); + const policyID = route.params.policyID ?? ''; + const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`); + const {environmentURL} = useEnvironment(); + const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0; const fetchTags = useCallback(() => { - Policy.openPolicyTagsPage(route.params.policyID); - }, [route.params.policyID]); + Policy.openPolicyTagsPage(policyID); + }, [policyID]); const {isOffline} = useNetwork({onReconnect: fetchTags}); @@ -142,22 +141,22 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { ); const navigateToTagsSettings = () => { - Navigation.navigate(ROUTES.WORKSPACE_TAGS_SETTINGS.getRoute(route.params.policyID)); + Navigation.navigate(ROUTES.WORKSPACE_TAGS_SETTINGS.getRoute(policyID)); }; const navigateToCreateTagPage = () => { - Navigation.navigate(ROUTES.WORKSPACE_TAG_CREATE.getRoute(route.params.policyID)); + Navigation.navigate(ROUTES.WORKSPACE_TAG_CREATE.getRoute(policyID)); }; const navigateToTagSettings = (tag: PolicyOption) => { - Navigation.navigate(ROUTES.WORKSPACE_TAG_SETTINGS.getRoute(route.params.policyID, tag.keyForList)); + Navigation.navigate(ROUTES.WORKSPACE_TAG_SETTINGS.getRoute(policyID, tag.keyForList)); }; const selectedTagsArray = Object.keys(selectedTags).filter((key) => selectedTags[key]); const handleDeleteTags = () => { setSelectedTags({}); - Policy.deletePolicyTags(route.params.policyID, selectedTagsArray); + Policy.deletePolicyTags(policyID, selectedTagsArray); setDeleteTagsConfirmModalVisible(false); }; @@ -192,7 +191,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { value: CONST.POLICY.TAGS_BULK_ACTION_TYPES.DISABLE, onSelected: () => { setSelectedTags({}); - Policy.setWorkspaceTagEnabled(route.params.policyID, tagsToDisable); + Policy.setWorkspaceTagEnabled(policyID, tagsToDisable); }, }); } @@ -214,7 +213,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { value: CONST.POLICY.TAGS_BULK_ACTION_TYPES.ENABLE, onSelected: () => { setSelectedTags({}); - Policy.setWorkspaceTagEnabled(route.params.policyID, tagsToEnable); + Policy.setWorkspaceTagEnabled(policyID, tagsToEnable); }, }); } @@ -257,10 +256,10 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { }; return ( - - + + {isSmallScreenWidth && {getHeaderButtons()}} - {translate('workspace.tags.subtitle')} + {isConnectedToAccounting ? ( + + {`${translate('workspace.tags.importedFromAccountingSoftware')} `} + + {`${translate('workspace.accounting.qbo')} ${translate('workspace.accounting.settings')}`} + + + ) : ( + {translate('workspace.tags.subtitle')} + )} {isLoading && ( Policy.clearPolicyTagErrors(route.params.policyID, item.value)} + onDismissError={(item) => Policy.clearPolicyTagErrors(policyID, item.value)} /> )} @@ -329,8 +340,4 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) { WorkspaceTagsPage.displayName = 'WorkspaceTagsPage'; -export default withOnyx({ - policyTags: { - key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`, - }, -})(WorkspaceTagsPage); +export default withPolicyConnections(WorkspaceTagsPage);