@antscorp/antsomi-ui 1.3.5-beta.374 → 1.3.5-beta.376

package/es/components/molecules/SelectAccount/ButtonAdd.js

@@ -20,7 +20,7 @@ const ButtonAdd = () => {
         }
     };
     return (React.createElement(Popover, { open: state.openAccountList, content: React.createElement(AccountList, null), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, onOpenChange: handleClose, afterOpenChange: handleAfterClose },
-        React.createElement(ButtonAddStyled, { className: "select-account-btn-add", style: Object.assign({}, (((_a = state === null || state === void 0 ? void 0 : state.styles) === null || _a === void 0 ? void 0 : _a.btnAdd) || {})), loading: !state.isInitDone, onClick: () => state.openAccountList
+        React.createElement(ButtonAddStyled, { className: "select-account-btn-add", style: Object.assign({}, (((_a = state === null || state === void 0 ? void 0 : state.styles) === null || _a === void 0 ? void 0 : _a.btnAdd) || {})), loading: !state.isInitDone, disabled: state.disabled, onClick: () => state.openAccountList
                 ? dispatch({ type: 'CLOSE_ACCOUNT_LIST' })
                 : dispatch({ type: 'OPEN_ACCOUNT_LIST' }) },
             React.createElement("div", { className: "icon" },

package/es/components/molecules/SelectAccount/context/SelectAccountContext.js

@@ -35,6 +35,9 @@ export const SelectAccountProvider = props => {
     useEffect(() => {
         dispatch({ type: 'INIT' });
     }, []);
+    useEffect(() => {
+        dispatch({ type: 'UPDATE', payload: Object.assign({}, rest) });
+    }, [rest]);
     useEffect(() => {
         if (!isLoading) {
             const newData = get(data, state === null || state === void 0 ? void 0 : state.dataAccountsKey, Array.isArray(data) ? data : []);

package/es/components/molecules/SelectAccount/context/reducer.js

@@ -24,6 +24,12 @@ export const reducer = (state, action) => produce(state, draft => {
             draft.isInitDone = true;
             break;
         }
+        case 'UPDATE': {
+            Object.keys((action === null || action === void 0 ? void 0 : action.payload) || {}).forEach(key => {
+                draft[key] = action === null || action === void 0 ? void 0 : action.payload[key];
+            });
+            break;
+        }
         case 'OPEN_ACCOUNT_LIST':
             draft.openAccountList = true;
             draft.draftUsersSelected = draft.usersSelected;

package/es/components/molecules/SelectAccount/type.d.ts

@@ -48,6 +48,9 @@ export type TAction = {
     type: 'INIT';
 } | {
     type: 'APPLY';
+} | {
+    type: 'UPDATE';
+    payload: SelectAccountProps;
 } | {
     type: 'OPEN_ACCOUNT_LIST';
 } | {

package/es/components/organism/DataTable/components/ToolbarActionButton/index.js

@@ -23,7 +23,7 @@ export const ToolbarActionButtons = memo(props => {
     const restProps = __rest(props, []);
     // Store
     const actionButtons = useDataTableContext(useShallow(store => store.toolbar.actionButtons));
-    console.log('🚀 ~ acitonButtons:', actionButtons);
+    console.log('🚀 ~ actionButtons:', actionButtons);
     if (!actionButtons)
         return null;
     // Handlers

package/es/components/organism/DataTable/contexts/DataTableContext.js

@@ -10,6 +10,5 @@ export function useDataTableContext(selector) {
         throw new Error('Missing DataTableContext.Provider in the tree');
     const selectedState = useStore(store, selector);
     const memoizedState = useDeepCompareMemo(() => selectedState, [selectedState]);
-    console.log('🚀 ~ state:', selectedState);
     return useDeepCompareMemo(() => (isEqual(selectedState, memoizedState) ? memoizedState : selectedState), [selectedState, memoizedState]);
 }

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LeftMenuProps } from '../../..';
+export declare const LeftMenuComponent: React.FC<LeftMenuProps>;

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

@@ -0,0 +1,107 @@
+// Libraries
+import React, { memo, useCallback, useMemo } from 'react';
+import Icon from '@antscorp/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import { isNil, isString } from 'lodash';
+import { Link } from 'react-router-dom';
+// Styled
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
+// Constants
+import { APP_KEYS } from './constants';
+// Components
+import { CustomMenu, CommonMenu, HomeMenu } from './components';
+// Hooks
+import { useLeftMenu, useNavigatePath } from './hooks';
+const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
+export const LeftMenuComponent = memo(props => {
+    const { style, className, customization, showLogo = true } = props;
+    const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, } = useLeftMenu(props);
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    const childMenu = useMemo(() => {
+        const selectedFeatureKey = state.hoverItem ? state.hoverItem : activeAppCode;
+        if (isCustomized)
+            return React.createElement(CustomMenu, null);
+        switch (selectedFeatureKey) {
+            case APP_KEYS.HOME:
+                return React.createElement(HomeMenu, null);
+            default:
+                return React.createElement(CommonMenu, null);
+        }
+    }, [activeAppCode, isCustomized, state.hoverItem]);
+    const renderFeatureMenuItem = useCallback((item) => {
+        const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
+        const isActive = activeAppCode === menu_item_code;
+        const isHover = state.hoverItem === menu_item_code;
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+            React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
+            React.createElement(Typography.Text, null, menu_item_name),
+            React.createElement("div", { className: "popup-triangle" })));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()))) : (renderLabel())));
+    }, [activeAppCode, getPath, isPushDifferentDomain, navigatePath, onMouseEnter, state.hoverItem]);
+    const renderRecommendationMenuItem = useCallback((item) => {
+        const { menu_item_name, menu_item, icon_name, permission_code } = item;
+        const isActive = customActiveAppKey === permission_code;
+        const isHover = state.hoverItem === permission_code;
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }), onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(permission_code || 'null', [permission_code || 'null']) },
+            React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
+            React.createElement(Typography.Text, null, menu_item_name),
+            React.createElement("div", { className: "popup-triangle" })));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(permission_code || 'null') }, renderLabel()));
+    }, [customActiveAppKey, onMenuItemClick, onMouseEnter, state.hoverItem]);
+    const renderCustomizedMenuItems = useCallback((items) => items === null || items === void 0 ? void 0 : items.map(item => {
+        const { key, icon, label } = item;
+        const isActive = key === customActiveAppKey;
+        const isHover = key === state.hoverItem;
+        return (React.createElement(FeatureMenuItem, { key: key, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [key]), onMouseEnter: () => onMouseEnter(key) },
+            React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+                React.createElement(IconWrapper, null, isNil(icon) ? null : React.createElement(Icon, { type: icon })),
+                React.createElement(Typography.Text, null, label),
+                isExpandable && React.createElement("div", { className: "popup-triangle" }))));
+    }), [customActiveAppKey, state.hoverItem, isExpandable, onMenuItemClick, onMouseEnter]);
+    const renderAppMenuItems = useCallback(() => {
+        var _a;
+        return isCustomized
+            ? renderCustomizedMenuItems(items)
+            : (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => isRecommendation ? renderRecommendationMenuItem(item) : renderFeatureMenuItem(item));
+    }, [
+        isCustomized,
+        isRecommendation,
+        items,
+        permissionMenu,
+        renderCustomizedMenuItems,
+        renderFeatureMenuItem,
+        renderRecommendationMenuItem,
+    ]);
+    const renderSettings = () => {
+        if (!isCustomized) {
+            const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+            if (settingApp)
+                return isRecommendation
+                    ? renderRecommendationMenuItem(settingApp)
+                    : renderFeatureMenuItem(settingApp);
+        }
+        return null;
+    };
+    return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu, className: className },
+        React.createElement(LeftMenuNav, { className: "left-menu-nav" },
+            React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
+                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },
+                    React.createElement("div", { className: "image-wrapper" },
+                        React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),
+                React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
+                    React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
+                    React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
+                    React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
+                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))),
+                React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
+            isExpandable && !isRecommendation && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                        cursor: 'pointer',
+                        fontSize: '20px',
+                        transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
+                    }, onClick: onToggleChildMenu })))),
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu && isExpandable, isMarginTop: showLogo, className: "antsomi-scroll-box" },
+            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))));
+});

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

