Dashboard: Fix team invite UI not showing feedback on submit (#6866)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the `InviteSection` component by modifying the form handling logic and enhancing the user interface with additional functionality.

### Detailed summary
- Removed the `useEffect` hook that reset the mutation result on form updates.
- Changed the form's `onChange` to reset the mutation result if `sendInvites.data` exists.
- Updated the button layout to include a `Reset` button for clearing the form and resetting invites.
- Adjusted class names for better spacing and alignment.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -24,7 +24,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import { ExternalLinkIcon, PlusIcon, Trash2Icon, UserPlus } from "lucide-react";
 import Link from "next/link";
-import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -216,19 +215,17 @@ export function InviteSection(props: {
     });
   }
 
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    // when form updates - reset mutation result
-    const subscription = form.watch(() => {
-      sendInvites.reset();
-    });
-
-    return () => subscription.unsubscribe();
-  }, [form.watch, sendInvites.reset]);
-
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        onChange={() => {
+          // when form updates - reset mutation result
+          if (sendInvites.data) {
+            sendInvites.reset();
+          }
+        }}
+      >
         <section>
           <div
             className={cn(
@@ -338,26 +335,42 @@ export function InviteSection(props: {
                 ))}
               </div>
 
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="mt-4 gap-2"
-                disabled={
-                  !inviteEnabled ||
-                  form.watch("invites").length >= maxAllowedInvitesAtOnce
-                }
-                onClick={() => {
-                  const currentInvites = form.watch("invites");
-                  form.setValue("invites", [
-                    ...currentInvites,
-                    { email: "", role: "MEMBER" },
-                  ]);
-                }}
-              >
-                <PlusIcon className="size-4" />
-                Add Another
-              </Button>
+              <div className="mt-6 flex gap-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="gap-2"
+                  disabled={
+                    !inviteEnabled ||
+                    form.watch("invites").length >= maxAllowedInvitesAtOnce
+                  }
+                  onClick={() => {
+                    const currentInvites = form.watch("invites");
+                    form.setValue("invites", [
+                      ...currentInvites,
+                      { email: "", role: "MEMBER" },
+                    ]);
+                  }}
+                >
+                  <PlusIcon className="size-4" />
+                  Add Another
+                </Button>
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={!form.formState.isDirty}
+                  className="gap-2"
+                  onClick={() => {
+                    form.reset();
+                    sendInvites.reset();
+                  }}
+                >
+                  Reset
+                </Button>
+              </div>
             </div>
             {bottomSection}
           </div>