Feat: Team member matching by email

app/(auth)/auth/confirm-email-change/[token]/page.tsx

@@ -1,6 +1,8 @@
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+
+
 import NotFound from "@/pages/404";
 import { VerificationToken } from "@prisma/client";
 import { waitUntil } from "@vercel/functions";
@@ -11,6 +13,7 @@ import { redis } from "@/lib/redis";
 import { sendEmail } from "@/lib/resend";
 import { CustomUser } from "@/lib/types";
 import { subscribe, unsubscribe } from "@/lib/unsend";
+import { isPublicEmailDomain } from "@/lib/utils/email-domains";
 
 import EmailUpdated from "@/components/emails/email-updated";
 
@@ -65,6 +68,17 @@ export default async function ConfirmEmailChangePage(props: PageProps) {
   );
 }
 
+const updateUserIsPublicEmail = async (
+  currentUserId: string,
+  newEmail: string,
+) => {
+  const isPublicEmail = await isPublicEmailDomain(newEmail);
+  await prisma.user.update({
+    where: { id: currentUserId },
+    data: { isPublicEmail },
+  });
+};
+
 const VerifyEmailChange = async ({ params: { token } }: PageProps) => {
   const tokenFound = await prisma.verificationToken.findUnique({
     where: {
@@ -104,7 +118,7 @@ const VerifyEmailChange = async ({ params: { token } }: PageProps) => {
       deleteRequest(tokenFound),
 
       subscribe(data.newEmail),
-
+      updateUserIsPublicEmail(currentUserId, data.newEmail),
       sendEmail({
         to: data.email,
         subject: "Your email address has been changed",

components/sidebar/app-sidebar.tsx

@@ -20,6 +20,10 @@ import {
   ServerIcon,
 } from "lucide-react";
 
+import { usePlan } from "@/lib/swr/use-billing";
+import useLimits from "@/lib/swr/use-limits";
+import { nFormatter } from "@/lib/utils";
+
 import { NavMain } from "@/components/sidebar/nav-main";
 import { NavUser } from "@/components/sidebar/nav-user";
 import { TeamSwitcher } from "@/components/sidebar/team-switcher";
@@ -32,13 +36,10 @@ import {
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
 
-import { usePlan } from "@/lib/swr/use-billing";
-import useLimits from "@/lib/swr/use-limits";
-import { nFormatter } from "@/lib/utils";
-
 import ProAnnualBanner from "../billing/pro-annual-banner";
 import ProBanner from "../billing/pro-banner";
 import { Progress } from "../ui/progress";
+import { OrgMembers } from "./org-members";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const router = useRouter();
@@ -218,7 +219,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 />
               ) : null}
 
-              <div className="mb-2">
+              <div>
                 {linksLimit ? (
                   <UsageProgress
                     title="Links"
@@ -240,6 +241,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                     Change plan to increase usage limits
                   </p>
                 ) : null}
+
+                <OrgMembers teamId={currentTeam?.id ?? ""} />
               </div>
             </div>
           </SidebarMenuItem>
@@ -276,4 +279,4 @@ function UsageProgress(data: {
       </div>
     </div>
   );
-}
+}

components/sidebar/org-members.tsx

@@ -0,0 +1,70 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { useSession } from "next-auth/react";
+
+import { usePlan } from "@/lib/swr/use-billing";
+import { useOrgMembers } from "@/lib/swr/use-org-members";
+import { getEmailDomain } from "@/lib/utils/email-domain";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+import { Button } from "../ui/button";
+import { BadgeTooltip } from "../ui/tooltip";
+
+export function OrgMembers({ teamId }: { teamId: string }) {
+  const { members } = useOrgMembers(teamId);
+  const { data: session } = useSession();
+  const { isFree } = usePlan();
+
+  if (!members?.length || !session?.user?.email) return null;
+
+  const domain = getEmailDomain(session.user.email);
+  const zIndex = ["z-30", "z-20", "z-10"];
+  return (
+    <Button
+      variant="ghost"
+      type="button"
+      size="sm"
+      className="mt-1 h-auto w-full justify-start p-2"
+    >
+      <Link href="/settings/people" className="block">
+        <div className="flex items-center gap-2">
+          <div className="flex -space-x-4">
+            {isFree
+              ? members.slice(0, 3).map((member, index) => (
+                  <Avatar
+                    key={member.id}
+                    className={`h-6 w-6 border-2 border-background ${zIndex[index]}`}
+                  >
+                    <AvatarFallback className="text-xs text-secondary-foreground">
+                      ?
+                    </AvatarFallback>
+                  </Avatar>
+                ))
+              : members.slice(0, 3).map((member, index) => (
+                  <BadgeTooltip content={member.email} key={member.id}>
+                    <Avatar
+                      key={member.id}
+                      className={`z- h-6 w-6 border-2 border-background transition-all duration-300 hover:scale-110 ${zIndex[index]} hover:z-40`}
+                    >
+                      <AvatarImage
+                        src={member.image || ""}
+                        alt={member.name || ""}
+                      />
+                      <AvatarFallback className="text-xs capitalize">
+                        {member.name?.charAt(0) || member.email?.charAt(0)}
+                      </AvatarFallback>
+                    </Avatar>
+                  </BadgeTooltip>
+                ))}
+          </div>
+          <p className="text-left text-xs text-muted-foreground">
+            {members.length} {members.length === 1 ? "person" : "people"} from{" "}
+            {domain} {members.length === 1 ? "is" : "are"} on Papermark
+          </p>
+        </div>
+      </Link>
+    </Button>
+  );
+}