@jrapps/my_tickets_dashboard_ui 0.0.7 → 0.0.8

package/dist/cjs/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,25 +17,312 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ManageTicketModal: () => ManageTicketModal,
   Sidebar: () => Sidebar
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Sidebar/Sidebar.tsx
-var import_react3 = require("react");
+// src/components/ManageTicketModal/ManageTicketModal.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/components/ManageTicketModal/useManageTicketModal.ts
+var import_react = require("react");
+var import_essentials = require("@wix/essentials");
+var BASE_URL = new URL("").origin;
+var STATE_CONFIG = {
+  STATUS_CHANGE: {
+    title: "Change Status",
+    getUrl: (id, value) => `${BASE_URL}/api/tickets/update-ticket-status?id=${id}&status=${value}`,
+    getPayload: (value) => ({ newStatus: value })
+  },
+  PRIORITY_CHANGE: {
+    title: "Change Priority",
+    getUrl: (id, value) => `${BASE_URL}/api/tickets/update-ticket-priority?id=${id}&priority=${value}`,
+    getPayload: (value) => ({ newPriority: value })
+  },
+  TRANSFER_TICKET: {
+    title: "Transfer Ticket",
+    getUrl: (id, value) => `${BASE_URL}/api/tickets/transfer-ticket?id=${id}&teamId=${value}`,
+    getPayload: (value) => ({ newTeamId: value })
+  }
+};
+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 modalTitle = STATE_CONFIG[state]?.title ?? "Manage Ticket";
+  (0, import_react.useEffect)(() => {
+    if (state !== "TRANSFER_TICKET") {
+      setIsLoading(false);
+      setIsError(false);
+      return;
+    }
+    setIsLoading(true);
+    setIsError(false);
+    const fetchTeams = async () => {
+      try {
+        const response = await import_essentials.httpClient.fetchWithAuth(`${BASE_URL}/api/teams/teams`);
+        const data = await response.json();
+        setTeams(data.teams);
+      } catch (error) {
+        console.error("Error fetching teams:", error);
+        setIsError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchTeams();
+  }, [id, state]);
+  const handleSave = async () => {
+    const config = STATE_CONFIG[state];
+    if (!config) return;
+    const valueMap = {
+      STATUS_CHANGE: newStatus,
+      PRIORITY_CHANGE: newPriority,
+      TRANSFER_TICKET: selectedTeam
+    };
+    const value = valueMap[state];
+    if (!value) return;
+    setIsSaving(true);
+    try {
+      await import_essentials.httpClient.fetchWithAuth(config.getUrl(id, value), { method: "PUT" });
+      onClose(config.getPayload(value));
+    } catch (error) {
+      console.error("Error saving:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleCancel = () => onClose({ cancelled: true });
+  return {
+    // State
+    isSaving,
+    isLoading,
+    isError,
+    teams,
+    newStatus,
+    newPriority,
+    selectedTeam,
+    modalTitle,
+    // Setters
+    setNewStatus,
+    setNewPriority,
+    setSelectedTeam,
+    // Handlers
+    handleSave,
+    handleCancel
+  };
+}
+
+// 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");
+
+// src/components/ManageTicketModal/status-change-content.tsx
+var import_design_system = require("@wix/design-system");
+var import_jsx_runtime = 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,
+      {
+        options: [
+          { id: "open", value: "Open" },
+          { id: "in_progress", value: "In Progress" },
+          { id: "closed", value: "Closed" }
+        ],
+        placeholder: "Select new status",
+        selectedId: newStatus || "",
+        popoverProps: { appendTo: "window", zIndex: 9999 },
+        onSelect: (option) => onStatusChange(option?.id ?? "")
+      }
+    ) })
+  ] });
+};
+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 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,
+      {
+        options: [
+          { id: "high", value: "High" },
+          { id: "medium", value: "Medium" },
+          { id: "low", value: "Low" }
+        ],
+        placeholder: "Select new priority",
+        selectedId: newPriority || "",
+        popoverProps: { appendTo: "window", zIndex: 9999 },
+        onSelect: (option) => onPriorityChange(option?.id ?? "")
+      }
+    ) })
+  ] });
+};
+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 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,
+      {
+        options: teams.map((team) => ({ id: team._id, value: team.name })),
+        placeholder: "Select new team",
+        selectedId: selectedTeam || "",
+        popoverProps: { appendTo: "window", zIndex: 9999 },
+        onSelect: (option) => onTeamChange(option?.id ?? "")
+      }
+    ) })
+  ] });
+};
+var transfer_ticket_content_default = TransferTicketContent;
+
+// src/components/ManageTicketModal/ManageTicketModal.css
+if (typeof document !== "undefined" && !document.getElementById("jrapps-style-94103778")) {
+  const s = document.createElement("style");
+  s.id = "jrapps-style-94103778";
+  s.textContent = ".manage-ticket-modal {\n  /* ManageTicketModal base styles */\n}\n";
+  document.head.appendChild(s);
+}
+
+// src/components/ManageTicketModal/ManageTicketModal.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ManageTicketModal = import_react2.default.forwardRef(
+  ({
+    className,
+    isOpen,
+    id,
+    state,
+    onClose,
+    currentStatus,
+    currentPriority,
+    ticketNumber,
+    currentTeamName
+  }, ref) => {
+    const {
+      isSaving,
+      isLoading,
+      isError,
+      teams,
+      newStatus,
+      newPriority,
+      selectedTeam,
+      modalTitle,
+      setNewStatus,
+      setNewPriority,
+      setSelectedTeam,
+      handleSave,
+      handleCancel
+    } = 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..." }) });
+      }
+      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" }) });
+      }
+      if (state === "STATUS_CHANGE") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          status_change_content_default,
+          {
+            currentStatus: currentStatus ?? "",
+            newStatus,
+            onStatusChange: setNewStatus
+          }
+        );
+      }
+      if (state === "PRIORITY_CHANGE") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          priority_change_content_default,
+          {
+            currentPriority: currentPriority ?? "",
+            newPriority,
+            onPriorityChange: setNewPriority
+          }
+        );
+      }
+      if (state === "TRANSFER_TICKET") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          transfer_ticket_content_default,
+          {
+            currentTeam: currentTeamName,
+            teams,
+            selectedTeam,
+            onTeamChange: setSelectedTeam
+          }
+        );
+      }
+      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,
+      {
+        width: "500px",
+        primaryButtonText: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Loader, { size: "tiny" }) : "Save",
+        secondaryButtonText: "Cancel",
+        primaryButtonOnClick: handleSave,
+        secondaryButtonOnClick: handleCancel,
+        showHeaderDivider: true,
+        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: [
+          "Powered by ",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system4.Text, { size: "small", weight: "bold", children: "My Tickets" })
+        ] }) }),
+        content: renderContent()
+      }
+    ) });
+  }
+);
+ManageTicketModal.displayName = "ManageTicketModal";
+
+// src/components/Sidebar/Sidebar.tsx
+var import_react5 = require("react");
+var import_design_system7 = require("@wix/design-system");
 var import_wix_ui_icons_common2 = require("@wix/wix-ui-icons-common");
 
 // src/components/Sidebar/sidebar-menu-item.tsx
