feat(banner): sync browserstackId live so the migration banner self-clears (RQ-5181)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: vsanse

app/src/componentsV2/AppNotificationBanner/hooks/useBannerVisibility.ts

@@ -6,12 +6,13 @@ import { PRICING } from "features/pricing/constants/pricing";
 import { getUserAuthDetails } from "store/slices/global/user/selectors";
 import { getAvailableBillingTeams } from "store/features/billing/selectors";
 import { useFeatureValue } from "@growthbook/growthbook-react";
-import { getAppNotificationBannerDismissTs } from "store/selectors";
+import { getAppNotificationBannerDismissTs, getUserBrowserstackId } from "store/selectors";
 
 export const useBannerVisibility = (bannerId: string): boolean => {
   const user = useSelector(getUserAuthDetails);
   const billingTeams = useSelector(getAvailableBillingTeams);
   const lastDismissTs = useSelector(getAppNotificationBannerDismissTs);
+  const browserstackId = useSelector(getUserBrowserstackId);
   const allBanners = useFeatureValue("app_banner", []);
   const newBanners = useMemo(() => allBanners.filter((banner: any) => banner.createdTs > (lastDismissTs || 0)), [
     allBanners,
@@ -63,8 +64,14 @@ export const useBannerVisibility = (bannerId: string): boolean => {
         return isTeamOwner;
       }
 
+      case BANNER_ID.LOGIN_MIGRATION:
+        // `undefined` means the user doc has not been read yet, `null` means it was read and the
+        // user has no BrowserStack account. Only the second should show the banner, otherwise an
+        // already-merged user sees it flash at every cold start.
+        return Boolean(user?.loggedIn) && browserstackId === null;
+
       default:
         return true;
     }
-  }, [bannerId, user, billingTeams, newBanners]);
+  }, [bannerId, user, billingTeams, newBanners, browserstackId]);
 };

app/src/hooks/DbListenerInit/DBListeners.js

@@ -4,6 +4,7 @@ import { getAppMode, getAuthInitialization } from "../../store/selectors";
 import { getUserAuthDetails } from "store/slices/global/user/selectors";
 import syncingNodeListener from "./syncingNodeListener";
 import userNodeListener from "./userNodeListener";
+import userDocListener from "./userDocListener";
 import { globalActions } from "store/slices/global/slice";
 import { isArray } from "lodash";
 import { useHasChanged } from "hooks/useHasChanged";
@@ -21,15 +22,18 @@ const DBListeners = () => {
   const hasAuthInitialized = useSelector(getAuthInitialization);
 
   let unsubscribeUserNodeRef = useRef(null);
+  let unsubscribeUserDocRef = useRef(null);
   window.unsubscribeSyncingNodeRef = useRef(null);
 
   const hasAuthStateChanged = useHasChanged(user?.loggedIn);
 
   // Listens to /users/{id} changes
   useEffect(() => {
     if (unsubscribeUserNodeRef.current) unsubscribeUserNodeRef.current(); // Unsubscribe existing user node listener before creating a new one
+    if (unsubscribeUserDocRef.current) unsubscribeUserDocRef.current();
     if (user?.loggedIn) {
       unsubscribeUserNodeRef.current = userNodeListener(dispatch, user?.details?.profile.uid, appMode);
+      unsubscribeUserDocRef.current = userDocListener(user?.details?.profile.uid);
       /* CAN BE MOVED TO SEPARATE USE EFFECT AND SHOULD HAVE AN UNSUBSCRIBER TOO, will be useful when actually implementing premium */
       userSubscriptionDocListener(dispatch, user?.details?.profile.uid);
     }

app/src/hooks/DbListenerInit/userDocListener.js

@@ -0,0 +1,40 @@
+import { doc, getFirestore, onSnapshot } from "firebase/firestore";
+import firebaseApp from "../../firebase";
+import APP_CONSTANTS from "config/constants";
+import { submitAttrUtil } from "utils/AnalyticsUtils";
+import Logger from "lib/logger";
+
+/**
+ * Keeps the GrowthBook attribute `browserstack_id` in step with the Firestore user doc.
+ * The BrowserStack merge writes `browserstackId` from a different browser when the app runs on
+ * desktop, and AuthHandler only reads it once from onAuthStateChanged — so without this
+ * subscription the desktop app would not notice the merge until the next restart.
+ *
+ * @returns the unsubscribe function, or null when no listener was attached.
+ */
+const userDocListener = (uid) => {
+  if (!uid) {
+    return null;
+  }
+
+  try {
+    const db = getFirestore(firebaseApp);
+    const userDocRef = doc(db, "users", uid);
+
+    return onSnapshot(
+      userDocRef,
+      (docSnapshot) => {
+        const userData = docSnapshot.exists() ? docSnapshot.data() : null;
+        submitAttrUtil(APP_CONSTANTS.GA_EVENTS.ATTR.BROWSERSTACK_ID, userData?.browserstackId ?? null);
+      },
+      (err) => {
+        Logger.log(`[userDocListener] Encountered error: ${err}`);
+      }
+    );
+  } catch (err) {
+    Logger.log(`[userDocListener] Failed to attach listener: ${err}`);
+    return null;
+  }
+};
+
+export default userDocListener;

app/src/store/selectors.js

@@ -215,6 +215,12 @@ export const getUserAttributes = (state) => {
   return getGlobalState(state)["userAttributes"];
 };
 
+// Returns a primitive on purpose — consuming the whole `userAttributes` object in a component
+// re-renders on every attribute write, as the getUserRulesCount note below records.
+export const getUserBrowserstackId = (state) => {
+  return getUserAttributes(state)?.browserstack_id;
+};
+
 // Had to make a separate selector, since consuming
 // "userAttributes" directly in <RulesListContainer/> component goes into infinite re-renders
 // TODO: fix above