@@ -3,11 +3,11 @@ import React, { memo, useMemo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 // Stores
-import { useLeftMenuStore } from '../../stores';
+import { useLeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
 export const CommonMenu = memo(() => {
-    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
     const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
     return React.createElement(ChildMenu, { items: customChildren });
 });

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

@@ -1,6 +1,5 @@
 import React from 'react';
 interface CustomMenuProps {
-    onMenuItemClick?: (key: string, keyPath: string[]) => void;
 }
 export declare const CustomMenu: React.FC<CustomMenuProps>;
 export {};

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

@@ -3,12 +3,9 @@ import React, { memo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 // Hooks
-import { useLeftMenuStore } from '../../stores';
-export const CustomMenu = memo(({ onMenuItemClick }) => {
-    const appCustomMenuChildren = useLeftMenuStore(store => store.state.customMenuChildren);
-    const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
-    const handleMenuItemClick = (key, keyPath) => {
-        onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
-    };
-    return React.createElement(ChildMenu, { items: appCustomMenuChildren, onMenuClick: handleMenuItemClick });
+import { useLeftMenuContext } from '../../contexts';
+export const CustomMenu = memo(() => {
+    const appCustomMenuChildren = useLeftMenuContext(store => store.customMenuChildren);
+    const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
+    return React.createElement(ChildMenu, { items: appCustomMenuChildren, onMenuClick: onMenuClick });
 });

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

@@ -46,13 +46,13 @@ import { useHomeMenu } from './useHomeMenu';
 //   },
 // };
 export const HomeMenu = memo(() => {
-    const { children, removedDashboardId, isDashboardRemoving, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu();
+    const { children, removedDashboardId, isDashboardRemoving, isRecommendation, 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 },
+            !isRecommendation && (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("span", null, "Create")))),
             React.createElement("div", { className: "menu-list" },
                 React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))),
         React.createElement(ModalWrapper, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, 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/useHomeMenu.d.ts

@@ -3,12 +3,13 @@ export declare const useHomeMenu: () => {
     children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
     removedDashboardId: string;
     isDashboardRemoving: boolean;
+    isRecommendation: boolean | undefined;
     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;
+    onMenuClick: (key: string, _keyPath: string[]) => void;
     onRemoveDashboard: () => Promise<void>;
 };

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

@@ -15,8 +15,8 @@ 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';
-// Hooks
-import { useLeftMenuStore } from '../../stores';
+// Hooks;
+import { useLeftMenuContext } from '../../contexts';
 import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
 // Queries
@@ -24,10 +24,11 @@ import { useUpdateTask } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 export const useHomeMenu = () => {
     const { pathname, search } = window.location;
     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 appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
+    const dashboardParams = useLeftMenuContext(store => store.dashboardParams);
     const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
     const [removedDashboardId, setRemovedDashboardId] = useState('');
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
@@ -63,9 +64,8 @@ export const useHomeMenu = () => {
             replace({ search: urlParams.toString() });
         }
     }, [auth, navigate, onClickCreateDashboard, replace, urlParams]);
-    const onMenuClick = useCallback((key, _) => {
+    const onMenuClick = useCallback((key, _keyPath) => {
         const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
-        console.log('newPathName', newPathName);
         if (newPathName !== pathname) {
             navigate(newPathName);
         }
@@ -86,6 +86,7 @@ export const useHomeMenu = () => {
         children: customChildren,
         removedDashboardId,
         isDashboardRemoving,
+        isRecommendation,
         setRemovedDashboardId,
         onCreateNewReport,
         onOptionCallback,

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -1,7 +1,7 @@
 // Libraries
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useLayoutEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
-import { isEmpty, isNil, uniq } from 'lodash';
+import { isNil, uniq } from 'lodash';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 // Components
@@ -15,10 +15,11 @@ import { IconWrapper } from '../../../styled';
 import { ICON_SIZE } from '../../../constants';
 // Utils
 import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
-import { recursiveFindParentOfActiveItem } from './utils';
+import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
 // Hooks
-import { useLeftMenuStore } from '../../../stores';
 import { useNavigatePath } from '../../../hooks';
+// Contexts
+import { useLeftMenuContext } from '../../../contexts';
 const styles = {
     dropdownMenu: { width: '130px', padding: '8px 0' },
     dotIcon: { marginTop: '2px', zIndex: 1000, flexShrink: 0, fontSize: 16 },
@@ -26,58 +27,77 @@ const styles = {
         fontSize: ICON_SIZE,
         color: 'inherit',
     },
-    menuItemTitle: { flex: '1 1 0%', maxWidth: '100%' },
+    menuItemTitle: { flex: '1 1 0%', maxWidth: '100%', overflow: 'hidden' },
 };
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    const { auth, env } = useLeftMenuStore(store => store.state.appConfig) || {};
-    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
-    const menuItems = useLeftMenuStore(store => store.state.menuItems);
-    const customItems = useLeftMenuStore(store => store.state.customItems);
-    const isCustomized = useLeftMenuStore(store => store.state.isCustomized);
-    const customActiveCurrentKey = useLeftMenuStore(store => store.state.customActiveCurrentKey);
-    const setLeftMenuState = useLeftMenuStore(store => store.setState);
+    const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
+    const menuItems = useLeftMenuContext(store => store.menuItems);
+    const customItems = useLeftMenuContext(store => store.customItems);
+    const isCustomized = useLeftMenuContext(store => store.isCustomized);
+    const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const customActiveCurrentKey = useLeftMenuContext(store => store.customActiveCurrentKey);
+    const setLeftMenuState = useLeftMenuContext(store => store.setState);
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     const [openKeys, setOpenKeys] = useState([]);
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
-    useEffect(() => {
+    useLayoutEffect(() => {
         var _a;
-        if (isCustomized) {
-            setCurrentActiveItem(customActiveCurrentKey);
-            // Find parent key of active menu item to open it
-            const parentKey = recursiveFindParentOfActiveItem({
-                activeMenuItem: customActiveCurrentKey,
-                menuItems: customItems,
-            });
-            if (parentKey) {
-                setOpenKeys(prev => [...prev, parentKey]);
-            }
-        }
-        else {
-            const url = `${pathname}${hash}`;
-            // Active menu item by current url
-            const activeMenuItem = (_a = findLastMatchedItemByUrl({
-                url,
-                menuItems,
-                auth,
-                env,
-            })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
-            if (activeMenuItem && activeMenuItem !== currentActiveItem) {
-                setCurrentActiveItem(activeMenuItem);
+        switch (true) {
+            case isCustomized: {
+                setCurrentActiveItem(customActiveCurrentKey);
                 // Find parent key of active menu item to open it
                 const parentKey = recursiveFindParentOfActiveItem({
-                    activeMenuItem,
-                    menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
+                    activeMenuItem: customActiveCurrentKey,
+                    menuItems: customItems,
                 });
                 if (parentKey) {
                     setOpenKeys(prev => [...prev, parentKey]);
                 }
-                // Active App Item having code matching url
-                const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth, env });
-                if (matchAppCode && matchAppCode !== activeAppCode) {
-                    setLeftMenuState({ activeAppCode: matchAppCode });
+                break;
+            }
+            case isRecommendation: {
+                const activeItem = findItemByPermissionCode({
+                    permissionCode: customActiveCurrentKey,
+                    menuItems: items,
+                });
+                if (activeItem) {
+                    if (activeItem.permission_code !== 'JOURNEY')
+                        setCurrentActiveItem(activeItem === null || activeItem === void 0 ? void 0 : activeItem.key);
+                    // Find parent key of active menu item to open it
+                    const parentKey = recursiveFindParentOfActiveItem({
+                        activeMenuItem: activeItem === null || activeItem === void 0 ? void 0 : activeItem.key,
+                        menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => (Object.assign(Object.assign({}, getMenuItem(item)), { key: (item === null || item === void 0 ? void 0 : item.permission_code) || '' }))),
+                    });
+                    if (parentKey) {
+                        setOpenKeys(prev => [...prev, parentKey]);
+                    }
+                }
+                break;
+            }
+            default: {
+                const url = `${pathname}${hash}`;
+                // Active menu item by current url
+                const activeMenuItem = (_a = findLastMatchedItemByUrl({ url, menuItems, auth })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
+                if (activeMenuItem && activeMenuItem !== currentActiveItem) {
+                    setCurrentActiveItem(activeMenuItem);
+                    // Find parent key of active menu item to open it
+                    const parentKey = recursiveFindParentOfActiveItem({
+                        activeMenuItem,
+                        menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
+                    });
+                    if (parentKey) {
+                        setOpenKeys(prev => [...prev, parentKey]);
+                    }
+                    // Active App Item having code matching url
+                    const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
+                    if (matchAppCode && matchAppCode !== activeAppCode) {
+                        setLeftMenuState({ activeAppCode: matchAppCode });
+                    }
                 }
+                break;
             }
         }
     }, [
@@ -92,18 +112,44 @@ export const ChildMenu = memo(props => {
         isCustomized,
         customActiveCurrentKey,
         customItems,
-        env,
+        isRecommendation,
     ]);
     const onClick = e => {
-        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
+        var _a;
+        if (isRecommendation) {
+            const permissionCode = (_a = recursiveFindItemByKey({
+                activeKey: e.key,
+                menuItems: items || [],
+            })) === null || _a === void 0 ? void 0 : _a.permission_code;
+            const permissionCodePath = (() => {
+                var _a;
+                const array = [];
+                (_a = e.keyPath) === null || _a === void 0 ? void 0 : _a.forEach(item => {
+                    var _a;
+                    const permissionCode = (_a = recursiveFindItemByKey({
+                        activeKey: item,
+                        menuItems: items || [],
+                    })) === null || _a === void 0 ? void 0 : _a.permission_code;
+                    if (permissionCode)
+                        array.push(permissionCode);
+                });
+                return uniq(array);
+            })();
+            if (permissionCode)
+                onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(permissionCode, permissionCodePath);
+            setCurrentActiveItem(e.key);
+        }
+        else {
+            onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
+        }
     };
     const customMenuItems = (args) => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
-            const renderLabel = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(LabelWrapper, null,
-                React.createElement(LabelCustom, { ellipsis: { tooltip: label }, style: { flex: '1 1 0%' } }, label),
-                React.createElement(OptionDropdownWrapper, null,
+            const renderLabel = () => (React.createElement(LabelWrapper, { hasOption: !!(options === null || options === void 0 ? void 0 : options.length) },
+                React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
+                (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, null,
                     React.createElement(Dropdown, { menu: {
                             items: options,
                             onClick: e => {
@@ -113,13 +159,15 @@ export const ChildMenu = memo(props => {
                             },
                             style: styles.dropdownMenu,
                         }, trigger: ['click'] },
-                        React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon }))))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+                        React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon })))),
+                !(children === null || children === void 0 ? void 0 : children.length) && isRecommendation && !!menu_item_path && (React.createElement(Link, { to: getPath(menu_item_path), className: "icon-link", onClick: e => e.stopPropagation() },
+                    React.createElement(Icon, { type: "icon-ants-open-in-new-window" })))));
             const renderIcon = () => {
                 var _a;
                 return !!icon || !!logo_url ? (React.createElement(Flex, { style: { flexShrink: 0 }, align: "center" }, !isNil(icon) ? (React.createElement(IconWrapper, null,
                     React.createElement(Icon, { type: icon }))) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null)) : null;
             };
-            const renderTitle = () => !menu_item_path ? (renderLabel()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()));
+            const renderTitle = () => !menu_item_path || isRecommendation ? (renderLabel()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link", onClick: e => e.stopPropagation() }, renderLabel()));
             return {
                 key,
                 label: (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { height: '100%' } },

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const LabelWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    hasOption?: boolean | undefined;
+}, never>;
 export declare const LabelCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const OptionDropdownWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.js

@@ -8,6 +8,33 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { ICON_SIZE } from '../../../constants';
 export const LabelWrapper = styled(Flex) `
   width: 100%;
+  overflow: hidden;
+  ${({ hasOption }) => hasOption
+    ? `
+    font-weight: 400 !important;
+    font-size: 11px !important;
+  `
+    : ''}
+
+  .icon-link {
+    flex-shrink: 0;
+    width: fit-content;
+    display: none;
+
+    i {
+      font-size: 15px !important;
+    }
+
+    &::before {
+      width: fit-content !important;
+    }
+  }
+
+  &:hover {
+    .icon-link {
+      display: flex;
+    }
+  }
 `;
 LabelWrapper.defaultProps = {
     gap: 10,
@@ -17,6 +44,8 @@ LabelWrapper.defaultProps = {
 export const LabelCustom = styled(Typography.Text) `
   font-size: inherit !important;
   color: inherit !important;
+  flex: 1 1 0%;
+  overflow: hidden;
 `;
 export const OptionDropdownWrapper = styled(Flex) `
   width: 20px;

package/es/components/organism/LeftMenu/components/common/ChildMenu/utils.d.ts

@@ -29,3 +29,11 @@ export declare const recursiveFindParentOfActiveItem: (args: {
     activeMenuItem: string;
     menuItems: TMenuItem[];
 }) => string | undefined;
+export declare const recursiveFindItemByKey: (args: {
+    activeKey: string;
+    menuItems: TMenuItem[];
+}) => TMenuItem | undefined;
+export declare const findItemByPermissionCode: (args: {
+    permissionCode: string;
+    menuItems: TMenuItem[];
+}) => TMenuItem | undefined;

package/es/components/organism/LeftMenu/components/common/ChildMenu/utils.js

@@ -88,3 +88,49 @@ export const recursiveFindParentOfActiveItem = (args) => {
         });
     }
 };
+export const recursiveFindItemByKey = (args) => {
+    try {
+        const { activeKey, menuItems } = args;
+        for (const item of menuItems) {
+            if (item.key === activeKey) {
+                return item;
+            }
+            const childActiveItem = recursiveFindItemByKey({
+                activeKey,
+                menuItems: (item === null || item === void 0 ? void 0 : item.children) || [],
+            });
+            if (childActiveItem)
+                return childActiveItem;
+        }
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: recursiveFindItemByKey.name,
+            args,
+        });
+    }
+};
+export const findItemByPermissionCode = (args) => {
+    try {
+        const { permissionCode, menuItems } = args;
+        const matchedItems = [];
+        const recursiveFindItemByPermissionCode = (items) => {
+            for (const item of items) {
+                if (item.permission_code === permissionCode) {
+                    matchedItems.push(item);
+                }
+                recursiveFindItemByPermissionCode((item === null || item === void 0 ? void 0 : item.children) || []);
+            }
+        };
+        recursiveFindItemByPermissionCode(menuItems);
+        return matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.pop();
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findItemByPermissionCode.name,
+            args,
+        });
+    }
+};