1 files changed, 48 insertions, 0 deletions
diff --git a/src/app/(main)/teams/TeamLeaveForm.tsx b/src/app/(main)/teams/TeamLeaveForm.tsx
new file mode 100644
index 0000000..b3dcaf5
--- /dev/null
+++ b/src/app/(main)/teams/TeamLeaveForm.tsx
@@ -0,0 +1,48 @@
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { useDeleteQuery, useMessages, useModified } from '@/components/hooks';
+
+export function TeamLeaveForm({
+  teamId,
+  userId,
+  teamName,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  userId: string;
+  teamName: string;
+  onSave: () => void;
+  onClose: () => void;
+}) {
+  const { formatMessage, labels, messages, getErrorMessage, FormattedMessage } = useMessages();
+  const { mutateAsync, error, isPending } = useDeleteQuery(`/teams/${teamId}/users/${userId}`);
+  const { touch } = useModified();
+
+  const handleConfirm = async () => {
+    await mutateAsync(null, {
+      onSuccess: async () => {
+        touch('teams:members');
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <ConfirmationForm
+      buttonLabel={formatMessage(labels.leave)}
+      message={
+        <FormattedMessage
+          {...messages.confirmLeave}
+          values={{
+            target: <b>{teamName}</b>,
+          }}
+        />
+      }
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={getErrorMessage(error)}
+    />
+  );
+}