Fix some type errors

apps/web/public/static/locales/en/common.json

@@ -1341,5 +1341,7 @@
   "yearly": "Yearly",
   "checkout": "Checkout",
   "your_team_disbanded_successfully": "Your team has been disbanded successfully",
-  "error_creating_team": "Error creating team"
+  "error_creating_team": "Error creating team",
+  "you": "You",
+  "send_email": "Send email"
 }

packages/features/ee/teams/components/MemberInvitationModal.tsx

@@ -14,7 +14,6 @@ import { NewTeamFormValues, PendingMember } from "../lib/types";
 
 type MemberInvitationModalProps = {
   isOpen: boolean;
-  currentMember?: MembershipRole;
   onExit: () => void;
   onSubmit: (values: NewMemberForm) => void;
 };
@@ -31,55 +30,17 @@ export interface NewMemberForm {
 }
 
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
-  const [errorMessage, setErrorMessage] = useState("");
-  const { t, i18n } = useLocale();
-  const utils = trpc.useContext();
+  const { t } = useLocale();
 
-  const _options: MembershipRoleOption[] = [
-    { value: "MEMBER", label: t("member") },
-    { value: "ADMIN", label: t("admin") },
-    { value: "OWNER", label: t("owner") },
-  ];
-
-  const newMemberFormMethods = useForm<NewMemberForm>();
-
-  const options = useMemo(() => {
-    _options.forEach((option, i) => {
-      _options[i].label = t(option.value.toLowerCase());
-    });
-    return _options;
+  const options: MembershipRoleOption[] = useMemo(() => {
+    return [
+      { value: "MEMBER", label: t("member") },
+      { value: "ADMIN", label: t("admin") },
+      { value: "OWNER", label: t("owner") },
+    ];
   }, [t]);
 
-  const inviteMemberMutation = trpc.useMutation("viewer.teams.inviteMember", {
-    async onSuccess() {
-      await utils.invalidateQueries(["viewer.teams.get"]);
-      props.onExit();
-    },
-    async onError(err) {
-      setErrorMessage(err.message);
-    },
-  });
-
-  function inviteMember(e: SyntheticEvent) {
-    e.preventDefault();
-    if (!props.team) return;
-
-    const target = e.target as typeof e.target & {
-      elements: {
-        role: { value: MembershipRole };
-        inviteUser: { value: string };
-        sendInviteEmail: { checked: boolean };
-      };
-    };
-
-    inviteMemberMutation.mutate({
-      teamId: props.team.id,
-      language: i18n.language,
-      role: target.elements["role"].value,
-      usernameOrEmail: target.elements["inviteUser"].value,
-      sendEmailInvitation: target.elements["sendInviteEmail"].checked,
-    });
-  }
+  const newMemberFormMethods = useForm<NewMemberForm>();
 
   return (
     <Dialog open={props.isOpen} onOpenChange={props.onExit}>
@@ -93,11 +54,12 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             your subscription once this member accepts your invite.
           </span>
         }>
-        <form>
+        <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values)}>
           <div className="space-y-4">
             <Controller
               name="emailOrUsername"
               control={newMemberFormMethods.control}
+              rules={{ required: true, minLength: 1 }}
               render={({ field: { onChange } }) => (
                 <TextField
                   label={t("email_or_username")}
@@ -112,6 +74,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             <Controller
               name="role"
               control={newMemberFormMethods.control}
+              defaultValue={options[0]}
               render={({ field: { onChange } }) => (
                 <div>
                   <label
@@ -121,7 +84,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                   </label>
                   <Select
                     defaultValue={options[0]}
-                    options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
+                    options={options.slice(0, 2)}
                     id="role"
                     name="role"
                     className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
@@ -133,6 +96,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             <Controller
               name="sendInviteEmail"
               control={newMemberFormMethods.control}
+              defaultValue={false}
               render={() => (
                 <div className="relative flex items-start">
                   <CheckboxField
@@ -143,25 +107,20 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               )}
             />
           </div>
-          {errorMessage && (
-            <p className="text-sm text-red-700">
-              <span className="font-bold">Error: </span>
-              {errorMessage}
-            </p>
-          )}
           <DialogFooter>
             <Button type="button" color="secondary" onClick={props.onExit}>
               {t("cancel")}
             </Button>
             <Button
-              onClick={() => props.onSubmit(newMemberFormMethods.getValues())}
+              // onClick={() => props.onSubmit(newMemberFormMethods.getValues())}
+              type="submit"
               color="primary"
               className="ltr:ml-2 rtl:mr-2"
               data-testid="invite-new-member-button">
               {t("invite")}
             </Button>
           </DialogFooter>
-        </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx

@@ -39,6 +39,7 @@ const AddNewTeamMembers = () => {
     enabled: false,
     onSuccess: (newMember: PendingMember) => {
       membersFieldArray.append(newMember);
+      setSkeletonMember(false);
     },
   });
 
@@ -72,6 +73,11 @@ const AddNewTeamMembers = () => {
     setSkeletonMember(true);
   };
 
+  const handleDeleteMember = (email: string) => {
+    const memberIndex = formMethods.getValues("members").findIndex((member) => member.email === email);
+    membersFieldArray.remove(memberIndex);
+  };
+
   // if (isLoading) return <AddNewTeamMemberSkeleton />;
 
   return (
@@ -107,12 +113,13 @@ const AddNewTeamMembers = () => {
                       />
                       <div>
                         <div className="flex space-x-1">
-                          <p>{member?.name || t("team_member")}</p>
+                          <p>{member?.name || member?.email || t("team_member")}</p>
                           {/* Assume that the first member of the team is the creator */}
-                          {index === 0 && <Badge variant="green">{t("you")}</Badge>}{" "}
+                          {index === 0 && <Badge variant="green">{t("you")}</Badge>}
                           {member.role !== "OWNER" && <Badge variant="orange">{t("pending")}</Badge>}
                           {member.role === "MEMBER" && <Badge variant="gray">{t("member")}</Badge>}
                           {member.role === "ADMIN" && <Badge variant="default">{t("admin")}</Badge>}
+                          {member.sendInviteEmail && <Badge variant="blue">{t("send_email")}</Badge>}
                         </div>
                         {member.username ? (
                           <p className="text-gray-600">{`${WEBAPP_URL}/${member?.username}`}</p>
@@ -127,7 +134,7 @@ const AddNewTeamMembers = () => {
                         size="icon"
                         color="secondary"
                         className="h-[36px] w-[36px]"
-                        onClick={() => removeMemberMutation.mutate({ teamId, memberId: member.id })}
+                        onClick={() => handleDeleteMember(member.email)}
                       />
                     )}
                   </li>

packages/features/ee/teams/lib/types.ts

@@ -1,13 +1,13 @@
-export interface NewTeamFormValues {
+export interface NewTeamMembersFieldArray {
+  members: PendingMember[];
+}
+
+export interface NewTeamFormValues extends NewTeamMembersFieldArray {
   name: string;
   slug: string;
   avatar: string;
 }
 
-export interface NewTeamMembersFieldArray {
-  members: PendingMember[];
-}
-
 export interface PendingMember {
   name: string | null;
   email: string;