@antscorp/antsomi-ui 2.0.75 → 2.0.76

package/es/components/molecules/EmojiCollections/CommonCollection/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const MIN_VISIBLE_COUNT = 40;
 export declare const COMMON_COLLECTION_KEYS: {
     readonly SMILEYS_BODY: "smileys_body";
     readonly ANIMALS_NATURE: "animals_nature";

package/es/components/molecules/EmojiCollections/CommonCollection/constants.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EmojiAirportShuttleIcon, EmojiBallIcon, EmojiElectricBoltIcon, EmojiFlagIcon, EmojiLightBulbIcon, EmojiPetFootIcon, EmojiRamenDiningIcon, EmojiReactionIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+export const MIN_VISIBLE_COUNT = 40; // ROW: 4, COLUMN: 10 => 4 x 10
 export const COMMON_COLLECTION_KEYS = {
     SMILEYS_BODY: 'smileys_body',
     ANIMALS_NATURE: 'animals_nature',

package/es/components/molecules/EmojiCollections/CommonCollection/index.js

@@ -12,13 +12,13 @@ import { EmojiSmileIcon, SearchIcon } from '@antscorp/antsomi-ui/es/components/i
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 // Constants
-import { COMMON_TAB_COLLECTION, SMILEYS_BODY } from './constants';
+import { COMMON_TAB_COLLECTION, MIN_VISIBLE_COUNT, SMILEYS_BODY } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
 const CommonCollection = ({ onEmojiClick }) => {
     // States
-    const [visibleCount, setVisibleCount] = useState(40);
+    const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
     const [state, setState] = useImmer({
         collectionActive: SMILEYS_BODY,
         txtSearch: '',
@@ -54,7 +54,7 @@ const CommonCollection = ({ onEmojiClick }) => {
             setVisibleCount(prev => {
                 const newCount = prev + 30;
                 if (newCount >= collectionLength)
-                    return collectionLength;
+                    return collectionLength > MIN_VISIBLE_COUNT ? collectionLength : MIN_VISIBLE_COUNT;
                 return newCount;
             });
         }

package/es/components/molecules/EmojiCollections/LineCollection/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const MIN_VISIBLE_COUNT = 40;
 export declare const PRODUCT_ID_EMOJIS: readonly [{
     readonly id: "5ac2213e040ab15980c9b447";
     readonly total: 182;

package/es/components/molecules/EmojiCollections/LineCollection/constants.js

@@ -1,6 +1,7 @@
 /* eslint-disable consistent-return */
 // Utils
 import { getLinkLineURLImage } from '@antscorp/antsomi-ui/es/components/molecules/TagifyInput';
+export const MIN_VISIBLE_COUNT = 40; // ROW: 4, COLUMN: 10 => 4 x 10
 export const PRODUCT_ID_EMOJIS = [
     {
         id: '5ac2213e040ab15980c9b447',

package/es/components/molecules/EmojiCollections/LineCollection/index.js

@@ -10,11 +10,11 @@ import { Button, Flex, Scrollbars } from '@antscorp/antsomi-ui/es/components/ato
 import { getLinkLineURLImage, PREFIX_PATTERN_LINE_MESSAGE, } from '@antscorp/antsomi-ui/es/components/molecules';
 import { EmojiSmileIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Constants
-import { LINE_MESSAGE_EMOJIS, TAB_LINE_MESSAGE_EMOJIS } from './constants';
+import { LINE_MESSAGE_EMOJIS, MIN_VISIBLE_COUNT, TAB_LINE_MESSAGE_EMOJIS } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const LineCollection = ({ onEmojiClick }) => {
     // States
-    const [visibleCount, setVisibleCount] = useState(40);
+    const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
     const [state, setState] = useImmer({
         collectionActive: TAB_LINE_MESSAGE_EMOJIS[0]?.key || '',
     });
@@ -32,7 +32,7 @@ const LineCollection = ({ onEmojiClick }) => {
             setVisibleCount(prev => {
                 const newCount = prev + 30;
                 if (newCount >= collectionLength)
-                    return collectionLength;
+                    return collectionLength > MIN_VISIBLE_COUNT ? collectionLength : collectionLength;
                 return newCount;
             });
         }

package/es/components/molecules/EmojiCollections/ViberCollection/index.js

@@ -14,9 +14,10 @@ import { EmojiSmileIcon, SearchIcon } from '@antscorp/antsomi-ui/es/components/i
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const listEmoji = Object.values(iconsViber);
+const MIN_VISIBLE_COUNT = 40; // ROW: 4, COLUMN: 10 => 4 x 10
 const ViberCollection = ({ onEmojiClick }) => {
     // States
-    const [visibleCount, setVisibleCount] = useState(40);
+    const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
     const [state, setState] = useImmer({
         txtSearch: '',
     });
@@ -43,7 +44,7 @@ const ViberCollection = ({ onEmojiClick }) => {
             setVisibleCount(prev => {
                 const newCount = prev + 30;
                 if (newCount >= collectionLength)
-                    return collectionLength;
+                    return collectionLength > MIN_VISIBLE_COUNT ? collectionLength : MIN_VISIBLE_COUNT;
                 return newCount;
             });
         }

package/es/components/organism/ActivityTimeline/utils.js

@@ -10,7 +10,7 @@ import { CDP_ROUTE } from '@antscorp/antsomi-ui/es/constants';
 const translateAt = translate(translations._INFO_LOCATION, 'at');
 const urlJourney = (data, config) => {
     const { story = {} } = data;
-    const url = `${CDP_ROUTE[config.env || ENV.PROD]}/${config.auth?.portalId}/${config.auth?.userId}/marketing-hub/journeys/${story.channelId && story.channelId}/list?ui=detail-drawer&journeyId=${story.id && story.id}&channelId=${story.channelId && story.channelId}&tab=settings&design=preview`;
+    const url = `${CDP_ROUTE[config.env || ENV.PROD]}/gen2/${config.auth?.portalId}/${config.auth?.userId}/marketing-hub/journeys/${story.channelId && story.channelId}/list?ui=detail-drawer&journeyId=${story.id && story.id}&channelId=${story.channelId && story.channelId}&tab=settings&design=preview`;
     return url;
 };
 export const getValuesReplace = (objectReplace, data) => {

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

@@ -35,6 +35,7 @@ const Loading = ({ isLoading, height, width }) => isLoading && (_jsx(WrapperLoad
 const Help = props => {
     const { configs, triggerType, buttonProps, boundsDraggable, isShowResizeHover, children } = props;
     const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, domainUpload, avatar, } = configs;
+    console.log('🚀 ~ domainUpload:', domainUpload);
     // const [isOpenDropdown, setIsOpenDropdown] = useState<boolean>(false);
     const [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
     const [defaultPositionRecordActions, setDefaultPositionRecordActions] = useState(DEFAULT_POSITIONS.record);
@@ -53,6 +54,7 @@ const Help = props => {
         message: '',
         files: [],
         referenceUrl: '',
+        fileZendesk: [],
     });
     const { listUsers, isFetchingUsers } = useGetListUser({
         domain,
@@ -191,12 +193,19 @@ const Help = props => {
         try {
             setIsMainLoading(true);
             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) {
             // eslint-disable-next-line no-console
@@ -262,6 +271,28 @@ const Help = props => {
         newListFile = newListFile.filter(list => list?.token !== token);
         setValueInput(prevVal => ({ ...prevVal, files: newListFile }));
     };
+    const handleRemoveFileV2 = (url, fileName) => {
+        let newListFile = valueInput.files;
+        newListFile = newListFile.filter((list) => list?.url !== url);
+        const newFileZendesk = valueInput.fileZendesk.filter(file => file.file_name !== fileName);
+        setValueInput(prevVal => ({
+            ...prevVal,
+            files: newListFile,
+            fileZendesk: newFileZendesk,
+        }));
+    };
+    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('');
@@ -272,6 +303,7 @@ const Help = props => {
             message: '',
             title: '',
             files: [],
+            fileZendesk: [],
         }));
         setIsShowPopup(false);
         setErrFile({
@@ -558,6 +590,7 @@ const Help = props => {
         try {
             setIsMainLoading(true);
             let attachments = [];
+            let attachmentsZendesk = [];
             const uploadServices = TicketService.tickets.callApi.uploadImg({
                 domain: domainUpload,
                 token,
@@ -567,13 +600,20 @@ const Help = props => {
             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 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);
+                    }
                 }
             }
             if (!isEmpty(dataRecorded)) {
@@ -582,14 +622,19 @@ const Help = props => {
                 const videoFile = convertBlobToFile(blob, blobName);
                 if (videoFile) {
                     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 = {
                 ...restParams,
                 attachments,
+                attachmentsZendesk,
                 networkId: Number(portalId),
                 ticketType: type === REPORT_TYPES.ISSUE ? 'bug' : 'request',
             };
@@ -624,6 +669,7 @@ const Help = props => {
         if (!errFile.isError) {
             const params = formatParams({ ...valueInput, feature: appTargeting });
             const mapUserById = keyBy(listUsers, 'userId');
+            console.log('🚀 ~ handleSubmit ~ params:', params);
             const ownerEmail = mapUserById[params.ownerId || '']?.email;
             const referenceUrl = window.location.href;
             handleCreateTicket({
@@ -808,7 +854,7 @@ const Help = props => {
                                                                     color: THEME.token?.colorIcon,
                                                                     fontSize: '12px',
                                                                     cursor: 'pointer',
-                                                                }, onClick: () => handleRemoveFile(file?.token), children: "clear" })] }, file?.token))) })), _jsx(WrapperIconEditor, { borderTop: Boolean(valueInput.files?.length), children: _jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: "fileImage", children: _jsx(Icon, { type: "icon-ants-hyperlink", style: {
+                                                                }, onClick: () => handleRemoveFileV2(file?.url, file?.file_name), children: "clear" })] }, file?.token))) })), _jsx(WrapperIconEditor, { borderTop: Boolean(valueInput.files?.length), children: _jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: "fileImage", children: _jsx(Icon, { type: "icon-ants-hyperlink", style: {
                                                                         color: THEME.token?.colorPrimary,
                                                                         fontSize: '24px',
                                                                         position: 'absolute',

package/es/components/organism/Help/types.d.ts

@@ -24,6 +24,7 @@ export interface ValueFormProps {
     followers: any[];
     message: string;
     files: any[];
+    fileZendesk: any[];
     referenceUrl: string;
 }
 export interface AllAppOptionsProps {

package/es/components/organism/Help/utils.d.ts

@@ -10,6 +10,7 @@ export declare const formatParams: (data: any) => {
     category: string;
     message: string;
     attachments: never[];
+    attachmentsZendesk: never[];
 };
 export declare const postCustomEvent: (type: any, data: any) => void;
 export declare const expendDefault: (data: any) => string[];

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

@@ -3,6 +3,7 @@ export const formatAccountId = data => {
     return results;
 };
 export const formatParams = data => {
+    console.log('🚀 ~ data:', data);
     const params = {
         title: '',
         ownerId: undefined,
@@ -14,6 +15,7 @@ export const formatParams = data => {
         category: '',
         message: '',
         attachments: [],
+        attachmentsZendesk: [],
     };
     if (data?.ownerId) {
         params.ownerId = data?.ownerId;
@@ -45,6 +47,9 @@ export const formatParams = data => {
     if (data?.files?.length) {
         params.attachments = data?.files;
     }
+    if (data.fileZendesk?.length) {
+        params.attachmentsZendesk = data?.fileZendesk?.map(file => file?.token);
+    }
     return params;
 };
 export const postCustomEvent = (type, data) => {

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

@@ -22,6 +22,7 @@ const initValueInput = {
     followers: [],
     message: '',
     files: [],
+    fileZendesk: [],
     isChanged: false,
     referenceUrl: window.location.href,
 };
@@ -38,6 +39,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
     const [isLoadingUpload, setIsLoadingUpload] = useState(false);
     const [isLoadingFollower, setIsLoadingFollower] = useState(false);
     const [valueInput, setValueInput] = useState(initValueInput);
+    const [fileInputKey, setFileInputKey] = useState(0);
     const [errFile, setErrFile] = useState({
         isError: false,
         message: '',
@@ -262,6 +264,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
             ownerId: null,
             properties: {},
             message: '',
+            attachmentsZendesk: [],
         };
         if (valueInput?.followers?.length) {
             params.followers = formatAccountId(valueInput?.followers);
@@ -275,6 +278,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         params.submitterEmail = listUsers?.find(user => user.userId === userId)?.email;
         params.ownerId = Number(valueInput?.ownerId[0]?.userId);
         params.message = valueInput?.message;
+        params.attachmentsZendesk = valueInput.fileZendesk.map(file => file.token);
         fetchUpdateComment(params);
         handleUpdateFollowers(valueInput?.followers?.map((fol) => fol.userId));
     };
@@ -285,8 +289,22 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
             token,
             userId,
         });
+        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) {
+                updateValueInput({
+                    fileZendesk: [...valueInput?.fileZendesk, responseZendesk?.data],
+                });
+            }
+        };
         try {
             const response = await uploadService({ files: [file] });
+            await uploadZendeskService(file);
             if (response.code === 200) {
                 updateValueInput({
                     files: [...valueInput?.files, response?.data[0]],
@@ -324,14 +342,21 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
             });
             handleUploadFile(e.target.files[0]);
         }
+        setFileInputKey(fileInputKey + 1);
     };
-    const handleRemoveFile = url => {
+    const handleRemoveFile = (url, fileName) => {
         let newListFile = valueInput.files;
         newListFile = newListFile.filter((list) => list?.url !== url);
         updateValueInput({ files: newListFile });
     };
-    const handleCloseSnackbar = () => {
-        setIsOpenToast({ ...isOpenToast, isOpen: false });
+    const handleRemoveFileV2 = (url, fileName) => {
+        let newListFile = valueInput.files;
+        newListFile = newListFile.filter((list) => list?.url !== url);
+        const newFileZendesk = valueInput.fileZendesk.filter(file => file.file_name !== fileName);
+        updateValueInput({
+            files: newListFile,
+            fileZendesk: newFileZendesk,
+        });
     };
     return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsxs(Spin, { style: { height: '100vh' }, spinning: isLoading ||
                     isLoadingDetails ||
@@ -352,7 +377,9 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
                                                             domain: domainUpload,
                                                             token,
                                                             userId,
-                                                        }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _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?.url), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.file_name))) })), _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: {
+                                                        }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _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: () => {
+                                                                                handleRemoveFileV2(file?.url, file?.file_name);
+                                                                            }, className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.file_name))) })), _jsxs(WrapperIconEditor, { borderTop: !!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)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                             background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                                 ? '#ccc'
                                                                                 : '#1f5fac'}`,

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

@@ -38,6 +38,7 @@ export declare const formatParams: (data: any) => {
     category: string;
     message: string;
     attachments: never[];
+    attachmentsZendesk: never[];
     submitterEmail: string;
 };
 export declare const formatDatarender: (data: any, listSelect: any, listAccount: any) => any;

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

@@ -306,6 +306,7 @@ export const formatParams = data => {
         category: '',
         message: '',
         attachments: [],
+        attachmentsZendesk: [],
         submitterEmail: '',
     };
     if (data?.ownerId) {
@@ -338,6 +339,9 @@ export const formatParams = data => {
     if (data?.files?.length) {
         params.attachments = data?.files;
     }
+    if (data?.fileZendesk) {
+        params.attachmentsZendesk = data?.fileZendesk?.map(file => file?.token);
+    }
     if (data?.submitterEmail) {
         params.submitterEmail = data?.submitterEmail;
     }

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

@@ -21,6 +21,7 @@ const initValueInput = {
     followers: [],
     message: '',
     files: [],
+    fileZendesk: [],
     isChanged: false,
     referenceUrl: window.location.href,
 };
@@ -37,6 +38,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
     const [isLoadingUpload, setIsLoadingUpload] = useState(false);
     const [isLoadingFollower, setIsLoadingFollower] = useState(false);
     const [valueInput, setValueInput] = useState(initValueInput);
+    const [fileInputKey, setFileInputKey] = useState(0);
     const [errFile, setErrFile] = useState({
         isError: false,
         message: '',
@@ -144,7 +146,6 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             });
         }
     }, [ticketDetails, listUsers, dataSelects]);
-    console.log('🚀 ~ listUsers:', listUsers);
     useEffect(() => {
         setIsLoading(true);
         getCustomFields();
@@ -175,6 +176,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                 attachments: [],
             },
             submitterEmail: '',
+            attachmentsZendesk: [],
         };
         if (valueInput?.followers?.length) {
             params.followers = valueInput?.followers;
@@ -187,6 +189,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         params.submitterEmail = email;
         params.ownerId = Number(valueInput?.ownerId[0]?.userId);
         params.message = valueInput?.message;
+        params.attachmentsZendesk = valueInput?.fileZendesk?.map(file => file?.token);
         fetchUpdateComment(params);
         handleUpdateFollowers(valueInput?.followers?.map((fol) => fol.userId));
     };
@@ -199,8 +202,22 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         const uploadService = Service.tickets.callApi.uploadFile({
             domain: domainUpload,
         });
+        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) {
+                updateValueInput({
+                    fileZendesk: [...valueInput?.fileZendesk, responseZendesk?.data],
+                });
+            }
+        };
         try {
             const response = await uploadService({ files: [file], mode: 'file' });
+            await uploadZendeskService(file);
             if (response.code === 200) {
                 updateValueInput({
                     files: [...valueInput?.files, response?.data[0]],
@@ -238,12 +255,22 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             });
             handleUploadFile(e.target.files[0]);
         }
+        setFileInputKey(fileInputKey + 1);
     };
     const handleRemoveFile = token => {
         let newListFile = valueInput.files;
         newListFile = newListFile.filter((list) => list?.token !== token);
         updateValueInput({ files: newListFile });
     };
+    const handleRemoveFileV2 = (url, fileName) => {
+        let newListFile = valueInput.files;
+        newListFile = newListFile.filter((list) => list?.url !== url);
+        const newFileZendesk = valueInput.fileZendesk.filter(file => file.file_name !== fileName);
+        updateValueInput({
+            files: newListFile,
+            fileZendesk: newFileZendesk,
+        });
+    };
     const ownerEmail = useMemo(() => {
         const keyById = keyBy(listUsers, 'userId');
         if (keyById[ticketDetails?.ownerId]) {
@@ -262,7 +289,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                                             // width="300px"
                                             onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
                                                         domain: domainUpload,
-                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _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: {
+                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _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: () => handleRemoveFileV2(file?.url, file?.file_name), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!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)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                         background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                             ? '#ccc'
                                                                             : '#1f5fac'}`,

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

@@ -35,7 +35,7 @@ const API = {
             // 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 => 
+            upload: (params, domain, token, config, userId, type) => callApiWithAuth(`api/base/upload/index`, 'post', params.data, domain, config, token, userId, true, type).then(res => 
             // const data = getEntriesV2(res, 0);
             // dataBackup[params.objectName] = data;
             res.data),

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { WrapperAvatar, WrapperContentAvatar, WrapperLinkItemFiles, WrapperModalHeaderImg, WrapperModalImg, } from '../styled';
 import { Icon, Image, Spin, Tooltip } from '@antscorp/antsomi-ui/es/components';
 import { convertDateToTimestamp, generateAvatar } from '../util';
@@ -13,6 +13,26 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         isOpen: false,
         src: '',
     });
+    useEffect(() => {
+        if (refMesage.current) {
+            refMesage.current.querySelectorAll('img')?.forEach(img => {
+                img.style.cursor = 'pointer';
+                img.addEventListener('click', () => {
+                    setModalImg({
+                        ...modalImg,
+                        isOpen: true,
+                        src: img?.src,
+                    });
+                });
+            });
+            refMesage.current.querySelectorAll('a')?.forEach(a => {
+                const isOpenNewTab = a.attributes?.rel?.value?.includes('noopener noreferrer');
+                if (isOpenNewTab) {
+                    a.setAttribute('target', '_blank');
+                }
+            });
+        }
+    }, [refMesage.current]);
     const isImageUrl = url => IMAGE_EXTENDS.some(tail => url && url.toLowerCase().endsWith(tail));
     const [images, files] = useMemo(() => {
         const arrImgs = [];

package/es/constants/api.d.ts

@@ -24,6 +24,7 @@ export declare const ANTALYSER_API: {
     production: string;
 };
 export declare const CDP_ROUTE: {
+    development: string;
     sandbox: string;
     "sandbox-cdp": string;
     staging: string;

package/es/constants/api.js

@@ -28,6 +28,7 @@ export const ANTALYSER_API = {
     [ENV.PROD]: 'https://sandbox-antalyser.ants.vn',
 };
 export const CDP_ROUTE = {
+    [ENV.DEV]: 'https://sandbox-cdp.antsomi.com',
     [ENV.SANDBOX]: 'https://sandbox-cdp.antsomi.com',
     [ENV.SANDBOX_CDP]: 'https://sandbox-cdp.antsomi.com',
     [ENV.STAGING]: 'https://staging-cdp.antsomi.com',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.75",
+  "version": "2.0.76",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",