@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

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

@@ -10,10 +10,11 @@ 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
@@ -23,11 +24,19 @@ 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"]);
+    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"]);
+    // States
+    const [checkedState, setCheckedState] = useState({});
+    // Side Effects
+    useEffect(() => {
+        setCheckedState(prev => (isEqual(prev, checkedCategories) ? prev : checkedCategories));
+    }, [checkedCategories]);
+    // Ref
+    const timeoutAfterChange = useRef(null);
     // Handlers
     const handleClickMenu = e => {
         var _a;
@@ -35,9 +44,15 @@ export const CategoryListing = memo(props => {
             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) {
@@ -53,7 +68,7 @@ export const CategoryListing = memo(props => {
         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 +83,7 @@ export const CategoryListing = memo(props => {
             });
             return null;
         }
-    }, [checkedCategories]);
+    }, [checkedState]);
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;
@@ -97,16 +112,19 @@ export const CategoryListing = memo(props => {
     const menuItems = useMemo(() => {
         const menuItems = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, index) => {
-            if (index > 0)
-                menuItems.push({ type: 'divider' });
+            // 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) ? (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("div", { 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

@@ -4,37 +4,56 @@ import { Typography } from '../../../../atoms';
 import { THEME } 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;
+      }
+
+      [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 {
-        height: 100%;
+        .antsomi-menu-title-content,
+        .ant-menu-title-content {
+          height: 100%;
+        }
+      }
+
+      .antsomi-menu-submenu-title,
+      .ant-menu-submenu-title {
+        height: 30px !important;
       }
     }
-  }
 
-  .category-loading {
-    height: 100%;
-  }
+    .category-loading {
+      height: 100%;
+    }
 
-  .empty-wrapper {
-    width: 100%;
-    height: 100%;
-    border-right: 1px solid rgba(5, 5, 5, 0.06);
-    box-sizing: border-box;
+    .empty-wrapper {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
   }
 `;
 export const CustomLabelStyled = styled.div `
@@ -67,18 +86,17 @@ 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: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8}; */
     line-height: 1 !important;
     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: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8}; */
   height: 100%;
   display: flex;
   align-items: center;
@@ -86,7 +104,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/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;
 }
-type TState = {
+/**
+ * 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;
-    selectTemplateAction?: TSelectTemplateAction;
+    /**
+     * 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.
@@ -38,25 +55,25 @@ type TState = {
  *
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
  */
-export declare const useTemplateListing: (options: TemplateListingOptions) => {
+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 | undefined;
+    selectTemplateAction: TSelectTemplateAction | T | undefined;
+    previewTemplateCategories: TCategoryItem[];
     isLoadingCategoryList: boolean;
     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;
     onLoadMore: () => void;
     onSelectTemplate: (id: TThumbnailCardId, action: TSelectTemplateAction) => void;
-    onClosePreviewModal: () => void;
-    setState: import("react").Dispatch<import("react").SetStateAction<TState>>;
+    setState: import("react").Dispatch<import("react").SetStateAction<TState<T>>>;
 };
 export {};

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -2,15 +2,15 @@
 import { useCallback, useMemo, useState } from 'react';
 import { App } from 'antd';
 import { isEmpty } from 'lodash';
-import { useGetTemplateCategoryList, useGetObjectTemplateList, useBulkUpdateTemplate, useGetObjectTemplateDetail, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useBulkUpdateTemplate, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Constants
-import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS, } from '@antscorp/antsomi-ui/es/constants/templateListing';
+import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS } from '@antscorp/antsomi-ui/es/constants';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-import { getShuffleArray } from '@antscorp/antsomi-ui/es/utils';
+import { getShuffleArray, random } from '@antscorp/antsomi-ui/es/utils';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -35,8 +35,8 @@ import { getShuffleArray } from '@antscorp/antsomi-ui/es/utils';
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
  */
 export const useTemplateListing = (options) => {
-    const { serviceAuth, config, checkedCategoriesDefault } = options;
-    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10 } = config;
+    const { serviceAuth, config, checkedCategoriesDefault, templateListingSelector = '.template-listing', } = options;
+    const { objectType, categoryCodes, publicLevel, getListType, channel, limitListPerPage = 10, } = config;
     const { message } = App.useApp();
     // Locales
     const { t } = i18nInstance;
