fix: small cleanup

Author: rebelchris

packages/shared/src/contexts/AuthContext.tsx

@@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import type { QueryObserverResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import type { GrowthBookContextValue } from '@growthbook/growthbook-react';
 import { GrowthBookContext } from '@growthbook/growthbook-react';
 import type { AnonymousUser, LoggedUser } from '../lib/user';
 import { deleteAccount, logout as dispatchLogout } from '../lib/user';
@@ -49,12 +50,6 @@ type ShowLoginParams = {
   options?: LoginOptions;
 };
 
-type GrowthBookContextData = {
-  growthbook?: {
-    getFeatureValue: <T>(id: string, defaultValue: T) => T | undefined;
-  };
-};
-
 export interface AuthContextData {
   user?: LoggedUser;
   isLoggedIn: boolean;
@@ -85,7 +80,6 @@ export interface AuthContextData {
   isGdprCovered?: boolean;
   isValidRegion?: boolean;
   isFunnel?: boolean;
-  inlineLoginEnabled?: boolean;
 }
 
 const isExtension = checkIsExtension();
@@ -168,37 +162,19 @@ export const AuthContextProvider = ({
   isAndroidApp,
 }: AuthContextProviderProps): ReactElement => {
   const [loginState, setLoginState] = useState<LoginState | null>(null);
-  const [inlineLoginEnabled, setInlineLoginEnabled] = useState<boolean>();
-  const inlineLoginEnabledRef = useRef<boolean>();
   const endUser = user && 'providers' in user ? user : null;
   const referral = user?.referralId || user?.referrer;
   const referralOrigin = user?.referralOrigin;
   const router = useRouter();
   const isFunnelRef = useRef(!!router?.pathname?.startsWith(webFunnelPrefix));
   const growthbookContext = useContext(
     GrowthBookContext,
-  ) as unknown as GrowthBookContextData;
+  ) as unknown as GrowthBookContextValue;
   const growthbook = growthbookContext?.growthbook;
   const isValidRegion = useMemo(
     () => !invalidPlusRegions.includes(geo?.region),
     [geo?.region],
   );
-  const evaluateInlineLogin = useCallback((): boolean => {
-    if (!isNullOrUndefined(inlineLoginEnabledRef.current)) {
-      return inlineLoginEnabledRef.current;
-    }
-
-    const isEnabled =
-      growthbook?.getFeatureValue<boolean>(
-        inlineLoginFeatureId,
-        inlineLoginDefaultValue,
-      ) === true;
-
-    inlineLoginEnabledRef.current = isEnabled;
-    setInlineLoginEnabled(isEnabled);
-
-    return isEnabled;
-  }, [growthbook]);
 
   return (
     <AuthContext.Provider
@@ -212,7 +188,6 @@ export const AuthContextProvider = ({
         firstVisit: user?.firstVisit,
         trackingId: user?.id,
         shouldShowLogin: loginState !== null,
-        inlineLoginEnabled,
         showLogin: useCallback(
           ({ trigger, options = {} }) => {
             const hasCompanion = !!isCompanionActivated();
@@ -223,7 +198,12 @@ export const AuthContextProvider = ({
             }
 
             const params = new URLSearchParams(globalThis?.location.search);
-            const shouldUseInlineLogin = !isExtension && evaluateInlineLogin();
+            const shouldUseInlineLogin =
+              !isExtension &&
+              growthbook?.getFeatureValue(
+                inlineLoginFeatureId,
+                inlineLoginDefaultValue,
+              ) === true;
 
             setLoginState({ ...options, trigger });
             if (isExtension) {
@@ -247,7 +227,7 @@ export const AuthContextProvider = ({
 
             router.push(onboardingPath);
           },
-          [evaluateInlineLogin, router],
+          [growthbook, router],
         ),
         closeLogin: useCallback(() => setLoginState(null), []),
         loginState,

packages/shared/src/contexts/BootProvider.spec.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useContext } from 'react';
+import type { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import nock from 'nock';
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render, screen } from '@testing-library/react';
@@ -47,9 +49,19 @@ jest.mock('../lib/user', () => {
 
 const getRedirectUriMock = jest.fn();
 
+const mockUseRouter = (router: Partial<NextRouter> = {}) => {
+  jest.mocked(useRouter).mockReturnValue({
+    query: {},
+    push: jest.fn(),
+    pathname: '/',
+    ...router,
+  } as unknown as NextRouter);
+};
+
 beforeEach(() => {
   nock.cleanAll();
   localStorage.clear();
+  mockUseRouter();
 });
 
 const defaultAlerts: Alerts = { filter: true, rankLastSeen: undefined };
@@ -417,7 +429,6 @@ const AuthMock = ({ updatedUser, loginTrigger }: AuthMockProps) => {
     getRedirectUri,
     trackingId,
     anonymous,
-    inlineLoginEnabled,
   } = useContext(AuthContext);
 
   return (
@@ -462,9 +473,6 @@ const AuthMock = ({ updatedUser, loginTrigger }: AuthMockProps) => {
       </button>
       <span data-test-value={trackingId}>Tracking ID</span>
       <span data-test-value={JSON.stringify(anonymous)}>Anonymous User</span>
-      <span data-test-value={`${inlineLoginEnabled}`}>
-        Inline Login Enabled
-      </span>
     </>
   );
 };
@@ -505,7 +513,13 @@ it('should trigger show login callback', async () => {
   await expectToHaveTestValue(login, JSON.stringify({ trigger: expected }));
 });
 
-it('should evaluate inline login only after auth intent', async () => {
+it('should keep inline login on page when enabled after auth intent', async () => {
+  const push = jest.fn();
+  mockUseRouter({
+    push,
+    pathname: '/posts/shared',
+  });
+
   renderComponent(<AuthMock loginTrigger={AuthTriggers.Comment} />, {
     ...defaultBootData,
     user: defaultAnonymousUser,
@@ -522,12 +536,16 @@ it('should evaluate inline login only after auth intent', async () => {
   });
 
   const login = await screen.findByText('Log in');
-  const inlineLogin = await screen.findByText('Inline Login Enabled');
-  await expectToHaveTestValue(inlineLogin, 'undefined');
+  await expectToHaveTestValue(login, 'null');
+  expect(push).not.toHaveBeenCalled();
 
   fireEvent.click(login);
 
-  await expectToHaveTestValue(inlineLogin, 'true');
+  await expectToHaveTestValue(
+    login,
+    JSON.stringify({ trigger: AuthTriggers.Comment }),
+  );
+  expect(push).not.toHaveBeenCalled();
 });
 
 it('should trigger close login callback', async () => {

packages/webapp/pages/_app.tsx

@@ -21,6 +21,7 @@ import { ProgressiveEnhancementContextProvider } from '@dailydotdev/shared/src/c
 import { SubscriptionContextProvider } from '@dailydotdev/shared/src/contexts/SubscriptionContext';
 import { ShortcutsProvider } from '@dailydotdev/shared/src/features/shortcuts/contexts/ShortcutsProvider';
 import { canonicalFromRouter } from '@dailydotdev/shared/src/lib/canonical';
+import { featureInlineLogin } from '@dailydotdev/shared/src/lib/featureManagement';
 import '@dailydotdev/shared/src/styles/globals.css';
 import useLogPageView from '@dailydotdev/shared/src/hooks/log/useLogPageView';
 import { BootDataProvider } from '@dailydotdev/shared/src/contexts/BootProvider';
@@ -36,7 +37,10 @@ import { LazyModal } from '@dailydotdev/shared/src/components/modals/common/type
 import { defaultQueryClientConfig } from '@dailydotdev/shared/src/lib/query';
 import { useWebVitals } from '@dailydotdev/shared/src/hooks/useWebVitals';
 import { LazyModalElement } from '@dailydotdev/shared/src/components/modals/LazyModalElement';
-import { useManualScrollRestoration } from '@dailydotdev/shared/src/hooks';
+import {
+  useConditionalFeature,
+  useManualScrollRestoration,
+} from '@dailydotdev/shared/src/hooks';
 import { useScrollbarWidth } from '@dailydotdev/shared/src/hooks/useScrollbarWidth';
 import { PushNotificationContextProvider } from '@dailydotdev/shared/src/contexts/PushNotificationContext';
 import { SerwistProvider } from '@serwist/turbopack/react';
@@ -102,9 +106,8 @@ const onboardingExcludedPaths = [
   '/jobs',
   '/settings',
 ];
-// Once auth intent assigns the user to inline_login, only force the rest of
-// onboarding when they land on the main feed. Everywhere else they can keep
-// browsing after the inline first step.
+// While inline_login is active for an auth intent, only force the rest of
+// onboarding when the user lands on the main feed.
 const mainFeedPathnames = new Set([
   '/',
   '/popular',
@@ -165,6 +168,7 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
   const { isOnboardingActionsReady, isOnboardingComplete } =
     useOnboardingActions();
   const openedHotAndColdFromQueryRef = useRef(false);
+  const [hasSeenLoginIntent, setHasSeenLoginIntent] = useState(false);
 
   const { unreadCount } = useNotificationContext();
   const unreadText = getUnreadText(unreadCount);
@@ -175,8 +179,11 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
     shouldShowLogin,
     closeLogin,
     loginState,
-    inlineLoginEnabled,
   } = useAuthContext();
+  const { value: inlineLoginEnabled } = useConditionalFeature({
+    feature: featureInlineLogin,
+    shouldEvaluate: shouldShowLogin || hasSeenLoginIntent,
+  });
   const { showBanner, onAcceptCookies, onOpenBanner, onHideBanner } =
     useCookieBanner();
   useWebVitals();
@@ -197,6 +204,14 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
       (hotAndColdModalQuery.includes(hotAndColdModalQueryValue) ||
         hotAndColdModalQuery.includes(hotAndColdModalLegacyQueryValue)));
 
+  useEffect(() => {
+    if (!shouldShowLogin) {
+      return;
+    }
+
+    setHasSeenLoginIntent(true);
+  }, [shouldShowLogin]);
+
   useEffect(() => {
     if (!shouldOpenHotAndColdFromQuery) {
       openedHotAndColdFromQueryRef.current = false;
@@ -238,9 +253,8 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
       return;
     }
 
-    // Inline login experiment: after auth intent enrolls the user, defer the
-    // rest of onboarding until they navigate to the main feed; otherwise let
-    // them keep browsing.
+    // Inline login experiment: while the auth intent is active, defer the rest
+    // of onboarding until they navigate to the main feed.
     if (inlineLoginEnabled && !mainFeedPathnames.has(router.pathname)) {
       return;
     }