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

package/es/models/ObjectTemplate.js

@@ -0,0 +1,80 @@
+// Libraries
+import dayjs from 'dayjs';
+// Models
+import { Model } from './model';
+// Constants
+import { LAYOUT_TEMPLATE } from '../constants/templateListing';
+import { DATE_TIME_FORMAT } from '../constants';
+export class ObjectTemplate extends Model {
+    get id() {
+        return this.model.template_id || '';
+    }
+    get name() {
+        return this.model.template_name || '';
+    }
+    get type() {
+        return +(this.model.template_type || '');
+    }
+    get typeLabel() {
+        const templateType = Object.values(LAYOUT_TEMPLATE).find(({ id }) => id === this.type);
+        return templateType ? templateType.label : '';
+    }
+    get description() {
+        return this.model.description || '';
+    }
+    get templateSettings() {
+        return this.model.template_setting || {};
+    }
+    get settings() {
+        return this.model.properties || {};
+    }
+    get status() {
+        return this.model.status || '';
+    }
+    get userId() {
+        return this.model.c_user_id || '';
+    }
+    get createdAt() {
+        return dayjs(this.model.ctime).isValid()
+            ? dayjs(this.model.ctime, DATE_TIME_FORMAT.DATE_TIME)
+            : '-';
+    }
+    get updatedAt() {
+        return dayjs(this.model.utime).isValid()
+            ? dayjs(this.model.utime, DATE_TIME_FORMAT.DATE_TIME)
+            : '-';
+    }
+    get objectiveTypes() {
+        return this.model.goal || [];
+    }
+    get networkId() {
+        return this.model.network_id;
+    }
+    get thumbnail() {
+        return this.model.thumbnail || '';
+    }
+    get objectType() {
+        return this.model.object_type;
+    }
+    get config() {
+        return this.model.config;
+    }
+    get configObject() {
+        return this.model.config_object;
+    }
+    get seasonality() {
+        return this.model.seasonality;
+    }
+    get industry() {
+        return this.model.industry;
+    }
+    get lifecycleStage() {
+        return this.model.lifecycle_stage;
+    }
+    get journeyType() {
+        return this.model.journey_type;
+    }
+    get goal() {
+        return this.model.goal;
+    }
+}

package/es/models/TemplateCategory.d.ts

@@ -0,0 +1,13 @@
+import { TObjectType } from '../types/templateListing';
+export type TTemplateCategory = {};
+export interface TemplateCategory {
+    categoryId: number;
+    categoryCode: string;
+    parentCategoryCode: string;
+    categoryName: string;
+    description: string;
+    objectTypes: TObjectType[];
+    filterOperator?: string;
+    children: TemplateCategory[];
+    total?: number;
+}

package/es/models/TemplateCategory.js

@@ -0,0 +1,28 @@
+export {};
+// export class TemplateCategory extends Model<TTemplateCategory> {
+//   get id() {
+//     return this.model.media_id || '';
+//   }
+//   get name() {
+//     return this.model.name || '';
+//   }
+//   get url() {
+//     return this.model.properties?.url || '';
+//   }
+//   get thumbnail() {
+//     return this.model.properties?.thumbnail || '';
+//   }
+//   get createdAt() {
+//     return moment(this.model.ctime, true).isValid() ? moment(this.model.ctime) : null;
+//   }
+//   get size() {
+//     return +(this.model.properties?.size || 0);
+//   }
+//   get sizeString() {
+//     const { properties } = this.model;
+//     const dimensionsFile = properties?.dimensions_file;
+//     return `${Math.round(10 * ((properties?.size || 0) / 1024)) / 10} KB, ${
+//       dimensionsFile?.width
+//     } x ${dimensionsFile?.height} `;
+//   }
+// }

package/es/queries/TemplateListing/index.d.ts

