@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

package/es/components/organism/TicketEditor/Service.d.ts

@@ -0,0 +1,49 @@
+declare const API: {
+    lookupInfo: {
+        callApi: {
+            c_user_id: (params: any, domain: any, token: any, config: any, userId: any) => Promise<{
+                code: number;
+                codeMessage: any;
+                messageAPI: any;
+                data: any;
+            } | {
+                code: number;
+                codeMessage: string;
+                data: any;
+                messageAPI?: undefined;
+            }>;
+        };
+    };
+    tickets: {
+        callApi: {
+            createTicket: (params: any, domain: any, token: any, config: any, userId: any) => Promise<{
+                code: number;
+                codeMessage: any;
+                messageAPI: any;
+                data: any;
+            } | {
+                code: number;
+                codeMessage: string;
+                data: any;
+                messageAPI?: undefined;
+            }>;
+            getCustomFields: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+            getDetailsTicket: (params: any, domain: any, token: any, config: any, userId: any, ticketId: any, type?: string) => Promise<any>;
+            getListComment: (params: any, domain: any, token: any, config: any, userId: any, type: any, ticketId: any) => Promise<any>;
+            updateComment: (params: any, domain: any, token: any, config: any, userId: any, type: any, ticketId: any) => Promise<any>;
+            updateFollowers: (params: any, domain: any, token: any, config: any, userId: any, ticketId: any) => Promise<any>;
+            upload: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+        };
+    };
+    accounts: {
+        callApi: {
+            getAccountManage: (params: any, domain: any, token: any, config: any, userId: any, type: any) => Promise<any>;
+        };
+    };
+    permission: {
+        callApi: {
+            getList: (params: any, domain: any, token: any, config: any, userId: any, type: any, ownerId: any) => Promise<any>;
+        };
+    };
+};
+export default API;

package/es/components/organism/TicketEditor/Service.js

