@antscorp/antsomi-ui 1.3.5-beta.187 → 1.3.5-beta.189

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

@@ -0,0 +1,3 @@
+export declare const MARKETING_ROUTES: {
+    CHANNEL: string;
+};

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

@@ -0,0 +1,3 @@
+export const MARKETING_ROUTES = {
+    CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId/list',
+};

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

@@ -5,10 +5,12 @@ import { isEmpty } from 'lodash';
 // Contexts
 import { LeftMenuContext } from '../../contexts';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
-// Querries
+// Queries
 import { useGetDestinationChannel } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Utils
-import { getMenuItem } from '../../utils';
+import { getGeneratePath, getMenuItem } from '../../utils';
+// Constants
+import { MARKETING_ROUTES } from './constants';
 export const useMarketingMenu = () => {
     // Contexts
     const appConfig = useContextSelector(AppConfigContext, state => state);
@@ -34,16 +36,27 @@ export const useMarketingMenu = () => {
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => {
         var _a;
         let children = [];
+        switch (item.menu_item_code) {
+            case 'ALL_CHANNEL':
+                item.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: 0 }));
+                break;
+            case 'ORCHESTRATION':
+                item.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: 8 }));
+                break;
+            default:
+                break;
+        }
         if ((item === null || item === void 0 ? void 0 : item.render_option) === 'destination_channel') {
             children =
                 ((_a = destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries) === null || _a === void 0 ? void 0 : _a.map(item => ({
                     menu_item_code: item.channelCode,
                     menu_item_name: item.translateLabel,
                     logo_url: item.logoUrl,
+                    menu_item_path: getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: item.channelId })),
                     icon_name: null,
                 }))) || [];
         }
         return getMenuItem(Object.assign(Object.assign({}, item), (isEmpty(children) ? {} : { children })));
-    }), [destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, featureChildren]);
+    }), [auth, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, featureChildren]);
     return { children: customChildren };
 };

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

@@ -1,8 +1,8 @@
 // Libraries
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, isString } from 'lodash';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 // Components
 import { Dropdown, Menu } from 'antd';
@@ -11,18 +11,50 @@ import { MenuItemImage } from './components';
 // Styled
 import { LabelCustom, MenuWrapper } from './styled';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/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 { getGeneratePath } from '../../../utils';
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    const userId = useContextSelector(AppConfigContext, state => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.auth) === null || _a === void 0 ? void 0 : _a.userId; });
-    const [current, setCurrent] = useState('1');
+    // Selectors
+    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);
+    // States
+    const [currentActiveItem, setCurrentActiveItem] = useState('');
+    // Hooks
+    const { pathname, hash, search } = useLocation();
+    // Side Effects
+    useEffect(() => {
+        var _a;
+        const url = `${pathname}${hash}${search}`;
+        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))) {
+                    activeItem = item;
+                    break;
+                }
+                if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
+                    const childActiveItem = recursiveFindActiveItem(item.children);
+                    if (childActiveItem) {
+                        activeItem = childActiveItem;
+                        break;
+                    }
+                }
+            }
+            return activeItem;
+        };
+        const activeItem = (_a = recursiveFindActiveItem(items)) === null || _a === void 0 ? void 0 : _a.key;
+        if (activeItem && activeItem !== currentActiveItem) {
+            setCurrentActiveItem(activeItem);
+        }
+    }, [auth, currentActiveItem, hash, items, pathname, search]);
+    // Handlers
     const onClick = e => {
-        setCurrent(e.key);
         onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
     };
     // Render components
@@ -30,8 +62,9 @@ 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, options, optionCallback } = item;
-            const labelComponent = () => (!children || isEmpty(children)) && !isEmpty(options) ? (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { width: '100%' } },
+            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 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: {
                         items: options,
@@ -40,23 +73,21 @@ export const ChildMenu = memo(props => {
                             e.domEvent.preventDefault();
                             optionCallback === null || optionCallback === void 0 ? void 0 : optionCallback({ menuItemKey: key, optionKey: e.key });
                         },
-                    } },
-                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { marginTop: '2px' } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
+                    }, trigger: ['click'] },
+                    React.createElement(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(menu_item_path, { userId }), className: "menu-link" }, labelComponent())) : (labelComponent()),
+                label: isString(menu_item_path) ? (React.createElement(Link, { to: getGeneratePath(`${domain}${menu_item_path}`, auth), 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 }),
             };
         });
     };
-    return (React.createElement(MenuWrapper, null,
-        React.createElement(Menu, { onClick: onClick, selectedKeys: [current], mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, expandIcon: ({ isOpen }) => {
-                var _a;
-                return (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
-                        fontSize: ICON_SIZE,
-                        color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8,
-                        transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
-                    } }));
-            } })));
+    return (React.createElement(MenuWrapper, { className: "child-menu" },
+        React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], mode: "inline", items: customMenuItems({ items }), inlineIndent: 10, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                    fontSize: ICON_SIZE,
+                    color: 'inherit',
+                    // color: THEME.token?.bw8,
+                    transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
+                } })), onClick: onClick })));
 });

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

