@orderly.network/ui-notification 2.8.10 → 2.8.11-alpha.1

package/dist/index.mjs

@@ -1,12 +1,11 @@
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useTranslation } from '@orderly.network/i18n';
 import { Flex, Text, cn, ChevronDownIcon, ScrollArea, Divider, Icon, ExtensionSlot, ExtensionPositionEnum, ChevronLeftIcon, ChevronRightIcon } from '@orderly.network/ui';
-import { AnnouncementType, EMPTY_LIST } from '@orderly.network/types';
+import { AnnouncementType } from '@orderly.network/types';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { UTCDate, UTCDateMini } from '@date-fns/utc';
-import { differenceInHours, differenceInMinutes, format } from 'date-fns';
-import { produce } from 'immer';
-import { useOrderlyContext, useLocalStorage, useWS, useMaintenanceStatus, useQuery, MaintenanceStatus } from '@orderly.network/hooks';
+import { UTCDateMini } from '@date-fns/utc';
+import { format } from 'date-fns';
+import { useWS, useOrderlyContext, useLocalStorage, useMaintenanceStatus, useQuery, MaintenanceStatus } from '@orderly.network/hooks';
 import { useAppContext } from '@orderly.network/react-app';
 
 // src/components/announcementCenter/announcementCenter.ui.tsx
@@ -139,12 +138,14 @@ var AnnouncementItem = (props) => {
         return t("notification.listing");
       case AnnouncementType.Maintenance:
         return t("notification.maintenance");
+      case AnnouncementType.Vote:
+        return t("notification.vote");
       default:
         return t("notification.general");
     }
   }, [props.type, t]);
   const action = useMemo(() => {
-    if (props.type === AnnouncementType.Campaign && typeof props.url === "string" && props.url !== "" && typeof props.onItemClick === "function") {
+    if ((props.type === AnnouncementType.Campaign || props.type === AnnouncementType.Vote) && typeof props.url === "string" && props.url !== "" && typeof props.onItemClick === "function") {
       return /* @__PURE__ */ jsxs(
         Flex,
         {
@@ -327,29 +328,8 @@ var CampaignContentCard = ({ message, coverImage, url, onItemClick }) => {
 };
 var MaintenanceContentCard = ({ message, startTime, endTime }) => {
   const { t } = useTranslation();
-  const formattedMessage = useMemo(() => {
-    const hours = differenceInHours(endTime, startTime);
-    const minutes = differenceInMinutes(endTime, startTime) - hours * 60;
-    const startUtc = new UTCDate(startTime);
-    const endUtc = new UTCDate(endTime);
-    const startTimeFormatted = format(startUtc, "HH:mm");
-    const endTimeFormatted = format(endUtc, "hh:mm a");
-    if (hours > 0) {
-      return t("notification.maintenanceDuration.hours", {
-        hours: minutes > 0 ? (hours + minutes / 60).toFixed(1) : hours,
-        startTimeFormatted,
-        endTimeFormatted
-      });
-    }
-    return t("notification.maintenanceDuration.minutes", {
-      minutes,
-      startTimeFormatted,
-      endTimeFormatted
-    });
-  }, [startTime, endTime, t]);
   return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
     /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 54, children: t("notification.recentlyUpdated") }),
-    /* @__PURE__ */ jsx(Flex, { itemAlign: "center", children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "bold", children: formattedMessage }) }),
     message && /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 80, as: "div", className: "oui-mt-2", children: message })
   ] });
 };
@@ -383,6 +363,31 @@ var ListingContentCard = ({ message, updateTime }) => {
     /* @__PURE__ */ jsx(Text, { size: "sm", weight: "bold", children: message })
   ] });
 };
