awing-library 2.1.2-dev.99 → 2.1.2-stable.1

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/MenuNotification.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var MoreHorizOutlined_1 = __importDefault(require("@mui/icons-material/MoreHorizOutlined"));
+var material_1 = require("@mui/material");
+var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
+var check_svg_1 = __importDefault(require("../../../../Assets/Images/check.svg"));
+var settingScreen_svg_1 = __importDefault(require("../../../../Assets/Images/settingScreen.svg"));
+var MenuNotification = function (props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = props.onUpdateMenuItem, onUpdateMenuItem = _a === void 0 ? function () { return null; } : _a;
+    var _b = react_1.default.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var menuData = function () {
+        var commonData = [
+            {
+                id: '1',
+                icon: check_svg_1.default,
+                title: t('Notifications.SelectAll'),
+                value: Constant_1.Constants.SELECT_ALL,
+            },
+            {
+                id: '2',
+                icon: settingScreen_svg_1.default,
+                title: t('Notifications.NotificationSettings'),
+                value: Constant_1.Constants.NOTIFICATION_SETTING_SCREEN_PATH,
+            },
+        ];
+        // Comment màn hình Notifications
+        // const { href } = window.location
+        // if (!href.includes(Constants.NOTIFICATIONS_PATH)) {
+        //     const dataNew = {
+        //         id: '3',
+        //         icon: iconNotificationSreen,
+        //         title: t('Notifications.OpenNotification'),
+        //         value: Constants.NOTIFICATIONS_PATH,
+        //     }
+        //     return [...commonData, dataNew]
+        // }
+        return commonData;
+    };
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var selectMenuItem = function (event) {
+        var _a, _b;
+        var valueItem = ((_b = (_a = event === null || event === void 0 ? void 0 : event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value) || '';
+        onUpdateMenuItem(valueItem);
+        handleClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", "aria-label": "more", "aria-controls": "long-menu", "aria-haspopup": "true", onClick: handleClick, children: (0, jsx_runtime_1.jsx)(MoreHorizOutlined_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, onClose: handleClose, open: Boolean(anchorEl), anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center',
+                }, PaperProps: {
+                    style: {
+                        borderRadius: '8px',
+                    },
+                }, children: menuData().map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: selectMenuItem, "data-value": item.value, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, style: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                            }, children: (item === null || item === void 0 ? void 0 : item.icon) && ((0, jsx_runtime_1.jsx)("img", { alt: "", src: item.icon, style: { width: '20px', height: '20px' } })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "inherit", sx: { fontSize: '15px', fontWeight: 400 }, children: item.title })] }, item.id)); }) })] }));
+};
+exports.default = react_1.default.memo(MenuNotification);

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/MenuNotification.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/7/2023.
+ *
+ **/
+import '@testing-library/jest-dom';

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/MenuNotification.test.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+var react_1 = require("@testing-library/react");
+// Component
+var MenuNotification_1 = __importDefault(require("./MenuNotification"));
+describe('MenuNotification Component', function () {
+    it("Hiển thị button cho phép click để hiển thị menu.", function () {
+        var getByLabelText = (0, react_1.render)((0, jsx_runtime_1.jsx)(MenuNotification_1.default, { onUpdateMenuItem: function () { return null; } })).getByLabelText;
+        var moreHorizIcon = getByLabelText("more");
+        expect(moreHorizIcon).toBeInTheDocument();
+    });
+    // it("Hiển thị menu khi click vào button đóng mở menu.", () => {
+    //     const {getByLabelText, getByText} = render(
+    //         <MenuNotification onUpdateMenuItem={() => null}/>
+    //     );
+    //     const moreHorizIcon = getByLabelText("more");
+    //     fireEvent.click(moreHorizIcon);
+    //     const option1 = getByText("Option 1");
+    //     const option2 = getByText("Option 2");
+    //     expect(option1).toBeInTheDocument();
+    //     expect(option2).toBeInTheDocument();
+    // });
+    // it("Gọi hàm onUpdateMenuItem khi click chọn và từng item menu", () => {
+    //     const onUpdateMenuItemMock = jest.fn();
+    //     const {getByLabelText, getByText} = render(
+    //         <MenuNotification onUpdateMenuItem={onUpdateMenuItemMock}/>
+    //     );
+    //     const moreHorizIcon = getByLabelText("more");
+    //     fireEvent.click(moreHorizIcon);
+    //     const selectOption1 = getByText("Option 1");
+    //     fireEvent.click(selectOption1);
+    //     expect(onUpdateMenuItemMock).toHaveBeenCalledWith("selectOption1");
+    // });
+    // it("Đóng menu khi chọn một mục trong menu", () => {
+    //     const {getByLabelText, getByText, queryByRole} = render(
+    //         <MenuNotification onUpdateMenuItem={() => null}/>
+    //     );
+    //     const moreHorizIcon = getByLabelText("more");
+    //     fireEvent.click(moreHorizIcon);
+    //     const selectOption1 = getByText("Option 1");
+    //     fireEvent.click(selectOption1);
+    //     const closedMenu = queryByRole("menu");
+    //     expect(closedMenu).not.toBeInTheDocument();
+    // });
+});

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+import { IValueItem } from '../../Types';
+interface PropsHeaderInfo {
+    valueFilter: {
+        textSearch: string;
+        tabs: string;
+    };
+    onClosePopover?: () => void;
+    onUpdateStatus: (dataSent: IValueItem | string) => void;
+    onValueFilter: (textSearch: string, tabs: string) => void;
+}
+declare const HeaderInfo: (props: PropsHeaderInfo) => JSX.Element;
+export default HeaderInfo;

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var material_1 = require("@mui/material");
+var ButtonTabs_1 = __importDefault(require("./ButtonTabs"));
+var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
+var MenuNotification_1 = __importDefault(require("./MenuNotification"));
+var SearchBox_1 = __importDefault(require("../../../../AWING/SearchBox"));
+var Router_1 = require("../../../../AWING/Router");
+var HeaderInfo = function (props) {
+    var navigate = (0, Router_1.useNavigate)();
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var valueFilter = props.valueFilter, _a = props.onValueFilter, onValueFilter = _a === void 0 ? function () { return null; } : _a, _b = props.onUpdateStatus, onUpdateStatus = _b === void 0 ? function () { return null; } : _b, _c = props.onClosePopover, onClosePopover = _c === void 0 ? function () { return null; } : _c;
+    var handleUpdateMenuItem = function (value) {
+        if (value === Constant_1.Constants.SELECT_ALL) {
+            onUpdateStatus(Constant_1.Constants.ALL);
+        }
+        else if (value === Constant_1.Constants.NOTIFICATION_SETTING_SCREEN_PATH) {
+            navigate("".concat(value));
+            onClosePopover();
+        }
+        else {
+            // Chuyển đến trang tương ứng
+            navigate("".concat(value));
+        }
+    };
+    var handleKeyWordPassing = react_1.default.useCallback(function (searchType, searchString) {
+        onValueFilter(searchString, valueFilter.tabs);
+    }, [valueFilter]);
+    var handleUpdateTabActive = react_1.default.useCallback(function (tabItem) {
+        onValueFilter(valueFilter.textSearch, tabItem);
+    }, [valueFilter]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { mb: 1, component: "div", sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", variant: "h5", color: "inherit", noWrap: true, fontWeight: 'bold', children: t('Common.Notification') }), (0, jsx_runtime_1.jsx)(MenuNotification_1.default, { onUpdateMenuItem: handleUpdateMenuItem })] }), (0, jsx_runtime_1.jsx)(SearchBox_1.default, { onSearch: handleKeyWordPassing, stylePaper: {
+                    flex: 1,
+                    width: 'auto',
+                    maxWidth: '100%',
+                } }), (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { tabActive: valueFilter.tabs, onUpdateTabActive: handleUpdateTabActive })] }));
+};
+exports.default = HeaderInfo;

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/7/2023.
+ *
+ **/
+import '@testing-library/jest-dom';

