From bec7bf964e16aa59cb3d014d46ea9b0980114eea Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 27 May 2024 10:20:01 +0700
Subject: [PATCH 1/7] fix: Settings button appears after delay after enabling
 Tags

---
 .../workspace/tags/WorkspaceTagsPage.tsx      | 16 +++++++---------
 .../tags/WorkspaceTagsSettingsPage.tsx        | 19 +++++++++++++++++--
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index 64e9a661cd27..4ba8c892f992 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -187,15 +187,13 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
                             style={[styles.mr3, isSmallScreenWidth && styles.flex1]}
                         />
                     )}
-                    {policyTags && (
-                        <Button
-                            medium
-                            onPress={navigateToTagsSettings}
-                            icon={Expensicons.Gear}
-                            text={translate('common.settings')}
-                            style={[isSmallScreenWidth && styles.flex1]}
-                        />
-                    )}
+                    <Button
+                        medium
+                        onPress={navigateToTagsSettings}
+                        icon={Expensicons.Gear}
+                        text={translate('common.settings')}
+                        style={[isSmallScreenWidth && styles.flex1]}
+                    />
                 </View>
             );
         }
diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index e6bc73a7f615..5ed45f358efc 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -1,15 +1,18 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useMemo} from 'react';
-import {View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Policy from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
@@ -30,8 +33,11 @@ type WorkspaceTagsSettingsPageProps = WorkspaceTagsSettingsPageOnyxProps & Stack
 
 function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPageProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const [policyTagLists, isMultiLevelTags] = useMemo(() => [PolicyUtils.getTagLists(policyTags), PolicyUtils.isMultiLevelTags(policyTags)], [policyTags]);
+    const isLoading = !PolicyUtils.getTagLists(policyTags)?.[0];
 
     const updateWorkspaceRequiresTag = useCallback(
         (value: boolean) => {
@@ -70,7 +76,16 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
                                 </View>
                             </View>
                         </OfflineWithFeedback>
-                        {!isMultiLevelTags && (
+                        {isLoading && !isOffline ? (
+                            <ActivityIndicator
+                                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                                style={[styles.flex1]}
+                                color={theme.spinner}
+                            />
+                        ) : (
+                            <OfflineIndicator />
+                        )}
+                        {!isMultiLevelTags && !isLoading && (
                             <OfflineWithFeedback
                                 errors={policyTags?.[policyTagLists[0].name]?.errors}
                                 pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}

From e18467de36a52260bc1d535ce894e3137de8e33a Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 27 May 2024 15:06:16 +0700
Subject: [PATCH 2/7] fix: add offline page to tags setting page

---
 .../tags/WorkspaceTagsSettingsPage.tsx        | 78 +++++++++----------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index 5ed45f358efc..3c19072c653c 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -3,15 +3,14 @@ import React, {useCallback, useMemo} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Policy from '@libs/actions/Policy';
@@ -34,7 +33,6 @@ type WorkspaceTagsSettingsPageProps = WorkspaceTagsSettingsPageOnyxProps & Stack
 function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPageProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const [policyTagLists, isMultiLevelTags] = useMemo(() => [PolicyUtils.getTagLists(policyTags), PolicyUtils.isMultiLevelTags(policyTags)], [policyTags]);
     const isLoading = !PolicyUtils.getTagLists(policyTags)?.[0];
@@ -59,47 +57,47 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
                     testID={WorkspaceTagsSettingsPage.displayName}
                 >
                     <HeaderWithBackButton title={translate('common.settings')} />
-                    <View style={styles.flexGrow1}>
-                        <OfflineWithFeedback
-                            errors={policy?.errorFields?.requiresTag}
-                            pendingAction={policy?.pendingFields?.requiresTag}
-                            errorRowStyles={styles.mh5}
-                        >
-                            <View style={[styles.mt2, styles.mh4]}>
-                                <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                    <Text style={[styles.textNormal]}>{translate('workspace.tags.requiresTag')}</Text>
-                                    <Switch
-                                        isOn={policy?.requiresTag ?? false}
-                                        accessibilityLabel={translate('workspace.tags.requiresTag')}
-                                        onToggle={updateWorkspaceRequiresTag}
-                                    />
-                                </View>
-                            </View>
-                        </OfflineWithFeedback>
-                        {isLoading && !isOffline ? (
-                            <ActivityIndicator
-                                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                                style={[styles.flex1]}
-                                color={theme.spinner}
-                            />
-                        ) : (
-                            <OfflineIndicator />
-                        )}
-                        {!isMultiLevelTags && !isLoading && (
+                    <FullPageOfflineBlockingView>
+                        <View style={styles.flexGrow1}>
                             <OfflineWithFeedback
-                                errors={policyTags?.[policyTagLists[0].name]?.errors}
-                                pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}
+                                errors={policy?.errorFields?.requiresTag}
+                                pendingAction={policy?.pendingFields?.requiresTag}
                                 errorRowStyles={styles.mh5}
                             >
-                                <MenuItemWithTopDescription
-                                    title={policyTagLists[0].name}
-                                    description={translate(`workspace.tags.customTagName`)}
-                                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(route.params.policyID, policyTagLists[0].orderWeight))}
-                                    shouldShowRightIcon
-                                />
+                                <View style={[styles.mt2, styles.mh4]}>
+                                    <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                                        <Text style={[styles.textNormal]}>{translate('workspace.tags.requiresTag')}</Text>
+                                        <Switch
+                                            isOn={policy?.requiresTag ?? false}
+                                            accessibilityLabel={translate('workspace.tags.requiresTag')}
+                                            onToggle={updateWorkspaceRequiresTag}
+                                        />
+                                    </View>
+                                </View>
                             </OfflineWithFeedback>
-                        )}
-                    </View>
+                            {isLoading && (
+                                <ActivityIndicator
+                                    size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                                    style={[styles.flex1]}
+                                    color={theme.spinner}
+                                />
+                            )}
+                            {!isMultiLevelTags && !isLoading && (
+                                <OfflineWithFeedback
+                                    errors={policyTags?.[policyTagLists[0].name]?.errors}
+                                    pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}
+                                    errorRowStyles={styles.mh5}
+                                >
+                                    <MenuItemWithTopDescription
+                                        title={policyTagLists[0].name}
+                                        description={translate(`workspace.tags.customTagName`)}
+                                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(route.params.policyID, policyTagLists[0].orderWeight))}
+                                        shouldShowRightIcon
+                                    />
+                                </OfflineWithFeedback>
+                            )}
+                        </View>
+                    </FullPageOfflineBlockingView>
                 </ScreenWrapper>
             )}
         </AccessOrNotFoundWrapper>

