@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/organism/Help/Help.js

@@ -1,38 +1,21 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/iframe-has-title */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable no-multi-str */
 // Libraries
-import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { isEmpty, keyBy } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 // Assets
 import '@antscorp/icons/main.css';
 // Services
 import TicketService from '@antscorp/antsomi-ui/es/services/Ticket';
+import Service from '@antscorp/antsomi-ui/es/components/organism/TicketEditor/Service';
 // Component
 import { LoadingOutlined } from '@ant-design/icons';
+import { QuillEditor } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
-import { Editor } from '@tinymce/tinymce-react';
+// import { Editor } from '@tinymce/tinymce-react';
 import { Button, Spin } from 'antd';
 import { ButtonFeedback, ControlGroup, ControlLabel, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IconButtonStyled, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
 // Atoms
@@ -46,12 +29,12 @@ import { ATTACH_CAPTURE_TYPES, ATTACH_KEYS, DEFAULT_POSITIONS, MENU_KEYS, MESSAG
 import { BugIcon, CameraIcon, OpenUrlIcon, RequestIcon, ScreenshotMonitorIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 import { base64ToFile, convertBlobToFile, generateUniqueId, mergeAudioStreams, } from '@antscorp/antsomi-ui/es/components/molecules/CaptureScreen/utils';
 import { expendDefault, formatParams, postCustomEvent } from './utils';
-const antIcon = React.createElement(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
-const Loading = ({ isLoading, height, width }) => isLoading && (React.createElement(WrapperLoading, { className: "loader-container", height: height, width: width },
-    React.createElement(Spin, { indicator: antIcon })));
+import { useGetListUser } from './queries';
+const antIcon = _jsx(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
+const Loading = ({ isLoading, height, width }) => isLoading && (_jsx(WrapperLoading, { className: "loader-container", height: height, width: width, children: _jsx(Spin, { indicator: antIcon }) }));
 const Help = props => {
-    const { configs, triggerType, boundsDraggable, isShowResizeHover, children } = props;
-    const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, avatar, } = configs;
+    const { configs, triggerType, buttonProps, boundsDraggable, isShowResizeHover, children } = props;
+    const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, domainUpload, avatar, } = configs;
     // const [isOpenDropdown, setIsOpenDropdown] = useState<boolean>(false);
     const [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
     const [defaultPositionRecordActions, setDefaultPositionRecordActions] = useState(DEFAULT_POSITIONS.record);
@@ -70,6 +53,13 @@ const Help = props => {
         message: '',
         files: [],
         referenceUrl: '',
+        fileZendesk: [],
+    });
+    const { listUsers, isFetchingUsers } = useGetListUser({
+        domain,
+        config,
+        userId,
+        token,
     });
     const [errFile, setErrFile] = useState({
         isError: false,
@@ -102,47 +92,41 @@ const Help = props => {
     const recorderRef = useRef();
     const streamTracks = useRef();
     const allAppOptionsRef = useRef([]);
+    const [fileInputKey, setFileInputKey] = useState(0);
     // const showModal = (captureKey: CaptureTypeProps) => {
     //   setOpen(true);
     //   setCaptureType(captureKey);
     // };
-    const items = useMemo(() => {
-        var _a;
-        return [
-            {
-                label: (React.createElement("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' } },
-                    React.createElement(Label, { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 33,
-                            width: '100%',
-                        } },
-                        "New features & announcements",
-                        React.createElement(OpenUrlIcon, { size: 20, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon })))),
-                key: MENU_KEYS.FEATURE_ANNOUNCEMENT,
-            },
-            {
-                label: React.createElement(Label, null, "Leave feedback"),
-                key: MENU_KEYS.FEEDBACK,
-            },
-            {
-                label: React.createElement(Label, null, "Get help"),
-                key: MENU_KEYS.HELP,
-            },
-            {
-                label: React.createElement(Label, null, "Get ideas with Antsomi Intelligence"),
-                key: MENU_KEYS.CHAT,
-            },
-            {
-                type: 'divider',
-            },
-            {
-                label: (React.createElement("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' } },
-                    React.createElement(Label, { className: "verify-support" }, "Verify support request"))),
-                key: MENU_KEYS.SUPPORT,
-            },
-        ];
-    }, [domainTicket, portalId, userId]);
+    const items = useMemo(() => [
+        {
+            label: (_jsx("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' }, children: _jsxs(Label, { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 33,
+                        width: '100%',
+                    }, children: ["New features & announcements", _jsx(OpenUrlIcon, { size: 20, color: THEME.token?.colorIcon })] }) })),
+            key: MENU_KEYS.FEATURE_ANNOUNCEMENT,
+        },
+        {
+            label: _jsx(Label, { children: "Leave feedback" }),
+            key: MENU_KEYS.FEEDBACK,
+        },
+        {
+            label: _jsx(Label, { children: "Get help" }),
+            key: MENU_KEYS.HELP,
+        },
+        {
+            label: _jsx(Label, { children: "Get ideas with Antsomi Intelligence" }),
+            key: MENU_KEYS.CHAT,
+        },
+        {
+            type: 'divider',
+        },
+        {
+            label: (_jsx("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' }, children: _jsx(Label, { className: "verify-support", children: "Verify support request" }) })),
+            key: MENU_KEYS.SUPPORT,
+        },
+    ], [domainTicket, portalId, userId]);
     const modifiedDomain = useMemo(() => {
         const regex = /^(https?:)/;
         if (regex.test(domain)) {
@@ -190,7 +174,7 @@ const Help = props => {
             }
             case MENU_KEYS.CHAT: {
                 setType(REPORT_TYPES.CHAT);
-                setTitle('Get ideas with ChatGPT');
+                setTitle('Antsomi Intelligence');
                 setIsShowPopup(true);
                 break;
             }
@@ -200,12 +184,27 @@ const Help = props => {
             }
         }
     };
-    const handleUploadFile = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleUploadFile = async (file) => {
+        const uploadService = Service.tickets.callApi.uploadFile({
+            domain: domainUpload,
+            token,
+            userId,
+        });
         try {
             setIsMainLoading(true);
-            const res = yield TicketService.tickets.callApi.upload(params, domainTicket, token, config, userId, 'ticket');
-            if (res.code === 200) {
-                setValueInput(prevVal => (Object.assign(Object.assign({}, prevVal), { files: [...valueInput.files, res.data] })));
+            const response = await uploadService({ files: [file] });
+            const fileZendesk = await uploadZendeskService(file);
+            if (response.code === 200) {
+                setValueInput(prevVal => ({
+                    ...prevVal,
+                    files: [...valueInput.files, response.data[0]],
+                }));
+            }
+            if (!isEmpty(fileZendesk)) {
+                setValueInput(prevVal => ({
+                    ...prevVal,
+                    fileZendesk: [...valueInput.fileZendesk, fileZendesk],
+                }));
             }
         }
         catch (error) {
@@ -215,12 +214,12 @@ const Help = props => {
         finally {
             setIsMainLoading(false);
         }
-    });
+    };
     useEffect(() => {
-        const handleFetchAllApps = () => __awaiter(void 0, void 0, void 0, function* () {
+        const handleFetchAllApps = async () => {
             try {
                 setIsMainLoading(true);
-                const res = yield TicketService.tickets.callApi.getCustomFields({}, domainTicket, token, config, userId, 'get-custom-fields');
+                const res = await TicketService.tickets.callApi.getCustomFields({}, domainTicket, token, config, userId, 'get-custom-fields');
                 if (res && res.code === 200) {
                     const { data } = res;
                     if (data && Array.isArray(data.fields)) {
@@ -244,16 +243,15 @@ const Help = props => {
             finally {
                 setIsMainLoading(false);
             }
-        });
+        };
         if (!fetchingRef.current && isEmpty(allAppOptions)) {
             fetchingRef.current = true;
             handleFetchAllApps();
         }
     }, [allAppOptions, config, domainTicket, token, userId]);
     const handleOnchangeFile = e => {
-        var _a, _b;
         const limitSize = 50 * 1024 * 1024;
-        const sizeFile = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.files[0]) === null || _b === void 0 ? void 0 : _b.size;
+        const sizeFile = e.target?.files[0]?.size;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
@@ -261,29 +259,53 @@ const Help = props => {
             });
         }
         else {
-            const formData = new FormData();
-            formData.append('file', e.target.files[0]);
-            const params = {
-                data: formData,
-            };
             setErrFile({
                 isError: false,
                 message: '',
             });
-            handleUploadFile(params);
+            handleUploadFile(e.target.files[0]);
         }
     };
     const handleRemoveFile = token => {
         let newListFile = valueInput.files;
-        newListFile = newListFile.filter(list => (list === null || list === void 0 ? void 0 : list.token) !== token);
-        setValueInput(prevVal => (Object.assign(Object.assign({}, prevVal), { files: newListFile })));
+        newListFile = newListFile.filter(list => list?.token !== token);
+        setValueInput(prevVal => ({ ...prevVal, files: newListFile }));
+    };
+    const handleRemoveFileV2 = (index) => {
+        let newListFile = valueInput.files;
+        newListFile = newListFile.filter((_, fileIndex) => fileIndex !== index);
+        const newFileZendesk = valueInput.fileZendesk.filter((_, fileIndex) => fileIndex !== index);
+        setValueInput(prevVal => ({
+            ...prevVal,
+            files: newListFile,
+            fileZendesk: newFileZendesk,
+        }));
+        setFileInputKey(prev => prev + 1);
+    };
+    const uploadZendeskService = async (listFiles) => {
+        const formData = new FormData();
+        formData.append('file', listFiles);
+        const params = {
+            data: formData,
+        };
+        const responseZendesk = await Service.tickets.callApi.upload(params, domainTicket, token, config, userId, 'ticket');
+        if (responseZendesk.code === 200) {
+            return responseZendesk.data;
+        }
+        return [];
     };
     const handleResetData = () => {
         setUrlImageDrawer('');
         setUrlVideoPreview('');
         setIsValidAll(true);
         // setIsOpenDropdown(false);
-        setValueInput(prev => (Object.assign(Object.assign({}, prev), { message: '', title: '', files: [] })));
+        setValueInput(prev => ({
+            ...prev,
+            message: '',
+            title: '',
+            files: [],
+            fileZendesk: [],
+        }));
         setIsShowPopup(false);
         setErrFile({
             isError: false,
@@ -321,7 +343,7 @@ const Help = props => {
             }
         }
     }, []);
-    const handleCreateRecorder = () => __awaiter(void 0, void 0, void 0, function* () {
+    const handleCreateRecorder = async () => {
         try {
             let controller;
             if ('CaptureController' in window &&
@@ -338,8 +360,8 @@ const Help = props => {
                 controller,
                 selfBrowserSurface: 'include',
             };
-            const desktopStream = yield navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-            const voiceStream = yield navigator.mediaDevices.getUserMedia({
+            const desktopStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+            const voiceStream = await navigator.mediaDevices.getUserMedia({
                 video: false,
                 audio: !isMute,
             });
@@ -385,8 +407,8 @@ const Help = props => {
             console.log('error :>', error);
             setIsShowPopup(true);
         }
-    });
-    const handleCaptureScreen = () => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const handleCaptureScreen = async () => {
         try {
             let controller;
             if ('CaptureController' in window &&
@@ -425,9 +447,9 @@ const Help = props => {
             if (supportedConstraints.frameRate) {
                 displayMediaOptions.video.frameRate = { max: 30 };
             }
-            const stream = yield navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+            const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
             const video = document.createElement('video');
-            video === null || video === void 0 ? void 0 : video.addEventListener('loadedmetadata', () => {
+            video?.addEventListener('loadedmetadata', () => {
                 const canvas = document.createElement('canvas');
                 const ctx = canvas.getContext('2d');
                 // passing video width & height as canvas width & height
@@ -435,7 +457,7 @@ const Help = props => {
                 canvas.height = video.videoHeight;
                 video.play(); // playing the video so the drawn image won't be black or blank
                 // drawing an image of the captured video stream
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
                 stream.getVideoTracks()[0].stop(); // terminating first video track of the stream
                 // passing canvas data url as screenshot preview src
                 setUrlImageDrawer(canvas.toDataURL());
@@ -451,7 +473,7 @@ const Help = props => {
             console.info('Failed to capture screenshot!', error);
             setIsShowPopup(true);
         }
-    });
+    };
     const callback = (type, dataIn) => {
         switch (type) {
             case 'ON_CLOSE_POPUP': {
@@ -539,7 +561,10 @@ const Help = props => {
                     if (REPORT_TYPES[helpType]) {
                         setIsShowPopup(true);
                         callback(REPORT_TYPES[helpType]);
-                        setValueInput(prev => (Object.assign(Object.assign({}, prev), helpInfo)));
+                        setValueInput(prev => ({
+                            ...prev,
+                            ...helpInfo,
+                        }));
                         if (dataImage) {
                             setImageDrew({
                                 imageName: dataImage.imageName,
@@ -562,25 +587,33 @@ const Help = props => {
             window.removeEventListener('message', handleEvent);
         };
     }, []);
-    const handleCreateTicket = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleCreateTicket = async (params) => {
         try {
             setIsMainLoading(true);
             let attachments = [];
-            const { imageDrew = {}, dataRecorded = [], type = '' } = params, restParams = __rest(params, ["imageDrew", "dataRecorded", "type"]);
+            let attachmentsZendesk = [];
+            const uploadServices = TicketService.tickets.callApi.uploadImg({
+                domain: domainUpload,
+                token,
+                userId,
+            });
+            const { imageDrew = {}, dataRecorded = [], type = '', ...restParams } = params;
             if (params.attachments && !isEmpty(params.attachments)) {
                 attachments = [...params.attachments];
             }
+            if (params.attachmentsZendesk && !isEmpty(params.attachmentsZendesk)) {
+                attachmentsZendesk = [...params.attachmentsZendesk];
+            }
             if (imageDrew.dataURL) {
                 const imageFile = base64ToFile(imageDrew.dataURL, `${imageDrew.imageName}-${generateUniqueId()}.png`);
                 if (imageFile) {
-                    const uploadFormData = new FormData();
-                    uploadFormData.append('file', imageFile);
-                    const uploadFileParams = {
-                        data: uploadFormData,
-                    };
-                    const res = yield TicketService.tickets.callApi.upload(uploadFileParams, domainTicket, token, config, userId, 'ticket');
-                    if (res && res.code === 200 && res.data) {
-                        attachments.push(res.data.token);
+                    const response = await uploadServices({ files: [imageFile], mode: 'file' });
+                    const fileZendesk = await uploadZendeskService(imageFile);
+                    if (response.code === 200) {
+                        attachments.push(response.data[0]);
+                    }
+                    if (!isEmpty(fileZendesk)) {
+                        attachmentsZendesk.push(fileZendesk?.token);
                     }
                 }
             }
@@ -589,16 +622,24 @@ const Help = props => {
                 const blobName = `video-${generateUniqueId()}.mp4`;
                 const videoFile = convertBlobToFile(blob, blobName);
                 if (videoFile) {
-                    const uploadFormData = new FormData();
-                    uploadFormData.append('file', videoFile);
-                    const res = yield TicketService.tickets.callApi.upload({ data: uploadFormData }, domainTicket, token, config, userId, 'ticket');
-                    if (res && res.code === 200 && res.data) {
-                        attachments.push(res.data.token);
+                    const response = await uploadServices({ files: [videoFile], mode: 'video' });
+                    const fileZendesk = await uploadZendeskService(videoFile);
+                    if (response.code === 200) {
+                        attachments.push(response.data[0]);
+                    }
+                    if (!isEmpty(fileZendesk)) {
+                        attachmentsZendesk.push(fileZendesk?.token);
                     }
                 }
             }
-            const dataToAPI = Object.assign(Object.assign({}, restParams), { attachments, networkId: Number(portalId), ticketType: type === REPORT_TYPES.ISSUE ? 'bug' : 'request' });
-            const res = yield TicketService.tickets.callApi.createTicket(dataToAPI, domainTicket, token, config, userId);
+            const dataToAPI = {
+                ...restParams,
+                attachments,
+                attachmentsZendesk,
+                networkId: Number(portalId),
+                ticketType: type === REPORT_TYPES.ISSUE ? 'bug' : 'request',
+            };
+            const res = await TicketService.tickets.callApi.createTicket(dataToAPI, domainTicket, token, config, userId);
             if (res.code === 200) {
                 postCustomEvent(TICKET_CUSTOM_MESSAGE_KEY, {
                     type: MESSAGE_TYPE.TICKET_CREATE_STATUS,
@@ -620,17 +661,26 @@ const Help = props => {
         finally {
             setIsMainLoading(false);
         }
-    });
+    };
     const handleSubmit = () => {
         if (!valueInput.title || !valueInput.message) {
             setIsValidAll(false);
             return;
         }
         if (!errFile.isError) {
-            const params = formatParams(Object.assign(Object.assign({}, valueInput), { feature: appTargeting }));
-            handleCreateTicket(Object.assign(Object.assign({}, params), { type,
+            const params = formatParams({ ...valueInput, feature: appTargeting });
+            const mapUserById = keyBy(listUsers, 'userId');
+            const ownerEmail = mapUserById[params.ownerId || '']?.email;
+            const referenceUrl = window.location.href;
+            handleCreateTicket({
+                ...params,
+                type,
                 imageDrew,
-                dataRecorded, submitterId: Number(userId) }));
+                dataRecorded,
+                submitterId: Number(userId),
+                submitterEmail: ownerEmail,
+                referenceUrl,
+            });
         }
     };
     // console.log('insideee.dev - data :>', valueInput, appTargeting, errFile);
@@ -721,8 +771,8 @@ const Help = props => {
         setAutoExpandParent(true);
     };
     const renderIcon = (name, style) => ({
-        'icon-ants-capture': React.createElement(ScreenshotMonitorIcon, { style: style }),
-        'icon-ants-camera': React.createElement(CameraIcon, { style: style }),
+        'icon-ants-capture': _jsx(ScreenshotMonitorIcon, { style: style }),
+        'icon-ants-camera': _jsx(CameraIcon, { style: style }),
     })[name];
     const treeData = useMemo(() => {
         const loop = (data) => data.map(item => {
@@ -730,10 +780,7 @@ const Help = props => {
             const index = strTitle.toString().toLowerCase().indexOf(searchValue.toLowerCase());
             const beforeStr = strTitle.substring(0, index);
             const afterStr = strTitle.slice(index + searchValue.length);
-            const title = index > -1 ? (React.createElement(Span, { styles: item.children },
-                beforeStr,
-                React.createElement(TitleSearch, null, searchValue),
-                afterStr)) : (React.createElement(Span, { styles: item.children }, strTitle));
+            const title = index > -1 ? (_jsxs(Span, { styles: item.children, children: [beforeStr, _jsx(TitleSearch, { children: searchValue }), afterStr] })) : (_jsx(Span, { styles: item.children, children: strTitle }));
             if (item.children) {
                 return { title, key: item.key, children: loop(item.children) };
             }
@@ -745,256 +792,134 @@ const Help = props => {
         });
         return loop(dataListHelp);
     }, [searchValue, dataListHelp]);
-    const renderAttachActions = () => ATTACH_CAPTURE_TYPES.map(item => {
-        var _a, _b;
-        return (React.createElement(ControlGroup, { key: item.key, size: 10, direction: "vertical", style: { width: 'auto' } },
-            React.createElement(ButtonFeedback, { height: 30, borderRadiusCustom: 3, icon: renderIcon(item.icon, {
-                    fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
+    const renderAttachActions = () => ATTACH_CAPTURE_TYPES.map(item => (_jsxs(ControlGroup, { size: 10, direction: "vertical", style: { width: 'auto' }, children: [_jsx(ButtonFeedback, { height: 30, borderRadiusCustom: 3, icon: renderIcon(item.icon, {
+                    fill: THEME.token?.colorPrimary,
                     maxWidth: '24px',
-                }), onClick: () => handleShareCapture(item.key)() }, item.label),
-            ((item.key === ATTACH_KEYS.CAPTURE && imageDrew.dataURL) ||
+                }), onClick: () => handleShareCapture(item.key)(), children: item.label }), ((item.key === ATTACH_KEYS.CAPTURE && imageDrew.dataURL) ||
                 (!isForceStopRecorder &&
                     !isEmpty(dataRecorded) &&
                     urlVideoPreview &&
-                    item.key === ATTACH_KEYS.RECORD)) && (React.createElement(PreviewBox, null,
-                React.createElement(Overlay, { className: "overlay-preview" },
-                    React.createElement(FlexCenter, { style: { height: '100%', gap: 10 } }, (_b = item.actions) === null || _b === void 0 ? void 0 : _b.map(action => {
-                        var _a, _b;
-                        return (React.createElement(ButtonFeedback, { key: `${item.key}-${action.key}`, height: 30, style: {
-                                borderRadius: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px`,
-                                width: 34,
-                            }, borderRadiusCustom: 3, icon: React.createElement(Icon, { type: action.icon, style: {
-                                    color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
-                                    fontSize: '24px',
-                                } }), onClick: () => handleChangeAttachFile(item.key, action.key) }));
-                    }))),
-                item.key === ATTACH_KEYS.CAPTURE ? (React.createElement(Image, { src: imageDrew.dataURL, alt: "send feedback", isFull: true })) : (React.createElement(Video, { src: urlVideoPreview, muted: true, autoPlay: false, controls: false }))))));
-    });
+                    item.key === ATTACH_KEYS.RECORD)) && (_jsxs(PreviewBox, { children: [_jsx(Overlay, { className: "overlay-preview", children: _jsx(FlexCenter, { style: { height: '100%', gap: 10 }, children: item.actions?.map(action => (_jsx(ButtonFeedback, { height: 30, style: {
+                                    borderRadius: `${THEME.token?.borderRadius}px`,
+                                    width: 34,
+                                }, borderRadiusCustom: 3, icon: _jsx(Icon, { type: action.icon, style: {
+                                        color: THEME.token?.colorPrimary,
+                                        fontSize: '24px',
+                                    } }), onClick: () => handleChangeAttachFile(item.key, action.key) }, `${item.key}-${action.key}`))) }) }), item.key === ATTACH_KEYS.CAPTURE ? (_jsx(Image, { src: imageDrew.dataURL, alt: "send feedback", isFull: true })) : (_jsx(Video, { src: urlVideoPreview, muted: true, autoPlay: false, controls: false }))] }))] }, item.key)));
     const renderContentPopup = (type) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         switch (type) {
             case REPORT_TYPES.FEEDBACK: {
-                return (React.createElement(SendFeedback, null,
-                    React.createElement(FlexCenter, null,
-                        React.createElement(WrapperImage, null,
-                            React.createElement(HiddenBlock, null),
-                            React.createElement(Image, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/aa5d68c3-40a2-425f-beb4-cb1abd89e8cb.png", alt: "send feedback", style: { maxWidth: 'unset' } }))),
-                    React.createElement(FlexCenter, { style: { margin: '50px 3px 0' } },
-                        React.createElement(FlexCenter, { onClick: e => {
-                                e.stopPropagation();
-                                callback(REPORT_TYPES.ISSUE);
-                            } },
-                            React.createElement(ButtonFeedback, { icon: 
-                                // <Icon
-                                //   type="icon-ants-bug"
-                                //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
-                                // />
-                                React.createElement(BugIcon, { style: { fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon, maxWidth: '24px' } }), style: { marginRight: 15 } },
-                                React.createElement(Text, null, "Report an Issue"))),
-                        React.createElement(FlexCenter, { onClick: e => {
-                                e.stopPropagation();
-                                callback(REPORT_TYPES.IDEA);
-                            } },
-                            React.createElement(ButtonFeedback, { icon: 
-                                // <Icon
-                                //   type="icon-ants-idea"
-                                //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
-                                // />
-                                React.createElement(RequestIcon, { style: { fill: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon, maxWidth: '24px' } }) },
-                                React.createElement(Text, null, "Request an Idea"))))));
+                return (_jsxs(SendFeedback, { children: [_jsx(FlexCenter, { children: _jsxs(WrapperImage, { children: [_jsx(HiddenBlock, {}), _jsx(Image, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/aa5d68c3-40a2-425f-beb4-cb1abd89e8cb.png", alt: "send feedback", style: { maxWidth: 'unset' } })] }) }), _jsxs(FlexCenter, { style: { margin: '50px 3px 0' }, children: [_jsx(FlexCenter, { onClick: e => {
+                                        e.stopPropagation();
+                                        callback(REPORT_TYPES.ISSUE);
+                                    }, children: _jsx(ButtonFeedback, { icon: 
+                                        // <Icon
+                                        //   type="icon-ants-bug"
+                                        //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
+                                        // />
+                                        _jsx(BugIcon, { style: { fill: THEME.token?.colorIcon, maxWidth: '24px' } }), style: { marginRight: 15 }, children: _jsx(Text, { children: "Report an Issue" }) }) }), _jsx(FlexCenter, { onClick: e => {
+                                        e.stopPropagation();
+                                        callback(REPORT_TYPES.IDEA);
+                                    }, children: _jsx(ButtonFeedback, { icon: 
+                                        // <Icon
+                                        //   type="icon-ants-idea"
+                                        //   style={{ color: `${THEME.token?.colorIcon}`, fontSize: '24px' }}
+                                        // />
+                                        _jsx(RequestIcon, { style: { fill: THEME.token?.colorIcon, maxWidth: '24px' } }), children: _jsx(Text, { children: "Request an Idea" }) }) })] })] }));
             }
             case REPORT_TYPES.IDEA:
             case REPORT_TYPES.ISSUE: {
-                return (React.createElement(ControlGroup, { size: 20, direction: "vertical" },
-                    React.createElement(ControlGroup, { size: 5, direction: "vertical" },
-                        React.createElement(ControlLabel, null,
-                            "When you noticed this issue, what were you trying to do?",
-                            ' ',
-                            React.createElement("span", { style: { color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.red8 } }, "*")),
-                        React.createElement(Select, { defaultValue: appTargeting, value: appTargeting, style: { width: '100%' }, onChange: (_, option) => setAppTargeting(option), options: allAppOptions })),
-                    React.createElement(ControlGroup, { size: 5, direction: "vertical" },
-                        React.createElement(ControlLabel, null,
-                            "Title ",
-                            React.createElement("span", { style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.red8 } }, "*")),
-                        React.createElement(Input, { placeholder: "Enter ticket title", value: valueInput.title, onChange: event => {
-                                const { value } = event === null || event === void 0 ? void 0 : event.target;
-                                event.stopPropagation();
-                                setValueInput(prev => (Object.assign(Object.assign({}, prev), { title: value })));
-                            } }),
-                        React.createElement(ErrorMessage, { isShow: !isValidAll && !(valueInput === null || valueInput === void 0 ? void 0 : valueInput.title) }, "*This field can't be empty")),
-                    React.createElement(ControlGroup, { size: 5, direction: "vertical" },
-                        React.createElement(ControlLabel, null,
-                            "Message ",
-                            React.createElement("span", { style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red8 } }, "*")),
-                        React.createElement(EditorWrapper, null,
-                            React.createElement(Editor, { apiKey: apiKey || TINYMCE_API_KEY, value: valueInput.message, init: {
-                                    height: 200,
-                                    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: `//${modifiedDomain}/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 => {
-                                            var _a;
-                                            editor.getBody().style.fontSize = `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px`;
-                                        });
-                                    },
-                                    placeholder: 'Enter your comment...',
-                                    entity_encoding: 'raw',
-                                    paste_data_images: true,
-                                }, 
-                                // disabled={!!props.disabled}
-                                // outputFormat='text'
-                                onEditorChange: content => setValueInput(prevVal => (Object.assign(Object.assign({}, prevVal), { message: content }))) }),
-                            React.createElement("div", null,
-                                ((_f = valueInput.files) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(WrapperLinkFiles, null, (_g = valueInput.files) === null || _g === void 0 ? void 0 : _g.map(file => {
-                                    var _a, _b, _c;
-                                    return (React.createElement(WrapperLinkItemFiles, { key: file === null || file === void 0 ? void 0 : file.token },
-                                        React.createElement("span", { style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: '10px',
-                                            } },
-                                            React.createElement(Icon, { type: "icon-ants-hyperlink", style: {
-                                                    color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-                                                    fontSize: '24px',
-                                                } }, "link"),
-                                            React.createElement(Text, { style: {
-                                                    color: '#000',
-                                                    fontSize: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px`,
-                                                } }, file === null || file === void 0 ? void 0 : file.file_name)),
-                                        React.createElement(Icon, { type: "icon-ants-remove-slim", style: {
-                                                color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon,
-                                                fontSize: '12px',
-                                                cursor: 'pointer',
-                                            }, onClick: () => handleRemoveFile(file === null || file === void 0 ? void 0 : file.token) }, "clear")));
-                                }))),
-                                React.createElement(WrapperIconEditor, { borderTop: Boolean((_h = valueInput.files) === null || _h === void 0 ? void 0 : _h.length) },
-                                    React.createElement(WrapperInputFile, null,
-                                        React.createElement("label", { htmlFor: "fileImage" },
-                                            React.createElement(Icon, { type: "icon-ants-hyperlink", style: {
-                                                    color: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorPrimary,
-                                                    fontSize: '24px',
-                                                    position: 'absolute',
-                                                    top: 0,
-                                                    right: 0,
-                                                    cursor: 'pointer',
-                                                } }, "link")),
-                                        React.createElement("input", { type: "file", style: {
-                                                position: 'absolute',
-                                                top: 0,
-                                                right: 0,
-                                                display: 'none',
-                                            }, name: "fileImage", id: "fileImage", onChange: handleOnchangeFile }))))),
-                        errFile.isError ? (React.createElement(ErrorMessage, { isShow: errFile.isError }, errFile.message)) : (React.createElement(ErrorMessage, { isShow: !isValidAll && !(valueInput === null || valueInput === void 0 ? void 0 : valueInput.message) }, "*This field can't be empty"))),
-                    React.createElement(ControlGroup, { size: 10, direction: "vertical" },
-                        React.createElement(ControlLabel, null, "Attached Screenshot/ Video Recorded"),
-                        React.createElement(FlexCenter, { style: {
-                                justifyContent: 'flex-start',
-                                alignItems: 'flex-start',
-                                gap: 10,
-                            } }, renderAttachActions()))));
+                return (_jsxs(ControlGroup, { size: 20, direction: "vertical", children: [_jsxs(ControlGroup, { size: 5, direction: "vertical", children: [_jsxs(ControlLabel, { children: ["When you noticed this issue, what were you trying to do?", ' ', _jsx("span", { style: { color: THEME.token?.red8 }, children: "*" })] }), _jsx(Select, { defaultValue: appTargeting, value: appTargeting, style: { width: '100%' }, onChange: (_, option) => setAppTargeting(option), options: allAppOptions })] }), _jsxs(ControlGroup, { size: 5, direction: "vertical", children: [_jsxs(ControlLabel, { children: ["Title ", _jsx("span", { style: { color: THEME.token?.red8 }, children: "*" })] }), _jsx(Input, { placeholder: "Enter ticket title", value: valueInput.title, onChange: event => {
+                                        const { value } = event?.target;
+                                        event.stopPropagation();
+                                        setValueInput(prev => ({ ...prev, title: value }));
+                                    } }), _jsx(ErrorMessage, { isShow: !isValidAll && !valueInput?.title, children: "*This field can't be empty" })] }), _jsxs(ControlGroup, { size: 5, direction: "vertical", children: [_jsxs(ControlLabel, { children: ["Message ", _jsx("span", { style: { color: THEME.token?.red8 }, children: "*" })] }), _jsxs(EditorWrapper, { children: [_jsx(QuillEditor, { value: valueInput.message, uploadService: Service.tickets.callApi.uploadImg({
+                                                domain: domainUpload,
+                                                token,
+                                                userId,
+                                            }), onChange: content => setValueInput(prevVal => ({
+                                                ...prevVal,
+                                                message: content,
+                                            })), placeholder: "Enter your comment...", borderColor: "#e6e6e6", isRoundCorner: false, height: 159 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkFiles, { children: valueInput.files?.map((file, index) => (_jsxs(WrapperLinkItemFiles, { children: [_jsxs("span", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '10px',
+                                                                }, children: [_jsx(Icon, { type: "icon-ants-hyperlink", style: {
+                                                                            color: THEME.token?.colorPrimary,
+                                                                            fontSize: '24px',
+                                                                        }, children: "link" }), _jsx(Text, { style: {
+                                                                            color: '#000',
+                                                                            fontSize: `${THEME.token?.fontSize}px`,
+                                                                        }, children: file?.file_name })] }), _jsx(Icon, { type: "icon-ants-remove-slim", style: {
+                                                                    color: THEME.token?.colorIcon,
+                                                                    fontSize: '12px',
+                                                                    cursor: 'pointer',
+                                                                }, onClick: () => handleRemoveFileV2(index), children: "clear" })] }, file?.token))) })), _jsx(WrapperIconEditor, { borderTop: Boolean(valueInput.files?.length), children: _jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, 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-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }) })] })] }), errFile.isError ? (_jsx(ErrorMessage, { isShow: errFile.isError, children: errFile.message })) : (_jsx(ErrorMessage, { isShow: !isValidAll && !valueInput?.message, children: "*This field can't be empty" }))] }), _jsxs(ControlGroup, { size: 10, direction: "vertical", children: [_jsx(ControlLabel, { children: "Attached Screenshot/ Video Recorded" }), _jsx(FlexCenter, { style: {
+                                        justifyContent: 'flex-start',
+                                        alignItems: 'flex-start',
+                                        gap: 10,
+                                    }, children: renderAttachActions() })] })] }));
             }
             case REPORT_TYPES.HELP: {
-                return (React.createElement(Wrapper, null,
-                    React.createElement(WrapperSearch, { placeholder: "Search...", onChange: onChange }),
-                    React.createElement("div", { style: { padding: '13px 15px' } },
-                        React.createElement(LabelTitle, null, "Popular Help Resources"),
-                        isLoadingListHelp && (React.createElement(WrapperLoading, { style: { background: 'none' }, height: "80%", width: "100%" },
-                            React.createElement(Spin, { indicator: antIcon }))),
-                        treeData.length > 0 &&
-                            treeData.map(item => (React.createElement(WrapperContentHelp, null,
-                                React.createElement(TreeContent, { onSelect: onSelect, onExpand: onExpand, treeData: [item], expandedKeys: expandedKeys, autoExpandParent: autoExpandParent })))))));
+                return (_jsxs(Wrapper, { children: [_jsx(WrapperSearch, { placeholder: "Search...", onChange: onChange }), _jsxs("div", { style: { padding: '13px 15px' }, children: [_jsx(LabelTitle, { children: "Popular Help Resources" }), isLoadingListHelp && (_jsx(WrapperLoading, { style: { background: 'none' }, height: "80%", width: "100%", children: _jsx(Spin, { indicator: antIcon }) })), treeData.length > 0 &&
+                                    treeData.map(item => (_jsx(WrapperContentHelp, { children: _jsx(TreeContent, { onSelect: onSelect, onExpand: onExpand, treeData: [item], expandedKeys: expandedKeys, autoExpandParent: autoExpandParent }) })))] })] }));
             }
             case REPORT_TYPES.CHAT: {
-                return (React.createElement(ChatBox, { domain: domainTicket, userId: userId, token: token, avatar: avatar, style: {
+                return (_jsx(ChatBox, { domain: domainTicket, userId: userId, token: token, avatar: avatar, style: {
                         height: 'calc(100% - 50px)',
                     }, withoutBox: true }));
             }
             case REPORT_TYPES.HELP_V1: {
-                return (React.createElement(Wrapper, null,
-                    React.createElement(IframeHelp, { src: pathHelp })));
+                return (_jsx(Wrapper, { children: _jsx(IframeHelp, { src: pathHelp }) }));
             }
             default: {
                 return null;
             }
         }
     };
-    const renderPopupLayout = (type) => {
-        var _a;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Loading, { isLoading: isMainLoading, width: "100%", height: "100%" }),
-            React.createElement(WrapperHeader, { className: "cursor" },
-                React.createElement(Header, null, title)),
-            React.createElement(WrapperBody, { className: "popup-content", style: {
+    const isDisableButtonSend = useMemo(() => {
+        return !valueInput?.title || !valueInput?.message;
+    }, [valueInput]);
+    const renderPopupLayout = (type) => (_jsxs(_Fragment, { children: [_jsx(Loading, { isLoading: isMainLoading || isFetchingUsers, width: "100%", height: "100%" }), _jsx(WrapperHeader, { className: "cursor", children: _jsx(Header, { children: title }) }), _jsx(WrapperBody, { className: "popup-content", style: {
                     padding: type === REPORT_TYPES.CHAT ||
                         type === REPORT_TYPES.HELP ||
                         type === REPORT_TYPES.HELP_V1
                         ? '0'
                         : '13px 15px',
-                } }, renderContentPopup(type)),
-            ![
+                }, children: renderContentPopup(type) }), ![
                 REPORT_TYPES.FEEDBACK,
                 REPORT_TYPES.HELP,
                 REPORT_TYPES.CHAT,
                 REPORT_TYPES.HELP_V1,
-            ].includes(type) && (React.createElement(WrapperFooter, null,
-                React.createElement(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => handleSubmit() }, "Send"),
-                React.createElement(Button, { onClick: () => callback('ON_CLOSE_POPUP') }, "Cancel"))),
-            type === REPORT_TYPES.HELP_V1 && (React.createElement(WrapperFooterSpace, null,
-                React.createElement(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => callback('ON_BACK_POPUP') }, "BACK"),
-                React.createElement(Link, { target: "_blank", href: pathHelp, rel: "noreferrer", style: {
+            ].includes(type) && (_jsxs(WrapperFooter, { children: [_jsx(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => handleSubmit(), disabled: isDisableButtonSend, children: "Send" }), _jsx(Button, { onClick: () => callback('ON_CLOSE_POPUP'), children: "Cancel" })] })), type === REPORT_TYPES.HELP_V1 && (_jsxs(WrapperFooterSpace, { children: [_jsx(Button, { type: "primary", style: { marginRight: 15, fontWeight: 'bold' }, onClick: () => callback('ON_BACK_POPUP'), children: "BACK" }), _jsxs(Link, { target: "_blank", href: pathHelp, rel: "noreferrer", style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 7,
+                        }, children: ["Open in new tab", _jsx(OpenUrlIcon, { style: {
+                                    fill: THEME.token?.colorPrimary,
+                                    maxWidth: 18,
+                                    maxHeight: 18,
+                                } })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { menu: {
+                    style: { minWidth: 250, padding: 0 },
+                    items: items,
+                    onClick: info => handleClick(info),
+                }, 
+                // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
+                trigger: triggerType, placement: "bottomRight", children: children || (_jsx(IconButtonStyled, { ...buttonProps, children: _jsx(Icon, { type: "icon-ants-help" }) })) }), isShowPopup &&
+                createPortal(_jsx(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                         display: 'flex',
-                        alignItems: 'center',
-                        gap: 7,
-                    } },
-                    "Open in new tab",
-                    React.createElement(OpenUrlIcon, { style: {
-                            fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-                            maxWidth: 18,
-                            maxHeight: 18,
-                        } }))))));
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Dropdown, { menu: {
-                style: { minWidth: 250, padding: 0 },
-                items: items,
-                onClick: info => handleClick(info),
-            }, 
-            // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
-            trigger: triggerType, placement: "bottomRight" }, children || (React.createElement(IconButtonStyled, null,
-            React.createElement(Icon, { type: "icon-ants-help" })))),
-        isShowPopup &&
-            createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    textAlign: 'left',
-                } }, renderPopupLayout(type)), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP),
-        isOpenImageDrawer &&
-            createPortal(React.createElement(CaptureScreen, { recorderConfigs: {
-                    recorder: recorderRef.current,
-                    streamTracks: streamTracks.current,
-                    isMute,
-                }, defaultPositions: {
-                    [ATTACH_KEYS.CAPTURE]: defaultPositionDrawActions,
-                    [ATTACH_KEYS.RECORD]: defaultPositionRecordActions,
-                }, captureType: captureType, src: urlImageDrawer, callback: callback }), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY)));
+                        flexDirection: 'column',
+                        textAlign: 'left',
+                    }, children: renderPopupLayout(type) }), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP), isOpenImageDrawer &&
+                createPortal(_jsx(CaptureScreen, { recorderConfigs: {
+                        recorder: recorderRef.current,
+                        streamTracks: streamTracks.current,
+                        isMute,
+                    }, defaultPositions: {
+                        [ATTACH_KEYS.CAPTURE]: defaultPositionDrawActions,
+                        [ATTACH_KEYS.RECORD]: defaultPositionRecordActions,
+                    }, captureType: captureType, src: urlImageDrawer, callback: callback }), document.body, PORTALS_ANTSOMI_PACKAGE_UI_KEY)] }));
 };
 Help.defaultProps = {
     triggerType: ['click'],
@@ -1004,6 +929,7 @@ Help.defaultProps = {
         apiKey: TINYMCE_API_KEY,
         domain: '//sandbox-app.cdp.asia',
         domainTicket: 'https://sandbox-issue.antsomi.com',
+        domainUpload: 'https://sandbox-media-template.antsomi.com/cdp',
         portalId: '33167',
         userId: '1600080515',
         token: '5474r2x214z254a4u2a4y4m503w5p2r5a4s2g4x2l5e4',