@antscorp/antsomi-ui 1.3.5-beta.411 → 1.3.5-beta.413

package/es/components/molecules/AccountSelection/AccountListing.d.ts

@@ -4,6 +4,7 @@ export interface AccountListingProps {
     className?: string;
     apiConfig: {
         domain: string;
+        permissionDomain?: string;
         token: string;
         userId: number;
         portalId?: number;

package/es/components/molecules/AccountSelection/hooks/useAccountSelection.d.ts

@@ -7,6 +7,7 @@ interface AccountData {
 }
 export declare const useAccountSelection: (apiConfig: {
     domain: string;
+    permissionDomain?: string;
     token: string;
     userId: number;
     portalId?: number;

package/es/components/molecules/AccountSelection/hooks/useAccountSelection.js

@@ -13,7 +13,7 @@ const isUsePermissionAccount = (appCode) => {
     return false;
 };
 export const useAccountSelection = (apiConfig) => {
-    const { domain, token, userId, appCode, menuCode } = apiConfig;
+    const { permissionDomain, token, userId, appCode, menuCode } = apiConfig;
     const { data } = useGetAccountList({
         apiConfig,
         options: {
@@ -26,13 +26,13 @@ export const useAccountSelection = (apiConfig) => {
             _user_id: userId,
             _app_code: appCode || '',
             _token: token,
-            domain,
+            domain: permissionDomain || '',
             appCode: appCode || '',
             fullParent: true,
             menuCode: menuCode || appCode || '',
         },
         options: {
-            enabled: isUsePermissionAccount(appCode || '') && !!token && !!userId,
+            enabled: isUsePermissionAccount(appCode || '') && !!token && !!userId && !!permissionDomain,
         },
     });
     const { data: recentData } = useGetRecentAccount({

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -63,6 +63,7 @@ export const HeaderV2 = memo(props => {
     const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
     const accountSelectionApiConfig = {
         domain: accountSelectionDomain,
+        permissionDomain,
         languageCode: language,
         userId,
         portalId,

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

@@ -105,7 +105,7 @@ export const LeftMenuComponent = memo(props => {
                 React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },
                     React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
                     React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
-                    React.createElement(PopoverWrapper, { show: state.isShowPopover && isExpandable, className: "antsomi-scroll-box antsomi-child-menu-popover" },
+                    React.createElement(PopoverWrapper, { show: state.isShowPopover && isExpandable, hasMarginTop: !isRecommendation, className: "antsomi-scroll-box antsomi-child-menu-popover" },
                         React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childHoverMenu))),
                 React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
             isExpandable && !isRecommendation && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },

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

@@ -16,13 +16,12 @@ import { IconWrapper } from '../../../styled';
 import { HOME_MENU_ITEMS, ICON_SIZE } from '../../../constants';
 // Utils
 import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
-import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
+import { handleActiveRecommendationItem, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
 // Hooks
 import { useNavigatePath } from '../../../hooks';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
-import { MARKETING_CHANNEL_CODE } from '@antscorp/antsomi-ui/es/components/template/Layout/constants';
 const noDashboardItem = {
     key: 'no_dashboard',
     label: 'No dashboard available',
@@ -79,53 +78,11 @@ export const ChildMenu = memo(props => {
                 break;
             }
             case isRecommendation: {
-                const activeItem = findItemByPermissionCode({
-                    permissionCode: customActiveCurrentKey,
-                    menuItems: items,
+                const menuActiveKey = handleActiveRecommendationItem({
+                    customActiveCurrentKey,
+                    currentActiveItem,
+                    items,
                 });
-                const { key, permission_code } = activeItem || {};
-                let menuActiveKey;
-                if (permission_code && key) {
-                    switch (permission_code) {
-                        case 'JOURNEY':
-                            if (!Object.values(MARKETING_CHANNEL_CODE).includes(currentActiveItem)) {
-                                menuActiveKey = MARKETING_CHANNEL_CODE.ALL_CHANNEL;
-                            }
-                            break;
-                        case 'EVENT_SOURCES':
-                            if (!['EVENT', 'EVENT_ATTRIBUTE', 'CONVERSION'].includes(currentActiveItem))
-                                menuActiveKey = 'SOURCE';
-                            break;
-                        case 'DATAFLOWS':
-                            if (!['BATCH_STREAMING', 'REALTIME_STREAMING'].includes(currentActiveItem))
-                                menuActiveKey = 'BATCH_STREAM';
-                            break;
-                        case 'BUSINESS_OBJECT': {
-                            if (!['UPLOAD', 'EXPORT'].includes(currentActiveItem)) {
-                                menuActiveKey = 'UPLOAD';
-                            }
-                            break;
-                        }
-                        case 'DATASOURCES':
-                            menuActiveKey = 'DATA_SOURCE';
-                            break;
-                        default:
-                            menuActiveKey = key;
-                            break;
-                    }
-                }
-                else {
-                    switch (customActiveCurrentKey) {
-                        case 'DATASOURCES-SQL_WORKSPACE':
-                            menuActiveKey = 'DATA_SOURCE';
-                            break;
-                        case 'DATASOURCES-DATAFLOWS':
-                            menuActiveKey = 'DF_DATA_SOURCE';
-                            break;
-                        default:
-                            break;
-                    }
-                }
                 if (menuActiveKey) {
                     setCurrentActiveItem(menuActiveKey);
                     /** Find parent key of active menu item to open it */
@@ -216,9 +173,9 @@ export const ChildMenu = memo(props => {
         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, disabled, optionCallback, } = item;
             const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD.menu_item_code;
-            const renderLabel = () => (React.createElement(LabelWrapper, null,
+            const renderLabel = () => (React.createElement(LabelWrapper, { gap: 10, align: "center", justify: "space-between" },
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
-                (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, null,
+                (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, { align: "center" },
                     React.createElement(Dropdown, { menu: {
                             items: options,
                             onClick: e => {

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

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { Flex, Typography } from '../../../../../atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { ICON_SIZE } from '../../../constants';
 export const LabelWrapper = styled(Flex) `
   width: 100%;
   overflow: hidden;
@@ -15,6 +14,7 @@ export const LabelWrapper = styled(Flex) `
     width: fit-content;
     display: none;
     text-decoration-line: none !important;
+    color: #595959 !important;
 
     i {
       font-size: 15px !important;
@@ -27,16 +27,10 @@ export const LabelWrapper = styled(Flex) `
 
   &:hover {
     .icon-link {
-      color: inherit !important;
       display: flex;
     }
   }
 `;
-LabelWrapper.defaultProps = {
-    gap: 10,
-    align: 'center',
-    justify: 'space-between',
-};
 export const LabelCustom = styled(Typography.Text) `
   font-size: inherit !important;
   color: inherit !important;
@@ -46,7 +40,6 @@ export const LabelCustom = styled(Typography.Text) `
 export const OptionDropdownWrapper = styled(Flex) `
   width: 20px;
 `;
-OptionDropdownWrapper.defaultProps = { align: 'center' };
 export const MenuWrapper = styled.div `
   width: 100%;
   height: 100%;
@@ -90,11 +83,23 @@ export const MenuWrapper = styled.div `
       &.antsomi-menu-item-selected {
         & > .antsomi-menu-title-content {
           background-color: #deeffe !important;
+
+          ${LabelWrapper} {
+            & > .icon-link {
+              color: inherit !important;
+            }
+          }
+          i {
+            color: inherit !important;
+          }
         }
       }
 
-      [role='icon'] {
-        font-size: ${ICON_SIZE};
+      &.antsomi-menu-submenu-selected
+        > .antsomi-menu-submenu-title
+        > .antsomi-menu-title-content
+        i {
+        color: inherit !important;
       }
 
       & .menu-link {

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

@@ -37,3 +37,8 @@ export declare const findItemByPermissionCode: (args: {
     permissionCode: string;
     menuItems: TMenuItem[];
 }) => TMenuItem | undefined;
+export declare const handleActiveRecommendationItem: (args: {
+    customActiveCurrentKey: string;
+    currentActiveItem: string;
+    items: TMenuItem[];
+}) => string | undefined;

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

@@ -1,6 +1,7 @@
 // Utils
 import { getComparePath, getGeneratePath } from '../../../utils';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { MARKETING_CHANNEL_CODE } from '@antscorp/antsomi-ui/es/components/template/Layout/constants';
 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.
@@ -134,3 +135,54 @@ export const findItemByPermissionCode = (args) => {
         });
     }
 };
+export const handleActiveRecommendationItem = (args) => {
+    const { customActiveCurrentKey, currentActiveItem, items } = args;
+    const activeItem = findItemByPermissionCode({
+        permissionCode: customActiveCurrentKey,
+        menuItems: items,
+    });
+    const { key, permission_code } = activeItem || {};
+    let menuActiveKey;
+    if (permission_code && key) {
+        switch (permission_code) {
+            case 'JOURNEY':
+                if (!Object.values(MARKETING_CHANNEL_CODE).includes(currentActiveItem)) {
+                    menuActiveKey = MARKETING_CHANNEL_CODE.ALL_CHANNEL;
+                }
+                break;
+            case 'EVENT_SOURCES':
+                if (!['EVENT', 'EVENT_ATTRIBUTE', 'CONVERSION'].includes(currentActiveItem))
+                    menuActiveKey = 'SOURCE';
+                break;
+            case 'DATAFLOWS':
+                if (!['BATCH_STREAMING', 'REALTIME_STREAMING'].includes(currentActiveItem))
+                    menuActiveKey = 'BATCH_STREAM';
+                break;
+            case 'BUSINESS_OBJECT': {
+                if (!['UPLOAD', 'EXPORT'].includes(currentActiveItem)) {
+                    menuActiveKey = 'UPLOAD';
+                }
+                break;
+            }
+            case 'DATASOURCES':
+                menuActiveKey = 'DATA_SOURCE';
+                break;
+            default:
+                menuActiveKey = key;
+                break;
+        }
+    }
+    else {
+        switch (customActiveCurrentKey) {
+            case 'DATASOURCES-SQL_WORKSPACE':
+                menuActiveKey = 'DATA_SOURCE';
+                break;
+            case 'DATASOURCES-DATAFLOWS':
+                menuActiveKey = 'DF_DATA_SOURCE';
+                break;
+            default:
+                break;
+        }
+    }
+    return menuActiveKey;
+};

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

@@ -103,6 +103,7 @@ export const usePermission = () => {
             url,
             menuItems: mappingChildrenMenu,
             auth,
+            env,
         });
         return matchedCode
             ? findPathOfActiveItem({
@@ -110,7 +111,7 @@ export const usePermission = () => {
                 menuItems: mappingChildrenMenu,
             })
             : [];
-    }, [auth, hash, mappingChildrenMenu, pathname]);
+    }, [auth, env, hash, mappingChildrenMenu, pathname]);
     useEffect(() => setLeftMenuState({ dashboardList }), [dashboardList, setLeftMenuState]);
     useEffect(() => {
         if (!isCustomized) {

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

@@ -2,6 +2,7 @@
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {
     show: boolean;
+    hasMarginTop: boolean;
 }, never>;
 export declare const FeatureMenuWrapper: 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 ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -16,6 +16,7 @@ export const IconWrapper = styled.div `
 
   i {
     font-size: ${ICON_SIZE}px;
+    color: #595959;
   }
 `;
 export const PopoverWrapper = styled.div `
@@ -35,7 +36,7 @@ export const PopoverWrapper = styled.div `
   border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
   bottom: 15px;
   box-shadow: 0px 3px 20px 0px #002e5933;
-  height: calc(100% - ${HEADER_HEIGHT + 15}px);
+  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
   transition: visibility 0s, opacity 0.2s ease-out;
   z-index: 10;
   padding: 10px;
@@ -148,6 +149,10 @@ export const FeatureMenuItem = styled.div `
       ${IconWrapper},
       span {
         color: #005eb8;
+
+        i {
+          color: inherit !important;
+        }
       }
     }
 

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

@@ -1,6 +1,7 @@
 import { FeatureMenuPermission, TDashboard, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TMenuFeatureItem, TMenuItem } from '../types';
+import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 /**
  * Converts a feature menu item to a menu item suitable for rendering in the UI.
  * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
@@ -85,7 +86,7 @@ export declare const findLastMatchedItemByUrl: (args: {
     url: string;
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
-    env?: string;
+    env?: TEnv;
 }) => TFeatureMenu | undefined;
 export declare const findPathOfActiveItem: (args: {
     activeMenuItem: TFeatureMenu;

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

@@ -275,7 +275,7 @@ export const findActiveAppCodeByUrl = (args) => {
 };
 export const findLastMatchedItemByUrl = (args) => {
     try {
-        const { url, menuItems, auth, env } = args;
+        const { url, menuItems, auth, env = 'development' } = args;
         const matchedItems = [];
         const recursiveFindActiveItem = (items, parentId) => {
             for (const item of items) {

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

@@ -26,4 +26,6 @@ export declare const MENU_CODE: {
     DATA_VIEW: string;
     DATA_OBJECT: string;
     JOURNEY_TACTIC: string;
+    BATCH_STREAMING: string;
+    REALTIME_STREAMING: string;
 };

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

@@ -27,4 +27,6 @@ export const MENU_CODE = {
     DATA_VIEW: 'DATA_VIEW',
     DATA_OBJECT: 'DATA_OBJECT',
     JOURNEY_TACTIC: 'JOURNEY_TACTIC',
+    BATCH_STREAMING: 'BATCH_STREAMING',
+    REALTIME_STREAMING: 'REALTIME_STREAMING',
 };

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

@@ -14,8 +14,6 @@ export declare const MARKETING_CHANNEL_CODE: {
  * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
  */
 export declare const MENU_PERMISSIONS: {
-    BATCH_STREAM: string;
-    REALTIME_STREAM: string;
     DF_DATA_SOURCE: string;
     DESTINATION: string;
     REPORT: string;

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

@@ -14,8 +14,6 @@ export const MARKETING_CHANNEL_CODE = {
  * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
  */
 export const MENU_PERMISSIONS = {
-    BATCH_STREAM: 'BATCH_STREAM',
-    REALTIME_STREAM: 'REALTIME_STREAM',
     DF_DATA_SOURCE: 'DF_DATA_SOURCE',
     DESTINATION: 'DESTINATION',
     REPORT: 'REPORT',

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

@@ -17,6 +17,8 @@ export const checkingRoleScope = (args) => {
         MENU_CODE.DASHBOARD_OVERVIEW,
         MENU_CODE.MEDIA_TEMPLATE,
         MENU_CODE.EMAIL_TEMPLATE,
+        MENU_CODE.BATCH_STREAMING,
+        MENU_CODE.REALTIME_STREAMING,
         // MENU_CODE.SEGMENT,
         MENU_CODE.DESTINATIONS_HUB,
         MENU_CODE.BUSINESS_OBJECT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.411",
+  "version": "1.3.5-beta.413",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,7 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.38",
+    "@antscorp/icons": "0.27.39",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",