[Dashboard] Rename getMemberById to getMemberByAccountId and add onboarding banner

Author: jnsdls

apps/dashboard/src/@/api/team-members.ts

@@ -48,15 +48,18 @@ export async function getMembers(teamSlug: string) {
   return undefined;
 }
 
-export async function getMemberById(teamSlug: string, memberId: string) {
+export async function getMemberByAccountId(
+  teamSlug: string,
+  accountId: string,
+) {
   const token = await getAuthToken();
 
   if (!token) {
     return undefined;
   }
 
   const res = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members/${memberId}`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members/${accountId}`,
     {
       headers: {
         Authorization: `Bearer ${token}`,

apps/dashboard/src/app/(app)/account/page.tsx

@@ -1,5 +1,5 @@
 import { getTeams } from "@/api/team";
-import { getMemberById } from "@/api/team-members";
+import { getMemberByAccountId } from "@/api/team-members";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "../api/lib/getAuthToken";
@@ -25,7 +25,7 @@ export default async function Page() {
 
   const teamsWithRole = await Promise.all(
     teams.map(async (team) => {
-      const member = await getMemberById(team.slug, account.id);
+      const member = await getMemberByAccountId(team.slug, account.id);
 
       if (!member) {
         notFound();

apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx

@@ -4,7 +4,7 @@ import type { Team } from "@/api/team";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { useTrack } from "hooks/analytics/useTrack";
-import Link from "next/link";
+import { useDashboardRouter } from "../../../@/lib/DashboardRouter";
 
 const teamPlanToBadgeVariant: Record<
   Team["billingPlan"],
@@ -38,33 +38,28 @@ export function TeamPlanBadge(props: {
   className?: string;
   postfix?: string;
 }) {
-  const badge = (
+  const router = useDashboardRouter();
+  const track = useTrack();
+
+  return (
     <Badge
       variant={teamPlanToBadgeVariant[props.plan]}
       className={cn("px-1.5 capitalize", props.className)}
-    >
-      {`${getTeamPlanBadgeLabel(props.plan)}${props.postfix || ""}`}
-    </Badge>
-  );
-
-  const track = useTrack();
-
-  if (props.plan === "free") {
-    return (
-      <Link
-        href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
-        onClick={() => {
+      onClick={(e) => {
+        if (props.plan === "free") {
+          e.stopPropagation();
           track({
             category: "billing",
             action: "show_plans",
             label: "team_badge",
           });
-        }}
-      >
-        {badge}
-      </Link>
-    );
-  }
-
-  return badge;
+          router.push(
+            `/team/${props.teamSlug}/~/settings/billing?showPlans=true`,
+          );
+        }
+      }}
+    >
+      {`${getTeamPlanBadgeLabel(props.plan)}${props.postfix || ""}`}
+    </Badge>
+  );
 }

apps/dashboard/src/app/(app)/get-started/team/[team_slug]/layout.tsx

@@ -2,7 +2,14 @@ import { getProjects } from "@/api/projects";
 import { getTeamBySlug, getTeams } from "@/api/team";
 import { AppFooter } from "@/components/blocks/app-footer";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { differenceInDays } from "date-fns";
+import { InfoIcon } from "lucide-react";
 import { notFound } from "next/navigation";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "../../../../../@/components/ui/alert";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import {
   getAuthToken,
@@ -32,6 +39,10 @@ export default async function Layout(props: {
     notFound();
   }
 
+  // show the banner only if the team was created more than 3 days ago
+  const shouldShowOnboardingBanner =
+    differenceInDays(new Date(), new Date(team.createdAt)) > 3;
+
   // Note:
   // Do not check that team is already onboarded or not and redirect away from /get-started pages
   // because the team is marked as onboarded in the first step- instead of after completing all the steps
@@ -60,6 +71,21 @@ export default async function Layout(props: {
           teamsAndProjects={teamsAndProjects}
         />
       </div>
+      {shouldShowOnboardingBanner && (
+        <div className="container mt-10">
+          <Alert variant="info">
+            <InfoIcon className="size-5" />
+            <AlertTitle>Finish setting up your team</AlertTitle>
+            <AlertDescription>
+              Your team predates our latest onboarding flow, so a few steps
+              might still be pending.
+              <br />
+              Completing this updated guide takes less than a minute and ensures
+              everything is set up correctly.
+            </AlertDescription>
+          </Alert>
+        </div>
+      )}
       {props.children}
       <AppFooter />
     </div>

apps/dashboard/src/app/(app)/login/onboarding/isOnboardingRequired.ts

@@ -1,11 +1,24 @@
 import type { Team } from "@/api/team";
+import { getMemberByAccountId } from "@/api/team-members";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { getValidAccount } from "../../account/settings/getAccount";
 
 export function isAccountOnboardingComplete(account: Account) {
   // if email is confirmed, onboarding is considered complete
   return !!account.emailConfirmedAt;
 }
 
-export function isTeamOnboardingComplete(team: Team) {
-  return team.isOnboarded;
+export async function hasToCompleteTeamOnboarding(
+  team: Team,
+  pagePath: string,
+) {
+  const account = await getValidAccount(pagePath);
+  const teamMember = await getMemberByAccountId(team.slug, account.id);
+
+  // if we can't find the team member we cannot complete onboarding
+  if (!teamMember || teamMember.role !== "OWNER") {
+    return false;
+  }
+
+  return !team.isOnboarded;
 }

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

@@ -1,6 +1,6 @@
 import { getStripeBalance } from "@/actions/stripe-actions";
 import { type Team, getTeamBySlug } from "@/api/team";
-import { getMemberById } from "@/api/team-members";
+import { getMemberByAccountId } from "@/api/team-members";
 import { getTeamSubscriptions } from "@/api/team-subscription";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { redirect } from "next/navigation";
@@ -31,7 +31,7 @@ export default async function Page(props: {
   const [team, authToken, teamMember] = await Promise.all([
     getTeamBySlug(params.team_slug),
     getAuthToken(),
-    getMemberById(params.team_slug, account.id),
+    getMemberByAccountId(params.team_slug, account.id),
   ]);
 
   if (!team || !teamMember) {

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

@@ -1,6 +1,6 @@
 import { getTeamInvoices } from "@/actions/stripe-actions";
 import { getTeamBySlug } from "@/api/team";
-import { getMemberById } from "@/api/team-members";
+import { getMemberByAccountId } from "@/api/team-members";
 import { redirect } from "next/navigation";
 import type { SearchParams } from "nuqs/server";
 import { getValidAccount } from "../../../../../../account/settings/getAccount";
@@ -25,7 +25,7 @@ export default async function Page(props: {
 
   const [team, teamMember] = await Promise.all([
     getTeamBySlug(params.team_slug),
-    getMemberById(params.team_slug, account.id),
+    getMemberByAccountId(params.team_slug, account.id),
   ]);
 
   if (!team) {

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

@@ -1,5 +1,5 @@
 import { getTeamBySlug } from "@/api/team";
-import { getMemberById } from "@/api/team-members";
+import { getMemberByAccountId } from "@/api/team-members";
 import { checkDomainVerification } from "@/api/verified-domain";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { notFound } from "next/navigation";
@@ -19,7 +19,7 @@ export default async function Page(props: {
 
   const [team, teamMember, token, initialVerification] = await Promise.all([
     getTeamBySlug(params.team_slug),
-    getMemberById(params.team_slug, account.id),
+    getMemberByAccountId(params.team_slug, account.id),
     getAuthToken(),
     checkDomainVerification(params.team_slug),
   ]);

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

@@ -1,6 +1,6 @@
 import { getProject } from "@/api/projects";
 import { getTeams } from "@/api/team";
-import { getMemberById } from "@/api/team-members";
+import { getMemberByAccountId } from "@/api/team-members";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { notFound, redirect } from "next/navigation";
 import { getValidAccount } from "../../../../../account/settings/getAccount";
@@ -37,7 +37,7 @@ export default async function Page(props: {
 
   const teamsWithRole = await Promise.all(
     teams.map(async (team) => {
-      const member = await getMemberById(team.slug, account.id);
+      const member = await getMemberByAccountId(team.slug, account.id);
 
       if (!member) {
         notFound();

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

@@ -4,7 +4,7 @@ import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { getAuthToken } from "../../api/lib/getAuthToken";
 import { EnsureValidConnectedWalletLoginServer } from "../../components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
-import { isTeamOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
+import { hasToCompleteTeamOnboarding } from "../../login/onboarding/isOnboardingRequired";
 import { SaveLastVisitedTeamPage } from "../components/last-visited-page/SaveLastVisitedPage";
 import {
   PastDueBanner,
@@ -16,8 +16,11 @@ export default async function RootTeamLayout(props: {
   params: Promise<{ team_slug: string }>;
 }) {
   const { team_slug } = await props.params;
-  const authToken = await getAuthToken();
-  const team = await getTeamBySlug(team_slug).catch(() => null);
+
+  const [authToken, team] = await Promise.all([
+    getAuthToken(),
+    getTeamBySlug(team_slug).catch(() => null),
+  ]);
 
   if (!team) {
     redirect("/team");
@@ -27,7 +30,7 @@ export default async function RootTeamLayout(props: {
     redirect("/login");
   }
 
-  if (!isTeamOnboardingComplete(team)) {
+  if (await hasToCompleteTeamOnboarding(team, `/team/${team_slug}`)) {
     redirect(`/get-started/team/${team.slug}`);
   }