-var import_react = require("react");
-var import_design_system = require("@wix/design-system");
+var import_react3 = require("react");
+var import_design_system5 = require("@wix/design-system");
 var import_dashboard = require("@wix/dashboard");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var SidebarMenuItem = ({
   item,
   items,
@@ -48,11 +337,11 @@ var SidebarMenuItem = ({
   onModalClosed,
   onCreateTicketClicked
 }) => {
-  const [itemTotalCount, setItemTotalCount] = (0, import_react.useState)(totalCount);
+  const [itemTotalCount, setItemTotalCount] = (0, import_react3.useState)(totalCount);
   const hasChildren = items.some((i) => i.parent === item.stateId);
   const isExpanded = expandedSections.has(item.stateId);
   const isSelected = selectedId === item.stateId;
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     setItemTotalCount(totalCount);
   }, [totalCount]);
   const handleAction = async (actionItem) => {
@@ -74,34 +363,34 @@ var SidebarMenuItem = ({
   };
   if (hasChildren) {
     const children = items.filter((i) => i.parent === item.stateId);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sidebar-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sidebar-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: `sidebar-item sidebar-parent-item ${isSelected ? "sidebar-item-selected" : ""}`,
           onClick: () => onToggleSection(item.stateId),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "sidebar-item-icon", children: item.prefixIcon }),
-            expanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { className: "sidebar-item-content", direction: "vertical", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-title", children: item.label }),
-                item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { className: "sidebar-item-icon", children: item.prefixIcon }),
+            expanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Box, { className: "sidebar-item-content", direction: "vertical", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Text, { size: "small", className: "sidebar-item-title", children: item.label }),
+                item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: `sidebar-item-chevron ${isExpanded ? "expanded" : ""}`, children: "\u25BC" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { className: `sidebar-item-chevron ${isExpanded ? "expanded" : ""}`, children: "\u25BC" })
             ] })
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "sidebar-submenu-container", direction: "vertical", children: children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { className: "sidebar-submenu-container", direction: "vertical", children: children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: `sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? "sidebar-item-selected" : ""}`,
           onClick: () => handleAction(child),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "sidebar-item-icon", children: child.prefixIcon }),
