@antscorp/antsomi-ui 1.3.5-beta.209 → 1.3.5-beta.210

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

@@ -1,6 +1,6 @@
 export const HOME_REPORT_ROUTES = {
-    DETAIL: ':reportId',
-    CONFIGURE: ':reportId/configure',
+    DETAIL: 'detail/:dashboardId',
+    CONFIGURE: 'detail/:dashboardId/configure',
     CREATE: 'create',
 };
 export const CONFIG_OPTIONS = {

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

@@ -33,7 +33,7 @@ export const useHomeMenu = () => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
             case CONFIG_OPTIONS.CONFIGURE.key: {
-                const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CONFIGURE), Object.assign(Object.assign({}, auth), { reportId: menuItemKey }));
+                const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CONFIGURE), Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
                 if (newPathName !== pathname) {
                     history.push(newPathName);
                 }
@@ -54,7 +54,7 @@ export const useHomeMenu = () => {
         history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CREATE), auth));
     }, [auth, history, getHomePath]);
     const onMenuClick = useCallback((key, _) => {
-        const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.DETAIL), Object.assign(Object.assign({}, auth), { reportId: key }));
+        const newPathName = getGeneratePath(getHomePath(HOME_REPORT_ROUTES.DETAIL), Object.assign(Object.assign({}, auth), { dashboardId: key }));
         if (newPathName !== pathname) {
             history.push(newPathName);
         }

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

@@ -12,19 +12,19 @@ import { MenuItemImage } from './components';
 import { LabelCustom, MenuWrapper } from './styled';
 // Constants
 import { ICON_SIZE } from '../../../constants';
-import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Utils
-import { findActiveAppCodeByUrl, getGeneratePath } from '../../../utils';
-import { findActiveMenuItemByUrl, recursiveFindParentOfActiveItem } from './utils';
+import { findActiveAppCodeByUrl, findLastMatchedCodeByUrl } from '../../../utils';
+import { recursiveFindParentOfActiveItem } from './utils';
 import { random } from '@antscorp/antsomi-ui/es/utils';
+// Hooks
 import { useLeftMenuStore } from '../../../stores';
