@antscorp/antsomi-ui 1.3.6-beta.44 → 1.3.6-beta.45

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/SelectAccount/context/SelectAccountContext.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import { createContext, useEffect, useMemo, useReducer, useRef } from 'react';
-import { uniq, get } from 'lodash';
+import { uniq, get, isArray } from 'lodash';
 // Reducer
 import { initialState, reducer } from './reducer';
 // Hooks
@@ -14,7 +14,7 @@ const initialContext = {
 };
 export const SelectAccountContext = createContext(initialContext);
 export const SelectAccountProvider = props => {
-    const { children, initData, ...rest } = props;
+    const { children, initData, users, ...rest } = props;
     const [state, dispatch] = useReducer(reducer, {
         ...initialState,
         ...rest,
@@ -23,7 +23,6 @@ export const SelectAccountProvider = props => {
     const changedRef = useRef(0);
     const formListRef = useRef(null);
     const contextValue = useMemo(() => ({ formListRef, state, dispatch }), [formListRef, state, dispatch]);
-    const { usersSelected, isInitDone, onChange } = state;
     // Fetch users
     const { isLoading, data } = useGetAbstractUsers({
         queryFn: state.serviceAccounts,
@@ -50,6 +49,15 @@ export const SelectAccountProvider = props => {
             dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: newData });
         }
     }, [data]);
+    useDeepCompareEffect(() => {
+        if (isArray(users)) {
+            dispatch({
+                type: 'UPDATE_USERS',
+                payload: users,
+            });
+            dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: users });
+        }
+    }, [users]);
     // Callback OnChange
     // useEffect(() => {
     //   if (isInitDone && typeof onChange === 'function' && changedRef.current <= 0) {

package/es/components/molecules/SelectAccount/hook/useGetAbstractUsers.d.ts

@@ -7,5 +7,5 @@ type Props = {
     enabled?: boolean;
     defaultDataSource?: any;
 };
-export declare const useGetAbstractUsers: ({ queryOptions, params, search, queryFn, enabled, }: Props) => import("@tanstack/react-query").UseQueryResult<unknown, unknown>;
+export declare const useGetAbstractUsers: ({ queryOptions, params, search, queryFn, }: Props) => import("@tanstack/react-query").UseQueryResult<unknown, unknown>;
 export {};

package/es/components/molecules/SelectAccount/hook/useGetAbstractUsers.js

@@ -1,12 +1,15 @@
 // Libraries
 import { useQuery } from '@tanstack/react-query';