From dd0cf8f2a071d980a423995cbe22b4a55d4ebdd8 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 30 May 2024 15:13:41 +0700
Subject: [PATCH 3/7] fix: Settings button appears in offline mode

---
 .../tags/WorkspaceTagsSettingsPage.tsx        | 107 +++++++++---------
 1 file changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index 94fc0423c7fb..062ec63e1be0 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -1,8 +1,8 @@
-import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useMemo} from 'react';
-import {ActivityIndicator, View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import type { StackScreenProps } from '@react-navigation/stack';
+import React, { useCallback, useMemo } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import type { OnyxEntry } from 'react-native-onyx';
+import { withOnyx } from 'react-native-onyx';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -16,13 +16,14 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Tag from '@libs/actions/Policy/Tag';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import type {SettingsNavigatorParamList} from '@navigation/types';
+import type { SettingsNavigatorParamList } from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 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 useNetwork from '@hooks/useNetwork';
 
 type WorkspaceTagsSettingsPageOnyxProps = {
     /** Collection of tags attached to a policy */
@@ -30,12 +31,13 @@ type WorkspaceTagsSettingsPageOnyxProps = {
 };
 type WorkspaceTagsSettingsPageProps = WorkspaceTagsSettingsPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAGS_SETTINGS>;
 
-function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPageProps) {
+function WorkspaceTagsSettingsPage({ route, policyTags }: WorkspaceTagsSettingsPageProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
     const [policyTagLists, isMultiLevelTags] = useMemo(() => [PolicyUtils.getTagLists(policyTags), PolicyUtils.isMultiLevelTags(policyTags)], [policyTags]);
     const isLoading = !PolicyUtils.getTagLists(policyTags)?.[0];
+    const { isOffline } = useNetwork();
 
     const updateWorkspaceRequiresTag = useCallback(
         (value: boolean) => {
@@ -44,60 +46,63 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
         [route.params.policyID],
     );
 
+    const getTagsSettings = (policy: OnyxEntry<OnyxTypes.Policy>) => (
+        <View style={styles.flexGrow1}>
+            <OfflineWithFeedback
+                errors={policy?.errorFields?.requiresTag}
+                pendingAction={policy?.pendingFields?.requiresTag}
+                errorRowStyles={styles.mh5}
+            >
+                <View style={[styles.mt2, styles.mh4]}>
+                    <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        <Text style={[styles.textNormal]}>{translate('workspace.tags.requiresTag')}</Text>
+                        <Switch
+                            isOn={policy?.requiresTag ?? false}
+                            accessibilityLabel={translate('workspace.tags.requiresTag')}
+                            onToggle={updateWorkspaceRequiresTag}
+                        />
+                    </View>
+                </View>
+            </OfflineWithFeedback>
+            {isLoading && (
+                <ActivityIndicator
+                    size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                    style={[styles.flex1]}
+                    color={theme.spinner}
+                />
+            )}
+            {!isMultiLevelTags && !isLoading && (
+                <OfflineWithFeedback
+                    errors={policyTags?.[policyTagLists[0].name]?.errors}
+                    pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}
+                    errorRowStyles={styles.mh5}
+                >
+                    <MenuItemWithTopDescription
+                        title={policyTagLists[0].name}
+                        description={translate(`workspace.tags.customTagName`)}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(route.params.policyID, policyTagLists[0].orderWeight))}
+                        shouldShowRightIcon
+                    />
+                </OfflineWithFeedback>
+            )}
+        </View>
+    )
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={route.params.policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
         >
-            {({policy}) => (
+            {({ policy }) => (
                 <ScreenWrapper
                     includeSafeAreaPaddingBottom={false}
                     style={[styles.defaultModalContainer]}
                     testID={WorkspaceTagsSettingsPage.displayName}
                 >
                     <HeaderWithBackButton title={translate('common.settings')} />
-                    <FullPageOfflineBlockingView>
-                        <View style={styles.flexGrow1}>
-                            <OfflineWithFeedback
-                                errors={policy?.errorFields?.requiresTag}
-                                pendingAction={policy?.pendingFields?.requiresTag}
-                                errorRowStyles={styles.mh5}
-                            >
-                                <View style={[styles.mt2, styles.mh4]}>
-                                    <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                        <Text style={[styles.textNormal]}>{translate('workspace.tags.requiresTag')}</Text>
-                                        <Switch
-                                            isOn={policy?.requiresTag ?? false}
-                                            accessibilityLabel={translate('workspace.tags.requiresTag')}
-                                            onToggle={updateWorkspaceRequiresTag}
-                                        />
-                                    </View>
-                                </View>
-                            </OfflineWithFeedback>
-                            {isLoading && (
-                                <ActivityIndicator
-                                    size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                                    style={[styles.flex1]}
-                                    color={theme.spinner}
-                                />
-                            )}
-                            {!isMultiLevelTags && !isLoading && (
-                                <OfflineWithFeedback
-                                    errors={policyTags?.[policyTagLists[0].name]?.errors}
-                                    pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}
-                                    errorRowStyles={styles.mh5}
-                                >
-                                    <MenuItemWithTopDescription
-                                        title={policyTagLists[0].name}
-                                        description={translate(`workspace.tags.customTagName`)}
-                                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(route.params.policyID, policyTagLists[0].orderWeight))}
-                                        shouldShowRightIcon
-                                    />
-                                </OfflineWithFeedback>
-                            )}
-                        </View>
-                    </FullPageOfflineBlockingView>
+                    {isOffline && isLoading ? <FullPageOfflineBlockingView>
+                        {getTagsSettings(policy)}
+                    </FullPageOfflineBlockingView> : getTagsSettings(policy)}
                 </ScreenWrapper>
             )}
         </AccessOrNotFoundWrapper>
@@ -108,6 +113,6 @@ WorkspaceTagsSettingsPage.displayName = 'WorkspaceTagsSettingsPage';
 
 export default withOnyx<WorkspaceTagsSettingsPageProps, WorkspaceTagsSettingsPageOnyxProps>({
     policyTags: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`,
+        key: ({ route }) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`,
     },
 })(WorkspaceTagsSettingsPage);