+import { useNavigatePath } from '../../../hooks/useNavigatePath';
 export const ChildMenu = memo(props => {
     const { items = [], parentKey, onMenuClick } = props;
     // Contexts
     const auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
-    const env = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.env);
     // Stores
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const menuItems = useLeftMenuStore(store => store.state.menuItems);
@@ -36,11 +36,12 @@ export const ChildMenu = memo(props => {
     const randomMenuWrapperId = random(10);
     // Hooks
     const { pathname, hash, search } = useLocation();
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     // Side Effects
     useEffect(() => {
         const url = `${pathname}${hash}${search}`;
         /** Active menu item by current url */
-        const activeMenuItem = findActiveMenuItemByUrl({ url, menuItems, auth });
+        const activeMenuItem = findLastMatchedCodeByUrl({ url, menuItems, auth });
         if (activeMenuItem && activeMenuItem !== currentActiveItem) {
             setCurrentActiveItem(activeMenuItem);
             /** Find parent key of active menu item to open it */
@@ -75,8 +76,7 @@ export const ChildMenu = memo(props => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
-            const { key, label, children, icon, logo_url, menu_item_path, menu_item_domain, options, optionCallback, } = item;
-            const domain = !isNil(menu_item_domain) && env === ENV.DEV ? menu_item_domain : '';
+            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
             const labelComponent = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { width: '100%' }, className: "child-menu-label" },
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
                 React.createElement(Dropdown, { menu: {
@@ -90,7 +90,7 @@ export const ChildMenu = memo(props => {
                     React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: { marginTop: '2px', zIndex: 1000 } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
             return {
                 key,
-                label: isString(menu_item_path) ? (React.createElement(Link, { to: getGeneratePath(`${domain}${menu_item_path}`, auth), className: "menu-link" }, labelComponent())) : (labelComponent()),
+                label: isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent()),
                 icon: !isNil(icon) ? (React.createElement(Icon, { type: icon, style: { fontSize: ICON_SIZE } })) : !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 })) : null,
                 children: customMenuItems({ parent: item, items: children }),
             };

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

@@ -21,6 +21,11 @@ export const MenuWrapper = styled.div `
       margin: 0 !important;
       width: 100% !important;
 
+      div {
+        width: ${ICON_SIZE}px;
+        height: ${ICON_SIZE}px;
+      }
+
       [role='icon'] {
         font-size: ${ICON_SIZE}px !important;
       }

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

@@ -1,5 +1,17 @@
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+/**
+ * Finds the active menu item code based on the provided URL within the given menu items.
+ * ATTENTION: Start finding from level 2 because level 1 contains apps
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu item paths.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @param {Partial<PayloadInfo>} [args.auth] - Additional authentication information (optional).
+ * @returns {string | undefined} The menu item code of the active menu item or undefined if not found.
+ *
+ * @throws Will throw an error if any issue occurs during the process.
+ */
 export declare const findActiveMenuItemByUrl: (args: {
     url: string;
     menuItems: TFeatureMenu[];

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

@@ -1,9 +1,19 @@
-// Libraries
-import { isNil } from 'lodash';
 // Utils
 import { getGeneratePath } from '../../../utils';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/organism/LeftMenu/components/common/ChildMenu/utils.ts';
+/**
+ * Finds the active menu item code based on the provided URL within the given menu items.
+ * ATTENTION: Start finding from level 2 because level 1 contains apps
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu item paths.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search within.
+ * @param {Partial<PayloadInfo>} [args.auth] - Additional authentication information (optional).
+ * @returns {string | undefined} The menu item code of the active menu item or undefined if not found.
+ *
+ * @throws Will throw an error if any issue occurs during the process.
+ */
 export const findActiveMenuItemByUrl = (args) => {
     try {
         const { url, menuItems, auth } = args;
@@ -12,8 +22,7 @@ export const findActiveMenuItemByUrl = (args) => {
             const recursiveFindActiveItem = (items) => {
                 let activeItem;
                 for (const item of items) {
-                    if (!isNil(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
-                        url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                    if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
                         activeItem = item === null || item === void 0 ? void 0 : item.menu_item_code;
                         break;
                     }

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

@@ -7,7 +7,6 @@ export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
     activeAppCode: string;
     permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
-    appConfig: import("@antscorp/antsomi-ui/es/providers").AppConfigProviderProps;
     onToggleChildMenu: () => void;
     onMouseEnter: (key: string) => void;
     onMouseLeave: () => void;

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

@@ -8,7 +8,7 @@ import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Queries
 import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Utils
-import { findActiveAppCodeByUrl, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+import { findActiveAppCodeByUrl, findLastMatchedCodeByUrl, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
 // Store
 import { useLeftMenuStore } from '../stores';
 const initialState = {
@@ -17,7 +17,7 @@ const initialState = {
 };
 export const useLeftMenu = (props) => {
     // Props
-    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true } = props;
+    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, onActiveMenuCodeChange } = props;
     // Hooks
     const { pathname, hash, search } = useLocation();
     // Contexts
@@ -93,9 +93,7 @@ export const useLeftMenu = (props) => {
     // Variables
     const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
     // Memos
-    const permissionMenu = useMemo(() => sortBy(recursivePermissionMenu((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], flattenMenuPermission), [
-        'level_position',
-    ]), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
+    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
     const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
         menuList: permissionMenu,
         auth,
@@ -103,6 +101,9 @@ export const useLeftMenu = (props) => {
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
     }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
     // Side Effects
+    /**
+     * Change list menu children when hovering or activating items, giving priority to hovering items
+     */
     useEffect(() => {
         var _a;
         const appCode = state.hoverItem ? state.hoverItem : activeAppCode;
@@ -133,6 +134,26 @@ export const useLeftMenu = (props) => {
         search,
         setLeftMenuState,
     ]);
+    /**
+     * Callback function when url change
+     */
+    useEffect(() => {
+        const url = `${pathname}${hash}${search}`;
+        const matchedCode = findLastMatchedCodeByUrl({
+            url,
+            menuItems: mappingChildrenMenu,
+            auth,
+        });
+        onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(matchedCode, flattenMenuPermission);
+    }, [
+        auth,
+        flattenMenuPermission,
+        hash,
+        mappingChildrenMenu,
+        onActiveMenuCodeChange,
+        pathname,
+        search,
+    ]);
     /* Callbacks */
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
@@ -154,7 +175,6 @@ export const useLeftMenu = (props) => {
         activeAppCode,
         /* Data Queries */
         permissionMenu,
-        appConfig,
         /* Callbacks */
         onToggleChildMenu,
         onMouseEnter,

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

@@ -0,0 +1,5 @@
+export declare const useNavigatePath: () => {
+    isPushDifferentDomain: (domain: string | null, path: string | null) => boolean;
+    getPath: (domain: string | null, path: string | null) => string;
+    navigatePath: (domain: string | null, path: string | null) => void;
+};

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

@@ -0,0 +1,43 @@
+// Libraries
+import { useContextSelector } from 'use-context-selector';
+import { useCallback } from 'react';
+import { isNil } from 'lodash';
+// Contexts
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Utils
+import { getGeneratePath } from '../utils';
+// Constants
+import { ENV } from '@antscorp/antsomi-ui/es/config';
+export const useNavigatePath = () => {
+    // Contexts
+    const { auth, env } = useContextSelector(AppConfigContext, state => state);
+    // Callbacks
+    const isPushDifferentDomain = useCallback((domain, path) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (env === ENV.DEV)
+            return false;
+        const customDomain = domain !== null && domain !== void 0 ? domain : '';
+        const splitNextPath = (path === null || path === void 0 ? void 0 : path.split('#')) || ['', ''];
+        const isCurrentPathIncludeHash = (_b = (_a = window.location) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.includes('#');
+        const isNextPathIncludeHash = path === null || path === void 0 ? void 0 : path.includes('#');
+        if (isCurrentPathIncludeHash && isNextPathIncludeHash) {
+            const currentRoute = ((_e = (_d = (_c = window.location.href) === null || _c === void 0 ? void 0 : _c.split) === null || _d === void 0 ? void 0 : _d['#']) === null || _e === void 0 ? void 0 : _e[0]) || '';
+            const nextRoute = `${customDomain}${splitNextPath[0]}`;
+            return currentRoute !== nextRoute;
+        }
+        return !!customDomain && customDomain !== ((_f = window.location) === null || _f === void 0 ? void 0 : _f.origin);
+    }, [env]);
+    const getPath = useCallback((domain, path) => {
+        var _a;
+        if ((path === null || path === void 0 ? void 0 : path.includes('#')) && isPushDifferentDomain(domain, path)) {
+            const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+            return getGeneratePath(customPath, auth);
+        }
+        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}`, auth);
+    }, [auth, isPushDifferentDomain]);
+    const navigatePath = useCallback((domain, path) => {
+        const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;
+        window.location.assign(getGeneratePath(`${newDomain}${path}`, auth));
+    }, [auth, env]);
+    return { isPushDifferentDomain, getPath, navigatePath };
+};

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

@@ -1,9 +1,11 @@
 import React from 'react';
+import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 export interface LeftMenuProps {
     objectType?: string;
     objectId?: number;
     isGrouped?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    onActiveMenuCodeChange?: (activeMenuCode?: string, flattenPermissionList?: FeatureMenuPermission[]) => void;
 }
 export declare const LeftMenu: React.FC<LeftMenuProps>;

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

@@ -10,14 +10,12 @@ import SubLogoAntsomi from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-
 // Styled
 import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, } from './styled';
 // Constants
-import { ENV } from '@antscorp/antsomi-ui/es/config';
 import { APP_KEYS, ICON_SIZE } from './constants';
 // Components
 import { ProfilesMenu, ContentMenu, DataMenu, MarketingMenu, HomeMenu, InsightsMenu, SettingsMenu, TemplatesMenu, } from './components';
 // Hooks
 import { useLeftMenu } from './hooks';
-// Utils
-import { getGeneratePath } from './utils';
+import { useNavigatePath } from './hooks/useNavigatePath';
 export const LeftMenu = memo(props => {
     var _a;
     const { style, className } = props;
@@ -28,9 +26,10 @@ export const LeftMenu = memo(props => {
     /* Store */
     activeAppCode, 
     /* Data Queries */
-    permissionMenu, appConfig, 
+    permissionMenu, 
     /* Callbacks */
     onToggleChildMenu, onMouseEnter, onMouseLeave, } = useLeftMenu(props);
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     // Memo
     const childMenu = useMemo(() => {
         const selectedFeatureKey = state.hoverItem ? state.hoverItem : activeAppCode;
@@ -66,14 +65,13 @@ export const LeftMenu = memo(props => {
     // Render components
     const renderFeatureMenuItems = (item) => {
         const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
-        const domain = !isNil(menu_item_domain) && (appConfig === null || appConfig === void 0 ? void 0 : appConfig.env) === ENV.DEV ? menu_item_domain : '';
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
         const labelComponent = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
             React.createElement("div", { className: "icon-wrapper" }, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name, style: { fontSize: ICON_SIZE } })),
             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) ? (React.createElement(Link, { to: getGeneratePath(`${domain}${menu_item_path}`, appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth), className: "menu-link" }, labelComponent())) : (labelComponent())));
+        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) }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent())));
     };
     return (React.createElement(LeftMenuNavWrapper, { style: style, className: className },
         React.createElement(LeftMenuNav, null,

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

@@ -11,7 +11,7 @@ export const PopoverWrapper = styled.div `
   visibility: hidden;
   position: absolute;
   background-color: white;
-  left: 70px;
+  left: 69px;
   border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
   bottom: 15px;
   width: 230px;

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

@@ -25,7 +25,7 @@ export declare const recursivePermissionMenu: (menuItems: TFeatureMenu[], MenuPe
  * @returns {string} The generated path with replaced parameters.
  */
 export declare const getGeneratePath: (path: string, params?: Partial<PayloadInfo> & {
-    reportId?: string;
+    dashboardId?: string;
     channelId?: number;
 }) => string;
 /**
@@ -54,3 +54,8 @@ export declare const findActiveAppCodeByUrl: (args: {
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
 }) => string | undefined;
+export declare const findLastMatchedCodeByUrl: (args: {
+    url: string;
+    menuItems: TFeatureMenu[];
+    auth?: Partial<PayloadInfo>;
+}) => string | undefined;

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import { isArray, isEmpty, isNil } from 'lodash';
+import { isArray, isEmpty, sortBy } from 'lodash';
 import { generatePath } from 'react-router-dom';
 // Constants
 import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, MARKETING_CHANNEL_CODE, RENDER_OPTION, } from '../constants';
@@ -54,9 +54,11 @@ export const recursivePermissionMenu = (menuItems, MenuPermissions) => {
         if (menu_item_type !== MENU_ITEM_TYPE.MENU) {
             return true;
         }
-        return MenuPermissions === null || MenuPermissions === void 0 ? void 0 : MenuPermissions.find(({ app_code = '', menu_code = '' }) => !isNil(permission_code) && [app_code, menu_code].includes(permission_code));
+        return MenuPermissions === null || MenuPermissions === void 0 ? void 0 : MenuPermissions.find(({ app_code = '', menu_code = '' }) => !!permission_code && [app_code, menu_code].includes(permission_code));
     })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (isArray(item.children)
-        ? { children: recursivePermissionMenu(item.children, MenuPermissions) }
+        ? {
+            children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), MenuPermissions),
+        }
         : {}))))) === null || _b === void 0 ? void 0 : _b.filter(item => !(isArray(item.children) && isEmpty(item.children)));
     return menu;
 };
@@ -66,12 +68,13 @@ export const recursivePermissionMenu = (menuItems, MenuPermissions) => {
  */
 export const getGeneratePath = (path, params) => {
     try {
-        return generatePath(path.replace('#', `/${params === null || params === void 0 ? void 0 : params.portalId}#`), {
-            user_id: (params === null || params === void 0 ? void 0 : params.userId) || '-1',
-            networkId: !isNil(params === null || params === void 0 ? void 0 : params.portalId) ? params === null || params === void 0 ? void 0 : params.portalId : -1,
-            portalId: !isNil(params === null || params === void 0 ? void 0 : params.portalId) ? params === null || params === void 0 ? void 0 : params.portalId : -1,
-            reportId: (params === null || params === void 0 ? void 0 : params.reportId) || '-1',
-            channelId: !isNil(params === null || params === void 0 ? void 0 : params.channelId) ? params === null || params === void 0 ? void 0 : params.channelId : -1,
+        const { portalId, userId, dashboardId, channelId } = params || {};
+        return generatePath(path, {
+            user_id: userId !== null && userId !== void 0 ? userId : '-1',
+            networkId: portalId !== null && portalId !== void 0 ? portalId : -1,
+            portalId: portalId !== null && portalId !== void 0 ? portalId : -1,
+            dashboardId: dashboardId !== null && dashboardId !== void 0 ? dashboardId : '-1',
+            channelId: channelId !== null && channelId !== void 0 ? channelId : -1,
         });
     }
     catch (error) {
@@ -162,8 +165,7 @@ export const findActiveAppCodeByUrl = (args) => {
         const recursiveCheckHasActiveChild = (items) => {
             let matchAppCode = false;
             for (const item of items) {
-                if (!isNil(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
-                    url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
                     matchAppCode = true;
                     break;
                 }
@@ -177,7 +179,7 @@ export const findActiveAppCodeByUrl = (args) => {
             return matchAppCode;
         };
         for (const menuItem of menuItems) {
-            if (!isNil(menuItem === null || menuItem === void 0 ? void 0 : menuItem.menu_item_path) &&
+            if (!!(menuItem === null || menuItem === void 0 ? void 0 : menuItem.menu_item_path) &&
                 url.includes(getGeneratePath(menuItem.menu_item_path, auth))) {
                 matchAppCode = menuItem.menu_item_code;
                 break;
@@ -198,3 +200,28 @@ export const findActiveAppCodeByUrl = (args) => {
         });
     }
 };
+export const findLastMatchedCodeByUrl = (args) => {
+    try {
+        const { url, menuItems, auth } = args;
+        const matchedItemCodes = [];
+        const recursiveFindActiveItem = (items) => {
+            for (const item of items) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                    matchedItemCodes.push(item.menu_item_code);
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    recursiveFindActiveItem(item.children);
+                }
+            }
+        };
+        recursiveFindActiveItem(menuItems || []);
+        return matchedItemCodes === null || matchedItemCodes === void 0 ? void 0 : matchedItemCodes.pop();
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findLastMatchedCodeByUrl.name,
+            args,
+        });
+    }
+};

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

@@ -7,7 +7,9 @@ interface LayoutProps {
     headerProps?: Partial<HeaderV2Props>;
     leftMenuProps?: LeftMenuProps;
     processingNotificationProps?: Partial<ProcessingNotificationProps>;
-    workspaceProps?: React.HTMLAttributes<HTMLDivElement>;
+    workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {
+        workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
+    };
 }
 export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
 declare global {

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import AntsProcessingNotification from '@antscorp/processing-notification';
 import { merge } from 'lodash';
@@ -27,16 +27,19 @@ import { PERMISSION_API, SOCKET_API } from '../../../constants';
 // Css
 import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
+import { checkingRoleScope } from './utils';
 export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, } = props;
     const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
+    const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
     // Selectors
     const { auth, languageCode } = useContextSelector(AppConfigContext, state => state);
     const { token, userId, portalId } = auth || {};
     const headerStore = useLayoutStore(store => store.state.header);
+    const [showAccountSelection, setShowAccountSelection] = useState(false);
     // Memo
     const initialHeaderProps = useMemo(() => {
-        var _a;
+        var _a, _b;
         return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: {
                 configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
                         p_timezone: 'Asia/Singapore',
@@ -45,18 +48,30 @@ export const Layout = memo(props => {
                         embeddedData: {},
                         INSIGHT_U_OGS: 'uogs',
                     } }),
-            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }) }));
-    }, [headerProps]);
+            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: ((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
+    }, [headerProps, showAccountSelection]);
     const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain: PERMISSION_API, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [languageCode, portalId, token, userId, processingNotificationProps]);
