Merge branch 'main' into fix-stripe-ux

Author: G3root

src/app/(authenticated)/(dashboard)/[publicId]/settings/team/add-team-member-dropdown-menu.tsx

@@ -32,8 +32,9 @@ export const AddTeamMemberDropdownMenu = () => {
                   subtitle: "Invite a team member to your company.",
                   member: {
                     name: "",
-                    email: "",
+                    loginEmail: "",
                     title: "",
+                    workEmail: "",
                   },
                 });
               }}

src/components/member/member-modal.tsx

@@ -29,12 +29,12 @@ import {
 
 import { api } from "@/trpc/react";
 
-import MemberModal from "@/components/member/member-modal";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import type { RouterOutputs } from "@/trpc/shared";
 import { RiMore2Fill } from "@remixicon/react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import { pushModal } from "../modals";
 import { DataTable } from "../ui/data-table/data-table";
 import { DataTableBody } from "../ui/data-table/data-table-body";
 import { SortButton } from "../ui/data-table/data-table-buttons";
@@ -171,7 +171,7 @@ export const columns: ColumnDef<Member[number]>[] = [
 
       const status = member.status;
       const memberId = member.id;
-      const email = member.user?.email;
+      const email = member?.user?.email;
 
       const isActive = status === "ACTIVE";
       const isPending = status === "PENDING";
@@ -226,21 +226,24 @@ export const columns: ColumnDef<Member[number]>[] = [
             )}
 
             {status === "ACTIVE" && (
-              <MemberModal
-                isEditMode
-                memberId={member.id}
-                title="Update team member"
-                subtitle="Update team member's account information."
-                member={{
-                  name: member.user?.name ?? "",
-                  email: email ?? "",
-                  title: member.title ?? "",
+              <DropdownMenuItem
+                onClick={() => {
+                  pushModal("TeamMemberModal", {
+                    isEditMode: true,
+                    memberId,
+                    title: "Update team member",
+                    subtitle: "Update team member's account information.",
+                    member: {
+                      name: member.user.name ?? "",
+                      loginEmail: "",
+                      title: member.title ?? "",
+                      workEmail: member.workEmail ?? "",
+                    },
+                  });
                 }}
               >
-                <span className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
-                  Update member
-                </span>
-              </MemberModal>
+                Update member
+              </DropdownMenuItem>
             )}
 
             <DropdownMenuSeparator />

src/components/member/member-table.tsx

@@ -16,20 +16,25 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/trpc/react";
 import { toast } from "sonner";
 
-import {
-  type TypeZodInviteMemberMutationSchema,
-  ZodInviteMemberMutationSchema,
-} from "@/trpc/routers/member-router/schema";
-
 import { popModal } from "@/components/modals";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const ZodTeamMemberSchema = z.object({
+  name: z.string(),
+  loginEmail: z.string(),
+  workEmail: z.string(),
+  title: z.string(),
+});
+
+type TypeZodTeamMemberSchema = z.infer<typeof ZodTeamMemberSchema>;
 
 type MemberModalType = {
   title: string;
   subtitle: string;
-  member: TypeZodInviteMemberMutationSchema;
+  member: TypeZodTeamMemberSchema;
 } & editModeType;
 
 type editModeType =
@@ -42,11 +47,12 @@ export const TeamMemberModal = ({
   member,
   ...rest
 }: MemberModalType) => {
+  console.log({ rest });
   const router = useRouter();
   const inviteMember = api.member.inviteMember.useMutation({
     onSuccess: () => {
       popModal("TeamMemberModal");
-      toast.success("You have successfully invited the stakeholder.");
+      toast.success("You have successfully invited the member.");
       router.refresh();
     },
     onError: (error) => {
@@ -57,34 +63,43 @@ export const TeamMemberModal = ({
   const updateMember = api.member.updateMember.useMutation({
     onSuccess: () => {
       popModal("TeamMemberModal");
-      toast.success("You have successfully updated the stakeholder.");
+      toast.success("You have successfully updated the member.");
       router.refresh();
     },
     onError: (error) => {
       toast.error(error.message);
     },
   });
 
-  const form = useForm<TypeZodInviteMemberMutationSchema>({
-    resolver: zodResolver(ZodInviteMemberMutationSchema),
+  const form = useForm<TypeZodTeamMemberSchema>({
+    resolver: zodResolver(ZodTeamMemberSchema),
     defaultValues: {
       name: member.name ?? "",
-      email: member.email ?? "",
+      loginEmail: member.loginEmail ?? "",
+      workEmail: member.workEmail ?? "",
       title: member.title ?? "",
     },
   });
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const onSubmit = async (values: TypeZodInviteMemberMutationSchema) => {
+  const onSubmit = async (values: TypeZodTeamMemberSchema) => {
+    console.log({ values });
+    const { name, title, workEmail, loginEmail } = values;
     try {
       if (rest.isEditMode) {
         await updateMember.mutateAsync({
-          ...values,
+          name,
+          title,
+          workEmail,
           memberId: rest.memberId,
         });
       } else {
-        await inviteMember.mutateAsync(values);
+        await inviteMember.mutateAsync({
+          name,
+          title,
+          email: loginEmail,
+        });
       }
       // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
     } catch (error) {}
@@ -113,13 +128,15 @@ export const TeamMemberModal = ({
 
           <FormField
             control={form.control}
-            name="email"
+            name={rest.isEditMode ? "workEmail" : "loginEmail"}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Work email</FormLabel>
+                <FormLabel>
+                  {rest.isEditMode ? "Work email" : "Login email"}
+                </FormLabel>
                 <FormControl>
                   <Input
-                    disabled={isSubmitting || rest.isEditMode === true}
+                    disabled={isSubmitting || rest.isEditMode}
                     type="email"
                     {...field}
                   />

src/components/modals/team-member/team-member-modal.tsx

@@ -15,11 +15,8 @@ export const sendAuthVerificationEmail = async (
 ) => {
   const { email, token } = payload;
   const baseUrl = env.NEXT_PUBLIC_BASE_URL;
-
   const confirmLink = `${baseUrl}/verify-email/${token}`;
 
-  console.log("Sending email to ", email, "with link ", confirmLink);
-
   const html = await render(
     AccountVerificationEmail({
       verifyLink: confirmLink,