@greatapps/common 1.1.789 → 1.1.791

package/dist/components/account/sections/team/UserSheet.mjs

@@ -0,0 +1,570 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { IconBell, IconCheck, IconMail, IconStack2, IconUser, IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "../../../ui/buttons/Button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/data-display/Tabs";
+import { Toast } from "../../../ui/feedback/Toast";
+import { Dialog, DialogContent } from "../../../ui/overlay/Dialog";
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "../../../ui/overlay/Sheet";
+import { ImageCropModal } from "../../../widgets/ImageUpload/ImageCropModal";
+import { ACCEPTED_IMAGE_FORMATS_STRING } from "../../../../modules/images/constants/image.constants";
+import { useImageUpload } from "../../../../modules/images/hooks/use-image-upload.hook";
+import { useCreateAccountUser } from "../../../../modules/accounts/hooks/create-account-user.hook";
+import { useUpdateAccountUserById } from "../../../../modules/accounts/hooks/useAccountManagement";
+import { useAddUserProjects } from "../../../../modules/accounts/hooks/add-user-projects.hook";
+import { useRemoveUserProjects } from "../../../../modules/accounts/hooks/remove-user-projects.hook";
+import { useProjects } from "../../../../modules/projects/hooks/list-projects.hook";
+import { useInvalidateUser } from "../../../../modules/auth/hooks/useUserQuery";
+import { UserProfile } from "../../../../modules/users/schema";
+import { useAuth } from "../../../../providers/auth.provider";
+import { useIsDefaultWhitelabel } from "../../../../providers/whitelabel.provider";
+import { base64ToFile } from "../../../../modules/images/utils/base64";
+import useIsMobile from "../../../../hooks/useIsMobile";
+import { cn } from "../../../../infra/utils/clsx";
+import { useTeamFlows } from "../../../../store/useTeamFlows";
+import { ChangeEmailModal } from "../ChangeEmailModal";
+import { ChangePhoneModal } from "../ChangePhoneModal";
+import { ChangePasswordSection } from "../ChangePasswordSection";
+import TwoFactorAuthModal from "../../TwoFactorAuthModal";
+import DisableTwoFactorAuthModal from "../../DisableTwoFactorAuthModal";
+import { NotificationsStep } from "./steps/NotificationsStep";
+import { ProjectSelectionStep } from "./steps/ProjectSelectionStep";
+import { UserInformationStep } from "./steps/UserInformationStep";
+import { buildUserFormDefaults, buildUserFormSchema } from "./user-form.schema";
+const USER_AVATAR_CONFIG = { width: 200, height: 200, aspectRatio: 1 };
+const STORAGE_URL = process.env.NEXT_PUBLIC_STORAGE_URL || "";
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const tabTriggerClasses = "flex items-center gap-2 px-2 py-2 rounded-none border-b-2 border-transparent data-[state=active]:border-zinc-950 data-[state=active]:bg-transparent data-[state=active]:shadow-none bg-transparent";
+function UserSheetContent({ open, mode, initialData, onClose }) {
+  const translate = useTranslations();
+  const translateSheet = useTranslations("common.account.workspace.team.sheet");
+  const isMobile = useIsMobile();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const isEditMode = mode === "edit";
+  const [currentStep, setCurrentStep] = useState(1);
+  const [photoRemoved, setPhotoRemoved] = useState(false);
+  const [emailExistsError, setEmailExistsError] = useState(null);
+  const [isCheckingEmail, setIsCheckingEmail] = useState(false);
+  const [showChangePhone, setShowChangePhone] = useState(false);
+  const [showChangeEmail, setShowChangeEmail] = useState(false);
+  const [showTwoFactor, setShowTwoFactor] = useState(false);
+  const [showDisableTwoFactor, setShowDisableTwoFactor] = useState(false);
+  const [showChangePassword, setShowChangePassword] = useState(false);
+  const selectAnotherInputRef = useRef(null);
+  const { user: currentUser } = useAuth();
+  const invalidateUser = useInvalidateUser();
+  const isOwnProfile = isEditMode && currentUser?.id === initialData?.id;
+  const currentProfile = currentUser?.profile;
+  const targetProfile = initialData?.profile;
+  const canManageUsers = currentProfile === UserProfile.owner || currentProfile === UserProfile.admin;
+  const canEditUser = isEditMode ? isOwnProfile ? true : currentProfile === UserProfile.owner ? true : currentProfile === UserProfile.admin ? targetProfile !== UserProfile.owner : false : canManageUsers;
+  const canChangeProfile = isEditMode ? initialData?.profile === UserProfile.owner ? false : canManageUsers : canManageUsers;
+  const userFormSchema = useMemo(
+    () => buildUserFormSchema({
+      required: translate("common.validations.required"),
+      invalidEmail: translate("common.validations.invalidEmail")
+    }),
+    [translate]
+  );
+  const form = useForm({
+    mode: "onTouched",
+    resolver: zodResolver(userFormSchema),
+    defaultValues: buildUserFormDefaults(initialData)
+  });
+  const { originalImage, showCropModal, setShowCropModal, fileName, handleFileSelect, handleCropConfirm } = useImageUpload({
+    config: USER_AVATAR_CONFIG,
+    onSuccess: (base64) => {
+      form.setValue("photo", base64ToFile(base64, "avatar.webp"), { shouldDirty: true });
+      setPhotoRemoved(false);
+    },
+    onError: (error) => {
+      toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { toastId, variant: "error", message: error }), {
+        duration: 5e3
+      });
+    }
+  });
+  const twoFactorSource = isOwnProfile ? currentUser?.two_factor_authentication ?? false : initialData?.two_factor_authentication ?? false;
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(twoFactorSource);
+  useEffect(() => setTwoFactorEnabled(twoFactorSource), [twoFactorSource]);
+  const createAccountUser = useCreateAccountUser();
+  const updateAccountUser = useUpdateAccountUserById();
+  const addUserProjects = useAddUserProjects();
+  const removeUserProjects = useRemoveUserProjects();
+  const { data: projectsData } = useProjects({ limit: 5e3 });
+  const allProjectIds = useMemo(() => projectsData?.data?.map((project) => project.id) || [], [projectsData]);
+  const initialProfile = initialData?.profile || UserProfile.admin;
+  const hasFullAccessOnOpen = initialProfile === UserProfile.admin || initialProfile === UserProfile.owner;
+  useEffect(() => {
+    form.reset({ ...buildUserFormDefaults(initialData), profile: initialProfile });
+    setPhotoRemoved(false);
+    setCurrentStep(1);
+    setEmailExistsError(null);
+    setIsCheckingEmail(false);
+  }, []);
+  useEffect(() => {
+    if (!hasFullAccessOnOpen || allProjectIds.length === 0) return;
+    if (form.getFieldState("selectedProjects").isDirty) return;
+    form.setValue(
+      "selectedProjects",
+      Object.fromEntries(allProjectIds.map((id) => [id.toString(), true])),
+      { shouldDirty: true }
+    );
+  }, [allProjectIds, hasFullAccessOnOpen, form]);
+  const photo = useWatch({ control: form.control, name: "photo" });
+  const selectedProjects = useWatch({ control: form.control, name: "selectedProjects" });
+  const profile = useWatch({ control: form.control, name: "profile" });
+  const nameValue = useWatch({ control: form.control, name: "name" });
+  const emailValue = useWatch({ control: form.control, name: "email" });
+  const isAdmin = profile === UserProfile.admin;
+  const canContinue = !!nameValue?.trim() && EMAIL_REGEX.test(emailValue || "") && !isCheckingEmail && !emailExistsError;
+  const photoPreview = useMemo(() => {
+    if (photo instanceof File) return URL.createObjectURL(photo);
+    if (!photo && !photoRemoved && initialData?.photo) return `${STORAGE_URL}/${initialData.photo}`;
+    return null;
+  }, [photo, photoRemoved, initialData?.photo]);
+  const selectedCount = useMemo(() => {
+    if (isAdmin) return allProjectIds.length;
+    return Object.values(selectedProjects).filter(Boolean).length;
+  }, [selectedProjects, isAdmin, allProjectIds]);
+  const getProjectsForSubmit = useCallback(
+    (formData) => {
+      if (formData.profile === UserProfile.admin || formData.profile === UserProfile.owner) {
+        return allProjectIds;
+      }
+      return Object.keys(formData.selectedProjects).filter((key) => formData.selectedProjects[key]).map(Number);
+    },
+    [allProjectIds]
+  );
+  const handleClose = useCallback(() => {
+    form.reset(buildUserFormDefaults(initialData));
+    setCurrentStep(1);
+    setPhotoRemoved(false);
+    setEmailExistsError(null);
+    setIsCheckingEmail(false);
+    onClose();
+  }, [form, initialData, onClose]);
+  const handleProfileChange = useCallback(
+    (newProfile) => {
+      const hasFullAccess = newProfile === UserProfile.admin || newProfile === UserProfile.owner;
+      form.setValue(
+        "selectedProjects",
+        hasFullAccess ? Object.fromEntries(allProjectIds.map((id) => [id.toString(), true])) : Object.fromEntries(initialData?.projects?.map((project) => [project.id.toString(), true]) || []),
+        { shouldDirty: true }
+      );
+    },
+    [form, allProjectIds, initialData]
+  );
+  const handlePhotoChange = useCallback(
+    (event) => {
+      const file = event.target.files?.[0];
+      if (file) handleFileSelect(file);
+      event.target.value = "";
+    },
+    [handleFileSelect]
+  );
+  const handleRemovePhoto = useCallback(() => {
+    form.setValue("photo", null, { shouldDirty: true });
+    setPhotoRemoved(true);
+  }, [form]);
+  const handleAddUser = useCallback(
+    async (formData) => {
+      const userEmail = formData.email;
+      try {
+        await createAccountUser.mutateAsync({
+          name: formData.name,
+          email: formData.email,
+          profile: formData.profile,
+          language: "pt-br",
+          last_name: formData.lastName || "",
+          ddi: "55",
+          gender: formData.gender,
+          phone: formData.phone,
+          photo: formData.photo,
+          projects: getProjectsForSubmit(formData),
+          receive_sms: formData.receiveSms,
+          receive_email: formData.receiveEmail
+        });
+      } catch (error) {
+        toast.custom(
+          (toastId) => /* @__PURE__ */ jsx(
+            Toast,
+            {
+              toastId,
+              variant: "error",
+              message: error instanceof Error ? error.message : translateSheet("createError")
+            }
+          ),
+          { duration: 5e3 }
+        );
+        return;
+      }
+      handleClose();
+      toast.custom(
+        (toastId) => /* @__PURE__ */ jsx(Toast, { toastId, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "size-10 rounded-lg flex items-center justify-center shrink-0",
+                isDefaultWhitelabel ? "bg-cyan-50" : "bg-zinc-50"
+              ),
+              children: /* @__PURE__ */ jsx(IconMail, { size: 20, className: isDefaultWhitelabel ? "text-cyan-500" : "text-zinc-500" })
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "flex-1 text-zinc-600 paragraph-small-medium", children: translateSheet("inviteSent", { userEmail }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              className: "size-8 rounded-full shrink-0",
+              onClick: () => toast.dismiss(toastId),
+              children: /* @__PURE__ */ jsx(IconX, { size: 18 })
+            }
+          )
+        ] }) }),
+        { duration: 5e3 }
+      );
+    },
+    [createAccountUser, getProjectsForSubmit, handleClose, isDefaultWhitelabel, translateSheet]
+  );
+  const handleSaveChanges = useCallback(
+    async (formData) => {
+      const userName = formData.name;
+      const dirtyFields = form.formState.dirtyFields;
+      const userFieldsChanged = !!dirtyFields.name || !!dirtyFields.lastName || !!dirtyFields.email || !!dirtyFields.phone || !!dirtyFields.profile || !!dirtyFields.photo || !!dirtyFields.gender || !!dirtyFields.receiveSms || !!dirtyFields.receiveEmail || formData.photo instanceof File;
+      let updateError = null;
+      if (userFieldsChanged) {
+        try {
+          await updateAccountUser.mutateAsync({
+            userId: initialData.id,
+            name: formData.name,
+            email: formData.email,
+            profile: formData.profile,
+            language: "pt-br",
+            last_name: formData.lastName || "",
+            ddi: "55",
+            gender: formData.gender,
+            phone: formData.phone,
+            ...formData.photo instanceof File ? { photo: formData.photo } : {},
+            receive_sms: formData.receiveSms,
+            receive_email: formData.receiveEmail
+          });
+        } catch (error) {
+          updateError = error;
+        }
+      }
+      const targetProjectIds = new Set(getProjectsForSubmit(formData));
+      const initialProjectIds = new Set(initialData?.projects?.map((project) => project.id) || []);
+      const allProjects = projectsData?.data || [];
+      const projectsToAdd = [...targetProjectIds].filter((id) => !initialProjectIds.has(id));
+      const projectsToRemove = [...initialProjectIds].filter((id) => !targetProjectIds.has(id));
+      let projectsError = null;
+      try {
+        await Promise.all([
+          addUserProjects.mutateAsync({
+            userId: initialData.id,
+            projects: projectsToAdd.map((id) => ({
+              id,
+              title: allProjects.find((project) => project.id === id)?.title || ""
+            }))
+          }),
+          removeUserProjects.mutateAsync({ userId: initialData.id, projectIds: projectsToRemove })
+        ]);
+      } catch (error) {
+        projectsError = error;
+      }
+      const firstError = updateError ?? projectsError;
+      if (firstError) {
+        toast.custom(
+          (toastId) => /* @__PURE__ */ jsx(
+            Toast,
+            {
+              toastId,
+              variant: "error",
+              message: firstError instanceof Error ? firstError.message : translateSheet("updateError")
+            }
+          ),
+          { duration: 5e3 }
+        );
+        return;
+      }
+      handleClose();
+      toast.custom(
+        (toastId) => /* @__PURE__ */ jsx(Toast, { toastId, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg flex items-center justify-center shrink-0 bg-green-50", children: /* @__PURE__ */ jsx(IconCheck, { size: 20, className: "text-green-500" }) }),
+          /* @__PURE__ */ jsx("p", { className: "flex-1 text-zinc-600 paragraph-small-medium", children: translateSheet("changesSaved", { userName }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              className: "size-8 rounded-full shrink-0",
+              onClick: () => toast.dismiss(toastId),
+              children: /* @__PURE__ */ jsx(IconX, { size: 18 })
+            }
+          )
+        ] }) }),
+        { duration: 5e3 }
+      );
+    },
+    [
+      addUserProjects,
+      form,
+      getProjectsForSubmit,
+      handleClose,
+      initialData,
+      projectsData,
+      removeUserProjects,
+      translateSheet,
+      updateAccountUser
+    ]
+  );
+  const onSubmit = useCallback(
+    async (data) => {
+      if (isEditMode) {
+        await handleSaveChanges(data);
+      } else if (currentStep === 1) {
+        if (isCheckingEmail || emailExistsError) return;
+        setCurrentStep(2);
+      } else {
+        await handleAddUser(data);
+      }
+    },
+    [currentStep, emailExistsError, handleAddUser, handleSaveChanges, isCheckingEmail, isEditMode]
+  );
+  const isSubmitting = form.formState.isSubmitting;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(
+      SheetContent,
+      {
+        side: isMobile ? "bottom" : "right",
+        className: cn(
+          "gap-0 overflow-hidden",
+          isMobile ? "h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]" : "h-screen max-w-[480px]! w-[480px]!",
+          "data-[state=open]:max-h-none data-[state=open]:h-dvh"
+        ),
+        children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(SheetHeader, { className: cn("border-b border-zinc-200", isEditMode && "border-b-0"), children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-zinc-950 paragraph-medium-semibold", children: isEditMode ? translateSheet("titleEdit") : translateSheet("titleAdd") }) }),
+          !isEditMode && /* @__PURE__ */ jsx("div", { className: "h-1 bg-zinc-100 w-full", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full transition-all duration-300 ease-in-out bg-primary",
+              style: { width: currentStep === 1 ? "50%" : "100%" }
+            }
+          ) }),
+          isEditMode ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: "information", className: "flex flex-col flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs(TabsList, { className: "flex gap-1.5 px-5 pt-3 border-b border-zinc-200 bg-transparent h-auto justify-start", children: [
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "information", className: tabTriggerClasses, children: [
+                /* @__PURE__ */ jsx(IconUser, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: translateSheet("tabInformation") })
+              ] }),
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "projects", className: tabTriggerClasses, children: [
+                /* @__PURE__ */ jsx(IconStack2, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: translateSheet("tabProjects") })
+              ] }),
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "notifications", className: tabTriggerClasses, children: [
+                /* @__PURE__ */ jsx(IconBell, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: translateSheet("tabNotifications") })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "information", className: "flex-1 overflow-y-auto mt-0 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: /* @__PURE__ */ jsx(
+              UserInformationStep,
+              {
+                mode,
+                photoPreview,
+                onPhotoChange: handlePhotoChange,
+                onRemovePhoto: handleRemovePhoto,
+                isOwnProfile,
+                canEditUser,
+                canChangeProfile,
+                targetUser: initialData,
+                twoFactorEnabled,
+                onTwoFactorChange: setTwoFactorEnabled,
+                onOpenChangePhone: () => setShowChangePhone(true),
+                onOpenChangeEmail: () => setShowChangeEmail(true),
+                onOpenTwoFactor: () => twoFactorEnabled ? setShowDisableTwoFactor(true) : setShowTwoFactor(true),
+                onOpenChangePassword: () => setShowChangePassword(true),
+                onProfileChange: handleProfileChange
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "projects", className: "flex-1 overflow-y-auto mt-0 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: /* @__PURE__ */ jsx(ProjectSelectionStep, { mode: "edit", readOnly: !canEditUser || !canManageUsers }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "notifications", className: "flex-1 overflow-y-auto mt-0 [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: /* @__PURE__ */ jsx(NotificationsStep, { readOnly: !isOwnProfile && !canEditUser }) })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+            currentStep === 1 && /* @__PURE__ */ jsx(
+              UserInformationStep,
+              {
+                mode,
+                photoPreview,
+                onPhotoChange: handlePhotoChange,
+                onRemovePhoto: handleRemovePhoto,
+                emailExistsError,
+                isCheckingEmail,
+                onEmailExistsError: setEmailExistsError,
+                onEmailChecking: setIsCheckingEmail,
+                onProfileChange: handleProfileChange
+              }
+            ),
+            currentStep === 2 && /* @__PURE__ */ jsx(ProjectSelectionStep, { mode: "add" })
+          ] }),
+          isEditMode ? /* @__PURE__ */ jsxs(SheetFooter, { className: "flex-row items-center justify-between border-t border-zinc-200 gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                className: "h-10!",
+                type: "button",
+                onClick: handleClose,
+                disabled: isSubmitting,
+                children: translate("common.actions.cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "h-10!",
+                type: "submit",
+                disabled: !form.formState.isDirty || !canEditUser,
+                loading: isSubmitting,
+                children: isSubmitting ? translateSheet("saving") : translateSheet("saveChanges")
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            currentStep === 1 && /* @__PURE__ */ jsxs(SheetFooter, { className: "flex-row items-center justify-between border-t border-zinc-200 gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "h-10!",
+                  type: "button",
+                  onClick: handleClose,
+                  disabled: isSubmitting,
+                  children: translate("common.actions.cancel")
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", loading: isSubmitting, disabled: !canContinue, children: translate("common.actions.continue") })
+            ] }),
+            currentStep === 2 && /* @__PURE__ */ jsxs(SheetFooter, { className: "flex-row items-center justify-between border-t border-zinc-200 gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "h-10!",
+                  type: "button",
+                  onClick: () => setCurrentStep(1),
+                  disabled: isSubmitting,
+                  children: translate("common.actions.back")
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-zinc-500 paragraph-small-regular", children: [
+                  selectedCount,
+                  " ",
+                  selectedCount === 1 ? translateSheet("selectedOne") : translateSheet("selectedMany")
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: "h-10!",
+                    type: "submit",
+                    disabled: selectedCount === 0,
+                    loading: isSubmitting,
+                    children: isSubmitting ? translateSheet("sending") : translateSheet("sendInvite")
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: selectAnotherInputRef,
+        type: "file",
+        accept: ACCEPTED_IMAGE_FORMATS_STRING,
+        className: "hidden",
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          if (file) handleFileSelect(file);
+          event.target.value = "";
+        }
+      }
+    ),
+    originalImage && /* @__PURE__ */ jsx(
+      ImageCropModal,
+      {
+        open: showCropModal,
+        onOpenChange: setShowCropModal,
+        imageSrc: originalImage,
+        aspectRatio: USER_AVATAR_CONFIG.aspectRatio,
+        onConfirm: handleCropConfirm,
+        minWidth: USER_AVATAR_CONFIG.width,
+        minHeight: USER_AVATAR_CONFIG.height,
+        fileName,
+        onSelectAnother: () => selectAnotherInputRef.current?.click()
+      }
+    ),
+    /* @__PURE__ */ jsx(ChangePhoneModal, { open: showChangePhone, onClose: () => setShowChangePhone(false) }),
+    /* @__PURE__ */ jsx(ChangeEmailModal, { open: showChangeEmail, onClose: () => setShowChangeEmail(false) }),
+    /* @__PURE__ */ jsx(
+      TwoFactorAuthModal,
+      {
+        open: showTwoFactor,
+        onClose: () => setShowTwoFactor(false),
+        onSuccess: () => {
+          setTwoFactorEnabled(true);
+          invalidateUser();
+          setShowTwoFactor(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DisableTwoFactorAuthModal,
+      {
+        open: showDisableTwoFactor,
+        onClose: () => setShowDisableTwoFactor(false),
+        onSuccess: () => {
+          setTwoFactorEnabled(false);
+          invalidateUser();
+          setShowDisableTwoFactor(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: showChangePassword, onOpenChange: setShowChangePassword, children: /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        showCloseButton: false,
+        className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden",
+        children: /* @__PURE__ */ jsx(ChangePasswordSection, { onBack: () => setShowChangePassword(false) })
+      }
+    ) })
+  ] });
+}
+function UserSheet() {
+  const sheet = useTeamFlows((state) => state.sheet);
+  const closeUserSheet = useTeamFlows((state) => state.closeUserSheet);
+  const [lastSheet, setLastSheet] = useState(sheet);
+  useEffect(() => {
+    if (sheet) setLastSheet(sheet);
+  }, [sheet]);
+  if (!lastSheet) return null;
+  return /* @__PURE__ */ jsx(
+    UserSheetContent,
+    {
+      open: !!sheet,
+      mode: lastSheet.mode,
+      initialData: lastSheet.mode === "edit" ? lastSheet.user : void 0,
+      onClose: closeUserSheet
+    },
+    lastSheet.mode === "edit" ? `edit-${lastSheet.user.id}` : "add"
+  );
+}
+export {
+  UserSheet
+};
+//# sourceMappingURL=UserSheet.mjs.map