From af94f4b63f943b0670627b49b9411cc40e88fd0d Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 30 May 2024 15:15:43 +0700
Subject: [PATCH 4/7] fix lint

---
 .../tags/WorkspaceTagsSettingsPage.tsx        | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index 062ec63e1be0..4b92b85cba65 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -1,8 +1,8 @@
-import type { StackScreenProps } from '@react-navigation/stack';
-import React, { useCallback, useMemo } from 'react';
-import { ActivityIndicator, View } from 'react-native';
-import type { OnyxEntry } from 'react-native-onyx';
-import { withOnyx } from 'react-native-onyx';
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useCallback, useMemo} from 'react';
+import {ActivityIndicator, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -11,19 +11,19 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Tag from '@libs/actions/Policy/Tag';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import type { SettingsNavigatorParamList } from '@navigation/types';
+import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 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 useNetwork from '@hooks/useNetwork';
 
 type WorkspaceTagsSettingsPageOnyxProps = {
     /** Collection of tags attached to a policy */
@@ -31,13 +31,13 @@ type WorkspaceTagsSettingsPageOnyxProps = {
 };
 type WorkspaceTagsSettingsPageProps = WorkspaceTagsSettingsPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAGS_SETTINGS>;
 
-function WorkspaceTagsSettingsPage({ route, policyTags }: WorkspaceTagsSettingsPageProps) {
+function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPageProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    const { translate } = useLocalize();
+    const {translate} = useLocalize();
     const [policyTagLists, isMultiLevelTags] = useMemo(() => [PolicyUtils.getTagLists(policyTags), PolicyUtils.isMultiLevelTags(policyTags)], [policyTags]);
     const isLoading = !PolicyUtils.getTagLists(policyTags)?.[0];
-    const { isOffline } = useNetwork();
+    const {isOffline} = useNetwork();
 
     const updateWorkspaceRequiresTag = useCallback(
         (value: boolean) => {
@@ -86,23 +86,21 @@ function WorkspaceTagsSettingsPage({ route, policyTags }: WorkspaceTagsSettingsP
                 </OfflineWithFeedback>
             )}
         </View>
-    )
+    );
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={route.params.policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
         >
-            {({ policy }) => (
+            {({policy}) => (
                 <ScreenWrapper
                     includeSafeAreaPaddingBottom={false}
                     style={[styles.defaultModalContainer]}
                     testID={WorkspaceTagsSettingsPage.displayName}
                 >
                     <HeaderWithBackButton title={translate('common.settings')} />
-                    {isOffline && isLoading ? <FullPageOfflineBlockingView>
-                        {getTagsSettings(policy)}
-                    </FullPageOfflineBlockingView> : getTagsSettings(policy)}
+                    {isOffline && isLoading ? <FullPageOfflineBlockingView>{getTagsSettings(policy)}</FullPageOfflineBlockingView> : getTagsSettings(policy)}
                 </ScreenWrapper>
             )}
         </AccessOrNotFoundWrapper>
@@ -113,6 +111,6 @@ WorkspaceTagsSettingsPage.displayName = 'WorkspaceTagsSettingsPage';
 
 export default withOnyx<WorkspaceTagsSettingsPageProps, WorkspaceTagsSettingsPageOnyxProps>({
     policyTags: {
-        key: ({ route }) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`,
+        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`,
     },
 })(WorkspaceTagsSettingsPage);

From e4d2bdfb81a26cd9dadec877eea385aeba4e39f3 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 13 Jun 2024 10:26:45 +0700
Subject: [PATCH 5/7] fix: crash app when offline

---
 src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index b24920c12bc6..6691d4adac89 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -67,14 +67,14 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
             </OfflineWithFeedback>
             {!isMultiLevelTags && (
                 <OfflineWithFeedback
-                    errors={policyTags?.[policyTagLists[0].name]?.errors}
-                    pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}
+                    errors={policyTags?.[policyTagLists[0]?.name]?.errors}
+                    pendingAction={policyTags?.[policyTagLists[0]?.name]?.pendingAction}
                     errorRowStyles={styles.mh5}
                 >
                     <MenuItemWithTopDescription
-                        title={policyTagLists[0].name}
+                        title={policyTagLists[0]?.name}
                         description={translate(`workspace.tags.customTagName`)}
-                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(route.params.policyID, policyTagLists[0].orderWeight))}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(route.params.policyID, policyTagLists[0]?.orderWeight))}
                         shouldShowRightIcon
                     />
                 </OfflineWithFeedback>

From e9fcdff9284a551cb4e5b5b9ec47933d36fcb4ac Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 10 Jul 2024 22:35:08 +0700
Subject: [PATCH 6/7] fix: not show setting page when don't have policyTags
 data

---
 src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index 64738c6a88b5..d42b35fb32c8 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -36,9 +36,8 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [policyTagLists, isMultiLevelTags] = useMemo(() => [PolicyUtils.getTagLists(policyTags), PolicyUtils.isMultiLevelTags(policyTags)], [policyTags]);
-    const isLoading = !PolicyUtils.getTagLists(policyTags)?.[0];
+    const isLoading = !PolicyUtils.getTagLists(policyTags)?.[0] || Object.keys(policyTags ?? {})[0] === 'undefined';
     const {isOffline} = useNetwork();
-
     const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(Object.values(policyTags ?? {}).flatMap(({tags}) => Object.values(tags)));
     const updateWorkspaceRequiresTag = useCallback(
         (value: boolean) => {

From 91f7e7ade30ab7840a5f1bc831ea36a2161874b0 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 22 Jul 2024 13:44:19 +0700
Subject: [PATCH 7/7] fix crash bug

---
 src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index d42b35fb32c8..1e9a73dcf136 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -67,13 +67,13 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
             </OfflineWithFeedback>
             {!isMultiLevelTags && (
                 <OfflineWithFeedback
-                    errors={policyTags?.[policyTagLists[0].name]?.errors}
+                    errors={policyTags?.[policyTagLists[0]?.name]?.errors}
                     onClose={() => Tag.clearPolicyTagListErrors(policyID, policyTagLists[0].orderWeight)}
-                    pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}
+                    pendingAction={policyTags?.[policyTagLists[0]?.name]?.pendingAction}
                     errorRowStyles={styles.mh5}
                 >
                     <MenuItemWithTopDescription
-                        title={policyTagLists[0].name}
+                        title={policyTagLists[0]?.name}
                         description={translate(`workspace.tags.customTagName`)}
                         onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_TAGS.getRoute(policyID, policyTagLists[0].orderWeight))}
                         shouldShowRightIcon