feat(auth): implement useIsSignupComplete hook and refactor onboarding storage

- Introduced the useIsSignupComplete hook to manage and check the signup completion state using local storage.
- Refactored local storage management for onboarding progress, consolidating related states into a single structure.
- Removed the deprecated useHasCompletedSignup hook and its associated tests to streamline the codebase.
- Updated components and tests to utilize the new onboarding storage utilities, ensuring accurate state handling across the application.
- Enhanced the onboarding experience by integrating the new hook into relevant components and updating local storage interactions.

Author: tyler-dane

packages/web/src/auth/isSignupComplete.test.ts

@@ -0,0 +1,68 @@
+import { act, renderHook } from "@testing-library/react";
+import { STORAGE_KEYS } from "@web/common/constants/storage.constants";
+import { updateOnboardingProgress } from "@web/views/Onboarding/utils/onboarding.storage.util";
+import { useIsSignupComplete } from "./isSignupComplete";
+
+describe("useIsSignupComplete", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("should return false when localStorage is empty", () => {
+    const { result } = renderHook(() => useIsSignupComplete());
+
+    expect(result.current.isSignupComplete).toBe(false);
+  });
+
+  it("should return true when localStorage has completed signup flag", () => {
+    updateOnboardingProgress({ isSignupComplete: true });
+
+    const { result } = renderHook(() => useIsSignupComplete());
+
+    expect(result.current.isSignupComplete).toBe(true);
+  });
+
+  it("should return false when localStorage has invalid value", () => {
+    localStorage.setItem(STORAGE_KEYS.ONBOARDING_PROGRESS, "invalid");
+
+    const { result } = renderHook(() => useIsSignupComplete());
+
+    expect(result.current.isSignupComplete).toBe(false);
+  });
+
+  it("should update hasCompletedSignup when markSignupCompleted is called", () => {
+    const { result } = renderHook(() => useIsSignupComplete());
+
+    expect(result.current.isSignupComplete).toBe(false);
+
+    act(() => {
+      result.current.markSignupCompleted();
+    });
+
+    expect(result.current.isSignupComplete).toBe(true);
+    const stored = JSON.parse(
+      localStorage.getItem(STORAGE_KEYS.ONBOARDING_PROGRESS) ?? "{}",
+    );
+    expect(stored.isSignupComplete).toBe(true);
+  });
+
+  it("should handle multiple calls to markSignupCompleted", () => {
+    const { result } = renderHook(() => useIsSignupComplete());
+
+    act(() => {
+      result.current.markSignupCompleted();
+    });
+
+    expect(result.current.isSignupComplete).toBe(true);
+
+    act(() => {
+      result.current.markSignupCompleted();
+    });
+
+    expect(result.current.isSignupComplete).toBe(true);
+    const stored = JSON.parse(
+      localStorage.getItem(STORAGE_KEYS.ONBOARDING_PROGRESS) ?? "{}",
+    );
+    expect(stored.isSignupComplete).toBe(true);
+  });
+});

packages/web/src/auth/isSignupComplete.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  getOnboardingProgress,
+  updateOnboardingProgress,
+} from "@web/views/Onboarding/utils/onboarding.storage.util";
+
+export const useIsSignupComplete = () => {
+  const [isSignupComplete, setIsSignupComplete] = useState<boolean | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const checkSignupStatus = () => {
+      const { isSignupComplete: storedValue } = getOnboardingProgress();
+      setIsSignupComplete(storedValue);
+    };
+
+    checkSignupStatus();
+  }, []);
+
+  const markSignupCompleted = useCallback(() => {
+    updateOnboardingProgress({ isSignupComplete: true });
+    setIsSignupComplete(true);
+  }, [setIsSignupComplete]);
+
+  return {
+    isSignupComplete,
+    markSignupCompleted,
+  };
+};

