@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+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';
@@ -11,17 +12,19 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         src: '',
     });
     useEffect(() => {
-        var _a, _b;
         if (refMesage.current) {
-            (_a = refMesage.current.querySelectorAll('img')) === null || _a === void 0 ? void 0 : _a.forEach(img => {
+            refMesage.current.querySelectorAll('img')?.forEach(img => {
                 img.style.cursor = 'pointer';
                 img.addEventListener('click', () => {
-                    setModalImg(Object.assign(Object.assign({}, modalImg), { isOpen: true, src: img === null || img === void 0 ? void 0 : img.src }));
+                    setModalImg({
+                        ...modalImg,
+                        isOpen: true,
+                        src: img?.src,
+                    });
                 });
             });
-            (_b = refMesage.current.querySelectorAll('a')) === null || _b === void 0 ? void 0 : _b.forEach(a => {
-                var _a, _b, _c;
-                const isOpenNewTab = (_c = (_b = (_a = a.attributes) === null || _a === void 0 ? void 0 : _a.rel) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.includes('noopener noreferrer');
+            refMesage.current.querySelectorAll('a')?.forEach(a => {
+                const isOpenNewTab = a.attributes?.rel?.value?.includes('noopener noreferrer');
                 if (isOpenNewTab) {
                     a.setAttribute('target', '_blank');
                 }
@@ -33,7 +36,7 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         const arrImgs = [];
         const arrFiles = [];
         attachments.forEach(file => {
-            if (isImageUrl(file === null || file === void 0 ? void 0 : file.content_url)) {
+            if (isImageUrl(file?.content_url)) {
                 arrImgs.push(file);
             }
             else {
@@ -42,58 +45,20 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         });
         return [arrImgs, arrFiles];
     }, [attachments]);
-    const renderImage = file => (React.createElement("div", { className: "image-item", key: file === null || file === void 0 ? void 0 : file.content_url },
-        React.createElement("img", { src: file === null || file === void 0 ? void 0 : file.content_url, alt: "attachment" })));
-    return (React.createElement(WrapperContentAvatar, null,
-        React.createElement("div", { className: "comment-header" },
-            React.createElement(WrapperAvatar, null,
-                React.createElement("img", { className: "avatar", alt: "avatar", src: fromUser === null || fromUser === void 0 ? void 0 : fromUser.photo }),
-                React.createElement("div", { className: "user-info" },
-                    React.createElement("span", { className: "user-info__name" }, fromUser === null || fromUser === void 0 ? void 0 : fromUser.name),
-                    React.createElement("div", { className: "user-info__desc" },
-                        React.createElement("div", { className: "user-info__to-user" },
-                            React.createElement("span", null,
-                                "To: ", toUser === null || toUser === void 0 ? void 0 :
-                                toUser.name),
-                            !isExpand && (React.createElement(Icon, { className: "user-info__expand-icon", type: "icon-ants-caret-down1", onClick: () => setIsExpand(true) }))),
-                        isExpand ? (React.createElement("div", { className: "user-info__followers" },
-                            React.createElement("div", { className: "user-info__followers__name" },
-                                React.createElement("span", { className: "user-info__to-user" },
-                                    "Follower(s):",
-                                    ` `, followers === null || followers === void 0 ? void 0 :
-                                    followers.map(follower => follower === null || follower === void 0 ? void 0 : follower.name).join(', '))),
-                            React.createElement(Icon, { className: "user-info__expand-icon open", type: "icon-ants-caret-down1", onClick: () => setIsExpand(false) }))) : null))),
-            React.createElement("div", { className: "comment-time" }, convertDateToTimestamp(date, timeZone))),
-        React.createElement("div", { className: "comment-content" },
-            React.createElement("div", { dangerouslySetInnerHTML: { __html: message }, ref: refMesage }),
-            React.createElement(WrapperLinkItemFiles, { className: "no-border" },
-                images.map(renderImage), files === null || files === void 0 ? void 0 :
-                files.map(file => (React.createElement("div", { className: "file-item rounded", key: file === null || file === void 0 ? void 0 : file.content_url },
-                    React.createElement("div", { className: "file-name-group" },
-                        React.createElement(Icon, { className: "file-icon", type: "icon-ants-attachment" }),
-                        React.createElement(Tooltip, { title: file === null || file === void 0 ? void 0 : file.file_name },
-                            React.createElement("span", { className: "file-name" }, file === null || file === void 0 ? void 0 : file.file_name))),
-                    React.createElement("a", { href: file === null || file === void 0 ? void 0 : file.content_url, download: true },
-                        React.createElement(Icon, { className: "download-btn", type: "icon-ants-file-download" }))))))),
-        React.createElement(WrapperModalImg, { open: modalImg.isOpen, className: "image-modal", onClose: () => setModalImg(Object.assign(Object.assign({}, modalImg), { isOpen: false })) },
-            React.createElement("div", { className: "modal-img-content" },
-                React.createElement(Spin, { spinning: !(modalImg === null || modalImg === void 0 ? void 0 : modalImg.src) },
-                    React.createElement(WrapperModalHeaderImg, { style: { cursor: 'pointer' }, onClick: () => setModalImg(Object.assign(Object.assign({}, modalImg), { isOpen: false })) },
-                        React.createElement(Icon, { type: "close", style: {
-                                height: '20px',
-                                width: '20px',
-                                color: '#005eb8',
-                                background: '#fff',
-                                fontSize: '20px',
-                            } }))),
-                React.createElement("div", { style: {
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'center',
-                        width: '100%',
-                        height: 'calc(100% - 20px)',
-                        overflow: 'auto',
-                    } },
-                    React.createElement("img", { src: modalImg === null || modalImg === void 0 ? void 0 : modalImg.src, style: { width: '100%', objectFit: 'cover' }, alt: "modal" }))))));
+    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

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

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

@@ -1,8 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AddTicketIcon(props) {
-    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12" }, props),
-        React.createElement("g", { id: "CTA_Button", "data-name": "CTA Button", transform: "translate(-1 -3.063)" },
-            React.createElement("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" }),
-            React.createElement("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" }))));
+    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

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

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

@@ -1,6 +1,5 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 function TicketIcon(props) {
-    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "19.996", height: "16.001", viewBox: "0 0 19.996 16.001" }, props),
-        React.createElement("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" })));
+    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/index.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export declare const TicketEditor: {
-    (props: any): React.JSX.Element;
+    (props: any): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         isOpen: boolean;
         handleCloseDrawer: () => null;

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

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+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';
@@ -92,7 +93,7 @@ export const TicketEditor = props => {
             .then(res => {
             setIsLoadingDataSouce(false);
             if (res.code === 200) {
-                setListUsers(res === null || res === void 0 ? void 0 : res.data);
+                setListUsers(res?.data);
                 // if (res?.data?.entries[0].length > 0) {
             }
         })
@@ -111,10 +112,9 @@ export const TicketEditor = props => {
         Service.permission.callApi
             .getList(params, domainPermission, token, config, userId, 'list-menu', ownerId)
             .then(res => {
-            var _a;
             setIsLoadingSelectedAccount(false);
             if (res.code === 200) {
-                setAccountEdit((_a = res === null || res === void 0 ? void 0 : res.data[0]) === null || _a === void 0 ? void 0 : _a.selected_edit);
+                setAccountEdit(res?.data[0]?.selected_edit);
             }
         })
             .catch(err => {
@@ -126,12 +126,11 @@ export const TicketEditor = props => {
         Service.accounts.callApi
             .getAccountManage({}, domainAccount, token, config, userId, 'account')
             .then(res => {
-            var _a, _b, _c, _d, _e;
             // setIsLoadingDataSouce(false)
             if (res.code === 200) {
-                const listIds = (_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.infoNetwork) === null || _b === void 0 ? void 0 : _b.accountManager) === null || _c === void 0 ? void 0 : _c.map(item => item.user_id);
+                const listIds = res?.data?.infoNetwork?.accountManager?.map(item => item.user_id);
                 setAccountManage(listIds);
-                setTimeZone((_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.infoNetwork) === null || _e === void 0 ? void 0 : _e.timezone);
+                setTimeZone(res?.data?.infoNetwork?.timezone);
             }
         })
             .catch(err => {
@@ -144,10 +143,9 @@ export const TicketEditor = props => {
         Service.tickets.callApi
             .getDetailsTicket({}, domainTicket, token, config, userId, ticketId)
             .then(res => {
-            var _a;
             setIsLoadingDetails(false);
             if (res.code === 200) {
-                setTicketDetails((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.ticket);
+                setTicketDetails(res?.data?.ticket);
             }
         })
             .catch(err => {
@@ -161,7 +159,7 @@ export const TicketEditor = props => {
             .getListComment({}, domainTicket, token, config, userId, 'get-ticket-comments', ticketId)
             .then(res => {
             if (res.code === 200) {
-                setListComment(res === null || res === void 0 ? void 0 : res.data);
+                setListComment(res?.data);
                 // setListUsers(res?.data)
                 // setDataSelect(res?.data)
                 // if (res?.data?.entries[0].length > 0) {
@@ -228,52 +226,35 @@ export const TicketEditor = props => {
         }
         setAnchorEl(null);
     };
-    return (React.createElement(TicketEditorWrapper, null,
-        !!useIcon && (React.createElement(TicketButton, { onClick: e => (useChat ? setOpenPopover(true) : setOpenDrawer(true)) },
-            React.createElement(TicketIcon, null),
-            React.createElement(AddTicketIcon, { className: "add-icon" }))),
-        !!useChat && (React.createElement(React.Fragment, null,
-            React.createElement(Popover, { open: isOpenPopover, className: "popoverBody" },
-                React.createElement(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('DRAWER') }, "Create ticket"),
-                React.createElement(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('CHAT') }, "Chat with us")))),
-        React.createElement(DrawerDetail, { open: openDrawer, onClose: () => handleClose(true, false), menuProps: {
-                items: [
-                    {
-                        icon: React.createElement(Icon, { type: "icon-ants-pencil" }),
-                        label: 'Settings',
-                        key: 'settings',
-                    },
-                ],
-                selectedKeys: ['settings'],
-            }, headerProps: {
-                // children: drawerHeader,
-                showBorderBottom: true,
-            }, name: "ticket-editor-drawer" }, openDrawer && (React.createElement(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 }))),
-        React.createElement(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal" },
-            React.createElement("div", { className: "wrapperBody" },
-                React.createElement(WrapperModalHeader, null, "Confirm deletion of this ticket"),
-                React.createElement("div", { className: "modalBody" },
-                    React.createElement("span", { style: { fontSize: '12px', color: '#000' } }, "Once you confirm cancel, this ticket will NOT be saved.")),
-                React.createElement("div", { className: "modalFooter" },
-                    React.createElement(Button, { style: {
-                            height: '28px',
-                            background: '#1f5fac',
-                            color: '#fff',
-                            fontSize: '12px',
-                            borderRadius: '3px',
-                            fontWeight: 'bold',
-                            textTransform: 'capitalize',
-                        }, onClick: handleConfirmModal }, "Confirm"),
-                    React.createElement(Button, { style: {
-                            height: '28px',
-                            background: '#fff',
-                            color: '#005fb8',
-                            fontSize: '12px',
-                            borderRadius: '3px',
-                            fontWeight: 'bold',
-                            textTransform: 'capitalize',
-                            border: '1px solid #edeef7',
-                        }, onClick: () => setIsOpenModal(false) }, "Cancel")))),
-        contextHolder));
+    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;

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

@@ -42,15 +42,11 @@ export declare const WrapperLoading: import("styled-components").StyledComponent
     width?: string | undefined;
     height?: string | undefined;
 }, never>;
-export declare const WrapperBtnAddAcc: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const WrapperBtnAddAcc: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const WrapperModalImg: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const WrapperModalHeaderImg: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TicketButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const WrapperCheckBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").CheckboxProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
-    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd/es/checkbox").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
-}, any, {}, never>;
+export declare const WrapperCheckBox: import("styled-components").StyledComponent<import("react").FC<import("antd").CheckboxProps>, any, {}, never>;
 export declare const WrapperMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TicketEditorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DrawerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,7 @@
-import { Button, Checkbox, Modal } from '@antscorp/antsomi-ui/es/components';
 import styled from 'styled-components';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Checkbox } from '@antscorp/antsomi-ui/es/components/atoms/Checkbox';
+import { Modal } from '@antscorp/antsomi-ui/es/components/molecules/Modal';
 export const WrapperHeader = styled.div `
   display: flex;
   justify-content: space-between;
@@ -136,7 +138,9 @@ export const WrapperToggleDropdown = styled.div `
   }
 `;
 export const WrapperDropdownMenu = styled.div `
-  box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%),
+  box-shadow:
+    0px 5px 5px -3px rgb(0 0 0 / 20%),
+    0px 8px 10px 1px rgb(0 0 0 / 14%),
     0px 3px 14px 2px rgb(0 0 0 / 12%);
   width: 100%;
   max-height: 300px;
@@ -819,10 +823,10 @@ export const DrawerHeader = styled.div `
   height: 50px;
   padding: 0px 15px;
   box-sizing: border-box;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   flex-shrink: 0;
   z-index: 20;
-  border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid #e5e5e5;
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -290,11 +290,10 @@ export function getEntriesV2(res, def) {
     };
 }
 export const formatAccountId = data => {
-    const results = data === null || data === void 0 ? void 0 : data.map(item => item === null || item === void 0 ? void 0 : item.userId);
+    const results = data?.map(item => item?.userId);
     return results;
 };
 export const formatParams = data => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const params = {
         title: '',
         ownerId: undefined,
@@ -307,46 +306,45 @@ export const formatParams = data => {
         message: '',
         attachments: [],
     };
-    if (data === null || data === void 0 ? void 0 : data.ownerId) {
-        params.ownerId = (_a = data === null || data === void 0 ? void 0 : data.ownerId[0]) === null || _a === void 0 ? void 0 : _a.userId;
+    if (data?.ownerId) {
+        params.ownerId = data?.ownerId[0]?.userId;
     }
-    if (data === null || data === void 0 ? void 0 : data.title) {
-        params.title = data === null || data === void 0 ? void 0 : data.title;
+    if (data?.title) {
+        params.title = data?.title;
     }
-    if ((_b = data === null || data === void 0 ? void 0 : data.followers) === null || _b === void 0 ? void 0 : _b.length) {
-        params.followers = formatAccountId(data === null || data === void 0 ? void 0 : data.followers);
+    if (data?.followers?.length) {
+        params.followers = formatAccountId(data?.followers);
     }
-    if (data === null || data === void 0 ? void 0 : data.referenceUrl) {
-        params.referenceUrl = data === null || data === void 0 ? void 0 : data.referenceUrl;
+    if (data?.referenceUrl) {
+        params.referenceUrl = data?.referenceUrl;
     }
-    if (Object.keys(data === null || data === void 0 ? void 0 : data.priority).length) {
-        params.priority = (_c = data === null || data === void 0 ? void 0 : data.priority) === null || _c === void 0 ? void 0 : _c.value;
+    if (Object.keys(data?.priority).length) {
+        params.priority = data?.priority?.value;
     }
-    if (Object.keys(data === null || data === void 0 ? void 0 : data.feature).length) {
-        params.feature = (_d = data === null || data === void 0 ? void 0 : data.feature) === null || _d === void 0 ? void 0 : _d.value;
+    if (Object.keys(data?.feature).length) {
+        params.feature = data?.feature?.value;
     }
-    if (Object.keys(data === null || data === void 0 ? void 0 : data.ticketType).length) {
-        params.ticketType = (_e = data === null || data === void 0 ? void 0 : data.ticketType) === null || _e === void 0 ? void 0 : _e.value;
+    if (Object.keys(data?.ticketType).length) {
+        params.ticketType = data?.ticketType?.value;
     }
-    if (Object.keys(data === null || data === void 0 ? void 0 : data.category).length) {
-        params.category = (_f = data === null || data === void 0 ? void 0 : data.category) === null || _f === void 0 ? void 0 : _f.value;
+    if (Object.keys(data?.category).length) {
+        params.category = data?.category?.value;
     }
-    if ((_g = data === null || data === void 0 ? void 0 : data.message) === null || _g === void 0 ? void 0 : _g.length) {
-        params.message = data === null || data === void 0 ? void 0 : data.message;
+    if (data?.message?.length) {
+        params.message = data?.message;
     }
-    if ((_h = data === null || data === void 0 ? void 0 : data.files) === null || _h === void 0 ? void 0 : _h.length) {
-        params.attachments = (_j = data === null || data === void 0 ? void 0 : data.files) === null || _j === void 0 ? void 0 : _j.map(file => file === null || file === void 0 ? void 0 : file.token);
+    if (data?.files?.length) {
+        params.attachments = data?.files?.map(file => file?.token);
     }
     return params;
 };
 export const formatDatarender = (data, listSelect, listAccount) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (data === null || data === void 0 ? void 0 : data.ownerId) {
-        data.ownerId = listAccount === null || listAccount === void 0 ? void 0 : listAccount.filter(acc => acc.userId === (data === null || data === void 0 ? void 0 : data.ownerId));
+    if (data?.ownerId) {
+        data.ownerId = listAccount?.filter(acc => acc.userId === data?.ownerId);
     }
-    if ((_a = data === null || data === void 0 ? void 0 : data.followers) === null || _a === void 0 ? void 0 : _a.length) {
+    if (data?.followers?.length) {
         const newFollowers = [];
-        (_b = data.followers) === null || _b === void 0 ? void 0 : _b.forEach(fol => {
+        data.followers?.forEach(fol => {
             listAccount.forEach(acc => {
                 if (fol === acc.userId) {
                     newFollowers.push(acc);
@@ -355,20 +353,28 @@ export const formatDatarender = (data, listSelect, listAccount) => {
         });
         data.followers = newFollowers;
     }
-    if (data === null || data === void 0 ? void 0 : data.priority) {
-        const newPriority = (_d = (_c = listSelect === null || listSelect === void 0 ? void 0 : listSelect.filter(sel => sel.value === 'priority')[0]) === null || _c === void 0 ? void 0 : _c.field_options) === null || _d === void 0 ? void 0 : _d.filter(opt => opt.value === data.priority);
+    if (data?.priority) {
+        const newPriority = listSelect
+            ?.filter(sel => sel.value === 'priority')[0]
+            ?.field_options?.filter(opt => opt.value === data.priority);
         [data.priority] = newPriority;
     }
-    if (data === null || data === void 0 ? void 0 : data.feature) {
-        const newFeature = (_f = (_e = listSelect === null || listSelect === void 0 ? void 0 : listSelect.filter(sel => sel.value === 'feature')[0]) === null || _e === void 0 ? void 0 : _e.field_options) === null || _f === void 0 ? void 0 : _f.filter(opt => opt.value === data.feature);
+    if (data?.feature) {
+        const newFeature = listSelect
+            ?.filter(sel => sel.value === 'feature')[0]
+            ?.field_options?.filter(opt => opt.value === data.feature);
         [data.feature] = newFeature;
     }
-    if (data === null || data === void 0 ? void 0 : data.ticketType) {
-        const newTicket = (_h = (_g = listSelect === null || listSelect === void 0 ? void 0 : listSelect.filter(sel => sel.value === 'ticketType')[0]) === null || _g === void 0 ? void 0 : _g.field_options) === null || _h === void 0 ? void 0 : _h.filter(opt => opt.value === data.ticketType);
+    if (data?.ticketType) {
+        const newTicket = listSelect
+            ?.filter(sel => sel.value === 'ticketType')[0]
+            ?.field_options?.filter(opt => opt.value === data.ticketType);
         [data.ticketType] = newTicket;
     }
-    if (data === null || data === void 0 ? void 0 : data.category) {
-        const newCategory = (_k = (_j = listSelect === null || listSelect === void 0 ? void 0 : listSelect.filter(sel => sel.value === 'category')[0]) === null || _j === void 0 ? void 0 : _j.field_options) === null || _k === void 0 ? void 0 : _k.filter(opt => opt.value === data.category);
+    if (data?.category) {
+        const newCategory = listSelect
+            ?.filter(sel => sel.value === 'category')[0]
+            ?.field_options?.filter(opt => opt.value === data.category);
         [data.category] = newCategory;
     }
     // if(data?.files?.length) {
@@ -377,11 +383,10 @@ export const formatDatarender = (data, listSelect, listAccount) => {
     return data;
 };
 export const handleValidateContent = stringHTML => {
-    var _a, _b, _c;
     if (stringHTML) {
         const elment = document.createElement('div');
         elment.innerHTML = stringHTML;
-        return (_c = (_b = (_a = elment === null || elment === void 0 ? void 0 : elment.firstChild) === null || _a === void 0 ? void 0 : _a.innerHTML) === null || _b === void 0 ? void 0 : _b.replace(/ /g, '')) === null || _c === void 0 ? void 0 : _c.trim();
+        return elment?.firstChild?.innerHTML?.replace(/ /g, '')?.trim();
     }
 };
 export const compareArrays = (a, b) => JSON.stringify(a) === JSON.stringify(b);

package/es/components/template/Layout/Layout.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { LeftMenuProps } from '../../organism';
-import { HeaderV2Props } from '../../molecules';
+import type { HeaderV2Props } from '@antscorp/antsomi-ui/es/components/molecules/HeaderV2';
+import type { LeftMenuProps } from '@antscorp/antsomi-ui/es/components/organism/LeftMenu';
 import '@antscorp/processing-notification/dist/index.css';
 import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
 import { ContentWrapperProps, WorkspaceProps } from './types';