@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -1,3 +1,14 @@
-// export { Menu as AntdMenu } from 'antd';
-import AntdMenu from 'antd/es/menu';
-export default AntdMenu;
+// Libraries
+import React from 'react';
+// Types
+import { Menu } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { ExpandIcon } from './styled';
+Menu.defaultProps = {
+    expandIcon(props) {
+        const { isOpen } = props;
+        return (React.createElement(ExpandIcon, { "$isOpen": isOpen, type: "icon-ants-expand-more", size: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }));
+    },
+};
+export { Menu };

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/Menu/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const ExpandIcon: import("styled-components").StyledComponent<any, any, import("@antscorp/antsomi-ui/es/components/atoms/Icon").IconProps & {
+    $isOpen?: boolean | undefined;
+}, string | number | symbol>;

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

@@ -0,0 +1,10 @@
+// Components
+import styled from 'styled-components';
+import { Icon } from '../../atoms';
+export const ExpandIcon = styled(Icon) `
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  transition: all 200ms;
+  transform: rotate(${props => (props.$isOpen ? 180 : 0)}deg);
+`;

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,258 @@
+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',
+                justifyContent: '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>;

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

@@ -0,0 +1,161 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+import styled from 'styled-components';
+import { Button } from '../../atoms';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Badge } from 'antd';
+export const DivShowNotiStyled = styled.div `
+  background-color: #fff;
+  width: 348px;
+  max-height: 695px;
+  font-size: 12px;
+
+  box-sizing: border-box;
+  div,
+  p {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .div-loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .div-show-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    .title-noti {
+      color: #333333;
+      font-size: 16px;
+    }
+  }
+
+  .div-loading ~ .div-show-content {
+    opacity: 0.2;
+  }
+  .div-show-content {
+    position: relative;
+    max-height: 545px;
+    overflow-y: auto;
+
+    .div-left-icon-dot {
+      position: absolute;
+      top: 20px;
+      left: 18px;
+      width: 8px;
+      height: 8px;
+      background-color: #2e60a7;
+      border-radius: 999px;
+    }
+    .noti-card:last-child {
+      border: none;
+    }
+    .noti-card:hover,
+    .noti-card:has(button.antsomi-dropdown-open) {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue0};
+    }
+
+    .noti-card {
+      position: relative;
+      padding: 15px 10px 15px 45px;
+      border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue0};
+
+      .div-title {
+        display: flex;
+        align-items: center;
+        width: 290px;
+        .div-title-text {
+          flex: 1;
+          color: #333333;
+          font-weight: bold;
+        }
+
+        margin-bottom: 7px;
+      }
+
+      .item-link {
+        margin-bottom: 12px;
+        width: 270px;
+      }
+
+      .item-desc {
+        margin-bottom: 10px;
+        color: #333333;
+        width: 250px;
+        padding: 0 10px 4px;
+
+        border-left: 1px solid #889199;
+      }
+
+      .item-desc + p {
+        font-size: 11px;
+      }
+    }
+  }
+
+  .text-link {
+    color: #1f5fac;
+    cursor: pointer;
+  }
+  .text-grey {
+    color: #999999;
+  }
+  .text-block-center {
+    height: 40px;
+    padding: 12px 0;
+    text-align: center;
+  }
+  .text-ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+export const ActionButton = styled(Button) `
+  /* border: none !important; */
+  background-color: transparent !important;
+  color: #666666 !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+
+  &.notify-action {
+    border: none !important;
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue7} !important;
+    border-radius: 5px !important;
+  }
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7} !important;
+    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1} !important;
+    border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue7} !important;
+    &.notify-action {
+      border: none !important;
+      color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue7} !important;
+      border-radius: 5px !important;
+    }
+  }
+`;
+export const BadgeStyled = styled(Badge) `
+  button {
+    background-color: transparent !important;
+    color: #666666 !important;
+    box-shadow: none !important;
+  }
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    button {
+      color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7} !important;
+      background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1_1} !important;
+      border: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue7} !important;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -1,13 +1,42 @@
+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 React, { memo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 // Styled
 import { BannerWrapper } from './styled';
+// Components
+import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
 export const Banner = memo(props => {
-    const { deviceType, showBackgroundSkeleton = false, children } = props;
-    return (React.createElement(BannerWrapper, { deviceType: deviceType, showBackgroundSkeleton: showBackgroundSkeleton },
-        React.createElement("div", { className: "device-type" },
-            React.createElement("div", { className: "device-type__background" }),
-            React.createElement("div", { className: "device-type__wrapper" },
-                React.createElement("div", { className: "content-wrapper" }, children || null),
-                React.createElement("div", { className: "backdrop" })))));
+    const { deviceType, showSkeleton = false, children, height } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
+    const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
+    // States
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    // Side effects
+    useEffect(() => {
+        setShouldAnimate(true);
+        const timerId = setTimeout(() => {
+            setShouldAnimate(false);
+        }, 1000);
+        return () => clearTimeout(timerId);
+    }, [children]);
+    return (React.createElement(BannerWrapper, Object.assign({ "$height": height }, restOfProps),
+        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
+            React.createElement("div", { className: classNames({
+                    'content-wrapper': true,
+                    'animate__animated animate__fadeIn': shouldAnimate,
+                }) }, isMobile ? (React.createElement(MobileFrameV2, { id: "banner-mobile" }, children || null)) : (children || null)),
+            showSkeleton && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "skeleton" }))))));
 });

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.d.ts

@@ -1,4 +1,3 @@
 export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
-    deviceType: string;
-    showBackgroundSkeleton: boolean;
+    $height?: number | undefined;
 }, never>;