analytica-frontend-lib 1.1.56 → 1.1.58

package/dist/index.js

@@ -5261,6 +5261,8 @@ var CardAudio = (0, import_react16.forwardRef)(
     const [showSpeedMenu, setShowSpeedMenu] = (0, import_react16.useState)(false);
     const [playbackRate, setPlaybackRate] = (0, import_react16.useState)(1);
     const audioRef = (0, import_react16.useRef)(null);
+    const volumeControlRef = (0, import_react16.useRef)(null);
+    const speedMenuRef = (0, import_react16.useRef)(null);
     const formatTime2 = (time) => {
       const minutes = Math.floor(time / 60);
       const seconds = Math.floor(time % 60);
@@ -5312,9 +5314,11 @@ var CardAudio = (0, import_react16.forwardRef)(
     };
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
+      setShowSpeedMenu(false);
     };
     const toggleSpeedMenu = () => {
       setShowSpeedMenu(!showSpeedMenu);
+      setShowVolumeControl(false);
     };
     const handleSpeedChange = (speed) => {
       setPlaybackRate(speed);
@@ -5332,6 +5336,20 @@ var CardAudio = (0, import_react16.forwardRef)(
       }
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_phosphor_react13.SpeakerHigh, { size: 24 });
     };
+    (0, import_react16.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (volumeControlRef.current && !volumeControlRef.current.contains(event.target)) {
+          setShowVolumeControl(false);
+        }
+        if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+          setShowSpeedMenu(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       CardBase,
       {
@@ -5420,7 +5438,7 @@ var CardAudio = (0, import_react16.forwardRef)(
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime2(duration) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative h-6", ref: volumeControlRef, children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
@@ -5482,7 +5500,7 @@ var CardAudio = (0, import_react16.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative h-6", ref: speedMenuRef, children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
@@ -7423,6 +7441,8 @@ var SpeedMenu = ({
   isFullscreen
 }) => {
   const buttonRef = (0, import_react25.useRef)(null);
+  const speedMenuContainerRef = (0, import_react25.useRef)(null);
+  const speedMenuRef = (0, import_react25.useRef)(null);
   const getMenuPosition = () => {
     if (!buttonRef.current) return { top: 0, left: 0 };
     const rect = buttonRef.current.getBoundingClientRect();
@@ -7433,9 +7453,26 @@ var SpeedMenu = ({
     };
   };
   const position = getMenuPosition();
+  (0, import_react25.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isOutsideContainer = speedMenuContainerRef.current && !speedMenuContainerRef.current.contains(target);
+      const isOutsideMenu = speedMenuRef.current && !speedMenuRef.current.contains(target);
+      if (isOutsideContainer && isOutsideMenu) {
+        onToggleMenu();
+      }
+    };
+    if (showSpeedMenu) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showSpeedMenu, onToggleMenu]);
   const menuContent = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
+      ref: speedMenuRef,
       role: "menu",
       "aria-label": "Playback speed",
       className: isFullscreen ? "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20 z-[9999]" : "fixed bg-black/90 rounded-lg p-2 min-w-20 z-[9999]",
@@ -7460,7 +7497,7 @@ var SpeedMenu = ({
     }
   );
   const portalContent = typeof window !== "undefined" && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(menuContent, document.body) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", ref: speedMenuContainerRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       IconButton_default,
       {
@@ -10726,7 +10763,8 @@ var mapBackendNotification = (backendNotification) => {
     entityId: backendNotification.entityId,
     sender: backendNotification.sender,
     activity: backendNotification.activity,
-    goal: backendNotification.goal
+    goal: backendNotification.goal,
+    actionLink: backendNotification.actionLink ?? null
   };
 };
 var groupNotificationsByTime = (notifications) => {
@@ -10920,6 +10958,9 @@ var createNotificationStore = (apiClient) => {
   );
 };
 
+// src/assets/img/mock-content.png
+var mock_content_default = "./mock-content-K2CDVG6P.png";
+
 // src/components/NotificationCard/NotificationCard.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var NotificationEmpty = ({
@@ -11049,10 +11090,23 @@ var NotificationList = ({
   onMarkAsReadById,
   onDeleteById,
   onNavigateById,
+  onGlobalNotificationClick,
   getActionLabel,
   renderEmpty,
-  className
+  className,
+  emptyStateImage
 }) => {
+  const [globalNotificationModal, setGlobalNotificationModal] = (0, import_react32.useState)({ isOpen: false, notification: null });
+  const handleGlobalNotificationClick = (notification) => {
+    if (onGlobalNotificationClick) {
+      onGlobalNotificationClick(notification);
+    } else {
+      setGlobalNotificationModal({
+        isOpen: true,
+        notification
+      });
+    }
+  };
   if (error) {
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm text-error-600", children: error }),
@@ -11081,28 +11135,59 @@ var NotificationList = ({
   if (!groupedNotifications || groupedNotifications.length === 0) {
     return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationEmpty, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
-    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      SingleNotificationCard,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-0 w-full", className), children: [
+    groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
+      group.notifications.map((notification) => {
+        const isGlobalNotification = !notification.entityType && !notification.entityId && !notification.activity && !notification.goal;
+        let navigationHandler;
+        if (isGlobalNotification) {
+          navigationHandler = () => handleGlobalNotificationClick(notification);
+        } else if (notification.entityType && notification.entityId && onNavigateById) {
+          navigationHandler = () => onNavigateById(
+            notification.entityType ?? void 0,
+            notification.entityId ?? void 0
+          );
+        }
+        let actionLabel;
+        if (isGlobalNotification) {
+          actionLabel = getActionLabel?.(void 0);
+        } else {
+          actionLabel = getActionLabel?.(
+            notification.entityType ?? void 0
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          SingleNotificationCard,
+          {
+            title: notification.title,
+            message: notification.message,
+            time: notification.time ?? formatTimeAgo(new Date(notification.createdAt)),
+            isRead: notification.isRead,
+            onMarkAsRead: () => onMarkAsReadById?.(notification.id),
+            onDelete: () => onDeleteById?.(notification.id),
+            onNavigate: navigationHandler,
+            actionLabel
+          },
+          notification.id
+        );
+      })
+    ] }, `${group.label}-${idx}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Modal_default,
       {
-        title: notification.title,
-        message: notification.message,
-        time: notification.time ?? formatTimeAgo(new Date(notification.createdAt)),
-        isRead: notification.isRead,
-        onMarkAsRead: () => onMarkAsReadById?.(notification.id),
-        onDelete: () => onDeleteById?.(notification.id),
-        onNavigate: notification.entityType && notification.entityId && onNavigateById ? () => onNavigateById(
-          notification.entityType ?? void 0,
-          notification.entityId ?? void 0
-        ) : void 0,
-        actionLabel: getActionLabel?.(
-          notification.entityType ?? void 0
-        )
-      },
-      notification.id
-    ))
-  ] }, `${group.label}-${idx}`)) });
+        isOpen: globalNotificationModal.isOpen,
+        onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
+        title: globalNotificationModal.notification?.title || "",
+        description: globalNotificationModal.notification?.message || "",
+        variant: "activity",
+        image: emptyStateImage || mock_content_default,
+        actionLink: globalNotificationModal.notification?.actionLink || void 0,
+        actionLabel: "Ver mais",
+        size: "lg"
+      }
+    )
+  ] });
 };
 var NotificationCenter = ({
   isActive,
@@ -11125,6 +11210,7 @@ var NotificationCenter = ({
 }) => {
   const { isMobile } = useMobile();
   const [isModalOpen, setIsModalOpen] = (0, import_react32.useState)(false);
+  const [globalNotificationModal, setGlobalNotificationModal] = (0, import_react32.useState)({ isOpen: false, notification: null });
   const handleMobileClick = () => {
     setIsModalOpen(true);
     onFetchNotifications?.();
@@ -11137,10 +11223,6 @@ var NotificationCenter = ({
       onFetchNotifications?.();
     }
   }, [isActive, onFetchNotifications]);
-  const handleNavigate = (entityType, entityId, onCleanup) => {
-    onCleanup?.();
-    onNavigateById?.(entityType, entityId);
-  };
   const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     NotificationEmpty,
     {
@@ -11191,13 +11273,20 @@ var NotificationCenter = ({
                 onRetry,
                 onMarkAsReadById,
                 onDeleteById,
-                onNavigateById: (entityType, entityId) => handleNavigate(
-                  entityType,
-                  entityId,
-                  () => setIsModalOpen(false)
-                ),
+                onNavigateById: (entityType, entityId) => {
+                  setIsModalOpen(false);
+                  onNavigateById?.(entityType, entityId);
+                },
+                onGlobalNotificationClick: (notification) => {
+                  setIsModalOpen(false);
+                  setGlobalNotificationModal({
+                    isOpen: true,
+                    notification
+                  });
+                },
                 getActionLabel,
-                renderEmpty: renderEmptyState
+                renderEmpty: renderEmptyState,
+                emptyStateImage
               }
             ) })
           ] })
@@ -11205,56 +11294,85 @@ var NotificationCenter = ({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DropdownMenu_default, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      IconButton_default,
-      {
-        active: isActive,
-        onClick: handleDesktopClick,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_phosphor_react22.Bell,
-          {
-            size: 24,
-            className: isActive ? "text-primary-950" : "text-primary"
-          }
-        ),
-        className
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      DropdownMenuContent,
-      {
-        className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
-        side: "bottom",
-        align: "end",
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-4 py-3 border-b border-border-200", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationHeader, { unreadCount, variant: "dropdown" }),
-            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onMarkAllAsRead,
-                className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
-                children: "Marcar todas como lidas"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            NotificationList,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DropdownMenu_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        IconButton_default,
+        {
+          active: isActive,
+          onClick: handleDesktopClick,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            import_phosphor_react22.Bell,
             {
-              groupedNotifications,
-              loading,
-              error,
-              onRetry,
-              onMarkAsReadById,
-              onDeleteById,
-              onNavigateById: (entityType, entityId) => handleNavigate(entityType, entityId),
-              getActionLabel,
-              renderEmpty: renderEmptyState
+              size: 24,
+              className: isActive ? "text-primary-950" : "text-primary"
             }
-          ) })
-        ] })
+          ),
+          className
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        DropdownMenuContent,
+        {
+          className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
+          side: "bottom",
+          align: "end",
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-4 py-3 border-b border-border-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                NotificationHeader,
+                {
+                  unreadCount,
+                  variant: "dropdown"
+                }
+              ),
+              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onMarkAllAsRead,
+                  className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
+                  children: "Marcar todas como lidas"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              NotificationList,
+              {
+                groupedNotifications,
+                loading,
+                error,
+                onRetry,
+                onMarkAsReadById,
+                onDeleteById,
+                onNavigateById,
+                onGlobalNotificationClick: (notification) => {
+                  setGlobalNotificationModal({
+                    isOpen: true,
+                    notification
+                  });
+                },
+                getActionLabel,
+                renderEmpty: renderEmptyState,
+                emptyStateImage
+              }
+            ) })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Modal_default,
+      {
+        isOpen: globalNotificationModal.isOpen,
+        onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
+        title: globalNotificationModal.notification?.title || "",
+        variant: "activity",
+        description: globalNotificationModal.notification?.message,
+        image: emptyStateImage || mock_content_default,
+        actionLink: globalNotificationModal.notification?.actionLink || void 0,
+        actionLabel: "Ver mais",
+        size: "lg"
       }
     )
   ] });
@@ -11292,9 +11410,11 @@ var NotificationCard = (props) => {
           onMarkAsReadById: props.onMarkAsReadById,
           onDeleteById: props.onDeleteById,
           onNavigateById: props.onNavigateById,
+          onGlobalNotificationClick: props.onGlobalNotificationClick,
           getActionLabel: props.getActionLabel,
           renderEmpty: props.renderEmpty,
-          className: props.className
+          className: props.className,
+          emptyStateImage: props.emptyStateImage
         }
       );
     case "center":