analytica-frontend-lib 1.1.55 → 1.1.57
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/dist/NotificationCard/index.d.mts +1 -1
- package/dist/NotificationCard/index.d.ts +1 -1
- package/dist/NotificationCard/index.js +166 -82
- package/dist/NotificationCard/index.js.map +1 -1
- package/dist/NotificationCard/index.mjs +166 -82
- package/dist/NotificationCard/index.mjs.map +1 -1
- package/dist/{NotificationCard-kGUKNOqT.d.mts → NotificationCard-DpSGkWEa.d.mts} +10 -0
- package/dist/{NotificationCard-kGUKNOqT.d.ts → NotificationCard-DpSGkWEa.d.ts} +10 -0
- package/dist/index.css +19 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +165 -82
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +165 -82
- package/dist/index.mjs.map +1 -1
- package/dist/mock-content-K2CDVG6P.png +0 -0
- package/dist/styles.css +19 -0
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -10694,7 +10694,8 @@ var mapBackendNotification = (backendNotification) => {
|
|
|
10694
10694
|
entityId: backendNotification.entityId,
|
|
10695
10695
|
sender: backendNotification.sender,
|
|
10696
10696
|
activity: backendNotification.activity,
|
|
10697
|
-
goal: backendNotification.goal
|
|
10697
|
+
goal: backendNotification.goal,
|
|
10698
|
+
actionLink: backendNotification.actionLink ?? null
|
|
10698
10699
|
};
|
|
10699
10700
|
};
|
|
10700
10701
|
var groupNotificationsByTime = (notifications) => {
|
|
@@ -10888,6 +10889,9 @@ var createNotificationStore = (apiClient) => {
|
|
|
10888
10889
|
);
|
|
10889
10890
|
};
|
|
10890
10891
|
|
|
10892
|
+
// src/assets/img/mock-content.png
|
|
10893
|
+
var mock_content_default = "./mock-content-K2CDVG6P.png";
|
|
10894
|
+
|
|
10891
10895
|
// src/components/NotificationCard/NotificationCard.tsx
|
|
10892
10896
|
import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
10893
10897
|
var NotificationEmpty = ({
|
|
@@ -11017,10 +11021,23 @@ var NotificationList = ({
|
|
|
11017
11021
|
onMarkAsReadById,
|
|
11018
11022
|
onDeleteById,
|
|
11019
11023
|
onNavigateById,
|
|
11024
|
+
onGlobalNotificationClick,
|
|
11020
11025
|
getActionLabel,
|
|
11021
11026
|
renderEmpty,
|
|
11022
|
-
className
|
|
11027
|
+
className,
|
|
11028
|
+
emptyStateImage
|
|
11023
11029
|
}) => {
|
|
11030
|
+
const [globalNotificationModal, setGlobalNotificationModal] = useState20({ isOpen: false, notification: null });
|
|
11031
|
+
const handleGlobalNotificationClick = (notification) => {
|
|
11032
|
+
if (onGlobalNotificationClick) {
|
|
11033
|
+
onGlobalNotificationClick(notification);
|
|
11034
|
+
} else {
|
|
11035
|
+
setGlobalNotificationModal({
|
|
11036
|
+
isOpen: true,
|
|
11037
|
+
notification
|
|
11038
|
+
});
|
|
11039
|
+
}
|
|
11040
|
+
};
|
|
11024
11041
|
if (error) {
|
|
11025
11042
|
return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
|
|
11026
11043
|
/* @__PURE__ */ jsx42("p", { className: "text-sm text-error-600", children: error }),
|
|
@@ -11049,28 +11066,59 @@ var NotificationList = ({
|
|
|
11049
11066
|
if (!groupedNotifications || groupedNotifications.length === 0) {
|
|
11050
11067
|
return renderEmpty ? /* @__PURE__ */ jsx42("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ jsx42(NotificationEmpty, {});
|
|
11051
11068
|
}
|
|
11052
|
-
return /* @__PURE__ */
|
|
11053
|
-
|
|
11054
|
-
|
|
11055
|
-
|
|
11069
|
+
return /* @__PURE__ */ jsxs34("div", { className: cn("flex flex-col gap-0 w-full", className), children: [
|
|
11070
|
+
groupedNotifications.map((group, idx) => /* @__PURE__ */ jsxs34("div", { className: "flex flex-col", children: [
|
|
11071
|
+
/* @__PURE__ */ jsx42("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ jsx42("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
|
|
11072
|
+
group.notifications.map((notification) => {
|
|
11073
|
+
const isGlobalNotification = !notification.entityType && !notification.entityId && !notification.activity && !notification.goal;
|
|
11074
|
+
let navigationHandler;
|
|
11075
|
+
if (isGlobalNotification) {
|
|
11076
|
+
navigationHandler = () => handleGlobalNotificationClick(notification);
|
|
11077
|
+
} else if (notification.entityType && notification.entityId && onNavigateById) {
|
|
11078
|
+
navigationHandler = () => onNavigateById(
|
|
11079
|
+
notification.entityType ?? void 0,
|
|
11080
|
+
notification.entityId ?? void 0
|
|
11081
|
+
);
|
|
11082
|
+
}
|
|
11083
|
+
let actionLabel;
|
|
11084
|
+
if (isGlobalNotification) {
|
|
11085
|
+
actionLabel = getActionLabel?.(void 0);
|
|
11086
|
+
} else {
|
|
11087
|
+
actionLabel = getActionLabel?.(
|
|
11088
|
+
notification.entityType ?? void 0
|
|
11089
|
+
);
|
|
11090
|
+
}
|
|
11091
|
+
return /* @__PURE__ */ jsx42(
|
|
11092
|
+
SingleNotificationCard,
|
|
11093
|
+
{
|
|
11094
|
+
title: notification.title,
|
|
11095
|
+
message: notification.message,
|
|
11096
|
+
time: notification.time ?? formatTimeAgo(new Date(notification.createdAt)),
|
|
11097
|
+
isRead: notification.isRead,
|
|
11098
|
+
onMarkAsRead: () => onMarkAsReadById?.(notification.id),
|
|
11099
|
+
onDelete: () => onDeleteById?.(notification.id),
|
|
11100
|
+
onNavigate: navigationHandler,
|
|
11101
|
+
actionLabel
|
|
11102
|
+
},
|
|
11103
|
+
notification.id
|
|
11104
|
+
);
|
|
11105
|
+
})
|
|
11106
|
+
] }, `${group.label}-${idx}`)),
|
|
11107
|
+
/* @__PURE__ */ jsx42(
|
|
11108
|
+
Modal_default,
|
|
11056
11109
|
{
|
|
11057
|
-
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
|
|
11061
|
-
|
|
11062
|
-
|
|
11063
|
-
|
|
11064
|
-
|
|
11065
|
-
|
|
11066
|
-
|
|
11067
|
-
|
|
11068
|
-
|
|
11069
|
-
)
|
|
11070
|
-
},
|
|
11071
|
-
notification.id
|
|
11072
|
-
))
|
|
11073
|
-
] }, `${group.label}-${idx}`)) });
|
|
11110
|
+
isOpen: globalNotificationModal.isOpen,
|
|
11111
|
+
onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
|
|
11112
|
+
title: globalNotificationModal.notification?.title || "",
|
|
11113
|
+
description: globalNotificationModal.notification?.message || "",
|
|
11114
|
+
variant: "activity",
|
|
11115
|
+
image: emptyStateImage || mock_content_default,
|
|
11116
|
+
actionLink: globalNotificationModal.notification?.actionLink || void 0,
|
|
11117
|
+
actionLabel: "Ver mais",
|
|
11118
|
+
size: "lg"
|
|
11119
|
+
}
|
|
11120
|
+
)
|
|
11121
|
+
] });
|
|
11074
11122
|
};
|
|
11075
11123
|
var NotificationCenter = ({
|
|
11076
11124
|
isActive,
|
|
@@ -11093,6 +11141,7 @@ var NotificationCenter = ({
|
|
|
11093
11141
|
}) => {
|
|
11094
11142
|
const { isMobile } = useMobile();
|
|
11095
11143
|
const [isModalOpen, setIsModalOpen] = useState20(false);
|
|
11144
|
+
const [globalNotificationModal, setGlobalNotificationModal] = useState20({ isOpen: false, notification: null });
|
|
11096
11145
|
const handleMobileClick = () => {
|
|
11097
11146
|
setIsModalOpen(true);
|
|
11098
11147
|
onFetchNotifications?.();
|
|
@@ -11105,10 +11154,6 @@ var NotificationCenter = ({
|
|
|
11105
11154
|
onFetchNotifications?.();
|
|
11106
11155
|
}
|
|
11107
11156
|
}, [isActive, onFetchNotifications]);
|
|
11108
|
-
const handleNavigate = (entityType, entityId, onCleanup) => {
|
|
11109
|
-
onCleanup?.();
|
|
11110
|
-
onNavigateById?.(entityType, entityId);
|
|
11111
|
-
};
|
|
11112
11157
|
const renderEmptyState = () => /* @__PURE__ */ jsx42(
|
|
11113
11158
|
NotificationEmpty,
|
|
11114
11159
|
{
|
|
@@ -11159,13 +11204,20 @@ var NotificationCenter = ({
|
|
|
11159
11204
|
onRetry,
|
|
11160
11205
|
onMarkAsReadById,
|
|
11161
11206
|
onDeleteById,
|
|
11162
|
-
onNavigateById: (entityType, entityId) =>
|
|
11163
|
-
|
|
11164
|
-
entityId
|
|
11165
|
-
|
|
11166
|
-
)
|
|
11207
|
+
onNavigateById: (entityType, entityId) => {
|
|
11208
|
+
setIsModalOpen(false);
|
|
11209
|
+
onNavigateById?.(entityType, entityId);
|
|
11210
|
+
},
|
|
11211
|
+
onGlobalNotificationClick: (notification) => {
|
|
11212
|
+
setIsModalOpen(false);
|
|
11213
|
+
setGlobalNotificationModal({
|
|
11214
|
+
isOpen: true,
|
|
11215
|
+
notification
|
|
11216
|
+
});
|
|
11217
|
+
},
|
|
11167
11218
|
getActionLabel,
|
|
11168
|
-
renderEmpty: renderEmptyState
|
|
11219
|
+
renderEmpty: renderEmptyState,
|
|
11220
|
+
emptyStateImage
|
|
11169
11221
|
}
|
|
11170
11222
|
) })
|
|
11171
11223
|
] })
|
|
@@ -11173,56 +11225,85 @@ var NotificationCenter = ({
|
|
|
11173
11225
|
)
|
|
11174
11226
|
] });
|
|
11175
11227
|
}
|
|
11176
|
-
return /* @__PURE__ */ jsxs34(
|
|
11177
|
-
/* @__PURE__ */
|
|
11178
|
-
|
|
11179
|
-
|
|
11180
|
-
|
|
11181
|
-
|
|
11182
|
-
|
|
11183
|
-
|
|
11184
|
-
|
|
11185
|
-
size: 24,
|
|
11186
|
-
className: isActive ? "text-primary-950" : "text-primary"
|
|
11187
|
-
}
|
|
11188
|
-
),
|
|
11189
|
-
className
|
|
11190
|
-
}
|
|
11191
|
-
) }),
|
|
11192
|
-
/* @__PURE__ */ jsx42(
|
|
11193
|
-
DropdownMenuContent,
|
|
11194
|
-
{
|
|
11195
|
-
className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
|
|
11196
|
-
side: "bottom",
|
|
11197
|
-
align: "end",
|
|
11198
|
-
children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col", children: [
|
|
11199
|
-
/* @__PURE__ */ jsxs34("div", { className: "px-4 py-3 border-b border-border-200", children: [
|
|
11200
|
-
/* @__PURE__ */ jsx42(NotificationHeader, { unreadCount, variant: "dropdown" }),
|
|
11201
|
-
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx42(
|
|
11202
|
-
"button",
|
|
11203
|
-
{
|
|
11204
|
-
type: "button",
|
|
11205
|
-
onClick: onMarkAllAsRead,
|
|
11206
|
-
className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
|
|
11207
|
-
children: "Marcar todas como lidas"
|
|
11208
|
-
}
|
|
11209
|
-
)
|
|
11210
|
-
] }),
|
|
11211
|
-
/* @__PURE__ */ jsx42("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ jsx42(
|
|
11212
|
-
NotificationList,
|
|
11228
|
+
return /* @__PURE__ */ jsxs34(Fragment11, { children: [
|
|
11229
|
+
/* @__PURE__ */ jsxs34(DropdownMenu_default, { children: [
|
|
11230
|
+
/* @__PURE__ */ jsx42(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ jsx42(
|
|
11231
|
+
IconButton_default,
|
|
11232
|
+
{
|
|
11233
|
+
active: isActive,
|
|
11234
|
+
onClick: handleDesktopClick,
|
|
11235
|
+
icon: /* @__PURE__ */ jsx42(
|
|
11236
|
+
Bell2,
|
|
11213
11237
|
{
|
|
11214
|
-
|
|
11215
|
-
|
|
11216
|
-
error,
|
|
11217
|
-
onRetry,
|
|
11218
|
-
onMarkAsReadById,
|
|
11219
|
-
onDeleteById,
|
|
11220
|
-
onNavigateById: (entityType, entityId) => handleNavigate(entityType, entityId),
|
|
11221
|
-
getActionLabel,
|
|
11222
|
-
renderEmpty: renderEmptyState
|
|
11238
|
+
size: 24,
|
|
11239
|
+
className: isActive ? "text-primary-950" : "text-primary"
|
|
11223
11240
|
}
|
|
11224
|
-
)
|
|
11225
|
-
|
|
11241
|
+
),
|
|
11242
|
+
className
|
|
11243
|
+
}
|
|
11244
|
+
) }),
|
|
11245
|
+
/* @__PURE__ */ jsx42(
|
|
11246
|
+
DropdownMenuContent,
|
|
11247
|
+
{
|
|
11248
|
+
className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
|
|
11249
|
+
side: "bottom",
|
|
11250
|
+
align: "end",
|
|
11251
|
+
children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col", children: [
|
|
11252
|
+
/* @__PURE__ */ jsxs34("div", { className: "px-4 py-3 border-b border-border-200", children: [
|
|
11253
|
+
/* @__PURE__ */ jsx42(
|
|
11254
|
+
NotificationHeader,
|
|
11255
|
+
{
|
|
11256
|
+
unreadCount,
|
|
11257
|
+
variant: "dropdown"
|
|
11258
|
+
}
|
|
11259
|
+
),
|
|
11260
|
+
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx42(
|
|
11261
|
+
"button",
|
|
11262
|
+
{
|
|
11263
|
+
type: "button",
|
|
11264
|
+
onClick: onMarkAllAsRead,
|
|
11265
|
+
className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
|
|
11266
|
+
children: "Marcar todas como lidas"
|
|
11267
|
+
}
|
|
11268
|
+
)
|
|
11269
|
+
] }),
|
|
11270
|
+
/* @__PURE__ */ jsx42("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ jsx42(
|
|
11271
|
+
NotificationList,
|
|
11272
|
+
{
|
|
11273
|
+
groupedNotifications,
|
|
11274
|
+
loading,
|
|
11275
|
+
error,
|
|
11276
|
+
onRetry,
|
|
11277
|
+
onMarkAsReadById,
|
|
11278
|
+
onDeleteById,
|
|
11279
|
+
onNavigateById,
|
|
11280
|
+
onGlobalNotificationClick: (notification) => {
|
|
11281
|
+
setGlobalNotificationModal({
|
|
11282
|
+
isOpen: true,
|
|
11283
|
+
notification
|
|
11284
|
+
});
|
|
11285
|
+
},
|
|
11286
|
+
getActionLabel,
|
|
11287
|
+
renderEmpty: renderEmptyState,
|
|
11288
|
+
emptyStateImage
|
|
11289
|
+
}
|
|
11290
|
+
) })
|
|
11291
|
+
] })
|
|
11292
|
+
}
|
|
11293
|
+
)
|
|
11294
|
+
] }),
|
|
11295
|
+
/* @__PURE__ */ jsx42(
|
|
11296
|
+
Modal_default,
|
|
11297
|
+
{
|
|
11298
|
+
isOpen: globalNotificationModal.isOpen,
|
|
11299
|
+
onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
|
|
11300
|
+
title: globalNotificationModal.notification?.title || "",
|
|
11301
|
+
variant: "activity",
|
|
11302
|
+
description: globalNotificationModal.notification?.message,
|
|
11303
|
+
image: emptyStateImage || mock_content_default,
|
|
11304
|
+
actionLink: globalNotificationModal.notification?.actionLink || void 0,
|
|
11305
|
+
actionLabel: "Ver mais",
|
|
11306
|
+
size: "lg"
|
|
11226
11307
|
}
|
|
11227
11308
|
)
|
|
11228
11309
|
] });
|
|
@@ -11260,9 +11341,11 @@ var NotificationCard = (props) => {
|
|
|
11260
11341
|
onMarkAsReadById: props.onMarkAsReadById,
|
|
11261
11342
|
onDeleteById: props.onDeleteById,
|
|
11262
11343
|
onNavigateById: props.onNavigateById,
|
|
11344
|
+
onGlobalNotificationClick: props.onGlobalNotificationClick,
|
|
11263
11345
|
getActionLabel: props.getActionLabel,
|
|
11264
11346
|
renderEmpty: props.renderEmpty,
|
|
11265
|
-
className: props.className
|
|
11347
|
+
className: props.className,
|
|
11348
|
+
emptyStateImage: props.emptyStateImage
|
|
11266
11349
|
}
|
|
11267
11350
|
);
|
|
11268
11351
|
case "center":
|