[TOOL-4291] Dashboard: Show recommended team members in invite section

Author: MananTank

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

@@ -1,21 +1,31 @@
 import { getTeamBySlug } from "@/api/team";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { notFound } from "next/navigation";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { TeamOnboardingLayout } from "../../../../login/onboarding/onboarding-layout";
 import { InviteTeamMembers } from "../../../../login/onboarding/team-onboarding/team-onboarding";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string }>;
 }) {
   const params = await props.params;
-  const team = await getTeamBySlug(params.team_slug);
+  const [team, authToken] = await Promise.all([
+    getTeamBySlug(params.team_slug),
+    getAuthToken(),
+  ]);
 
-  if (!team) {
+  if (!team || !authToken) {
     notFound();
   }
 
+  const client = getThirdwebClient({
+    jwt: authToken,
+    teamId: team.id,
+  });
+
   return (
     <TeamOnboardingLayout currentStep={2}>
-      <InviteTeamMembers team={team} />
+      <InviteTeamMembers team={team} client={client} />
     </TeamOnboardingLayout>
   );
 }

apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.stories.tsx

@@ -1,7 +1,7 @@
 import type { Team } from "@/api/team";
 import type { Meta, StoryObj } from "@storybook/react";
 import { teamStub } from "stories/stubs";
-import { storybookLog } from "stories/utils";
+import { storybookLog, storybookThirdwebClient } from "stories/utils";
 import { TeamOnboardingLayout } from "../onboarding-layout";
 import { InviteTeamMembersUI } from "./InviteTeamMembers";
 
@@ -61,6 +61,7 @@ function Story(props: {
   return (
     <TeamOnboardingLayout currentStep={2}>
       <InviteTeamMembersUI
+        client={storybookThirdwebClient}
         trackEvent={(params) => {
           storybookLog("trackEvent", params);
         }}

apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.tsx

@@ -18,6 +18,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { TrackingParams } from "hooks/analytics/useTrack";
 import { ArrowRightIcon, CircleArrowUpIcon } from "lucide-react";
 import { useState, useTransition } from "react";
+import type { ThirdwebClient } from "thirdweb";
 import { pollWithTimeout } from "utils/pollWithTimeout";
 import { useStripeRedirectEvent } from "../../../stripe-redirect/stripeRedirectChannel";
 import {
@@ -32,6 +33,7 @@ export function InviteTeamMembersUI(props: {
   onComplete: () => void;
   getTeam: () => Promise<Team>;
   trackEvent: (params: TrackingParams) => void;
+  client: ThirdwebClient;
 }) {
   const [showPlanModal, setShowPlanModal] = useState(false);
   const [isPending, startTransition] = useTransition();
@@ -93,6 +95,9 @@ export function InviteTeamMembersUI(props: {
         userHasEditPermission={true}
         onInviteSuccess={() => setHasSentInvites(true)}
         shouldHideInviteButton={hasSentInvites}
+        client={props.client}
+        // its a new team, there's no recommended members
+        recommendedMembers={[]}
         customCTASection={
           <div className="flex gap-3">
             {props.team.billingPlan === "free" && (

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

@@ -96,13 +96,15 @@ export function TeamInfoForm(props: {
 
 export function InviteTeamMembers(props: {
   team: Team;
+  client: ThirdwebClient;
 }) {
   const router = useDashboardRouter();
   const trackEvent = useTrack();
 
   return (
     <InviteTeamMembersUI
       trackEvent={trackEvent}
+      client={props.client}
       onComplete={() => {
         router.replace(`/team/${props.team.slug}`);
       }}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/add-partner/page.tsx

@@ -1,5 +1,4 @@
 import { getTeamBySlug } from "@/api/team";
-import {} from "@/components/ui/breadcrumb";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "../../../../../../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../../../../../../login/loginRedirect";

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/partners/[partner_id]/edit/page.tsx

@@ -1,5 +1,4 @@
 import { getTeamBySlug } from "@/api/team";
-import {} from "@/components/ui/breadcrumb";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "../../../../../../../../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../../../../../../../../login/loginRedirect";

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.stories.tsx

@@ -4,6 +4,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { teamStub } from "stories/stubs";
+import { storybookThirdwebClient } from "../../../../../../../../stories/utils";
 import { InviteSection } from "./InviteSection";
 
 const meta = {
@@ -36,6 +37,14 @@ const TEAM_CONFIGS = [
   { id: "pro", label: "Pro Team", team: teamStub("bar", "pro") },
 ] as const;
 
+const RECOMMENDED_MEMBERS_COUNTS = [
+  { id: "0", label: "No Recommended Members", value: 0 },
+  { id: "1", label: "1 Recommended Member", value: 1 },
+  { id: "3", label: "2 Recommended Members", value: 2 },
+  { id: "5", label: "11 Recommended Members", value: 11 },
+  { id: "100", label: "100 Recommended Members", value: 100 },
+] as const;
+
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 type InviteParams = Array<{ email: string; role: TeamAccountRole }>;
 
@@ -79,12 +88,26 @@ function Story() {
   const [hasEditPermission, setHasEditPermission] = useState("true");
   const [inviteResult, setInviteResult] =
     useState<keyof typeof INVITE_HANDLERS>("success");
+  const [recommendedMembersCount, setRecommendedMembersCount] =
+    useState<number>(0);
 
   const showPermissionControls =
     selectedTeam.id !== "free" && selectedTeam.id !== "pro";
   const showInviteControls =
     showPermissionControls && hasEditPermission === "true";
 
+  const recommendedMembers = Array.from(
+    { length: recommendedMembersCount },
+    (_, i) => ({
+      email: `user${i + 1}@example.com`,
+      name: i % 2 === 0 ? `User ${i + 1}` : null,
+      image:
+        i % 3 === 0
+          ? `https://api.dicebear.com/7.x/avataaars/svg?seed=${i + 1}`
+          : null,
+    }),
+  );
+
   return (
     <div className="container max-w-6xl py-10">
       <div className="mb-8 flex flex-col gap-6">
@@ -154,13 +177,35 @@ function Story() {
             </RadioGroup>
           </div>
         )}
+
+        <div>
+          <h3 className="mb-3 font-medium">Recommended Members</h3>
+          <RadioGroup
+            value={recommendedMembersCount.toString()}
+            onValueChange={(value) => {
+              setRecommendedMembersCount(Number.parseInt(value));
+            }}
+            className="flex gap-4"
+          >
+            {RECOMMENDED_MEMBERS_COUNTS.map(({ id, label, value }) => (
+              <RadioOption
+                key={id}
+                id={id}
+                label={label}
+                value={value.toString()}
+              />
+            ))}
+          </RadioGroup>
+        </div>
       </div>
 
       <div className="flex flex-col gap-10">
         <InviteSection
           team={selectedTeam.team}
           userHasEditPermission={hasEditPermission === "true"}
           inviteTeamMembers={INVITE_HANDLERS[inviteResult]}
+          recommendedMembers={recommendedMembers}
+          client={storybookThirdwebClient}
         />
       </div>
     </div>