@antscorp/antsomi-ui 2.0.121 → 2.0.123

package/es/components/organism/Login/components/ChooseMethod/styled.d.ts

@@ -1,10 +1,17 @@
-/// <reference types="react" />
 export declare const TextInfo: import("styled-components").StyledComponent<"span", any, {
     isMobile: boolean;
 }, never>;
 export declare const SubTitle: import("styled-components").StyledComponent<"span", any, {
     isMobile: boolean;
 }, never>;
-export declare const BlockMethod: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    disable?: boolean | undefined;
+export declare const BlockMethod: import("styled-components").StyledComponent<"button", any, {
+    $disable?: boolean | undefined;
+}, never>;
+export declare const MethodIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MethodContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MethodLabel: import("styled-components").StyledComponent<"span", any, {
+    $disable?: boolean | undefined;
+}, never>;
+export declare const MethodDescription: import("styled-components").StyledComponent<"span", any, {
+    $disable?: boolean | undefined;
 }, never>;

package/es/components/organism/Login/components/ChooseMethod/styled.js

@@ -1,4 +1,3 @@
-import { Flex } from 'antd';
 import styled from 'styled-components';
 export const TextInfo = styled.span `
   color: #7f7f7f;
@@ -9,16 +8,65 @@ export const SubTitle = styled.span `
   font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
   font-weight: 500;
 `;
-export const BlockMethod = styled(Flex) `
+export const BlockMethod = styled.button `
+  display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
+  min-height: 64px;
   padding: 10px;
-  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
+  box-sizing: border-box;
+  cursor: ${props => (props.$disable ? 'not-allowed' : 'pointer')};
+  background-color: #ffffff;
+  border: 1px solid #b8cfe6;
   border-radius: 10px;
+  font-family: inherit;
+  text-align: left;
+  opacity: ${props => (props.$disable ? '0.5' : '1')};
 
-  opacity: ${props => (props.disable ? '0.5' : '1')};
+  &:hover:not(:disabled) {
+    background-color: #f2f9ff;
+    border-color: #81bcf4;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #005eb8;
+    outline-offset: 2px;
+  }
+`;
+export const MethodIcon = styled.span `
+  display: flex;
+  flex: 0 0 24px;
+  align-self: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-top: 2px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export const MethodContent = styled.span `
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+`;
+export const MethodLabel = styled.span `
+  color: ${props => (props.$disable ? '#9c9b9b' : '#000000')};
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+`;
+export const MethodDescription = styled.span `
+  color: ${props => (props.$disable ? '#9c9b9b' : '#595959')};
+  font-size: 12px;
 