-            expanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { className: "sidebar-item-content", direction: "vertical", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-title-submenu", children: child.label }),
-              child.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-subtitle", children: child.subtitle })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { className: "sidebar-item-icon", children: child.prefixIcon }),
+            expanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Box, { className: "sidebar-item-content", direction: "vertical", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Text, { size: "small", className: "sidebar-item-title-submenu", children: child.label }),
+              child.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Text, { size: "small", className: "sidebar-item-subtitle", children: child.subtitle })
             ] }) })
           ]
         },
@@ -109,19 +398,19 @@ var SidebarMenuItem = ({
       )) })
     ] }, item.stateId);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `sidebar-item ${expandedClassName} ${isSelected ? "sidebar-item-selected" : ""}`,
       onClick: () => handleAction(item),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "sidebar-item-icon", children: item.prefixIcon }),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Box, { className: "sidebar-item-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { verticalAlign: "middle", gap: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Box, { direction: "vertical", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-title", children: item.label }),
-            item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { className: "sidebar-item-icon", children: item.prefixIcon }),
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Box, { className: "sidebar-item-content", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Box, { verticalAlign: "middle", gap: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system5.Box, { direction: "vertical", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Text, { size: "small", className: "sidebar-item-title", children: item.label }),
+            item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
           ] }),
-          item?.showTotalCount && item?.showTotalCount === true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.CounterBadge, { size: "medium", skin: "warning", children: String(itemTotalCount) })
+          item?.showTotalCount && item?.showTotalCount === true && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system5.CounterBadge, { size: "medium", skin: "warning", children: String(itemTotalCount) })
         ] }) }) })
       ]
     },
