@antscorp/antsomi-ui 1.3.6-beta.3 → 1.3.6-beta.30

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { WrapperAvatar, WrapperContentAvatar, WrapperLinkItemFiles, WrapperModalHeaderImg, WrapperModalImg, } from '../styled';
+import { Icon, Spin, Tooltip } from '@antscorp/antsomi-ui/es/components';
+import { convertDateToTimestamp } from '../util';
+const IMAGE_EXTENDS = ['.png', '.jpg', '.jpeg'];
+const MessageComponent = ({ toUser, fromUser, followers, attachments, message, date, timeZone, }) => {
+    const [isExpand, setIsExpand] = useState(false);
+    const refMesage = useRef(null);
+    const [modalImg, setModalImg] = useState({
+        isOpen: false,
+        src: '',
+    });
+    useEffect(() => {
+        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 = [];
+        const arrFiles = [];
+        attachments.forEach(file => {
+            if (isImageUrl(file?.content_url)) {
+                arrImgs.push(file);
+            }
+            else {
+                arrFiles.push(file);
+            }
+        });
+        return [arrImgs, arrFiles];
+    }, [attachments]);
+    const renderImage = file => (_jsx("div", { className: "image-item", children: _jsx("img", { src: file?.content_url, alt: "attachment" }) }, file?.content_url));
+    return (_jsxs(WrapperContentAvatar, { children: [_jsxs("div", { className: "comment-header", children: [_jsxs(WrapperAvatar, { children: [_jsx("img", { className: "avatar", alt: "avatar", src: fromUser?.photo }), _jsxs("div", { className: "user-info", children: [_jsx("span", { className: "user-info__name", children: fromUser?.name }), _jsxs("div", { className: "user-info__desc", children: [_jsxs("div", { className: "user-info__to-user", children: [_jsxs("span", { children: ["To: ", toUser?.name] }), !isExpand && (_jsx(Icon, { className: "user-info__expand-icon", type: "icon-ants-caret-down1", onClick: () => setIsExpand(true) }))] }), isExpand ? (_jsxs("div", { className: "user-info__followers", children: [_jsx("div", { className: "user-info__followers__name", children: _jsxs("span", { className: "user-info__to-user", children: ["Follower(s):", ` `, followers?.map(follower => follower?.name).join(', ')] }) }), _jsx(Icon, { className: "user-info__expand-icon open", type: "icon-ants-caret-down1", onClick: () => setIsExpand(false) })] })) : null] })] })] }), _jsx("div", { className: "comment-time", children: convertDateToTimestamp(date, timeZone) })] }), _jsxs("div", { className: "comment-content", children: [_jsx("div", { dangerouslySetInnerHTML: { __html: message }, ref: refMesage }), _jsxs(WrapperLinkItemFiles, { className: "no-border", children: [images.map(renderImage), files?.map(file => (_jsxs("div", { className: "file-item rounded", 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("a", { href: file?.content_url, download: true, children: _jsx(Icon, { className: "download-btn", type: "icon-ants-file-download" }) })] }, file?.content_url)))] })] }), _jsx(WrapperModalImg, { open: modalImg.isOpen, className: "image-modal", onClose: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsxs("div", { className: "modal-img-content", children: [_jsx(Spin, { spinning: !modalImg?.src, children: _jsx(WrapperModalHeaderImg, { style: { cursor: 'pointer' }, onClick: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsx(Icon, { type: "close", style: {
+                                        height: '20px',
+                                        width: '20px',
+                                        color: '#005eb8',
+                                        background: '#fff',
+                                        fontSize: '20px',
+                                    } }) }) }), _jsx("div", { style: {
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                justifyContent: 'center',
+                                width: '100%',
+                                height: 'calc(100% - 20px)',
+                                overflow: 'auto',
+                            }, children: _jsx("img", { src: modalImg?.src, style: { width: '100%', objectFit: 'cover' }, alt: "modal" }) })] }) })] }));
+};
+export default MessageComponent;

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

@@ -0,0 +1,2 @@
+declare function AddTicketIcon(props: any): import("react/jsx-runtime").JSX.Element;
+export default AddTicketIcon;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function AddTicketIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", ...props, children: _jsxs("g", { id: "CTA_Button", "data-name": "CTA Button", transform: "translate(-1 -3.063)", children: [_jsx("rect", { id: "Rounded_Rectangle_7_copy", "data-name": "Rounded Rectangle 7 copy", width: "12", height: "12", rx: "6", transform: "translate(1 3.063)", fill: "#1f5fac" }), _jsx("path", { id: "Union_141", "data-name": "Union 141", d: "M-1352,252.062v-2h-2a1,1,0,0,1-1-1,1,1,0,0,1,1-1h2v-2a1,1,0,0,1,1-1,1,1,0,0,1,1,1v2h2a1,1,0,0,1,1,1,1,1,0,0,1-1,1h-2v2a1,1,0,0,1-1,1A1,1,0,0,1-1352,252.062Z", transform: "translate(1358 -240)", fill: "#fff" })] }) }));
+}
+export default AddTicketIcon;

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