packages/web/src/auth/useHasCompletedSignup.test.ts

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
 import {
-  getAuthStorage,
-  updateAuthStorage,
-} from "@web/common/utils/storage/auth.storage.util";
+  getOnboardingProgress,
+  updateOnboardingProgress,
+} from "@web/views/Onboarding/utils/onboarding.storage.util";
 
 export const useSkipOnboarding = () => {
   const [skipOnboarding, setSkipOnboarding] = useState<boolean>(false);
 
   useEffect(() => {
     const checkOnboardingStatus = () => {
-      const { skipOnboarding: storedValue } = getAuthStorage();
+      const { isOnboardingSkipped: storedValue } = getOnboardingProgress();
       setSkipOnboarding(storedValue);
     };
 
@@ -18,7 +18,7 @@ export const useSkipOnboarding = () => {
 
   const updateOnboardingStatus = useCallback(
     (skip: boolean) => {
-      updateAuthStorage({ skipOnboarding: skip });
+      updateOnboardingProgress({ isOnboardingSkipped: skip });
 
       setSkipOnboarding(skip);
     },

packages/web/src/auth/useHasCompletedSignup.ts

@@ -2,17 +2,15 @@ import { z } from "zod";
 
 export const StorageKeySchema = z.enum([
   "compass.reminder",
-  "compass.auth",
   "compass.onboarding",
 ]);
 
 export type StorageKey = z.infer<typeof StorageKeySchema>;
 
 export const STORAGE_KEYS: Record<
-  "REMINDER" | "AUTH" | "ONBOARDING_PROGRESS",
+  "REMINDER" | "ONBOARDING_PROGRESS",
   StorageKey
 > = {
   REMINDER: "compass.reminder",
-  AUTH: "compass.auth",
   ONBOARDING_PROGRESS: "compass.onboarding",
 } as const;

packages/web/src/auth/useSkipOnboarding.ts

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useHasCompletedSignup } from "@web/auth/useHasCompletedSignup";
+import { useIsSignupComplete } from "@web/auth/isSignupComplete";
 import { useSkipOnboarding } from "@web/auth/useSkipOnboarding";
 import { AuthApi } from "@web/common/apis/auth.api";
 import { UserApi } from "@web/common/apis/user.api";
@@ -11,7 +11,7 @@ import { OnboardingStepProps } from "@web/views/Onboarding";
 export function useGoogleAuth(props?: Partial<OnboardingStepProps>) {
   const navigate = useNavigate();
   const { setAuthenticated } = useSession();
-  const { markSignupCompleted } = useHasCompletedSignup();
+  const { markSignupCompleted } = useIsSignupComplete();
   const { updateOnboardingStatus } = useSkipOnboarding();
 
   const googleLogin = useGoogleLogin({

packages/web/src/common/constants/storage.constants.ts

@@ -3,7 +3,7 @@ import { zYearMonthDayString } from "@core/types/type.utils";
 import dayjs, { Dayjs } from "@core/util/date/dayjs";
 import { AUTH_FAILURE_REASONS } from "@web/common/constants/auth.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
-import { getAuthStorage } from "@web/common/utils/storage/auth.storage.util";
+import { getOnboardingProgress } from "@web/views/Onboarding/utils/onboarding.storage.util";
 
 export interface DayLoaderData {
   dateInView: Dayjs; // in UTC
@@ -19,13 +19,13 @@ export async function loadAuthenticated() {
 }
 
 export function loadHasCompletedSignup() {
-  const { hasCompletedSignup } = getAuthStorage();
+  const { isSignupComplete: hasCompletedSignup } = getOnboardingProgress();
 
   return { hasCompletedSignup };
 }
 
 export function loadOnboardingData() {
-  const { skipOnboarding } = getAuthStorage();
+  const { isOnboardingSkipped: skipOnboarding } = getOnboardingProgress();
 
   return { skipOnboarding };
 }

packages/web/src/common/hooks/useGoogleAuth.ts

@@ -0,0 +1,50 @@
+import { act } from "react";
+import { createMemoryRouter } from "react-router-dom";
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { render } from "@web/__tests__/__mocks__/mock.render";
+import { getWeekDayLabel } from "@web/common/utils/event/event.util";
+import { CalendarView } from "@web/views/Calendar";
+
+const router = createMemoryRouter([{ index: true, Component: CalendarView }], {
+  initialEntries: ["/"],
+});
+
+describe("Scroll", () => {
+  // separate from other tests to preserve
+  // '.toHaveBeenCalledTimes' reliability
+  it("only scrolls once", async () => {
+    const scrollSpy = jest.spyOn(window.HTMLElement.prototype, "scroll");
+
+    await act(() => render(<></>, { router }));
+
+    expect(scrollSpy).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Calendar: Display without State", () => {
+  it("displays all the things that a user needs to see", async () => {
+    await act(() => render(<></>, { router }));
+
+    /* week nav arrows */
+    expect(
+      screen.getByRole("navigation", {
+        name: /previous week/i,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("navigation", {
+        name: /next week/i,
+      }),
+    ).toBeInTheDocument();
+
+    /* current week label */
+    const todayLabel = getWeekDayLabel(new Date());
+    expect(screen.getByTitle(todayLabel)).toBeInTheDocument();
+
+    /* now line */
+    expect(
+      screen.getByRole("separator", { name: /now line/i }),
+    ).toBeInTheDocument();
+  });
+});