package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.test.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+var react_1 = require("@testing-library/react");
+// Component
+var _1 = __importDefault(require("."));
+var _a = require('@jest/globals'), expect = _a.expect, describe = _a.describe, it = _a.it;
+jest.mock('./MenuNotification', function () { return function (props) {
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: function () { return props.onUpdateMenuItem("SelectAll"); }, children: "Notifications.SelectAll" }));
+}; });
+jest.mock('AWING/SearchBox', function () { return function (props) {
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: function () { return props.onSearch("searchString", "keyWordSearch"); }, children: "mockSearchBox" }));
+}; });
+describe("HeaderInfo component", function () {
+    var mockOnUpdateStatus = jest.fn();
+    var mockOnValueFilter = jest.fn();
+    var defaultProps = {
+        valueFilter: { textSearch: '', tabs: 'All' },
+        onUpdateStatus: mockOnUpdateStatus,
+        onValueFilter: mockOnValueFilter,
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it("Hiển thị các thành phần trong component HeaderInfo.", function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, __assign({}, defaultProps))).getByText;
+        // check hiển thị title.
+        var titleNotification = getByText("Common.Notification");
+        expect(titleNotification).toBeInTheDocument();
+    });
+    it("Thực hiện gọi lại hàm 'onUpdateStatus' khi người dùng chọn 'Đánh dấu tất cả là đã đọc(SelectAll)' từ menu.", function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, __assign({}, defaultProps))).getByText;
+        var itemMenuSelectAll = getByText("Notifications.SelectAll");
+        react_1.fireEvent.click(itemMenuSelectAll);
+        expect(mockOnUpdateStatus).toHaveBeenCalledWith("All");
+    });
+    it("Thực hiện gọi tới hàm 'onValueFilter' với các keyWord khi người dùng tìm kiếm.", function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, __assign({}, defaultProps))).getByText;
+        var inputSearch = getByText("mockSearchBox");
+        react_1.fireEvent.click(inputSearch);
+        expect(mockOnValueFilter).toHaveBeenCalledWith("keyWordSearch", "All");
+    });
+    it("Thực hiện gọi lại hàm 'onValueFilter' khi người dùng ấn chuyển tabs.", function () {
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, __assign({}, defaultProps))).getByText;
+        var buttonAll = getByText("Common.All");
+        react_1.fireEvent.click(buttonAll);
+        expect(mockOnValueFilter).toHaveBeenCalledWith("", "All");
+        var buttonUnread = getByText("Common.Unread");
+        react_1.fireEvent.click(buttonUnread);
+        expect(mockOnValueFilter).toHaveBeenCalledWith("", "Unread");
+    });
+});

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+import React from 'react';
+interface PropsNotificationEmpty {
+    isSearch?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: PropsNotificationEmpty) => JSX.Element>;
+export default _default;

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var material_1 = require("@mui/material");
+var bell_svg_1 = __importDefault(require("../../../../Assets/Images/bell.svg"));
+var binoculars_svg_1 = __importDefault(require("../../../../Assets/Images/binoculars.svg"));
+var NotificationEmpty = function (props) {
+    var _a = props.isSearch, isSearch = _a === void 0 ? false : _a;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: {
+            paddingBottom: '30px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        }, children: [(0, jsx_runtime_1.jsx)("img", { src: (isSearch ? binoculars_svg_1.default : bell_svg_1.default), alt: isSearch ? 'iconBinoculars' : 'iconBell', style: { width: '80px', height: '80px' } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { style: {
+                    fontSize: '20px',
+                    color: '#65676B',
+                    fontWeight: 600,
+                    marginTop: '10px',
+                    textAlign: 'center',
+                }, children: isSearch
+                    ? t('Notifications.InappropriateNotification')
+                    : t('Notifications.TitleNoNotifications') })] }));
+};
+exports.default = react_1.default.memo(NotificationEmpty);

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.test.js

