aau-auth-kit-ui/dist/invite-member-dialog-CIZ5N2RE.js

Plug & play shadcn/ui components for aau-auth-kit with Next.js integration

"use client";
import {
  AuthUIContext,
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "./chunk-HRQRKYY3.js";

// src/components/organization/invitation/invite-member-dialog.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { useContext } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { jsx, jsxs } from "react/jsx-runtime";
var inviteFormSchema = z.object({
  email: z.string().email({ message: "Please enter a valid email address" }),
  role: z.string().min(1, { message: "Role is required" })
});
function InviteMemberDialog({
  open,
  onOpenChange,
  roles
}) {
  const { authClient, toast } = useContext(AuthUIContext);
  const { data: org } = authClient.useActiveOrganization();
  const form = useForm({
    resolver: zodResolver(inviteFormSchema),
    defaultValues: {
      email: "",
      role: ""
    }
  });
  const onSubmit = async (data) => {
    await authClient?.organization?.inviteMember(
      {
        email: data?.email,
        role: data?.role
      },
      {
        onSuccess(context) {
          toast({
            message: `${data?.email} has been invited to ${org?.name}`
          });
          form.reset();
          onOpenChange();
        },
        onError(context) {
          toast({
            message: context.error.message,
            variant: "error"
          });
        }
      }
    );
  };
  const isSubmitting = form.formState.isSubmitting;
  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
    /* @__PURE__ */ jsxs(DialogHeader, { children: [
      /* @__PURE__ */ jsx(DialogTitle, { children: "Invite Member" }),
      /* @__PURE__ */ jsx(DialogDescription, { children: "Invite a new member to your organization. They will receive an email with instructions to join." })
    ] }),
    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [
      /* @__PURE__ */ jsx(
        FormField,
        {
          control: form.control,
          name: "email",
          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
            /* @__PURE__ */ jsx(FormLabel, { children: "Email" }),
            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
              Input,
              {
                placeholder: "member@example.com",
                ...field,
                disabled: isSubmitting
              }
            ) }),
            /* @__PURE__ */ jsx(FormMessage, {})
          ] })
        }
      ),
      /* @__PURE__ */ jsx(
        FormField,
        {
          control: form.control,
          name: "role",
          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
            /* @__PURE__ */ jsx(FormLabel, { children: "Role" }),
            /* @__PURE__ */ jsxs(
              Select,
              {
                onValueChange: field.onChange,
                value: field.value,
                defaultValue: field.value,
                disabled: isSubmitting,
                children: [
                  /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a role" }) }) }),
                  /* @__PURE__ */ jsx(SelectContent, { children: roles?.map((role) => {
                    return /* @__PURE__ */ jsx(SelectItem, { value: role?.key, children: role?.value }, role.key);
                  }) })
                ]
              }
            ),
            /* @__PURE__ */ jsx(FormMessage, {})
          ] })
        }
      ),
      /* @__PURE__ */ jsxs(DialogFooter, { children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            type: "button",
            variant: "outline",
            onClick: () => onOpenChange(),
            disabled: isSubmitting,
            children: "Cancel"
          }
        ),
        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Inviting..." : "Invite Member" })
      ] })
    ] }) })
  ] }) });
}
var invite_member_dialog_default = InviteMemberDialog;
export {
  invite_member_dialog_default as default
};