fix: update extension hijacking login experience

packages/extension/src/newtab/App.tsx

@@ -20,7 +20,6 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useWebVitals } from '@dailydotdev/shared/src/hooks/useWebVitals';
 import { useGrowthBookContext } from '@dailydotdev/shared/src/components/GrowthBookProvider';
 import { isTesting } from '@dailydotdev/shared/src/lib/constants';
-import ExtensionOnboarding from '@dailydotdev/shared/src/components/ExtensionOnboarding';
 import { withFeaturesBoundary } from '@dailydotdev/shared/src/components/withFeaturesBoundary';
 import { LazyModalElement } from '@dailydotdev/shared/src/components/modals/LazyModalElement';
 import { useHostStatus } from '@dailydotdev/shared/src/hooks/useHostPermissionStatus';
@@ -39,6 +38,7 @@ import { ExtensionContextProvider } from '../contexts/ExtensionContext';
 import CustomRouter from '../lib/CustomRouter';
 import { version } from '../../package.json';
 import MainFeedPage from './MainFeedPage';
+import HijackingLoginStrip from './HijackingLoginStrip';
 import { BootDataProvider } from '../../../shared/src/contexts/BootProvider';
 import { getContentScriptPermissionAndRegister } from '../lib/extensionScripts';
 import { useContentScriptStatus } from '../../../shared/src/hooks';
@@ -67,6 +67,31 @@ const feedErrorFallback: ReactElement = (
   </div>
 );
 