@@ -0,0 +1,47 @@
+import { UseInfiniteQueryOptions, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
+import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+import { TBulkUpdateObjectTemplateArgs, TGetCategoryListArgs, TGetObjectTemplateDetailArgs, TGetObjectTemplateListArgs, TUpdateObjectTemplateArgs, TValidateObjectTemplateNameArgs } from '@antscorp/antsomi-ui/es/services/TemplateListing';
+import { ResponseCheckNameExist, ResponseListing } from '../../types';
+import { ObjectTemplate } from '../../models/ObjectTemplate';
+import { TCreateObjectTemplateArgs } from '../../services/TemplateListing';
+export type TGetTemplateCategoryList = {
+    args: TGetCategoryListArgs;
+    options?: UseQueryOptions<any, any, TemplateCategory[], any[]>;
+};
+export type TGetObjectTEmplateList = {
+    args: TGetObjectTemplateListArgs;
+    options?: UseInfiniteQueryOptions<any, any, ResponseListing<ObjectTemplate>, (string | number)[]>;
+};
+export type TGetObjectTemplateDetail = {
+    args: TGetObjectTemplateDetailArgs;
+    options?: UseQueryOptions<ObjectTemplate, any, ObjectTemplate, any[]>;
+};
+export type TBulkUpdateTemplate = {
+    options?: UseMutationOptions<any, any, TBulkUpdateObjectTemplateArgs, unknown>;
+};
+export type TUseCreateTemplate = {
+    options?: UseMutationOptions<any, any, TCreateObjectTemplateArgs, unknown>;
+};
+export type TUseUpdateTemplate = {
+    options?: UseMutationOptions<any, any, TUpdateObjectTemplateArgs, unknown>;
+};
+export type TUseValidateTemplateName = {
+    options?: UseMutationOptions<ResponseCheckNameExist, any, TValidateObjectTemplateNameArgs, unknown>;
+};
+export type TUsePersistTemplate = {
+    options?: UseMutationOptions<ObjectTemplate, any, {
+        persistType: 'create' | 'update';
+        params: TUpdateObjectTemplateArgs;
+    }, unknown>;
+};
+export declare const useGetTemplateCategoryList: (params: TGetTemplateCategoryList) => import("@tanstack/react-query").UseQueryResult<TemplateCategory[], any>;
+export declare const useGetObjectTemplateList: (params: TGetObjectTEmplateList) => import("@tanstack/react-query").UseInfiniteQueryResult<ResponseListing<ObjectTemplate>, any>;
+export declare const useGetObjectTemplateDetail: (params: TGetObjectTemplateDetail) => import("@tanstack/react-query").UseQueryResult<ObjectTemplate, any>;
+export declare const useValidateTemplateName: (params: TUseValidateTemplateName) => import("@tanstack/react-query").UseMutationResult<ResponseCheckNameExist, any, TValidateObjectTemplateNameArgs, unknown>;
+export declare const useBulkUpdateTemplate: (params: TBulkUpdateTemplate) => import("@tanstack/react-query").UseMutationResult<any, any, TBulkUpdateObjectTemplateArgs, unknown>;
+export declare const useCreateTemplate: (params: TUseCreateTemplate) => import("@tanstack/react-query").UseMutationResult<any, any, TCreateObjectTemplateArgs, unknown>;
+export declare const useUpdateTemplate: (params: TUseUpdateTemplate) => import("@tanstack/react-query").UseMutationResult<any, any, TUpdateObjectTemplateArgs, unknown>;
+export declare const usePersistTemplate: (params: TUsePersistTemplate) => import("@tanstack/react-query").UseMutationResult<ObjectTemplate, any, {
+    persistType: 'create' | 'update';
+    params: TUpdateObjectTemplateArgs;
+}, unknown>;

package/es/queries/TemplateListing/index.js

@@ -0,0 +1,93 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import { useInfiniteQuery, useMutation, useQuery, } from '@tanstack/react-query';
+// Services
+import { templateListingServices, } from '@antscorp/antsomi-ui/es/services/TemplateListing';
+// Constants
+import { QUERY_KEYS } from '../../constants/queries';
+import { queryClientAntsomiUI } from '../configs';
+const { category, objectTemplate } = templateListingServices;
+export const useGetTemplateCategoryList = (params) => {
+    const { options, args } = params;
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST, args.params], queryFn: () => category.getList(params.args), onSuccess() { } }, options));
+};
+export const useGetObjectTemplateList = (params) => {
+    const { options, args } = params;
+    return useInfiniteQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST, args.params], queryFn: ({ pageParam = 1 }) => __awaiter(void 0, void 0, void 0, function* () {
+            const res = yield objectTemplate.getList(Object.assign(Object.assign({}, args), { params: Object.assign(Object.assign({}, args.params), { page: pageParam }) }));
+            return res;
+        }), getNextPageParam: lastPage => {
+            const { meta } = lastPage;
+            const { currentPage, totalPages } = meta;
+            return +currentPage < +totalPages ? Number(lastPage.meta.currentPage) + 1 : undefined;
+        } }, options));
+};
+export const useGetObjectTemplateDetail = (params) => {
+    const { args, options } = params;
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_DETAIL, args.params], queryFn: () => objectTemplate.getDetail(args), enabled: !!args.params.template_id }, options));
+};
+export const useValidateTemplateName = (params) => {
+    const { options } = params;
+    return useMutation(Object.assign({ mutationFn: objectTemplate.validateName }, options));
+};
+export const useBulkUpdateTemplate = (params) => {
+    const { options } = params;
+    return useMutation(Object.assign({ mutationFn: objectTemplate.bulkUpdate, onSettled() {
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+                exact: false,
+            });
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+                exact: false,
+            });
+        } }, options));
+};
+export const useCreateTemplate = (params) => {
+    const { options } = params;
+    return useMutation(Object.assign({ mutationFn: objectTemplate.create, onSettled() {
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+                exact: false,
+            });
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+                exact: false,
+            });
+        } }, options));
+};
+export const useUpdateTemplate = (params) => {
+    const { options } = params;
+    return useMutation(Object.assign({ mutationFn: objectTemplate.update, onSettled() {
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+                exact: false,
+            });
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+                exact: false,
+            });
+        } }, options));
+};
+export const usePersistTemplate = (params) => {
+    const { options } = params;
+    return useMutation(Object.assign({ mutationFn: (args) => {
+            const { persistType, params } = args;
+            switch (persistType) {
+                case 'update':
+                    return objectTemplate.update(params);
+                case 'create':
+                default:
+                    return objectTemplate.create(params);
+            }
+        }, onSettled() {
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {
+                exact: false,
+            });
+            queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_TEMPLATE_CATEGORY_LIST], {
+                exact: false,
+            });
+        } }, options));
+};