@@ -44,15 +44,18 @@ export const useTemplateListing = (options) => {
     const [state, setState] = useState({
         checkedCategories: {},
         openCategoryKeys: [],
+        mockTemplateItems: Array.from({ length: limitListPerPage }).map(() => undefined),
     });
-    const { checkedCategories, openCategoryKeys, selectedTemplateId, selectTemplateAction } = state;
+    const { checkedCategories, openCategoryKeys, mockTemplateItems, selectedTemplateId, selectTemplateAction, } = state;
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
         args: {
             auth: serviceAuth,
             params: {
                 objectTypes: [objectType],
                 categoryCodes,
+                channel,
                 publicLevel,
+                getListType,
             },
         },
     });
@@ -70,18 +73,28 @@ export const useTemplateListing = (options) => {
             return {};
         })
             .filter(filter => !isEmpty(filter));
+        if (channel) {
+            draftFilter.push({
+                CHANNEL: {
+                    matches_any: [channel],
+                },
+            });
+        }
         return draftFilter;
-    }, [checkedCategories]);
+    }, [checkedCategories, channel]);
+    // Variables
+    const getTemplateListParams = {
+        object_type: objectType,
+        public_level: publicLevel,
+        get_list_type: getListType,
+        limit: limitListPerPage,
+        filter: JSON.stringify(filter),
+    };
     // Queries
     const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
         args: {
             auth: serviceAuth,
-            params: {
-                object_type: objectType,
-                public_level: publicLevel,
-                limit: limitListPerPage,
-                filter: JSON.stringify(filter),
-            },
+            params: getTemplateListParams,
         },
     });
     const { mutateAsync: bulkUpdateTemplate } = useBulkUpdateTemplate({
@@ -94,21 +107,41 @@ export const useTemplateListing = (options) => {
             },
         },
     });
-    const { data: templateDetail, isLoading: isLoadingTemplateDetail } = useGetObjectTemplateDetail({
-        args: {
-            params: {
-                template_id: selectedTemplateId || '',
-                object_type: objectType,
-                public_level: publicLevel,
-            },
-            auth: serviceAuth,
-        },
-    });
+    // const {
+    //   data: templateDetail,
+    //   isLoading: isLoadingTemplateDetail = false,
+    //   refetch: refetchTemplateDetail,
+    // } = useGetObjectTemplateDetail({
+    //   args: {
+    //     params: {
+    //       template_id: selectedTemplateId || '',
+    //       object_type: objectType,
+    //       public_level: publicLevel,
+    //     },
+    //     auth: serviceAuth,
+    //   },
+    //   options: {
+    //     enabled: !!selectedTemplateId,
+    //   },
+    // });
     // Variables
     const isLoadingTemplateList = isFetching || isFetchingNextPage;
     // Memo
