Add Teams UI Banners (#4936)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `DashboardTypeCookieSetter` component to manage dashboard type cookies and updates various parts of the application to utilize this functionality. It also adds new banner components for improved user notifications.

### Detailed summary
- Added `DashboardTypeCookieSetter` component to set dashboard type cookies.
- Integrated `DashboardTypeCookieSetter` in `AppShell`, `RootTeamLayout`, and `AccountLayout`.
- Created `TeamsUIBanner` and `TryTeamsUIBanner` components for user announcements.
- Updated routing logic in `login/page.tsx` based on cookie value.
- Modified `AnnouncementBanner` for better usability and appearance.
- Added a new button in `HeroSection` to redirect based on cookie value.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/DashboardTypeCookieSetter.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import { setCookie } from "../../stores/SyncStoreToCookies";
+
+export function DashboardTypeCookieSetter(props: {
+  type: "team" | "old";
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setCookie("x-dashboard-type", props.type);
+  }, [props.type]);
+
+  return null;
+}

apps/dashboard/src/app/(dashboard)/layout.tsx

@@ -1,11 +1,13 @@
 import { AppFooter } from "@/components/blocks/app-footer";
 import { ErrorProvider } from "../../contexts/error-handler";
+import { TryTeamsUIBanner } from "../components/DashboardTypeBanner";
 import { DashboardHeader } from "../components/Header/DashboardHeader";
 
 export default function DashboardLayout(props: { children: React.ReactNode }) {
   return (
     <ErrorProvider>
       <div className="flex min-h-screen flex-col bg-background">
+        <TryTeamsUIBanner />
         <DashboardHeader />
         <main className="grow">{props.children}</main>
         <AppFooter />

apps/dashboard/src/app/account/layout.tsx

@@ -1,8 +1,10 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
+import { DashboardTypeCookieSetter } from "@/components/DashboardTypeCookieSetter";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import { AppFooter } from "@/components/blocks/app-footer";
 import type React from "react";
+import { TeamsUIBanner } from "../components/DashboardTypeBanner";
 import { TWAutoConnect } from "../components/autoconnect";
 import { AccountHeader } from "./components/AccountHeader";
 
@@ -11,6 +13,7 @@ export default async function AccountLayout(props: {
 }) {
   return (
     <div className="flex min-h-screen flex-col bg-background">
+      <TeamsUIBanner />
       <div className="flex grow flex-col">
         <HeaderAndNav />
         <div className="border-border border-b py-10">
@@ -42,6 +45,7 @@ export default async function AccountLayout(props: {
         </SidebarLayout>
       </div>
       <TWAutoConnect />
+      <DashboardTypeCookieSetter type="team" />
       <AppFooter />
     </div>
   );

apps/dashboard/src/app/components/DashboardTypeBanner.tsx

@@ -0,0 +1,21 @@
+import { AnnouncementBanner } from "../../components/notices/AnnouncementBanner";
+
+export function TeamsUIBanner() {
+  return (
+    <AnnouncementBanner
+      label="You are exploring the new dashboard. Click here to go back to the legacy dashboard."
+      href="/dashboard"
+      trackingLabel="old-dashboard"
+    />
+  );
+}
+
+export function TryTeamsUIBanner() {
+  return (
+    <AnnouncementBanner
+      label="Explore the new teams dashboard. Now in Beta."
+      href="/team"
+      trackingLabel="team-dashboard"
+    />
+  );
+}

apps/dashboard/src/app/login/page.tsx

@@ -7,6 +7,7 @@ import { useTheme } from "next-themes";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import { ConnectEmbed } from "thirdweb/react";
+import { getCookie } from "../../stores/SyncStoreToCookies";
 import { ThirdwebMiniLogo } from "../components/ThirdwebMiniLogo";
 import { getSDKTheme } from "../components/sdk-component-theme";
 import { doLogin, doLogout, getLoginPayload, isLoggedIn } from "./auth-actions";
@@ -48,7 +49,12 @@ function CustomConnectEmmbed() {
     if (nextSearchParam && isValidRedirectPath(nextSearchParam)) {
       router.replace(nextSearchParam);
     } else {
-      router.replace("/dashboard");
+      const dashboardType = getCookie("x-dashboard-type");
+      if (dashboardType === "team") {
+        router.replace("/team");
+      } else {
+        router.replace("/dashboard");
+      }
     }
   }
 

apps/dashboard/src/app/team/[team_slug]/layout.tsx

@@ -1,4 +1,6 @@
+import { DashboardTypeCookieSetter } from "@/components/DashboardTypeCookieSetter";
 import { AppFooter } from "@/components/blocks/app-footer";
+import { TeamsUIBanner } from "../../components/DashboardTypeBanner";
 import { TWAutoConnect } from "../../components/autoconnect";
 
 export default function RootTeamLayout(props: {
@@ -7,9 +9,11 @@ export default function RootTeamLayout(props: {
 }) {
   return (
     <div className="flex min-h-screen flex-col">
+      <TeamsUIBanner />
       <div className="flex grow flex-col">{props.children}</div>
       <TWAutoConnect />
       <AppFooter />
+      <DashboardTypeCookieSetter type="team" />
     </div>
   );
 }

apps/dashboard/src/components/homepage/sections/HeroSection.tsx

@@ -1,8 +1,10 @@
 import { Flex, Icon, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
+import { useEffect, useState } from "react";
 import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Heading, Text, TrackedLink, TrackedLinkButton } from "tw-components";
+import { getCookie } from "../../../stores/SyncStoreToCookies";
 import { Aurora } from "../Aurora";
 import styles from "../category/categories.module.css";
 import { OpenSource } from "../open-source/OpenSource";
@@ -49,25 +51,7 @@ export const HeroSection = ({ TRACKING_CATEGORY }: HeroSectionProps) => {
             flexDirection={{ base: "column", sm: "row" }}
             gap={{ base: 4, md: 6 }}
           >
-            <TrackedLinkButton
-              leftIcon={<Icon as={BsFillLightningChargeFill} boxSize={4} />}
-              py={6}
-              px={8}
-              w="full"
-              bgColor="white"
-              _hover={{
-                bgColor: "white",
-                opacity: 0.8,
-              }}
-              color="black"
-              href="/dashboard"
-              category={TRACKING_CATEGORY}
-              label="get-started"
-              fontWeight="bold"
-              maxW={{ base: "full", sm: "fit-content" }}
-            >
-              Get started
-            </TrackedLinkButton>
+            <GetStartedButtonLink trackingCategory={TRACKING_CATEGORY} />
 
             <TrackedLinkButton
               variant="outline"
@@ -153,3 +137,39 @@ export const HeroSection = ({ TRACKING_CATEGORY }: HeroSectionProps) => {
     </HomepageSection>
   );
 };
+
+function GetStartedButtonLink(props: {
+  trackingCategory: string;
+  showTeamLayout?: boolean;
+}) {
+  // using state+effect here to avoid hydration errors
+  const [showTeamLayout, setShowTeamLayout] = useState(false);
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (getCookie("x-dashboard-type") === "team") {
+      setShowTeamLayout(true);
+    }
+  }, []);
+
+  return (
+    <TrackedLinkButton
+      leftIcon={<Icon as={BsFillLightningChargeFill} boxSize={4} />}
+      py={6}
+      px={8}
+      w="full"
+      bgColor="white"
+      _hover={{
+        bgColor: "white",
+        opacity: 0.8,
+      }}
+      color="black"
+      href={showTeamLayout ? "/team" : "/dashboard"}
+      category={props.trackingCategory}
+      label="get-started"
+      fontWeight="bold"
+      maxW={{ base: "full", sm: "fit-content" }}
+    >
+      Get started
+    </TrackedLinkButton>
+  );
+}

apps/dashboard/src/components/layout/app-shell/index.tsx

@@ -1,3 +1,4 @@
+import { DashboardTypeCookieSetter } from "@/components/DashboardTypeCookieSetter";
 import { AppFooter } from "@/components/blocks/app-footer";
 import { cn } from "@/lib/utils";
 import { Container } from "@chakra-ui/react";
@@ -21,6 +22,7 @@ export const AppShell: ComponentWithChildren<AppShellProps> = ({
 }) => {
   return (
     <div className="bg-background">
+      <DashboardTypeCookieSetter type="old" />
       <DashboardHeader />
       <main
         className={cn("min-h-screen py-6 md:pt-10 md:pb-20", mainClassName)}

apps/dashboard/src/components/notices/AnnouncementBanner.tsx

@@ -1,70 +1,51 @@
-import { Box, Container, Flex, Icon, IconButton } from "@chakra-ui/react";
+"use client";
+import { Button } from "@/components/ui/button";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { FiArrowRight, FiX } from "react-icons/fi";
-import { Heading, TrackedLink } from "tw-components";
+import { ChevronRightIcon, XIcon } from "lucide-react";
 
-export const AnnouncementBanner = () => {
+export function AnnouncementBanner(props: {
+  href: string;
+  label: string;
+  trackingLabel: string;
+}) {
   const [hasDismissedAnnouncement, setHasDismissedAnnouncement] =
-    useLocalStorage("dismissed-modular-contracts-announcement", false, true);
+    useLocalStorage(`dismissed-${props.trackingLabel}`, false, true);
 
   if (hasDismissedAnnouncement) {
     return null;
   }
 
   return (
-    <Box
-      position="sticky"
-      zIndex="10"
-      py={3}
-      bgImage="linear-gradient(145.96deg, #410AB6 5.07%, #7bdefe 100%)"
+    <div
+      className="fade-in-0 relative w-full animate-in bg-background py-2.5 pr-14 duration-400"
+      style={{
+        backgroundImage:
+          "linear-gradient(145deg, hsl(290deg 85% 50%), hsl(220deg 85% 50%))",
+      }}
     >
-      <Flex
-        w="full"
-        justifyContent="space-between"
-        alignItems="center"
-        gap={{ base: 1, md: 2 }}
-        px={4}
+      <TrackedLinkTW
+        href={props.href}
+        category="announcement"
+        label={props.trackingLabel}
+        target={props.href.startsWith("http") ? "_blank" : undefined}
+        className="container flex cursor-pointer items-center gap-2 lg:justify-center"
       >
-        <Box display={{ base: "none", md: "block" }} />
-        <TrackedLink
-          href="https://thirdweb.com/explore/modular-contracts"
-          category="announcement"
-          label="onchain-olympics"
-          isExternal
-        >
-          <Container maxW="container.page" display="flex" px={0}>
-            <Flex
-              cursor="pointer"
-              mx="auto"
-              align="center"
-              gap={{ base: 0.5, md: 2 }}
-              color="white"
-            >
-              <Heading
-                size="label.lg"
-                as="p"
-                lineHeight={{ base: 1.5, md: undefined }}
-                color="white"
-                fontWeight={500}
-              >
-                Modular Contracts Beta: Secure, Customizable, and Easy to
-                Integrate contracts
-              </Heading>
-              <Icon display={{ base: "none", md: "block" }} as={FiArrowRight} />
-            </Flex>
-          </Container>
-        </TrackedLink>
+        <span className="inline-block font-semibold text-white leading-normal hover:underline">
+          {props.label}
+        </span>
+        <ChevronRightIcon className="hidden size-5 opacity-80 lg:block" />
+      </TrackedLinkTW>
 
-        <IconButton
-          size="xs"
-          aria-label="Close announcement"
-          icon={<FiX />}
-          colorScheme="blackAlpha"
-          color={{ base: "white", md: "black" }}
-          variant="ghost"
-          onClick={() => setHasDismissedAnnouncement(true)}
-        />
-      </Flex>
-    </Box>
+      <Button
+        size="icon"
+        variant="ghost"
+        onClick={() => setHasDismissedAnnouncement(true)}
+        aria-label="Close announcement"
+        className="-translate-y-1/2 !text-white absolute top-1/2 right-2 h-auto w-auto p-2 hover:bg-white/15"
+      >
+        <XIcon className="size-5" />
+      </Button>
+    </div>
   );
-};
+}

apps/dashboard/src/pages/_app.tsx

@@ -22,7 +22,7 @@ import type { ThirdwebNextPage } from "utils/types";
 import chakraTheme from "../theme";
 import "@/styles/globals.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
-import { AnnouncementBanner } from "../components/notices/AnnouncementBanner";
+import { TryTeamsUIBanner } from "../app/components/DashboardTypeBanner";
 
 const inter = interConstructor({
   subsets: ["latin"],
@@ -261,9 +261,10 @@ const ConsoleApp = memo(function ConsoleApp({
 
       <DashboardRouterTopProgressBar />
 
+      <TryTeamsUIBanner />
+
       <TailwindTheme>
         <ChakraProvider theme={chakraThemeWithFonts}>
-          <AnnouncementBanner />
           {isFallback && Component.fallback
             ? Component.fallback
             : getLayout(<Component {...pageProps} />, pageProps)}