@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/template/Layout/constants/permission.js

@@ -0,0 +1,22 @@
+export const APP_ROLE_SCOPE = {
+    NONE: 1,
+    CREATED_BY_USER: 2,
+    MANAGEMENT_BY_USER: 3,
+    EVERYTHING: 4,
+};
+export const MARKETING_CHANNEL_CODE = {
+    ALL_CHANNEL: 'ALL_CHANNEL',
+    ORCHESTRATION: 'ORCHESTRATION',
+    CAMPAIGN: 'CAMPAIGN',
+};
+/**
+ * Check permissions for showing account selection
+ * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
+ */
+export const MENU_PERMISSIONS = {
+    BATCH_STREAM: 'BATCH_STREAM',
+    REALTIME_STREAM: 'REALTIME_STREAM',
+    DF_DATA_SOURCE: 'DF_DATA_SOURCE',
+    DESTINATION: 'DESTINATION',
+    REPORT: 'REPORT',
+};

package/es/components/template/Layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './stores';

package/es/components/template/Layout/index.js

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './stores';

package/es/components/template/Layout/stores/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { HeaderV2Props } from '../../../molecules';
+import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
+export interface HeaderStore extends Partial<HeaderV2Props> {
+}
+export interface LeftMenuStore {
+    onClickCreateDashboard?: React.MouseEventHandler<HTMLElement>;
+}
+export interface WorkspaceStore {
+}
+export interface LayoutStoreState {
+    header: HeaderStore;
+    leftMenu: LeftMenuStore;
+    workspace: WorkspaceStore;
+}
+interface LayoutStore {
+    state: LayoutStoreState;
+    setHeaderState: (state: DeepPartial<HeaderStore>) => void;
+    setLeftMenuState: (state: DeepPartial<LeftMenuStore>) => void;
+    setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
+    setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+    resetHeaderState: () => void;
+    resetLeftMenuState: () => void;
+    resetWorkspaceState: () => void;
+    resetLayoutState: () => void;
+}
+export declare const useLayoutStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LayoutStore>>;
+export {};

package/es/components/template/Layout/stores/index.js

@@ -0,0 +1,33 @@
+// Libraries
+import { create } from 'zustand';
+import { merge } from 'lodash';
+const initialState = {
+    header: {},
+    leftMenu: {},
+    workspace: {},
+};
+export const useLayoutStore = create(set => ({
+    state: initialState,
+    setLayoutState: newState => set(store => ({ state: merge(store.state, newState) })),
+    setHeaderState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
+    })),
+    setLeftMenuState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: Object.assign(Object.assign({}, store.state.leftMenu), newState) }),
+    })),
+    setWorkspaceState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
+    })),
+    resetHeaderState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { header: initialState.header }),
+    })),
+    resetLeftMenuState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: initialState.leftMenu }),
+    })),
+    resetWorkspaceState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: initialState.workspace }),
+    })),
+    resetLayoutState: () => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), initialState),
+    })),
+}));

package/es/components/template/Layout/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LayoutWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/template/Layout/styled.js

@@ -0,0 +1,79 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../atoms';
+// Constants
+import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const LayoutWrapper = styled(Flex) `
+  width: 100%;
+  background-color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_3};
+  position: relative;
+
+  .layout-header {
+    width: calc(100% - 71px);
+    position: absolute;
+    left: 71px;
+    z-index: 20;
+  }
+
+  .layout-body {
+    position: relative;
+    width: 100%;
+    z-index: 10;
+
+    &__menu {
+      flex-shrink: 0;
+    }
+
+    &__content {
+      position: relative;
+      flex: 1 1 0%;
+      border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+      background-color: white;
+      height: 100%;
+      padding: 15px;
+      padding-top: 0px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow: auto;
+      z-index: 1;
+    }
+  }
+`;
+export const ContentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  padding: ${HEADER_HEIGHT}px 15px 15px 0;
+  box-sizing: border-box;
+`;
+export const NotificationWrapper = styled.div `
+  flex-shrink: 0;
+  top: 0px;
+  position: sticky;
+  /* height: 50px; */
+  width: 100%;
+  /* margin-bottom: 6px; */
+  padding-top: 15px;
+  background-color: white;
+  z-index: 999;
+
+  > div {
+    margin-bottom: 6px;
+  }
+`;
+export const ChildrenWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+  /* height: calc(100% - 50px); */
+`;