@@ -131,22 +420,22 @@ var SidebarMenuItem = ({
 var sidebar_menu_item_default = SidebarMenuItem;
 
 // src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx
-var import_react2 = require("react");
-var import_design_system2 = require("@wix/design-system");
+var import_react4 = require("react");
+var import_design_system6 = require("@wix/design-system");
 
 // src/components/Sidebar/footer/status-dots.wrapper.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Online = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#22c55e", boxShadow: "0 0 0 2px #fff" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#22c55e", boxShadow: "0 0 0 2px #fff" } });
 };
 var Away = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#f59e0b", boxShadow: "0 0 0 2px #fff" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#f59e0b", boxShadow: "0 0 0 2px #fff" } });
 };
 var DoNotDisturb = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "relative", width: "8px", height: "8px", borderRadius: "50%", background: "#ef4444", boxShadow: "0 0 0 2px #fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", top: "50%", left: "10%", right: "10%", height: "2px", background: "#fff", transform: "translateY(-50%)", borderRadius: "1px" } }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { position: "relative", width: "8px", height: "8px", borderRadius: "50%", background: "#ef4444", boxShadow: "0 0 0 2px #fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { position: "absolute", top: "50%", left: "10%", right: "10%", height: "2px", background: "#fff", transform: "translateY(-50%)", borderRadius: "1px" } }) });
 };
 var Offline = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "8px", height: "8px", borderRadius: "50%", border: "2px solid #71717a", boxShadow: "0 0 0 2px #fff" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "8px", height: "8px", borderRadius: "50%", border: "2px solid #71717a", boxShadow: "0 0 0 2px #fff" } });
 };
 var StatusDots = {
   Online,
@@ -158,9 +447,9 @@ var status_dots_wrapper_default = StatusDots;
 
 // src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx
 var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var AvatarDropdown = ({ status = "online", onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {
-  const [selectedStatus, setSelectedStatus] = (0, import_react2.useState)(status);
+  const [selectedStatus, setSelectedStatus] = (0, import_react4.useState)(status);
   const handleStatusChange = (newStatus) => {
     setSelectedStatus(newStatus);
     if (onStatusChange) {
@@ -173,45 +462,45 @@ var AvatarDropdown = ({ status = "online", onStatusChange, onLogout, permissions
     }
   };
   const options = [
-    (0, import_design_system2.listItemSectionBuilder)({
+    (0, import_design_system6.listItemSectionBuilder)({
       id: "status-section",
       title: "Online Status"
     }),
-    (0, import_design_system2.listItemSelectBuilder)({
+    (0, import_design_system6.listItemSelectBuilder)({
       id: "online",
       checkbox: true,
-      prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.Online, {}),
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(status_dots_wrapper_default.Online, {}),
       title: "Online",
       disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
     }),
-    (0, import_design_system2.listItemSelectBuilder)({
+    (0, import_design_system6.listItemSelectBuilder)({
       id: "busy",
       checkbox: true,
-      prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.Away, {}),
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(status_dots_wrapper_default.Away, {}),
       title: "Away",
       disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
     }),
-    (0, import_design_system2.listItemSelectBuilder)({
+    (0, import_design_system6.listItemSelectBuilder)({
       id: "offline",
       checkbox: true,
-      prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.DoNotDisturb, {}),
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(status_dots_wrapper_default.DoNotDisturb, {}),
       title: "Offline",
       disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
     }),
     { id: "divider-1", value: "-" },
-    (0, import_design_system2.listItemActionBuilder)({
+    (0, import_design_system6.listItemActionBuilder)({
       id: 0,
       title: "Logout",
       onClick: handleLogout
     })
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.DropdownBase, { options, selectedId: selectedStatus, onSelect: (option) => typeof option.id === "string" && handleStatusChange(option.id), className: "sidebar-avatar-dropdown", minWidth: 0, children: ({ toggle }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.TextButton, { className: "header-account-button", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Box, { verticalAlign: "middle", gap: 2, textAlign: "start", maxWidth: "100%", minWidth: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Avatar, { presence: selectedStatus, name: agentName && !agentProfilePictureUrl ? agentName : void 0, size: "size30", imgProps: !agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl ? { src: agentProfilePictureUrl } : void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_design_system2.Box, { direction: "vertical", gap: 0, verticalAlign: "middle", maxWidth: "100%", minWidth: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Text, { weight: "bold", size: "small", ellipsis: true, maxWidth: "100%", children: agentName ? agentName : "Error getting name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Text, { size: "tiny", secondary: true, ellipsis: true, maxWidth: "100%", children: agentRole ? agentRole : "Error getting role" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.DropdownBase, { options, selectedId: selectedStatus, onSelect: (option) => typeof option.id === "string" && handleStatusChange(option.id), className: "sidebar-avatar-dropdown", minWidth: 0, children: ({ toggle }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.TextButton, { className: "header-account-button", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system6.Box, { verticalAlign: "middle", gap: 2, textAlign: "start", maxWidth: "100%", minWidth: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Avatar, { presence: selectedStatus, name: agentName && !agentProfilePictureUrl ? agentName : void 0, size: "size30", imgProps: !agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl ? { src: agentProfilePictureUrl } : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_design_system6.Box, { direction: "vertical", gap: 0, verticalAlign: "middle", maxWidth: "100%", minWidth: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Text, { weight: "bold", size: "small", ellipsis: true, maxWidth: "100%", children: agentName ? agentName : "Error getting name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Text, { size: "tiny", secondary: true, ellipsis: true, maxWidth: "100%", children: agentRole ? agentRole : "Error getting role" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wix_ui_icons_common.ChevronDown, {})
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_wix_ui_icons_common.ChevronDown, {})
   ] }) }) });
 };
 var avatar_dropdown_wrapper_default = AvatarDropdown;
@@ -225,9 +514,8 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ee
 }
 
 // src/components/Sidebar/Sidebar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var import_meta = {};
-var Sidebar = (0, import_react3.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Sidebar = (0, import_react5.forwardRef)(
   ({
     className,
     children,
@@ -246,10 +534,10 @@ var Sidebar = (0, import_react3.forwardRef)(
     onLogout,
     permissions
   }, ref) => {
-    const [expandedSections, setExpandedSections] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
-    const [expanded, setExpanded] = (0, import_react3.useState)(true);
-    const [shouldShowExpandButton, setShouldShowExpandButton] = (0, import_react3.useState)(false);
-    const sidebarRef = (0, import_react3.useRef)(null);
+    const [expandedSections, setExpandedSections] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
+    const [expanded, setExpanded] = (0, import_react5.useState)(true);
+    const [shouldShowExpandButton, setShouldShowExpandButton] = (0, import_react5.useState)(false);
+    const sidebarRef = (0, import_react5.useRef)(null);
     const SIDEBAR_EXPANDED_WIDTH = "210px";
     const toggleSection = (sectionId) => {
       const newExpanded = new Set(expandedSections);
@@ -291,16 +579,16 @@ var Sidebar = (0, import_react3.forwardRef)(
       }
     };
     const rootItems = items.filter((item) => !item.parent || item.parent === "default");
-    const currentUrl = new URL(import_meta.url);
+    const currentUrl = new URL("");
     const expandedClassName = expanded ? "expanded" : "closed";
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "sidebar-outer-wrapper", ref, children: [
-      shouldShowExpandButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onMouseEnter: () => setShouldShowExpandButton(true), onMouseLeave: () => setShouldShowExpandButton(false), className: "sidebar-expand-button-container", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onClick: toggleSidebar, children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_wix_ui_icons_common2.ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_wix_ui_icons_common2.ChevronRight, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: sidebarRef, className: `sidebar-container ${expanded ? "expanded" : "closed"}`, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onMouseEnter: () => setShouldShowExpandButton(true), onMouseLeave: () => setShouldShowExpandButton(false), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Box, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { width: "37px", height: "37px", src: currentUrl.origin + "/logo.png", alt: "My Tickets Logo", className: "sidebar-logo" }),
-          expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Text, { className: "header-title", children: "My Tickets" })
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "sidebar-outer-wrapper", ref, children: [
+      shouldShowExpandButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { onMouseEnter: () => setShouldShowExpandButton(true), onMouseLeave: () => setShouldShowExpandButton(false), className: "sidebar-expand-button-container", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { onClick: toggleSidebar, children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_wix_ui_icons_common2.ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_wix_ui_icons_common2.ChevronRight, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: sidebarRef, className: `sidebar-container ${expanded ? "expanded" : "closed"}`, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { onMouseEnter: () => setShouldShowExpandButton(true), onMouseLeave: () => setShouldShowExpandButton(false), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_design_system7.Box, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { width: "37px", height: "37px", src: currentUrl.origin + "/logo.png", alt: "My Tickets Logo", className: "sidebar-logo" }),
+          expanded && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Text, { className: "header-title", children: "My Tickets" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Box, { className: `sidebar-items-container ${expandedClassName}`, direction: "vertical", children: rootItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Box, { className: `sidebar-items-container ${expandedClassName}`, direction: "vertical", children: rootItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           sidebar_menu_item_default,
           {
             item,
@@ -318,9 +606,9 @@ var Sidebar = (0, import_react3.forwardRef)(
           },
           item.stateId
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Box, { direction: "horizontal", className: `sidebar-footer ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Box, { marginTop: "2px", maxWidth: "100%", minWidth: 0, children: [
-          expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(avatar_dropdown_wrapper_default, { status, onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }),
-          !expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Avatar, { name: agentName && !agentProfilePictureUrl ? agentName : void 0, size: "size30", imgProps: !agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl ? { src: agentProfilePictureUrl } : void 0 })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Box, { direction: "horizontal", className: `sidebar-footer ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_design_system7.Box, { marginTop: "2px", maxWidth: "100%", minWidth: 0, children: [
+          expanded && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(avatar_dropdown_wrapper_default, { status, onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }),
+          !expanded && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Avatar, { name: agentName && !agentProfilePictureUrl ? agentName : void 0, size: "size30", imgProps: !agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl ? { src: agentProfilePictureUrl } : void 0 })
         ] }) })
       ] }) })
     ] });