@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/organism/LeftMenu/types/index.d.ts

@@ -0,0 +1,27 @@
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireMenuItemKey> & {
+    key: string;
+    label: string;
+    icon: string | null;
+    children?: TMenuItem[];
+} & TOption;
+export type TMenuFeatureItem = Omit<Partial<TFeatureMenu>, 'children'> & TRequireMenuItemKey & TOption & {
+    children?: TMenuFeatureItem[];
+};
+type TRequireMenuItemKey = {
+    menu_item_code: string;
+    menu_item_name: string;
+    icon_name: string | null;
+};
+type TOption = {
+    logo_url?: string | null;
+    options?: {
+        key: string;
+        label: string;
+    }[];
+    optionCallback?: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+};
+export {};

package/es/components/organism/LeftMenu/types/index.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/LeftMenu/utils/index.d.ts

@@ -0,0 +1,61 @@
+import { FeatureMenuPermission, TDashboardResponse, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TMenuFeatureItem, TMenuItem } from '../types';
+/**
+ * Converts a feature menu item to a menu item suitable for rendering in the UI.
+ * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
+ * @returns {TMenuItem} The converted menu item.
+ */
+export declare const getMenuItem: (featureMenu: TMenuFeatureItem) => TMenuItem;
+/**
+ * Flatten a nested array of menu items by flatten @alias childKey into a single-level array.
+ * @template T - The type of menu items.
+ * @param {T[]} menuItems - The array of menu items to flatten.
+ * @param {string} childKey - The key representing the children array in each menu item.
+ * @returns {T[]} The flattened array of menu items.
+ */
+export declare const flattenMenuArray: <T>(menuItems: T[], childKey: string) => T[];
+/**
+ * Recursively filters menu items based on permissions.
+ * check permission if menu item has menu_type of @alias MENU_ITEM_TYPE.MENU
+ */
+export declare const recursivePermissionMenu: (menuItems: TFeatureMenu[], MenuPermissions: FeatureMenuPermission[]) => TFeatureMenu[];
+/**
+ * Generate a new path by replacing parameters in the given path.
+ * @returns {string} The generated path with replaced parameters.
+ */
+export declare const getGeneratePath: (path: string, params?: Partial<PayloadInfo> & {
+    dashboardId?: string;
+    channelId?: number;
+}) => string;
+/**
+ * Creates an initial feature menu item object with default values.
+ * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
+ * @returns {TFeatureMenu} The initial feature menu item object.
+ */
+export declare const getInitialFeatureMenuItem: (featureMenuItem: Partial<TFeatureMenu>) => TFeatureMenu;
+/** Map children to each App Item */
+export declare const getMappingAppChildren: (args: {
+    menuList: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+    dashboardData?: TDashboardResponse;
+    destinationChannelEntries?: TDestinationChannel[];
+}) => TFeatureMenu[];
+/**
+ * Finds the app code of the active menu item based on the provided URL within the given menu items.
+ * @param {object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu item paths.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @param {Partial<PayloadInfo>} [args.auth] - Additional authentication information.
+ * @returns {string | undefined} The app code of the active menu item or undefined if not found.
+ */
+export declare const findActiveAppCodeByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => string | undefined;
+export declare const findLastMatchedCodeByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => string | undefined;

package/es/components/organism/LeftMenu/utils/index.js