package/es/components/template/Layout/utils/index.d.ts

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

package/es/components/template/Layout/utils/index.js

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

package/es/components/template/Layout/utils/permission.d.ts

@@ -0,0 +1,16 @@
+import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export declare const checkingRoleScope: (args: {
+    menuCode: string;
+    menuPermission: FeatureMenuPermission;
+    action?: string;
+    scope?: number;
+    isExactly?: boolean;
+}) => boolean;

package/es/components/template/Layout/utils/permission.js

@@ -0,0 +1,48 @@
+import { MENU_CODE, APP_ROLE_SCOPE } from '../constants';
+const EDIT_ROLE = new Set(['CREATE', 'UPDATE', 'DELETE']);
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export const checkingRoleScope = (args) => {
+    const { menuCode, menuPermission, scope = APP_ROLE_SCOPE.NONE, action = 'NONE', isExactly = false, } = args;
+    if (![
+        MENU_CODE.JOURNEY,
+        MENU_CODE.LABELS,
+        MENU_CODE.DASHBOARD_OVERVIEW,
+        MENU_CODE.MEDIA_TEMPLATE,
+        MENU_CODE.EMAIL_TEMPLATE,
+        MENU_CODE.SEGMENT,
+        MENU_CODE.DESTINATIONS_HUB,
+        MENU_CODE.BUSINESS_OBJECT,
+        MENU_CODE.DATA_OBJECT,
+        MENU_CODE.DATA_VIEW,
+    ].includes(menuCode))
+        return false;
+    const menuRole = menuPermission;
+    let isOK = false;
+    // role Create/Update/Delete is similar current define, only has view and edit(create/delete)
+    const { selected_view = 1, selected_edit = 1 } = menuRole;
+    if (isExactly) {
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) === Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) === Number(scope);
+        }
+    }
+    else {
+        // eslint-disable-next-line no-lonely-if
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) >= Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) >= Number(scope);
+        }
+    }
+    return isOK;
+};

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

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

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -10,34 +10,45 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isEmpty, isNumber } from 'lodash';
 import Icon from '@antscorp/icons';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import isEqual from 'react-fast-compare';
 // Styled
 import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './styled';
 // Components
-import { Checkbox, Spin } from '../../../../atoms';
+import { Checkbox, Scrollbars, Spin } from '../../../../atoms';
 import { Menu } from '../../../../organism';
 import { Empty } from '../Empty';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 // Constants
-import { CATEGORY_LISTING_WITH } from '../../constants';
+import { CATEGORY_DEBOUNCE, CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
     var _a;
-    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "onMenuChange"]);
-    // Handlers
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, header, footer, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "header", "footer", "onMenuChange"]);
+    const [checkedState, setCheckedState] = useState({});
+    useEffect(() => {
+        setCheckedState(prev => (isEqual(prev, checkedCategories) ? prev : checkedCategories));
+    }, [checkedCategories]);
+    const timeoutAfterChange = useRef(null);
     const handleClickMenu = e => {
         var _a;
         try {
             const { key, keyPath } = e;
             const parentId = keyPath === null || keyPath === void 0 ? void 0 : keyPath[1];
             if (parentId) {
-                const newCheckedCategories = ((_a = checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key))
-                    ? Object.assign(Object.assign({}, checkedCategories), { [parentId]: checkedCategories[parentId].filter(item => item !== key) }) : Object.assign(Object.assign({}, checkedCategories), { [parentId]: [...((checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) || []), key] });
-                onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                const newCheckedCategories = ((_a = checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key))
+                    ? Object.assign(Object.assign({}, checkedState), { [parentId]: checkedState[parentId].filter(item => item !== key) }) : Object.assign(Object.assign({}, checkedState), { [parentId]: [...((checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) || []), key] });
+                if (timeoutAfterChange) {
+                    setCheckedState(newCheckedCategories);
+                    clearTimeout(timeoutAfterChange.current);
+                }
+                timeoutAfterChange.current = setTimeout(() => {
+                    onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                }, debounceChangeMenu);
             }
         }
         catch (error) {
@@ -48,12 +59,11 @@ export const CategoryListing = memo(props => {
             });
         }
     };
