[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)/~/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>

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

@@ -1,6 +1,7 @@
 "use client";
 import type { Team } from "@/api/team";
 import type { TeamAccountRole } from "@/api/team-members";
+import { Img } from "@/components/blocks/Img";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,13 +20,22 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {} from "@/components/ui/table";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
-import { ExternalLinkIcon, PlusIcon, Trash2Icon, UserPlus } from "lucide-react";
+import {
+  CheckIcon,
+  ExternalLinkIcon,
+  PlusIcon,
+  Trash2Icon,
+  UserPlus,
+} from "lucide-react";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
 import { z } from "zod";
 import { getValidTeamPlan } from "../../../../../components/TeamHeader/getValidTeamPlan";
 
@@ -40,6 +50,12 @@ const inviteFormSchema = z.object({
     .min(1, "No invites added"),
 });
 
+export type RecommendedMember = {
+  email: string;
+  name: string | null;
+  image: string | null;
+};
+
 type InviteFormValues = z.infer<typeof inviteFormSchema>;
 
 // Note: This component is also used in team onboarding flow and not just in team settings page
@@ -61,6 +77,8 @@ export function InviteSection(props: {
   className?: string;
   onInviteSuccess?: () => void;
   shouldHideInviteButton?: boolean;
+  recommendedMembers: RecommendedMember[];
+  client: ThirdwebClient;
 }) {
   const teamPlan = getValidTeamPlan(props.team);
   let bottomSection: React.ReactNode = null;
@@ -241,6 +259,41 @@ export function InviteSection(props: {
               </p>
             </div>
 
+            {props.recommendedMembers.length > 0 && (
+              <RecommendedMembersSection
+                client={props.client}
+                isDisabled={!inviteEnabled}
+                recommendedMembers={props.recommendedMembers}
+                selectedMembers={form
+                  .watch("invites")
+                  .map((invite) => invite.email)}
+                onToggleMember={(email) => {
+                  const currentInvites = form
+                    .getValues("invites")
+                    .filter((x) => x.email !== "");
+
+                  const inviteIndex = currentInvites.findIndex(
+                    (invite) => invite.email === email,
+                  );
+                  if (inviteIndex !== -1) {
+                    currentInvites.splice(inviteIndex, 1);
+                  } else {
+                    currentInvites.push({ email, role: "MEMBER" });
+                  }
+
+                  // must show at least one (even if its empty)
+                  if (currentInvites.length === 0) {
+                    currentInvites.push({ email: "", role: "MEMBER" });
+                  }
+
+                  form.setValue("invites", currentInvites, {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                  });
+                }}
+              />
+            )}
+
             <div className="px-4 py-6 lg:px-6">
               <div className="flex flex-col gap-5">
                 {form.watch("invites").map((_, index) => (
@@ -372,6 +425,7 @@ export function InviteSection(props: {
                 </Button>
               </div>
             </div>
+
             {bottomSection}
           </div>
         </section>
@@ -410,3 +464,71 @@ function RoleSelector(props: {
     </Select>
   );
 }
+
+function RecommendedMembersSection(props: {
+  recommendedMembers: RecommendedMember[];
+  selectedMembers: string[];
+  onToggleMember: (email: string) => void;
+  isDisabled: boolean;
+  client: ThirdwebClient;
+}) {
+  return (
+    <div className="relative border-b">
+      <div className="px-4 py-4 lg:px-6">
+        <h3 className="font-medium text-base">Recommended Members</h3>
+        <p className="text-muted-foreground text-sm">
+          Users with your team's verified domain in their email address that
+          aren't added to your team yet
+        </p>
+      </div>
+      <div className="grid max-h-[294px] grid-cols-1 gap-3 overflow-y-auto px-4 pb-6 md:grid-cols-2 lg:px-6 xl:grid-cols-3">
+        {props.recommendedMembers.map((member) => {
+          const isSelected = props.selectedMembers.includes(member.email);
+          return (
+            <Button
+              key={member.email}
+              variant="outline"
+              className={cn(
+                "relative flex h-auto w-auto items-center justify-between gap-2 rounded-lg border-dashed p-2.5 text-start hover:border-active-border hover:border-solid hover:bg-accent/50 disabled:opacity-100",
+                isSelected && "border-active-border border-solid bg-accent/50",
+              )}
+              onClick={() => {
+                props.onToggleMember(member.email);
+              }}
+              disabled={props.isDisabled}
+            >
+              <div className="flex items-center gap-2.5 overflow-hidden">
+                <Img
+                  src={
+                    member.image
+                      ? resolveSchemeWithErrorHandler({
+                          uri: member.image,
+                          client: props.client,
+                        })
+                      : ""
+                  }
+                  className="size-7 rounded-full border"
+                  fallback={
+                    <div className="flex items-center justify-center bg-muted/70 font-semibold text-muted-foreground uppercase">
+                      {member.email[0]}
+                    </div>
+                  }
+                />
+
+                <div className="truncate text-foreground text-sm">
+                  {member.email}
+                </div>
+              </div>
+
+              {isSelected && (
+                <div className="p-1">
+                  <CheckIcon className="size-5 text-foreground" />
+                </div>
+              )}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -9,7 +9,7 @@ import { TabButtons } from "@/components/ui/tabs";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import { InviteSection } from "./InviteSection";
+import { InviteSection, type RecommendedMember } from "./InviteSection";
 import { ManageInvitesSection } from "./ManageInvitesSection";
 import { ManageMembersSection } from "./ManageMembersSection";
 
@@ -19,6 +19,7 @@ export function TeamMembersSettingsPage(props: {
   members: TeamMember[];
   client: ThirdwebClient;
   teamInvites: TeamInvite[];
+  recommendedMembers: RecommendedMember[];
 }) {
   const [manageTab, setManageTab] = useState<"members" | "invites">("members");
   const router = useDashboardRouter();
@@ -34,6 +35,7 @@ export function TeamMembersSettingsPage(props: {
 
       <InviteSection
         team={props.team}
+        client={props.client}
         userHasEditPermission={props.userHasEditPermission}
         inviteTeamMembers={async (params) => {
           const res = await sendTeamInvites({
@@ -51,6 +53,8 @@ export function TeamMembersSettingsPage(props: {
             results: res.results,
           };
         }}
+        // TODO
+        recommendedMembers={props.recommendedMembers}
       />
 
       <div className="h-10" />