@@ -0,0 +1,2 @@
+declare function TicketIcon(props: any): import("react/jsx-runtime").JSX.Element;
+export default TicketIcon;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function TicketIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "19.996", height: "16.001", viewBox: "0 0 19.996 16.001", ...props, children: _jsx("path", { id: "Subtraction_26", "data-name": "Subtraction 26", d: "M20466,11869h-16a2,2,0,0,1-2-2v-3.052a2.566,2.566,0,0,0,.5.047,2.5,2.5,0,1,0,0-5,2.675,2.675,0,0,0-.5.051V11855a2,2,0,0,1,2-2h16a2,2,0,0,1,2,2v12A2,2,0,0,1,20466,11869Zm-12-3h0v2h1v-2Zm7-1.5a1.165,1.165,0,0,0-1.178,1.177,1.094,1.094,0,0,0,.344.807,1.14,1.14,0,0,0,.834.339,1.154,1.154,0,0,0,.836-.339,1.119,1.119,0,0,0,.34-.807,1.159,1.159,0,0,0-1.176-1.177Zm-7-2.5h0v2h1v-2Zm7-4.664a1.663,1.663,0,0,1,.918.221,1.148,1.148,0,0,1,.479.576,1.664,1.664,0,0,1,.107.709,1.343,1.343,0,0,1-.221.657,4.689,4.689,0,0,1-.6.652l-.238.221-.092.084-.1.091c-.08.072-.16.146-.24.221a2.629,2.629,0,0,0-.559.725,2.024,2.024,0,0,0-.277,1v.833h1.7v-.093c0-.234,0-.42.012-.565a1.8,1.8,0,0,1,.055-.38.7.7,0,0,1,.125-.246,2.516,2.516,0,0,1,.461-.617l.006,0c.172-.162.377-.356.6-.57a4.367,4.367,0,0,0,.658-.832,2.114,2.114,0,0,0,.385-1,3,3,0,0,0-.072-1.027,3.647,3.647,0,0,0-.312-.848,2.951,2.951,0,0,0-1.064-.986,3.435,3.435,0,0,0-1.725-.411,3.312,3.312,0,0,0-1.465.318,3.121,3.121,0,0,0-1.078.848,3.244,3.244,0,0,0-.627,1.135l1.5.652a3.392,3.392,0,0,1,.3-.642,1.518,1.518,0,0,1,.533-.519A1.558,1.558,0,0,1,20461,11857.333Zm-7,.663h0v2h1v-2Zm0-4h0v2h1v-2Z", transform: "translate(-20448.002 -11852.998)", fill: "#666" }) }));
+}
+export default TicketIcon;

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

@@ -0,0 +1,17 @@
+export declare const TICKET_CUSTOM_MESSAGE_KEY = "TICKET_CUSTOM_MESSAGE_KEY";
+export declare const MESSAGE_TYPE: {
+    TICKET_CREATE_STATUS: string;
+};
+export declare const NOTIFICATION_TYPES: {
+    email: {
+        label: string;
+        value: string;
+    };
+    app_push: {
+        label: string;
+        value: string;
+    };
+};
+export declare const PORTAL_KEYS: {
+    USER_LANGUAGE: string;
+};

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

@@ -0,0 +1,17 @@
+export const TICKET_CUSTOM_MESSAGE_KEY = 'TICKET_CUSTOM_MESSAGE_KEY';
+export const MESSAGE_TYPE = {
+    TICKET_CREATE_STATUS: 'TICKET_CREATE_STATUS',
+};
+export const NOTIFICATION_TYPES = {
+    email: {
+        label: 'Send mail',
+        value: 'email',
+    },
+    app_push: {
+        label: 'Push notification',
+        value: 'app_push',
+    },
+};
+export const PORTAL_KEYS = {
+    USER_LANGUAGE: 'user_language',
+};

package/es/components/organism/TicketEditorV2/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './queryKeys';

package/es/components/organism/TicketEditorV2/constants/index.js

@@ -0,0 +1 @@
+export * from './queryKeys';

package/es/components/organism/TicketEditorV2/constants/queryKeys.d.ts

@@ -0,0 +1,5 @@
+export declare const QUERY_KEYS: {
+    GET_TICKET_DETAIL: string;
+    GET_TICKET_COMMENT: string;
+    GET_LIST_USER: string;
+};

package/es/components/organism/TicketEditorV2/constants/queryKeys.js

@@ -0,0 +1,5 @@
+export const QUERY_KEYS = {
+    GET_TICKET_DETAIL: 'get_ticket_detail',
+    GET_TICKET_COMMENT: 'get_ticket_comment',
+    GET_LIST_USER: 'get_list_user',
+};

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

@@ -0,0 +1 @@
+export { TicketEditorV2 } from './TicketEditorV2';

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

@@ -0,0 +1 @@
+export { TicketEditorV2 } from './TicketEditorV2';

