[TOOL-3683] Dashboard: show FTUX in team overview page when no projects are created

Author: MananTank

apps/dashboard/src/app/account/components/AccountHeader.tsx

@@ -77,7 +77,7 @@ export function AccountHeader(props: {
               isOpen: false,
             })
           }
-          onCreateAndComplete={() => {
+          onCreate={() => {
             // refresh projects
             router.refresh();
           }}

apps/dashboard/src/app/get-started/team/[team_slug]/create-project/page.tsx

@@ -0,0 +1,22 @@
+import { getTeamBySlug } from "@/api/team";
+import { notFound } from "next/navigation";
+import { CreateProjectPage } from "../../../../login/onboarding/create-project-onboarding/create-project-page";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string }>;
+}) {
+  const params = await props.params;
+  const team = await getTeamBySlug(params.team_slug);
+
+  if (!team) {
+    notFound();
+  }
+
+  return (
+    <CreateProjectPage
+      enableNebulaServiceByDefault={team.enabledScopes.includes("nebula")}
+      teamSlug={team.slug}
+      teamId={team.id}
+    />
+  );
+}

apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPage.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { projectStub } from "../../../../stories/stubs";
+import { CreateProjectPageUI } from "./CreateProjectPageUI";
+
+const meta = {
+  title: "Onboarding/CreateProject",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <CreateProjectPageUI
+      createProject={async () => {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        return {
+          project: projectStub("foo", "bar"),
+          secret: "secret",
+        };
+      }}
+      teamSlug="foo"
+      enableNebulaServiceByDefault={false}
+    />
+  );
+}

apps/dashboard/src/app/login/onboarding/create-project-onboarding/CreateProjectPageUI.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import type { Project } from "@/api/projects";
+import { useState } from "react";
+import {
+  CreateProjectForm,
+  CreatedProjectDetails,
+} from "../../../../components/settings/ApiKeys/Create";
+import { CreateProjectOnboardingLayout } from "../onboarding-layout";
+
+export function CreateProjectPageUI(props: {
+  createProject: (param: Partial<Project>) => Promise<{
+    project: Project;
+    secret: string;
+  }>;
+  enableNebulaServiceByDefault: boolean;
+  teamSlug: string;
+}) {
+  const [screen, setScreen] = useState<
+    { id: "create" } | { id: "api-details"; project: Project; secret: string }
+  >({ id: "create" });
+  return (
+    <CreateProjectOnboardingLayout currentStep={screen.id === "create" ? 1 : 2}>
+      <div className="overflow-hidden rounded-lg border bg-card">
+        {screen.id === "create" && (
+          <CreateProjectForm
+            showTitle={false}
+            closeModal={undefined}
+            createProject={props.createProject}
+            onProjectCreated={(params) => {
+              setScreen({
+                id: "api-details",
+                project: params.project,
+                secret: params.secret,
+              });
+            }}
+            enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
+          />
+        )}
+
+        {screen.id === "api-details" && (
+          <CreatedProjectDetails
+            project={screen.project}
+            secret={screen.secret}
+            teamSlug={props.teamSlug}
+          />
+        )}
+      </div>
+    </CreateProjectOnboardingLayout>
+  );
+}

apps/dashboard/src/app/login/onboarding/create-project-onboarding/create-project-page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { createProjectClient } from "@3rdweb-sdk/react/hooks/useApi";
+import { CreateProjectPageUI } from "./CreateProjectPageUI";
+
+export function CreateProjectPage(props: {
+  enableNebulaServiceByDefault: boolean;
+  teamSlug: string;
+  teamId: string;
+}) {
+  return (
+    <CreateProjectPageUI
+      enableNebulaServiceByDefault={props.enableNebulaServiceByDefault}
+      teamSlug={props.teamSlug}
+      createProject={async (params) => {
+        const res = await createProjectClient(props.teamId, params);
+        return {
+          project: res.project,
+          secret: res.secret,
+        };
+      }}
+    />
+  );
+}

apps/dashboard/src/app/login/onboarding/onboarding-layout.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
 import {
   BoxIcon,
+  KeyRoundIcon,
   LogOutIcon,
   MailIcon,
   UserIcon,
@@ -99,6 +100,36 @@ export function TeamOnboardingLayout(props: {
   );
 }
 
+const createProjectOnboardingSteps: OnboardingStep[] = [
+  {
+    icon: BoxIcon,
+    title: "Configure Project",
+    description: "Provide project details",
+    number: 1,
+  },
+  {
+    icon: KeyRoundIcon,
+    title: "Store Secret Key",
+    description: "Store your secret key",
+    number: 2,
+  },
+];
+
+export function CreateProjectOnboardingLayout(props: {
+  children: React.ReactNode;
+  currentStep: 1 | 2;
+}) {
+  return (
+    <OnboardingLayout
+      steps={createProjectOnboardingSteps}
+      currentStep={props.currentStep}
+      title="Create a project"
+    >
+      {props.children}
+    </OnboardingLayout>
+  );
+}
+
 function OnboardingLayout(props: {
   steps: OnboardingStep[];
   currentStep: number;

apps/dashboard/src/app/login/onboarding/team-onboarding/team-onboarding.tsx

@@ -104,7 +104,7 @@ export function InviteTeamMembers(props: {
     <InviteTeamMembersUI
       trackEvent={trackEvent}
       onComplete={() => {
-        router.replace(`/team/${props.team.slug}`);
+        router.replace(`/get-started/team/${props.team.slug}/create-project`);
       }}
       getTeam={async () => {
         const res = await apiServerProxy<{

apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx

@@ -6,10 +6,8 @@ import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../login/loginRedirect";
-import {
-  type ProjectWithAnalytics,
-  TeamProjectsPage,
-} from "./~/projects/TeamProjectsPage";
+import { TeamProjectsPage } from "./~/projects/TeamProjectsPage";
+import type { ProjectWithAnalytics } from "./~/projects/TeamProjectsTable";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string }>;