+    // const showAccountSelection = useMemo(() => HIDE_MODAL_ACCOUNT.includes(menuCodeActive), []);
+    // const showAccountSelection =
+    //   !state.hasRoleBreadcrumb ||
+    //   HIDE_MODAL_ACCOUNT.includes(menuCodeActive) ||
+    //   isHiddenAccountJourney;
+    const onActiveMenuCodeChange = useCallback((activeMenuCode, flattenPermissionList) => {
+        const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => activeMenuCode === item.app_code || activeMenuCode === item.menu_code);
+        const roleScope = activeMenuCode && menuPermission
+            ? checkingRoleScope({ menuCode: activeMenuCode, menuPermission })
+            : false;
+        setShowAccountSelection(roleScope);
+    }, []);
     return (React.createElement(LayoutWrapper, null,
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),
         React.createElement(Flex, { className: "layout-body" },
-            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}` }, restOfLeftMenuProps)),
+            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}` }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange })),
             React.createElement(ContentWrapper, null,
-                React.createElement("div", Object.assign({}, workspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
+                React.createElement("div", Object.assign({}, restOfWorkspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
                     React.createElement(NotificationWrapper, null,
                         React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
-                    React.createElement(ChildrenWrapper, null,
+                    React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps),
                         React.createElement("div", null, children)))))));
 });

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

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

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

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

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