-  &:hover {
-    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
+  @media (max-width: 768px) {
+    font-size: 13px;
   }
 `;

package/es/components/organism/Login/components/LoginSelectPortal/LoginSelectPortal.js

@@ -177,7 +177,7 @@ export const LoginSelectPortal = props => {
         return draftListNetwork.filter(netWork => netWork.networkName.toLocaleLowerCase().indexOf(state.portalSearch.toLocaleLowerCase()) !==
             -1);
     }, [listNetworks, state.portalSearch]);
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), gapContent: 30, isShowLogo: false, title: "Select Portal", content: _jsxs(Flex, { vertical: true, gap: 30, children: [_jsxs(Flex, { vertical: true, gap: 20, children: [_jsx(StyleInput, { isMobile: isMobile, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), gapContent: 20, isShowLogo: false, title: "Select Portal", content: _jsxs(Flex, { vertical: true, gap: 30, children: [_jsxs(Flex, { vertical: true, gap: 20, children: [_jsx(StyleInput, { isMobile: isMobile, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: {
                                     fontSize: 24,
                                 }, color: "#595959" }), onChange: e => setPortalSearch(e.target.value) }), isEmpty(filterListNetworks) ? (_jsxs(Flex, { vertical: true, align: "center", justify: "center", style: { height: 514 }, gap: 15, children: [!isMobile && _jsx(Image, { src: NoData, alt: "", width: 80, height: 80 }), _jsx(Text, { style: {
                                         color: '#595959',

package/es/components/organism/Login/components/LoginWithEmail/LoginWithEmail.js

@@ -205,7 +205,7 @@ export const LoginWithEmail = ({ loginData, domainLogin, codeKey = 'code', token
         const baseText = `Please enter the 6-digit code send to ${maskedEmail} Haven't received it? `;
         return (_jsx(Flex, { gap: 5, align: "center", children: _jsxs(Text, { isMobile: isMobile, color: "#595959", children: [baseText, state.isShowResend ? (_jsx(Text, { color: state.isDisableResend ? '#a2a2a2' : '#005eb8', onClick: state.isDisableResend ? undefined : onResendCode, isMobile: isMobile, style: { cursor: state.isDisableResend ? 'not-allowed' : 'pointer' }, children: "Resend." })) : (`Resend code in ${seconds}s.`)] }) }));
     };
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: userAvatar, name: userFullName, email: userEmail }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: CODE_LENGTH, placeholder: "Input your code", value: state.code, onChange: handleCodeChange, status: errorRef.current && state.codeError ? 'error' : undefined, disabled: state.isTooManyMistakes }), renderErrorMessages()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, disabled: state.isTooManyMistakes, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, loading: state.isLoading, disabled: state.isTooManyMistakes, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { vertical: true, gap: 115, children: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: userAvatar, name: userFullName, email: userEmail }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: _jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "Identity Verification" }), _jsx(Text, { isMobile: isMobile, color: "#595959", isCenter: true, children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [renderResendSection(), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: CODE_LENGTH, placeholder: "Input your code", value: state.code, onChange: handleCodeChange, status: errorRef.current && state.codeError ? 'error' : undefined, disabled: state.isTooManyMistakes }), renderErrorMessages()] }), _jsx(Checkbox, { checked: state.isTrust, onChange: handleTrustChange, disabled: state.isTooManyMistakes, children: _jsx(TextInfo, { isMobile: isMobile, children: "Remember this browser for future logins" }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { marginTop: isMobile ? 20 : 15 }, children: [_jsx(StyleButton, { isMobile: isMobile, type: "primary", onClick: signIn, loading: state.isLoading, disabled: state.isTooManyMistakes, children: "Verify" }), _jsx(StyleButton, { isMobile: isMobile, onClick: handleBack, type: "text", children: "Back to login" })] })] })] }), footer: _jsx(Flex, { vertical: true, gap: 115, children: _jsx(Flex, { justify: "center", children: _jsx(Button, { type: "text", onClick: handleBack, style: {
                         fontSize: isMobile ? '16px' : '14px',
                     }, children: "Sign in with a different account" }) }) }) }));
 };

package/es/components/organism/Login/components/LoginWithGG/LoginWithGG.js

@@ -98,7 +98,7 @@ export const LoginWithGG = props => {
             });
         }
     }, [state.code]);