+    const flatTemplateItems = useDeepCompareMemo(() => {
+        const { pages } = infiniteObjectTemplate || {};
+        return pages === null || pages === void 0 ? void 0 : pages.flatMap(({ entities }) => entities.flatMap(entity => entity.toJson()));
+    }, [infiniteObjectTemplate]);
+    const templateDetail = useDeepCompareMemo(() => {
+        if (infiniteObjectTemplate && selectedTemplateId) {
+            return infiniteObjectTemplate.pages
+                .flatMap(({ entities }) => entities.flat())
+                .find(objectTemplate => +objectTemplate.id === +selectedTemplateId);
+        }
+        return undefined;
+    }, [infiniteObjectTemplate, selectedTemplateId]);
     const categoryItems = useDeepCompareMemo(() => {
-        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories
+            .map(category => {
             const { categoryCode, categoryId, categoryName, children, total } = category;
             const key = Array.isArray(children) && children.length
                 ? categoryCode
@@ -119,25 +152,53 @@ export const useTemplateListing = (options) => {
                 total,
                 children: recursiveCategory(children || [], categoryCode),
             };
+        })
+            .filter(category => {
+            // Filter category has no children and total template is 0
+            if (isEmpty(category.children) && !category.total) {
+                return false;
+            }
+            return true;
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => {
-        if (infiniteObjectTemplate) {
-            const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
-                id,
-                name,
-                thumbnail,
-            })));
-        }
-        return [];
-    }, [infiniteObjectTemplate]);
+    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || { id: random(10) }) || [], [flatTemplateItems, mockTemplateItems]);
     const similarTemplates = useMemo(() => {
         const maxSimilarTemplateLength = 4;
-        return (getShuffleArray(templateItems.filter(item => item.id !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
+        return (getShuffleArray(templateItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
     }, [templateItems, selectedTemplateId]);
+    const previewTemplateCategories = useDeepCompareMemo(() => {
+        if ((categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.length) && !!templateDetail) {
+            /**
+             * Filter category items has value of object template
+             * and filter child items has value of object template
+             */
+            return categoryItems
+                .filter(item => {
+                const values = templateDetail.model[item.key];
+                return typeof values === 'object' ? !isEmpty(values) : !!values;
+            })
+                .map(item => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.filter(childItem => {
+                        let values = templateDetail.model[item.key];
+                        values = Array.isArray(values) ? values : [values];
+                        return values.includes(+`${childItem.key}`.split(CATEGORY_SPLIT_KEY)[1]);
+                    }) }));
+            });
+        }
+        return [];
+    }, [categoryItems, templateDetail]);
     // Effects
+    /**
+     * This effect will check flatTemplateItems length from api is not equal mockTemplateItems length
+     * Then set MockTemplateItems length equal flatTemplateItems
+     */
+    useDeepCompareEffect(() => {
+        if (flatTemplateItems && (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length) !== (mockTemplateItems === null || mockTemplateItems === void 0 ? void 0 : mockTemplateItems.length)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length }) })));
+        }
+    }, [flatTemplateItems]);
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
     }, [categoryList]);
@@ -150,6 +211,16 @@ export const useTemplateListing = (options) => {
                 }, {}) || {} })));
         }
     }, [checkedCategoriesDefault]);
+    /**
+     * When publicLevel or getListType change
+     * Scroll template listing to top
+     */
+    useDeepCompareEffect(() => {
+        const templateListingEl = document.querySelector(templateListingSelector);
+        if (templateListingEl) {
+            templateListingEl.scrollTop = 0;
+        }
+    }, [getListType, publicLevel, objectType]);
     // Handles
     const onChangeCheckedCategories = (checkedCategories) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
@@ -169,16 +240,28 @@ export const useTemplateListing = (options) => {
         });
     }, [bulkUpdateTemplate, serviceAuth]);
     const onLoadMore = useCallback(() => {
+        var _a;
+        const { pages } = infiniteObjectTemplate || {};
+        const totalTemplateItems = ((_a = pages === null || pages === void 0 ? void 0 : pages[0].meta) === null || _a === void 0 ? void 0 : _a.totalItems) || 0;
+        const newMockItemLength = Math.min(totalTemplateItems, mockTemplateItems.length + limitListPerPage);
+        // If there is no more data, return
+        if (newMockItemLength > totalTemplateItems)
+            return;
         if (!isFetchingNextPage && hasNextPage) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: newMockItemLength }) })));
             fetchNextPage();
         }
-    }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    }, [
+        infiniteObjectTemplate,
+        mockTemplateItems.length,
+        limitListPerPage,
+        isFetchingNextPage,
+        hasNextPage,
+        fetchNextPage,
+    ]);
     const onSelectTemplate = useCallback((id, action) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: id, selectTemplateAction: action })));
     }, []);
-    const onClosePreviewModal = useCallback(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: undefined })));
-    }, []);
     return {
         // MapKeys
         categoryItems,
@@ -189,9 +272,10 @@ export const useTemplateListing = (options) => {
         templateDetail,
         checkedCategories,
         selectTemplateAction,
+        previewTemplateCategories,
         isLoadingCategoryList,
         isLoadingTemplateList,
-        isLoadingTemplateDetail,
+        isLoadingTemplateDetail: false,
         // Functions
         refetchCategoryList,
         refetchTemplateList,
@@ -200,7 +284,6 @@ export const useTemplateListing = (options) => {
         onRemoveObjectTemplate,
         onLoadMore,
         onSelectTemplate,
-        onClosePreviewModal,
         setState,
     };
 };