[TOOL-3446] Dashboard: Revamp account onboarding, Add Team onboarding

Author: MananTank

.changeset/chilly-trams-wash.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+Update `TeamResponse` type

apps/dashboard/.storybook/preview.tsx

@@ -7,6 +7,7 @@ import { Inter as interFont } from "next/font/google";
 // biome-ignore lint/style/useImportType: <explanation>
 import React from "react";
 import { useEffect } from "react";
+import { Toaster } from "sonner";
 import { Button } from "../src/@/components/ui/button";
 
 const queryClient = new QueryClient();
@@ -16,8 +17,30 @@ const fontSans = interFont({
   variable: "--font-sans",
 });
 
+const customViewports = {
+  xs: {
+    // Regular sized phones (iphone 15 / 15 pro)
+    name: "iPhone",
+    styles: {
+      width: "390px",
+      height: "844px",
+    },
+  },
+  sm: {
+    // Larger phones (iphone 15 plus / 15 pro max)
+    name: "iPhone Plus",
+    styles: {
+      width: "430px",
+      height: "932px",
+    },
+  },
+};
+
 const preview: Preview = {
   parameters: {
+    viewport: {
+      viewports: customViewports,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -57,13 +80,13 @@ function StoryLayout(props: {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="flex min-h-screen min-w-0 flex-col bg-background text-foreground">
+      <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
         <div className="flex justify-end gap-2 border-b p-4">
           <Button
             onClick={() => setTheme("dark")}
             size="sm"
             variant={theme === "dark" ? "default" : "outline"}
-            className="h-auto w-auto rounded-full p-2"
+            className="h-auto w-auto shrink-0 rounded-full p-2"
           >
             <MoonIcon className="size-4" />
           </Button>
@@ -72,14 +95,20 @@ function StoryLayout(props: {
             onClick={() => setTheme("light")}
             size="sm"
             variant={theme === "light" ? "default" : "outline"}
-            className="h-auto w-auto rounded-full p-2"
+            className="h-auto w-auto shrink-0 rounded-full p-2"
           >
             <SunIcon className="size-4" />
           </Button>
         </div>
 
         <div className="flex min-w-0 grow flex-col">{props.children}</div>
+        <ToasterSetup />
       </div>
     </QueryClientProvider>
   );
 }
+
+function ToasterSetup() {
+  const { theme } = useTheme();
+  return <Toaster richColors theme={theme === "light" ? "light" : "dark"} />;
+}

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -31,7 +31,6 @@ type PricingCardProps = {
   ctaHint?: string;
   highlighted?: boolean;
   current?: boolean;
-  canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
   redirectPath: string;
   redirectToCheckout: RedirectBillingCheckoutAction;
@@ -43,7 +42,6 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   cta,
   highlighted = false,
   current = false,
-  canTrialGrowth = false,
   activeTrialEndsAt,
   redirectPath,
   redirectToCheckout,
@@ -88,18 +86,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
         <div className="flex flex-col gap-0.5">
           <div className="flex items-center gap-2">
             <span className="font-semibold text-3xl text-foreground tracking-tight">
-              {isCustomPrice ? (
-                plan.price
-              ) : canTrialGrowth ? (
-                <>
-                  <span className="text-muted-foreground line-through">
-                    ${plan.price}
-                  </span>{" "}
-                  $0
-                </>
-              ) : (
-                `$${plan.price}`
-              )}
+              ${plan.price}
             </span>
 
             {!isCustomPrice && (

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -44,14 +44,6 @@ export type Account = {
   // TODO - add image URL
 };
 
-interface UpdateAccountInput {
-  name?: string;
-  email?: string;
-  linkWallet?: boolean;
-  subscribeToUpdates?: boolean;
-  onboardSkipped?: boolean;
-}
-
 interface UpdateAccountNotificationsInput {
   billing: "email" | "none";
   updates: "email" | "none";
@@ -140,45 +132,40 @@ export function useAccountCredits() {
   });
 }
 
-export function useUpdateAccount() {
-  const queryClient = useQueryClient();
-  const address = useActiveAccount()?.address;
-
-  return useMutation({
-    mutationFn: async (input: UpdateAccountInput) => {
-      type Result = {
-        data: object;
-        error?: { message: string };
-      };
+export type UpdateAccountParams = {
+  name?: string;
+  email?: string;
+  linkWallet?: boolean;
+  subscribeToUpdates?: boolean;
+  onboardSkipped?: boolean;
+};
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account",
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
+export async function updateAccountClient(input: UpdateAccountParams) {
+  type Result = {
+    data: object;
+    error?: { message: string };
+  };
 
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account",
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(input),
+  });
 
-      const json = res.data;
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
 
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
+  const json = res.data;
 
-      return json.data;
-    },
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
 
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(address || ""),
-      });
-    },
-  });
+  return json.data;
 }
 
 export function useUpdateNotifications() {
@@ -221,77 +208,61 @@ export function useUpdateNotifications() {
   });
 }
 
-export function useConfirmEmail() {
-  return useMutation({
-    mutationFn: async (input: ConfirmEmailInput) => {
-      type Result = {
-        error?: { message: string };
-        data: { team: Team; account: Account };
-      };
-
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account/confirmEmail",
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
-
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
-
-      const json = res.data;
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
+export const verifyEmailClient = async (input: ConfirmEmailInput) => {
+  type Result = {
+    error?: { message: string };
+    data: { team: Team; account: Account };
+  };
 
-      return json.data;
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account/confirmEmail",
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
     },
+    body: JSON.stringify(input),
   });
-}
 
-export function useResendEmailConfirmation() {
-  const address = useActiveAccount()?.address;
-  const queryClient = useQueryClient();
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
 
-  return useMutation({
-    mutationFn: async () => {
-      type Result = {
-        error?: { message: string };
-        data: object;
-      };
+  const json = res.data;
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account/resendEmailConfirmation",
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({}),
-      });
-
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
 
-      const json = res.data;
+  return json.data;
+};
 
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
+export const resendEmailClient = async () => {
+  type Result = {
+    error?: { message: string };
+    data: object;
+  };
 
-      return json.data;
-    },
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(address || ""),
-      });
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account/resendEmailConfirmation",
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
     },
+    body: JSON.stringify({}),
   });
-}
+
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
+
+  const json = res.data;
+
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
+
+  return json.data;
+};
 
 export async function createProjectClient(
   teamId: string,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -52,7 +52,7 @@ import {
   useWalletBalance,
 } from "thirdweb/react";
 import { z } from "zod";
-import { isOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
+import { isAccountOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -210,7 +210,7 @@ export function FaucetButton({
     );
   }
 
-  if (!isOnboardingComplete(twAccount)) {
+  if (!isAccountOnboardingComplete(twAccount)) {
     return (
       <Button asChild className="w-full">
         <Link

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -2,7 +2,7 @@ import { API_SERVER_URL } from "@/constants/env";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { getAuthToken } from "../../api/lib/getAuthToken";
 import { loginRedirect } from "../../login/loginRedirect";
-import { isOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
+import { isAccountOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
 
 /**
  * Just get the account object without enforcing onboarding.
@@ -40,7 +40,7 @@ export async function getValidAccount(pagePath?: string) {
   const account = await getRawAccount();
 
   // enforce login & onboarding
-  if (!account || !isOnboardingComplete(account)) {
+  if (!account || !isAccountOnboardingComplete(account)) {
     loginRedirect(pagePath);
   }