feat: add post-signup feed activation

packages/shared/src/components/LoginButton.tsx

@@ -5,7 +5,7 @@ import { Button, ButtonVariant } from './buttons/Button';
 import { useLogContext } from '../contexts/LogContext';
 import type { LogEvent } from '../hooks/log/useLogQueue';
 import { TargetType } from '../lib/log';
-import { useAuthContext } from '../contexts/AuthContext';
+import { type LoginState, useAuthContext } from '../contexts/AuthContext';
 import { AuthTriggers } from '../lib/auth';
 
 interface ClassName {
@@ -15,6 +15,7 @@ interface ClassName {
 
 interface LoginButtonProps {
   className?: ClassName;
+  onRegistrationSuccess?: LoginState['onRegistrationSuccess'];
 }
 
 enum ButtonCopy {
@@ -32,6 +33,7 @@ const getLogEvent = (copy: ButtonCopy): LogEvent => ({
 
 export default function LoginButton({
   className = {},
+  onRegistrationSuccess,
 }: LoginButtonProps): ReactElement {
   const { logEvent } = useLogContext();
   const { showLogin } = useAuthContext();
@@ -41,6 +43,7 @@ export default function LoginButton({
       trigger: AuthTriggers.MainButton,
       options: {
         isLogin: copy === ButtonCopy.Login,
+        onRegistrationSuccess,
       },
     });
   };

packages/shared/src/components/auth/AuthenticationBanner.tsx

@@ -5,7 +5,7 @@ import classed from '../../lib/classed';
 import { OnboardingHeadline } from './OnboardingHeadline';
 import AuthOptions from './AuthOptions';
 import { AuthTriggers } from '../../lib/auth';
-import { useAuthContext } from '../../contexts/AuthContext';
+import { type LoginState, useAuthContext } from '../../contexts/AuthContext';
 import { authGradientBg, BottomBannerContainer } from '../marketing/banners';
 import { ButtonVariant } from '../buttons/common';
 import { Image } from '../image/Image';
@@ -20,11 +20,13 @@ const Section = classed('div', 'flex flex-col');
 
 interface AuthenticationBannerProps extends PropsWithChildren {
   compact?: boolean;
+  onRegistrationSuccess?: LoginState['onRegistrationSuccess'];
 }
 
 export function AuthenticationBanner({
   children,
   compact,
+  onRegistrationSuccess,
 }: AuthenticationBannerProps): ReactElement {
   const { showLogin } = useAuthContext();
 
@@ -89,6 +91,7 @@ export function AuthenticationBanner({
                   isLogin: !!props.isLoginFlow,
                   defaultDisplay: props.defaultDisplay,
                   formValues: props.email ? { email: props.email } : undefined,
+                  onRegistrationSuccess,
                 },
               });
             }}

packages/shared/src/components/auth/CustomAuthBanner.tsx

@@ -1,26 +1,44 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import { useOnboardingActions } from '../../hooks/auth';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { useViewSize, ViewSize } from '../../hooks';
 import LoginButton from '../LoginButton';
 import { authGradientBg } from '../marketing/banners';
+import {
+  isPostOnboardingPreviewEnabled,
+  markPostSignupActivation,
+  POST_ONBOARDING_PREVIEW_QUERY,
+} from '../../lib/postSignupActivation';
+import { isDevelopment } from '../../lib/constants';
 
 const CustomAuthBanner = (): ReactElement | null => {
   const { shouldShowAuthBanner } = useOnboardingActions();
   const { shouldShowLogin } = useAuthContext();
+  const router = useRouter();
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isTablet = useViewSize(ViewSize.Tablet);
+  const isActivationPreview =
+    router.pathname === '/posts/[id]' &&
+    (isDevelopment ||
+      isPostOnboardingPreviewEnabled(
+        router.query?.[POST_ONBOARDING_PREVIEW_QUERY],
+      ));
   const isValid =
-    shouldShowAuthBanner && !isLaptop && (isTablet || !shouldShowLogin);
+    !isActivationPreview &&
+    shouldShowAuthBanner &&
+    !isLaptop &&
+    (isTablet || !shouldShowLogin);
 
   if (!isValid) {
     return null;
   }
 
   return (
     <LoginButton
+      onRegistrationSuccess={markPostSignupActivation}
       className={{
         container: classNames(
           authGradientBg,

packages/shared/src/components/auth/PostAuthBanner.tsx

@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic';
 import { AuthenticationBanner } from './AuthenticationBanner';
 import { getSocialReferrer } from '../../lib/socialMedia';
 import { useAuthContext } from '../../contexts/AuthContext';
+import { markPostSignupActivation } from '../../lib/postSignupActivation';
 
 const UserPersonalizedBanner = dynamic(
   () =>
@@ -36,17 +37,40 @@ export const PostAuthBanner = ({
   const userId = searchParams?.get('userid');
 
   if (userId) {
-    return <UserPersonalizedBanner userId={userId} compact={compact} />;
+    return (
+      <UserPersonalizedBanner
+        userId={userId}
+        compact={compact}
+        onRegistrationSuccess={markPostSignupActivation}
+      />
+    );
   }
 
   const social = getSocialReferrer();
   if (social) {
-    return <SocialPersonalizedBanner site={social} compact={compact} />;
+    return (
+      <SocialPersonalizedBanner
+        site={social}
+        compact={compact}
+        onRegistrationSuccess={markPostSignupActivation}
+      />
+    );
   }
 
   if (geo?.region) {
-    return <GeoPersonalizedBanner geo={geo.region} compact={compact} />;
+    return (
+      <GeoPersonalizedBanner
+        geo={geo.region}
+        compact={compact}
+        onRegistrationSuccess={markPostSignupActivation}
+      />
+    );
   }
 
-  return <AuthenticationBanner compact={compact} />;
+  return (
+    <AuthenticationBanner
+      compact={compact}
+      onRegistrationSuccess={markPostSignupActivation}
+    />
+  );
 };

packages/shared/src/components/marketing/banners/personalized/GeoPersonalizedBanner.tsx

@@ -2,19 +2,25 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { geoToCountry, geoToEmoji } from '../../../../lib/geo';
 import { AuthenticationBanner, OnboardingHeadline } from '../../../auth';
+import type { LoginState } from '../../../../contexts/AuthContext';
 
 const GeoPersonalizedBanner = ({
   geo,
   compact,
+  onRegistrationSuccess,
 }: {
   geo: string;
   compact?: boolean;
+  onRegistrationSuccess?: LoginState['onRegistrationSuccess'];
 }): ReactElement => {
   const emoji = geoToEmoji(geo);
   const country = geoToCountry(geo);
 
   return (
-    <AuthenticationBanner compact={compact}>
+    <AuthenticationBanner
+      compact={compact}
+      onRegistrationSuccess={onRegistrationSuccess}
+    >
       <span
         className={
           compact ? 'text-[2.5rem] leading-none' : 'text-[3.5rem] leading-none'

packages/shared/src/components/marketing/banners/personalized/SocialPersonalizedBanner.tsx

@@ -11,19 +11,25 @@ import {
 import type { SupportedSocialReferrer } from '../../../../lib/socialMedia';
 import { capitalize } from '../../../../lib/strings';
 import { IconSize } from '../../../Icon';
+import type { LoginState } from '../../../../contexts/AuthContext';
 
 const SocialPersonalizedBanner = ({
   site,
   compact,
+  onRegistrationSuccess,
 }: {
   site: SupportedSocialReferrer;
   compact?: boolean;
+  onRegistrationSuccess?: LoginState['onRegistrationSuccess'];
 }): ReactElement => {
   const Icon = socialIcon[site];
   const gradient = socialGradient[site];
 
   return (
-    <AuthenticationBanner compact={compact}>
+    <AuthenticationBanner
+      compact={compact}
+      onRegistrationSuccess={onRegistrationSuccess}
+    >
       <Icon
         size={compact ? IconSize.Large : IconSize.Size48}
         secondary={site === SocialIconType.Reddit}

packages/shared/src/components/marketing/banners/personalized/UserPersonalizedBanner.tsx

@@ -5,13 +5,16 @@ import { getBasicUserInfo } from '../../../../graphql/users';
 import { AuthenticationBanner, OnboardingHeadline } from '../../../auth';
 import { ProfilePicture } from '../../../ProfilePicture';
 import { generateQueryKey, RequestKey } from '../../../../lib/query';
+import type { LoginState } from '../../../../contexts/AuthContext';
 
 const UserPersonalizedBanner = ({
   userId,
   compact,
+  onRegistrationSuccess,
 }: {
   userId: string;
   compact?: boolean;
+  onRegistrationSuccess?: LoginState['onRegistrationSuccess'];
 }): ReactElement => {
   const key = generateQueryKey(RequestKey.ReferringUser);
   const { data: user, isError } = useQuery({
@@ -20,13 +23,21 @@ const UserPersonalizedBanner = ({
   });
 
   if (isError) {
-    return <AuthenticationBanner compact={compact} />;
+    return (
+      <AuthenticationBanner
+        compact={compact}
+        onRegistrationSuccess={onRegistrationSuccess}
+      />
+    );
   }
 
   const name = user?.name ? user?.name.split(' ')[0] : user?.username;
 
   return (
-    <AuthenticationBanner compact={compact}>
+    <AuthenticationBanner
+      compact={compact}
+      onRegistrationSuccess={onRegistrationSuccess}
+    >
       {user?.image && <ProfilePicture user={user} />}
       <OnboardingHeadline
         className={{

packages/shared/src/components/post/PostOnboardingActivation.spec.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PostOnboardingActivation } from './PostOnboardingActivation';
+import {
+  clearPostSignupActivation,
+  hasPostSignupActivation,
+} from '../../lib/postSignupActivation';
+
+const mockPush = jest.fn();
+const mockLogEvent = jest.fn();
+
+jest.mock('next/router', () => ({
+  useRouter: () => ({
+    asPath: '/posts/post-1?ref=share',
+    push: mockPush,
+  }),
+}));
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({ user: { id: 'new-user' } }),
+}));
+
+jest.mock('../../hooks/auth/useOnboardingActions', () => ({
+  useOnboardingActions: () => ({
+    isOnboardingActionsReady: true,
+    isOnboardingComplete: false,
+  }),
+}));
+
+jest.mock('../../contexts/LogContext', () => ({
+  useLogContext: () => ({ logEvent: mockLogEvent }),
+}));
+
+jest.mock('../../lib/postSignupActivation', () => ({
+  clearPostSignupActivation: jest.fn(),
+  hasPostSignupActivation: jest.fn(() => true),
+  isPostOnboardingPreviewEnabled: jest.fn(() => false),
+  POST_ONBOARDING_PREVIEW_QUERY: 'postOnboardingPreview',
+}));
+
+const mockHasPostSignupActivation = jest.mocked(hasPostSignupActivation);
+const mockClearPostSignupActivation = jest.mocked(clearPostSignupActivation);
+
+describe('PostOnboardingActivation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockHasPostSignupActivation.mockReturnValue(true);
+  });
+
+  it('frames feed setup as the final step with a clear value proposition', async () => {
+    render(<PostOnboardingActivation />);
+
+    expect(
+      await screen.findByText("You're in. Now make daily.dev yours."),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Account ready')).toBeInTheDocument();
+    expect(screen.getByText('Final setup')).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Personalize my feed' }),
+    );
+
+    expect(mockPush).toHaveBeenCalledWith({
+      pathname: '/onboarding',
+      query: { after_auth: '/posts/post-1?ref=share' },
+    });
+  });
+
+  it('dismisses the prompt without completing onboarding', async () => {
+    render(<PostOnboardingActivation />);
+
+    await screen.findByRole('complementary', {
+      name: 'Personalize your feed',
+    });
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Dismiss feed personalization',
+      }),
+    );
+
+    expect(mockClearPostSignupActivation).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('complementary', {
+          name: 'Personalize your feed',
+        }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});