+var CommunityVoteContentCard = ({ message, url, onItemClick }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-2", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", weight: "bold", children: message }),
+    typeof url === "string" && url !== "" && typeof onItemClick === "function" && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "oui-flex oui-items-center oui-gap-1",
+        onClick: () => onItemClick(url),
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              color: "buy",
+              className: "oui-bg-clip-text oui-text-transparent oui-gradient-brand",
+              children: t("notification.joinNow")
+            }
+          ),
+          /* @__PURE__ */ jsx(ArrowRightShortIcon, { size: 18, color: "success" })
+        ]
+      }
+    )
+  ] });
+};
 var NotificationHeader = (props) => {
   const { t } = useTranslation();
   const { expanded } = props;
@@ -404,6 +409,8 @@ var NotificationHeader = (props) => {
         return /* @__PURE__ */ jsx(Text, { size: "sm", color: "buy", children: t("notification.listing") });
       case AnnouncementType.Maintenance:
         return /* @__PURE__ */ jsx(Text, { size: "sm", color: "warning", children: t("notification.maintenanceTitle") });
+      case AnnouncementType.Vote:
+        return /* @__PURE__ */ jsx(Text, { size: "sm", color: "inherit", children: t("notification.vote") });
       default:
         return /* @__PURE__ */ jsx(Text, { size: "sm", color: "inherit", children: t("notification.generalTitle") });
     }
@@ -512,6 +519,15 @@ var NotificationContent = (props) => {
               updateTime: message.updated_time ?? 0
             }
           );
