feat: level button mobile navbar

packages/shared/src/components/feeds/MobileFeedActions.spec.tsx

@@ -0,0 +1,119 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { GrowthBook } from '@growthbook/growthbook';
+import { render, screen } from '@testing-library/react';
+import loggedUser from '../../../__tests__/fixture/loggedUser';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { useReadingStreak } from '../../hooks/streaks';
+import { MobileFeedActions } from './MobileFeedActions';
+
+const mockQuestButton = jest.fn(
+  (): ReactElement => <div data-testid="quest-button">Quest button</div>,
+);
+
+jest.mock('next/dynamic', () => () => {
+  return function MockDynamicComponent() {
+    return null;
+  };
+});
+
+jest.mock('next/router', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    pathname: '/',
+    asPath: '/',
+    query: {},
+  }),
+}));
+
+jest.mock('../../hooks/streaks', () => ({
+  useReadingStreak: jest.fn(),
+}));
+
+jest.mock('../layout/HeaderLogo', () => ({
+  __esModule: true,
+  default: function HeaderLogoMock(): ReactElement {
+    return <div data-testid="header-logo" />;
+  },
+}));
+
+jest.mock('../profile/ProfilePictureWithIndicator', () => ({
+  ProfilePictureWithIndicator:
+    function ProfilePictureWithIndicatorMock(): ReactElement {
+      return <div data-testid="profile-picture" />;
+    },
+}));
+
+jest.mock('../streak/ReadingStreakButton', () => ({
+  ReadingStreakButton: function ReadingStreakButtonMock(): ReactElement {
+    return <div data-testid="streak-button">Streak button</div>;
+  },
+}));
+
+jest.mock('../quest/QuestButton', () => ({
+  QuestButton: (props: { compact?: boolean }): ReactElement =>
+    mockQuestButton(props),
+}));
+
+const mockUseReadingStreak = useReadingStreak as jest.Mock;
+
+const getGrowthBook = (isQuestsFeatureEnabled = true): GrowthBook => {
+  const gb = new GrowthBook();
+
+  gb.setFeatures({
+    quests: {
+      defaultValue: isQuestsFeatureEnabled,
+    },
+  });
+
+  return gb;
+};
+
+const renderComponent = ({
+  optOutQuestSystem = false,
+  isQuestsFeatureEnabled = true,
+}: {
+  optOutQuestSystem?: boolean;
+  isQuestsFeatureEnabled?: boolean;
+} = {}) =>
+  render(
+    <TestBootProvider
+      client={new QueryClient()}
+      auth={{ user: loggedUser }}
+      settings={{ optOutQuestSystem }}
+      gb={getGrowthBook(isQuestsFeatureEnabled)}
+    >
+      <MobileFeedActions />
+    </TestBootProvider>,
+  );
+
+describe('MobileFeedActions', () => {
+  beforeEach(() => {
+    mockQuestButton.mockClear();
+    mockUseReadingStreak.mockReturnValue({
+      streak: { current: 2, lastViewAt: new Date().toISOString() },
+      isLoading: false,
+      isStreaksEnabled: true,
+    });
+  });
+
+  it('should render the quest entry next to the streak button', () => {
+    renderComponent({ optOutQuestSystem: false, isQuestsFeatureEnabled: true });
+
+    const actionButtons = screen.getAllByTestId(/^(streak|quest)-button$/);
+
+    expect(actionButtons).toHaveLength(2);
+    expect(actionButtons[0]).toHaveAttribute('data-testid', 'streak-button');
+    expect(actionButtons[1]).toHaveAttribute('data-testid', 'quest-button');
+    expect(mockQuestButton).toHaveBeenCalledWith(
+      expect.objectContaining({ compact: true }),
+    );
+  });
+
+  it('should hide the quest entry when opted out from quests', () => {
+    renderComponent({ optOutQuestSystem: true, isQuestsFeatureEnabled: true });
+
+    expect(screen.queryByTestId('quest-button')).not.toBeInTheDocument();
+  });
+});

packages/shared/src/components/feeds/MobileFeedActions.tsx

@@ -15,6 +15,7 @@ import { webappUrl } from '../../lib/constants';
 import { Button } from '../buttons/Button';
 import { SettingsIcon } from '../icons';
 import { RootPortal } from '../tooltips/Portal';
+import { QuestHeaderButton } from '../header/QuestHeaderButton';
 
 const ProfileSettingsMenuMobile = dynamic(
   () =>
@@ -45,6 +46,7 @@ export function MobileFeedActions(): ReactElement {
             iconPosition={ButtonIconPosition.Right}
           />
         )}