package/es/queries/index.d.ts

@@ -4,3 +4,4 @@ export * from './CustomFunction';
 export * from './PromotionPool';
 export * from './DynamicContentAttribute';
 export * from './ThirdParty';
+export * from './TemplateListing';

package/es/queries/index.js

@@ -4,3 +4,4 @@ export * from './CustomFunction';
 export * from './PromotionPool';
 export * from './DynamicContentAttribute';
 export * from './ThirdParty';
+export * from './TemplateListing';

package/es/services/TemplateListing/index.d.ts

@@ -0,0 +1,64 @@
+import { PaginationRequest, PayloadInfo, ResponseCheckNameExist, ResponseListing, TServiceAuth } from '../../types';
+import { TObjectType, TPublicLevel } from '../../types/templateListing';
+import { TThumbnailCardId } from '../../components/molecules/ThumbnailCard';
+import { TemplateCategory } from '../../models/TemplateCategory';
+import { ObjectTemplate, TObjectTemplate } from '../../models/ObjectTemplate';
+export type TGetCategoryListArgs = {
+    params: {
+        objectTypes: TObjectType[];
+        categoryCodes?: string[];
+        publicLevel?: TPublicLevel;
+    };
+    auth: PayloadInfo;
+};
+export type TGetObjectTemplateDetailArgs = {
+    params: {
+        template_id: TThumbnailCardId;
+        object_type: TObjectType;
+        public_level: TPublicLevel;
+    };
+    auth: PayloadInfo;
+};
+export type TGetObjectTemplateListArgs = {
+    params: {
+        object_type: TObjectType;
+        public_level: TPublicLevel;
+    } & PaginationRequest;
+    auth: TServiceAuth;
+};
+export type TBulkUpdateObjectTemplateArgs = {
+    params: {
+        template_ids: number[];
+        data: Partial<TObjectTemplate>;
+    };
+    auth: TServiceAuth;
+};
+export type TUpdateObjectTemplateArgs = {
+    data: Partial<TObjectTemplate>;
+    auth: TServiceAuth;
+};
+export type TCreateObjectTemplateArgs = {
+    data: Partial<TObjectTemplate>;
+    auth: TServiceAuth;
+};
+export type TValidateObjectTemplateNameArgs = {
+    params: {
+        template_name: string;
+        object_type: TObjectType;
+        public_level: TPublicLevel;
+    };
+    auth: TServiceAuth;
+};
+export declare const templateListingServices: {
+    category: {
+        getList: ({ params, auth }: TGetCategoryListArgs) => Promise<TemplateCategory[]>;
+    };
+    objectTemplate: {
+        getList: ({ params, auth, }: TGetObjectTemplateListArgs) => Promise<ResponseListing<ObjectTemplate>>;
+        getDetail: ({ params, auth }: TGetObjectTemplateDetailArgs) => Promise<ObjectTemplate>;
+        create: ({ data, auth }: TCreateObjectTemplateArgs) => Promise<ObjectTemplate>;
+        update: ({ data, auth }: TUpdateObjectTemplateArgs) => Promise<ObjectTemplate>;
+        bulkUpdate: ({ params, auth }: TBulkUpdateObjectTemplateArgs) => Promise<any>;
+        validateName: ({ params, auth, }: TValidateObjectTemplateNameArgs) => Promise<ResponseCheckNameExist>;
+    };
+};

