Merge pull request #109 from requestly/vsanse/growthbook-banner-check

feat(banner): GrowthBook-driven legacy auth migration banner (RQ-5181)

Author: vsanse

app/src/componentsV2/AppNotificationBanner/banner.types.ts

@@ -21,6 +21,7 @@ export enum BANNER_ACTIONS {
   REDIRECT_TO_CHROME_STORE_REVIEWS = "redirect_to_chrome_store_reviews",
   REDIRECT_TO_LINKEDIN_FORM = "redirect_to_linkedin_form",
   REDIRECT_TO_NOTION_PAGE = "redirect_to_notion_page",
+  MERGE_BSTACK_ACCOUNT = "merge_bstack_account",
 }
 
 export enum BANNER_ID {
@@ -32,6 +33,7 @@ export enum BANNER_ID {
   BILLING_TEAM_PLAN_REMINDER = "billing_team_plan_reminder",
   CHROME_STORE_REVIEWS = "chrome_store_reviews",
   SHARE_ON_LINKEDIN = "share_on_linkedin",
+  LOGIN_MIGRATION = "login_migration",
 }
 
 export interface Banner {

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

@@ -9,13 +9,18 @@ import { httpsCallable, getFunctions } from "firebase/functions";
 import { toast } from "utils/Toast";
 import { trackCheckoutFailedEvent, trackCheckoutInitiated } from "modules/analytics/events/misc/business/checkout";
 import STORAGE from "config/constants/sub/storage";
+import { CONSTANTS as GLOBAL_CONSTANTS } from "@requestly/requestly-core";
+import { getAppMode } from "store/selectors";
+import { setRedirectMetadata } from "features/onboarding/utils";
+import { SOURCE } from "modules/analytics/events/common/constants";
 
 export const useBannerAction = (
   actions: BANNER_ACTIONS[],
   setIsRequestAccessModalOpen?: (value: boolean) => void
 ): BannerActionConfig[] => {
   const dispatch = useDispatch();
   const user = useSelector(getUserAuthDetails);
+  const appMode = useSelector(getAppMode);
   const firebaseFunction = getFunctions();
 
   const actionMap: Record<BANNER_ACTIONS, BannerActionConfig> = useMemo(
@@ -69,6 +74,30 @@ export const useBannerAction = (
           redirectToUrl(LINKS.NOTION_PAGE_FOR_PROMOTION, true);
         },
       },
+      [BANNER_ACTIONS.MERGE_BSTACK_ACCOUNT]: {
+        label: "Sign in",
+        type: "primary",
+        onClick: () => {
+          // Brings a web user back to the page they started from. LoginHandler reads and clears
+          // this after the token exchange. Harmless on desktop, where the OAuth flow runs in a
+          // different browser and nothing reads it back.
+          setRedirectMetadata({
+            source: SOURCE.AUTH_MIGRATION_BANNER,
+            redirectURL: window.location.href,
+          });
+
+          if (appMode === GLOBAL_CONSTANTS.APP_MODES.DESKTOP) {
+            // redirectToUrl is window.open(url, "_self"), which would navigate the whole Electron
+            // window away from the app. Hand the URL to the system browser instead.
+            window.RQ?.DESKTOP?.SERVICES?.IPC?.invokeEventInBG("open-external-link", {
+              link: LINKS.OAUTH_REDIRECT_URL,
+            });
+            return;
+          }
+
+          redirectToUrl(LINKS.OAUTH_REDIRECT_URL);
+        },
+      },
       [BANNER_ACTIONS.REDIRECT_TO_LINKEDIN_FORM]: {
         label: "Share Now",
         type: "primary",
@@ -120,7 +149,7 @@ export const useBannerAction = (
         },
       },
     }),
-    [dispatch, firebaseFunction, user?.details?.planDetails, setIsRequestAccessModalOpen]
+    [dispatch, firebaseFunction, user?.details?.planDetails, setIsRequestAccessModalOpen, appMode]
   );
 
   return actions.map((action) => actionMap[action]).filter(Boolean);

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/componentsV2/AppNotificationBanner/hooks/useRenderBannerText.ts

@@ -4,6 +4,7 @@ import { getCompanyNameFromEmail, getPrettyPlanName } from "utils/FormattingHelp
 import { isCompanyEmail } from "utils/mailCheckerUtils";
 import { Banner, BANNER_ID } from "../banner.types";
 import { getUserAuthDetails } from "store/slices/global/user/selectors";
