feat(onboarding): ship the acquisition and user role funnel steps

packages/shared/src/components/post/focus/CommunitySentimentBreakdown.tsx

@@ -48,7 +48,7 @@ const providerLabel = (source: string): string =>
 const formatDiscussionCount = (value: number): string =>
   largeNumberFormat(value)?.toLowerCase() ?? `${value}`;
 
-export const SourceBadge = ({
+const SourceBadge = ({
   source,
   className,
 }: {

packages/shared/src/features/onboarding/shared/FunnelStepper.tsx

@@ -39,6 +39,8 @@ import {
 } from '../steps';
 import { FunnelFact } from '../steps/FunnelFact';
 import { FunnelCheckout } from '../steps/FunnelCheckout';
+import { FunnelAcquisition } from '../steps/FunnelAcquisition';
+import { FunnelUserRole } from '../steps/FunnelUserRole';
 import FunnelLoading from '../steps/FunnelLoading';
 import { FunnelStepBackground } from './FunnelStepBackground';
 import { FunnelProgressContext } from './FunnelStepDots';
@@ -84,6 +86,8 @@ const stepComponentMap = {
   [FunnelStepType.PlusCards]: FunnelPlusCards,
   [FunnelStepType.BrowserExtension]: FunnelBrowserExtension,
   [FunnelStepType.UploadCv]: FunnelUploadCv,
+  [FunnelStepType.Acquisition]: FunnelAcquisition,
+  [FunnelStepType.UserRole]: FunnelUserRole,
 } as const;
 
 function FunnelStepComponent(props: {

packages/shared/src/features/onboarding/steps/FunnelAcquisition.tsx

@@ -30,18 +30,15 @@ import { shuffleArray } from '../../../lib/func';
 import { acquisitionBrandColors } from '../../../styles/custom';
 import type { IconProps } from '../../../components/Icon';
 import { IconSize } from '../../../components/Icon';
-import { SourceBadge } from '../../../components/post/focus/CommunitySentimentBreakdown';
 import { ChromeIcon } from '../../../components/icons/Browser/Chrome';
-import { FacebookIcon } from '../../../components/icons/Facebook';
+import { CompassIcon } from '../../../components/icons/Compass';
+import { GitHubIcon } from '../../../components/icons/GitHub';
 import { GoogleIcon } from '../../../components/icons/Google';
 import { InviteIcon } from '../../../components/icons/Invite';
 import { LinkedInIcon } from '../../../components/icons/LinkedIn';
 import { MailIcon } from '../../../components/icons/Mail';
-import { MegaphoneIcon } from '../../../components/icons/Megaphone';
-import { MenuIcon } from '../../../components/icons/Menu';
 import { OpenAIIcon } from '../../../components/icons/OpenAI';
 import { RedditIcon } from '../../../components/icons/Reddit';
-import { TikTokIcon } from '../../../components/icons/TikTok';
 import { TwitterIcon } from '../../../components/icons/Twitter';
 import { YoutubeIcon } from '../../../components/icons/Youtube';
 
@@ -126,57 +123,17 @@ const CHANNEL_OPTIONS: Array<
 > = [
   {
     value: AcquisitionChannel.Friend,
-    label: 'Referred by a friend or colleague',
+    label: 'Friend or colleague',
     ...accentMark(InviteIcon, '--theme-brand-default', 'text-brand-default'),
   },
-  {
-    value: AcquisitionChannel.X,
-    label: 'X (Twitter)',
-    ...brandMark(TwitterIcon, acquisitionBrandColors.x, <TwitterIcon />),
-  },
-  {
-    value: AcquisitionChannel.Reddit,
-    label: 'Reddit',
-    ...brandMark(RedditIcon, acquisitionBrandColors.reddit),
-  },
-  {
-    value: AcquisitionChannel.LinkedIn,
-    label: 'LinkedIn',
-    ...brandMark(LinkedInIcon, acquisitionBrandColors.linkedIn),
-  },
-  {
-    value: AcquisitionChannel.InstagramFacebook,
-    label: 'Instagram or Facebook',
-    ...brandMark(FacebookIcon, acquisitionBrandColors.facebook),
-  },
-  {
-    value: AcquisitionChannel.YouTube,
-    label: 'YouTube',
-    ...brandMark(YoutubeIcon, acquisitionBrandColors.youTube),
-  },
-  {
-    value: AcquisitionChannel.TikTok,
-    label: 'TikTok',
-    ...brandMark(TikTokIcon, acquisitionBrandColors.tikTok),
-  },
-  {
-    value: AcquisitionChannel.HackerNews,
-    label: 'Hacker News',
-    logo: <SourceBadge className="size-5 typo-footnote" source="hackernews" />,
-    tile: (
-      <Tile>
-        <SourceBadge className="size-full typo-footnote" source="hackernews" />
-      </Tile>
-    ),
-  },
   {
     value: AcquisitionChannel.SearchEngine,
     label: 'Search engine',
     ...faviconMark(GoogleIcon),
   },
   {
     value: AcquisitionChannel.AI,
-    label: 'AI search or chat, like ChatGPT',
+    label: 'AI assistant like ChatGPT',
     ...brandMark(
       OpenAIIcon,
       acquisitionBrandColors.openAI,
@@ -189,35 +146,51 @@ const CHANNEL_OPTIONS: Array<
     ),
   },
   {
-    value: AcquisitionChannel.ExtensionStore,
-    label: 'Browser extension store',
-    ...faviconMark(ChromeIcon),
+    value: AcquisitionChannel.Creator,
+    label: 'YouTube, podcast or creator',
+    ...brandMark(YoutubeIcon, acquisitionBrandColors.youTube),
+  },
+  {
+    value: AcquisitionChannel.GitHub,
+    label: 'GitHub',
+    ...brandMark(GitHubIcon, acquisitionBrandColors.gitHub),
+  },
+  {
+    value: AcquisitionChannel.Reddit,
+    label: 'Reddit',
+    ...brandMark(RedditIcon, acquisitionBrandColors.reddit),
+  },
+  {
+    value: AcquisitionChannel.X,
+    label: 'X (Twitter)',
+    ...brandMark(TwitterIcon, acquisitionBrandColors.x, <TwitterIcon />),
+  },
+  {
+    value: AcquisitionChannel.LinkedIn,
+    label: 'LinkedIn',
+    ...brandMark(LinkedInIcon, acquisitionBrandColors.linkedIn),
   },
   {
     value: AcquisitionChannel.NewsletterBlog,
-    label: 'A newsletter or blog',
+    label: 'Blog, newsletter or website',
     ...accentMark(
       MailIcon,
       '--theme-accent-water-default',
       'text-accent-water-default',
     ),
   },
   {
-    value: AcquisitionChannel.Advertisement,
-    label: 'Advertisement or sponsorship',
-    ...accentMark(
-      MegaphoneIcon,
-      '--theme-accent-ketchup-default',
-      'text-accent-ketchup-default',
-    ),
+    value: AcquisitionChannel.AppStore,
+    label: 'Chrome Web Store or app store',
+    ...faviconMark(ChromeIcon),
   },
   {
     value: AcquisitionChannel.Other,
     label: 'Other',
-    logo: <MenuIcon secondary className="text-text-tertiary" />,
+    logo: <CompassIcon secondary className="text-text-tertiary" />,
     tile: (
       <Tile className="bg-background-default text-text-tertiary">
-        <MenuIcon secondary size={IconSize.Size16} />
+        <CompassIcon secondary size={IconSize.Size16} />
       </Tile>
     ),
   },

packages/shared/src/features/onboarding/steps/FunnelUserRole.spec.tsx

@@ -13,17 +13,11 @@ jest.mock('../../../hooks/useProfileForm');
 const updateUserProfile = jest.fn((params: UpdateProfileParameters) =>
   params.onUpdateSuccess?.(),
 );
-const updateUser = jest.fn();
 const onTransition = jest.fn();
 
 const renderStep = (user: Record<string, unknown> = {}) => {
   (useAuthContext as jest.Mock).mockReturnValue({
     user: { id: 'u1', name: 'Ido', ...user },
-    updateUser,
-  });
-  (useProfileForm as jest.Mock).mockReturnValue({
-    updateUserProfile,
-    isLoading: false,
   });
 
   const step = {
@@ -47,112 +41,57 @@ const next = () =>
 describe('FunnelUserRole', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    // jsdom does not implement scrolling.
-    jest.spyOn(window, 'scrollTo').mockImplementation(() => undefined);
+    (useProfileForm as jest.Mock).mockReturnValue({
+      updateUserProfile,
+      isLoading: false,
+    });
   });
 
-  it('should wait for Continue after a role is picked', () => {
+  it('should store the picked role as the job title', () => {
     renderStep();
 
     expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
-    pick('Developer');
-
-    expect(screen.getByRole('button', { name: 'Next' })).toBeEnabled();
-    expect(screen.getByText('Who are you?')).toBeInTheDocument();
-    expect(updateUserProfile).not.toHaveBeenCalled();
-  });
-
-  it('should store the picked experience level for an engineering role', () => {
-    renderStep();
-
-    pick('Developer');
-    next();
-    pick('Experienced, 4-5 years');
+    pick('AI engineer');
     next();
 
     expect(updateUserProfile).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Developer',
-        experienceLevel: 'MORE_THAN_4_YEARS',
-      }),
+      expect.objectContaining({ title: 'AI engineer' }),
     );
-    expect(onTransition).toHaveBeenCalledWith({
-      type: FunnelStepTransitionType.Complete,
-      details: { role: 'Developer', experienceLevel: 'MORE_THAN_4_YEARS' },
-    });
-  });
-
-  it('should keep a non-engineering role out of the engineer signup conversions', () => {
-    // `NOT_ENGINEER` is what PixelsContext reads to leave a signup out of the
-    // engineer_signup events; the years answer goes to the funnel instead.
-    renderStep();
-
-    pick('Designer');
-    next();
-    pick('Experienced, 4-5 years');
-    next();
-
-    expect(updateUserProfile).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Designer',
-        experienceLevel: 'NOT_ENGINEER',
-      }),
+    expect(updateUserProfile.mock.calls[0][0]).not.toHaveProperty(
+      'experienceLevel',
     );
     expect(onTransition).toHaveBeenCalledWith({
       type: FunnelStepTransitionType.Complete,
-      details: { role: 'Designer', experienceLevel: 'MORE_THAN_4_YEARS' },
+      details: { role: 'AI engineer' },
     });
   });
 
-  it('should only ask for the role when the experience level is already on file', () => {
-    renderStep({ experienceLevel: 'MORE_THAN_2_YEARS' });
+  it('should not put "Other" on the profile as a job title', () => {
+    renderStep();
 
-    pick('Founder');
+    pick('Something else');
     next();
 
-    const [[params]] = updateUserProfile.mock.calls;
-    expect(params.title).toBe('Founder');
-    expect(params).not.toHaveProperty('experienceLevel');
+    expect(updateUserProfile).not.toHaveBeenCalled();
     expect(onTransition).toHaveBeenCalledWith({
       type: FunnelStepTransitionType.Complete,
-      details: { role: 'Founder', experienceLevel: 'MORE_THAN_2_YEARS' },
+      details: { role: 'Other' },
     });
   });
 
-  it('should carry the answers forward when the profile cannot be saved yet', () => {
-    let onError: (() => void) | undefined;
-    (useProfileForm as jest.Mock).mockImplementation((options) => {
-      onError = options?.onError;
-      return { updateUserProfile: () => onError?.(), isLoading: false };
-    });
-    (useAuthContext as jest.Mock).mockReturnValue({
-      user: { id: 'u1', name: 'Ido' },
-      updateUser,
-    });
-    const step = {
-      id: 'user-role',
-      type: FunnelStepType.UserRole,
-      isActive: true,
-      parameters: {},
-      transitions: [],
-      onTransition,
-    } as unknown as FunnelStepUserRole;
-    render(<FunnelUserRole {...step} />);
+  it('should move on when the title cannot be saved', () => {
+    (useProfileForm as jest.Mock).mockImplementation((options) => ({
+      updateUserProfile: () => options?.onError?.(),
+      isLoading: false,
+    }));
+    renderStep();
 
     pick('Designer');
     next();
-    pick('Experienced, 4-5 years');
-    next();
 
-    expect(updateUser).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Designer',
-        experienceLevel: 'NOT_ENGINEER',
-      }),
-    );
     expect(onTransition).toHaveBeenCalledWith({
       type: FunnelStepTransitionType.Complete,
-      details: { role: 'Designer', experienceLevel: 'MORE_THAN_4_YEARS' },
+      details: { role: 'Designer' },
     });
   });
 });