@antscorp/antsomi-ui 1.3.5-beta.324 → 1.3.5-beta.327

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

@@ -1,3 +1,6 @@
 import React from 'react';
 import { ThumbnailCardProps } from './types';
-export declare const ThumbnailCard: React.FC<ThumbnailCardProps>;
+export declare const ThumbnailCard: {
+    <TActionKey extends string[] = []>(props: ThumbnailCardProps<TActionKey>): React.JSX.Element;
+    displayName: string;
+};

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -19,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
+import React from 'react';
 import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Modal } from 'antd';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
@@ -31,10 +31,196 @@ import { Button, Flex, Typography, Spin, Tooltip } from '../../atoms';
 import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
 import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-export const ThumbnailCard = memo(props => {
+// export const ThumbnailCard: React.FC<ThumbnailCardProps> = memo(props => {
+//   const [modal, contextHolder] = Modal.useModal();
+//   const {
+//     id,
+//     name,
+//     width = THUMBNAIL_CARD_DEFAULT_WIDTH,
+//     height = THUMBNAIL_CARD_DEFAULT_HEIGHT,
+//     thumbnail,
+//     thumbnailFit,
+//     removable = true,
+//     actionAvailable = true,
+//     showSkeleton,
+//     loading = false,
+//     removeModalProps,
+//     editBtnProps,
+//     previewBtnProps,
+//     thumbnailCacheValue,
+//     actionButtons,
+//     onClickWrapper,
+//     ...restOfProps
+//   } = props;
+//   const { onOk, ...restOfRemoveTemplateModalProps } = removeModalProps || {};
+//   const {
+//     text: editText = 'Use template',
+//     onClick: onClickEdit,
+//     ...restOfEditBtnProps
+//   } = editBtnProps || {};
+//   const {
+//     text: previewText = 'Preview',
+//     onClick: onClickPreview,
+//     ...restOfPreviewBtnProps
+//   } = previewBtnProps || {};
+//   // Memo
+//   const showSkeletonMemo =
+//     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+//     typeof showSkeleton === 'undefined'
+//       ? checkShowSkeletonBaseUrl(thumbnail)
+//       : typeof showSkeleton === 'function'
+//       ? showSkeleton(props)
+//       : showSkeleton;
+//   // Handlers
+//   const handleRemoveThumbnail: React.MouseEventHandler<HTMLElement> = e => {
+//     e.stopPropagation();
+//     modal.confirm({
+//       title: 'Remove template',
+//       centered: true,
+//       icon: <Icon type="icon-ants-info" style={{ fontSize: 16, lineHeight: '25px' }} />,
+//       content: (
+//         <div>
+//           <p>Are you sure you want to remove the template?</p>
+//           <p>This action can not be undone.</p>
+//         </div>
+//       ),
+//       okText: 'Remove',
+//       cancelText: 'Cancel',
+//       closable: true,
+//       ...restOfRemoveTemplateModalProps,
+//       onOk: async () => {
+//         if (onOk) onOk(id);
+//       },
+//     });
+//   };
+//   const handleWrapperClick: React.MouseEventHandler<HTMLElement> = e => {
+//     e.stopPropagation();
+//     onClickWrapper?.(id);
+//   };
+//   // Handlers
+//   const renderActionButtons = () => {
+//     if (!actionButtons) return null;
+//     return Object.keys(actionButtons)
+//       .map(key => {
+//         const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
+//         const actionSettings = actionButtons[key as TActionButtonKey];
+//         if (actionSettings) {
+//           const { buttonProps, key, customRender } = actionSettings;
+//           const icon = actionSettings.icon || option.icon || '';
+//           const label = actionSettings.label || option.label || '';
+//           const ButtonComponent = (
+//             <Tooltip title={label}>
+//               <Button
+//                 key={key || option.key}
+//                 type="primary"
+//                 icon={
+//                   <Icon type={icon || option.icon} style={{ fontSize: 24, color: '#FFFFFF' }} />
+//                 }
+//                 {...buttonProps}
+//               />
+//             </Tooltip>
+//           );
+//           /**
+//            * Handle custom render for action button
+//            * If customRender is a function, return the function callback the ButtonComponent
+//            * If not, return ButtonComponent
+//            */
+//           return typeof customRender === 'function'
+//             ? customRender(ButtonComponent)
+//             : ButtonComponent;
+//         }
+//         return null;
+//       })
+//       .filter(Boolean);
+//   };
+//   return (
+//     <Flex gap={10} vertical {...restOfProps} style={{ width, ...restOfProps.style }}>
+//       <ThumbnailCardWrapper
+//         $showSkeleton={showSkeletonMemo}
+//         style={{ height, cursor: actionAvailable ? 'default' : 'pointer' }}
+//         onClick={handleWrapperClick}
+//       >
+//         <div className="screen">
+//           {thumbnail && (
+//             <img
+//               src={getUrlNoCache(thumbnail, thumbnailCacheValue)}
+//               alt=""
+//               style={{ objectFit: thumbnailFit }}
+//               onError={e => {
+//                 e.currentTarget.style.display = 'none';
+//               }}
+//             />
+//           )}
+//         </div>
+//         {actionAvailable && !loading && (
+//           <>
+//             <Flex className="center-action" align="center" gap={10} vertical>
+//               <Button
+//                 type="primary"
+//                 className="animate__animated animate__fadeIn"
+//                 {...restOfEditBtnProps}
+//                 onClick={e => {
+//                   e.stopPropagation();
+//                   onClickEdit?.(id);
+//                 }}
+//               >
+//                 <Typography.Text
+//                   ellipsis={{ tooltip: editText }}
+//                   style={{ maxWidth: '100%', color: 'inherit' }}
+//                 >
+//                   {editText}
+//                 </Typography.Text>
+//               </Button>
+//               <Button
+//                 className="animate__animated animate__fadeIn"
+//                 onClick={e => {
+//                   e.stopPropagation();
+//                   onClickPreview?.(id);
+//                 }}
+//                 {...restOfPreviewBtnProps}
+//               >
+//                 <Typography.Text
+//                   ellipsis={{ tooltip: previewText }}
+//                   style={{ maxWidth: '100%', color: 'inherit' }}
+//                 >
+//                   {previewText}
+//                 </Typography.Text>
+//               </Button>
+//             </Flex>
+//             <div className="top-right-corner-action animate__animated animate__fadeIn">
+//               {renderActionButtons()}
+//               {removable && (
+//                 <Tooltip title={i18nInstance.t(translations.remove).toString()}>
+//                   <Button
+//                     type="primary"
+//                     icon={
+//                       <Icon
+//                         type="icon-ants-trash-outline"
+//                         style={{ fontSize: 24, color: '#FFFFFF' }}
+//                       />
+//                     }
+//                     onClick={handleRemoveThumbnail}
+//                   />
+//                 </Tooltip>
+//               )}
+//             </div>
+//             <div className="backdrop" />
+//             <div>{contextHolder}</div>
+//           </>
+//         )}
+//         {loading && <Spin className="thumbnail__loading" spinning />}
+//       </ThumbnailCardWrapper>
+//       {!!name && (
+//         <Typography.Text ellipsis={{ tooltip: name }} style={{ maxWidth: '100%' }}>
+//           {name}
+//         </Typography.Text>
+//       )}
+//     </Flex>
+//   );
+// });
+export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
     const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);
-    console.log({ actionButtons });
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
@@ -70,10 +256,10 @@ export const ThumbnailCard = memo(props => {
             const actionSettings = actionButtons[key];
             if (actionSettings) {
                 const { buttonProps, key, customRender } = actionSettings;
-                const icon = actionSettings.icon || option.icon || '';
-                const label = actionSettings.label || option.label || '';
+                const icon = actionSettings.icon || (option === null || option === void 0 ? void 0 : option.icon) || '';
+                const label = actionSettings.label || (option === null || option === void 0 ? void 0 : option.label) || '';
                 const ButtonComponent = (React.createElement(Tooltip, { title: label },
-                    React.createElement(Button, Object.assign({ key: key || option.key, type: "primary", icon: React.createElement(Icon, { type: icon || option.icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps))));
+                    React.createElement(Button, Object.assign({ key: key || (option === null || option === void 0 ? void 0 : option.key), type: "primary", icon: React.createElement(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps))));
                 /**
                  * Handle custom render for action button
                  * If customRender is a function, return the function callback the ButtonComponent
@@ -112,5 +298,5 @@ export const ThumbnailCard = memo(props => {
                 React.createElement("div", null, contextHolder))),
             loading && React.createElement(Spin, { className: "thumbnail__loading", spinning: true })),
         !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
-});
+};
 ThumbnailCard.displayName = 'ThumbnailCard';

package/es/components/organism/LeftMenu/components/HomeMenu/index.js

@@ -3,20 +3,58 @@ import React, { memo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 import { Flex } from '../../../../atoms';
+import { Modal } from '../../../../molecules';
 // Constants
 import Icon from '@antscorp/icons';
 // Styled
-import { CreateButton, HomeMenuWrapper } from './styled';
+import { CreateButton, HomeMenuWrapper, ModalWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
+// const MAP_TITLE = {
+//   REMOVE_ACCESS: {
+//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_REMOV_ACCESS_TAB, 'Remove access to this tab'),
+//     BODY: getTranslateMessage(
+//       TRANSLATE_KEY.REMOV_ACCESS_TAB,
+//       'This action will remove your access to this tab. You will not see it anymore. Are you sure you want to continue?',
+//     ),
+//     HEADING_DASHBOARD: getTranslateMessage(
+//       TRANSLATE_KEY._TITL_REMOV_ACCESS_DB,
+//       'Remove access to this dashboard',
+//     ),
+//     BODY_DASHBOARD: getTranslateMessage(
+//       TRANSLATE_KEY.REMOV_ACCESS_DB,
+//       'This action will remove your access to selected dashboard. You will not see it anymore. Are you sure you want to continue?',
+//     ),
+//   },
+//   DELETE_TAB: {
+//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_TAB, 'Remove this tab'),
+//     BODY: getTranslateMessage(
+//       TRANSLATE_KEY.DELETE_TAB_MESS,
+//       'Removing this tab will delete it permanently. Are you sure you want to perform this action?',
+//     ),
+//     HEADING_DASHBOARD: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_DB, 'Remove this dashboard'),
+//     BODY_DASHBOARD: getTranslateMessage(
+//       TRANSLATE_KEY.DELETE_DB_MESS,
+//       'Removing this dashboard will delete it permanently. Are you sure you want to perform this action?',
+//     ),
+//   },
+//   'my-report-template': {
+//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_SHARE_RP, 'Share Report'),
+//     BODY: getTranslateMessage(
+//       TRANSLATE_KEY._SHARE_RP_MESS,
+//       'Sharing this tab with Public access will make your report public for everyone on the portal.',
+//     ),
+//   },
+// };
 export const HomeMenu = memo(() => {
-    const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
-    // console.log({});
-    return (React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
-        React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
-            React.createElement(Flex, { gap: 10, align: "center" },
-                React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
-                React.createElement("span", null, "Create"))),
-        React.createElement("div", { className: "menu-list" },
-            React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))));
+    const { children, removedDashboardId, isDashboardRemoving, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
+            React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
+                React.createElement(Flex, { gap: 10, align: "center" },
+                    React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
+                    React.createElement("span", null, "Create"))),
+            React.createElement("div", { className: "menu-list" },
+                React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))),
+        React.createElement(Modal, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, modalRender: node => React.createElement(ModalWrapper, null, node), onOk: onRemoveDashboard }, "Removing this dashboard will delete it permanently. Are you sure you want to perform this action?")));
 });

package/es/components/organism/LeftMenu/components/HomeMenu/styled.d.ts

@@ -3,3 +3,4 @@ export declare const HomeMenuWrapper: import("styled-components").StyledComponen
 export declare const CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;
+export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/LeftMenu/components/HomeMenu/styled.js

@@ -35,3 +35,13 @@ export const CreateButton = styled(Button) `
   font-size: 14px !important;
   flex-shrink: 0;
 `;
+export const ModalWrapper = styled.div `
+  width: 379px;
+
+  & > .antsomi-modal-content {
+    & > .antsomi-modal-header,
+    & > .antsomi-modal-footer {
+      margin: 0px;
+    }
+  }
+`;

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 export declare const useHomeMenu: () => {
     children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    removedDashboardId: string;
+    isDashboardRemoving: boolean;
+    setRemovedDashboardId: import("react").Dispatch<import("react").SetStateAction<string>>;
     onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;
     onOptionCallback: (args: {
         menuItemKey: string;
         optionKey: string;
     }) => void;
     onMenuClick: (key: string, _: any) => void;
+    onRemoveDashboard: () => Promise<void>;
 };

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -1,23 +1,37 @@
+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 { useCallback, useMemo } from 'react';
-// import { useHistory } from 'react-router-dom';
+import { useCallback, useMemo, useState } from 'react';
 // Constants
 import { CONFIG_OPTIONS } from './constants';
 import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
+import { API_RESPONSE_CODE, CDP_API } from '@antscorp/antsomi-ui/es/constants';
 // Utils
 import { getGeneratePath, getMenuItem } from '../../utils';
-// Types
+// Hooks
 import { useLeftMenuStore } from '../../stores';
 import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
+// Queries
+import { useUpdateTask } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 export const useHomeMenu = () => {
     const { pathname, search } = window.location;
-    // const history = useHistory();
     const { navigate, replace } = useCustomRouter();
     const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
     const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const env = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
+    const dashboardParams = useLeftMenuStore(store => store.state.dashboardParams);
     const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
+    const [removedDashboardId, setRemovedDashboardId] = useState('');
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const { mutateAsync: removeDashboard, isLoading: isDashboardRemoving } = useUpdateTask();
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
@@ -29,6 +43,7 @@ export const useHomeMenu = () => {
                 break;
             }
             case CONFIG_OPTIONS.REMOVE.key:
+                setRemovedDashboardId(menuItemKey);
                 break;
             default:
                 break;
@@ -54,11 +69,26 @@ export const useHomeMenu = () => {
             navigate(newPathName);
         }
     }, [auth, pathname, navigate]);
+    const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (removedDashboardId && auth && env) {
+            const params = {
+                params: Object.assign(Object.assign({}, dashboardParams), { dashboardId: +removedDashboardId }),
+                auth: Object.assign(Object.assign({}, auth), { url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub` }),
+            };
+            const response = yield removeDashboard(params);
+            if ((response === null || response === void 0 ? void 0 : response.code) === API_RESPONSE_CODE.SUCCESS) {
+                setRemovedDashboardId('');
+            }
+        }
+    }), [auth, dashboardParams, env, removedDashboardId, removeDashboard]);
     return {
         children: customChildren,
-        /* Callbacks */
+        removedDashboardId,
+        isDashboardRemoving,
+        setRemovedDashboardId,
         onCreateNewReport,
         onOptionCallback,
         onMenuClick,
+        onRemoveDashboard,
     };
 };

package/es/components/organism/LeftMenu/constants/variables.js

@@ -40,7 +40,7 @@ export const HOME_REPORT_ROUTES = {
 };
 /* MARKETING APP */
 export const MARKETING_ROUTES = {
-    CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId/list',
+    CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId',
 };
 export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, JOURNEY_ORCHESTRATION: 8 };
 export const RENDER_OPTION = { CHANNEL: 'destination_channel' };

package/es/components/organism/LeftMenu/hooks/useLeftMenu.js

@@ -10,13 +10,14 @@ import { useLeftMenuStore } from '../stores';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
 // Constants
 import { CDP_API, PERMISSION_API } from '@antscorp/antsomi-ui/es/constants';
+import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
 };
 export const useLeftMenu = (props) => {
     // Props
-    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, customization, onActiveMenuCodeChange, } = props;
+    const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
     const { isExpandable = true, isCustomized = false, items, activeKey } = customization || {};
     const { pathname, hash } = window.location;
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
@@ -24,20 +25,6 @@ export const useLeftMenu = (props) => {
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
     const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
     const [state, setState] = useState(initialState);
-    // const { data: menuList } = useGetListMenu({
-    //   args: {
-    //     auth: {
-    //       token: env === 'production' ? auth?.token : '5474r2x214z284d4w2b4y444d464b444q4y274u4t5x5',
-    //       url: 'https://permission.antsomi.com',
-    //       portalId: env === 'production' ? auth?.portalId : 561236459,
-    //       userId: env === 'production' ? auth?.userId : '1600083836',
-    //       accountId: env === 'production' ? auth?.accountId : '1600083836',
-    //     },
-    //     params: {
-    //       type: 'menu-item-permission',
-    //     },
-    //   },
-    // });
     const { data: menuList } = useGetListMenu({
         args: {
             auth: {
@@ -127,8 +114,12 @@ export const useLeftMenu = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        setLeftMenuState({ appConfig, isCustomized });
-    }, [appConfig, isCustomized, setLeftMenuState]);
+        setLeftMenuState({
+            appConfig,
+            isCustomized,
+            dashboardParams: { objectId, isGrouped, objectType },
+        });
+    }, [appConfig, isCustomized, isGrouped, objectId, objectType, setLeftMenuState]);
     // Active Custom App Key when active key is changed
     useEffect(() => {
         if (activeKey && items)

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

@@ -11,6 +11,11 @@ export interface LeftMenuState {
     appMenuChildren: TFeatureMenu[];
     appConfig?: AppConfigProviderProps;
     isCustomized?: boolean;
+    dashboardParams: {
+        objectId: number;
+        objectType: string;
+        isGrouped: boolean;
+    };
 }
 interface LeftMenuStore {
     state: LeftMenuState;

package/es/components/organism/LeftMenu/stores/index.js

@@ -1,5 +1,6 @@
 // Libraries
 import { create } from 'zustand';
+import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 const initialState = {
     activeAppCode: '',
     customActiveAppKey: '',
@@ -9,6 +10,11 @@ const initialState = {
     customItems: [],
     customMenuChildren: [],
     isCustomized: false,
+    dashboardParams: {
+        objectId: DASHBOARD_MODULE_CONFIG.objectId,
+        objectType: DASHBOARD_MODULE_CONFIG.objectType,
+        isGrouped: DASHBOARD_MODULE_CONFIG.isGrouped,
+    },
 };
 export const useLeftMenuStore = create(set => ({
     state: initialState,

package/es/components/organism/LeftMenu/utils/index.js

@@ -172,10 +172,10 @@ export const getMappingAppChildren = (args) => {
                 appItem.children = (_d = appItem.children) === null || _d === void 0 ? void 0 : _d.map(childMenuItem => {
                     switch (childMenuItem.menu_item_code) {
                         case MARKETING_CHANNEL_CODE.ALL_CHANNEL:
-                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
+                            childMenuItem.menu_item_path = getGeneratePath(childMenuItem.menu_item_path || '', Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
                             break;
                         case MARKETING_CHANNEL_CODE.ORCHESTRATION:
-                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION }));
+                            childMenuItem.menu_item_path = getGeneratePath(childMenuItem.menu_item_path || '', Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION }));
                             break;
                         default:
                             break;

package/es/components/template/Layout/constants/config.d.ts

@@ -0,0 +1,7 @@
+export declare const DASHBOARD_MODULE_CONFIG: {
+    key: string;
+    module: string;
+    objectId: number;
+    objectType: string;
+    isGrouped: boolean;
+};

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

@@ -0,0 +1,7 @@
+export const DASHBOARD_MODULE_CONFIG = {
+    key: 'dashboard-report',
+    module: 'DASHBOARD',
+    objectId: 1,
+    objectType: 'OVERVIEW',
+    isGrouped: true,
+};

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

@@ -1,2 +1,3 @@
 export * from './menuCode';
 export * from './permission';
+export * from './config';

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

@@ -1,2 +1,3 @@
 export * from './menuCode';
 export * from './permission';
+export * from './config';

package/es/config/index.d.ts

@@ -6,5 +6,6 @@ export declare const ENV: {
 export declare const isDev: boolean;
 export declare const ENDPOINT: {
     readonly DASHBOARD_V2: "dashboard/v2.0";
+    readonly OVERVIEW: "dashboard/v2.0/overview";
     readonly TOOLKIT_V2: "toolkit/v2.0";
 };

package/es/config/index.js

@@ -10,5 +10,6 @@ const API_VERSION_V2 = '2.0';
 /* ENDPOINT */
 export const ENDPOINT = {
     DASHBOARD_V2: `dashboard/v${API_VERSION_V2}`,
+    OVERVIEW: `dashboard/v${API_VERSION_V2}/overview`,
     TOOLKIT_V2: `toolkit/v${API_VERSION_V2}`,
 };

package/es/constants/api.d.ts

@@ -1,3 +1,6 @@
+export declare const API_RESPONSE_CODE: {
+    SUCCESS: number;
+};
 export declare const TINYMCE_API_KEY = "scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35";
 export declare const CDP_API: {
     development: string;

package/es/constants/api.js

@@ -1,6 +1,9 @@
 // Constants
 import { ENV } from '../config';
 import { APP_CODES } from './variables';
+export const API_RESPONSE_CODE = {
+    SUCCESS: 200,
+};
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35';
 export const CDP_API = {

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

@@ -18,6 +18,7 @@ export type TGetDestinationChannel = {
     options?: UseQueryOptions<any, any, TDestinationChannelResponse, any[]>;
 };
 export declare const useGetDashboard: (params: TGetDashboard) => import("@tanstack/react-query").UseQueryResult<TDashboardResponse, any>;
+export declare const useUpdateTask: () => import("@tanstack/react-query").UseMutationResult<any, unknown, import("../../services/LeftMenu").TRemoveDashboardArgs, unknown>;
 export declare const useGetListMenu: (params: TGetListMenu) => import("@tanstack/react-query").UseQueryResult<TFeatureMenuResponse, any>;
 export declare const useGetListMenuPermission: (params: TGetListMenuPermission) => import("@tanstack/react-query").UseQueryResult<FeatureMenuPermission[], any>;
 export declare const useGetDestinationChannel: (params: TGetDestinationChannel) => import("@tanstack/react-query").UseQueryResult<TDestinationChannelResponse, any>;

package/es/queries/LeftMenu/index.js

@@ -1,14 +1,28 @@
 // Libraries
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 // Services
 import { leftMenuServices, } from '../../services/LeftMenu';
 // Constants
 import { QUERY_KEYS } from '../../constants/queries';
-const { getDashboard, getListMenu, getListMenuPermission, getDestinationChannel } = leftMenuServices;
+import { API_RESPONSE_CODE } from '../../constants';
+const { getDashboard, removeDashboard, getListMenu, getListMenuPermission, getDestinationChannel } = leftMenuServices;
 export const useGetDashboard = (params) => {
     const { options, args } = params;
     return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_DASHBOARD, args.params, args.auth], queryFn: () => getDashboard(params.args), onSuccess() { } }, options));
 };
+export const useUpdateTask = () => {
+    const queryClient = useQueryClient();
+    return useMutation(removeDashboard, {
+        onSuccess: data => {
+            const { code } = data || {};
+            if (code === API_RESPONSE_CODE.SUCCESS) {
+                queryClient.invalidateQueries([QUERY_KEYS.GET_DASHBOARD], {
+                    exact: false,
+                });
+            }
+        },
+    });
+};
 export const useGetListMenu = (params) => {
     const { options, args } = params;
     return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU, args.params, args.auth], queryFn: () => getListMenu(params.args), onSuccess() { } }, options));

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

@@ -10,6 +10,16 @@ export type TGetDashboardArgs = {
     };
     auth: PayloadInfo;
 };
+export type TRemoveDashboardArgs = {
+    params: {
+        dashboardId: number;
+        objectType: string;
+        objectId: number;
+        isGrouped?: boolean;
+        languageCode?: string;
+    };
+    auth: PayloadInfo;
+};
 export type TGetListMenuArgs = {
     params: {
         type?: string;
@@ -34,6 +44,7 @@ export type TGetDestinationChannelArgs = {
 };
 export declare const leftMenuServices: {
     getDashboard: ({ params, auth }: TGetDashboardArgs) => Promise<TDashboardResponse>;
+    removeDashboard: ({ params, auth }: TRemoveDashboardArgs) => Promise<any>;
     getListMenu: ({ params, auth }: TGetListMenuArgs) => Promise<TFeatureMenuResponse>;
     getListMenuPermission: ({ params, auth, }: TGetListMenuPermissionArgs) => Promise<FeatureMenuPermission[]>;
     getDestinationChannel: ({ params, auth, }: TGetDestinationChannelArgs) => Promise<TDataResponse<TDestinationChannel>>;

package/es/services/LeftMenu/index.js

@@ -47,7 +47,35 @@ export const leftMenuServices = {
             return Promise.reject(error);
         }
     }),
-    getListMenu: (_b) => __awaiter(void 0, [_b], void 0, function* ({ params, auth }) {
+    removeDashboard: (_b) => __awaiter(void 0, [_b], void 0, function* ({ params, auth }) {
+        try {
+            const { dashboardId, objectId, isGrouped = false, languageCode } = params;
+            const headers = {
+                'Content-Type': 'application/json; charset=utf-8',
+                token: auth.token,
+            };
+            const REMOVE_STATUS = 3;
+            const response = yield axios({
+                method: 'PUT',
+                url: `${auth.url}/${ENDPOINT.OVERVIEW}/update-status/${dashboardId}`,
+                headers,
+                params: {
+                    _user_id: auth.userId,
+                    _owner_id: (auth === null || auth === void 0 ? void 0 : auth.accountId) || (auth === null || auth === void 0 ? void 0 : auth.userId),
+                    portalId: auth.portalId,
+                    languageCode,
+                    isGrouped,
+                    objectType: objectId,
+                    status: REMOVE_STATUS,
+                },
+            });
+            return (response === null || response === void 0 ? void 0 : response.data) || {};
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    }),
+    getListMenu: (_c) => __awaiter(void 0, [_c], void 0, function* ({ params, auth }) {
         try {
             const { type } = params;
             const { url, accountId, portalId, token, userId } = auth;
@@ -68,7 +96,7 @@ export const leftMenuServices = {
             return Promise.reject(error);
         }
     }),
-    getListMenuPermission: (_c) => __awaiter(void 0, [_c], void 0, function* ({ params, auth, }) {
+    getListMenuPermission: (_d) => __awaiter(void 0, [_d], void 0, function* ({ params, auth, }) {
         try {
             const { type, languageCode, hasChild, from } = params;
             const { url, accountId, token, userId } = auth;
@@ -92,7 +120,7 @@ export const leftMenuServices = {
             return Promise.reject(error);
         }
     }),
-    getDestinationChannel: (_d) => __awaiter(void 0, [_d], void 0, function* ({ params, auth, }) {
+    getDestinationChannel: (_e) => __awaiter(void 0, [_e], void 0, function* ({ params, auth, }) {
         try {
             const { languageCode, objectType } = params;
             const { url, token, userId, portalId } = auth;

package/package.json

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