-    // Render components
     const renderCustomLabel = useCallback((args) => {
         var _a;
         try {
             const { key, parentId, label, total } = args;
-            const isChecked = !!(!!parentId && ((_a = checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key)));
+            const isChecked = !!(!!parentId && ((_a = checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key)));
             return (React.createElement(CustomLabelStyled, { onClick: e => e.preventDefault() },
                 React.createElement("div", { className: "label" },
                     React.createElement(Checkbox, { checked: isChecked },
@@ -68,7 +78,7 @@ export const CategoryListing = memo(props => {
             });
             return null;
         }
-    }, [checkedCategories]);
+    }, [checkedState]);
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;
@@ -93,20 +103,22 @@ export const CategoryListing = memo(props => {
             return undefined;
         }
     }, [renderCustomLabel]);
-    // Memo
     const menuItems = useMemo(() => {
         const menuItems = [];
-        items === null || items === void 0 ? void 0 : items.forEach((item, index) => {
-            if (index > 0)
-                menuItems.push({ type: 'divider' });
+        items === null || items === void 0 ? void 0 : items.forEach((item, _) => {
+            // if (index > 0) menuItems.push({ type: 'divider' });
             const menuItem = getItem(Object.assign(Object.assign({}, item), { parentId: null }), true);
             if (menuItem)
                 menuItems.push(menuItem);
         });
         return menuItems;
     }, [getItem, items]);
-    return show ? (React.createElement(MenuWrapper, { "$width": width },
-        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
-            React.createElement(Empty, null))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
+    return (show && !isEmpty(menuItems)) || header || loading ? (React.createElement(MenuWrapper, { "$width": width },
+        header,
+        React.createElement(Scrollbars, { className: "category__listing" },
+            React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },
+                isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
+                    React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps))),
+                footer)))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -1,40 +1,64 @@
-var _a, _b;
+var _a;
 import styled from 'styled-components';
 import { Typography } from '../../../../atoms';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 export const MenuWrapper = styled.div `
+  position: relative;
   flex-shrink: 0;
   width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
   overflow-x: hidden;
   border-right: 1px solid rgba(5, 5, 5, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 
-  .antsomi-menu {
+  .category__listing {
+    position: relative;
     height: 100%;
+    overflow-y: auto;
 
-    [role='menuitem'] {
-      width: 100%;
-      border-radius: 0;
-      height: 30px;
-      padding: 0 10px !important;
-      margin-left: 0 !important;
-      margin-right: 0 !important;
+    .antsomi-menu,
+    .ant-menu {
+      [role='menu'] {
+        background-color: white !important;
+      }
 
-      .antsomi-menu-title-content {
-        height: 100%;
+      [role='menuitem'] {
+        width: 100%;
+        border-radius: 0;
+        height: 30px;
+        padding: 0 10px !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+
+        .antsomi-menu-title-content,
+        .ant-menu-title-content {
+          height: 100%;
+        }
+      }
+
+      .antsomi-menu-submenu-title,
+      .ant-menu-submenu-title {
+        height: 30px !important;
+      }
+
+      .antsomi-menu-submenu-title {
+        margin-top: 10px;
+        margin-bottom: 10px;
       }
     }
-  }
 
-  .category-loading {
-    height: 100%;
-  }
+    .category-loading {
+      height: 100%;
+    }
 
-  .empty-wrapper {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    .empty-wrapper {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
   }
 `;
 export const CustomLabelStyled = styled.div `
@@ -67,18 +91,18 @@ export const CustomLabelStyled = styled.div `
 
   .total {
     flex-shrink: 0;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 400;
-    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
     line-height: 1 !important;
+    font-size: 11px;
     height: fit-content;
   }
 `;
-// TODO: tách class dùng chung
 export const CustomRootLabel = styled.div `
-  font-size: 11px;
+  font-size: 13px !important;
   font-weight: 400;
-  color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  /* color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8}; */
   height: 100%;
   display: flex;
   align-items: center;