+        <QuestHeaderButton compact />
         <Divider className="bg-border-subtlest-tertiary" vertical />
         {user && (
           <>

packages/shared/src/components/header/QuestHeaderButton.tsx

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { questsFeature } from '../../lib/featureManagement';
+import { QuestButton } from '../quest/QuestButton';
+
+interface QuestHeaderButtonProps {
+  compact?: boolean;
+}
+
+export function QuestHeaderButton({
+  compact = false,
+}: QuestHeaderButtonProps): ReactElement | null {
+  const { isLoggedIn, isAuthReady } = useAuthContext();
+  const { loadedSettings, optOutQuestSystem } = useSettingsContext();
+  const { value: isQuestsFeatureEnabled } = useConditionalFeature({
+    feature: questsFeature,
+    shouldEvaluate: isLoggedIn,
+  });
+
+  if (
+    !isAuthReady ||
+    !loadedSettings ||
+    !isLoggedIn ||
+    isQuestsFeatureEnabled !== true ||
+    optOutQuestSystem
+  ) {
+    return null;
+  }
+
+  return <QuestButton compact={compact} />;
+}
+
+export default QuestHeaderButton;

packages/shared/src/components/layout/HeaderButtons.tsx

@@ -7,9 +7,7 @@ import { useAuthContext } from '../../contexts/AuthContext';
 import classed from '../../lib/classed';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { OpportunityEntryButton } from '../opportunity/OpportunityEntryButton';
-import { QuestButton } from '../quest/QuestButton';
-import { useConditionalFeature } from '../../hooks/useConditionalFeature';
-import { questsFeature } from '../../lib/featureManagement';
+import { QuestHeaderButton } from '../header/QuestHeaderButton';
 
 interface HeaderButtonsProps {
   additionalButtons?: ReactNode;
@@ -21,11 +19,7 @@ export function HeaderButtons({
   additionalButtons,
 }: HeaderButtonsProps): ReactElement {
   const { isLoggedIn, isAuthReady } = useAuthContext();
-  const { loadedSettings, optOutQuestSystem } = useSettingsContext();
-  const { value: isQuestsFeatureEnabled } = useConditionalFeature({
-    feature: questsFeature,
-    shouldEvaluate: isLoggedIn,
-  });
+  const { loadedSettings } = useSettingsContext();
 
   if (!isAuthReady || !loadedSettings) {
     return <Container />;
@@ -47,7 +41,7 @@ export function HeaderButtons({
   return (
     <Container>
       <OpportunityEntryButton />
-      {isQuestsFeatureEnabled === true && !optOutQuestSystem && <QuestButton />}
+      <QuestHeaderButton />
       {additionalButtons}
       <NotificationsBell />
       <ProfileButton className="hidden laptop:flex" />

packages/shared/src/components/quest/QuestButton.spec.tsx

@@ -97,10 +97,11 @@ const questDashboard = {
 const renderComponent = (
   optOutLevelSystem = false,
   client: QueryClient = new QueryClient(),
+  compact = false,
 ) =>
   render(
     <TestBootProvider client={client} settings={{ optOutLevelSystem }}>
-      <QuestButton />
+      <QuestButton compact={compact} />
     </TestBootProvider>,
   );
 
@@ -122,16 +123,30 @@ describe('QuestButton', () => {
   it('should show level progress and xp rewards when levels are enabled', async () => {
     renderComponent(false);
 
-    expect(
-      screen.getByRole('button', { name: /Quests, level 7, 63% progress/i }),
-    ).toBeInTheDocument();
+    const button = screen.getByRole('button', {
+      name: /Quests, level 7, 63% progress/i,
+    });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('h-10');
 
     expect(await screen.findByText('Level 7')).toBeInTheDocument();
     expect(screen.getByText('250/400 XP')).toBeInTheDocument();
     expect(screen.getByText('+150 XP')).toBeInTheDocument();
     expect(screen.getByText('+20 Reputation')).toBeInTheDocument();
   });
 
+  it('should render a smaller trigger when compact', () => {
+    renderComponent(false, new QueryClient(), true);
+
+    const button = screen.getByRole('button', {
+      name: /Quests, level 7, 63% progress/i,
+    });
+
+    expect(button).toHaveClass('h-8');
+    expect(button).not.toHaveClass('h-10');
+  });
+
   it('should hide level progress and xp rewards when levels are disabled', async () => {
     renderComponent(true);