+        case AnnouncementType.Vote:
+          return /* @__PURE__ */ jsx(
+            CommunityVoteContentCard,
+            {
+              message: message.message,
+              url: message.url ?? "",
+              onItemClick: props.onItemClick
+            }
+          );
         default:
           return /* @__PURE__ */ jsx(
             ListingContentCard,
@@ -592,28 +608,34 @@ var getTimeString = (timestamp) => {
   const time = format(new UTCDateMini(timestamp), "h:mm aa");
   return `${time} (UTC) on ${date}`;
 };
-var sortDataByUpdatedTime = (ori) => {
-  return produce(ori, (draft) => {
-    if (Array.isArray(draft.rows)) {
-      draft.rows.sort((a, b) => {
-        if (a.updated_time && b.updated_time) {
-          return b.updated_time - a.updated_time;
-        }
-        return 0;
-      });
+var sortDataByUpdatedTime = (list) => {
+  return list.sort((a, b) => {
+    if (a.updated_time && b.updated_time) {
+      return b.updated_time - a.updated_time;
+    }
+    return 0;
+  });
+};
+var filterDuplicateArrayById = (list) => {
+  const seenIds = /* @__PURE__ */ new Set();
+  const newList = [];
+  list.forEach((item) => {
+    if (!seenIds.has(item.announcement_id)) {
+      seenIds.add(item.announcement_id);
+      newList.push(item);
     }
   });
+  return newList;
 };
 var useAnnouncementData = () => {
+  const { t } = useTranslation();
   const ws = useWS();
-  const [announcementStore, setStore] = useLocalStorage(
-    ORDERLY_ANNOUNCEMENT_KEY,
-    {}
-  );
-  const [tips, setTips] = useState({});
+  const { dataAdapter } = useOrderlyContext();
+  const [announcementStore, setAnnouncementStore] = useLocalStorage(ORDERLY_ANNOUNCEMENT_KEY, {});
+  const [tips, setTips] = useState([]);
+  const [maintenances, setMaintenances] = useState([]);
   const [maintenanceDialogInfo, setMaintenanceDialogInfo] = useState();
   const { startTime, endTime, status, brokerName } = useMaintenanceStatus();
-  const { t } = useTranslation();
   const { data: announcements } = useQuery(
     `/v2/public/announcement`,
     {
@@ -625,162 +647,100 @@ var useAnnouncementData = () => {
   );
   const getMaintentTipsContent = (brokerName2, startDate, endDate) => t("maintenance.tips.description", { brokerName: brokerName2, startDate, endDate });
   const getMaintentDialogContent = (brokerName2, endDate) => t("maintenance.dialog.description", { brokerName: brokerName2, endDate });
+  useEffect(() => {
+    const startDate = startTime ? getTimeString(startTime) : "-";
+    const endDate = endTime ? getTimeString(endTime) : "-";
+    const dialogContent = status === MaintenanceStatus.Maintenance ? getMaintentDialogContent(brokerName, endDate) : void 0;
+    setMaintenanceDialogInfo(dialogContent);
+    if (startTime && endTime) {
+      setMaintenances([
+        {
+          announcement_id: maintentanceId,
+          type: AnnouncementType.Maintenance,
+          startTime,
+          endTime,
+          updated_time: startTime,
+          message: getMaintentTipsContent(brokerName, startDate, endDate)
+        }
+      ]);
+    } else {
+      setMaintenances([]);
+    }
+  }, [startTime, endTime, status, brokerName, t]);
+  useEffect(() => {
+    let list = [...maintenances ?? [], ...announcements?.rows ?? []];
+    if (typeof dataAdapter?.announcementList === "function") {
+      list = dataAdapter.announcementList(list);
+    }
+    const removedDuplicateList = filterDuplicateArrayById(list);
+    const sortedList = sortDataByUpdatedTime(removedDuplicateList);
+    setTips(sortedList);
+  }, [maintenances, announcements, dataAdapter?.announcementList]);
+  useEffect(() => {
+    if (!announcements?.rows) {
+      return;
+    }
+    const lastUpdateTime = announcements.last_updated_time ?? 0;
+    const firstTipTime = tips[0]?.updated_time ?? 0;
+    const updatedTime = Math.max(lastUpdateTime, firstTipTime);
+    const closedTime = announcementStore.lastUpdateTime ?? 0;
+    if (closedTime < updatedTime) {
+      setAnnouncementStore({ show: true, lastUpdateTime: updatedTime });
+    }
+  }, [announcements, tips]);
   useEffect(() => {
     const unsubscribe = ws.subscribe("announcement", {
       onMessage(message) {
         if (message) {
           setTips((prev) => {
-            return produce(prev, (draft) => {
-              if (!Array.isArray(draft.rows)) {
-                draft.rows = [];
-              }
-              const idx = draft.rows.findIndex(
-                (tip) => tip.announcement_id === message.announcement_id
-              );
-              if (idx !== -1) {
-                draft.rows.splice(idx, 1);
-              }
-              draft.rows.push({
-                announcement_id: message.announcement_id,
-                message: message.message,
-                url: message.url,
-                i18n: message.i18n,
-                type: message.type,
-                updated_time: message.updated_time
-              });
-            });
+            const list = prev.filter(
+              (item) => item.announcement_id !== message.announcement_id
+            );
+            const newTip = {
+              announcement_id: message.announcement_id,
+              message: message.message,
+              url: message.url,
+              i18n: message.i18n,
+              type: message.type,
+              updated_time: message.updated_time
+            };
+            return [...list, newTip];
           });
-          setStore((prev) => ({ ...prev, show: true }));
+          setAnnouncementStore((prev) => ({ ...prev, show: true }));
         }
-      },
-      onError(err) {
       }
     });
     return () => {
       unsubscribe?.();
     };
   }, [ws]);
-  useEffect(() => {
-    if (!announcements?.rows) {
-      return;
-    }
-    const apiTime = announcements.last_updated_time ?? 0;
-    const cachedTime = announcementStore.lastUpdateTime ?? 0;
-    if (cachedTime < apiTime) {
-      setTips((prev) => ({ ...prev, rows: announcements?.rows }));
-      setStore({ show: true, lastUpdateTime: apiTime });
-    } else {
-      setTips((prev) => {
-        return produce(prev, (draft) => {
-          if (announcements?.rows?.length) {
-            const existingIds = new Set(
-              prev.rows?.map((tip) => tip.announcement_id)
-            );
-            const maintenanceTip = prev.rows?.find(
-              (tip) => tip.announcement_id === maintentanceId
-            );
-            draft.rows = [];
-            announcements.rows.forEach((item) => {
-              if (!existingIds.has(item.announcement_id)) {
-                draft.rows?.push(item);
-              }
-            });
-            if (maintenanceTip) {
-              draft.rows.unshift(maintenanceTip);
-            }
-          } else {
-            const idx = draft.rows?.findIndex(
-              (tip) => tip.announcement_id === maintentanceId
-            );
-            if (idx !== void 0 && idx !== -1) {
-              draft.rows?.splice(idx, 1);
-            }
-          }
-        });
-      });
-    }
-  }, [announcements]);
-  useEffect(() => {
-    const startDate = startTime ? getTimeString(startTime) : "-";
-    const endDate = endTime ? getTimeString(endTime) : "-";
-    if (status === MaintenanceStatus.Maintenance) {
-      setMaintenanceDialogInfo(getMaintentDialogContent(brokerName, endDate));
-      return;
-    }
-    setMaintenanceDialogInfo(void 0);
-    if (startTime && endTime) {
-      setTips(
-        (prev) => produce(prev, (draft) => {
-          if (!Array.isArray(draft.rows)) {
-            draft.rows = [];
-          }
-          draft.rows = [
-            {
-              announcement_id: maintentanceId,
-              type: AnnouncementType.Maintenance,
-              /** @ts-ignore */
-              startTime,
-              /** @ts-ignore */
-              endTime,
-              message: getMaintentTipsContent(brokerName, startDate, endDate)
-            },
-            ...draft.rows.filter(
-              (tip) => tip.type !== AnnouncementType.Maintenance
-            )
-          ];
-        })
-      );
-    } else {
-      setTips((prev) => {
-        return produce(prev, (draft) => {
-          const index = draft.rows?.findIndex(
-            (tip) => tip.announcement_id === maintentanceId
-          );
-          if (index !== void 0 && index !== -1) {
-            draft.rows?.splice(index, 1);
-          }
-        });
-      });
-    }
-  }, [startTime, endTime, status, brokerName, t]);
   return {
-    tips: sortDataByUpdatedTime(tips),
-    maintenanceDialogInfo
+    tips,
+    maintenanceDialogInfo,
+    announcementStore,
+    setAnnouncementStore
   };
 };
 var useAnnouncement = (options) => {
   const { showAnnouncement, setShowAnnouncement } = useAppContext();
-  const { dataAdapter } = useOrderlyContext();
-  const { tips, maintenanceDialogInfo } = useAnnouncementData();
-  const memoizedTips = useMemo(() => {
-    if (typeof dataAdapter?.announcementList === "function") {
-      return dataAdapter.announcementList(
-        tips?.rows ?? EMPTY_LIST
-      );
-    }
-    return tips?.rows ?? EMPTY_LIST;
-  }, [dataAdapter?.announcementList, tips?.rows]);
-  const [announcementStore, setStore] = useLocalStorage(
-    ORDERLY_ANNOUNCEMENT_KEY,
-    {}
-  );
+  const {
+    tips,
+    maintenanceDialogInfo,
+    announcementStore,
+    setAnnouncementStore
+  } = useAnnouncementData();
   const closeTips = () => {
-    setStore((prev) => ({ ...prev, show: false }));
+    setAnnouncementStore((prev) => ({ ...prev, show: false }));
   };
   useEffect(() => {
-    const len = memoizedTips.length;
+    const len = tips.length;
     setShowAnnouncement(
       Boolean(len) && announcementStore.show && !options?.hideTips
     );
-  }, [
-    memoizedTips,
-    announcementStore.show,
-    options?.hideTips,
-    setShowAnnouncement
-  ]);
+  }, [tips, announcementStore.show, options?.hideTips, setShowAnnouncement]);
   return {
     maintenanceDialogInfo,
-    tips: memoizedTips,
+    tips,
     closeTips,
     showAnnouncement
   };
@@ -813,8 +773,7 @@ var AnnouncementCenterWidget = (props) => {
   const { dataSource, current, setCurrent } = useAnnouncementCenterScript();
   const onItemClick = useCallback(
     (url) => {
-      if (!url)
-        return;
+      if (!url) return;
       props.onRouteChange(url);
     },
     [props.onRouteChange]
@@ -834,8 +793,7 @@ var AnnouncementCenterPage = (props) => {
     AnnouncementCenterWidget,
     {
       onRouteChange: (url) => {
-        if (!url)
-          return;
+        if (!url) return;
         props.routerAdapter?.onRouteChange({
           href: url,
           name: url,
@@ -847,5 +805,5 @@ var AnnouncementCenterPage = (props) => {
 };
 
 export { AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map