@@ -0,0 +1,227 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import { isArray, isEmpty, sortBy } from 'lodash';
+import { generatePath } from 'react-router-dom';
+// Constants
+import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, MARKETING_CHANNEL_CODE, RENDER_OPTION, } from '../constants';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
+/**
+ * Converts a feature menu item to a menu item suitable for rendering in the UI.
+ * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
+ * @returns {TMenuItem} The converted menu item.
+ */
+export const getMenuItem = (featureMenu) => {
+    const { menu_item_code, menu_item_name, children, icon_name } = featureMenu, restOfFeatureMenu = __rest(featureMenu, ["menu_item_code", "menu_item_name", "children", "icon_name"]);
+    return Object.assign({ key: menu_item_code, label: menu_item_name, icon: icon_name, children: children === null || children === void 0 ? void 0 : children.map(item => getMenuItem(item)) }, restOfFeatureMenu);
+};
+/**
+ * Flatten a nested array of menu items by flatten @alias childKey into a single-level array.
+ * @template T - The type of menu items.
+ * @param {T[]} menuItems - The array of menu items to flatten.
+ * @param {string} childKey - The key representing the children array in each menu item.
+ * @returns {T[]} The flattened array of menu items.
+ */
+export const flattenMenuArray = (menuItems, childKey) => {
+    let result = [];
+    menuItems.forEach(item => {
+        const children = (item === null || item === void 0 ? void 0 : item[childKey]) || [];
+        result.push(Object.assign(Object.assign({}, item), { [childKey]: [] }));
+        if (children.length > 0) {
+            result = [...result, ...flattenMenuArray(children, childKey)];
+        }
+    });
+    return result;
+};
+/**
+ * Recursively filters menu items based on permissions.
+ * check permission if menu item has menu_type of @alias MENU_ITEM_TYPE.MENU
+ */
+export const recursivePermissionMenu = (menuItems, MenuPermissions) => {
+    var _a, _b;
+    const menu = (_b = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(({ permission_code, menu_item_type }) => {
+        if (menu_item_type !== MENU_ITEM_TYPE.MENU) {
+            return true;
+        }
+        return MenuPermissions === null || MenuPermissions === void 0 ? void 0 : MenuPermissions.find(({ app_code = '', menu_code = '' }) => !!permission_code && [app_code, menu_code].includes(permission_code));
+    })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (isArray(item.children)
+        ? {
+            children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), MenuPermissions),
+        }
+        : {}))))) === null || _b === void 0 ? void 0 : _b.filter(item => !(isArray(item.children) && isEmpty(item.children)));
+    return menu;
+};
+/**
+ * Generate a new path by replacing parameters in the given path.
+ * @returns {string} The generated path with replaced parameters.
+ */
+export const getGeneratePath = (path, params) => {
+    try {
+        const { portalId, userId, dashboardId, channelId } = params || {};
+        return generatePath(path, {
+            user_id: userId !== null && userId !== void 0 ? userId : '-1',
+            networkId: portalId !== null && portalId !== void 0 ? portalId : -1,
+            portalId: portalId !== null && portalId !== void 0 ? portalId : -1,
+            dashboardId: dashboardId !== null && dashboardId !== void 0 ? dashboardId : '-1',
+            channelId: channelId !== null && channelId !== void 0 ? channelId : -1,
+        });
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: getGeneratePath.name,
+            args: { path, params },
+        });
+        return '';
+    }
+};
+/**
+ * Creates an initial feature menu item object with default values.
+ * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
+ * @returns {TFeatureMenu} The initial feature menu item object.
+ */
+export const getInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
+/** Map children to each App Item */
+export const getMappingAppChildren = (args) => {
+    const { menuList, dashboardData, auth, destinationChannelEntries } = args;
+    return menuList === null || menuList === void 0 ? void 0 : menuList.map(appItem => {
+        var _a, _b, _c, _d;
+        switch (appItem.menu_item_code) {
+            case APP_KEYS.HOME: {
+                const dashboardObject = {
+                    sharedDashboard: ((_a = dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) === null || _a === void 0 ? void 0 : _a.sharedDashboard) || [],
+                    ownedDashboard: ((_b = dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) === null || _b === void 0 ? void 0 : _b.ownedDashboard) || [],
+                    recentDashboard: [],
+                };
+                appItem.children = (_c = Object.values(HOME_MENU_ITEMS)) === null || _c === void 0 ? void 0 : _c.map(childMenuItem => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, getInitialFeatureMenuItem({
+                        menu_item: childMenuItem.menu_item_code,
+                        menu_item_code: childMenuItem.menu_item_code,
+                        menu_item_name: childMenuItem.menu_item_name,
+                    })), { children: (_a = (((dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[childMenuItem.menu_item_code]) || []))) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign({}, getInitialFeatureMenuItem({
+                            menu_item: String(item.dashboardId),
+                            menu_item_code: String(item.dashboardId),
+                            menu_item_name: item.dashboardName,
+                        })))) }));
+                });
+                break;
+            }
+            case APP_KEYS.MARKETING: {
+                appItem.children = (_d = appItem.children) === null || _d === void 0 ? void 0 : _d.map(childMenuItem => {
+                    var _a;
+                    switch (childMenuItem.menu_item_code) {
+                        case MARKETING_CHANNEL_CODE.ALL_CHANNEL:
+                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
+                            break;
+                        case MARKETING_CHANNEL_CODE.ORCHESTRATION:
+                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ORCHESTRATION }));
+                            break;
+                        default:
+                            break;
+                    }
+                    if ((childMenuItem === null || childMenuItem === void 0 ? void 0 : childMenuItem.render_option) === RENDER_OPTION.CHANNEL) {
+                        childMenuItem.children =
+                            ((_a = destinationChannelEntries === null || destinationChannelEntries === void 0 ? void 0 : destinationChannelEntries.filter(item => item.channelId !== MARKETING_CHANNEL_KEY.ORCHESTRATION)) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign({}, getInitialFeatureMenuItem({
+                                menu_item_code: item.channelCode,
+                                menu_item_name: item.translateLabel,
+                                logo_url: item.logoUrl,
+                                menu_item_path: getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: item.channelId })),
+                            }))))) || [];
+                    }
+                    return childMenuItem;
+                });
+                break;
+            }
+            default:
+                break;
+        }
+        return appItem;
+    });
+};
+/**
+ * Finds the app code of the active menu item based on the provided URL within the given menu items.
+ * @param {object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu item paths.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @param {Partial<PayloadInfo>} [args.auth] - Additional authentication information.
+ * @returns {string | undefined} The app code of the active menu item or undefined if not found.
+ */
+export const findActiveAppCodeByUrl = (args) => {
+    try {
+        const { url, menuItems, auth } = args;
+        let matchAppCode;
+        const recursiveCheckHasActiveChild = (items) => {
+            let matchAppCode = false;
+            for (const item of items) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                    matchAppCode = true;
+                    break;
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    matchAppCode = recursiveCheckHasActiveChild(item.children);
+                    if (matchAppCode) {
+                        break;
+                    }
+                }
+            }
+            return matchAppCode;
+        };
+        for (const menuItem of menuItems) {
+            if (!!(menuItem === null || menuItem === void 0 ? void 0 : menuItem.menu_item_path) &&
+                url.includes(getGeneratePath(menuItem.menu_item_path, auth))) {
+                matchAppCode = menuItem.menu_item_code;
+                break;
+            }
+            const hasActiveChild = recursiveCheckHasActiveChild((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || []);
+            if (hasActiveChild) {
+                matchAppCode = menuItem.menu_item_code;
+                break;
+            }
+        }
+        return matchAppCode;
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findActiveAppCodeByUrl.name,
+            args,
+        });
+    }
+};
+export const findLastMatchedCodeByUrl = (args) => {
+    try {
+        const { url, menuItems, auth } = args;
+        const matchedItemCodes = [];
+        const recursiveFindActiveItem = (items) => {
+            for (const item of items) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                    matchedItemCodes.push(item.menu_item_code);
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    recursiveFindActiveItem(item.children);
+                }
+            }
+        };
+        recursiveFindActiveItem(menuItems || []);
+        return matchedItemCodes === null || matchedItemCodes === void 0 ? void 0 : matchedItemCodes.pop();
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findLastMatchedCodeByUrl.name,
+            args,
+        });
+    }
+};

