analytica-frontend-lib 1.1.56 → 1.1.57

package/dist/NotificationCard/index.d.mts

@@ -1,3 +1,3 @@
 import 'react/jsx-runtime';
 import 'react';
-export { j as LegacyNotificationCard, L as LegacyNotificationCardProps, i as NotificationCardProps, b as NotificationGroup, f as NotificationItem, e as default } from '../NotificationCard-kGUKNOqT.mjs';
+export { j as LegacyNotificationCard, L as LegacyNotificationCardProps, i as NotificationCardProps, b as NotificationGroup, f as NotificationItem, e as default } from '../NotificationCard-DpSGkWEa.mjs';

package/dist/NotificationCard/index.d.ts

@@ -1,3 +1,3 @@
 import 'react/jsx-runtime';
 import 'react';
-export { j as LegacyNotificationCard, L as LegacyNotificationCardProps, i as NotificationCardProps, b as NotificationGroup, f as NotificationItem, e as default } from '../NotificationCard-kGUKNOqT.js';
+export { j as LegacyNotificationCard, L as LegacyNotificationCardProps, i as NotificationCardProps, b as NotificationGroup, f as NotificationItem, e as default } from '../NotificationCard-DpSGkWEa.js';

package/dist/NotificationCard/index.js

@@ -1413,6 +1413,9 @@ var formatTimeAgo = (date) => {
   return new Date(date).toLocaleDateString("pt-BR");
 };
 
+// src/assets/img/mock-content.png
+var mock_content_default = "../mock-content-K2CDVG6P.png";
+
 // src/components/NotificationCard/NotificationCard.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var NotificationEmpty = ({
@@ -1542,10 +1545,23 @@ var NotificationList = ({
   onMarkAsReadById,
   onDeleteById,
   onNavigateById,
+  onGlobalNotificationClick,
   getActionLabel,
   renderEmpty,
-  className
+  className,
+  emptyStateImage
 }) => {
+  const [globalNotificationModal, setGlobalNotificationModal] = (0, import_react9.useState)({ isOpen: false, notification: null });
+  const handleGlobalNotificationClick = (notification) => {
+    if (onGlobalNotificationClick) {
+      onGlobalNotificationClick(notification);
+    } else {
+      setGlobalNotificationModal({
+        isOpen: true,
+        notification
+      });
+    }
+  };
   if (error) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-error-600", children: error }),
@@ -1574,28 +1590,59 @@ var NotificationList = ({
   if (!groupedNotifications || groupedNotifications.length === 0) {
     return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationEmpty, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
-    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      SingleNotificationCard,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col gap-0 w-full", className), children: [
+    groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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,
@@ -1618,6 +1665,7 @@ var NotificationCenter = ({
 }) => {
   const { isMobile } = useMobile();
   const [isModalOpen, setIsModalOpen] = (0, import_react9.useState)(false);
+  const [globalNotificationModal, setGlobalNotificationModal] = (0, import_react9.useState)({ isOpen: false, notification: null });
   const handleMobileClick = () => {
     setIsModalOpen(true);
     onFetchNotifications?.();
@@ -1630,10 +1678,6 @@ var NotificationCenter = ({
       onFetchNotifications?.();
     }
   }, [isActive, onFetchNotifications]);
-  const handleNavigate = (entityType, entityId, onCleanup) => {
-    onCleanup?.();
-    onNavigateById?.(entityType, entityId);
-  };
   const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     NotificationEmpty,
     {
@@ -1684,13 +1728,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
               }
             ) })
           ] })
@@ -1698,56 +1749,85 @@ var NotificationCenter = ({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu_default, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      IconButton_default,
-      {
-        active: isActive,
-        onClick: handleDesktopClick,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_phosphor_react5.Bell,
-          {
-            size: 24,
-            className: isActive ? "text-primary-950" : "text-primary"
-          }
-        ),
-        className
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      DropdownMenuContent,
-      {
-        className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
-        side: "bottom",
-        align: "end",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-4 py-3 border-b border-border-200", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationHeader, { unreadCount, variant: "dropdown" }),
-            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            NotificationList,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        IconButton_default,
+        {
+          active: isActive,
+          onClick: handleDesktopClick,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_phosphor_react5.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_runtime10.jsx)(
+        DropdownMenuContent,
+        {
+          className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
+          side: "bottom",
+          align: "end",
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-4 py-3 border-b border-border-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                NotificationHeader,
+                {
+                  unreadCount,
+                  variant: "dropdown"
+                }
+              ),
+              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              NotificationList,
+              {
+                groupedNotifications,
+                loading,
+                error,
+                onRetry,
+                onMarkAsReadById,
+                onDeleteById,
+                onNavigateById,
+                onGlobalNotificationClick: (notification) => {
+                  setGlobalNotificationModal({
+                    isOpen: true,
+                    notification
+                  });
+                },
+                getActionLabel,
+                renderEmpty: renderEmptyState,
+                emptyStateImage
+              }
+            ) })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.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"
       }
     )
   ] });
@@ -1785,9 +1865,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":
@@ -1820,9 +1902,11 @@ var LegacyNotificationCard = (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
       }
     );
   }