@@ -0,0 +1,29 @@
+export declare const MENU_CODE: {
+    VISITOR: string;
+    PLANNINGS: string;
+    CUSTOMER: string;
+    SEGMENT: string;
+    EVENT_SOURCES: string;
+    ANALYTICS_MODELS: string;
+    JOURNEY: string;
+    DESTINATIONS_HUB: string;
+    ACCOUNT: string;
+    DATA_ENCRYPT: string;
+    PORTAL_PREFERENCES: string;
+    BUSINESS_OBJECT: string;
+    PROMOTION_CENTER: string;
+    LABELS: string;
+    DASHBOARD_OVERVIEW: string;
+    MEDIA_TEMPLATE: string;
+    JSON_TEMPLATE: string;
+    EMAIL_TEMPLATE: string;
+    DIAGRAM: string;
+    RFM: string;
+    LINK_MANAGEMENT: string;
+    CONVERSION: string;
+    OVERVIEW: string;
+    DASHBOARD: string;
+    DATA_VIEW: string;
+    DATA_OBJECT: string;
+    JOURNEY_TACTIC: string;
+};

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

@@ -0,0 +1,30 @@
+export const MENU_CODE = {
+    VISITOR: `VISITOR`,
+    PLANNINGS: 'PLANNINGS',
+    CUSTOMER: `CUSTOMER`,
+    SEGMENT: `SEGMENT`,
+    EVENT_SOURCES: `EVENT_SOURCES`,
+    ANALYTICS_MODELS: `ANALYTICS_MODELS`,
+    JOURNEY: `JOURNEY`,
+    DESTINATIONS_HUB: `DESTINATIONS_HUB`,
+    ACCOUNT: `ACCOUNT`,
+    DATA_ENCRYPT: `DATA_ENCRYPT`,
+    PORTAL_PREFERENCES: 'PORTAL_PREFERENCES',
+    // PORTAL_PREFERENCES: 'ACCOUNT',
+    BUSINESS_OBJECT: 'BUSINESS_OBJECT',
+    PROMOTION_CENTER: 'PROMOTION_CENTER',
+    LABELS: 'LABELS',
+    DASHBOARD_OVERVIEW: 'DASHBOARD_OVERVIEW',
+    MEDIA_TEMPLATE: 'MEDIA_TEMPLATE',
+    JSON_TEMPLATE: 'JSON_TEMPLATE',
+    EMAIL_TEMPLATE: 'EMAIL_TEMPLATE',
+    DIAGRAM: 'DATA_SCHEMA',
+    RFM: 'RFM',
+    LINK_MANAGEMENT: 'LINK_MANAGEMENT',
+    CONVERSION: 'CONVERSION',
+    OVERVIEW: 'JOURNEY_OVERVIEW',
+    DASHBOARD: 'DASHBOARD',
+    DATA_VIEW: 'DATA_VIEW',
+    DATA_OBJECT: 'DATA_OBJECT',
+    JOURNEY_TACTIC: 'JOURNEY_TACTIC',
+};

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