+function HijackingPage({
+  onPageChanged,
+}: {
+  onPageChanged: (page: string) => void;
+}): ReactElement {
+  const { setCurrentPage } = useExtensionContext();
+
+  useEffect(() => {
+    setCurrentPage('/hijacking');
+
+    return () => {
+      setCurrentPage('/');
+    };
+  }, [setCurrentPage]);
+
+  return (
+    <MainFeedPage
+      onPageChanged={onPageChanged}
+      initialPage="/"
+      shouldInitializeCurrentPage={false}
+      shortcuts={<HijackingLoginStrip />}
+    />
+  );
+}
+
 function InternalApp(): ReactElement {
   const { isOnboardingComplete } = useOnboardingActions();
   useError();
@@ -122,7 +147,13 @@ function InternalApp(): ReactElement {
   }
 
   if (shouldRedirectOnboarding) {
-    return <ExtensionOnboarding />;
+    return (
+      <ErrorBoundary feature="extension-feed" fallback={feedErrorFallback}>
+        <DndContextProvider>
+          <HijackingPage onPageChanged={onPageChanged} />
+        </DndContextProvider>
+      </ErrorBoundary>
+    );
   }
 
   return (

packages/extension/src/newtab/HijackingLoginStrip.tsx

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+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 { 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 { logEvent } = useLogContext();
+
+  return (
+    <section className={classNames('mb-4 w-full px-4 pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-b-none rounded-t-16 px-px pb-0 pt-px">
+        <div className="top-hero-panel-border absolute inset-0 rounded-b-none rounded-t-16" />
+        <div className="top-hero-glow pointer-events-none absolute -right-12 top-1/2 h-40 w-40 -translate-y-1/2 rounded-full blur-3xl" />
+        <div className="pointer-events-none absolute bottom-0 left-0 h-10 w-5 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
+        <div className="pointer-events-none absolute bottom-0 right-0 h-10 w-5 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
+        <div className="relative overflow-hidden rounded-b-none rounded-t-[0.9375rem] bg-raw-pepper-90 shadow-2">
+          <div className="flex flex-col tablet:flex-row tablet:items-stretch">
+            <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
+                </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.
+                </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',
+                    });
+
+                    showLogin({
+                      trigger: AuthTriggers.Onboarding,
+                      options: { isLogin: true },
+                    });
+                  }}
+                >
+                  Log in to continue
+                </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]">
+              <img
+                src={cloudinaryReadingReminderCat}
+                alt="Sleeping cat on laptop"
+                className="m-0 h-full w-full max-w-none scale-105 object-contain laptopL:scale-110"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/extension/src/newtab/MainFeedPage.tsx

@@ -1,13 +1,17 @@
-import type { ReactElement } from 'react';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
 import MainLayout from '@dailydotdev/shared/src/components/MainLayout';
 import MainFeedLayout from '@dailydotdev/shared/src/components/MainFeedLayout';
 import ScrollToTopButton from '@dailydotdev/shared/src/components/ScrollToTopButton';
 import { getShouldRedirect } from '@dailydotdev/shared/src/components/utilities';
 import dynamic from 'next/dynamic';
 import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
-import AlertContext from '@dailydotdev/shared/src/contexts/AlertContext';
-import { getFeedName } from '@dailydotdev/shared/src/lib/feed';
 import { SearchProviderEnum } from '@dailydotdev/shared/src/graphql/search';
 import { LogEvent } from '@dailydotdev/shared/src/lib/log';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
@@ -33,34 +37,71 @@ const DndModal = dynamic(
 
 export type MainFeedPageProps = {
   onPageChanged: (page: string) => unknown;
+  initialPage?: string;
+  shouldInitializeCurrentPage?: boolean;
+  shortcuts?: ReactNode;
+};
+
+const normalizePage = (page: string): string =>
+  page.startsWith('/') ? page : `/${page}`;
+
+const getInitialFeedName = (page?: string): string => {
+  if (!page) {
+    return 'default';
+  }
+
+  const normalizedPage = normalizePage(page);
+
+  if (normalizedPage === '/') {
+    return 'default';
+  }
+
+  return normalizedPage;
 };
 
 export default function MainFeedPage({
   onPageChanged,
+  initialPage,
+  shouldInitializeCurrentPage = true,
+  shortcuts,
 }: MainFeedPageProps): ReactElement {
-  const { alerts } = useContext(AlertContext);
   const { logEvent } = useLogContext();
   const [isSearchOn, setIsSearchOn] = useState(false);
   const { user, loadingUser } = useContext(AuthContext);
-  const [feedName, setFeedName] = useState<string>('default');
+  const [feedName, setFeedName] = useState<string>(() =>
+    getInitialFeedName(initialPage),
+  );
   const [searchQuery, setSearchQuery] = useState<string>();
   const { shouldUseListFeedLayout } = useFeedLayout({ feedRelated: false });
   useCompanionSettings();
   const { isActive: isDndActive, showDnd, setShowDnd } = useDndContext();
   const { isCustomDefaultFeed } = useCustomDefaultFeed();
 
+  useLayoutEffect(() => {
+    if (!initialPage || !shouldInitializeCurrentPage) {
+      return;
+    }
+
+    onPageChanged(normalizePage(initialPage));
+  }, [initialPage, onPageChanged, shouldInitializeCurrentPage]);
+
   const onNavTabClick = useCallback(
     (tab: string): void => {
-      if (tab !== 'search') {
+      const normalizedTab = normalizePage(tab);
+
+      if (normalizedTab !== '/search') {
         setIsSearchOn(false);
       }
-      setFeedName(tab);
-      const isMyFeed = tab === '/my-feed';
+
+      setFeedName(getInitialFeedName(normalizedTab));
+      const isMyFeed = normalizedTab === '/my-feed';
+
       if (getShouldRedirect(isMyFeed, !!user)) {
-        onPageChanged(`/`);
-      } else {
-        onPageChanged(`/${tab}`);
+        onPageChanged('/');
+        return;
       }
+
+      onPageChanged(normalizedTab);
     },
     [onPageChanged, user],
   );
@@ -70,20 +111,19 @@ export default function MainFeedPage({
       return '/search';
     }
 
+    if (feedName === 'default') {
+      return '/';
+    }
+
     // default page when user selected custom default feed
     if (isCustomDefaultFeed && feedName === 'default') {
       return '/';
     }
 
-    const feed = getFeedName(feedName, {
-      hasUser: !!user,
-      hasFiltered: !alerts?.filter,
-    });
-
-    return `/${feed}`;
+    return normalizePage(feedName);
     // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSearchOn, feedName]);
+  }, [isSearchOn, isCustomDefaultFeed, feedName]);
 
   const onLogoClick = (e: React.MouseEvent): void => {
     e.preventDefault();
@@ -134,9 +174,11 @@ export default function MainFeedPage({
               />
             }
             shortcuts={
-              <ShortcutLinks
-                shouldUseListFeedLayout={shouldUseListFeedLayout}
-              />
+              shortcuts ?? (
+                <ShortcutLinks
+                  shouldUseListFeedLayout={shouldUseListFeedLayout}
+                />
+              )
             }
           />
         </FeedLayoutProvider>

packages/shared/src/components/MainLayout.tsx

@@ -33,6 +33,7 @@ import PlusMobileEntryBanner from './banners/PlusMobileEntryBanner';
 import usePlusEntry from '../hooks/usePlusEntry';
 import { SearchProvider } from '../contexts/search/SearchContext';
 import { FeedbackWidget } from './feedback';
+import { isExtension } from '../lib/func';
 
 const GoBackHeaderMobile = dynamic(
   () =>
@@ -116,7 +117,11 @@ function MainLayoutComponent({
   const isPageApplicableForOnboarding =
     !page || feeds.includes(page) || isCustomFeed;
   const shouldRedirectOnboarding =
-    !user && isPageReady && isPageApplicableForOnboarding && !isTesting;
+    !isExtension &&
+    !user &&
+    isPageReady &&
+    isPageApplicableForOnboarding &&
+    !isTesting;
 
   useEffect(() => {
     if (!shouldRedirectOnboarding) {

packages/shared/src/components/banners/ReadingReminderCatLaptop.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import { cloudinaryReadingReminderCat } from '../../lib/image';
 
 interface ReadingReminderCatLaptopProps {
   className?: string;
@@ -11,7 +12,7 @@ const ReadingReminderCatLaptop = ({
 }: ReadingReminderCatLaptopProps): ReactElement => {
   return (
     <img
-      src="/assets/reading-reminder-cat.png"
+      src={cloudinaryReadingReminderCat}
       alt="Sleeping cat on laptop"
       className={classNames(
         'mx-auto mb-4 w-full max-w-[20rem] rounded-12',

packages/shared/src/contexts/AuthContext.tsx

@@ -21,7 +21,11 @@ import type { Squad } from '../graphql/sources';
 import { checkIsExtension, isIOSNative, isNullOrUndefined } from '../lib/func';
 import { AFTER_AUTH_PARAM } from '../components/auth/common';
 import { Continent, outsideGdpr } from '../lib/geo';
-import { invalidPlusRegions, webFunnelPrefix } from '../lib/constants';
+import {
+  invalidPlusRegions,
+  onboardingUrl,
+  webFunnelPrefix,
+} from '../lib/constants';
 
 export interface LoginState {
   trigger: AuthTriggersType;
@@ -199,10 +203,17 @@ export const AuthContextProvider = ({
               const params = new URLSearchParams(globalThis?.location.search);
 
               setLoginState({ ...options, trigger });
-              if (!params.get(AFTER_AUTH_PARAM)) {
+              if (isExtension) {
+                params.delete(AFTER_AUTH_PARAM);
+              } else if (!params.get(AFTER_AUTH_PARAM)) {
                 params.set(AFTER_AUTH_PARAM, window.location.pathname);
               }
-              router.push(`/onboarding?${params.toString()}`);
+              const onboardingPath = `${onboardingUrl}?${params.toString()}`;
+              router.push(
+                isExtension
+                  ? onboardingPath
+                  : `/onboarding?${params.toString()}`,
+              );
             }
           },
           [router],

packages/shared/src/lib/image.ts

@@ -128,6 +128,9 @@ export const cloudinaryReferralCampaignGenericReferralPurpleEdgeGlowTablet =
 export const cloudinaryOnboardingGlow =
   'https://media.daily.dev/image/upload/v1694596741/Glow_o9ehvn.svg';
 
+export const cloudinaryReadingReminderCat =
+  'https://media.daily.dev/image/upload/s--r_3VGfdy--/f_auto,q_auto/v1776087908/public/reading-reminder-cat';
+
 export const cloudinaryOnboardingFullBackgroundMobile =
   'https://media.daily.dev/image/upload/s--EwsBTBt6--/f_auto/v1716969841/dailydev_where_developers_suffer_together_mobile_shkn1w';