package/es/components/organism/Menu/Menu.d.ts

@@ -1,2 +1 @@
-import AntdMenu from 'antd/es/menu';
-export default AntdMenu;
+export { Menu } from 'antd';

package/es/components/organism/Menu/Menu.js

@@ -1,3 +1,2 @@
-// export { Menu as AntdMenu } from 'antd';
-import AntdMenu from 'antd/es/menu';
-export default AntdMenu;
+export { Menu } from 'antd';
+// export default AntdMenu;

package/es/components/organism/Menu/index.d.ts

@@ -1 +1 @@
-export { default as Menu } from './Menu';
+export { Menu } from './Menu';

package/es/components/organism/Menu/index.js

@@ -1,3 +1 @@
-// import { Menu as AntdMenu } from './Menu';
-// export const Menu = AntdMenu;
-export { default as Menu } from './Menu';
+export { Menu } from './Menu';

package/es/components/organism/Notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface NotificationProps {
+    permissionDomain: string;
+    socketDomain: string;
+    token: string;
+    accountId: number;
+    networkId: number;
+    lang: string;
+}
+export declare const Notification: React.FC<NotificationProps>;

package/es/components/organism/Notification/Notification.js

@@ -0,0 +1,257 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import Icon from '@antscorp/icons';
+import { Dropdown, theme } from 'antd';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { io } from 'socket.io-client';
+import { Popover, Spin } from '../../atoms';
+import { ActionButton, BadgeStyled, DivShowNotiStyled } from './styled';
+const { useToken } = theme;
+export const Notification = React.memo(props => {
+    const { permissionDomain = '', socketDomain = '', token = '', accountId = 0, networkId = 0, lang = 'en', } = props;
+    const { token: themeToken } = useToken();
+    const [listNoti, setListNoti] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [isShowLoadingNoti, setIsShowLoadingNoti] = useState(false);
+    const [limitNoti, setLimitNoti] = useState(5);
+    const [countNoti, setCountNoti] = useState(0);
+    const [timeZone, setTimeZone] = useState('Asia/Saigon');
+    const credentialParams = useMemo(() => ({
+        _token: token,
+        _user_id: accountId,
+        _account_id: accountId,
+    }), [token, accountId]);
+    const getTimeZoneFromNetwork = useCallback(() => {
+        const params = Object.assign({ type: 'get-network-detail' }, credentialParams);
+        return axios.get(`${permissionDomain}/api/network/index`, { params });
+    }, [credentialParams, permissionDomain]);
+    const getCountUnread = useCallback(() => {
+        const params = Object.assign({ type: 'count-unread-notifications' }, credentialParams);
+        return axios.get(`${permissionDomain}/api/notification/index`, { params });
+    }, [credentialParams, permissionDomain]);
+    const handleSetCountUnread = useCallback(() => {
+        getCountUnread().then(res => {
+            if (res.data)
+                setCountNoti(res.data.data);
+        });
+    }, [getCountUnread]);
+    const getListNoti = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const params = Object.assign(Object.assign({}, credentialParams), { _lang: lang, limit: limitNoti, page: 1, format: 'grid', filter: JSON.stringify([{ STATUS: { is_not: '80' } }, { TYPE: { is_not: 'alert' } }]) });
+        setIsShowLoadingNoti(true);
+        return axios
+            .get(`${permissionDomain}/api/notification/performance`, { params })
+            .then(res => res);
+    }), [lang, permissionDomain, limitNoti, credentialParams]);
+    const handleSetListNoti = useCallback(() => {
+        getListNoti().then(res => {
+            var _a, _b, _c, _d;
+            setTotal(((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.total) || 0);
+            if ((_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.body) {
+                setListNoti(res.data.data.body);
+                setIsShowLoadingNoti(false);
+            }
+        });
+    }, [getListNoti]);
+    useEffect(() => {
+        if (!accountId || !networkId) {
+            return;
+        }
+        getTimeZoneFromNetwork().then(res => {
+            var _a, _b, _c;
+            if ((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.infoNetwork) === null || _c === void 0 ? void 0 : _c.timezone) {
+                setTimeZone(res.data.data.infoNetwork.timezone);
+            }
+        });
+        handleSetCountUnread();
+        setIsShowLoadingNoti(true);
+        handleSetListNoti();
+    }, [accountId, getTimeZoneFromNetwork, handleSetCountUnread, handleSetListNoti, networkId]);
+    const handleAllNoti = useCallback((isSeeAll) => {
+        if (isSeeAll) {
+            window.location.href = `${permissionDomain}/${networkId}#/${accountId}/notification/all`;
+        }
+        else {
+            axios
+                .post(`${permissionDomain}/api/notification/index`, {}, { params: Object.assign(Object.assign({}, credentialParams), { type: 'mark-all-as-read' }) })
+                .then(() => {
+                handleSetCountUnread();
+                handleSetListNoti();
+            });
+        }
+    }, [
+        accountId,
+        credentialParams,
+        handleSetCountUnread,
+        handleSetListNoti,
+        networkId,
+        permissionDomain,
+    ]);
+    // socket
+    useEffect(() => {
+        const socket = io(`${socketDomain}/notification`, {
+            transports: ['websocket'],
+            reconnectionDelayMax: 10000,
+            auth: {
+                token,
+                userId: accountId,
+                accountId,
+                networkId,
+            },
+        });
+        socket.emit('notification');
+        const keyNotify = `notify_${accountId}_${networkId}`;
+        const keyMarkAll = `mark_all_${accountId}_${networkId}`;
+        socket.on(keyNotify, message => {
+            if (message && message.data) {
+                // api constants: ants-processing-notification/src/utils.js
+                // Filter theo API getListNoti: notification type: default
+                const newNotifications = message.data.filter(noti => noti.type !== 'alert');
+                let totalNewNoti = 0;
+                let totalRemoveReadNoti = 0;
+                setListNoti(prev => {
+                    const data = [...prev];
+                    // update or push new notifications
+                    for (const newNoti of newNotifications) {
+                        if (newNoti._id) {
+                            const index = prev.findIndex(noti => noti._id === newNoti._id);
+                            if (index > -1) {
+                                data[index] = Object.assign(Object.assign({}, data[index]), newNoti);
+                                // status: remove or read
+                                if (+newNoti.status === 80 || +newNoti.status === 2) {
+                                    totalRemoveReadNoti++;
+                                }
+                            }
+                            else {
+                                data.unshift(newNoti);
+                                totalNewNoti++;
+                            }
+                        }
+                    }
+                    // Filter theo API getListNoti
+                    const result = data.filter(noti => noti.type !== 'alert' && +noti.status !== 80);
+                    return result;
+                });
+                setCountNoti(prev => prev + (totalNewNoti - totalRemoveReadNoti));
+            }
+        });
+        socket.on(keyMarkAll, message => {
+            var _a;
+            const notifyType = ((_a = message === null || message === void 0 ? void 0 : message.data) === null || _a === void 0 ? void 0 : _a.notify_type) || '';
+            if (notifyType === 'default') {
+                handleAllNoti(false);
+            }
+        });
+        return () => {
+            socket.off(keyNotify);
+            socket.off(keyMarkAll);
+        };
+    }, [
+    /* accountId, handleAllNoti, networkId, socketDomain, token */
+    ]);
+    useEffect(() => {
+        if (limitNoti > 5) {
+            getListNoti().then(res => {
+                var _a, _b, _c, _d;
+                setTotal(((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.total) || 0);
+                if ((_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.body) {
+                    setListNoti(res.data.data.body);
+                    setIsShowLoadingNoti(false);
+                }
+            });
+        }
+    }, [limitNoti, getListNoti]);
+    const scrolledNoti = e => {
+        const labelsContainer = e.target;
+        if (listNoti.length < total &&
+            Math.round(labelsContainer.offsetHeight + labelsContainer.scrollTop) >=
+                labelsContainer.scrollHeight) {
+            setLimitNoti(prev => prev + 5);
+        }
+        e.preventDefault();
+    };
+    const handleChangeStatusNoti = useCallback((status, idNoti) => axios.put(`${permissionDomain}/api/notification/index/${idNoti}`, { status }, { params: credentialParams }), [credentialParams, permissionDomain]);
+    const onClickLinkNoti = (link, idNoti) => {
+        handleChangeStatusNoti(2, idNoti).then(() => {
+            window.location.href = link;
+        });
+    };
+    const onClickHandleRemoveNoti = (idNoti) => {
+        handleChangeStatusNoti(0, idNoti).then(() => {
+            handleSetCountUnread();
+            handleSetListNoti();
+        });
+    };
+    const onClickHandleRead = (status, idNoti) => {
+        handleChangeStatusNoti(status, idNoti).then(() => {
+            getListNoti().then(res => {
+                var _a, _b;
+                if ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.body) {
+                    setListNoti(res.data.data.body);
+                    handleSetCountUnread();
+                    setIsShowLoadingNoti(false);
+                }
+            });
+        });
+    };
+    const formatDate = useCallback((ctime) => dayjs().tz(timeZone).isSame(dayjs(ctime).tz(timeZone), 'day')
+        ? dayjs(ctime).tz(timeZone).fromNow()
+        : dayjs(ctime).locale('en').format('MMM DD [at] hh:mm A'), [timeZone]);
+    return (React.createElement(Popover, { content: React.createElement(DivShowNotiStyled, null,
+            isShowLoadingNoti ? React.createElement(Spin, { className: "div-loading" }) : null,
+            React.createElement("div", { className: "div-show-header" },
+                React.createElement("p", { className: "title-noti" }, "Notification"),
+                React.createElement("p", { className: "text-link", onClick: () => handleAllNoti(false) }, "Mark all as read")),
+            React.createElement("div", { className: "div-show-content", onScroll: e => scrolledNoti(e) }, listNoti.length ? (listNoti === null || listNoti === void 0 ? void 0 : listNoti.map((noti) => noti.status === 1 || noti.status === 2 ? (React.createElement("div", { className: "noti-card", key: noti.notification_id },
+                noti.status === 1 ? React.createElement("div", { className: "div-left-icon-dot" }) : null,
+                React.createElement("div", { className: "div-title" },
+                    React.createElement("p", { className: "div-title-text text-ellipsis" }, noti.title),
+                    React.createElement(Dropdown, { trigger: ['click'], placement: "bottomRight", arrow: false, menu: {
+                            items: [
+                                {
+                                    key: `${noti.status}::${noti.notification_id}`,
+                                    icon: React.createElement(Icon, { type: "icon-ants-check-small" }),
+                                    label: `Mark as ${noti.status === 1 ? 'read' : 'unread'}`,
+                                    style: { color: '#333' },
+                                    onClick: ({ key }) => {
+                                        const [status, id] = key.split('::');
+                                        onClickHandleRead(Number(status) === 1 ? 2 : 1, id);
+                                    },
+                                },
+                                {
+                                    key: noti.notification_id,
+                                    icon: React.createElement(Icon, { type: "icon-ants-delete" }),
+                                    label: 'Remove this notification',
+                                    style: { color: '#333' },
+                                    onClick: ({ key }) => onClickHandleRemoveNoti(key),
+                                },
+                            ],
+                        }, destroyPopupOnHide: true },
+                        React.createElement(ActionButton
+                        // style={{ border: 'none' }}
+                        , { 
+                            // style={{ border: 'none' }}
+                            className: "notify-action", icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { fontSize: '16px' } }), size: "small" }))),
+                React.createElement("p", { className: "item-link text-link text-ellipsis", onClick: () => onClickLinkNoti(noti.link, noti.notification_id) }, noti.link_name),
+                React.createElement("p", { className: "item-desc text-ellipsis" }, noti.body),
+                React.createElement("p", { className: "text-grey" }, formatDate(noti.ctime)))) : null)) : !isShowLoadingNoti ? (React.createElement("div", { className: "text-block-center text-grey" }, "You currently have no notifications")) : null),
+            React.createElement("div", { className: "text-block-center text-link", onClick: () => handleAllNoti(true) }, listNoti.length ? 'See all notifications' : null)), trigger: ['click'], placement: "bottomRight", overlayInnerStyle: { padding: 0 }, arrow: false },
+        React.createElement(BadgeStyled, { count: countNoti, overflowCount: 1000, style: {
+                borderRadius: themeToken.borderRadius,
+                padding: '2px 4px',
+                display: 'flex',
+                alignItems: 'center',
+                backgroundColor: themeToken.red6,
+            } },
+            React.createElement(ActionButton, { icon: React.createElement(Icon, { type: "icon-ants-bell" }) }))));
+});

package/es/components/organism/Notification/index.d.ts

@@ -0,0 +1 @@
+export { Notification, type NotificationProps } from './Notification';

package/es/components/organism/Notification/index.js

@@ -0,0 +1 @@
+export { Notification } from './Notification';

package/es/components/organism/Notification/styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const DivShowNotiStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const BadgeStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").BadgeProps & import("react").RefAttributes<HTMLSpanElement>> & {
+    Ribbon: import("react").FC<import("antd/es/badge/Ribbon").RibbonProps>;
+}, any, {}, never>;