package/es/components/organism/TicketEditorV2/queries/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useGetDetailTicket';
+export * from './useGetListComments';
+export * from './useGetListUser';

package/es/components/organism/TicketEditorV2/queries/index.js

@@ -0,0 +1,3 @@
+export * from './useGetDetailTicket';
+export * from './useGetListComments';
+export * from './useGetListUser';

package/es/components/organism/TicketEditorV2/queries/useGetDetailTicket.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    domainTicket: string;
+    token: string;
+    config: any;
+    userId: string;
+    ticketId: string;
+};
+export declare const useGetDetailTicket: ({ domainTicket, token, config, userId, ticketId }: Props) => {
+    ticketDetails: any;
+    isFetching: boolean;
+};
+export {};

package/es/components/organism/TicketEditorV2/queries/useGetDetailTicket.js

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../constants/queryKeys';
+import Service from '../Service';
+export const useGetDetailTicket = ({ domainTicket, token, config, userId, ticketId }) => {
+    const { data, isFetching } = useQuery({
+        queryKey: [QUERY_KEYS.GET_TICKET_DETAIL, domainTicket, token, config, userId, ticketId],
+        enabled: !!ticketId,
+        queryFn: () => Service.tickets.callApi.getDetailsTicket({}, domainTicket, token, config, userId, ticketId),
+    });
+    return {
+        ticketDetails: data?.data?.ticket || [],
+        isFetching,
+    };
+};

package/es/components/organism/TicketEditorV2/queries/useGetListComments.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    domainTicket: string;
+    token: string;
+    config: any;
+    userId: string;
+    ticketId: string;
+    enabled?: boolean;
+};
+export declare const useGetListComments: ({ domainTicket, token, config, userId, ticketId, enabled, }: Props) => {
+    listComments: any;
+    isFetchingComments: boolean;
+};
+export {};

package/es/components/organism/TicketEditorV2/queries/useGetListComments.js

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../constants/queryKeys';
+import Service from '../Service';
+const getListCommentServices = async (params, domain, token, config, userId, type, ticketId) => {
+    const res = await Service.tickets.callApi.getListComment(params, domain, token, config, userId, type, ticketId);
+    return res.data;
+};
+export const useGetListComments = ({ domainTicket, token, config, userId, ticketId, enabled, }) => {
+    const { data, isFetching } = useQuery({
+        queryKey: [QUERY_KEYS.GET_TICKET_COMMENT, domainTicket, token, config, userId, ticketId],
+        enabled: !!ticketId || enabled,
+        queryFn: () => getListCommentServices({}, domainTicket, token, config, userId, 'get-ticket-comments', ticketId),
+    });
+    return {
+        listComments: data || [],
+        isFetchingComments: isFetching,
+    };
+};

package/es/components/organism/TicketEditorV2/queries/useGetListUser.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    domainAccount: string;
+    token: string;
+    config: any;
+    userId: string;
+};
+export declare const useGetListUser: ({ domainAccount, token, config, userId }: Props) => {
+    listUsers: any;
+    isFetchingUsers: boolean;
+};
+export {};

package/es/components/organism/TicketEditorV2/queries/useGetListUser.js

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../constants/queryKeys';
+import Service from '../Service';
+const getListUserServices = async (params = {}, domain, token, config, userId) => {
+    const res = await Service.lookupInfo.callApi.c_user_id(params, domain, token, config, userId);
+    return res.data;
+};
+export const useGetListUser = ({ domainAccount, token, config, userId }) => {
+    const { data, isFetching } = useQuery([QUERY_KEYS.GET_LIST_USER, domainAccount, token, config, userId], () => getListUserServices({}, domainAccount, token, config, userId));
+    return {
+        listUsers: data || [],
+        isFetchingUsers: isFetching,
+    };
+};

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

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+export declare const WrapperHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLeftContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperRightContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperTextEdit: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const WrapperTextInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const WrapperContentInput: import("styled-components").StyledComponent<"div", any, {
+    flexStart?: boolean | undefined;
+}, never>;
+export declare const WrapperLable: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const WrapperDropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperToggleDropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperDropdownMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperDropdownItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLabelDropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MaterialChip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DivLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperListAccount: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleName: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const WrapperNotication: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperEditor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperListAccountSearch: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperItemAccountSearch: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperFooterPopup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperIconEditor: import("styled-components").StyledComponent<"div", any, {
+    borderTop?: boolean | undefined;
+}, never>;
+export declare const WrapperInputFile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLinkItemFiles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperSnackbar: import("styled-components").StyledComponent<"div", any, {
+    background?: string | undefined;
+}, never>;
+export declare const WrapperModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperAvatar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperContentAvatar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperMessageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLoading: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+    height?: string | undefined;
+}, never>;
+export declare const WrapperBtnAddAcc: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const WrapperModalImg: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const WrapperModalHeaderImg: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TicketButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const WrapperCheckBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").CheckboxProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
+    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd/es/checkbox").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
+}, any, {}, never>;
+export declare const WrapperMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TicketEditorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;