-    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 30, content: _jsxs(Flex, { vertical: true, gap: 50, style: { marginTop: 20 }, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", children: "For added security, we need to verify your identity." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [_jsxs(Flex, { gap: 5, align: "center", children: [_jsx(Text, { isMobile: isMobile, color: "#595959", children: "Please enter the 6-digit code registered to your device." }), _jsx(IconInfo, { image: step2, title: _jsx(TextAntsomiUI, { style: {
+    return (_jsx(WidgetLayout, { header: _jsx(Avatar, { image: get(loginData, 'personal.avatar'), name: get(loginData, 'personal.full_name'), email: get(loginData, 'personal.email') }), isShowLogo: false, title: _jsx(Title, { isMobile: isMobile, style: { marginTop: 20 }, children: "Identity Verification" }), gapContent: 20, content: _jsxs(Flex, { vertical: true, gap: 50, children: [_jsxs(Flex, { vertical: true, gap: 20, align: "center", children: [_jsx("img", { src: loginStep2Image, alt: "" }), _jsx(Text, { isMobile: isMobile, color: "#595959", isCenter: true, children: "For your security, we need to verify your identity before continuing." })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 10 : 15, children: [_jsxs(Flex, { gap: 5, align: "center", children: [_jsx(Text, { isMobile: isMobile, color: "#595959", children: "Please enter the 6-digit code registered to your device." }), _jsx(IconInfo, { image: step2, title: _jsx(TextAntsomiUI, { style: {
                                             marginTop: 20,
                                             textAlign: 'center',
                                         }, children: _jsxs(Text, { isMobile: isMobile, children: ["Open Google Authenticator and enter the code from ", _jsx("b", { children: "antsomi.com" })] }) }) })] }), _jsxs(Flex, { vertical: true, gap: isMobile ? 20 : 11, children: [_jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {

package/es/components/organism/Login/components/WidgetLayout/styled.d.ts

@@ -2,4 +2,7 @@
 export declare const Title: import("styled-components").StyledComponent<"div", any, {
     isMobile: boolean;
 }, never>;
+export declare const Label: import("styled-components").StyledComponent<"div", any, {
+    isMobile: boolean;
+}, never>;
 export declare const WidgetLayoutMain: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/organism/Login/components/WidgetLayout/styled.js

@@ -6,6 +6,12 @@ export const Title = styled.div `
   color: #005eb8;
   text-align: center;
 `;
+export const Label = styled.div `
+  font-size: ${props => (props.isMobile ? '16px' : '14px')};
+  font-weight: 500;
+  color: #005eb8;
+  text-align: center;
+`;
 export const WidgetLayoutMain = styled(Flex) `
   position: relative;
 

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

@@ -48,4 +48,5 @@ export declare const Text: import("styled-components").StyledComponent<"div", an
     color?: string | undefined;
     isBold?: boolean | undefined;
     isMobile?: boolean | undefined;
+    isCenter?: boolean | undefined;
 }, never>;

package/es/components/organism/Login/styled.js

@@ -126,4 +126,5 @@ export const Text = styled.div `
   color: ${props => (props.color ? props.color : ' #000000')};
   font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
   font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+  text-align: ${props => (props.isCenter ? 'center' : 'left')};
 `;

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

@@ -10,7 +10,7 @@ import { Spin, Tooltip, Icon, Button, EditableName, SelectAccount, QuillEditor,
 import Service from './Service';
 import { MESSAGE_TYPE, TICKET_CUSTOM_MESSAGE_KEY } from './constant';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, DrawerHeader, } from './styled';
-import { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, } from './util';
+import { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, uploadEmbeddedImages, } from './util';
 import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 import { isBoolean } from 'lodash';
 const initValueInput = {
@@ -49,6 +49,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         isError: false,
         message: '',
     });
+    const [embeddedImageError, setEmbeddedImageError] = useState('');
     const isUpdate = action === 'edit' && ticketId;
     const valueInputRef = useRef(valueInput);
     valueInputRef.current = valueInput;
@@ -94,20 +95,54 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
             setIsLoading(false);
         });
     };
-    const handleSubmit = () => {
+    const uploadImagesBeforeSubmit = async (message) => {
+        setIsLoadingUpload(true);
+        setEmbeddedImageError('');
+        try {
+            const uploadedMessage = await uploadEmbeddedImages(message, Service.tickets.callApi.uploadImg({
+                domain: domainUpload,
+                token,
+                userId,
+            }));
+            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);
+        }
+    };
+    const handleSubmit = async () => {
         const { title, ownerId, message } = valueInputRef.current;
         if (!title || !ownerId.length || !message) {
             setIsEmptyField(true);
         }
         else {
             if (!errFile.isError) {
-                const params = formatParams(valueInputRef.current);
-                const submitterEmail = listUsers?.find(user => user.userId === params.ownerId)?.email;
-                fetchCreateTicket({
-                    ...params,
-                    submitterId: Number(userId),
-                    submitterEmail: submitterEmail,
-                });
+                try {
+                    const uploadedMessage = await uploadImagesBeforeSubmit(message);
+                    const params = formatParams({
+                        ...valueInputRef.current,
+                        message: uploadedMessage,
+                    });
+                    const submitterEmail = listUsers?.find(user => user.userId === params.ownerId)?.email;
+                    fetchCreateTicket({
+                        ...params,
+                        submitterId: Number(userId),
+                        submitterEmail,
+                    });
+                }
+                catch (error) {
+                    // The upload error is shown below the editor.
+                }
             }
             // handleSendData(valueInput)
         }
@@ -231,6 +266,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         }
     }, [isUpdate, openDrawer]);
     const handleEditorChange = content => {
+        setEmbeddedImageError('');
         setTextValue(content);
         updateValueInput({ message: content });
         // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
@@ -244,32 +280,34 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
         }
         fetchUpdateFollwers(params);
     };
-    const handleUpdateComment = () => {
-        setIsLoading(true);
-        const params = {
-            followers: [],
-            submitterId: null,
-            ownerId: null,
-            submitterEmail: '',
-            properties: {},
-            message: '',
-            attachmentsZendesk: [],
-        };
-        if (valueInput?.followers?.length) {
-            params.followers = formatAccountId(valueInput?.followers);
-        }
-        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: userId,
+                ownerId: Number(currentValueInput?.ownerId[0]?.userId),
+                submitterEmail: listUsers?.find(user => +user.userId === +userId)?.email,
+                properties: {},
+                message: uploadedMessage,
+                attachmentsZendesk: currentValueInput.fileZendesk.map(file => file.token),
             };
+            if (currentValueInput?.followers?.length) {
+                params.followers = formatAccountId(currentValueInput.followers);
+            }
+            if (currentValueInput?.files?.length > 0) {
+                params.properties = {
+                    attachments: currentValueInput.files,
+                };
+            }
+            setIsLoading(true);
+            fetchUpdateComment(params);
+            handleUpdateFollowers(currentValueInput?.followers?.map((fol) => fol.userId));
+        }
+        catch (error) {
+            // The upload error is shown below the editor.
         }
-        params.submitterId = userId;
-        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));
     };
     const handleUploadFile = async (file) => {
         setIsLoading(true);
@@ -387,7 +425,8 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
                     isLoadingDetails ||
                     isLoadingDataSouce ||
                     isLoadingFollower ||
-                    isLoadingSelectedAccount, children: [_jsxs(DrawerHeader, { children: [_jsx(EditableName, { value: valueInput.title, onChange: handleOnchangeTitle, readonly: isUpdate, error: isEmptyField && (!valueInput.title || !valueInput.title.trim())
+                    isLoadingSelectedAccount ||
+                    isLoadingUpload, children: [_jsxs(DrawerHeader, { children: [_jsx(EditableName, { value: valueInput.title, onChange: handleOnchangeTitle, readonly: isUpdate, error: isEmptyField && (!valueInput.title || !valueInput.title.trim())
                                     ? "Title can't be empty"
                                     : '' }), _jsx("div", { id: "header-journey-right", className: "right-content", children: !isUpdate && (_jsx(Button, { disabled: isLoadingUpload, type: "primary", onClick: handleSubmit, children: "Save" })) })] }), _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsxs("div", { children: [_jsx(SelectAccount, { type: "default", initData: (valueInput?.ownerId || []).map((item) => item.userId), nameKey: "userName", userIdKey: "userId", users: listUsers, isViewMode: isUpdate || !isAllAccount || accountEdit !== 4, onChange: (_, users) => updateValueInput({ ownerId: users }), onlyOne: true }), isEmptyField && !valueInput?.ownerId?.length && (_jsx("div", { className: "error-message", children: "*This field can't be empty" }))] })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: [
                                                     ...accountManage,
@@ -404,7 +443,7 @@ const Content = ({ portalId, token, action, ticketId, listUsers, domainTicket, d
                                                                             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, message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] })] })] }));
 };
 export default Content;

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))) }) }))] })] }) })] }));

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

@@ -28,6 +28,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/TicketEditorV2/util.js

@@ -287,6 +287,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/utils/uploadEmbeddedImages.d.ts

@@ -0,0 +1,7 @@
+type TUploadEmbeddedImages = (params: {
+    files: File[];
+    mode: 'file';
+}) => Promise<unknown>;
+export declare const dataUrlToFile: (dataUrl: string, index: number) => File;
+export declare const uploadEmbeddedImages: (message: string, uploadService: TUploadEmbeddedImages) => Promise<string>;
+export {};

package/es/utils/uploadEmbeddedImages.js

@@ -0,0 +1,65 @@
+const DATA_IMAGE_PREFIX = /^\s*data:image\//i;
+const DATA_IMAGE_URL = /^data:(image\/[^;,]+);base64,(.+)$/i;
+const getUploadedImageUrl = (uploadedImage) => {
+    if (!uploadedImage || typeof uploadedImage !== 'object' || !('url' in uploadedImage)) {
+        return null;
+    }
+    const { url } = uploadedImage;
+    if (typeof url !== 'string' || !url.trim() || /^\s*data:/i.test(url)) {
+        return null;
+    }
+    try {
+        const parsedUrl = new URL(url.trim());
+        return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:'
+            ? parsedUrl.href
+            : null;
+    }
+    catch (error) {
+        return null;
+    }
+};
+export const dataUrlToFile = (dataUrl, index) => {
+    const matches = dataUrl.trim().match(DATA_IMAGE_URL);
+    if (!matches) {
+        throw new Error('INVALID_IMAGE_DATA');
+    }
+    const [, rawMimeType, base64] = matches;
+    const mimeType = rawMimeType.toLowerCase();
+    const padding = base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0;
+    const fileSize = (base64.length * 3) / 4 - padding;
+    if (fileSize > 10 * 1024 * 1024) {
+        throw new Error('FILE_TOO_LARGE');
+    }
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let byteIndex = 0; byteIndex < binary.length; byteIndex += 1) {
+        bytes[byteIndex] = binary.charCodeAt(byteIndex);
+    }
+    const extension = mimeType.split('/')[1].replace('jpeg', 'jpg');
+    return new File([bytes], `ticket-image-${index + 1}.${extension}`, { type: mimeType });
+};
+export const uploadEmbeddedImages = async (message, uploadService) => {
+    const container = document.createElement('div');
+    container.innerHTML = message;
+    const images = Array.from(container.querySelectorAll('img')).filter(image => DATA_IMAGE_PREFIX.test(image.getAttribute('src') || ''));
+    if (!images.length) {
+        return message;
+    }
+    const files = images.map((image, index) => dataUrlToFile(image.getAttribute('src') || '', index));
+    const response = await uploadService({ files, mode: 'file' });
+    const uploadedImages = response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)
+        ? response.data
+        : [];
+    const uploadedUrls = uploadedImages.map(getUploadedImageUrl);
+    if (uploadedUrls.length !== images.length || uploadedUrls.some(uploadedUrl => !uploadedUrl)) {
+        throw new Error('UPLOAD_FAILED');
+    }
+    images.forEach((image, index) => {
+        image.setAttribute('src', uploadedUrls[index]);
+    });
+    const hasEmbeddedImage = Array.from(container.querySelectorAll('img')).some(image => DATA_IMAGE_PREFIX.test(image.getAttribute('src') || ''));
+    if (hasEmbeddedImage) {
+        throw new Error('UPLOAD_FAILED');
+    }
+    return container.innerHTML;
+};

package/package.json

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