feat: Force user to go through onboarding steps for every registration

packages/extension/src/newtab/App.tsx

@@ -37,6 +37,7 @@ import {
   FIREFOX_ACCEPTED_PERMISSION,
   FirefoxPermissionType,
 } from '@dailydotdev/shared/src/lib/cookie';
+import { useOnboarding } from '@dailydotdev/shared/src/hooks/auth';
 import { ExtensionContextProvider } from '../contexts/ExtensionContext';
 import CustomRouter from '../lib/CustomRouter';
 import { version } from '../../package.json';
@@ -64,6 +65,8 @@ Modal.defaultStyles = {};
 
 const getRedirectUri = () => browser.runtime.getURL('index.html');
 function InternalApp(): ReactElement {
+  const { isOnboardingReady, hasCompletedContentTypes, hasCompletedEditTags } =
+    useOnboarding();
   useError();
   useWebVitals();
   const { setCurrentPage, currentPage } = useExtensionContext();
@@ -83,7 +86,10 @@ function InternalApp(): ReactElement {
   const { growthbook } = useGrowthBookContext();
   const isPageReady =
     (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
-  const shouldRedirectOnboarding = !user && isPageReady && !isTesting;
+  const isOnboardingComplete =
+    isOnboardingReady && hasCompletedEditTags && hasCompletedContentTypes;
+  const shouldRedirectOnboarding =
+    isPageReady && (!user || !isOnboardingComplete) && !isTesting;
   const isFirefoxExtension = process.env.TARGET_BROWSER === 'firefox';
 
   useEffect(() => {

packages/shared/src/graphql/actions.ts

@@ -36,6 +36,8 @@ export enum ActionType {
   DigestConfig = 'digest_config',
   StreakMilestone = 'streak_milestone',
   FetchedSmartTitle = 'fetched_smart_title',
+  EditTag = 'edit_tag',
+  ContentTypes = 'content_types',
 }
 
 export interface Action {

packages/shared/src/hooks/auth/useOnboarding.tsx

@@ -1,12 +1,41 @@
+import { useMemo } from 'react';
 import { useAuthContext } from '../../contexts/AuthContext';
+import { useActions } from '../useActions';
+import { ActionType } from '../../graphql/actions';
 
 interface UseOnboarding {
   shouldShowAuthBanner: boolean;
+  isOnboardingReady: boolean;
+  hasCompletedEditTags: boolean;
+  hasCompletedContentTypes: boolean;
+  completeStep: (action: ActionType) => void;
 }
 
 export const useOnboarding = (): UseOnboarding => {
+  const { checkHasCompleted, isActionsFetched, completeAction } = useActions();
   const { isAuthReady, user } = useAuthContext();
   const shouldShowAuthBanner = isAuthReady && !user;
 
-  return { shouldShowAuthBanner };
+  const { hasCompletedEditTags, hasCompletedContentTypes } = useMemo(() => {
+    /*
+      This is the date that completing the onboarding became required.
+      Anyone who created an account before this date is exempt from the requirement.
+    */
+    const registeredBeforeRequired =
+      user?.createdAt && new Date(user.createdAt) < new Date('2025-01-20');
+    return {
+      hasCompletedEditTags:
+        registeredBeforeRequired || checkHasCompleted(ActionType.EditTag),
+      hasCompletedContentTypes:
+        registeredBeforeRequired || checkHasCompleted(ActionType.ContentTypes),
+    };
+  }, [checkHasCompleted, user]);
+
+  return {
+    shouldShowAuthBanner,
+    isOnboardingReady: isActionsFetched && isAuthReady,
+    hasCompletedEditTags,
+    hasCompletedContentTypes,
+    completeStep: (action: ActionType) => completeAction(action),
+  };
 };

packages/webapp/pages/_app.tsx

@@ -31,6 +31,7 @@ import { useThemedAsset } from '@dailydotdev/shared/src/hooks/utils';
 import { DndContextProvider } from '@dailydotdev/shared/src/contexts/DndContext';
 import { structuredCloneJsonPolyfill } from '@dailydotdev/shared/src/lib/structuredClone';
 import { fromCDN } from '@dailydotdev/shared/src/lib';
+import { useOnboarding } from '@dailydotdev/shared/src/hooks/auth';
 import Seo, { defaultSeo, defaultSeoTitle } from '../next-seo';
 import useWebappVersion from '../hooks/useWebappVersion';
 
@@ -62,7 +63,10 @@ const getRedirectUri = () =>
 const getPage = () => window.location.pathname;
 
 function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
+  const { isOnboardingReady, hasCompletedContentTypes, hasCompletedEditTags } =
+    useOnboarding();
   const didRegisterSwRef = useRef(false);
+
   const { unreadCount } = useNotificationContext();
   const unreadText = getUnreadText(unreadCount);
   const { user, closeLogin, shouldShowLogin, loginState } =
@@ -73,6 +77,21 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
   const { modal, closeModal } = useLazyModal();
   useConsoleLogo();
 
+  useEffect(() => {
+    if (
+      isOnboardingReady &&
+      (!hasCompletedEditTags || !hasCompletedContentTypes) &&
+      !router.pathname.includes('/onboarding')
+    ) {
+      router.replace('/onboarding');
+    }
+  }, [
+    isOnboardingReady,
+    router,
+    hasCompletedEditTags,
+    hasCompletedContentTypes,
+  ]);
+
   useEffect(() => {
     updateCookieBanner(user);
 

packages/webapp/pages/onboarding.tsx

@@ -1,11 +1,5 @@
 import type { ReactElement } from 'react';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import type {
   AuthOptionsProps,
@@ -78,6 +72,8 @@ import {
   UserAgent,
 } from '@dailydotdev/shared/src/lib/func';
 import { useOnboardingExtension } from '@dailydotdev/shared/src/components/onboarding/Extension/useOnboardingExtension';
+import { useOnboarding } from '@dailydotdev/shared/src/hooks/auth';
+import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
 import { useInstallPWA } from '@dailydotdev/shared/src/components/onboarding/PWA/useInstallPWA';
 import { defaultOpenGraph, defaultSeo } from '../next-seo';
 import { getTemplatedTitle } from '../components/layouts/utils';
@@ -146,6 +142,12 @@ const seo: NextSeoProps = {
 };
 
 export function OnboardPage(): ReactElement {
+  const {
+    isOnboardingReady,
+    hasCompletedEditTags,
+    hasCompletedContentTypes,
+    completeStep,
+  } = useOnboarding();
   const router = useRouter();
   const { setSettings } = useSettingsContext();
   const isLogged = useRef(false);
@@ -212,19 +214,29 @@ export function OnboardPage(): ReactElement {
   ].includes(activeScreen);
 
   useEffect(() => {
-    if (!isPageReady || isLogged.current) {
+    if (!isPageReady || isLogged.current || !isOnboardingReady) {
+      return;
+    }
+
+    if (user?.infoConfirmed && !hasCompletedEditTags) {
+      setActiveScreen(OnboardingStep.EditTag);
       return;
     }
 
-    if (user) {
+    if (user?.infoConfirmed && !hasCompletedContentTypes) {
+      setActiveScreen(OnboardingStep.ContentTypes);
+      return;
+    }
+
+    if (user?.infoConfirmed && activeScreen === OnboardingStep.Intro) {
       router.replace(getPathnameWithQuery(webappUrl, window.location.search));
       return;
     }
 
     isLogged.current = true;
     // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPageReady, user]);
+  }, [isPageReady, user, isOnboardingReady]);
 
   const onClickNext: OnboardingOnClickNext = (options) => {
     logEvent({
@@ -237,10 +249,15 @@ export function OnboardPage(): ReactElement {
     }
 
     if (activeScreen === OnboardingStep.EditTag) {
+      completeStep(ActionType.EditTag);
       setShouldEnrollOnboardingStep(true);
       return setActiveScreen(OnboardingStep.ContentTypes);
     }
 
+    if (activeScreen === OnboardingStep.ContentTypes) {
+      completeStep(ActionType.ContentTypes);
+    }
+
     if (
       activeScreen === OnboardingStep.ContentTypes &&
       isMobile &&
@@ -332,10 +349,6 @@ export function OnboardPage(): ReactElement {
     return onClickNext();
   };
 
-  const onSuccessfulLogin = useCallback(() => {
-    router.replace(getPathnameWithQuery(webappUrl, window.location.search));
-  }, [router]);
-
   const onSuccessfulRegistration = (userRefetched: LoggedUser) => {
     logPixelSignUp({
       experienceLevel: userRefetched?.experienceLevel,
@@ -361,7 +374,6 @@ export function OnboardPage(): ReactElement {
       initialEmail: email,
       isLoginFlow,
       targetId,
-      onSuccessfulLogin,
       onSuccessfulRegistration,
       onAuthStateUpdate: (props: AuthProps) =>
         setAuth({ isAuthenticating: true, ...props }),
@@ -376,7 +388,6 @@ export function OnboardPage(): ReactElement {
     isAuthenticating,
     isLoginFlow,
     isMobile,
-    onSuccessfulLogin,
     targetId,
   ]);
 
@@ -399,8 +410,10 @@ export function OnboardPage(): ReactElement {
     !isAuthenticating && activeScreen === OnboardingStep.Intro && !shouldVerify;
 
   const showGenerigLoader =
-    isAuthenticating && isAuthLoading && activeScreen === OnboardingStep.Intro;
-
+    isAuthenticating &&
+    isAuthLoading &&
+    activeScreen === OnboardingStep.Intro &&
+    !isOnboardingReady;
   if (!isPageReady) {
     return null;
   }