chore: refactor shell to individual files (#16893)

* banners

* useAuthHooks

* fixes to redirect and banner

* extract useIntercom to custom hook

* use app theme

* extract user-dropdown to new component

* Navigation Item

* navigation and profile dropdown

* Fix import

* navigation and sidebar

* fix type errors

* fix banners being an async call

* fix types

* fix banner prop type

* fix mobile nav item import

* fix banner types

* (revert) layout banner render method to fix type error

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

apps/web/modules/more/more-page-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import Shell, { MobileNavigationMoreItems } from "@calcom/features/shell/Shell";
+import Shell from "@calcom/features/shell/Shell";
+import { MobileNavigationMoreItems } from "@calcom/features/shell/navigation/Navigation";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 export default function MorePage() {

apps/web/playwright/signup.e2e.ts

@@ -1,4 +1,5 @@
-import { expect, Page } from "@playwright/test";
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { randomBytes } from "crypto";
 
 import { APP_NAME, IS_PREMIUM_USERNAME_ENABLED, IS_MAILHOG_ENABLED } from "@calcom/lib/constants";

packages/features/auth/lib/hooks/useRedirectToLoginIfUnauthenticated.tsx

@@ -0,0 +1,28 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
+export function useRedirectToLoginIfUnauthenticated(isPublic = false) {
+  const { data: session, status } = useSession();
+  const loading = status === "loading";
+  const router = useRouter();
+  useEffect(() => {
+    if (isPublic) {
+      return;
+    }
+
+    if (!loading && !session) {
+      const urlSearchParams = new URLSearchParams();
+      urlSearchParams.set("callbackUrl", `${WEBAPP_URL}${location.pathname}${location.search}`);
+      router.replace(`/auth/login?${urlSearchParams.toString()}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, session, isPublic]);
+
+  return {
+    loading: loading && !session,
+    session,
+  };
+}

packages/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded.tsx

@@ -0,0 +1,53 @@
+import type { User } from "@prisma/client";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+import dayjs from "@calcom/dayjs";
+import { useFlagMap } from "@calcom/features/flags/context/provider";
+import { useEmailVerifyCheck } from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
+
+const shouldShowOnboarding = (
+  user: Pick<User, "createdDate" | "completedOnboarding"> & {
+    organizationId: number | null;
+  }
+) => {
+  return (
+    !user.completedOnboarding &&
+    !user.organizationId &&
+    dayjs(user.createdDate).isAfter(ONBOARDING_INTRODUCED_AT)
+  );
+};
+
+export const ONBOARDING_INTRODUCED_AT = dayjs("September 1 2021").toISOString();
+
+export const ONBOARDING_NEXT_REDIRECT = {
+  redirect: {
+    permanent: false,
+    destination: "/getting-started",
+  },
+} as const;
+
+export function useRedirectToOnboardingIfNeeded() {
+  const router = useRouter();
+  const query = useMeQuery();
+  const user = query.data;
+  const flags = useFlagMap();
+
+  const { data: email } = useEmailVerifyCheck();
+
+  const needsEmailVerification = !email?.isVerified && flags["email-verification"];
+
+  const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
+
+  useEffect(() => {
+    if (isRedirectingToOnboarding && !needsEmailVerification) {
+      router.replace("/getting-started");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRedirectingToOnboarding, needsEmailVerification]);
+
+  return {
+    isRedirectingToOnboarding,
+  };
+}

packages/features/ee/support/lib/intercom/useIntercom.ts

@@ -1,11 +1,13 @@
 // eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
+import { useEffect } from "react";
 import { useIntercom as useIntercomLib } from "react-use-intercom";
 import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { useHasTeamPlan, useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
+import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
 
 // eslint-disable-next-line turbo/no-undeclared-env-vars
@@ -117,4 +119,16 @@ export const useIntercom = () => {
   return { ...hookData, open, boot };
 };
 
+export const useBootIntercom = () => {
+  const { boot } = useIntercom();
+  const { data: user } = trpc.viewer.me.useQuery();
+  useEffect(() => {
+    // not using useMediaQuery as it toggles between true and false
+    const showIntercom = localStorage.getItem("showIntercom");
+    if (!isInterComEnabled || showIntercom === "false" || window.innerWidth <= 768 || !user) return;
+    boot();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user]);
+};
+
 export default useIntercom;