@@ -0,0 +1,6 @@
+export declare const APP_ROLE_SCOPE: {
+    NONE: number;
+    CREATED_BY_USER: number;
+    MANAGEMENT_BY_USER: number;
+    EVERYTHING: number;
+};

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

@@ -0,0 +1,6 @@
+export const APP_ROLE_SCOPE = {
+    NONE: 1,
+    CREATED_BY_USER: 2,
+    MANAGEMENT_BY_USER: 3,
+    EVERYTHING: 4,
+};

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

@@ -2,15 +2,20 @@ import { HeaderV2Props } from '../../../molecules';
 import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
 export interface HeaderStore extends Partial<HeaderV2Props> {
 }
+export interface LeftMenuStore {
+    menuCodeActive?: string;
+}
 export interface WorkspaceStore {
 }
 export interface LayoutStoreState {
     header: HeaderStore;
+    leftMenu: LeftMenuStore;
     workspace: WorkspaceStore;
 }
 interface LayoutStore {
     state: LayoutStoreState;
     setHeaderState: (state: DeepPartial<HeaderStore>) => void;
+    setLeftMenuState: (state: DeepPartial<LeftMenuStore>) => void;
     setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
     setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
 }

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

@@ -3,6 +3,7 @@ import { create } from 'zustand';
 import { merge } from 'lodash';
 const initialState = {
     header: {},
+    leftMenu: {},
     workspace: {},
 };
 export const useLayoutStore = create(set => ({
@@ -11,6 +12,9 @@ export const useLayoutStore = create(set => ({
     setHeaderState: newState => set(store => ({
         state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
     })),
+    setLeftMenuState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: Object.assign(Object.assign({}, store.state.leftMenu), newState) }),
+    })),
     setWorkspaceState: newState => set(store => ({
         state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
     })),

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

@@ -0,0 +1 @@
+export * from './permission';

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

@@ -0,0 +1 @@
+export * from './permission';

package/es/components/template/Layout/utils/permission.d.ts

@@ -0,0 +1,16 @@
+import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export declare const checkingRoleScope: (args: {
+    menuCode: string;
+    menuPermission: FeatureMenuPermission;
+    action?: string;
+    scope?: string;
+    isExactly?: boolean;
+}) => boolean;

package/es/components/template/Layout/utils/permission.js

@@ -0,0 +1,48 @@
+import { MENU_CODE, APP_ROLE_SCOPE } from '../constants';
+const EDIT_ROLE = new Set(['CREATE', 'UPDATE', 'DELETE']);
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export const checkingRoleScope = (args) => {
+    const { menuCode, menuPermission, scope = APP_ROLE_SCOPE.NONE, action = 'NONE', isExactly = false, } = args;
+    if (![
+        MENU_CODE.JOURNEY,
+        MENU_CODE.LABELS,
+        MENU_CODE.DASHBOARD_OVERVIEW,
+        MENU_CODE.MEDIA_TEMPLATE,
+        MENU_CODE.EMAIL_TEMPLATE,
+        MENU_CODE.SEGMENT,
+        MENU_CODE.DESTINATIONS_HUB,
+        MENU_CODE.BUSINESS_OBJECT,
+        MENU_CODE.DATA_OBJECT,
+        MENU_CODE.DATA_VIEW,
+    ].includes(menuCode))
+        return false;
+    const menuRole = menuPermission;
+    let isOK = false;
+    // role Create/Update/Delete is similar current define, only has view and edit(create/delete)
+    const { selected_view = 1, selected_edit = 1 } = menuRole;
+    if (isExactly) {
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) === Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) === Number(scope);
+        }
+    }
+    else {
+        // eslint-disable-next-line no-lonely-if
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) >= Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) >= Number(scope);
+        }
+    }
+    return isOK;
+};

