@antscorp/antsomi-ui 1.3.6-beta.3 → 1.3.6-beta.30

package/es/components/organism/TicketEditorV2/Content.js

@@ -0,0 +1,296 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable no-multi-str */
+import { useMemo, useEffect, useRef, useState } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { Helmet } from 'react-helmet';
+import DropdownComponent from './components/DropdownComponent';
+import MessageComponent from './components/MessageComponent';
+import { Spin, Tooltip, Icon, Button, SelectAccount } from '@antscorp/antsomi-ui/es/components';
+import Service from './Service';
+import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, } from './styled';
+import { formatAccountId, formatDatarender, handleValidateContent } from './util';
+const initValueInput = {
+    originTitle: 'Create new ticket',
+    title: '',
+    feature: {},
+    ticketType: {},
+    priority: {},
+    category: {},
+    ownerId: [],
+    followers: [],
+    message: '',
+    files: [],
+    isChanged: false,
+    referenceUrl: window.location.href,
+};
+const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }) => {
+    const [isOpenToast, setIsOpenToast] = useState({
+        isOpen: false,
+        status: 'error',
+        messages: '',
+    });
+    const [textValue, setTextValue] = useState('');
+    const [isEmptyField, setIsEmptyField] = useState(false);
+    const [dataSelects, setDataSelect] = useState(dataSelectInput);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingUpload, setIsLoadingUpload] = useState(false);
+    const [isLoadingFollower, setIsLoadingFollower] = useState(false);
+    const [valueInput, setValueInput] = useState(initValueInput);
+    const [errFile, setErrFile] = useState({
+        isError: false,
+        message: '',
+    });
+    const isUpdate = action === 'edit' && ticketId;
+    const valueInputRef = useRef(valueInput);
+    valueInputRef.current = valueInput;
+    const updateValueInput = value => {
+        setValueInput(prev => ({
+            ...prev,
+            ...value,
+            isChanged: true,
+        }));
+    };
+    const handleOnchangeInput = e => {
+        const { name, value } = e.target;
+        updateValueInput({
+            [name]: value,
+        });
+    };
+    useEffect(() => {
+        if (!isUpdate) {
+            const newFollowers = [];
+            let newOwnerIds = [];
+            if (accountManage?.length > 0 && listUsers) {
+                accountManage?.forEach(acc => {
+                    listUsers.forEach(user => {
+                        if (acc === user.userId) {
+                            newFollowers.push(user);
+                        }
+                    });
+                });
+            }
+            if ((!isAllAccount || accountEdit !== 4) &&
+                listUsers?.length > 0 &&
+                (initOwnerId || userId)) {
+                newOwnerIds = listUsers?.filter(user => user.userId === Number(initOwnerId || userId));
+            }
+            updateValueInput({ ownerId: newOwnerIds, followers: newFollowers });
+        }
+    }, [isUpdate, accountManage, listUsers, accountEdit]);
+    const browserTitle = useMemo(() => {
+        if (valueInput.title && valueInput.title.trim()) {
+            return valueInput.title;
+        }
+        return valueInput.originTitle;
+    }, [valueInput.title, valueInput.originTitle]);
+    const getCustomFields = () => {
+        if (dataSelects && dataSelects.length)
+            return;
+        Service.tickets.callApi
+            .getCustomFields({}, domainTicket, token, config, userId, 'get-custom-fields')
+            .then(res => {
+            if (res.code === 200) {
+                setDataSelect(res?.data?.fields);
+                setDataSelectInput(res?.data?.fields);
+            }
+        })
+            .catch(err => {
+            // console.log('err ===>', err)
+        });
+    };
+    const fetchUpdateComment = params => {
+        Service.tickets.callApi
+            .updateComment(params, domainTicket, token, config, userId, 'create-ticket-comment', ticketId)
+            .then(res => {
+            if (res.code === 200) {
+                fetchgetTicketComments(ticketId);
+                updateValueInput({ message: '', files: [] });
+                setTextValue('');
+                // handleCloseDrawer();
+            }
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    };
+    const fetchUpdateFollwers = params => {
+        setIsLoadingFollower(true);
+        Service.tickets.callApi
+            .updateFollowers(params, domainTicket, token, config, userId, ticketId)
+            .then(res => {
+            setIsLoadingFollower(false);
+        })
+            .catch(err => {
+            setIsLoadingFollower(false);
+        });
+    };
+    useEffect(() => {
+        if (Object.keys(ticketDetails)?.length &&
+            isUpdate &&
+            listUsers?.length &&
+            dataSelects?.length) {
+            const { category, feature, followers, ownerId, priority, ticketType, title, referenceUrl, ...rests } = formatDatarender(ticketDetails, dataSelects, listUsers);
+            if (ownerId?.length > 0) {
+                updateValueInput({
+                    category,
+                    feature,
+                    followers,
+                    ownerId,
+                    priority,
+                    ticketType,
+                    title,
+                    referenceUrl,
+                    originTitle: title,
+                });
+            }
+        }
+    }, [ticketDetails, dataSelects, listUsers]);
+    useEffect(() => {
+        setIsLoading(true);
+        getCustomFields();
+        setTimeout(() => {
+            setIsLoading(false);
+        }, 1000);
+    }, []);
+    const handleEditorChange = content => {
+        setTextValue(content);
+        updateValueInput({ message: content });
+        setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+    };
+    const handleUpdateFollowers = arrFolowers => {
+        const params = {
+            followers: [],
+        };
+        if (arrFolowers?.length) {
+            params.followers = arrFolowers;
+        }
+        fetchUpdateFollwers(params);
+    };
+    const handleUpdateComment = () => {
+        setIsLoading(true);
+        const params = {
+            followers: [],
+            submitterId: null,
+            ownerId: null,
+            attachments: [],
+            message: '',
+        };
+        if (valueInput?.followers?.length) {
+            params.followers = formatAccountId(valueInput?.followers);
+        }
+        if (valueInput?.files?.length > 0) {
+            params.attachments = valueInput?.files?.map((file) => file.token);
+        }
+        params.submitterId = userId;
+        params.ownerId = Number(valueInput?.ownerId[0]?.userId);
+        params.message = valueInput?.message;
+        fetchUpdateComment(params);
+        handleUpdateFollowers(valueInput?.followers?.map((fol) => fol.userId));
+    };
+    const handleUploadFile = params => {
+        setIsLoading(true);
+        Service.tickets.callApi
+            .upload(params, domainTicket, token, config, userId, 'ticket')
+            .then(res => {
+            if (res.code === 200) {
+                updateValueInput({
+                    files: [...valueInput.files, res.data],
+                });
+            }
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    };
+    useEffect(() => {
+        const timeOut = setTimeout(() => {
+            if (isOpenToast.isOpen) {
+                setIsOpenToast({ ...isOpenToast, isOpen: false });
+            }
+        }, 1000);
+        return () => {
+            clearTimeout(timeOut);
+        };
+    }, [isOpenToast]);
+    const handleOnchangeFile = e => {
+        const limitSize = 50 * 1024 * 1024;
+        const sizeFile = e.target?.files[0]?.size;
+        if (sizeFile >= limitSize) {
+            setErrFile({
+                isError: true,
+                message: '*Maximum upload file size: 50MB',
+            });
+        }
+        else {
+            const formData = new FormData();
+            formData.append('file', e.target.files[0]);
+            const params = {
+                data: formData,
+            };
+            setErrFile({
+                isError: false,
+                message: '',
+            });
+            handleUploadFile(params);
+        }
+    };
+    const handleRemoveFile = token => {
+        let newListFile = valueInput.files;
+        newListFile = newListFile.filter((list) => list?.token !== token);
+        updateValueInput({ files: newListFile });
+    };
+    return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsx(Spin, { style: { height: '100vh' }, spinning: isLoading ||
+                    isLoadingDetails ||
+                    isLoadingDataSouce ||
+                    isLoadingFollower ||
+                    isLoadingSelectedAccount, children: _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsxs("div", { children: [_jsx(SelectAccount, { type: "default", initData: (valueInput?.ownerId || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }), isEmptyField && !valueInput?.ownerId?.length && (_jsx("div", { className: "error-message", children: "*This field can't be empty" }))] })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: [
+                                                ...accountManage,
+                                                ...(valueInput?.followers || []).map((item) => item.userId),
+                                            ], nameKey: "userName", userIdKey: "userId", users: listUsers, disabledAccount: accountManage, onChange: (_, followers) => updateValueInput({ followers }) })] }), dataSelects?.map((data) => (_jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { children: data.title }), _jsx("div", { style: { flex: 1 }, children: isUpdate ? (_jsx(WrapperTextEdit, { children: !valueInput[data?.value]?.name?.length
+                                                    ? '--'
+                                                    : valueInput[data?.value]?.name })) : (_jsx(DropdownComponent, { data: data.field_options, setValueInput: updateValueInput, valueInput: valueInput, type: data.value, isUpdate: isUpdate, title: data.title })) })] }, data.id))), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (valueInput.referenceUrl ? (_jsx(Tooltip, { title: valueInput.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: valueInput.referenceUrl, target: "_blank", children: valueInput.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
+                                            // width="300px"
+                                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(Editor, { apiKey: apiKey, value: textValue, init: {
+                                                        height: 238,
+                                                        width: '100%',
+                                                        max_height: 800,
+                                                        max_width: 800,
+                                                        menubar: false,
+                                                        plugins: [
+                                                            'advlist autolink lists link tinydrive image emoticons charmap print preview anchor',
+                                                            'searchreplace visualblocks code fullscreen',
+                                                            'insertdatetime media paste code help wordcount ', //
+                                                        ],
+                                                        toolbar: 'formatselect | bold italic underline strikethrough code | image emoticons | \
+                                  forecolor backcolor preview link |\
+                                  alignleft aligncenter alignright alignjustify outdent indent |\
+                                  numlist bullist checklist undo redo',
+                                                        tinydrive_token_provider: `//${domain}/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
+                                                        skin: 'snow',
+                                                        toolbar_mode: 'sliding',
+                                                        content_css: false,
+                                                        branding: false,
+                                                        resize: false,
+                                                        statusbar: false,
+                                                        setup(editor) {
+                                                            editor.on('init', e => {
+                                                                editor.getBody().style.fontSize = '12px';
+                                                            });
+                                                        },
+                                                        placeholder: 'Enter your comment...',
+                                                        entity_encoding: 'raw',
+                                                        paste_data_images: true,
+                                                    }, 
+                                                    // disabled={!!props.disabled}
+                                                    // outputFormat='text'
+                                                    onEditorChange: handleEditorChange }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file) => (_jsxs("div", { className: "file-item", 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(Icon, { onClick: () => handleRemoveFile(file?.token), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: "fileImage", className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile })] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
+                                                                        background: `${!handleValidateContent(textValue) || isLoadingUpload
+                                                                            ? '#ccc'
+                                                                            : '#1f5fac'}`,
+                                                                    }, onClick: handleUpdateComment, loading: isLoadingUpload, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                            !valueInput?.message && (_jsx("div", { className: "error-message", children: "* This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, 
+                                            // mailFollower={comment?.mailFollower}
+                                            message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone }, comment?.id))) }) }))] })] }) })] }));
+};
+export default Content;

package/es/components/organism/TicketEditorV2/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/TicketEditorV2/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/TicketEditorV2/TicketEditorV2.d.ts

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

package/es/components/organism/TicketEditorV2/TicketEditorV2.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Content from './Content';
+import Service from './Service';
+import { Button, Modal } from '@antscorp/antsomi-ui/es/components/';
+import { WrapperModalHeader, TicketEditorWrapper } from './styled';
+import { useGetDetailTicket, useGetListComments, useGetListUser } from './queries';
+const defaultProps = {
+    apiKey: '',
+    portalId: '',
+    token: '',
+    domain: '',
+    action: '',
+    config: {},
+    userId: '',
+    ownerId: '',
+    domainTicket: '',
+    ticketId: '',
+    domainAccount: '',
+    domainPermission: '',
+    appCode: 'TICKET_MANAGEMENT',
+    menuCode: 'TICKET',
+    fullParent: false,
+};
+export const TicketEditorV2 = props => {
+    const { apiKey, portalId, token, domain, action, config: propsConfig, userId, ownerId, domainTicket, ticketId, domainAccount, domainPermission, appCode, menuCode, fullParent, } = props;
+    const { ticketDetails, isFetching: isFetchingDetails } = useGetDetailTicket({
+        ticketId,
+        domainTicket,
+        token,
+        config: propsConfig,
+        userId,
+    });
+    const { listComments, isFetchingComments } = useGetListComments({
+        domainTicket,
+        token,
+        config: propsConfig,
+        userId,
+        ticketId,
+        enabled: !!ticketId || action !== 'create',
+    });
+    const { listUsers, isFetchingUsers } = useGetListUser({
+        domainAccount: domain,
+        token,
+        config: propsConfig,
+        userId,
+    });
+    const [isOpenModal, setIsOpenModal] = useState(false);
+    const [isLoadingSelectedAccount, setIsLoadingSelectedAccount] = useState(false);
+    const [accountEdit, setAccountEdit] = useState(null);
+    const [accountManage, setAccountManage] = useState([]);
+    const [timeZone, setTimeZone] = useState('');
+    const [dataSelectInput, setDataSelectInput] = useState([]);
+    const config = typeof propsConfig === 'string' ? JSON.parse(atob(propsConfig)) : propsConfig;
+    const isAllAccount = !ownerId;
+    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 = () => {
+        Service.accounts.callApi
+            .getAccountManage({}, domainAccount, token, config, userId, 'account')
+            .then(res => {
+            if (res.code === 200) {
+                const listIds = res?.data?.infoNetwork?.accountManager?.map(item => item.user_id);
+                setAccountManage(listIds);
+                setTimeZone(res?.data?.infoNetwork?.timezone);
+            }
+        })
+            .catch(_err => { });
+    };
+    const fetchgetTicketComments = ticketId => {
+        Service.tickets.callApi
+            .getListComment({}, domainTicket, token, config, userId, 'get-ticket-comments', ticketId)
+            .then(res => {
+            if (res.code === 200) {
+            }
+            else {
+            }
+        })
+            .finally(() => { });
+    };
+    useEffect(() => {
+        fetchAccountManage();
+        fetchAccountPermission();
+    }, []);
+    const handleConfirmModal = () => {
+        setIsOpenModal(false);
+    };
+    return (_jsxs(TicketEditorWrapper, { children: [_jsx(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, config: config, ticketDetails: ticketDetails, listComment: listComments, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isFetchingComments, isLoadingDetails: isFetchingDetails, isLoadingDataSouce: isFetchingUsers, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, 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" })] })] }) })] }));
+};
+TicketEditorV2.defaultProps = defaultProps;

package/es/components/organism/TicketEditorV2/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/TicketEditorV2/components/DropdownComponent.js

@@ -0,0 +1,45 @@
+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) }));
+};
+export default DropdownComponent;

package/es/components/organism/TicketEditorV2/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/TicketEditorV2/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/TicketEditorV2/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;