@antscorp/antsomi-ui 2.0.120 → 2.0.122

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

@@ -27,6 +27,7 @@ export declare function getEntriesV2(res: any, def: any): {
     messageAPI?: undefined;
 };
 export declare const formatAccountId: (data: any) => any;
+export { dataUrlToFile, uploadEmbeddedImages } from '../../../utils/uploadEmbeddedImages';
 export declare const formatParams: (data: any) => {
     title: string;
     ownerId: undefined;

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

@@ -294,6 +294,7 @@ export const formatAccountId = data => {
     const results = data?.map(item => item?.userId);
     return results;
 };
+export { dataUrlToFile, uploadEmbeddedImages } from '../../../utils/uploadEmbeddedImages';
 export const formatParams = data => {
     const params = {
         title: '',

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

@@ -8,7 +8,7 @@ import MessageComponent from './components/MessageComponent';
 import { Spin, Tooltip, Icon, Button, SelectAccount, QuillEditor, } from '@antscorp/antsomi-ui/es/components';
 import Service from './Service';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, } from './styled';
-import { formatDatarender, handleValidateContent } from './util';
+import { formatDatarender, handleValidateContent, uploadEmbeddedImages, } from './util';
 import { get, keyBy } from 'lodash';
 import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 const initValueInput = {
@@ -44,6 +44,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         isError: false,
         message: '',
     });
+    const [embeddedImageError, setEmbeddedImageError] = useState('');
     const isUpdate = action === 'edit' && ticketId;
     const valueInputRef = useRef(valueInput);
     valueInputRef.current = valueInput;
@@ -136,6 +137,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         }, 1000);
     }, []);
     const handleEditorChange = content => {
+        setEmbeddedImageError('');
         setTextValue(content);
         updateValueInput({ message: content });
         // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
@@ -147,33 +149,61 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         params.followers = arrFolowers;
         fetchUpdateFollwers(params);
     };
-    const handleUpdateComment = () => {
-        setIsLoading(true);
-        const params = {
-            followers: [],
-            submitterId: null,
-            ownerId: null,
-            message: '',
-            properties: {
-                attachments: [],
-            },
-            submitterEmail: '',
-            attachmentsZendesk: [],
-        };
-        if (valueInput?.followers?.length) {
-            params.followers = valueInput?.followers;
+    const uploadImagesBeforeSubmit = async (message) => {
+        setIsLoadingUpload(true);
+        setEmbeddedImageError('');
+        try {
+            const uploadedMessage = await uploadEmbeddedImages(message, Service.tickets.callApi.uploadFile({
+                domain: domainUpload,
+            }));
+            if (uploadedMessage !== message) {
+                setTextValue(uploadedMessage);
+                updateValueInput({ message: uploadedMessage });
+            }
+            return uploadedMessage;
+        }
+        catch (error) {
+            setEmbeddedImageError(error instanceof Error && error.message === 'FILE_TOO_LARGE'
+                ? '*Maximum upload file size: 10MB'
+                : '*Image upload failed. Please try again.');
+            throw error;
+        }
+        finally {
+            setIsLoadingUpload(false);
         }
-        if (valueInput?.files?.length > 0) {
-            params.properties.attachments = valueInput?.files;
+    };
+    const handleUpdateComment = async () => {
+        const currentValueInput = valueInputRef.current;
+        try {
+            const uploadedMessage = await uploadImagesBeforeSubmit(currentValueInput.message);
+            const params = {
+                followers: [],
+                submitterId: null,
+                ownerId: null,
+                message: uploadedMessage,
+                properties: {
+                    attachments: [],
+                },
+                submitterEmail: '',
+                attachmentsZendesk: [],
+            };
+            if (currentValueInput?.followers?.length) {
+                params.followers = currentValueInput.followers;
+            }
+            if (currentValueInput?.files?.length > 0) {
+                params.properties.attachments = currentValueInput.files;
+            }
+            const mapUsers = keyBy(listUsers, 'email');
+            params.submitterId = +mapUsers[email]?.userId || 0;
+            params.submitterEmail = email;
+            params.attachmentsZendesk = currentValueInput.fileZendesk?.map(file => file?.token);
+            setIsLoading(true);
+            fetchUpdateComment(params);
+            handleUpdateFollowers(currentValueInput.followers?.map((fol) => fol.userId));
+        }
+        catch (error) {
+            // The upload error is shown below the editor.
         }
-        const mapUsers = keyBy(listUsers, 'email');
-        params.submitterId = +mapUsers[email]?.userId || 0;
-        params.submitterEmail = email;
-        params.ownerId = null;
-        params.message = valueInput?.message;
-        params.attachmentsZendesk = valueInput?.fileZendesk?.map(file => file?.token);
-        fetchUpdateComment(params);
-        handleUpdateFollowers(valueInput?.followers?.map((fol) => fol.userId));
     };
     const onChangeFollowers = arrFolowers => {
         updateValueInput({ followers: arrFolowers });
@@ -301,7 +331,11 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                 break;
         }
     };
-    return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsx(Spin, { style: { height: '100vh' }, spinning: isLoading || isLoadingDetails || isLoadingDataSouce || isLoadingFollower, children: _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsx("div", { children: ownerEmail })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: ticketDetails?.followers || [], nameKey: "userName", userIdKey: "userId", users: listUsers, onChange: (_, followers) => onChangeFollowers(followers) })] }), dataSelects?.map((data) => _jsx(_Fragment, { children: renderOptions(data) })), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (ticketDetails.referenceUrl ? (_jsx(Tooltip, { title: ticketDetails.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
+    return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsx(Spin, { style: { height: '100vh' }, spinning: isLoading ||
+                    isLoadingDetails ||
+                    isLoadingDataSouce ||
+                    isLoadingFollower ||
+                    isLoadingUpload, children: _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsx("div", { children: ownerEmail })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: ticketDetails?.followers || [], nameKey: "userName", userIdKey: "userId", users: listUsers, onChange: (_, followers) => onChangeFollowers(followers) })] }), dataSelects?.map((data) => _jsx(_Fragment, { children: renderOptions(data) })), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (ticketDetails.referenceUrl ? (_jsx(Tooltip, { title: ticketDetails.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
                                             // width="300px"
                                             onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs(_Fragment, { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
                                                         domain: domainUpload,
@@ -309,7 +343,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                                                                         background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                             ? '#ccc'
                                                                             : '#1f5fac'}`,
-                                                                    }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                                                    }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), embeddedImageError ? (_jsx("div", { className: "error-message", children: embeddedImageError })) : errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
                                             !valueInput?.message && (_jsx("div", { className: "error-message", children: "* This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, 
                                             // mailFollower={comment?.mailFollower}
                                             message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] }) })] }));