@jrapps/my_tickets_dashboard_modals_ui 0.0.2 → 0.1.0

package/dist/cjs/index.js

@@ -30,16 +30,563 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CreateManageTeamModal: () => CreateManageTeamModal,
+  ManageCreateUserModal: () => ManageCreateUserModal,
   ManageTicketModal: () => ManageTicketModal
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/ManageTicketModal/ManageTicketModal.tsx
+// src/components/CreateManageTeamModal/CreateManageTeamModal.tsx
 var import_react2 = __toESM(require("react"));
 
-// src/components/ManageTicketModal/useManageTicketModal.ts
+// src/components/CreateManageTeamModal/useCreateManageTeamModal.ts
 var import_react = require("react");
 var import_essentials = require("@wix/essentials");
+var import_dashboard = require("@wix/dashboard");
+
+// src/components/CreateManageTeamModal/CreateManageTeamModal.types.ts
+var DEFAULT_TEAM_DATA = {
+  name: "",
+  description: "",
+  teamPictureUrl: "",
+  email: "",
+  agents: [],
+  assignedTickets: [],
+  permissions: []
+};
+
+// src/components/CreateManageTeamModal/useCreateManageTeamModal.ts
+function useCreateManageTeamModal({
+  id,
+  state,
+  permissions,
+  onClose
+}) {
+  const [teamData, setTeamData] = (0, import_react.useState)(DEFAULT_TEAM_DATA);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isSaving, setIsSaving] = (0, import_react.useState)(false);
+  const handleFormChange = (field, value) => {
+    setTeamData((prev) => ({ ...prev, [field]: value }));
+  };
+  const validate = () => {
+    if (!teamData.name.trim()) return "Team name is required.";
+    if (!teamData.email.trim()) return "Team email is required.";
+    return null;
+  };
+  const handleSave = async () => {
+    const validationError = validate();
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      const baseApiUrl = new URL("").origin;
+      const res = await import_essentials.httpClient.fetchWithAuth(
+        `${baseApiUrl}/api/teams/teams${state === "EDIT" ? `?id=${id}` : ""}`,
+        {
+          method: state === "EDIT" ? "PUT" : "POST",
+          body: JSON.stringify(teamData)
+        }
+      );
+      const data = await res.json();
+      if (data.success) {
+        onClose({
+          newTeamData: {
+            _id: data.team._id,
+            name: data.team.name,
+            description: data.team.description,
+            teamPictureUrl: data.team.teamPictureUrl
+          }
+        });
+      }
+    } catch (err) {
+      console.error("Error saving team:", err instanceof Error ? err.message : String(err));
+      setError("Try again later.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleAddImage = () => {
+    import_dashboard.dashboard.openMediaManager({ multiSelect: false }).then((result) => {
+      if (result && result.items.length > 0) {
+        const imageUrl = result.items[0].url;
+        handleFormChange("teamPictureUrl", imageUrl);
+      }
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    if (state === "EDIT") {
+      setIsLoading(true);
+      const fetchTeamDetails = async () => {
+        try {
+          const baseApiUrl = new URL("").origin;
+          const res = await import_essentials.httpClient.fetchWithAuth(
+            `${baseApiUrl}/api/teams/teams?id=${id}`,
+            {
+              method: "GET",
+              headers: { "Content-Type": "application/json" }
+            }
+          );
+          const data = await res.json();
+          setTeamData(data.team || DEFAULT_TEAM_DATA);
+        } catch (err) {
+          console.error(
+            "Error fetching team details:",
+            err instanceof Error ? err.message : String(err)
+          );
+          setError("Try again later.");
+        } finally {
+          setIsLoading(false);
+        }
+      };
+      fetchTeamDetails();
+    }
+  }, [id, state]);
+  return {
+    teamData,
+    isLoading,
+    isSaving,
+    error,
+    handleFormChange,
+    handleSave,
+    handleAddImage,
+    canEdit: permissions["my-tickets-edit-teams"]
+  };
+}
+
+// src/components/CreateManageTeamModal/CreateManageTeamModal.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-41fecb36")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-41fecb36";
+  s.textContent = ".create-manage-team-modal {\n  /* CreateManageTeamModal base styles */\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/CreateManageTeamModal/CreateManageTeamModal.tsx
+var import_design_system2 = require("@wix/design-system");
+var import_styles_studio_global = require("@wix/design-system/styles-studio.global.css");
+
+// src/components/CreateManageTeamModal/permissions-accordion.tsx
+var import_design_system = require("@wix/design-system");
+
+// src/components/CreateManageTeamModal/team-permissions.ts
+var TEAM_PERMISSIONS = [
+  { "id": "my-tickets-transfer-chat-to-agent", "name": "Transfer Chat to Agent", "category": "Chat" },
+  { "id": "my-tickets-transfer-chat-to-team", "name": "Transfer Chat to Team", "category": "Chat" },
+  { "id": "my-tickets-convert-chat-to-ticket", "name": "Convert Chat to Ticket", "category": "Chat" },
+  { "id": "my-tickets-view-chats", "name": "View Chats", "category": "Chat" },
+  { "id": "my-tickets-view-single-chat", "name": "View Single Chat", "category": "Chat" },
+  { "id": "my-tickets-join-single-chat", "name": "Join Single Chat", "category": "Chat" },
+  { "id": "my-tickets-end-single-chat", "name": "End Single Chat", "category": "Chat" },
+  { "id": "my-tickets-view-single-ticket", "name": "View Single Ticket", "category": "Ticket" },
+  { "id": "my-tickets-single-ticket-send-message", "name": "Send Message to Single Ticket", "category": "Ticket" },
+  { "id": "my-tickets-close-single-ticket", "name": "Close Single Ticket", "category": "Ticket" },
+  { "id": "my-tickets-reopen-single-ticket", "name": "Reopen Single Ticket", "category": "Ticket" },
+  { "id": "my-tickets-change-ticket-priority", "name": "Change Ticket Priority", "category": "Ticket" },
+  { "id": "my-tickets-transfer-ticket", "name": "Transfer Ticket", "category": "Ticket" },
+  { "id": "my-tickets-change-agent-online-status", "name": "Change Agent Online Status", "category": "Agent" },
+  { "id": "my-tickets-notifications-enabled", "name": "Enable Notifications", "category": "Notification" },
+  { "id": "my-tickets-create-quick-chat", "name": "Create Quick Chat", "category": "Chat" },
+  { "id": "my-tickets-edit-teams", "name": "Edit Teams", "category": "Team" },
+  { "id": "my-tickets-edit-accounts", "name": "Edit Accounts", "category": "Account" },
+  { "id": "my-tickets-view-teams", "name": "View Teams", "category": "Team" },
+  { "id": "my-tickets-view-accounts", "name": "View Accounts", "category": "Account" },
+  { "id": "my-tickets-create-teams", "name": "Create Teams", "category": "Team" },
+  { "id": "my-tickets-create-accounts", "name": "Create Accounts", "category": "Account" },
+  { "id": "my-tickets-view-all-tickets", "name": "View All Tickets", "category": "Ticket" },
+  { "id": "my-tickets-create-ticket", "name": "Create Ticket", "category": "Ticket" }
+];
+
+// src/components/CreateManageTeamModal/permissions-accordion.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PermissionsAccordion = ({
+  selectedPermissions,
+  onChange,
+  disabled
+}) => {
+  const groupedPermissions = TEAM_PERMISSIONS.reduce(
+    (acc, perm) => {
+      if (!acc[perm.category]) {
+        acc[perm.category] = [];
+      }
+      acc[perm.category].push(perm);
+      return acc;
+    },
+    {}
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.FormField, { label: "Permissions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_design_system.Accordion,
+    {
+      horizontalPadding: "tiny",
+      size: "tiny",
+      items: Object.entries(groupedPermissions).map(
+        ([category, categoryPermissions]) => (0, import_design_system.accordionItemBuilder)({
+          title: category,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { direction: "vertical", gap: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Layout, { children: categoryPermissions.map((perm) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Cell, { span: 6, children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_design_system.Checkbox,
+              {
+                checked: selectedPermissions?.includes(perm.id) || false,
+                onChange: (e) => {
+                  const isChecked = e.target.checked;
+                  onChange(
+                    isChecked ? [...selectedPermissions || [], perm.id] : selectedPermissions?.filter((p) => p !== perm.id) || []
+                  );
+                },
+                disabled,
+                children: perm.name
+              }
+            )
+          ] }, perm.id)) }) })
+        })
+      )
+    }
+  ) });
+};
+var permissions_accordion_default = PermissionsAccordion;
+
+// src/components/CreateManageTeamModal/CreateManageTeamModal.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CreateManageTeamModal = import_react2.default.forwardRef(
+  ({ className, isOpen, id, state, permissions, onClose }, ref) => {
+    const {
+      teamData,
+      isLoading,
+      isSaving,
+      error,
+      handleFormChange,
+      handleSave,
+      handleAddImage,
+      canEdit
+    } = useCreateManageTeamModal({ id, state, permissions, onClose });
+    const modalActions = !isLoading ? {
+      primaryButtonText: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Loader, { size: "tiny" }) : "Save",
+      primaryButtonOnClick: handleSave,
+      primaryButtonProps: { disabled: !canEdit },
+      secondaryButtonText: !isSaving && state === "CREATE" ? "Cancel" : !isSaving && state === "EDIT" ? "Close" : void 0,
+      secondaryButtonOnClick: () => onClose({ cancelled: true })
+    } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Modal, { isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_design_system2.CustomModalLayout,
+      {
+        width: "520px",
+        ...modalActions,
+        showHeaderDivider: true,
+        showFooterDivider: true,
+        title: state === "EDIT" ? "Edit Team" : "Create Team",
+        subtitle: state === "EDIT" ? "Make changes to the team details below." : "Fill in the details to create a new team.",
+        footnote: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.Text, { size: "small", children: [
+          "Powered by ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Text, { size: "small", weight: "bold", children: "My Tickets" })
+        ] }) }),
+        content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { direction: "vertical", width: "stretch", gap: "10px", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { WebkitJustifyContent: "center", alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Loader, { size: "medium", status: "loading", text: "Loading data..." }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { WebkitJustifyContent: "center", alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Loader, { size: "medium", status: "error", text: error }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.Box, { direction: "horizontal", width: "stretch", gap: "10px", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.FormField, { label: "Team Picture", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_design_system2.ImageViewer,
+              {
+                disabled: !canEdit,
+                height: "115px",
+                width: "115px",
+                imageUrl: teamData?.teamPictureUrl || "",
+                onAddImage: handleAddImage
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.FormField, { label: "Team Name", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_design_system2.Input,
+                {
+                  value: teamData?.name || "",
+                  onChange: (e) => handleFormChange("name", e.target.value),
+                  disabled: !canEdit
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.FormField, { label: "Team Description", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_design_system2.Input,
+                {
+                  value: teamData?.description || "",
+                  onChange: (e) => handleFormChange("description", e.target.value),
+                  disabled: !canEdit
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.FormField, { label: "Team Email", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_design_system2.Input,
+            {
+              suffix: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { verticalAlign: "middle", children: "@mytickets.internal" }),
+              type: "email",
+              value: teamData?.email?.replace("@mytickets.internal", "") || "",
+              onChange: (e) => handleFormChange("email", e.target.value),
+              disabled: !canEdit
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Box, { direction: "horizontal", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            permissions_accordion_default,
+            {
+              selectedPermissions: teamData.permissions || [],
+              onChange: (perms) => handleFormChange("permissions", perms),
+              disabled: !canEdit
+            }
+          ) })
+        ] }) })
+      }
+    ) }) });
+  }
+);
+CreateManageTeamModal.displayName = "CreateManageTeamModal";
+
+// src/components/ManageCreateUserModal/ManageCreateUserModal.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/components/ManageCreateUserModal/useManageCreateUserModal.ts
+var import_react3 = require("react");
+var import_essentials2 = require("@wix/essentials");
+
+// src/components/ManageCreateUserModal/ManageCreateUserModal.types.ts
+var DEFAULT_USER_DATA = {
+  _id: "",
+  passcode: "",
+  userId: "",
+  email: "",
+  name: "",
+  phoneNumber: "",
+  role: "",
+  team: "",
+  profilePictureUrl: "",
+  assignedTickets: [],
+  isAdmin: false
+};
+
+// src/components/ManageCreateUserModal/useManageCreateUserModal.ts
+var BASE_API_URL = new URL("").origin;
+function useManageCreateUserModal({ id, state }) {
+  const [userData, setUserData] = (0, import_react3.useState)(DEFAULT_USER_DATA);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [isSaving, setIsSaving] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(false);
+  const [teams, setTeams] = (0, import_react3.useState)([]);
+  const handleFormChange = (field, value) => {
+    setUserData((prev) => ({ ...prev, [field]: value }));
+  };
+  (0, import_react3.useEffect)(() => {
+    const fetchTeams = async () => {
+      try {
+        const response = await import_essentials2.httpClient.fetchWithAuth(`${BASE_API_URL}/api/teams/teams`);
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error || "Failed to fetch teams");
+        setTeams(result.teams || []);
+      } catch (err) {
+        console.error("Error fetching teams data:", err);
+      }
+    };
+    const fetchUser = async () => {
+      try {
+        const response = await import_essentials2.httpClient.fetchWithAuth(`${BASE_API_URL}/api/users/users?id=${id}`);
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error || "Failed to fetch user data");
+        setUserData(result.user || DEFAULT_USER_DATA);
+      } catch (err) {
+        console.error("Error fetching user data:", err);
+        setError(true);
+      }
+    };
+    const init = async () => {
+      setIsLoading(true);
+      await Promise.all([
+        fetchTeams(),
+        ...state === "EDIT" ? [fetchUser()] : []
+      ]);
+      setIsLoading(false);
+    };
+    init();
+  }, [id, state]);
+  const handleSave = async (onClose) => {
+    setIsSaving(true);
+    try {
+      const emailWithDomain = userData.email.includes("@") ? userData.email : `${userData.email}@mytickets.internal`;
+      const payload = {
+        ...userData,
+        email: emailWithDomain,
+        // Only include passcode in the payload when the user has typed one.
+        ...userData.passcode ? { passcode: userData.passcode } : {}
+      };
+      delete payload.passcode;
+      const res = await import_essentials2.httpClient.fetchWithAuth(
+        `${BASE_API_URL}/api/users/users${state === "EDIT" ? `?id=${id}` : ""}`,
+        {
+          method: state === "EDIT" ? "PUT" : "POST",
+          body: JSON.stringify(payload)
+        }
+      );
+      const data = await res.json();
+      if (data.success) {
+        onClose({ newUserData: data.user });
+      }
+    } catch (err) {
+      console.error("Error saving user:", err instanceof Error ? err.message : String(err));
+      setError(true);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return {
+    userData,
+    isLoading,
+    isSaving,
+    error,
+    teams,
+    handleFormChange,
+    handleSave
+  };
+}
+
+// src/components/ManageCreateUserModal/ManageCreateUserModal.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-03331631")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-03331631";
+  s.textContent = ".manage-create-user-modal {\n  /* ManageCreateUserModal base styles */\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/ManageCreateUserModal/ManageCreateUserModal.tsx
+var import_design_system3 = require("@wix/design-system");
+var import_styles_studio_global2 = require("@wix/design-system/styles-studio.global.css");
+var import_dashboard2 = require("@wix/dashboard");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ManageCreateUserModal = import_react4.default.forwardRef(
+  ({ className, id, state, permissions, isOpen, onClose }, ref) => {
+    const { userData, isLoading, isSaving, error, teams, handleFormChange, handleSave } = useManageCreateUserModal({ id, state });
+    const canEdit = permissions["my-tickets-edit-accounts"];
+    const isDefaultAdmin = userData.role === "DEFAULT_ADMIN";
+    const handleAddImage = () => {
+      import_dashboard2.dashboard.openMediaManager({ multiSelect: false }).then((result) => {
+        if (result && result.items.length > 0) {
+          handleFormChange("profilePictureUrl", result.items[0].url);
+        }
+      });
+    };
+    const modalActionProps = isLoading ? {} : {
+      primaryButtonText: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Loader, { size: "tiny" }) : "Save",
+      secondaryButtonText: !isSaving ? state === "CREATE" ? "Cancel" : "Close" : void 0,
+      primaryButtonProps: { disabled: !canEdit },
+      primaryButtonOnClick: () => handleSave(onClose),
+      secondaryButtonOnClick: () => onClose()
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Modal, { isOpen, ref, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_design_system3.CustomModalLayout,
+      {
+        width: "500px",
+        ...modalActionProps,
+        showHeaderDivider: true,
+        showFooterDivider: true,
+        title: state === "EDIT" ? "Edit User Account" : "Create User Account",
+        subtitle: state === "EDIT" ? "Make changes to the user account details below." : "Fill in the details to create a new user account.",
+        footnote: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.Text, { size: "small", children: [
+          "Powered by ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Text, { size: "small", weight: "bold", children: "My Tickets" })
+        ] }) }),
+        content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { direction: "vertical", width: "stretch", gap: "10px", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { WebkitJustifyContent: "center", alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Loader, { size: "medium", status: "loading", text: "Loading User..." }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { WebkitJustifyContent: "center", alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Loader, { size: "medium", status: "error", text: "Please try again later." }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.Box, { direction: "horizontal", width: "stretch", gap: "10px", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Profile Picture", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_design_system3.ImageViewer,
+              {
+                height: "115px",
+                width: "115px",
+                imageUrl: userData.profilePictureUrl,
+                onAddImage: handleAddImage
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_design_system3.FormField,
+                {
+                  label: state === "EDIT" ? "New Passcode (leave blank to keep)" : "Passcode",
+                  required: state !== "EDIT",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_design_system3.Input,
+                    {
+                      type: "password",
+                      value: userData.passcode,
+                      onChange: (e) => handleFormChange("passcode", e.target.value),
+                      disabled: !canEdit
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Team", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_design_system3.Dropdown,
+                {
+                  disabled: !canEdit || isDefaultAdmin,
+                  options: isDefaultAdmin ? [] : teams.map((team) => ({ id: String(team._id), value: String(team.name) })),
+                  selectedId: typeof userData.team === "object" && !isDefaultAdmin ? userData.team._id : "",
+                  onSelect: (option) => handleFormChange("team", { _id: String(option.id), name: String(option.value) })
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { direction: "horizontal", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Name", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_design_system3.Input,
+            {
+              value: userData.name,
+              onChange: (e) => handleFormChange("name", e.target.value),
+              disabled: !canEdit
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { direction: "horizontal", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Email", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_design_system3.Input,
+            {
+              suffix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Box, { verticalAlign: "middle", children: "@mytickets.internal" }),
+              type: "email",
+              value: userData.email.replace("@mytickets.internal", ""),
+              onChange: (e) => handleFormChange("email", e.target.value),
+              disabled: !canEdit || isDefaultAdmin
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Phone Number", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_design_system3.Input,
+            {
+              type: "tel",
+              value: userData.phoneNumber,
+              onChange: (e) => handleFormChange("phoneNumber", e.target.value),
+              disabled: !canEdit || isDefaultAdmin
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.Box, { direction: "horizontal", width: "stretch", gap: "10px", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Role", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_design_system3.Input,
+              {
+                value: userData.role,
+                onChange: (e) => handleFormChange("role", e.target.value),
+                disabled: !canEdit || isDefaultAdmin
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Is Admin", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_design_system3.ToggleSwitch,
+              {
+                size: "small",
+                checked: userData.isAdmin,
+                onChange: () => handleFormChange("isAdmin", !userData.isAdmin),
+                disabled: !canEdit || isDefaultAdmin
+              }
+            ) })
+          ] })
+        ] }) })
+      }
+    ) });
+  }
+);
+ManageCreateUserModal.displayName = "ManageCreateUserModal";
+
+// src/components/ManageTicketModal/ManageTicketModal.tsx
+var import_react6 = __toESM(require("react"));
+
+// src/components/ManageTicketModal/useManageTicketModal.ts
+var import_react5 = require("react");
+var import_essentials3 = require("@wix/essentials");
 var BASE_URL = new URL("").origin;
 var STATE_CONFIG = {
   STATUS_CHANGE: {
@@ -59,15 +606,15 @@ var STATE_CONFIG = {
   }
 };
 function useManageTicketModal({ id, state, onClose }) {
-  const [isSaving, setIsSaving] = (0, import_react.useState)(false);
-  const [newStatus, setNewStatus] = (0, import_react.useState)("");
-  const [newPriority, setNewPriority] = (0, import_react.useState)("");
-  const [selectedTeam, setSelectedTeam] = (0, import_react.useState)("");
-  const [teams, setTeams] = (0, import_react.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
-  const [isError, setIsError] = (0, import_react.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
+  const [newStatus, setNewStatus] = (0, import_react5.useState)("");
+  const [newPriority, setNewPriority] = (0, import_react5.useState)("");
+  const [selectedTeam, setSelectedTeam] = (0, import_react5.useState)("");
+  const [teams, setTeams] = (0, import_react5.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const [isError, setIsError] = (0, import_react5.useState)(false);
   const modalTitle = STATE_CONFIG[state]?.title ?? "Manage Ticket";
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (state !== "TRANSFER_TICKET") {
       setIsLoading(false);
       setIsError(false);
@@ -77,7 +624,7 @@ function useManageTicketModal({ id, state, onClose }) {
     setIsError(false);
     const fetchTeams = async () => {
       try {
-        const response = await import_essentials.httpClient.fetchWithAuth(`${BASE_URL}/api/teams/teams`);
+        const response = await import_essentials3.httpClient.fetchWithAuth(`${BASE_URL}/api/teams/teams`);
         const data = await response.json();
         setTeams(data.teams);
       } catch (error) {
@@ -101,7 +648,7 @@ function useManageTicketModal({ id, state, onClose }) {
     if (!value) return;
     setIsSaving(true);
     try {
-      await import_essentials.httpClient.fetchWithAuth(config.getUrl(id, value), { method: "PUT" });
+      await import_essentials3.httpClient.fetchWithAuth(config.getUrl(id, value), { method: "PUT" });
       onClose(config.getPayload(value));
     } catch (error) {
       console.error("Error saving:", error);
@@ -131,22 +678,22 @@ function useManageTicketModal({ id, state, onClose }) {
 }
 
 // src/components/ManageTicketModal/ManageTicketModal.tsx
-var import_design_system4 = require("@wix/design-system");
-var import_styles_studio_global = require("@wix/design-system/styles-studio.global.css");
+var import_design_system7 = require("@wix/design-system");
+var import_styles_studio_global3 = require("@wix/design-system/styles-studio.global.css");
 
 // src/components/ManageTicketModal/status-change-content.tsx
-var import_design_system = require("@wix/design-system");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_design_system4 = require("@wix/design-system");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var STATUS_LABELS = {
   closed: "Closed",
   in_progress: "In Progress",
   open: "Open"
 };
 var StatusChangeContent = ({ currentStatus, newStatus, onStatusChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.FormField, { label: "Current Status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Input, { value: STATUS_LABELS[currentStatus] ?? currentStatus, disabled: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.FormField, { label: "New Status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_design_system.Dropdown,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system4.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.FormField, { label: "Current Status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Input, { value: STATUS_LABELS[currentStatus] ?? currentStatus, disabled: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.FormField, { label: "New Status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_design_system4.Dropdown,
       {
         options: [
           { id: "open", value: "Open" },
@@ -164,18 +711,18 @@ var StatusChangeContent = ({ currentStatus, newStatus, onStatusChange }) => {
 var status_change_content_default = StatusChangeContent;
 
 // src/components/ManageTicketModal/priority-change-content.tsx
-var import_design_system2 = require("@wix/design-system");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_design_system5 = require("@wix/design-system");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var PRIORITY_LABELS = {
   high: "High",
   medium: "Medium",
   low: "Low"
 };
 var PriorityChangeContent = ({ currentPriority, newPriority, onPriorityChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.FormField, { label: "Current Priority", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Input, { value: PRIORITY_LABELS[currentPriority] ?? currentPriority, disabled: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.FormField, { label: "New Priority", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_design_system2.Dropdown,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.FormField, { label: "Current Priority", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Input, { value: PRIORITY_LABELS[currentPriority] ?? currentPriority, disabled: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.FormField, { label: "New Priority", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_design_system5.Dropdown,
       {
         options: [
           { id: "high", value: "High" },
@@ -193,13 +740,13 @@ var PriorityChangeContent = ({ currentPriority, newPriority, onPriorityChange })
 var priority_change_content_default = PriorityChangeContent;
 
 // src/components/ManageTicketModal/transfer-ticket-content.tsx
-var import_design_system3 = require("@wix/design-system");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_design_system6 = require("@wix/design-system");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var TransferTicketContent = ({ currentTeam, teams, selectedTeam, onTeamChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system3.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "Current Team", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.Input, { value: currentTeam, disabled: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system3.FormField, { label: "New Team", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_design_system3.Dropdown,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system6.Box, { direction: "vertical", width: "stretch", gap: "10px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.FormField, { label: "Current Team", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.Input, { value: currentTeam, disabled: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system6.FormField, { label: "New Team", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_design_system6.Dropdown,
       {
         options: teams.map((team) => ({ id: team._id, value: team.name })),
         placeholder: "Select new team",
@@ -221,8 +768,8 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-45
 }
 
 // src/components/ManageTicketModal/ManageTicketModal.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ManageTicketModal = import_react2.default.forwardRef(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ManageTicketModal = import_react6.default.forwardRef(
   ({
     className,
     isOpen,
@@ -251,13 +798,13 @@ var ManageTicketModal = import_react2.default.forwardRef(
     } = useManageTicketModal({ id, state, onClose });
     const renderContent = () => {
       if (isLoading) {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Box, { direction: "vertical", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Loader, { size: "medium", status: "loading", text: "Loading..." }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Box, { direction: "vertical", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Loader, { size: "medium", status: "loading", text: "Loading..." }) });
       }
       if (isError) {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Box, { direction: "vertical", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Loader, { size: "medium", status: "error", text: "Error loading data" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Box, { direction: "vertical", width: "stretch", gap: "10px", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Loader, { size: "medium", status: "error", text: "Error loading data" }) });
       }
       if (state === "STATUS_CHANGE") {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           status_change_content_default,
           {
             currentStatus: currentStatus ?? "",
@@ -267,7 +814,7 @@ var ManageTicketModal = import_react2.default.forwardRef(
         );
       }
       if (state === "PRIORITY_CHANGE") {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           priority_change_content_default,
           {
             currentPriority: currentPriority ?? "",
@@ -277,7 +824,7 @@ var ManageTicketModal = import_react2.default.forwardRef(
         );
       }
       if (state === "TRANSFER_TICKET") {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           transfer_ticket_content_default,
           {
             currentTeam: currentTeamName,
@@ -289,11 +836,11 @@ var ManageTicketModal = import_react2.default.forwardRef(
       }
       return null;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Modal, { isOpen, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_design_system4.CustomModalLayout,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Modal, { isOpen, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_design_system7.CustomModalLayout,
       {
         width: "500px",
-        primaryButtonText: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Loader, { size: "tiny" }) : "Save",
+        primaryButtonText: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Loader, { size: "tiny" }) : "Save",
         secondaryButtonText: "Cancel",
         primaryButtonOnClick: handleSave,
         secondaryButtonOnClick: handleCancel,
@@ -301,9 +848,9 @@ var ManageTicketModal = import_react2.default.forwardRef(
         showFooterDivider: true,
         title: modalTitle,
         subtitle: !isLoading ? ticketNumber : "",
-        footnote: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Box, { alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system4.Text, { size: "small", children: [
+        footnote: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Box, { alignContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system7.Text, { size: "small", children: [
           "Powered by ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Text, { size: "small", weight: "bold", children: "My Tickets" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system7.Text, { size: "small", weight: "bold", children: "My Tickets" })
         ] }) }),
         content: renderContent()
       }