@@ -0,0 +1,58 @@
+import { callApiWithAuth, getEntriesV2 } from './util';
+const API = {
+    lookupInfo: {
+        callApi: {
+            c_user_id: (params, domain, token, config, userId) => callApiWithAuth(`hub/toolkit/v2.0/selector/users/listing`, 'GET', null, domain, config, token, userId).then(res => {
+                const data = getEntriesV2(res, 0);
+                // dataBackup[params.objectName] = data;
+                return data;
+            }),
+        },
+    },
+    tickets: {
+        callApi: {
+            createTicket: (params, domain, token, config, userId) => callApiWithAuth(`api/ticket/index`, 'POST', { ...params }, domain, config, token, userId, true).then(res => {
+                const data = getEntriesV2(res, 0);
+                // dataBackup[params.objectName] = data;
+                return data;
+            }),
+            getCustomFields: (params, domain, token, config, userId, type) => callApiWithAuth(`api/ticket/index`, 'get', { ...params }, domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            getDetailsTicket: (params, domain, token, config, userId, ticketId, type = '') => callApiWithAuth(`api/ticket/index/${ticketId}`, 'get', { ...params }, domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            getListComment: (params, domain, token, config, userId, type, ticketId) => callApiWithAuth(`api/ticket/index/${ticketId}`, 'get', { ...params }, domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            updateComment: (params, domain, token, config, userId, type, ticketId) => callApiWithAuth(`api/ticket/index/${ticketId}`, 'put', { ...params }, domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            updateFollowers: (params, domain, token, config, userId, ticketId) => callApiWithAuth(`api/ticket/index/${ticketId}`, 'put', { ...params }, domain, config, token, userId, true).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+            upload: (params, domain, token, config, userId, type) => callApiWithAuth(`api/upload/index`, 'post', params.data, domain, config, token, userId, true, type).then(res => 
+            // const data = getEntriesV2(res, 0);
+            // dataBackup[params.objectName] = data;
+            res.data),
+        },
+    },
+    accounts: {
+        callApi: {
+            getAccountManage: (params, domain, token, config, userId, type) => callApiWithAuth(`api/network/index/${config.api_pid}`, 'GET', { ...params }, domain, config, token, userId, false, type, true).then(res => res.data),
+        },
+    },
+    permission: {
+        callApi: {
+            getList: (params, domain, token, config, userId, type, ownerId) => 
+            // console.log({params, domain, token, config,userId, type})
+            callApiWithAuth(`api/privilege/index`, 'GET', { ...params, ownerId }, domain, config, token, userId, false, type, false, true).then(res => res.data),
+        },
+    },
+};
+export default API;

package/es/components/organism/TicketEditor/components/DropdownComponent.d.ts

@@ -0,0 +1,9 @@
+declare const DropdownComponent: ({ data, setValueInput, valueInput, type, isUpdate, title }: {
+    data: any;
+    setValueInput: any;
+    valueInput: any;
+    type: any;
+    isUpdate: any;
+    title: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DropdownComponent;

package/es/components/organism/TicketEditor/components/DropdownComponent.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Select } from '@antscorp/antsomi-ui/es/components';
+import { getObjectPropSafely } from '../util';
+const EMPTY_VALUE = '____';
+const DropdownComponent = ({ data, setValueInput, valueInput, type, isUpdate, title }) => {
+    const [dropDownOpen, setDropdownOpen] = useState(false);
+    const [labelSelected, setLabelSelected] = useState('-');
+    const dropDonwRef = useRef();
+    const handleOnchangeSelect = (item, type) => {
+        setLabelSelected(item.name);
+        setDropdownOpen(false);
+        setValueInput({
+            ...valueInput,
+            [type]: {
+                ...item,
+                value: item.value === EMPTY_VALUE ? '' : item.value,
+            },
+        });
+    };
+    const renderData = useMemo(() => (!isUpdate ? [{ name: '-', value: EMPTY_VALUE }, ...data] : data), [data, isUpdate]);
+    const handleHideDropdown = event => {
+        if (event.key === 'Escape') {
+            setDropdownOpen(false);
+        }
+    };
+    const handleClickOutside = event => {
+        if (dropDonwRef.current && !dropDonwRef.current.contains(event.target)) {
+            setDropdownOpen(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleHideDropdown, true);
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('keydown', handleHideDropdown, true);
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    });
+    return (_jsx(Select, { value: getObjectPropSafely(() => valueInput[type].value) || EMPTY_VALUE, options: renderData?.map(item => ({
+            ...item,
+            label: item.name,
+        })) || [], onChange: (_, item) => handleOnchangeSelect(item, type) })
+    // <WrapperDropdown ref={dropDonwRef}>
+    //   <Tooltip title={title} placement="top" arrow>
+    //     <WrapperToggleDropdown
+    //       className="wrapper-select-options"
+    //       onClick={() => setDropdownOpen(!dropDownOpen)}
+    //     >
+    //       <WrapperLabelDropdown>{labelSelected}</WrapperLabelDropdown>
+    //       <Icon
+    //         type="icon-ants-expand"
+    //         style={{ height: '16px', width: '16px', color: '#7f7f7f' }}
+    //       />
+    //     </WrapperToggleDropdown>
+    //   </Tooltip>
+    //   {dropDownOpen && (
+    //     <WrapperDropdownMenu>
+    //       {data?.map(item => (
+    //         <WrapperDropdownItem key={item.value} onClick={() => handleOnchangeSelect(item, type)}>
+    //           {item.name}
+    //         </WrapperDropdownItem>
+    //       ))}
+    //     </WrapperDropdownMenu>
+    //   )}
+    // </WrapperDropdown>
+    );
+};
+export default DropdownComponent;

package/es/components/organism/TicketEditor/components/Message.d.ts

@@ -0,0 +1,2 @@
+declare const Message: (props: any) => false | import("react/jsx-runtime").JSX.Element;
+export default Message;

package/es/components/organism/TicketEditor/components/Message.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { WrapperMessage } from '../styled';
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+const Message = props => {
+    const { isOpen = false, deplay = 1000, message = 'Success', subtitle = 'Created', type = 'success', } = props;
+    const [isOpenState, setIsOpenState] = useState(true);
+    useEffect(() => {
+        if (isOpen !== isOpenState) {
+            setIsOpenState(isOpen);
+        }
+        if (isOpen) {
+            const timeOut = setTimeout(() => {
+                setIsOpenState(false);
+            }, deplay);
+            return () => {
+                clearTimeout(timeOut);
+            };
+        }
+    }, [isOpen]);
+    return (isOpenState && (_jsx(WrapperMessage, { className: "container-content", children: _jsxs("div", { className: "floating", style: { color: '#008634' }, children: [_jsx("span", { style: {
+                        background: `${type === 'success' ? '#008634' : 'red'}`,
+                        borderRadius: '50%',
+                        height: '18px',
+                        width: '18px',
+                        textAlign: 'center',
+                        marginRight: '16px',
+                        lineHeight: '22px',
+                    }, children: _jsx("span", { className: "icon-check", children: _jsx(Icon, { className: "check-icon", type: "icon-ants-check" }) }) }), _jsxs("div", { children: [_jsx("span", { className: "alert__title", children: message }), _jsx("span", { className: "secondary__title", children: subtitle })] }), _jsx("div", { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setIsOpenState(false), children: _jsx(Icon, { type: "icon-ants-close" }) })] }) })));
+};
+export default Message;

package/es/components/organism/TicketEditor/components/MessageComponent.d.ts

@@ -0,0 +1,10 @@
+declare const MessageComponent: ({ toUser, fromUser, followers, attachments, message, date, timeZone, }: {
+    toUser: any;
+    fromUser: any;
+    followers: any;
+    attachments: any;
+    message: any;
+    date: any;
+    timeZone: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MessageComponent;

package/es/components/organism/TicketEditor/components/MessageComponent.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { WrapperAvatar, WrapperContentAvatar, WrapperLinkItemFiles, WrapperModalHeaderImg, WrapperModalImg, } from '../styled';
+import { Icon, Spin, Tooltip } from '@antscorp/antsomi-ui/es/components';
+import { convertDateToTimestamp } from '../util';
+const IMAGE_EXTENDS = ['.png', '.jpg', '.jpeg'];
+const MessageComponent = ({ toUser, fromUser, followers, attachments, message, date, timeZone, }) => {
+    const [isExpand, setIsExpand] = useState(false);
+    const refMesage = useRef(null);
+    const [modalImg, setModalImg] = useState({
+        isOpen: false,
+        src: '',
+    });
+    useEffect(() => {
+        if (refMesage.current) {
+            refMesage.current.querySelectorAll('img')?.forEach(img => {
+                img.style.cursor = 'pointer';
+                img.addEventListener('click', () => {
+                    setModalImg({
+                        ...modalImg,
+                        isOpen: true,
+                        src: img?.src,
+                    });
+                });
+            });
+            refMesage.current.querySelectorAll('a')?.forEach(a => {
+                const isOpenNewTab = a.attributes?.rel?.value?.includes('noopener noreferrer');
+                if (isOpenNewTab) {
+                    a.setAttribute('target', '_blank');
+                }
+            });
+        }
+    }, [refMesage.current]);
+    const isImageUrl = url => IMAGE_EXTENDS.some(tail => url && url.toLowerCase().endsWith(tail));
+    const [images, files] = useMemo(() => {
+        const arrImgs = [];
+        const arrFiles = [];
+        attachments.forEach(file => {
+            if (isImageUrl(file?.content_url)) {
+                arrImgs.push(file);
+            }
+            else {
+                arrFiles.push(file);
+            }
+        });
+        return [arrImgs, arrFiles];
+    }, [attachments]);
+    const renderImage = file => (_jsx("div", { className: "image-item", children: _jsx("img", { src: file?.content_url, alt: "attachment" }) }, file?.content_url));
+    return (_jsxs(WrapperContentAvatar, { children: [_jsxs("div", { className: "comment-header", children: [_jsxs(WrapperAvatar, { children: [_jsx("img", { className: "avatar", alt: "avatar", src: fromUser?.photo }), _jsxs("div", { className: "user-info", children: [_jsx("span", { className: "user-info__name", children: fromUser?.name }), _jsxs("div", { className: "user-info__desc", children: [_jsxs("div", { className: "user-info__to-user", children: [_jsxs("span", { children: ["To: ", toUser?.name] }), !isExpand && (_jsx(Icon, { className: "user-info__expand-icon", type: "icon-ants-caret-down1", onClick: () => setIsExpand(true) }))] }), isExpand ? (_jsxs("div", { className: "user-info__followers", children: [_jsx("div", { className: "user-info__followers__name", children: _jsxs("span", { className: "user-info__to-user", children: ["Follower(s):", ` `, followers?.map(follower => follower?.name).join(', ')] }) }), _jsx(Icon, { className: "user-info__expand-icon open", type: "icon-ants-caret-down1", onClick: () => setIsExpand(false) })] })) : null] })] })] }), _jsx("div", { className: "comment-time", children: convertDateToTimestamp(date, timeZone) })] }), _jsxs("div", { className: "comment-content", children: [_jsx("div", { dangerouslySetInnerHTML: { __html: message }, ref: refMesage }), _jsxs(WrapperLinkItemFiles, { className: "no-border", children: [images.map(renderImage), files?.map(file => (_jsxs("div", { className: "file-item rounded", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx("a", { href: file?.content_url, download: true, children: _jsx(Icon, { className: "download-btn", type: "icon-ants-file-download" }) })] }, file?.content_url)))] })] }), _jsx(WrapperModalImg, { open: modalImg.isOpen, className: "image-modal", onClose: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsxs("div", { className: "modal-img-content", children: [_jsx(Spin, { spinning: !modalImg?.src, children: _jsx(WrapperModalHeaderImg, { style: { cursor: 'pointer' }, onClick: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsx(Icon, { type: "close", style: {
+                                        height: '20px',
+                                        width: '20px',
+                                        color: '#005eb8',
+                                        background: '#fff',
+                                        fontSize: '20px',
+                                    } }) }) }), _jsx("div", { style: {
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                justifyContent: 'center',
+                                width: '100%',
+                                height: 'calc(100% - 20px)',
+                                overflow: 'auto',
+                            }, children: _jsx("img", { src: modalImg?.src, style: { width: '100%', objectFit: 'cover' }, alt: "modal" }) })] }) })] }));
+};
+export default MessageComponent;

package/es/components/organism/TicketEditor/components/icons/AddTicketIcon.d.ts

@@ -0,0 +1,2 @@
+declare function AddTicketIcon(props: any): import("react/jsx-runtime").JSX.Element;
+export default AddTicketIcon;

package/es/components/organism/TicketEditor/components/icons/AddTicketIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function AddTicketIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", ...props, children: _jsxs("g", { id: "CTA_Button", "data-name": "CTA Button", transform: "translate(-1 -3.063)", children: [_jsx("rect", { id: "Rounded_Rectangle_7_copy", "data-name": "Rounded Rectangle 7 copy", width: "12", height: "12", rx: "6", transform: "translate(1 3.063)", fill: "#1f5fac" }), _jsx("path", { id: "Union_141", "data-name": "Union 141", d: "M-1352,252.062v-2h-2a1,1,0,0,1-1-1,1,1,0,0,1,1-1h2v-2a1,1,0,0,1,1-1,1,1,0,0,1,1,1v2h2a1,1,0,0,1,1,1,1,1,0,0,1-1,1h-2v2a1,1,0,0,1-1,1A1,1,0,0,1-1352,252.062Z", transform: "translate(1358 -240)", fill: "#fff" })] }) }));
+}
+export default AddTicketIcon;

package/es/components/organism/TicketEditor/components/icons/TicketIcon.d.ts

@@ -0,0 +1,2 @@
+declare function TicketIcon(props: any): import("react/jsx-runtime").JSX.Element;
+export default TicketIcon;

package/es/components/organism/TicketEditor/components/icons/TicketIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function TicketIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "19.996", height: "16.001", viewBox: "0 0 19.996 16.001", ...props, children: _jsx("path", { id: "Subtraction_26", "data-name": "Subtraction 26", d: "M20466,11869h-16a2,2,0,0,1-2-2v-3.052a2.566,2.566,0,0,0,.5.047,2.5,2.5,0,1,0,0-5,2.675,2.675,0,0,0-.5.051V11855a2,2,0,0,1,2-2h16a2,2,0,0,1,2,2v12A2,2,0,0,1,20466,11869Zm-12-3h0v2h1v-2Zm7-1.5a1.165,1.165,0,0,0-1.178,1.177,1.094,1.094,0,0,0,.344.807,1.14,1.14,0,0,0,.834.339,1.154,1.154,0,0,0,.836-.339,1.119,1.119,0,0,0,.34-.807,1.159,1.159,0,0,0-1.176-1.177Zm-7-2.5h0v2h1v-2Zm7-4.664a1.663,1.663,0,0,1,.918.221,1.148,1.148,0,0,1,.479.576,1.664,1.664,0,0,1,.107.709,1.343,1.343,0,0,1-.221.657,4.689,4.689,0,0,1-.6.652l-.238.221-.092.084-.1.091c-.08.072-.16.146-.24.221a2.629,2.629,0,0,0-.559.725,2.024,2.024,0,0,0-.277,1v.833h1.7v-.093c0-.234,0-.42.012-.565a1.8,1.8,0,0,1,.055-.38.7.7,0,0,1,.125-.246,2.516,2.516,0,0,1,.461-.617l.006,0c.172-.162.377-.356.6-.57a4.367,4.367,0,0,0,.658-.832,2.114,2.114,0,0,0,.385-1,3,3,0,0,0-.072-1.027,3.647,3.647,0,0,0-.312-.848,2.951,2.951,0,0,0-1.064-.986,3.435,3.435,0,0,0-1.725-.411,3.312,3.312,0,0,0-1.465.318,3.121,3.121,0,0,0-1.078.848,3.244,3.244,0,0,0-.627,1.135l1.5.652a3.392,3.392,0,0,1,.3-.642,1.518,1.518,0,0,1,.533-.519A1.558,1.558,0,0,1,20461,11857.333Zm-7,.663h0v2h1v-2Zm0-4h0v2h1v-2Z", transform: "translate(-20448.002 -11852.998)", fill: "#666" }) }));
+}
+export default TicketIcon;

package/es/components/organism/TicketEditor/constant.d.ts

@@ -0,0 +1,17 @@
+export declare const TICKET_CUSTOM_MESSAGE_KEY = "TICKET_CUSTOM_MESSAGE_KEY";
+export declare const MESSAGE_TYPE: {
+    TICKET_CREATE_STATUS: string;
+};
+export declare const NOTIFICATION_TYPES: {
+    email: {
+        label: string;
+        value: string;
+    };
+    app_push: {
+        label: string;
+        value: string;
+    };
+};
+export declare const PORTAL_KEYS: {
+    USER_LANGUAGE: string;
+};

package/es/components/organism/TicketEditor/constant.js

@@ -0,0 +1,17 @@
+export const TICKET_CUSTOM_MESSAGE_KEY = 'TICKET_CUSTOM_MESSAGE_KEY';
+export const MESSAGE_TYPE = {
+    TICKET_CREATE_STATUS: 'TICKET_CREATE_STATUS',
+};
+export const NOTIFICATION_TYPES = {
+    email: {
+        label: 'Send mail',
+        value: 'email',
+    },
+    app_push: {
+        label: 'Push notification',
+        value: 'app_push',
+    },
+};
+export const PORTAL_KEYS = {
+    USER_LANGUAGE: 'user_language',
+};

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

@@ -0,0 +1,24 @@
+export declare const TicketEditor: {
+    (props: any): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        isOpen: boolean;
+        handleCloseDrawer: () => null;
+        apiKey: string;
+        portalId: string;
+        token: string;
+        domain: string;
+        action: string;
+        config: {};
+        userId: string;
+        ownerId: string;
+        domainTicket: string;
+        ticketId: string;
+        domainAccount: string;
+        useIcon: boolean;
+        domainPermission: string;
+        appCode: string;
+        menuCode: string;
+        fullParent: boolean;
+        useChat: boolean;
+    };
+};

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

