@antscorp/antsomi-ui 1.3.5-beta.264 → 1.3.5-beta.266

package/es/components/molecules/ImageEditor/ImageEditor.d.ts

@@ -13,6 +13,7 @@ interface ImageEditorProps {
     imageUrl?: string;
     defaultValue?: CanvasState;
     showSelection?: boolean;
+    style?: Omit<React.CSSProperties, 'width'>;
 }
 export declare const ImageEditor: React.ForwardRefExoticComponent<ImageEditorProps & React.RefAttributes<ImageResizeHandle>>;
 export {};

package/es/components/molecules/ImageEditor/ImageEditor.js

@@ -25,7 +25,7 @@ import { downloadURI, getTransformData } from './utils';
 import { StageWrapperStyled } from './styled';
 const SNAP_THRESHOLD = 5;
 export const ImageEditor = React.forwardRef((props, ref) => {
-    const { defaultValue, className, width, height, hideAction, imageUrl = '', showSelection, } = props;
+    const { defaultValue, className, width, height, hideAction, imageUrl = '', showSelection, style, } = props;
     const [color, setColor] = useState('#000');
     const [drawAction, setDrawAction] = useState(DrawAction.Select);
     const [cropZone, setCropZone] = useState();
@@ -618,7 +618,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         target.setAbsolutePosition(newPos);
         // selectedNode.setAbsolutePosition(newPos);
     }, []);
