fix: update hijacking strip for onboarding state

packages/extension/src/newtab/HijackingLoginStrip.spec.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { AuthContextData } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
+import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
+import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
+import loggedUser from '@dailydotdev/shared/__tests__/fixture/loggedUser';
+import HijackingLoginStrip from './HijackingLoginStrip';
+
+jest.mock('@dailydotdev/shared/src/contexts/AuthContext', () => ({
+  ...jest.requireActual('@dailydotdev/shared/src/contexts/AuthContext'),
+  useAuthContext: jest.fn(),
+}));
+
+const LogContext = getLogContextStatic();
+const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+  typeof useAuthContext
+>;
+const logEvent = jest.fn();
+const showLogin = jest.fn();
+
+const defaultAuthContext = {
+  user: undefined,
+  isLoggedIn: false,
+  referral: undefined,
+  referralOrigin: undefined,
+  trackingId: undefined,
+  shouldShowLogin: false,
+  showLogin,
+  closeLogin: jest.fn(),
+  loginState: undefined,
+  logout: jest.fn(),
+  updateUser: jest.fn(),
+  loadingUser: false,
+  isFetched: true,
+  tokenRefreshed: false,
+  loadedUserFromCache: false,
+  getRedirectUri: jest.fn(),
+  anonymous: undefined,
+  visit: undefined,
+  firstVisit: undefined,
+  deleteAccount: jest.fn(),
+  refetchBoot: jest.fn(),
+  accessToken: undefined,
+  squads: [],
+  isAuthReady: true,
+  geo: undefined,
+  isAndroidApp: false,
+  isGdprCovered: false,
+  isValidRegion: true,
+  isFunnel: false,
+} satisfies AuthContextData;
+
+const renderComponent = (
+  authContext: Partial<AuthContextData> = {},
+): ReturnType<typeof render> => {
+  mockUseAuthContext.mockReturnValue({
+    ...defaultAuthContext,
+    ...authContext,
+  });
+
+  return render(
+    <LogContext.Provider
+      value={{
+        logEvent,
+        logEventStart: jest.fn(),
+        logEventEnd: jest.fn(),
+        sendBeacon: jest.fn(),
+      }}
+    >
+      <HijackingLoginStrip />
+    </LogContext.Provider>,
+  );
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('HijackingLoginStrip', () => {
+  it('shows a login CTA for logged out users', () => {
+    renderComponent();
+
+    expect(
+      screen.getByText('Unlock the full daily.dev experience'),
+    ).toBeVisible();
+    expect(
+      screen.getByText('Log in to pick up where you left off.'),
+    ).toBeVisible();
+
+    const cta = screen.getByRole('button', { name: 'Log in to continue' });
+    fireEvent.click(cta);
+
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Click,
+      target_type: TargetType.LoginButton,
+      target_id: 'hijacking',
+    });
+    expect(showLogin).toHaveBeenCalledWith({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: true },
+    });
+  });
+
+  it('shows an onboarding CTA for logged in users who still need onboarding', () => {
+    renderComponent({ user: loggedUser, isLoggedIn: true });
+
+    expect(
+      screen.getByText(
+        'You still have a few onboarding steps left. Finish them to unlock the full experience.',
+      ),
+    ).toBeVisible();
+
+    const cta = screen.getByRole('link', { name: 'Continue onboarding' });
+    const expectedUrl = new URL(onboardingUrl);
+    expectedUrl.searchParams.append('r', 'extension');
+
+    expect(cta).toHaveAttribute('href', expectedUrl.toString());
+
+    fireEvent.click(cta);
+
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Click,
+      target_type: TargetType.LoginButton,
+      target_id: 'hijacking',
+    });
+    expect(showLogin).not.toHaveBeenCalled();
+  });
+});

packages/extension/src/newtab/HijackingLoginStrip.tsx

@@ -8,13 +8,29 @@ import {
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
+import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
 import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
 import feedStyles from '@dailydotdev/shared/src/components/Feed.module.css';
 import { cloudinaryReadingReminderCat } from '@dailydotdev/shared/src/lib/image';
 
 export default function HijackingLoginStrip(): ReactElement {
-  const { showLogin } = useAuthContext();
+  const { showLogin, user } = useAuthContext();
   const { logEvent } = useLogContext();
+  const isLoggedOut = !user;
+  const onboardingHref = (() => {
+    const base = new URL(onboardingUrl);
+    base.searchParams.append('r', 'extension');
+
+    return base.toString();
+  })();
+
+  const logHijackingClick = (): void => {
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: TargetType.LoginButton,
+      target_id: 'hijacking',
+    });
+  };
 
   return (
     <section className={classNames('mb-4 w-full px-4 pb-0', feedStyles.cards)}>
@@ -28,31 +44,40 @@ export default function HijackingLoginStrip(): ReactElement {
             <div className="flex flex-1 flex-col items-center p-5 text-center tablet:items-start tablet:p-6 tablet:text-left">
               <div className="flex flex-col items-center gap-1 tablet:items-start">
                 <h3 className="font-bold text-white typo-title2">
-                  Log in to unlock the full daily.dev experience
+                  Unlock the full daily.dev experience
                 </h3>
                 <p className="text-white/80 text-sm">
-                  If you were in the middle of onboarding, you can pick up right
-                  where you left off.
+                  {isLoggedOut
+                    ? 'Log in to pick up where you left off.'
+                    : 'You still have a few onboarding steps left. Finish them to unlock the full experience.'}
                 </p>
-                <Button
-                  type="button"
-                  variant={ButtonVariant.Primary}
-                  className="mt-4 w-fit"
-                  onClick={() => {
-                    logEvent({
-                      event_name: LogEvent.Click,
-                      target_type: TargetType.LoginButton,
-                      target_id: 'hijacking',
-                    });
+                {isLoggedOut ? (
+                  <Button
+                    type="button"
+                    variant={ButtonVariant.Primary}
+                    className="mt-4 w-fit"
+                    onClick={() => {
+                      logHijackingClick();
 
-                    showLogin({
-                      trigger: AuthTriggers.Onboarding,
-                      options: { isLogin: true },
-                    });
-                  }}
-                >
-                  Log in to continue
-                </Button>
+                      showLogin({
+                        trigger: AuthTriggers.Onboarding,
+                        options: { isLogin: true },
+                      });
+                    }}
+                  >
+                    Log in to continue
+                  </Button>
+                ) : (
+                  <Button
+                    tag="a"
+                    href={onboardingHref}
+                    variant={ButtonVariant.Primary}
+                    className="mt-4 w-fit"
+                    onClick={logHijackingClick}
+                  >
+                    Continue onboarding
+                  </Button>
+                )}
               </div>
             </div>
             <div className="bg-black/20 flex h-[12.5rem] w-full items-center justify-center p-2 tablet:h-auto tablet:w-[14.5rem] tablet:p-3 laptopL:w-[16rem]">