fix: redirect to proper place after upgrade

src/components/ConnectToNetSuiteButton/index.tsx

@@ -56,7 +56,9 @@ function ConnectToNetSuiteButton({policyID, shouldDisconnectIntegrationBeforeCon
             <Button
                 onPress={() => {
                     if (!isControlPolicy(policy)) {
-                        Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.netsuite.alias));
+                        Navigation.navigate(
+                            ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.netsuite.alias, ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID)),
+                        );
                         return;
                     }
 

src/components/ConnectToSageIntacctButton/index.tsx

@@ -63,7 +63,13 @@ function ConnectToSageIntacctButton({policyID, shouldDisconnectIntegrationBefore
             <Button
                 onPress={() => {
                     if (!isControlPolicy(policy)) {
-                        Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.intacct.alias));
+                        Navigation.navigate(
+                            ROUTES.WORKSPACE_UPGRADE.getRoute(
+                                policyID,
+                                CONST.UPGRADE_FEATURE_INTRO_MAPPING.intacct.alias,
+                                ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID),
+                            ),
+                        );
                         return;
                     }
 

src/libs/actions/Policy/Policy.ts

@@ -2642,7 +2642,7 @@ function enableExpensifyCard(policyID: string, enabled: boolean) {
     }
 }
 
-function enablePolicyReportFields(policyID: string, enabled: boolean) {
+function enablePolicyReportFields(policyID: string, enabled: boolean, disableRedirect = false) {
     const onyxData: OnyxData = {
         optimisticData: [
             {
@@ -2685,7 +2685,7 @@ function enablePolicyReportFields(policyID: string, enabled: boolean) {
 
     API.write(WRITE_COMMANDS.ENABLE_POLICY_REPORT_FIELDS, parameters, onyxData);
 
-    if (enabled && getIsNarrowLayout()) {
+    if (enabled && getIsNarrowLayout() && !disableRedirect) {
         navigateWhenEnableFeature(policyID);
     }
 }

src/pages/workspace/categories/CategoryGLCodePage.tsx

@@ -38,7 +38,7 @@ function CategoryGLCodePage({route}: EditCategoryPageProps) {
             if (newGLCode !== glCode) {
                 Category.setPolicyCategoryGLCode(route.params.policyID, categoryName, newGLCode);
             }
-            Navigation.goBack();
+            Navigation.dismissModal();
         },
         [categoryName, glCode, route.params.policyID],
     );

src/pages/workspace/categories/CategoryPayrollCodePage.tsx

@@ -38,9 +38,9 @@ function CategoryPayrollCodePage({route}: EditCategoryPageProps) {
             if (newPayrollCode !== payrollCode) {
                 Category.setPolicyCategoryPayrollCode(route.params.policyID, categoryName, newPayrollCode);
             }
-            Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName));
+            Navigation.dismissModal();
         },
-        [categoryName, payrollCode, route.params.categoryName, route.params.policyID],
+        [categoryName, payrollCode, route.params.policyID],
     );
 
     return (

src/pages/workspace/categories/CategorySettingsPage.tsx

@@ -141,7 +141,13 @@ function CategorySettingsPage({route, policyCategories, navigation}: CategorySet
                             description={translate(`workspace.categories.glCode`)}
                             onPress={() => {
                                 if (!isControlPolicy(policy)) {
-                                    Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(route.params.policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.glAndPayrollCodes.alias));
+                                    Navigation.navigate(
+                                        ROUTES.WORKSPACE_UPGRADE.getRoute(
+                                            route.params.policyID,
+                                            CONST.UPGRADE_FEATURE_INTRO_MAPPING.glAndPayrollCodes.alias,
+                                            ROUTES.WORKSPACE_CATEGORY_GL_CODE.getRoute(route.params.policyID, policyCategory.name),
+                                        ),
+                                    );
                                     return;
                                 }
                                 Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_GL_CODE.getRoute(route.params.policyID, policyCategory.name));
@@ -155,7 +161,13 @@ function CategorySettingsPage({route, policyCategories, navigation}: CategorySet
                             description={translate(`workspace.categories.payrollCode`)}
                             onPress={() => {
                                 if (!isControlPolicy(policy)) {
-                                    Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(route.params.policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.glAndPayrollCodes.alias));
+                                    Navigation.navigate(
+                                        ROUTES.WORKSPACE_UPGRADE.getRoute(
+                                            route.params.policyID,
+                                            CONST.UPGRADE_FEATURE_INTRO_MAPPING.glAndPayrollCodes.alias,
+                                            ROUTES.WORKSPACE_CATEGORY_PAYROLL_CODE.getRoute(route.params.policyID, policyCategory.name),
+                                        ),
+                                    );
                                     return;
                                 }
                                 Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_PAYROLL_CODE.getRoute(route.params.policyID, policyCategory.name));

src/pages/workspace/tags/TagGLCodePage.tsx

@@ -45,7 +45,7 @@ function TagGLCodePage({route, policyTags}: EditTagGLCodePageProps) {
             if (newGLCode !== glCode) {
                 Tag.setPolicyTagGLCode(route.params.policyID, tagName, orderWeight, newGLCode);
             }
-            Navigation.goBack();
+            Navigation.dismissModal();
         },
         [glCode, route.params.policyID, tagName, orderWeight],
     );

src/pages/workspace/tags/TagSettingsPage.tsx

@@ -72,7 +72,13 @@ function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps)
 
     const navigateToEditGlCode = () => {
         if (!PolicyUtils.isControlPolicy(policy)) {
-            Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(route.params.policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.glCodes.alias));
+            Navigation.navigate(
+                ROUTES.WORKSPACE_UPGRADE.getRoute(
+                    route.params.policyID,
+                    CONST.UPGRADE_FEATURE_INTRO_MAPPING.glCodes.alias,
+                    ROUTES.WORKSPACE_TAG_GL_CODE.getRoute(policy?.id ?? '', route.params.orderWeight, route.params.tagName),
+                ),
+            );
             return;
         }
         Navigation.navigate(ROUTES.WORKSPACE_TAG_GL_CODE.getRoute(route.params.policyID, route.params.orderWeight, currentPolicyTag.name));

src/pages/workspace/upgrade/UpgradeConfirmation.tsx

@@ -8,10 +8,10 @@ import ROUTES from '@src/ROUTES';
 
 type Props = {
     policyName: string;
-    policyID: string;
+    onConfirmUpgrade: () => void;
 };
 
-function UpgradeConfirmation({policyName, policyID}: Props) {
+function UpgradeConfirmation({policyName, onConfirmUpgrade}: Props) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -31,7 +31,7 @@ function UpgradeConfirmation({policyName, policyID}: Props) {
                 </>
             }
             shouldShowButton
-            onButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_PROFILE.getRoute(policyID))}
+            onButtonPress={onConfirmUpgrade}
             buttonText={translate('workspace.upgrade.completed.gotIt')}
         />
     );

src/pages/workspace/upgrade/UpgradeIntro.tsx

@@ -4,6 +4,7 @@ import type {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
+import Icon from '@components/Icon';
 import * as Expensicon from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
@@ -26,18 +27,27 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) {
     const styles = useThemeStyles();
     const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const {translate} = useLocalize();
-    const iconSrc = feature.icon in Illustrations ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon];
+    const isIllustration = feature.icon in Illustrations;
+    const iconSrc = isIllustration ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon];
     const iconAdditionalStyles = feature.id === CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.id ? styles.br0 : undefined;
 
     return (
         <View style={styles.p5}>
             <View style={styles.workspaceUpgradeIntroBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
                 <View style={[styles.mb3, styles.flexRow, styles.justifyContentBetween]}>
-                    <Avatar
-                        type={CONST.ICON_TYPE_AVATAR}
-                        source={iconSrc}
-                        iconAdditionalStyles={iconAdditionalStyles}
-                    />
+                    {!isIllustration ? (
+                        <Avatar
+                            source={iconSrc}
+                            type={CONST.ICON_TYPE_AVATAR}
+                        />
+                    ) : (
+                        <Icon
+                            src={iconSrc}
+                            width={48}
+                            height={48}
+                            additionalStyles={iconAdditionalStyles}
+                        />
+                    )}
                     <Badge
                         icon={Expensicon.Unlock}
                         text={translate('workspace.upgrade.upgradeToUnlock')}

src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx

@@ -1,5 +1,6 @@
+import {useNavigation} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -8,6 +9,7 @@ import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import {isControlPolicy} from '@libs/PolicyUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import CONST from '@src/CONST';
 import * as Policy from '@src/libs/actions/Policy/Policy';
@@ -19,22 +21,51 @@ import UpgradeIntro from './UpgradeIntro';
 type WorkspaceUpgradePageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.UPGRADE>;
 
 function WorkspaceUpgradePage({route}: WorkspaceUpgradePageProps) {
+    const navigation = useNavigation();
     const styles = useThemeStyles();
     const policyID = route.params.policyID;
     const feature = Object.values(CONST.UPGRADE_FEATURE_INTRO_MAPPING).find((f) => f.alias === route.params.featureName);
     const {translate} = useLocalize();
     const [policy] = useOnyx(`policy_${policyID}`);
     const {isOffline} = useNetwork();
 
-    if (!feature || !policy) {
-        return <NotFoundPage />;
-    }
+    const isUpgraded = React.useMemo(() => isControlPolicy(policy), [policy]);
 
     const upgradeToCorporate = () => {
-        Policy.upgradeToCorporate(policy.id, feature.id);
+        if (!policy || !feature) {
+            return;
+        }
+
+        Policy.upgradeToCorporate(policy.id, feature.name);
     };
 
-    const isUpgraded = policy.type === CONST.POLICY.TYPE.CORPORATE;
+    const confirmUpgrade = useCallback(() => {
+        if (!feature) {
+            return;
+        }
+        switch (feature.id) {
+            case CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.id:
+                Policy.enablePolicyReportFields(policyID, true, true);
+                return Navigation.navigate(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));
+            default:
+                return route.params.backTo ? Navigation.navigate(route.params.backTo) : Navigation.goBack();
+        }
+    }, [feature, policyID, route.params.backTo]);
+
+    useEffect(() => {
+        const unsubscribeListener = navigation.addListener('blur', () => {
+            if (!isUpgraded) {
+                return;
+            }
+            confirmUpgrade();
+        });
+
+        return unsubscribeListener;
+    }, [isUpgraded, confirmUpgrade, navigation]);
+
+    if (!feature || !policy) {
+        return <NotFoundPage />;
+    }
 
     return (
         <ScreenWrapper
@@ -44,11 +75,11 @@ function WorkspaceUpgradePage({route}: WorkspaceUpgradePageProps) {
         >
             <HeaderWithBackButton
                 title={translate('common.upgrade')}
-                onBackButtonPress={() => Navigation.goBack(route.params.backTo ?? ROUTES.WORKSPACE_PROFILE.getRoute(policyID))}
+                onBackButtonPress={() => (isUpgraded ? Navigation.dismissModal() : Navigation.goBack())}
             />
             {isUpgraded && (
                 <UpgradeConfirmation
-                    policyID={policy.id}
+                    onConfirmUpgrade={() => Navigation.dismissModal()}
                     policyName={policy.name}
                 />
             )}

src/styles/index.ts

@@ -2735,15 +2735,10 @@ const styles = (theme: ThemeColors) =>
             width: 110,
         },
 
-        workspaceUpgradeIntroBox: ({isExtraSmallScreenWidth, isSmallScreenWidth}: WorkspaceUpgradeIntroBoxParams): ViewStyle => {
+        workspaceUpgradeIntroBox: ({isExtraSmallScreenWidth}: WorkspaceUpgradeIntroBoxParams): ViewStyle => {
             let paddingHorizontal = spacing.ph5;
             let paddingVertical = spacing.pv5;
 
-            if (isSmallScreenWidth) {
-                paddingHorizontal = spacing.ph4;
-                paddingVertical = spacing.pv4;
-            }
-
             if (isExtraSmallScreenWidth) {
                 paddingHorizontal = spacing.ph2;
                 paddingVertical = spacing.pv2;