From ea4d555eb232548047485630bbe3ac56a40c5fc5 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Tue, 24 Sep 2024 11:32:59 +0700
Subject: [PATCH 1/2] prevent editing the GL code if we connected to an
 accounting

---
 src/pages/workspace/tags/TagGLCodePage.tsx   | 3 +++
 src/pages/workspace/tags/TagSettingsPage.tsx | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/pages/workspace/tags/TagGLCodePage.tsx b/src/pages/workspace/tags/TagGLCodePage.tsx
index 89c281e91f4..08da35593ae 100644
--- a/src/pages/workspace/tags/TagGLCodePage.tsx
+++ b/src/pages/workspace/tags/TagGLCodePage.tsx
@@ -10,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -34,6 +35,7 @@ function TagGLCodePage({route, policyTags}: EditTagGLCodePageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
+    const policy = usePolicy(route.params.policyID);
 
     const tagName = route.params.tagName;
     const orderWeight = route.params.orderWeight;
@@ -60,6 +62,7 @@ function TagGLCodePage({route, policyTags}: EditTagGLCodePageProps) {
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
             policyID={route.params.policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CATEGORIES_ENABLED}
+            shouldBeBlocked={PolicyUtils.hasAccountingConnections(policy)}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
diff --git a/src/pages/workspace/tags/TagSettingsPage.tsx b/src/pages/workspace/tags/TagSettingsPage.tsx
index 6b70b6f636f..f5599ed4c26 100644
--- a/src/pages/workspace/tags/TagSettingsPage.tsx
+++ b/src/pages/workspace/tags/TagSettingsPage.tsx
@@ -37,6 +37,7 @@ function TagSettingsPage({route, navigation}: TagSettingsPageProps) {
     const {translate} = useLocalize();
     const policyTag = useMemo(() => PolicyUtils.getTagList(policyTags, orderWeight), [policyTags, orderWeight]);
     const policy = usePolicy(policyID);
+    const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy);
 
     const [isDeleteTagModalOpen, setIsDeleteTagModalOpen] = React.useState(false);
 
@@ -146,6 +147,8 @@ function TagSettingsPage({route, navigation}: TagSettingsPageProps) {
                             title={currentPolicyTag['GL Code']}
                             description={translate(`workspace.tags.glCode`)}
                             onPress={navigateToEditGlCode}
+                            iconRight={hasAccountingConnections ? Expensicons.Lock : undefined}
+                            interactive={!hasAccountingConnections}
                             shouldShowRightIcon
                         />
                     </OfflineWithFeedback>

From ce390832ecb4e9182bbb9f157f8e0fc643c369a2 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Tue, 24 Sep 2024 11:44:06 +0700
Subject: [PATCH 2/2] migrate to useOnyx

---
 src/pages/workspace/tags/TagGLCodePage.tsx | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/pages/workspace/tags/TagGLCodePage.tsx b/src/pages/workspace/tags/TagGLCodePage.tsx
index 08da35593ae..8360108be36 100644
--- a/src/pages/workspace/tags/TagGLCodePage.tsx
+++ b/src/pages/workspace/tags/TagGLCodePage.tsx
@@ -1,7 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
@@ -22,20 +21,15 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/WorkspaceTagForm';
-import type {PolicyTagLists} from '@src/types/onyx';
 
-type WorkspaceEditTagGLCodePageOnyxProps = {
-    /** Collection of categories attached to a policy */
-    policyTags: OnyxEntry<PolicyTagLists>;
-};
+type EditTagGLCodePageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAG_GL_CODE>;
 
-type EditTagGLCodePageProps = WorkspaceEditTagGLCodePageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAG_GL_CODE>;
-
-function TagGLCodePage({route, policyTags}: EditTagGLCodePageProps) {
+function TagGLCodePage({route}: EditTagGLCodePageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
     const policy = usePolicy(route.params.policyID);
+    const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${route?.params?.policyID}`);
 
     const tagName = route.params.tagName;
     const orderWeight = route.params.orderWeight;
@@ -99,8 +93,4 @@ function TagGLCodePage({route, policyTags}: EditTagGLCodePageProps) {
 
 TagGLCodePage.displayName = 'TagGLCodePage';
 
-export default withOnyx<EditTagGLCodePageProps, WorkspaceEditTagGLCodePageOnyxProps>({
-    policyTags: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route?.params?.policyID}`,
-    },
-})(TagGLCodePage);
+export default TagGLCodePage;