+import { interpolateBannerText } from "../utils/interpolateBannerText";
 
 export const useRenderBannerText = (banner: Banner): string => {
   const user = useSelector(getUserAuthDetails);
@@ -16,6 +17,8 @@ export const useRenderBannerText = (banner: Banner): string => {
     user?.details?.planDetails?.planName,
   ]);
 
+  const email = user?.details?.profile?.email || "";
+
   switch (banner.id) {
     case BANNER_ID.COMMERCIAL_LICENSE:
     case BANNER_ID.REQUEST_TEAM_ACCESS:
@@ -30,6 +33,6 @@ export const useRenderBannerText = (banner: Banner): string => {
       return `You're on the ${planName} Monthly plan. Switch to the annual plan and save over 40% on your annual spends with our New Year Deal.`;
 
     default:
-      return banner.text;
+      return interpolateBannerText(banner.text, { email });
   }
 };

app/src/componentsV2/AppNotificationBanner/utils/interpolateBannerText.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+
+import { interpolateBannerText } from "./interpolateBannerText";
+
+describe("interpolateBannerText", () => {
+  it("substitutes a single placeholder", () => {
+    expect(interpolateBannerText("Link {{email}} now", { email: "jane@acme.com" })).toBe("Link jane@acme.com now");
+  });
+
+  it("substitutes the same placeholder more than once", () => {
+    expect(interpolateBannerText("{{email}} and {{email}}", { email: "jane@acme.com" })).toBe(
+      "jane@acme.com and jane@acme.com"
+    );
+  });
+
+  it("tolerates whitespace inside the braces", () => {
+    expect(interpolateBannerText("Link {{ email }} now", { email: "jane@acme.com" })).toBe("Link jane@acme.com now");
+  });
+
+  it("leaves an unknown placeholder as literal text", () => {
+    expect(interpolateBannerText("Hello {{name}}", { email: "jane@acme.com" })).toBe("Hello {{name}}");
+  });
+
+  it("leaves the placeholder alone when the value is an empty string", () => {
+    expect(interpolateBannerText("Link {{email}} now", { email: "" })).toBe("Link {{email}} now");
+  });
+
+  it("treats replacement patterns in the value as literal characters", () => {
+    expect(interpolateBannerText("Link {{email}}", { email: "a$&b@acme.com" })).toBe("Link a$&b@acme.com");
+  });
+
+  it("returns the text unchanged when it holds no placeholder", () => {
+    expect(interpolateBannerText("Nothing to replace", { email: "jane@acme.com" })).toBe("Nothing to replace");
+  });
+
+  it("returns the input unchanged when it is empty", () => {
+    expect(interpolateBannerText("", { email: "jane@acme.com" })).toBe("");
+  });
+});

app/src/componentsV2/AppNotificationBanner/utils/interpolateBannerText.ts

@@ -0,0 +1,15 @@
+const PLACEHOLDER_PATTERN = /\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g;
+
+/**
+ * Substitutes {{key}} placeholders in GrowthBook-authored banner copy.
+ * An unknown or empty value leaves the placeholder in place on purpose, so a typo in the
+ * GrowthBook entry reads as an obvious "{{foo}}" rather than as "undefined".
+ */
+export const interpolateBannerText = (text: string, values: Record<string, string>): string => {
+  if (!text) {
+    return text;
+  }
+
+  // The replacer must stay a function — it keeps "$&" and friends inside the value literal.
+  return text.replace(PLACEHOLDER_PATTERN, (placeholder, key) => values[key] || placeholder);
+};

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/modules/analytics/events/common/constants.js

@@ -135,6 +135,7 @@ export const SOURCE = {
   SHARED_LIST_SCREEN: "shared_list_screen",
   EXTENSION_ONBOARDING: "extension_onboarding",
   DESKTOP_ONBOARDING: "desktop_onboarding",
+  AUTH_MIGRATION_BANNER: "auth_migration_banner",
   PRICING_TABLE: "pricing_table",
   TEAM_WORKSPACE_BAD_INVITE_SCREEN: "team_workspace_bad_invite_screen",
   WORKSPACE_DROPDOWN: "workspace_dropdown",

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