@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const MessageComponent: ({ toUser, fromUser, followers, attachments, message, date, timeZone, }: {
+    toUser: any;
+    fromUser: any;
+    followers: any;
+    attachments: any;
+    message: any;
+    date: any;
+    timeZone: any;
+}) => React.JSX.Element;
+export default MessageComponent;

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

@@ -0,0 +1,99 @@
+import React, { 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(() => {
+        var _a, _b;
+        if (refMesage.current) {
+            (_a = refMesage.current.querySelectorAll('img')) === null || _a === void 0 ? void 0 : _a.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 }));
+                });
+            });
+            (_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');
+                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 === null || file === void 0 ? void 0 : file.content_url)) {
+                arrImgs.push(file);
+            }
+            else {
+                arrFiles.push(file);
+            }
+        });
+        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" }))))));
+};
+export default MessageComponent;

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+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" }))));
+}
+export default AddTicketIcon;

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+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" })));
+}
+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,25 @@
+import React from 'react';
+export declare const TicketEditor: {
+    (props: any): React.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,270 @@
+import React, { 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, } 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 === null || res === void 0 ? void 0 : 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 => {
+            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);
+            }
+        })
+            .catch(err => {
+            setIsLoadingSelectedAccount(false);
+        });
+    };
+    const fetchAccountManage = () => {
+        // setIsLoadingDataSouce(true)
+        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);
+                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);
+            }
+        })
+            .catch(err => {
+            // setIsLoadingDataSouce(false)
+            // console.log('err ===>', err)
+        });
+    };
+    const fetchDetailsTicket = ticketId => {
+        setIsLoadingDetails(true);
+        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);
+            }
+        })
+            .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 === null || res === void 0 ? void 0 : 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 (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), 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));
+};
+TicketEditor.defaultProps = defaultProps;

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+export declare const WrapperHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLeftContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperRightContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperTextEdit: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const WrapperTextInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const WrapperContentInput: import("styled-components").StyledComponent<"div", any, {
+    flexStart?: boolean | undefined;
+}, never>;
+export declare const WrapperLable: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const WrapperDropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperToggleDropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperDropdownMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperDropdownItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLabelDropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MaterialChip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DivLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperListAccount: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleName: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const WrapperNotication: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperEditor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperListAccountSearch: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperItemAccountSearch: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperFooterPopup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperIconEditor: import("styled-components").StyledComponent<"div", any, {
+    borderTop?: boolean | undefined;
+}, never>;
+export declare const WrapperInputFile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLinkItemFiles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperSnackbar: import("styled-components").StyledComponent<"div", any, {
+    background?: string | undefined;
+}, never>;
+export declare const WrapperModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperAvatar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperContentAvatar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperMessageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLoading: import("styled-components").StyledComponent<"div", any, {
+    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 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 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>;