package/package.json

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

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

@@ -1,9 +0,0 @@
-export declare function getCurrentUserId(): string;
-export declare const convertShareAccessToFE: (shareAccess?: any) => {
-    accessInfo: {
-        general: any;
-        listAccess: any[];
-    };
-    isAllowEdit: boolean;
-    isPublic: any;
-};

package/es/services/LeftMenu/utils.js

@@ -1,135 +0,0 @@
-import { generateKey } from '../../utils';
-const getAccessType = public_role => {
-    switch (public_role) {
-        case 2: // editor
-            return {
-                label: 'Editor',
-                value: 'editor',
-                type: 'TYPE_ACCESS',
-            };
-        case 3: // viewer
-            return {
-                label: 'Viewer',
-                value: 'viewer',
-                type: 'TYPE_ACCESS',
-            };
-        default:
-            return {};
-    }
-};
-export function getCurrentUserId() {
-    return '';
-    //   const userId = safeParse(getAppSession('user_id'), 0);
-    //   if (userId === 0) {
-    //     // if user_id not set, read 3rd cookie
-    //     try {
-    //       const tempt = getCookie(`${PORTAL_CONFIG.INSIGHT_U_OGS}_${getPortalId()}`);
-    //       // console.log(tempt);
-    //       if (tempt) {
-    //         const data = JSON.parse(tempt);
-    //         return parseInt(window.decodeURIComponent(data.user_id));
-    //       }
-    //     } catch (err) {
-    //       console.error(err);
-    //     }
-    //   }
-    //   return userId;
-}
-const checkAllowEdit = (listAccess = [], isPublic, publicRole) => {
-    let isAllowEdit = false;
-    const userId = getCurrentUserId();
-    const listUserIdAllowEdit = listAccess.map(access => {
-        if (+access.role === 1 || +access.role === 2) {
-            return +access.user_id;
-        }
-        return undefined;
-    });
-    if (isPublic && +publicRole === 2) {
-        // dashboard set permission public-edit
-        isAllowEdit = true;
-    }
-    else {
-        isAllowEdit = listUserIdAllowEdit.includes(+userId);
-    }
-    return isAllowEdit;
-};
-export const convertShareAccessToFE = (shareAccess = {}) => {
-    const dataConvert = {
-        general: {},
-        listAccess: [],
-    };
-    const { is_public, list_access = [], public_role } = shareAccess || {};
-    let newGeneral = {};
-    let newListAccess = [];
-    switch (is_public) {
-        case 1: // public
-            newGeneral = {
-                label: 'Public',
-                value: 'public',
-                description: 'Anyone on the portal can view this item',
-                icon: 'icon-xlab-padlock-open',
-                type: 'GENERAL_ACCESS',
-                isPublic: 1,
-            };
-            if (public_role) {
-                newGeneral.accessType = getAccessType(+public_role);
-            }
-            break;
-        case 0:
-            newGeneral = {
-                label: 'Restricted',
-                value: 'restricted',
-                description: 'Only people with access can open this item',
-                icon: 'icon-xlab-padlock-filled',
-                type: 'GENERAL_ACCESS',
-                isPublic: 0,
-            };
-            break;
-        default:
-            break;
-    }
-    newListAccess = list_access.map(access => {
-        const { user_id, full_name, email, role, avatar } = access;
-        const data = {
-            id: generateKey(),
-            userId: +user_id,
-            name: full_name,
-            email,
-            role: +role,
-            avatar,
-        };
-        if (+role === 1) {
-            data.accessType = {
-                value: 'owner',
-                label: 'Owner',
-            };
-            data.allow_view = 1;
-            data.allow_edit = 1;
-        }
-        else if (+role === 2) {
-            data.accessType = {
-                value: 'editor',
-                label: 'Editor',
-            };
-            data.allow_view = 1;
-            data.allow_edit = 1;
-        }
-        else {
-            data.accessType = {
-                value: 'viewer',
-                label: 'Viewer',
-            };
-            data.allow_view = 1;
-            data.allow_edit = 0;
-        }
-        return data;
-    });
-    const isAllowEdit = checkAllowEdit(list_access, is_public, public_role);
-    dataConvert.general = newGeneral;
-    dataConvert.listAccess = newListAccess;
-    return {
-        accessInfo: dataConvert,
-        isAllowEdit,
-        isPublic: is_public,
-    };
-};