@@ -0,0 +1,30 @@
+"use strict";
+// /**
+//  *
+//  * @author dauquan1108@gmail.com on 12/06/2023.
+//  *
+//  **/
+// import React from 'react';
+// import {render} from '@testing-library/react';
+// import '@testing-library/jest-dom';
+// import NotificationEmpty from './NotificationEmpty';
+// describe("NotificationEmpty component", () => {
+//     it("Hiển thị thông báo mặc định đối với trường hợp 'isSearch = false'.", () => {
+//         const {getByText, getByAltText} = render(<NotificationEmpty isSearch={false}/>);
+//         // kiểm tra icon hiển thị khi trạng thái bằng false.
+//         const iconEmpty = getByAltText("iconBell");
+//         expect(iconEmpty).toBeInTheDocument();
+//         // Kiểm tra text hiển thị khi trạng thái bằng false.
+//         const titleText = getByText("Notifications.TitleNoNotifications");
+//         expect(titleText).toBeInTheDocument();
+//     });
+//     it("Hiển thị thông báo khi đối với trường hợp 'isSearch=true'.", () => {
+//         const {getByText, getByAltText} = render(<NotificationEmpty isSearch={true}/>);
+//         // kiểm tra icon hiển thị khi trạng thái bằng true.
+//         const iconEmpty = getByAltText("iconBinoculars");
+//         expect(iconEmpty).toBeInTheDocument();
+//         // Kiểm tra text hiển thị khi trạng thái bằng true.
+//         const titleText = getByText("Notifications.InappropriateNotification");
+//         expect(titleText).toBeInTheDocument();
+//     });
+// });

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/Message.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+import { NotificationMessageField } from '../../../Types';
+import { SagaTransactionType } from '../../../../../ACM-AXN/TransactionLog/Types';
+export declare const getFullDescription: (type: SagaTransactionType[string], translation: any, fields: NotificationMessageField[], transactionType: SagaTransactionType) => {
+    title: import("react/jsx-runtime").JSX.Element;
+    url: string;
+};