[Side Panel] Concierge Everywhere AB tests

src/CONST/index.ts

@@ -5870,6 +5870,11 @@ const CONST = {
     ONBOARDING_SIGNUP_QUALIFIERS: {...signupQualifiers},
     ONBOARDING_INVITE_TYPES: {...onboardingInviteTypes},
     ONBOARDING_COMPANY_SIZE: {...onboardingCompanySize},
+    ONBOARDING_RHP_VARIANT: {
+        RHP_CONCIERGE_DM: 'rhpConciergeDm',
+        RHP_ADMINS_ROOM: 'rhpAdminsRoom',
+        CONTROL: 'control',
+    },
     ACTIONABLE_TRACK_EXPENSE_WHISPER_MESSAGE: 'What would you like to do with this expense?',
     ONBOARDING_ACCOUNTING_MAPPING,
 

src/ONYXKEYS.ts

@@ -591,6 +591,9 @@ const ONYXKEYS = {
     /** Stores the user's app review prompt state and response */
     NVP_APP_REVIEW: 'nvp_appReview',
 
+    /** Stores the onboarding RHP variant for A/B/C testing */
+    NVP_ONBOARDING_RHP_VARIANT: 'nvp_onboardingRHPVariant',
+
     /** Information about vacation delegate */
     NVP_PRIVATE_VACATION_DELEGATE: 'nvp_private_vacationDelegate',
 
@@ -1355,6 +1358,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.BILLING_RECEIPT_DETAILS]: OnyxTypes.BillingReceiptDetails;
     [ONYXKEYS.NVP_SIDE_PANEL]: OnyxTypes.SidePanel;
     [ONYXKEYS.NVP_APP_REVIEW]: OnyxTypes.AppReview;
+    [ONYXKEYS.NVP_ONBOARDING_RHP_VARIANT]: OnyxTypes.OnboardingRHPVariant;
     [ONYXKEYS.NVP_DISMISSED_REJECT_USE_EXPLANATION]: boolean;
     [ONYXKEYS.NVP_PRIVATE_VACATION_DELEGATE]: OnyxTypes.VacationDelegate;
     [ONYXKEYS.SCHEDULE_CALL_DRAFT]: OnyxTypes.ScheduleCallDraft;

src/components/SidePanel/RHPVariantTest/index.native.ts

@@ -0,0 +1,13 @@
+import type {HandleRHPVariantNavigation, ShouldOpenRHPVariant} from './types';
+
+/**
+ * Side Panel is not supported on native platforms, so we always return false.
+ */
+const shouldOpenRHPVariant: ShouldOpenRHPVariant = () => false;
+
+/**
+ * No-op on native platforms since Side Panel is not supported.
+ */
+const handleRHPVariantNavigation: HandleRHPVariantNavigation = () => {};
+
+export {shouldOpenRHPVariant, handleRHPVariantNavigation};

src/components/SidePanel/RHPVariantTest/index.ts

@@ -0,0 +1,55 @@
+import Onyx from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import SidePanelActions from '@libs/actions/SidePanel';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {OnboardingRHPVariant} from '@src/types/onyx';
+import type {HandleRHPVariantNavigation, ShouldOpenRHPVariant} from './types';
+
+let onboardingRHPVariant: OnyxEntry<OnboardingRHPVariant>;
+let onboardingCompanySize: OnyxEntry<string>;
+
+// We use Onyx.connectWithoutView because we do not use this in React components and this logic is not tied directly to the UI.
+Onyx.connectWithoutView({
+    key: ONYXKEYS.NVP_ONBOARDING_RHP_VARIANT,
+    callback: (value) => {
+        onboardingRHPVariant = value;
+    },
+});
+
+Onyx.connectWithoutView({
+    key: ONYXKEYS.ONBOARDING_COMPANY_SIZE,
+    callback: (value) => {
+        onboardingCompanySize = value;
+    },
+});
+
+/**
+ * Determines if the user should be navigated to the RHP variant side panel after onboarding.
+ * The RHP variant is only shown to micro companies that are part of the RHP experiment.
+ */
+const shouldOpenRHPVariant: ShouldOpenRHPVariant = () => {
+    const isMicroCompany = onboardingCompanySize === CONST.ONBOARDING_COMPANY_SIZE.MICRO;
+    const isRHPConciergeDM = onboardingRHPVariant === CONST.ONBOARDING_RHP_VARIANT.RHP_CONCIERGE_DM;
+    const isRHPAdminsRoom = onboardingRHPVariant === CONST.ONBOARDING_RHP_VARIANT.RHP_ADMINS_ROOM;
+
+    return isMicroCompany && (isRHPConciergeDM || isRHPAdminsRoom);
+};
+
+/**
+ * Handles navigation for RHP experiment:
+ * - Control: navigate to the last accessed report on small screens, do not open side panel
+ * - RHP Concierge DM: navigate to the workspace overview and open the side panel with the Concierge DM
+ * - RHP Admins Room: navigate to the workspace overview and open the side panel with the Admins Room
+ */
+const handleRHPVariantNavigation: HandleRHPVariantNavigation = (onboardingPolicyID) => {
+    Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(onboardingPolicyID));
+    SidePanelActions.openSidePanel(true);
+    Navigation.isNavigationReady().then(() => {
+        Navigation.navigate(ROUTES.TEST_DRIVE_MODAL_ROOT.route);
+    });
+};
+
+export {shouldOpenRHPVariant, handleRHPVariantNavigation};

