@jrapps/my_tickets_dashboard_ui 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cjs/components/Sidebar/index.js +10 -9
- package/dist/cjs/components/Sidebar/index.js.map +2 -2
- package/dist/cjs/index.js +10 -9
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/chunks/{chunk-4XEQQFOL.js → chunk-J6M35QHA.js} +12 -12
- package/dist/esm/chunks/chunk-J6M35QHA.js.map +7 -0
- package/dist/esm/components/Sidebar/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/components/Sidebar/Sidebar.d.ts.map +1 -1
- package/dist/types/components/Sidebar/Sidebar.types.d.ts +1 -0
- package/dist/types/components/Sidebar/Sidebar.types.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/esm/chunks/chunk-4XEQQFOL.js.map +0 -7
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
# My Tickets Dashboard UI
|
|
@@ -66,7 +66,7 @@ var SidebarMenuItem = ({
|
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
68
|
} else if (actionItem.type === "custom_modal") {
|
|
69
|
-
onCreateTicketClicked
|
|
69
|
+
onCreateTicketClicked?.();
|
|
70
70
|
} else if (actionItem.type === "link") {
|
|
71
71
|
const generatedLink = await import_dashboard.dashboard.getPageUrl({ pageId: "9f1191cb-46cb-4280-af8d-5c15d89aced8", relativeUrl: actionItem.link || "" });
|
|
72
72
|
window.open(generatedLink, "_blank");
|
|
@@ -121,7 +121,7 @@ var SidebarMenuItem = ({
|
|
|
121
121
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-title", children: item.label }),
|
|
122
122
|
item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
|
|
123
123
|
] }),
|
|
124
|
-
item
|
|
124
|
+
item?.showTotalCount && item?.showTotalCount === true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.CounterBadge, { size: "medium", skin: "warning", children: String(itemTotalCount) })
|
|
125
125
|
] }) }) })
|
|
126
126
|
]
|
|
127
127
|
},
|
|
@@ -182,21 +182,21 @@ var AvatarDropdown = ({ status = "online", onStatusChange, onLogout, permissions
|
|
|
182
182
|
checkbox: true,
|
|
183
183
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.Online, {}),
|
|
184
184
|
title: "Online",
|
|
185
|
-
disabled:
|
|
185
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
186
186
|
}),
|
|
187
187
|
(0, import_design_system2.listItemSelectBuilder)({
|
|
188
188
|
id: "busy",
|
|
189
189
|
checkbox: true,
|
|
190
190
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.Away, {}),
|
|
191
191
|
title: "Away",
|
|
192
|
-
disabled:
|
|
192
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
193
193
|
}),
|
|
194
194
|
(0, import_design_system2.listItemSelectBuilder)({
|
|
195
195
|
id: "offline",
|
|
196
196
|
checkbox: true,
|
|
197
197
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.DoNotDisturb, {}),
|
|
198
198
|
title: "Offline",
|
|
199
|
-
disabled:
|
|
199
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
200
200
|
}),
|
|
201
201
|
{ id: "divider-1", value: "-" },
|
|
202
202
|
(0, import_design_system2.listItemActionBuilder)({
|
|
@@ -248,6 +248,7 @@ var Sidebar = (0, import_react3.forwardRef)(
|
|
|
248
248
|
}, ref) => {
|
|
249
249
|
const [expandedSections, setExpandedSections] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
|
|
250
250
|
const [expanded, setExpanded] = (0, import_react3.useState)(true);
|
|
251
|
+
const [shouldShowExpandButton, setShouldShowExpandButton] = (0, import_react3.useState)(false);
|
|
251
252
|
const sidebarRef = (0, import_react3.useRef)(null);
|
|
252
253
|
const SIDEBAR_EXPANDED_WIDTH = "210px";
|
|
253
254
|
const toggleSection = (sectionId) => {
|
|
@@ -260,7 +261,7 @@ var Sidebar = (0, import_react3.forwardRef)(
|
|
|
260
261
|
setExpandedSections(newExpanded);
|
|
261
262
|
};
|
|
262
263
|
const handleItemClick = (id) => {
|
|
263
|
-
onItemSelect
|
|
264
|
+
onItemSelect?.(id);
|
|
264
265
|
};
|
|
265
266
|
const toggleSidebar = () => {
|
|
266
267
|
const el = sidebarRef.current;
|
|
@@ -293,12 +294,12 @@ var Sidebar = (0, import_react3.forwardRef)(
|
|
|
293
294
|
const currentUrl = new URL(import_meta.url);
|
|
294
295
|
const expandedClassName = expanded ? "expanded" : "closed";
|
|
295
296
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "sidebar-outer-wrapper", ref, children: [
|
|
296
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { 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, {}) }) }),
|
|
297
|
+
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, {}) }) }),
|
|
297
298
|
/* @__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: [
|
|
298
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Box, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
|
|
299
|
+
/* @__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: [
|
|
299
300
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { width: "37px", height: "37px", src: currentUrl.origin + "/logo.png", alt: "My Tickets Logo", className: "sidebar-logo" }),
|
|
300
301
|
expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Text, { className: "header-title", children: "My Tickets" })
|
|
301
|
-
] }),
|
|
302
|
+
] }) }),
|
|
302
303
|
/* @__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)(
|
|
303
304
|
sidebar_menu_item_default,
|
|
304
305
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Sidebar/index.ts", "../../../../src/components/Sidebar/Sidebar.tsx", "../../../../src/components/Sidebar/sidebar-menu-item.tsx", "../../../../src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx", "../../../../src/components/Sidebar/footer/status-dots.wrapper.tsx", "../../../../src/components/Sidebar/Sidebar.css"],
|
|
4
|
-
"sourcesContent": ["export { Sidebar } from './Sidebar';\nexport type { SidebarProps } from './Sidebar.types';\n", "import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({ \n className, \n children, \n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n <div className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item.stateId === \"chats\" && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6C;AAE7C,IAAAC,wBAAkC;AAClC,IAAAC,8BAA0C;;;ACF1C,mBAAoC;AACpC,2BAAwC;AACxC,uBAA0B;AAqDN;AAjDpB,IAAM,kBAA4C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA0B,UAAU;AAChF,QAAM,cAAc,MAAM,KAAK,OAAK,EAAE,WAAW,KAAK,OAAO;AAC7D,QAAM,aAAa,iBAAiB,IAAI,KAAK,OAAO;AACpD,QAAM,aAAa,eAAe,KAAK;AAEvC,8BAAU,MAAM;AACZ,sBAAkB,UAAU;AAAA,EAChC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAe,OAAO,eAA4B;AACpD,QAAI,WAAW,SAAS,QAAQ;AAC5B,kBAAY,WAAW,OAAO;AAAA,IAClC,WAAW,WAAW,SAAS,SAAS;AACpC,YAAM,EAAE,YAAY,IAAI,2BAAU,UAAU,EAAE,SAAS,OAAO,WAAW,OAAO,GAAG,QAAQ,WAAW,YAAY,CAAC;AACnH,kBAAY,KAAK,CAAC,WAAgB;AAC9B,YAAI,UAAU,eAAe;AACzB,wBAAc,MAAM;AAAA,QACxB;AAAA,MACJ,CAAC;AAAA,IACL,WAAW,WAAW,SAAS,gBAAgB;AAC3C;AAAA,
|
|
4
|
+
"sourcesContent": ["export { Sidebar } from './Sidebar';\nexport type { SidebarProps } from './Sidebar.types';\n", "import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({\n className,\n children,\n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n {shouldShowExpandButton && <div onMouseEnter={() => setShouldShowExpandButton(true)} onMouseLeave={() => setShouldShowExpandButton(false)} className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>}\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <div onMouseEnter={() => setShouldShowExpandButton(true)} onMouseLeave={() => setShouldShowExpandButton(false)}>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n </div>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item?.showTotalCount && item?.showTotalCount === true && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "import_design_system", "import_wix_ui_icons_common", "import_react", "import_design_system", "import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -66,7 +66,7 @@ var SidebarMenuItem = ({
|
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
68
|
} else if (actionItem.type === "custom_modal") {
|
|
69
|
-
onCreateTicketClicked
|
|
69
|
+
onCreateTicketClicked?.();
|
|
70
70
|
} else if (actionItem.type === "link") {
|
|
71
71
|
const generatedLink = await import_dashboard.dashboard.getPageUrl({ pageId: "9f1191cb-46cb-4280-af8d-5c15d89aced8", relativeUrl: actionItem.link || "" });
|
|
72
72
|
window.open(generatedLink, "_blank");
|
|
@@ -121,7 +121,7 @@ var SidebarMenuItem = ({
|
|
|
121
121
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-title", children: item.label }),
|
|
122
122
|
item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
|
|
123
123
|
] }),
|
|
124
|
-
item
|
|
124
|
+
item?.showTotalCount && item?.showTotalCount === true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.CounterBadge, { size: "medium", skin: "warning", children: String(itemTotalCount) })
|
|
125
125
|
] }) }) })
|
|
126
126
|
]
|
|
127
127
|
},
|
|
@@ -182,21 +182,21 @@ var AvatarDropdown = ({ status = "online", onStatusChange, onLogout, permissions
|
|
|
182
182
|
checkbox: true,
|
|
183
183
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.Online, {}),
|
|
184
184
|
title: "Online",
|
|
185
|
-
disabled:
|
|
185
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
186
186
|
}),
|
|
187
187
|
(0, import_design_system2.listItemSelectBuilder)({
|
|
188
188
|
id: "busy",
|
|
189
189
|
checkbox: true,
|
|
190
190
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.Away, {}),
|
|
191
191
|
title: "Away",
|
|
192
|
-
disabled:
|
|
192
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
193
193
|
}),
|
|
194
194
|
(0, import_design_system2.listItemSelectBuilder)({
|
|
195
195
|
id: "offline",
|
|
196
196
|
checkbox: true,
|
|
197
197
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(status_dots_wrapper_default.DoNotDisturb, {}),
|
|
198
198
|
title: "Offline",
|
|
199
|
-
disabled:
|
|
199
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
200
200
|
}),
|
|
201
201
|
{ id: "divider-1", value: "-" },
|
|
202
202
|
(0, import_design_system2.listItemActionBuilder)({
|
|
@@ -248,6 +248,7 @@ var Sidebar = (0, import_react3.forwardRef)(
|
|
|
248
248
|
}, ref) => {
|
|
249
249
|
const [expandedSections, setExpandedSections] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
|
|
250
250
|
const [expanded, setExpanded] = (0, import_react3.useState)(true);
|
|
251
|
+
const [shouldShowExpandButton, setShouldShowExpandButton] = (0, import_react3.useState)(false);
|
|
251
252
|
const sidebarRef = (0, import_react3.useRef)(null);
|
|
252
253
|
const SIDEBAR_EXPANDED_WIDTH = "210px";
|
|
253
254
|
const toggleSection = (sectionId) => {
|
|
@@ -260,7 +261,7 @@ var Sidebar = (0, import_react3.forwardRef)(
|
|
|
260
261
|
setExpandedSections(newExpanded);
|
|
261
262
|
};
|
|
262
263
|
const handleItemClick = (id) => {
|
|
263
|
-
onItemSelect
|
|
264
|
+
onItemSelect?.(id);
|
|
264
265
|
};
|
|
265
266
|
const toggleSidebar = () => {
|
|
266
267
|
const el = sidebarRef.current;
|
|
@@ -293,12 +294,12 @@ var Sidebar = (0, import_react3.forwardRef)(
|
|
|
293
294
|
const currentUrl = new URL(import_meta.url);
|
|
294
295
|
const expandedClassName = expanded ? "expanded" : "closed";
|
|
295
296
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "sidebar-outer-wrapper", ref, children: [
|
|
296
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { 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, {}) }) }),
|
|
297
|
+
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, {}) }) }),
|
|
297
298
|
/* @__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: [
|
|
298
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system3.Box, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
|
|
299
|
+
/* @__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: [
|
|
299
300
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { width: "37px", height: "37px", src: currentUrl.origin + "/logo.png", alt: "My Tickets Logo", className: "sidebar-logo" }),
|
|
300
301
|
expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Text, { className: "header-title", children: "My Tickets" })
|
|
301
|
-
] }),
|
|
302
|
+
] }) }),
|
|
302
303
|
/* @__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)(
|
|
303
304
|
sidebar_menu_item_default,
|
|
304
305
|
{
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../src/components/Sidebar/Sidebar.tsx", "../../src/components/Sidebar/sidebar-menu-item.tsx", "../../src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx", "../../src/components/Sidebar/footer/status-dots.wrapper.tsx", "../../src/components/Sidebar/Sidebar.css"],
|
|
4
|
-
"sourcesContent": ["export * from './components';", "import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({ \n className, \n children, \n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n <div className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item.stateId === \"chats\" && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6C;AAE7C,IAAAC,wBAAkC;AAClC,IAAAC,8BAA0C;;;ACF1C,mBAAoC;AACpC,2BAAwC;AACxC,uBAA0B;AAqDN;AAjDpB,IAAM,kBAA4C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA0B,UAAU;AAChF,QAAM,cAAc,MAAM,KAAK,OAAK,EAAE,WAAW,KAAK,OAAO;AAC7D,QAAM,aAAa,iBAAiB,IAAI,KAAK,OAAO;AACpD,QAAM,aAAa,eAAe,KAAK;AAEvC,8BAAU,MAAM;AACZ,sBAAkB,UAAU;AAAA,EAChC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAe,OAAO,eAA4B;AACpD,QAAI,WAAW,SAAS,QAAQ;AAC5B,kBAAY,WAAW,OAAO;AAAA,IAClC,WAAW,WAAW,SAAS,SAAS;AACpC,YAAM,EAAE,YAAY,IAAI,2BAAU,UAAU,EAAE,SAAS,OAAO,WAAW,OAAO,GAAG,QAAQ,WAAW,YAAY,CAAC;AACnH,kBAAY,KAAK,CAAC,WAAgB;AAC9B,YAAI,UAAU,eAAe;AACzB,wBAAc,MAAM;AAAA,QACxB;AAAA,MACJ,CAAC;AAAA,IACL,WAAW,WAAW,SAAS,gBAAgB;AAC3C;AAAA,
|
|
4
|
+
"sourcesContent": ["export * from './components';", "import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({\n className,\n children,\n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n {shouldShowExpandButton && <div onMouseEnter={() => setShouldShowExpandButton(true)} onMouseLeave={() => setShouldShowExpandButton(false)} className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>}\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <div onMouseEnter={() => setShouldShowExpandButton(true)} onMouseLeave={() => setShouldShowExpandButton(false)}>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n </div>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item?.showTotalCount && item?.showTotalCount === true && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "import_design_system", "import_wix_ui_icons_common", "import_react", "import_design_system", "import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime"]
|
|
7
7
|
}
|
|
@@ -40,7 +40,7 @@ var SidebarMenuItem = ({
|
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
} else if (actionItem.type === "custom_modal") {
|
|
43
|
-
onCreateTicketClicked
|
|
43
|
+
onCreateTicketClicked?.();
|
|
44
44
|
} else if (actionItem.type === "link") {
|
|
45
45
|
const generatedLink = await dashboard.getPageUrl({ pageId: "9f1191cb-46cb-4280-af8d-5c15d89aced8", relativeUrl: actionItem.link || "" });
|
|
46
46
|
window.open(generatedLink, "_blank");
|
|
@@ -95,7 +95,7 @@ var SidebarMenuItem = ({
|
|
|
95
95
|
/* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-title", children: item.label }),
|
|
96
96
|
item.subtitle && /* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
|
|
97
97
|
] }),
|
|
98
|
-
item
|
|
98
|
+
item?.showTotalCount && item?.showTotalCount === true && /* @__PURE__ */ jsx(CounterBadge, { size: "medium", skin: "warning", children: String(itemTotalCount) })
|
|
99
99
|
] }) }) })
|
|
100
100
|
]
|
|
101
101
|
},
|
|
@@ -165,21 +165,21 @@ var AvatarDropdown = ({ status = "online", onStatusChange, onLogout, permissions
|
|
|
165
165
|
checkbox: true,
|
|
166
166
|
prefix: /* @__PURE__ */ jsx3(status_dots_wrapper_default.Online, {}),
|
|
167
167
|
title: "Online",
|
|
168
|
-
disabled:
|
|
168
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
169
169
|
}),
|
|
170
170
|
listItemSelectBuilder({
|
|
171
171
|
id: "busy",
|
|
172
172
|
checkbox: true,
|
|
173
173
|
prefix: /* @__PURE__ */ jsx3(status_dots_wrapper_default.Away, {}),
|
|
174
174
|
title: "Away",
|
|
175
|
-
disabled:
|
|
175
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
176
176
|
}),
|
|
177
177
|
listItemSelectBuilder({
|
|
178
178
|
id: "offline",
|
|
179
179
|
checkbox: true,
|
|
180
180
|
prefix: /* @__PURE__ */ jsx3(status_dots_wrapper_default.DoNotDisturb, {}),
|
|
181
181
|
title: "Offline",
|
|
182
|
-
disabled:
|
|
182
|
+
disabled: permissions?.["my-tickets-change-agent-online-status"] === true ? false : true
|
|
183
183
|
}),
|
|
184
184
|
{ id: "divider-1", value: "-" },
|
|
185
185
|
listItemActionBuilder({
|
|
@@ -208,7 +208,6 @@ if (typeof document !== "undefined" && !document.getElementById("jrapps-style-ee
|
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
// src/components/Sidebar/Sidebar.tsx
|
|
211
|
-
var import_meta = {};
|
|
212
211
|
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
213
212
|
var Sidebar = forwardRef(
|
|
214
213
|
({
|
|
@@ -231,6 +230,7 @@ var Sidebar = forwardRef(
|
|
|
231
230
|
}, ref) => {
|
|
232
231
|
const [expandedSections, setExpandedSections] = useState3(/* @__PURE__ */ new Set());
|
|
233
232
|
const [expanded, setExpanded] = useState3(true);
|
|
233
|
+
const [shouldShowExpandButton, setShouldShowExpandButton] = useState3(false);
|
|
234
234
|
const sidebarRef = useRef(null);
|
|
235
235
|
const SIDEBAR_EXPANDED_WIDTH = "210px";
|
|
236
236
|
const toggleSection = (sectionId) => {
|
|
@@ -243,7 +243,7 @@ var Sidebar = forwardRef(
|
|
|
243
243
|
setExpandedSections(newExpanded);
|
|
244
244
|
};
|
|
245
245
|
const handleItemClick = (id) => {
|
|
246
|
-
onItemSelect
|
|
246
|
+
onItemSelect?.(id);
|
|
247
247
|
};
|
|
248
248
|
const toggleSidebar = () => {
|
|
249
249
|
const el = sidebarRef.current;
|
|
@@ -273,15 +273,15 @@ var Sidebar = forwardRef(
|
|
|
273
273
|
}
|
|
274
274
|
};
|
|
275
275
|
const rootItems = items.filter((item) => !item.parent || item.parent === "default");
|
|
276
|
-
const currentUrl = new URL(
|
|
276
|
+
const currentUrl = new URL(import.meta.url);
|
|
277
277
|
const expandedClassName = expanded ? "expanded" : "closed";
|
|
278
278
|
return /* @__PURE__ */ jsxs3("div", { className: "sidebar-outer-wrapper", ref, children: [
|
|
279
|
-
/* @__PURE__ */ jsx4("div", { className: "sidebar-expand-button-container", children: /* @__PURE__ */ jsx4("div", { onClick: toggleSidebar, children: expanded ? /* @__PURE__ */ jsx4(ChevronLeft, {}) : /* @__PURE__ */ jsx4(ChevronRight, {}) }) }),
|
|
279
|
+
shouldShowExpandButton && /* @__PURE__ */ jsx4("div", { onMouseEnter: () => setShouldShowExpandButton(true), onMouseLeave: () => setShouldShowExpandButton(false), className: "sidebar-expand-button-container", children: /* @__PURE__ */ jsx4("div", { onClick: toggleSidebar, children: expanded ? /* @__PURE__ */ jsx4(ChevronLeft, {}) : /* @__PURE__ */ jsx4(ChevronRight, {}) }) }),
|
|
280
280
|
/* @__PURE__ */ jsx4("div", { ref: sidebarRef, className: `sidebar-container ${expanded ? "expanded" : "closed"}`, children: isOpen && /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
281
|
-
/* @__PURE__ */ jsxs3(Box3, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
|
|
281
|
+
/* @__PURE__ */ jsx4("div", { onMouseEnter: () => setShouldShowExpandButton(true), onMouseLeave: () => setShouldShowExpandButton(false), children: /* @__PURE__ */ jsxs3(Box3, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
|
|
282
282
|
/* @__PURE__ */ jsx4("img", { width: "37px", height: "37px", src: currentUrl.origin + "/logo.png", alt: "My Tickets Logo", className: "sidebar-logo" }),
|
|
283
283
|
expanded && /* @__PURE__ */ jsx4(Text3, { className: "header-title", children: "My Tickets" })
|
|
284
|
-
] }),
|
|
284
|
+
] }) }),
|
|
285
285
|
/* @__PURE__ */ jsx4(Box3, { className: `sidebar-items-container ${expandedClassName}`, direction: "vertical", children: rootItems.map((item) => /* @__PURE__ */ jsx4(
|
|
286
286
|
sidebar_menu_item_default,
|
|
287
287
|
{
|
|
@@ -313,4 +313,4 @@ Sidebar.displayName = "Sidebar";
|
|
|
313
313
|
export {
|
|
314
314
|
Sidebar
|
|
315
315
|
};
|
|
316
|
-
//# sourceMappingURL=chunk-
|
|
316
|
+
//# sourceMappingURL=chunk-J6M35QHA.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/Sidebar/Sidebar.tsx", "../../../src/components/Sidebar/sidebar-menu-item.tsx", "../../../src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx", "../../../src/components/Sidebar/footer/status-dots.wrapper.tsx", "../../../src/components/Sidebar/Sidebar.css"],
|
|
4
|
+
"sourcesContent": ["import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({\n className,\n children,\n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n {shouldShowExpandButton && <div onMouseEnter={() => setShouldShowExpandButton(true)} onMouseLeave={() => setShouldShowExpandButton(false)} className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>}\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <div onMouseEnter={() => setShouldShowExpandButton(true)} onMouseLeave={() => setShouldShowExpandButton(false)}>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n </div>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item?.showTotalCount && item?.showTotalCount === true && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useState", "Avatar", "Box", "Text", "useState", "Box", "Text", "jsx", "jsx", "jsxs", "useState", "Box", "Text", "Fragment", "jsx", "jsxs", "useState", "Box", "Text", "Avatar"]
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKpD,OAAO,eAAe,CAAC;AAEvB,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKpD,OAAO,eAAe,CAAC;AAEvB,eAAO,MAAM,OAAO,yGAoHnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAGxD,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnD,MAAM,WAAW,0BAA0B;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAGxD,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnD,MAAM,WAAW,0BAA0B;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B"}
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/Sidebar/Sidebar.tsx", "../../../src/components/Sidebar/sidebar-menu-item.tsx", "../../../src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx", "../../../src/components/Sidebar/footer/status-dots.wrapper.tsx", "../../../src/components/Sidebar/Sidebar.css"],
|
|
4
|
-
"sourcesContent": ["import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({ \n className, \n children, \n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n <div className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item.stateId === \"chats\" && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["useState", "Avatar", "Box", "Text", "useState", "Box", "Text", "jsx", "jsx", "jsxs", "useState", "Box", "Text", "Fragment", "jsx", "jsxs", "useState", "Box", "Text", "Avatar"]
|
|
7
|
-
}
|