-// Service
-import AbstractService from '@antscorp/antsomi-ui/es/services/Abstract';
+import { isFunction } from 'lodash';
 // Constant
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants';
-export const useGetAbstractUsers = ({ queryOptions = {}, params = {}, search = '', queryFn = AbstractService.lookupInfo.callApi.c_user_id, enabled = true, }) => useQuery({
+export const useGetAbstractUsers = ({ queryOptions = {}, params = {}, search = '', queryFn, }) => useQuery({
     queryKey: [QUERY_KEYS.GET_ABSTRACT_USERS, JSON.stringify({ params, search })],
     // initialData: defaultDataSource,
-    queryFn: () => queryFn({ params, search }),
+    queryFn: () => {
+        if (isFunction(queryFn)) {
+            return queryFn({ params, search });
+        }
+    },
     ...queryOptions,
 });

package/es/components/molecules/SelectAccount/type.d.ts

@@ -42,6 +42,7 @@ export type SelectAccountProps = {
     };
     nameKey: string;
     userIdKey: string;
+    users?: Record<string, any>[];
     addText?: string;
     applyText?: string;
     cancelText?: string;

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

@@ -1,4 +1,4 @@
-declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }: {
+declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, refetchComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }: {
     apiKey: any;
     domain: any;
     portalId: any;
@@ -11,7 +11,7 @@ declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, lis
     ticketDetails: any;
     listComment: any;
     userId: any;
-    fetchgetTicketComments: any;
+    refetchComments: any;
     isLoadingComment: any;
     isLoadingDetails: any;
     isLoadingDataSouce: any;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-unescaped-entities */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable no-multi-str */
 import { useMemo, useEffect, useRef, useState } from 'react';
@@ -24,7 +25,7 @@ const initValueInput = {
     isChanged: false,
     referenceUrl: window.location.href,
 };
-const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }) => {
+const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, refetchComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }) => {
     const [isOpenToast, setIsOpenToast] = useState({
         isOpen: false,
         status: 'error',
@@ -104,7 +105,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             .updateComment(params, domainTicket, token, config, userId, 'create-ticket-comment', ticketId)
             .then(res => {
             if (res.code === 200) {
-                fetchgetTicketComments(ticketId);
+                refetchComments();
                 updateValueInput({ message: '', files: [] });
                 setTextValue('');
                 // handleCloseDrawer();
@@ -173,14 +174,16 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             followers: [],
             submitterId: null,
             ownerId: null,
-            attachments: [],
             message: '',
+            properties: {
+                attachments: [],
+            },
         };
         if (valueInput?.followers?.length) {
             params.followers = formatAccountId(valueInput?.followers);
         }
         if (valueInput?.files?.length > 0) {
-            params.attachments = valueInput?.files?.map((file) => file.token);
+            params.properties.attachments = valueInput?.files?.map((file) => file.token);
         }
         params.submitterId = userId;
         params.ownerId = Number(valueInput?.ownerId[0]?.userId);
@@ -267,7 +270,8 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                                   alignleft aligncenter alignright alignjustify outdent indent |\
                                   numlist bullist checklist undo redo',
                                                         tinydrive_token_provider: `//${domain}/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
-                                                        skin: 'snow',
+                                                        // tinydrive_token_provider: `https://sandbox-app.cdp.asia/hub/thirdparty-services/v2.0/tinymce?portalId=${portalId}&token=${token}`,
+                                                        // skin: 'snow',
                                                         toolbar_mode: 'sliding',
                                                         content_css: false,
                                                         branding: false,

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

@@ -31,7 +31,7 @@ export const TicketEditorV2 = props => {
         config: propsConfig,
         userId,
     });
-    const { listComments, isFetchingComments } = useGetListComments({
+    const { listComments, isFetchingComments, refetchComments } = useGetListComments({
         domainTicket,
         token,
         config: propsConfig,
@@ -84,17 +84,6 @@ export const TicketEditorV2 = props => {
         })
             .catch(_err => { });
     };
-    const fetchgetTicketComments = ticketId => {
-        Service.tickets.callApi
-            .getListComment({}, domainTicket, token, config, userId, 'get-ticket-comments', ticketId)
-            .then(res => {
-            if (res.code === 200) {
-            }
-            else {
-            }
-        })
-            .finally(() => { });
-    };
     useEffect(() => {
         fetchAccountManage();
         fetchAccountPermission();
@@ -102,7 +91,7 @@ export const TicketEditorV2 = props => {
     const handleConfirmModal = () => {
         setIsOpenModal(false);
     };
-    return (_jsxs(TicketEditorWrapper, { children: [_jsx(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, config: config, ticketDetails: ticketDetails, listComment: listComments, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isFetchingComments, isLoadingDetails: isFetchingDetails, isLoadingDataSouce: isFetchingUsers, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
+    return (_jsxs(TicketEditorWrapper, { children: [_jsx(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, config: config, ticketDetails: ticketDetails, listComment: listComments, ticketId: ticketId, userId: userId, refetchComments: refetchComments, isLoadingComment: isFetchingComments, isLoadingDetails: isFetchingDetails, isLoadingDataSouce: isFetchingUsers, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
                                         height: '28px',
                                         background: '#1f5fac',
                                         color: '#fff',

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

@@ -9,5 +9,6 @@ type Props = {
 export declare const useGetListComments: ({ domainTicket, token, config, userId, ticketId, enabled, }: Props) => {
     listComments: any;
     isFetchingComments: boolean;
+    refetchComments: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<any, unknown>>;
 };
 export {};

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

@@ -6,7 +6,7 @@ const getListCommentServices = async (params, domain, token, config, userId, typ
     return res.data;
 };
 export const useGetListComments = ({ domainTicket, token, config, userId, ticketId, enabled, }) => {
-    const { data, isFetching } = useQuery({
+    const { data, isFetching, refetch } = 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),
@@ -14,5 +14,6 @@ export const useGetListComments = ({ domainTicket, token, config, userId, ticket
     return {
         listComments: data || [],
         isFetchingComments: isFetching,
+        refetchComments: refetch,
     };
 };

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

@@ -14,11 +14,11 @@ export const WrapperContent = styled.div `
   display: flex;
   gap: 20px;
   padding: 15px;
+  flex-wrap: wrap;
 `;
 export const WrapperLeftContent = styled.div `
-  width: 38%;
+  flex: 1;
   // border-right: 1px solid #e5e5e5;
-  overflow: auto;
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -32,8 +32,7 @@ export const WrapperLeftContent = styled.div `
   }
 `;
 export const WrapperRightContent = styled.div `
-  flex: 1;
-  overflow: auto;
+  flex: 2;
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -549,8 +548,8 @@ export const WrapperContentAvatar = styled.div `
 
   .comment-header {
     display: flex;
-    alignitems: flex-start;
-    justifycontent: space-between;
+    align-items: flex-start;
+    justify-content: space-between;
     position: relative;
   }
   .comment-time {
@@ -559,10 +558,10 @@ export const WrapperContentAvatar = styled.div `
     left: 50%;
     transform: translateX(-50%);
     width: fit-content;
-    fontsize: 12px;
+    font-size: 12px;
     color: #7f7f7f;
-    marginright: 5px;
-    whitespace: nowrap;
+    margin-right: 5px;
+    white-space: nowrap;
   }
   .comment-content {
     font-size: 12px;

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

@@ -78,7 +78,7 @@ export function callApiWithAuth(endpoint, method = 'GET', body, domain = '', con
         // .catch(err => serviceUnavailbale);
     }
     if (Object.prototype.hasOwnProperty.call(others, '_owner_id')) {
-        ownerId = safeParse(others['_owner_id'], '');
+        ownerId = safeParse(others._owner_id, '');
     }
     const isJourney = window.location.href.includes('marketing-hub/journeys');
     if (ownerId === 'all' && !isJourney) {

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

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