@@ -31,7 +31,6 @@ export const LeftMenu = memo(props => {
     permissionMenu, appConfig, 
     /* Callbacks */
     onToggleChildMenu, onMouseEnter, onMouseLeave, } = useLeftMenu();
-    const { userId, portalId } = (appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth) || {};
     // Memo
     const childMenu = useMemo(() => {
         const selectedFeatureKey = state.hoverItem || state.activeItem;
@@ -74,10 +73,7 @@ export const LeftMenu = memo(props => {
             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, children) }, isString(menu_item_path) ? (React.createElement(Link, { to: getGeneratePath(`${domain}${menu_item_path}`, {
-                userId,
-                portalId,
-            }), className: "menu-link" }, labelComponent())) : (labelComponent())));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code, children) }, 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(LeftMenuProvider, { value: {
             activeItem: state.activeItem,
@@ -96,7 +92,7 @@ export const LeftMenu = memo(props => {
                     React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
                         React.createElement("div", { className: "menu-content scroll-content" }, (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== FEATURE_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item))),
                         React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(state.activeItem) }),
-                        React.createElement(PopoverWrapper, { className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
+                        React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
                             React.createElement("div", { className: "scroll-content" }, childMenu))),
                     React.createElement("div", { style: { flexShrink: 0 } }, (() => {
                         const settingFeature = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === FEATURE_KEYS.SETTINGS);

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

@@ -1,6 +1,6 @@
 import { FeatureMenuPermission, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
-import { TMenuFeatureItem, TMenuItem } from '../types';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TMenuFeatureItem, TMenuItem } from '../types';
 export declare const getMenuItem: (featureMenu: TMenuFeatureItem) => TMenuItem;
 export declare const flattenMenuArray: <T>(menuItems: T[], childKey: string) => T[];
 /**
@@ -10,4 +10,5 @@ export declare const flattenMenuArray: <T>(menuItems: T[], childKey: string) =>
 export declare const recursivePermissionMenu: (menuItems: TFeatureMenu[], MenuPermissions: FeatureMenuPermission[]) => TFeatureMenu[];
 export declare const getGeneratePath: (path: string, params?: Omit<PayloadInfo & {
     reportId?: string;
+    channelId?: number;
 }, 'url'>) => string;

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

@@ -14,6 +14,9 @@ import { isArray, isEmpty, isNil } from 'lodash';
 import { generatePath } from 'react-router-dom';
 // Constants
 import { MENU_ITEM_TYPE } from '../constants';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
 export const getMenuItem = (featureMenu) => {
     const { menu_item_code, menu_item_name, children, icon_name } = featureMenu, restOfFeatureMenu = __rest(featureMenu, ["menu_item_code", "menu_item_name", "children", "icon_name"]);
     return Object.assign({ key: menu_item_code, label: menu_item_name, icon: icon_name, children: children === null || children === void 0 ? void 0 : children.map(item => getMenuItem(item)) }, restOfFeatureMenu);
@@ -45,9 +48,22 @@ export const recursivePermissionMenu = (menuItems, MenuPermissions) => {
         : {}))))) === null || _b === void 0 ? void 0 : _b.filter(item => !(isArray(item.children) && isEmpty(item.children)));
     return menu;
 };
-export const getGeneratePath = (path, params) => generatePath(path.replace('#', `/${params === null || params === void 0 ? void 0 : params.portalId}#`), {
-    user_id: params === null || params === void 0 ? void 0 : params.userId,
-    networkId: params === null || params === void 0 ? void 0 : params.portalId,
-    portalId: params === null || params === void 0 ? void 0 : params.portalId,
-    reportId: params === null || params === void 0 ? void 0 : params.reportId,
-});
+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) || '',
+            networkId: (params === null || params === void 0 ? void 0 : params.portalId) || -1,
+            portalId: (params === null || params === void 0 ? void 0 : params.portalId) || -1,
+            reportId: (params === null || params === void 0 ? void 0 : params.reportId) || '',
+            channelId: (params === null || params === void 0 ? void 0 : params.channelId) || -1,
+        });
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: getGeneratePath.name,
+            args: { path, params },
+        });
+        return '';
+    }
+};

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

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { LeftMenuProps } from '../../organism';
 import { HeaderV2Props } from '../../molecules';
+import '@antscorp/processing-notification/dist/index.css';
 interface LayoutProps {
     headerProps?: Partial<HeaderV2Props>;
     leftMenuProps?: LeftMenuProps;

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

@@ -23,6 +23,8 @@ import { HeaderV2 } from '../../molecules';
 import { AppConfigContext } from '../../..';
 // Constants
 import { PERMISSION_API, SOCKET_API } from '../../../constants';
+// Css
+import '@antscorp/processing-notification/dist/index.css';
 export const Layout = memo(props => {
     var _a;
     const { leftMenuProps, headerProps, workspaceProps, children } = props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.187",
+  "version": "1.3.5-beta.189",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -60,7 +60,6 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-ui": "file:.yalc/@antscorp/antsomi-ui",
     "@antscorp/icons": "^0.27.14",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.0",