-    return (React.createElement("div", { style: { width: `${width}px` } },
+    return (React.createElement("div", { style: Object.assign({ width: `${width}px` }, (style || {})) },
         React.createElement(Flex, { justify: "space-between", align: "center", style: { marginBottom: '6px', display: hideAction ? 'none' : 'flex' } },
             React.createElement(Flex, { gap: 4 },
                 PAINT_OPTIONS.map(({ id, label, icon }) => (React.createElement(Button, { key: id, "aria-label": label, icon: React.createElement(Icon, { type: icon, style: { fontSize: '16px' } }), onClick: () => {

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -110,26 +110,22 @@ export const ImageSlider = props => {
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const currentEditing = useMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
-    const imageResizeProps = {
-        className: 'image-resize-wrapper',
-        width: imageWidth,
-        height: imageHeight,
-        ref: imageResizeRef,
-        hideAction: true,
-        imageUrl: 
-        // latestCanvas && isEditPrevious
-        (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
-            ? undefined
-            : getUrlNoCache(thumbnails[currentEditing], timeGenerated),
-        defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing],
-    };
     const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
     const showSkeletonMemo = skeleton !== undefined
         ? skeleton
         : checkShowSkeletonBaseUrl(getUrlNoCache(thumbnails[currentEditing], timeGenerated));
     return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
         React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
-            React.createElement(ImageResizeComponent, Object.assign({}, imageResizeProps)),
+            React.createElement(ImageResizeComponent, { style: { visibility: typeof uploadThumbnail === 'number' ? 'hidden' : 'visible' }, className: "image-resize-wrapper", width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: 
+                // latestCanvas && isEditPrevious
+                (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
+                    ? undefined
+                    : getUrlNoCache(thumbnails[currentEditing], timeGenerated), 
+                // imageUrl={getUrlNoCache(
+                //   thumbnails[editingThumbnail ?? (uploadThumbnail as number)],
+                //   timeGenerated,
+                // )}
+                defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing] }),
             typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
                 React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
                 React.createElement(Flex, { vertical: true, align: "flex-start" },

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -80,7 +80,12 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &:not(.hide-skeleton) {
-      background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+      background: ${props => {
+    var _a;
+    return props.$skeleton
+        ? `url(${SkeletonBg}) no-repeat center center`
+        : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton;
+}};
 
       background-size: 90% 90%;
     }

package/es/components/organism/ContentSources/Settings.js

@@ -1,3 +1,12 @@
+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 React, { memo, useEffect, useLayoutEffect, useState } from 'react';
 import { get, isArray, isEmpty, set } from 'lodash';
@@ -16,12 +25,13 @@ import { FILTERS_DEFAULT, ITEM_TYPE_NAME, PRODUCT_ITEM_TYPE_ID, PRODUCT_RANKING_
 // Queries
 import { useGetListBO } from '@antscorp/antsomi-ui/es/queries/BusinessObject';
 import { useGetListFallbackBO } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
+import { getDataTableBOQuery } from '@antscorp/antsomi-ui/es/queries/BusinessObject/useGetDataTableBO';
 // Hooks
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 // Provider
-import { useContentSourceDispatch, useSelectContentSources, useSelectModeView } from './provider';
-import { deleteContentSourceGroup, setContentSourceGroup, updateContentSourceSettings, updateModeView, } from './reducer';
+import { useContentSourceDispatch, useSelectBoIdByGroupFromCS, useSelectContentSources, useSelectModeView, } from './provider';
+import { deleteContentSourceGroup, setContentSourceGroup, setContentSourceGroupBOData, updateContentSourceSettings, updateModeView, } from './reducer';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/organism/ContentSources/Settings.tsx';
@@ -29,11 +39,13 @@ const Settings = (props) => {
     const { serviceAuth, mode, isShowErrorAlert, initValue, journeySettings, onChange } = props;
     const { url = '', userId, token, accountId } = serviceAuth;
     const { t } = i18nInstance;
+    const boIdByGroupCS = useSelectBoIdByGroupFromCS();
     const contentSources = useSelectContentSources();
     const { groups, expanded } = contentSources;
     const modeView = useSelectModeView();
     const isCDP = modeView === 'CDP';
     const [isInitDataCDPDone, setIsInitDataCDPDone] = useState(false);
+    const [isLoadingDataTableBO, setIsLoadingDataTableBO] = useState(false);
     const contentSourcesDebounce = useDebounce(contentSources, 400);
     const { data: listBO, isLoading: isLoadingListBO, refetch: refetchListBO, } = useGetListBO({
         url,
@@ -232,6 +244,35 @@ const Settings = (props) => {
             }
         }
     }, [initValue, contentSourceDispatch, isCDP]);
+    useDeepCompareEffect(() => {
+        let ignore = false;
+        if (!isEmpty(boIdByGroupCS) && !isEmpty(serviceAuth)) {
+            const groupKeyList = Object.keys(boIdByGroupCS);
+            const fetchListCSDataTableBO = () => __awaiter(void 0, void 0, void 0, function* () {
+                const listPromises = [];
+                groupKeyList.forEach(groupId => {
+                    const itemTypeId = boIdByGroupCS[groupId];
+                    const promise = getDataTableBOQuery(serviceAuth, itemTypeId, { groupId });
+                    listPromises.push(promise);
+                });
+                setIsLoadingDataTableBO(true);
+                const listBOResponses = yield Promise.all(listPromises);
+                const boDataByGroupId = {};
+                listBOResponses.forEach(item => {
+                    const { data, params } = item;
+                    boDataByGroupId[params.groupId] = data.data;
+                });
+                if (!ignore) {
+                    contentSourceDispatch(setContentSourceGroupBOData(boDataByGroupId));
+                }
+                setIsLoadingDataTableBO(false);
+            });
+            fetchListCSDataTableBO();
+        }
+        return () => {
+            ignore = true;
+        };
+    }, [boIdByGroupCS, serviceAuth, contentSourceDispatch]);
     // callback data out
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -239,7 +280,7 @@ const Settings = (props) => {
         }
     }, [contentSourcesDebounce]);
     return (React.createElement(ContentContainer, { className: "contentsource-container" },
-        React.createElement(Content, { isLoadingListBO: isLoadingListBO, listBO: listBO, groups: groups, expanded: expanded, onChangeExpand: expanded => {
+        React.createElement(Content, { isLoadingListBO: isLoadingListBO || isLoadingDataTableBO, listBO: listBO, groups: groups, expanded: expanded, onChangeExpand: expanded => {
                 contentSourceDispatch({
                     type: 'EXPANDED',
                     payload: {

package/es/components/organism/ContentSources/provider.d.ts

@@ -11,4 +11,7 @@ export declare const useContentSourceState: () => ContentSourceState;
 export declare const useContentSourceDispatch: () => React.Dispatch<UpdateGroupAction>;
 export declare const useSelectServiceAuth: () => import("@antscorp/antsomi-ui/es/types").PayloadInfo;
 export declare const useSelectContentSources: () => import("./types").TContentSourceSettings;
+export declare const useSelectCSGroups: () => import("./types").TContentSourceGroup[];
 export declare const useSelectModeView: () => import("./types").ContentSourceModeView;
+export declare const useSelectBoIdByGroupFromCS: () => Record<string, number>;
+export declare const useSelectDataTableBOByGroupId: (groupId: string) => Record<string, any>[];

package/es/components/organism/ContentSources/provider.js

@@ -1,5 +1,6 @@
 // Libraries
 import React, { createContext, useContext, useMemo, useReducer } from 'react';
+import _ from 'lodash';
 // Reducer
 import { contentSourceReducer, initialContentSourceState } from './reducer';
 export const ContentSourceContext = createContext(initialContentSourceState);
@@ -21,7 +22,35 @@ export const useSelectContentSources = () => {
     const { contentSources } = useContentSourceState();
     return useMemo(() => contentSources, [contentSources]);
 };
+export const useSelectCSGroups = () => {
+    const { contentSources } = useContentSourceState();
+    return useMemo(() => contentSources.groups || [], [contentSources]);
+};
 export const useSelectModeView = () => {
     const { mode } = useContentSourceState();
     return useMemo(() => mode, [mode]);
 };
+export const useSelectBoIdByGroupFromCS = () => {
+    const csGroups = useSelectCSGroups();
+    const result = useMemo(() => {
+        const collectItemTypeId = {};
+        csGroups.forEach(group => {
+            if (group.itemTypeId !== null) {
+                collectItemTypeId[group.groupId] = group.itemTypeId;
+            }
+        });
+        return collectItemTypeId;
+    }, [csGroups]);
+    return result;
+};
+export const useSelectDataTableBOByGroupId = (groupId) => {
+    const csGroups = useSelectCSGroups();
+    const result = useMemo(() => {
+        const group = csGroups.find(group => group.groupId === groupId);
+        if (group) {
+            return _.get(group, 'data', []) || [];
+        }
+        return [];
+    }, [csGroups, groupId]);
+    return result;
+};

package/es/components/organism/ContentSources/reducer.d.ts

@@ -1,5 +1,5 @@
 import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
-import { UpdateGroupAction, TContentSourceSettings, TContentSourceGroup, ActionSetContentSourceGroup, ActionDeleteContentSourceGroup, ContentSourceModeView, ActionUpdateModeView, ActionUpdateContentSourceSettings } from './types';
+import { UpdateGroupAction, TContentSourceSettings, TContentSourceGroup, ActionSetContentSourceGroup, ActionDeleteContentSourceGroup, ContentSourceModeView, ActionUpdateModeView, ActionUpdateContentSourceSettings, ActionSetContentSourceGroupBOData } from './types';
 export interface ContentSourceState {
     serviceAuth: TServiceAuth;
     mode: ContentSourceModeView;
@@ -15,3 +15,4 @@ export declare const setContentSourceGroup: (payload: {
 export declare const deleteContentSourceGroup: (groupId: string) => ActionDeleteContentSourceGroup;
 export declare const updateModeView: (mode: ContentSourceModeView) => ActionUpdateModeView;
 export declare const updateContentSourceSettings: (contentSources: TContentSourceSettings) => ActionUpdateContentSourceSettings;
+export declare const setContentSourceGroupBOData: (boDataByGroupId: Record<string, any[]>) => ActionSetContentSourceGroupBOData;

package/es/components/organism/ContentSources/reducer.js

@@ -1,5 +1,6 @@
 // Libraries
 import produce from 'immer';
+import { has } from 'lodash';
 // Utils
 import { initGroup as initContentSourceGroup } from './utils';
 // Constants
@@ -61,6 +62,16 @@ export const contentSourceReducer = (state, action) => produce(state, draft => {
             }
             break;
         }
+        case 'SET_CONTENT_SOURCE_GROUP_BODATA': {
+            const { boDataByGroupId } = action.payload;
+            draft.contentSources.groups.map(g => {
+                if (has(boDataByGroupId, g.groupId)) {
+                    g.data = boDataByGroupId[g.groupId];
+                }
+                return g;
+            });
+            break;
+        }
         default: {
             return state;
         }
@@ -85,3 +96,9 @@ export const updateContentSourceSettings = (contentSources) => ({
         contentSources,
     },
 });
+export const setContentSourceGroupBOData = (boDataByGroupId) => ({
+    type: 'SET_CONTENT_SOURCE_GROUP_BODATA',
+    payload: {
+        boDataByGroupId,
+    },
+});

package/es/components/organism/ContentSources/types.d.ts

@@ -130,5 +130,11 @@ export interface ActionUpdateContentSourceSettings extends Action {
         contentSources: TContentSourceSettings;
     };
 }
-export type UpdateGroupAction = ActionUpdateContentSourceSettings | ActionServiceAuth | ActionAddContentSource | ActionUpdateModeView | ActionDeleteContentSourceGroup | ActionSetContentSourceGroup | ActionUpdateSource | ActionUpdateFilter | ActionUpdateFallback | ActionUpdateName | ActionUpdateAlgorithms | ActionUpdateExpanded | ActionUpdateLevel;
+export interface ActionSetContentSourceGroupBOData extends Action {
+    type: 'SET_CONTENT_SOURCE_GROUP_BODATA';
+    payload: {
+        boDataByGroupId: Record<string, any[]>;
+    };
+}
+export type UpdateGroupAction = ActionUpdateContentSourceSettings | ActionSetContentSourceGroupBOData | ActionServiceAuth | ActionAddContentSource | ActionUpdateModeView | ActionDeleteContentSourceGroup | ActionSetContentSourceGroup | ActionUpdateSource | ActionUpdateFilter | ActionUpdateFallback | ActionUpdateName | ActionUpdateAlgorithms | ActionUpdateExpanded | ActionUpdateLevel;
 export {};

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

@@ -7,3 +7,4 @@ export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table
 export { GenerativeInsights } from './GenerativeInsights';
 export { default as ContentSources } from './ContentSources';
 export { LeftMenu, type LeftMenuProps } from './LeftMenu';
+export * from './ContentSources/provider';

package/es/components/organism/index.js

@@ -7,3 +7,4 @@ export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table
 export { GenerativeInsights } from './GenerativeInsights';
 export { default as ContentSources } from './ContentSources';
 export { LeftMenu } from './LeftMenu';
+export * from './ContentSources/provider';

package/es/constants/queries.d.ts

@@ -6,6 +6,7 @@ export declare const QUERY_KEYS: {
     GET_LIST_BO: string;
     GET_EVENT_ATTRIBUTE_BO: string;
     GET_BO_DETAIL: string;
+    GET_DATA_TABLE_BO: string;
     GET_LIST_PROMOTION_CODE_ATTR: string;
     GET_EVENT_TRACKING_ATTRIBUTES: string;
     GET_LIST_DYNAMIC_CONTENT_ATTR: string;

package/es/constants/queries.js

@@ -8,6 +8,7 @@ export const QUERY_KEYS = {
     GET_LIST_BO: 'GET_LIST_BO',
     GET_EVENT_ATTRIBUTE_BO: 'GET_EVENT_ATTRIBUTE_BO',
     GET_BO_DETAIL: 'GET_BO_DETAIL',
+    GET_DATA_TABLE_BO: 'GET_DATA_TABLE_BO',
     // Promotion Code Attr
     GET_LIST_PROMOTION_CODE_ATTR: 'GET_LIST_PROMOTION_CODE_ATTR',
     // Event tracking attributes

package/es/queries/BusinessObject/useGetDataTableBO.d.ts

@@ -0,0 +1,6 @@
+import type { TServiceAuth } from '../../types';
+export declare const getDataTableBOQuery: (serviceAuth: TServiceAuth, itemTypeId: number | string, params?: Record<string, any>) => Promise<{
+    data: import("../../services/ThirParty/TableBO").TDataTableBO;
+    boId: string | number;
+    params: Record<string, any> | undefined;
+}>;

package/es/queries/BusinessObject/useGetDataTableBO.js

@@ -0,0 +1,26 @@
+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());
+    });
+};
+// Constants
+import { QUERY_KEYS } from '../../constants/queries';
+// Services
+import { getDataTableBO } from '../../services/ThirParty/TableBO';
+// QueryClients
+import { queryClientAntsomiUI } from '../configs';
+export const getDataTableBOQuery = (serviceAuth, itemTypeId, params) => __awaiter(void 0, void 0, void 0, function* () {
+    const data = yield queryClientAntsomiUI.fetchQuery({
+        queryKey: [QUERY_KEYS.GET_DATA_TABLE_BO, itemTypeId],
+        queryFn: () => getDataTableBO(serviceAuth, itemTypeId),
+    });
+    return {
+        data: data !== null && data !== void 0 ? data : [],
+        boId: itemTypeId,
+        params,
+    };
+});

package/es/services/ThirParty/TableBO/index.d.ts

@@ -0,0 +1,6 @@
+import type { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+export interface TDataTableBO {
+    header: any[];
+    data: any[];
+}
+export declare const getDataTableBO: (serviceAuth: TServiceAuth, id: string | number) => Promise<TDataTableBO>;

package/es/services/ThirParty/TableBO/index.js

@@ -0,0 +1,28 @@
+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 get from 'lodash/get';
+import omit from 'lodash/omit';
+// Services
+import { services } from '@antscorp/antsomi-ui/es/services';
+export const getDataTableBO = (serviceAuth, id) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield services.mediaTemplateDesign.get({
+            API_HOST: `${serviceAuth.url}/third-party/data-table-bo`,
+            id,
+        }, omit(serviceAuth, 'url'));
+        return get(response, 'data.data', null);
+    }
+    catch (error) {
+        return new Promise((_, reject) => {
+            reject(error);
+        });
+    }
+});

package/es/services/index.d.ts

@@ -9,6 +9,7 @@ type UpdateParams = {
 };
 export declare const services: {
     mediaTemplateDesign: {
+        get: (params: any, payloadInfo: PayloadInfo) => false | Promise<AxiosResponse<any, any>>;
         getList: (params: any, infos: PayloadInfo) => any;
         create: (params: any, infos: PayloadInfo) => Promise<AxiosResponse<any, any> | any>;
         update: (params: UpdateParams, infos: PayloadInfo) => Promise<AxiosResponse<any, any> | any>;

package/es/services/index.js

@@ -23,6 +23,29 @@ const { CancelToken } = axios;
 const isDebugApi = searchParamsToObject((((_a = window.location) === null || _a === void 0 ? void 0 : _a.href) || '').split('?')[1])['debug-api'] != null;
 export const services = {
     mediaTemplateDesign: {
+        get: function get(params, payloadInfo) {
+            if (typeof params.API_HOST !== 'undefined' && typeof params.id !== 'undefined') {
+                const { API_HOST } = params;
+                const { userId, accountId, token } = payloadInfo;
+                const cancelToken = params.cancelToken ? params.cancelToken : new CancelToken(() => { });
+                const { signal } = params;
+                delete params.API_HOST;
+                delete params.cancelToken;
+                delete params.signal;
+                if (has(params, 'url')) {
+                    delete params.url;
+                }
+                const snapParams = Object.assign(Object.assign({}, params), { _token: token, _user_id: userId, _account_id: accountId });
+                return instance.get(API_HOST + '/' + params.id, {
+                    params: snapParams,
+                    cancelToken: cancelToken,
+                    signal,
+                });
+            }
+            else {
+                return false;
+            }
+        },
         getList: function getList(params, infos) {
             if (typeof params.API_HOST !== 'undefined') {
                 const { API_HOST } = params;

package/package.json

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