src/components/SidePanel/RHPVariantTest/types.ts

@@ -0,0 +1,4 @@
+type ShouldOpenRHPVariant = () => boolean;
+type HandleRHPVariantNavigation = (onboardingPolicyID?: string) => void;
+
+export type {ShouldOpenRHPVariant, HandleRHPVariantNavigation};

src/components/SidePanel/SidePanelContextProvider.tsx

@@ -3,14 +3,18 @@ import React, {createContext, useCallback, useEffect, useMemo, useRef, useState}
 // Import Animated directly from 'react-native' as animations are used with navigation.
 // eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
+import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSidePanelDisplayStatus from '@hooks/useSidePanelDisplayStatus';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import SidePanelActions from '@libs/actions/SidePanel';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
+import {isPolicyAdmin, shouldShowPolicy} from '@libs/PolicyUtils';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {emailSelector} from '@src/selectors/Session';
 import type {SidePanel} from '@src/types/onyx';
 
 type SidePanelContextProps = {
@@ -25,6 +29,7 @@ type SidePanelContextProps = {
     openSidePanel: () => void;
     closeSidePanel: () => void;
     sidePanelNVP?: SidePanel;
+    reportID?: string;
 };
 
 const SidePanelContext = createContext<SidePanelContextProps>({
@@ -56,6 +61,28 @@ function SidePanelContextProvider({children}: PropsWithChildren) {
     const sidePanelOffset = useRef(new Animated.Value(shouldApplySidePanelOffset ? variables.sidePanelWidth : 0));
     const sidePanelTranslateX = useRef(new Animated.Value(shouldHideSidePanel ? sidePanelWidth : 0));
 
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID, {canBeMissing: true});
+    const [onboardingRHPVariant] = useOnyx(ONYXKEYS.NVP_ONBOARDING_RHP_VARIANT, {canBeMissing: true});
+    const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID, {canBeMissing: true});
+    const [activePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`, {canBeMissing: true});
+    const [sessionEmail] = useOnyx(ONYXKEYS.SESSION, {
+        canBeMissing: true,
+        selector: emailSelector,
+    });
+
+    const reportID = useMemo(() => {
+        const isRHPAdminsRoom = onboardingRHPVariant === CONST.ONBOARDING_RHP_VARIANT.RHP_ADMINS_ROOM;
+        const isUserAdmin = isPolicyAdmin(activePolicy, sessionEmail);
+        const isPolicyActive = shouldShowPolicy(activePolicy, false, sessionEmail ?? '');
+        const adminsChatReportID = activePolicy?.chatReportIDAdmins?.toString();
+
+        if (isRHPAdminsRoom && isUserAdmin && isPolicyActive && adminsChatReportID) {
+            return adminsChatReportID;
+        }
+
+        return conciergeReportID;
+    }, [onboardingRHPVariant, activePolicy, sessionEmail, conciergeReportID]);
+
     useEffect(() => {
         setIsSidePanelTransitionEnded(false);
         Animated.parallel([
@@ -103,6 +130,7 @@ function SidePanelContextProvider({children}: PropsWithChildren) {
             openSidePanel: () => SidePanelActions.openSidePanel(!isExtraLargeScreenWidth),
             closeSidePanel,
             sidePanelNVP,
+            reportID,
         }),
         [
             closeSidePanel,
@@ -114,6 +142,7 @@ function SidePanelContextProvider({children}: PropsWithChildren) {
             shouldHideSidePanelBackdrop,
             shouldHideToolTip,
             sidePanelNVP,
+            reportID,
         ],
     );
 

src/components/SidePanel/Concierge/index.tsx → src/components/SidePanel/SidePanelReport/index.tsx

@@ -1,22 +1,17 @@
 import {NavigationRouteContext} from '@react-navigation/native';
 import React from 'react';
-import useOnyx from '@hooks/useOnyx';
 import type {ExtraContentProps, PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
 import ReportScreen from '@pages/home/ReportScreen';
-import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 
-const CONCIERGE_REPORT_KEY = 'Report-Concierge-Key';
+type SidePanelReportProps = Pick<ExtraContentProps, 'navigation'> & {
+    reportID: string;
+};
 
-function Concierge({navigation}: Pick<ExtraContentProps, 'navigation'>) {
-    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID, {canBeMissing: true});
+function SidePanelReport({navigation, reportID}: SidePanelReportProps) {
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const route = !!conciergeReportID && ({name: SCREENS.REPORT, params: {reportID: conciergeReportID}, key: CONCIERGE_REPORT_KEY} as const);
-
-    if (!route) {
-        return null;
-    }
+    const route = {name: SCREENS.REPORT, params: {reportID}, key: `Report-SidePanel-${reportID}`} as const;
 
     return (
         <NavigationRouteContext.Provider value={route}>
@@ -29,4 +24,4 @@ function Concierge({navigation}: Pick<ExtraContentProps, 'navigation'>) {
     );
 }
 
-export default Concierge;
+export default SidePanelReport;

src/components/SidePanel/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import useSidePanel from '@hooks/useSidePanel';
 import type {ExtraContentProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import Concierge from './Concierge';
 import SidePanelModal from './SidePanelModal';
+import SidePanelReport from './SidePanelReport';
 import useSyncSidePanelWithHistory from './useSyncSidePanelWithHistory';
 
 function SidePanel({navigation}: Pick<ExtraContentProps, 'navigation'>) {
-    const {sidePanelNVP, isSidePanelTransitionEnded, shouldHideSidePanel, sidePanelTranslateX, shouldHideSidePanelBackdrop, closeSidePanel} = useSidePanel();
+    const {sidePanelNVP, isSidePanelTransitionEnded, shouldHideSidePanel, sidePanelTranslateX, shouldHideSidePanelBackdrop, closeSidePanel, reportID} = useSidePanel();
 
     // Hide side panel once animation ends
     // This hook synchronizes the side panel visibility with the browser history when it is displayed as RHP.
@@ -15,7 +15,7 @@ function SidePanel({navigation}: Pick<ExtraContentProps, 'navigation'>) {
     useSyncSidePanelWithHistory();
 
     // Side panel can't be displayed if NVP is undefined
-    if (!sidePanelNVP) {
+    if (!sidePanelNVP || !reportID) {
         return null;
     }
 
@@ -30,7 +30,10 @@ function SidePanel({navigation}: Pick<ExtraContentProps, 'navigation'>) {
             closeSidePanel={closeSidePanel}
             shouldHideSidePanelBackdrop={shouldHideSidePanelBackdrop}
         >
-            <Concierge navigation={navigation} />
+            <SidePanelReport
+                navigation={navigation}
+                reportID={reportID}
+            />
         </SidePanelModal>
     );
 }

src/components/SidePanel/isSidePanelReportSupported/index.native.ts

@@ -0,0 +1,5 @@
+import type IsSidePanelReportSupported from './types';
+
+const isSidePanelReportSupported: IsSidePanelReportSupported = false;
+
+export default isSidePanelReportSupported;

src/components/SidePanel/isSidePanelReportSupported/index.ts

@@ -0,0 +1,5 @@
+import type IsSidePanelReportSupported from './types';
+
+const isSidePanelReportSupported: IsSidePanelReportSupported = true;
+
+export default isSidePanelReportSupported;

src/components/SidePanel/isSidePanelReportSupported/types.ts

@@ -0,0 +1,3 @@
+type IsSidePanelReportSupported = boolean;
+
+export default IsSidePanelReportSupported;

src/components/TestDrive/Modal/AdminTestDriveModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {InteractionManager} from 'react-native';
+import {shouldOpenRHPVariant} from '@components/SidePanel/RHPVariantTest';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import Log from '@libs/Log';
@@ -27,6 +28,11 @@ function AdminTestDriveModal() {
         Log.hmmm('[AdminTestDriveModal] Skip test drive function called');
         Navigation.dismissModal();
 
+        if (shouldOpenRHPVariant()) {
+            Log.hmmm('[AdminTestDriveModal] User was redirected to Workspace Editor, skipping navigation to admin room');
+            return;
+        }
+
         Log.hmmm('[AdminTestDriveModal] Running after interactions');
         Navigation.setNavigationActionToMicrotaskQueue(() => {
             if (!isAdminRoom(onboardingReport)) {

src/libs/API/index.ts

@@ -217,11 +217,10 @@ function makeRequestWithSideEffects<TCommand extends SideEffectRequestCommand>(
 }
 
 /**
- * Ensure all write requests on the sequential queue have finished responding before running read requests.
- * Responses from read requests can overwrite the optimistic data inserted by
- * write requests that use the same Onyx keys and haven't responded yet.
+ * Ensure all write requests on the sequential queue have finished responding before running a command.
+ * Responses from requests can overwrite the optimistic data inserted by write requests that use the same Onyx keys and haven't responded yet.
  */
-function waitForWrites<TCommand extends ReadCommand>(command: TCommand) {
+function waitForWrites<TCommand extends ReadCommand | WriteCommand | SideEffectRequestCommand>(command: TCommand) {
     if (getPersistedRequestsLength() > 0) {
         Log.info(`[API] '${command}' is waiting on ${getPersistedRequestsLength()} write commands`);
     }

src/libs/API/types.ts

@@ -1284,6 +1284,7 @@ const SIDE_EFFECT_REQUEST_COMMANDS = {
     CALCULATE_BILL_NEW_DOT: 'CalculateBillNewDot',
 
     ACCEPT_SPOTNANA_TERMS: 'AcceptSpotnanaTerms',
+    COMPLETE_GUIDED_SETUP: 'CompleteGuidedSetup',
 } as const;
 
 type SideEffectRequestCommand = ValueOf<typeof SIDE_EFFECT_REQUEST_COMMANDS>;
@@ -1312,6 +1313,7 @@ type SideEffectRequestCommandParameters = {
     [SIDE_EFFECT_REQUEST_COMMANDS.CALCULATE_BILL_NEW_DOT]: null;
     [SIDE_EFFECT_REQUEST_COMMANDS.ACCEPT_SPOTNANA_TERMS]: Parameters.AcceptSpotnanaTermsParams;
     [SIDE_EFFECT_REQUEST_COMMANDS.GET_SCIM_TOKEN]: Parameters.GetScimTokenParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.COMPLETE_GUIDED_SETUP]: Parameters.CompleteGuidedSetupParams;
 };
 
 type ApiRequestCommandParameters = WriteCommandParameters & ReadCommandParameters & SideEffectRequestCommandParameters;