@@ -86,7 +110,7 @@ export const CustomRootLabel = styled.div `
 `;
 export const TextWrapper = styled(Text) `
   max-width: 100%;
-  color: inherit;
+  color: inherit !important;
   height: fit-content;
-  font-size: inherit;
+  font-size: inherit !important;
 `;

package/es/components/template/TemplateListing/components/Empty/index.js

@@ -1,5 +1,6 @@
 // Libraries
 import React from 'react';
+import { isString } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -7,12 +8,8 @@ import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyIcon, EmptyWrapper } from './styled';
 const { Text } = Typography;
 export const Empty = props => {
-    const { icon, description } = props;
+    const { icon = React.createElement(Icon, { type: "icon-ants-media" }), description = 'No data' } = props;
     return (React.createElement(EmptyWrapper, null,
-        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, icon),
+        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon),
         React.createElement(Text, { className: "animate__animated animate__fadeInUp" }, description)));
 };
-Empty.defaultProps = {
-    icon: React.createElement(Icon, { type: "icon-ants-media" }),
-    description: 'No data',
-};

package/es/components/template/TemplateListing/constants/defaultProps.d.ts

@@ -4,6 +4,7 @@ import { EmptyProps } from '../types/Empty';
 export declare const CATEGORY_LISTING_WITH = 220;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
 export declare const LISTING_GAP_DEFAULT = 30;
+export declare const CATEGORY_DEBOUNCE = 400;
 export declare const TEMPLATE_ITEM_DEFAULT: Omit<ThumbnailCardProps, 'id'>;
 export declare const BLANK_TEMPLATE_DEFAULT: BlankTemplateProps;
 export declare const CATEGORY_LISTING_DEFAULT: Omit<CategoryListingProps, 'items'>;

package/es/components/template/TemplateListing/constants/defaultProps.js

@@ -2,6 +2,7 @@
 export const CATEGORY_LISTING_WITH = 220;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const LISTING_GAP_DEFAULT = 30;
+export const CATEGORY_DEBOUNCE = 400;
 /* Default props */
 export const TEMPLATE_ITEM_DEFAULT = {
     removable: true,

package/es/components/template/TemplateListing/hooks/useTemplateListing.d.ts

@@ -8,12 +8,29 @@ interface TemplateListingOptions {
     serviceAuth: TServiceAuth;
     config: TTemplateListingConfig;
     checkedCategoriesDefault?: TCheckedCategories;
+    templateListingSelector?: string;
 }
+/**
+ * Represents the state of a system with generic data types.
+ * @template T - The type of data contained in the state.
+ */
 type TState<T> = {
+    /** An object representing the checked categories. */
     checkedCategories: TCheckedCategories;
+    /** An array containing keys of open categories. */
     openCategoryKeys: string[];
+    /** An optional ID representing the selected template. */
     selectedTemplateId?: TThumbnailCardId;
+    /**
+     * An optional action related to selecting a template.
+     * This can be of type `TSelectTemplateAction` or any other custom type `T`.
+     */
     selectTemplateAction?: TSelectTemplateAction | T;
+    /**
+     * Mock template items are intended to show fake data in the UI first.
+     * After the template items are loaded, they will be mapped to these MockItems. The purpose is to increase user experience
+     */
+    mockTemplateItems: (TTemplateItem | undefined)[];
 };
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -40,10 +57,10 @@ type TState<T> = {
  */
 export declare const useTemplateListing: <T = undefined>(options: TemplateListingOptions) => {
     categoryItems: TCategoryItem[];
-    templateItems: TTemplateItem[];
+    templateItems: (TTemplateItem | undefined)[];
     openCategoryKeys: string[];
-    similarTemplates: TTemplateItem[];
-    templateDetail: import("../../../../models/ObjectTemplate").ObjectTemplate | undefined;
+    similarTemplates: (TTemplateItem | undefined)[];
+    templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
     selectTemplateAction: TSelectTemplateAction | T | undefined;
     previewTemplateCategories: TCategoryItem[];
@@ -51,7 +68,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     isLoadingTemplateList: boolean;
     isLoadingTemplateDetail: boolean;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
     onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
     onChangeOpenCategoryKeys: (openKeys: string[]) => void;
     onRemoveObjectTemplate: (id: TThumbnailCardId) => void;