@@ -0,0 +1,260 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Content from './Content';
+import Service from './Service';
+import TicketIcon from './components/icons/TicketIcon';
+import AddTicketIcon from './components/icons/AddTicketIcon';
+import { Button, Modal, Popover, Typography, DrawerDetail, message, Icon, } from '@antscorp/antsomi-ui/es/components/';
+import { WrapperModalHeader, TicketButton, TicketEditorWrapper } from './styled';
+// import Message from './components/Message';
+const defaultProps = {
+    isOpen: false,
+    handleCloseDrawer: () => null,
+    apiKey: '',
+    portalId: '',
+    token: '',
+    domain: '',
+    action: '',
+    config: {},
+    userId: '',
+    ownerId: '',
+    domainTicket: '',
+    ticketId: '',
+    domainAccount: '',
+    useIcon: false,
+    domainPermission: '',
+    appCode: 'TICKET_MANAGEMENT',
+    menuCode: 'TICKET',
+    fullParent: false,
+    useChat: false,
+};
+export const TicketEditor = props => {
+    const { isOpen, apiKey, portalId, token, domain, action, config: propsConfig, userId, ownerId, domainTicket, ticketId, domainAccount, useIcon, domainPermission, appCode, menuCode, fullParent, useChat, } = props;
+    const [openDrawer, setOpenDrawer] = useState(false);
+    const [isOpenPopover, setOpenPopover] = useState(false);
+    const [openChat, setOpenChat] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [isOpenModal, setIsOpenModal] = useState(false);
+    const [listUsers, setListUsers] = useState([]);
+    const [ticketDetails, setTicketDetails] = useState({});
+    const [listComment, setListComment] = useState([]);
+    const [isLoadingComment, setIsLoadingComment] = useState(false);
+    const [isLoadingDetails, setIsLoadingDetails] = useState(false);
+    const [isLoadingSelectedAccount, setIsLoadingSelectedAccount] = useState(false);
+    const [accountEdit, setAccountEdit] = useState(null);
+    const [isLoadingDataSouce, setIsLoadingDataSouce] = useState(false);
+    const [accountManage, setAccountManage] = useState([]);
+    const [timeZone, setTimeZone] = useState('');
+    // const [isSuccessCreated, setIsSuccessCreated] = useState(false);
+    const [drawerHeader, setDrawerHeader] = useState(null);
+    const [dataSelectInput, setDataSelectInput] = useState([]);
+    const config = typeof propsConfig === 'string' ? JSON.parse(atob(propsConfig)) : propsConfig;
+    const isAllAccount = !ownerId;
+    const [messageApi, contextHolder] = message.useMessage();
+    const showMessage = (type = 'success', content = 'Create ticket successfully!') => {
+        messageApi.open({
+            type: type,
+            content,
+        });
+    };
+    // const useStyles = makeStyles((theme) => ({
+    //   modal: {
+    //     display: 'flex',
+    //     alignItems: 'center',
+    //     justifyContent: 'center',
+    //   },
+    //   wrapperBody: {
+    //     background: '#fff',
+    //     width: 500,
+    //     borderRadius: 4
+    //   },
+    //   modalBody: {
+    //     padding: 16
+    //   },
+    //   modalFooter: {
+    //     padding: 12,
+    //     justifyContent: 'flex-start',
+    //     gap: 10,
+    //     display: 'flex'
+    //   }
+    // }),
+    // {
+    //   classNamePrefix: 'UITicket_Editor',
+    // });
+    // const classes = useStyles();
+    const handleCloseDrawer = () => {
+        setOpenDrawer(false);
+        props.handleCloseDrawer();
+    };
+    const fetchDataSouce = () => {
+        setIsLoadingDataSouce(true);
+        Service.lookupInfo.callApi
+            .c_user_id({}, domain, token, config, userId)
+            .then(res => {
+            setIsLoadingDataSouce(false);
+            if (res.code === 200) {
+                setListUsers(res?.data);
+                // if (res?.data?.entries[0].length > 0) {
+            }
+        })
+            .catch(err => {
+            setIsLoadingDataSouce(false);
+            // console.log('err ===>', err)
+        });
+    };
+    const fetchAccountPermission = () => {
+        setIsLoadingSelectedAccount(true);
+        const params = {
+            appCode,
+            menuCode,
+            fullParent,
+        };
+        Service.permission.callApi
+            .getList(params, domainPermission, token, config, userId, 'list-menu', ownerId)
+            .then(res => {
+            setIsLoadingSelectedAccount(false);
+            if (res.code === 200) {
+                setAccountEdit(res?.data[0]?.selected_edit);
+            }
+        })
+            .catch(err => {
+            setIsLoadingSelectedAccount(false);
+        });
+    };
+    const fetchAccountManage = () => {
+        // setIsLoadingDataSouce(true)
+        Service.accounts.callApi
+            .getAccountManage({}, domainAccount, token, config, userId, 'account')
+            .then(res => {
+            // setIsLoadingDataSouce(false)
+            if (res.code === 200) {
+                const listIds = res?.data?.infoNetwork?.accountManager?.map(item => item.user_id);
+                setAccountManage(listIds);
+                setTimeZone(res?.data?.infoNetwork?.timezone);
+            }
+        })
+            .catch(err => {
+            // setIsLoadingDataSouce(false)
+            // console.log('err ===>', err)
+        });
+    };
+    const fetchDetailsTicket = ticketId => {
+        setIsLoadingDetails(true);
+        Service.tickets.callApi
+            .getDetailsTicket({}, domainTicket, token, config, userId, ticketId)
+            .then(res => {
+            setIsLoadingDetails(false);
+            if (res.code === 200) {
+                setTicketDetails(res?.data?.ticket);
+            }
+        })
+            .catch(err => {
+            setIsLoadingDetails(false);
+            // console.log('err ===>', err)
+        });
+    };
+    const fetchgetTicketComments = ticketId => {
+        setIsLoadingComment(true);
+        Service.tickets.callApi
+            .getListComment({}, domainTicket, token, config, userId, 'get-ticket-comments', ticketId)
+            .then(res => {
+            if (res.code === 200) {
+                setListComment(res?.data);
+                // setListUsers(res?.data)
+                // setDataSelect(res?.data)
+                // if (res?.data?.entries[0].length > 0) {
+            }
+            else {
+                setListComment([]);
+            }
+        })
+            .finally(() => {
+            setIsLoadingComment(false);
+        });
+    };
+    const setIsSuccessCreated = isSuccess => {
+        if (isSuccess) {
+            showMessage();
+        }
+        else {
+            showMessage('error', 'Create ticket failed!');
+        }
+    };
+    useEffect(() => {
+        if (ticketId && action !== 'create' && isOpen) {
+            fetchDetailsTicket(ticketId);
+            fetchgetTicketComments(ticketId);
+        }
+    }, [ticketId, isOpen]);
+    useEffect(() => {
+        fetchDataSouce();
+        fetchAccountManage();
+        fetchAccountPermission();
+    }, []);
+    const toggleModal = () => {
+        setIsOpenModal(!isOpenModal);
+    };
+    useEffect(() => {
+        setOpenDrawer(isOpen);
+        // if (isOpen) {
+        //   setIsSuccessCreated(false);
+        // }
+    }, [isOpen]);
+    const handleClose = (isCancle, isRulesEdit) => {
+        if (isCancle) {
+            handleCloseDrawer();
+        }
+        else if (isRulesEdit) {
+            setIsOpenModal(true);
+        }
+        else {
+            handleCloseDrawer();
+        }
+        setListComment([]);
+        setDrawerHeader(null);
+    };
+    const handleConfirmModal = () => {
+        setIsOpenModal(false);
+        handleCloseDrawer();
+    };
+    const handleSelectPopover = option => {
+        if (option === 'DRAWER') {
+            setOpenDrawer(true);
+        }
+        else {
+            setOpenChat(true);
+        }
+        setAnchorEl(null);
+    };
+    return (_jsxs(TicketEditorWrapper, { children: [!!useIcon && (_jsxs(TicketButton, { onClick: e => (useChat ? setOpenPopover(true) : setOpenDrawer(true)), children: [_jsx(TicketIcon, {}), _jsx(AddTicketIcon, { className: "add-icon" })] })), !!useChat && (_jsx(_Fragment, { children: _jsxs(Popover, { open: isOpenPopover, className: "popoverBody", children: [_jsx(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('DRAWER'), children: "Create ticket" }), _jsx(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('CHAT'), children: "Chat with us" })] }) })), _jsx(DrawerDetail, { open: openDrawer, onClose: () => handleClose(true, false), menuProps: {
+                    items: [
+                        {
+                            icon: _jsx(Icon, { type: "icon-ants-pencil" }),
+                            label: 'Settings',
+                            key: 'settings',
+                        },
+                    ],
+                    selectedKeys: ['settings'],
+                }, headerProps: {
+                    // children: drawerHeader,
+                    showBorderBottom: true,
+                }, name: "ticket-editor-drawer", children: openDrawer && (_jsx(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, config: config, ticketDetails: ticketDetails, listComment: listComment, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isLoadingComment, isLoadingDetails: isLoadingDetails, isLoadingDataSouce: isLoadingDataSouce, handleCloseDrawer: handleCloseDrawer, setIsSuccessCreated: setIsSuccessCreated, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, setDrawerHeader: setDrawerHeader, openDrawer: openDrawer, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput })) }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
+                                        height: '28px',
+                                        background: '#1f5fac',
+                                        color: '#fff',
+                                        fontSize: '12px',
+                                        borderRadius: '3px',
+                                        fontWeight: 'bold',
+                                        textTransform: 'capitalize',
+                                    }, onClick: handleConfirmModal, children: "Confirm" }), _jsx(Button, { style: {
+                                        height: '28px',
+                                        background: '#fff',
+                                        color: '#005fb8',
+                                        fontSize: '12px',
+                                        borderRadius: '3px',
+                                        fontWeight: 'bold',
+                                        textTransform: 'capitalize',
+                                        border: '1px solid #edeef7',
+                                    }, onClick: () => setIsOpenModal(false), children: "Cancel" })] })] }) }), contextHolder] }));
+};
+TicketEditor.defaultProps = defaultProps;