Merge pull request Expensify#96284 from Expensify/vit/suppress-promo-modals-supportal

Suppress promo/training/onboarding modals during supportal sessions

Author: cristipaval

src/components/ProductTrainingContext/index.tsx

@@ -6,6 +6,7 @@ import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useShouldSuppressPromotionalUI from '@hooks/useShouldSuppressPromotionalUI';
 import useSidePanelState from '@hooks/useSidePanelState';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -20,7 +21,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
-import {isActingAsDelegateSelector} from '@selectors/Account';
 import {hasCompletedGuidedSetupFlowSelector} from '@selectors/Onboarding';
 import {emailSelector} from '@selectors/Session';
 import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react';
@@ -59,7 +59,7 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
     const [allPolicies, allPoliciesMetadata] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [currentUserLogin, currentUserLoginMetadata] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector});
-    const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isActingAsDelegateSelector});
+    const shouldSuppressPromotionalUI = useShouldSuppressPromotionalUI();
 
     const isUserPolicyEmployee = useMemo(() => {
         if (!allPolicies || !currentUserLogin || isLoadingOnyxValue(allPoliciesMetadata, currentUserLoginMetadata)) {
@@ -198,8 +198,8 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
     const shouldRenderTooltip = useCallback(
         (tooltipName: ProductTrainingTooltipName) => {
-            // If the user is acting as a copilot, don't show any tooltips
-            if (isActingAsDelegate) {
+            // Supportal agents and copilots should not see product-training tooltips on behalf of another account.
+            if (shouldSuppressPromotionalUI) {
                 return false;
             }
             // First check base conditions
@@ -216,7 +216,7 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
             return false;
         },
-        [isActingAsDelegate, shouldTooltipBeVisible, determineVisibleTooltip],
+        [shouldSuppressPromotionalUI, shouldTooltipBeVisible, determineVisibleTooltip],
     );
 
     const contextValue = useMemo(

src/hooks/useAIFeaturesPromoModal.ts

@@ -15,25 +15,26 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 import type {OnyxEntry} from 'react-native-onyx';
 
-import {isActingAsDelegateSelector} from '@selectors/Account';
 import {hasCompletedGuidedSetupFlowSelector, tryNewDotOnyxSelector} from '@selectors/Onboarding';
 import {useEffect, useRef} from 'react';
 
 import useOnyx from './useOnyx';
+import useShouldSuppressPromotionalUI from './useShouldSuppressPromotionalUI';
 
 let hasRedirectedToAIFeaturesPromoModal = false;
 let observedActiveMigrationModalThisSession = false;
 let observedActiveOnboardingThisSession = false;
 
 /**
  * Hook that navigates to the AI features promo modal if:
- * - The user is not acting as a delegate; and
+ * - The user is not in a supportal or copilot session; and
  * - The user has not dismissed the AI features promo modal; and
  * - The user has seen neither the migrated user welcome modal nor the onboarding modal in this session
  */
 function useAIFeaturesPromoModal(session: OnyxEntry<Session>) {
     const [isLoadingApp = true, isLoadingAppMetadata] = useOnyx(ONYXKEYS.IS_LOADING_APP);
-    const [isActingAsDelegate, accountMetadata] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isActingAsDelegateSelector});
+    // Suppresses the promo for supportal/copilot sessions and fails closed while SESSION/ACCOUNT load, so eligibility already waits for ACCOUNT before scheduling the promo
+    const shouldSuppressPromotionalUI = useShouldSuppressPromotionalUI();
     const [dismissedProductTraining, dismissedProductTrainingMetadata] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING);
     const [tryNewDot, tryNewDotMetadata] = useOnyx(ONYXKEYS.NVP_TRY_NEW_DOT, {selector: tryNewDotOnyxSelector});
     const [onboarding, onboardingMetadata] = useOnyx(ONYXKEYS.NVP_ONBOARDING);
@@ -67,13 +68,13 @@ function useAIFeaturesPromoModal(session: OnyxEntry<Session>) {
         observedActiveOnboardingThisSession = true;
     }, [hasCompletedOnboarding]);
 
-    const isAllOnyxLoaded = !isLoadingOnyxValue(isLoadingAppMetadata, accountMetadata, dismissedProductTrainingMetadata, tryNewDotMetadata, onboardingMetadata);
+    const isAllOnyxLoaded = !isLoadingOnyxValue(isLoadingAppMetadata, dismissedProductTrainingMetadata, tryNewDotMetadata, onboardingMetadata);
 
     const isEligible =
         isAllOnyxLoaded &&
         !!session?.authToken &&
         !isLoadingApp &&
-        !isActingAsDelegate &&
+        !shouldSuppressPromotionalUI &&
         !hasRedirectedToAIFeaturesPromoModal &&
         !isAIPromoModalDismissed &&
         !isMigrationModalPending &&

src/hooks/useHoldRejectActions.ts

@@ -21,6 +21,7 @@ import {useMemoizedLazyExpensifyIcons} from './useLazyAsset';
 import useLocalize from './useLocalize';
 import useNetwork from './useNetwork';
 import useOnyx from './useOnyx';
+import useShouldSuppressPromotionalUI from './useShouldSuppressPromotionalUI';
 
 type UseHoldRejectActionsParams = {
     reportID: string | undefined;
@@ -54,6 +55,7 @@ function useHoldRejectActions({reportID, onHoldEducationalOpen, onRejectModalOpe
     const [dismissedRejectUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_REJECT_USE_EXPLANATION);
     const [dismissedHoldUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION);
     const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
+    const shouldSuppressPromotionalUI = useShouldSuppressPromotionalUI();
 
     const isReportSubmitter = isCurrentUserSubmitter(chatIOUReport);
     const isChatReportDM = isDM(chatReport);
@@ -76,7 +78,7 @@ function useHoldRejectActions({reportID, onHoldEducationalOpen, onRejectModalOpe
 
                 const isDismissed = isReportSubmitter ? dismissedHoldUseExplanation : dismissedRejectUseExplanation;
 
-                if (isDismissed || isChatReportDM) {
+                if (isDismissed || isChatReportDM || shouldSuppressPromotionalUI) {
                     changeMoneyRequestHoldStatus(requestParentReportAction, transaction, isOffline, currentUserLogin ?? '', currentUserAccountID, transactionViolations, isTrackIntentUser);
                 } else if (isReportSubmitter) {
                     onHoldEducationalOpen();
@@ -118,7 +120,7 @@ function useHoldRejectActions({reportID, onHoldEducationalOpen, onRejectModalOpe
                     return;
                 }
 
-                if (dismissedRejectUseExplanation) {
+                if (dismissedRejectUseExplanation || shouldSuppressPromotionalUI) {
                     Navigation.navigate(ROUTES.REJECT_EXPENSE_REPORT.getRoute(moneyRequestReport.reportID));
                 } else {
                     onRejectModalOpen(CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_REPORT);

src/hooks/useOnboardingFlow.ts

@@ -17,6 +17,7 @@ import {emailSelector} from '@selectors/Session';
 import {useEffect} from 'react';
 
 import useOnyx from './useOnyx';
+import useShouldSuppressPromotionalUI from './useShouldSuppressPromotionalUI';
 
 /**
  * Hook to handle redirection to the onboarding flow based on the user's onboarding status
@@ -26,6 +27,7 @@ import useOnyx from './useOnyx';
 function useOnboardingFlowRouter() {
     const currentUrl = getCurrentUrl();
     const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+    const shouldSuppressPromotionalUI = useShouldSuppressPromotionalUI();
     const [onboardingValues, isOnboardingCompletedMetadata] = useOnyx(ONYXKEYS.NVP_ONBOARDING);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [sessionEmail] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector});
@@ -94,7 +96,7 @@ function useOnboardingFlowRouter() {
                 const isMigratedUser = hasBeenAddedToNudgeMigration ?? false;
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 const isInvitedOrGroupMember = (hasNonPersonalPolicy || wasInvitedToNewDot) ?? false;
-                if (isMigratedUser || isInvitedOrGroupMember) {
+                if (isMigratedUser || isInvitedOrGroupMember || shouldSuppressPromotionalUI) {
                     return;
                 }
 
@@ -144,6 +146,7 @@ function useOnboardingFlowRouter() {
         hasNonPersonalPolicy,
         wasInvitedToNewDot,
         isOnboardingCompleted,
+        shouldSuppressPromotionalUI,
         isVisitingSecureLink,
     ]);
 

src/hooks/useProactiveAppReview.ts

@@ -1,19 +1,13 @@
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Session} from '@src/types/onyx';
 import type ProactiveAppReview from '@src/types/onyx/AppReview';
 
-import type {OnyxEntry} from 'react-native-onyx';
-
-import {isActingAsDelegateSelector} from '@selectors/Account';
 import {useState} from 'react';
 
 import useOnyx from './useOnyx';
+import useShouldSuppressPromotionalUI from './useShouldSuppressPromotionalUI';
 
 const THIRTY_DAYS_IN_MS = 30 * 24 * 60 * 60 * 1000;
 
-const authTokenTypeSelector = (session: OnyxEntry<Session>) => session?.authTokenType;
-
 type UseProactiveAppReviewReturn = {
     /** Whether the modal should be shown */
     shouldShowModal: boolean;
@@ -27,14 +21,13 @@ type UseProactiveAppReviewReturn = {
  */
 function useProactiveAppReview(): UseProactiveAppReviewReturn {
     const [proactiveAppReview] = useOnyx(ONYXKEYS.NVP_APP_REVIEW);
-    const [authTokenType] = useOnyx(ONYXKEYS.SESSION, {selector: authTokenTypeSelector});
-    const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isActingAsDelegateSelector});
+    const shouldSuppressPromotionalUI = useShouldSuppressPromotionalUI();
 
     // Capture once so render stays pure (Date.now is impure). Fine for a 30-day cool-down gate.
     const [timeAtMount] = useState(Date.now);
 
     let shouldShowModal = true;
-    if (authTokenType === CONST.AUTH_TOKEN_TYPES.SUPPORT || isActingAsDelegate) {
+    if (shouldSuppressPromotionalUI) {
         // Supportal agents and copilots should not leave reviews on behalf of another account.
         shouldShowModal = false;
     } else if (!proactiveAppReview?.trigger) {

src/hooks/useShouldSuppressPromotionalUI.ts

@@ -0,0 +1,26 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+
+import {isActingAsDelegateSelector} from '@selectors/Account';
+import {isSupportalSessionSelector} from '@selectors/Session';
+
+import useOnyx from './useOnyx';
+
+/**
+ * Returns true when promo, training, and onboarding UI should be hidden (supportal or copilot session).
+ * Each subscription is narrowed to the derived boolean so consumers only re-render when suppression actually changes.
+ * Fails closed: while SESSION or ACCOUNT is still loading we suppress, so a supportal/copilot session is never briefly
+ * treated as a normal one (e.g. a copilot could otherwise be reset into onboarding before delegatedAccess.delegate loads).
+ */
+function useShouldSuppressPromotionalUI(): boolean {
+    const [isSupportalSession = false, sessionMetadata] = useOnyx(ONYXKEYS.SESSION, {selector: isSupportalSessionSelector});
+    const [isActingAsDelegate = false, accountMetadata] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isActingAsDelegateSelector});
+
+    if (isLoadingOnyxValue(sessionMetadata, accountMetadata)) {
+        return true;
+    }
+
+    return isSupportalSession || isActingAsDelegate;
+}
+
+export default useShouldSuppressPromotionalUI;

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -22,6 +22,7 @@ import WideRHPContextProvider from '@components/WideRHPContextProvider';
 
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useShouldSuppressPromotionalUI from '@hooks/useShouldSuppressPromotionalUI';
 import {SidebarOrderedReportsContextProvider} from '@hooks/useSidebarOrderedReports';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -132,6 +133,7 @@ function AuthScreens() {
     const rootNavigatorScreenOptions = useRootNavigatorScreenOptions();
     const modalCardStyleInterpolator = useModalCardStyleInterpolator();
     const {isOnboardingCompleted} = useOnboardingFlowRouter();
+    const shouldSuppressPromotionalUI = useShouldSuppressPromotionalUI();
 
     useEffect(() => {
         NavBarManager.setButtonStyle(theme.navigationBarButtonsStyle);
@@ -335,7 +337,7 @@ function AuthScreens() {
                             component={FeatureTrainingModalNavigator}
                             listeners={modalScreenListeners}
                         />
-                        {isOnboardingCompleted === false && !Navigation.isValidateLoginFlow() && (
+                        {isOnboardingCompleted === false && !shouldSuppressPromotionalUI && !Navigation.isValidateLoginFlow() && (
                             <RootStack.Screen
                                 name={NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR}
                                 options={{...rootNavigatorScreenOptions.basicModalNavigator, gestureEnabled: false}}

src/libs/Navigation/guards/MigratedUserWelcomeModalGuard.ts

@@ -16,6 +16,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 
 import {findFocusedRoute} from '@react-navigation/native';
 import {tryNewDotOnyxSelector} from '@selectors/Onboarding';
+import {isSupportalSessionSelector} from '@selectors/Session';
 import Onyx from 'react-native-onyx';
 
 import type {GuardResult, NavigationGuard} from './types';
@@ -44,6 +45,7 @@ function resetSessionFlag() {
  */
 function navigateToMigratedUserWelcomeModalIfReady() {
     if (
+        isSupportalSessionSelector(session) ||
         !session?.authToken ||
         isLoadingApp ||
         hasRedirectedToMigratedUserModal ||
@@ -144,6 +146,10 @@ const MigratedUserWelcomeModalGuard: NavigationGuard = {
         }
 
         if (hasBeenAddedToNudgeMigration && !isProductTrainingElementDismissed('migratedUserWelcomeModal', dismissedProductTraining)) {
+            if (context.isSupportalSession) {
+                return {type: 'ALLOW'};
+            }
+
             Log.info('[MigratedUserWelcomeModalGuard] Redirecting to migrated user welcome modal');
             hasRedirectedToMigratedUserModal = true;
 

src/libs/Navigation/guards/OnboardingGuard.ts

@@ -17,6 +17,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 
 import {findFocusedRoute} from '@react-navigation/native';
+import {isActingAsDelegateSelector} from '@selectors/Account';
 import {isSingleNewDotEntrySelector} from '@selectors/HybridApp';
 import {hasCompletedGuidedSetupFlowSelector, tryNewDotOnyxSelector, wasInvitedToNewDotSelector} from '@selectors/Onboarding';
 import Onyx from 'react-native-onyx';
@@ -198,7 +199,10 @@ const OnboardingGuard: NavigationGuard = {
             isInvitedOrGroupMember ||
             isSingleEntry ||
             isFirstTimeHybridAppTransition ||
-            isNavigatingWithReplace;
+            isNavigatingWithReplace ||
+            context.isSupportalSession ||
+            // Copilots should not be pushed through onboarding on behalf of the account they are accessing
+            isActingAsDelegateSelector(account);
 
         if (shouldSkipOnboarding) {
             return {type: 'ALLOW'};

src/libs/Navigation/guards/SubmitPlanWelcomeModalGuard.ts

@@ -19,6 +19,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 
 import {findFocusedRoute} from '@react-navigation/native';
 import {hasCompletedGuidedSetupFlowSelector} from '@selectors/Onboarding';
+import {isSupportalSessionSelector} from '@selectors/Session';
 import {Str} from 'expensify-common';
 import Onyx from 'react-native-onyx';
 
@@ -116,7 +117,15 @@ function isPolicyCreationRestricted(): boolean {
  * race condition where the modal would re-appear on app restart.
  */
 function navigateToSubmitPlanWelcomeModalIfReady() {
-    if (!session?.authToken || isLoadingApp || !hasLoadedApp || hasRedirectedToSubmitPlanModal || !isSubmitMigrationModalShownLoaded || !shouldShowSubmitPlanWelcomeModal()) {
+    if (
+        isSupportalSessionSelector(session) ||
+        !session?.authToken ||
+        isLoadingApp ||
+        !hasLoadedApp ||
+        hasRedirectedToSubmitPlanModal ||
+        !isSubmitMigrationModalShownLoaded ||
+        !shouldShowSubmitPlanWelcomeModal()
+    ) {
         return;
     }
 
@@ -294,16 +303,16 @@ const SubmitPlanWelcomeModalGuard: NavigationGuard = {
             return {type: 'ALLOW'};
         }
 
-        if (shouldShowSubmitPlanWelcomeModal()) {
-            hasRedirectedToSubmitPlanModal = true;
-
-            return {
-                type: 'REDIRECT',
-                route: getSubmitPlanWelcomeModalRoute(),
-            };
+        if (context.isSupportalSession || !shouldShowSubmitPlanWelcomeModal()) {
+            return {type: 'ALLOW'};
         }
 
-        return {type: 'ALLOW'};
+        hasRedirectedToSubmitPlanModal = true;
+
+        return {
+            type: 'REDIRECT',
+            route: getSubmitPlanWelcomeModalRoute(),
+        };
     },
 };