package/es/services/TemplateListing/index.js

@@ -0,0 +1,149 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import { get } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+// Services
+// Types
+import axios from 'axios';
+import { ObjectTemplate } from '../../models/ObjectTemplate';
+const TEMPLATE_CATEGORY_ROUTE = 'template-category/index';
+const OBJECT_TEMPLATE_ROUTE = 'object_template';
+export const templateListingServices = {
+    category: {
+        getList: ({ params, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const { objectTypes = [], categoryCodes, publicLevel } = params;
+                const response = yield axios({
+                    method: 'GET',
+                    url: `${auth.url}/${TEMPLATE_CATEGORY_ROUTE}`,
+                    params: Object.assign({ _token: auth.token, _user_id: auth.userId, _account_id: auth.accountId, objectTypes: objectTypes.join(','), publicLevel: publicLevel !== null && publicLevel !== void 0 ? publicLevel : 0 }, (!isEmpty(categoryCodes) ? { categoryCodes: categoryCodes === null || categoryCodes === void 0 ? void 0 : categoryCodes.join(',') } : {})),
+                });
+                return get(response, 'data.data', []);
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+    },
+    objectTemplate: {
+        getList: ({ params, auth, }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield axios({
+                    method: 'GET',
+                    url: `${auth.url}/${OBJECT_TEMPLATE_ROUTE}`,
+                    params: Object.assign({ _token: auth.token, _user_id: auth.userId, _account_id: auth.accountId }, params),
+                });
+                const { entities, meta } = get(response, 'data.data', {});
+                return {
+                    entities: entities.map(entity => new ObjectTemplate(entity)),
+                    meta,
+                };
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+        getDetail: ({ params, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const { template_id } = params, restOfPrams = __rest(params, ["template_id"]);
+                const response = yield axios({
+                    method: 'GET',
+                    url: `${auth.url}/${OBJECT_TEMPLATE_ROUTE}/${template_id}`,
+                    params: Object.assign({ _token: auth.token, _user_id: auth.userId, _account_id: auth.accountId }, restOfPrams),
+                });
+                return new ObjectTemplate(get(response, 'data.data', {}));
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+        create: ({ data, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield axios({
+                    method: 'POST',
+                    url: `${auth.url}/${OBJECT_TEMPLATE_ROUTE}`,
+                    params: {
+                        _token: auth.token,
+                        _user_id: auth.userId,
+                        _account_id: auth.accountId,
+                    },
+                    data,
+                });
+                return new ObjectTemplate(get(response, 'data.data', {}));
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+        update: ({ data, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const { template_id } = data, restOfData = __rest(data, ["template_id"]);
+                const response = yield axios({
+                    method: 'PUT',
+                    url: `${auth.url}/${OBJECT_TEMPLATE_ROUTE}/${template_id}`,
+                    params: {
+                        _token: auth.token,
+                        _user_id: auth.userId,
+                        _account_id: auth.accountId,
+                    },
+                    data: restOfData,
+                });
+                return new ObjectTemplate(get(response, 'data.data', {}));
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+        bulkUpdate: ({ params, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield axios({
+                    method: 'POST',
+                    url: `${auth.url}/${OBJECT_TEMPLATE_ROUTE}/bulk-update`,
+                    params: {
+                        _token: auth.token,
+                        _user_id: auth.userId,
+                        _account_id: auth.accountId,
+                        template_ids: (params.template_ids || []).join(','),
+                    },
+                    data: params.data,
+                });
+                return get(response, 'data.data', {});
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+        validateName: ({ params, auth, }) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield axios({
+                    method: 'POST',
+                    url: `${auth.url}/${OBJECT_TEMPLATE_ROUTE}/validate-name`,
+                    params: Object.assign({ _token: auth.token, _user_id: auth.userId, _account_id: auth.accountId }, params),
+                });
+                return get(response, 'data.data', {});
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        }),
+    },
+};

package/es/test.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, SlideBar, } from './components';
+import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, useTemplateListing, } from './components';
 // Queries configs
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
 export const BACKGROUND_COLOR_STYLE = {
@@ -66,7 +66,23 @@ export const App = () => {
     const [sliderValue, setSliderValue] = useState(10);
     const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
     const [icon, setIcon] = useState('');
-    console.log('valueShortlink :>', valueShortlink);
+    const { categoryItems, templateItems, checkedCategories, openCategoryKeys, isLoadingCategoryList, isLoadingTemplateList, onLoadMore: onLoadMoreTemplates, onChangeOpenCategoryKeys, onChangeCheckedCategories, onRemoveObjectTemplate, } = useTemplateListing({
+        serviceAuth: {
+            url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
+            token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
+            userId: '1600080515',
+            accountId: '1600080515',
+        },
+        config: {
+            objectType: 1,
+            publicLevel: 0,
+            limitListPerPage: 10,
+        },
+        checkedCategoriesDefault: {
+            device_type: [1, 2],
+            template_type: [1, 2, 3, 4, 5],
+        },
+    });
     const callbackColorSetting = (key, dataIn) => {
         switch (key) {
             case 'ON_ADD_NEW_PRESET':
@@ -100,15 +116,20 @@ export const App = () => {
         console.log({ type, data });
     };
     // --------------------------- Test SlideBar start -------------------------------------------
-    return (React.createElement("div", { style: {
-            width: 500,
-            height: 500,
-            border: '1px solid black',
-            margin: '0 auto',
-            padding: 12,
-            borderRadius: '10px',
-        } },
-        React.createElement(SlideBar, Object.assign({}, stateSlideBar, { callback: callbackSlideBar }))));
+    // return (
+    //   <div
+    //     style={{
+    //       width: 500,
+    //       height: 500,
+    //       border: '1px solid black',
+    //       margin: '0 auto',
+    //       padding: 12,
+    //       borderRadius: '10px',
+    //     }}
+    //   >
+    //     <SlideBar {...stateSlideBar} callback={callbackSlideBar} />
+    //   </div>
+    // );
     // --------------------------- Test SlideBar end -------------------------------------------
     // ----------------------------  Test Input Dynamic start ------------------------------
     // return (
@@ -317,6 +338,36 @@ export const App = () => {
     //     </div>
     //   </ConfigProvider>
     // );
+    // const [time, setTime] = useState<string[]>([]);
+    // const [times, setTimes] = useState<Value>({
+    //   rangeInfo: { type: 'last_14_days' },
+    //   rangeValue: [{ start: null, end: null }],
+    // });
+    // return (
+    //   <ConfigProvider>
+    //     <div
+    //       style={{
+    //         width: 500,
+    //         height: 1000,
+    //         border: '1px solid black',
+    //         margin: '0 auto',
+    //         padding: 12,
+    //         borderRadius: '10px',
+    //         marginTop: 12,
+    //       }}
+    //     >
+    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
+    //       <CalendarSelection
+    //         value={times}
+    //         onChange={(value, info) => {
+    //           console.log({ info, value });
+    //           // setTime([value.rangeValue[0].start, value.rangeValue[0].end]);
+    //           setTimes(value);
+    //         }}
+    //       />
+    //     </div>
+    //   </ConfigProvider>
+    // );
     // ------------------------ Media template components test end -------------------------
     // return (
     //   <div style={{ width: '500px', margin: '32px' }}>

package/es/types/index.d.ts

@@ -16,8 +16,12 @@ export type TConfigErrorInfo = {
 };
 export * from './richMenu';
 export * from './variables';
+export * from './service';
+export * from './templateListing';
 export type PayloadInfo = {
+    url?: string;
     userId?: string;
     token?: string;
     accountId?: string;
 };
+export type TServiceAuth = PayloadInfo;

package/es/types/index.js

@@ -1,2 +1,4 @@
 export * from './richMenu';
 export * from './variables';
+export * from './service';
+export * from './templateListing';

package/es/types/service.d.ts

@@ -0,0 +1,22 @@
+export type TFilter = Record<string, Record<string, any>>;
+export interface PaginationRequest {
+    limit?: number;
+    page?: number;
+    filter?: string;
+}
+export interface ResponseListing<T> {
+    entities: T[];
+    meta: {
+        itemsPerPage: number;
+        totalItems: number;
+        currentPage: string;
+        totalPages: number;
+        sortBy: any[][];
+        filter: string;
+    };
+}
+export interface ResponseCheckNameExist {
+    name: 'Vĩ test dynamic settings';
+    existed: boolean;
+    existedId: number;
+}

package/es/types/service.js

@@ -0,0 +1 @@
+export {};

package/es/types/templateListing.d.ts

@@ -0,0 +1,11 @@
+import { TEMPLATE_CATEGORY_KEYS, OBJECT_TYPES, PUBLIC_LEVEL, TEMPLATE_STATUS } from '../constants/templateListing';
+export type TObjectType = (typeof OBJECT_TYPES)[keyof typeof OBJECT_TYPES];
+export type TPublicLevel = (typeof PUBLIC_LEVEL)[keyof typeof PUBLIC_LEVEL];
+export type TTemplateStatus = (typeof TEMPLATE_STATUS)[keyof typeof TEMPLATE_STATUS];
+export type TObjectTemplateCategory = (typeof TEMPLATE_CATEGORY_KEYS)[keyof typeof TEMPLATE_CATEGORY_KEYS];
+export type TTemplateListingConfig = {
+    objectType: TObjectType;
+    publicLevel: TPublicLevel;
+    categoryCodes?: string[];
+    limitListPerPage?: number;
+};

package/es/types/templateListing.js

@@ -0,0 +1 @@
+export {};

package/es/utils/common.d.ts

@@ -55,3 +55,5 @@ export declare const isEmail: (email: string) => boolean;
  */
 export declare function mapNumberToOrdinalText(num: number): string;
 export declare const searchParamsToObject: (searchParams?: string) => Record<string, unknown>;
+export declare function asssertCannotReach(x: never): void;
+export declare const getShuffleArray: <T>(array: T[]) => T[];