@antscorp/antsomi-ui 1.3.5-beta.456 → 1.3.5-beta.458

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -16,7 +16,7 @@ import { uniqBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 // Components
 import { EmptyData, Select } from '@antscorp/antsomi-ui/es/components/molecules';
-import { Button, Flex, Icon, Input, Scrollbars, Spin, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Flex, Icon, Input, Popover, Scrollbars, Spin, Typography, Tooltip, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ExtendValuePopup } from './components/ExtendValuePopup';
 // Styled
 import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton } from './styled';
@@ -24,13 +24,15 @@ import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton } from './style
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Constants
-import { MATCHES_ANY_THEME, SAMPLE_DATA } from './constants';
+import { MATCHES_ANY_THEME } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Hooks
-import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
-const initialState = {};
+const initialState = {
+    isOpenPopover: false,
+};
 const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
@@ -39,11 +41,18 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export const MatchesAny = props => {
     // Props
-    const { objectName, isLoading = false, showExtendValue = true } = props, restOfProps = __rest(props, ["objectName", "isLoading", "showExtendValue"]);
+    const { objectName, isLoading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { } } = props, restOfProps = __rest(props, ["objectName", "isLoading", "showExtendValue", "items", "onApply", "onCancel"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { searchValue, selectedItems } = state;
+    // Effects
+    /**
+     * Updates the `selectedItems` state when the `selectedItems` prop changes.
+     */
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
+    }, [props.selectedItems]);
     // Handlers
     /**
      * Adds an item and, if applicable, its leaf descendants to the list of selected items.
@@ -87,7 +96,7 @@ export const MatchesAny = props => {
         });
     };
     const onSelectAll = () => {
-        const flattenTreeData = flatTree(SAMPLE_DATA, 'children').filter(item => !item.children &&
+        const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
             !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
     };
@@ -115,7 +124,7 @@ export const MatchesAny = props => {
     // Memos
     const { treeData, matchedParents } = useMemo(() => {
         const { results, matchedParents } = recursiveSearchItems({
-            list: SAMPLE_DATA,
+            list: items || [],
             searchKeys: ['title', 'key'],
             searchValue,
             childrenKey: 'children',
@@ -141,7 +150,7 @@ export const MatchesAny = props => {
         });
         const treeData = serializeTreeData(results);
         return { treeData, matchedParents };
-    }, [searchValue, selectedItems]);
+    }, [items, searchValue, selectedItems]);
     const selectedTreeData = useMemo(() => {
         const notExtendValueSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue);
         const extendValueSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue);
@@ -164,8 +173,8 @@ export const MatchesAny = props => {
                 children: serializeTreeData(item.children),
             }))))) || [];
         };
-        return serializeTreeData(SAMPLE_DATA || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
-    }, [selectedItems]);
+        return serializeTreeData(items || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
+    }, [items, selectedItems]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
         const flattenTreeData = flatTree(treeData, 'children');
@@ -180,14 +189,13 @@ export const MatchesAny = props => {
                     React.createElement(Input.CustomSearch, { placeholder: `${(_a = t(translations.global.search)) === null || _a === void 0 ? void 0 : _a.toString()}...`, onAfterChange: searchValue => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue }))) }))),
             React.createElement("div", { className: "matches-any__body" },
                 React.createElement(Flex, { align: "center", justify: "space-between" },
-                    React.createElement(Text, { strong: true }, `${objectName} (${flatTree(SAMPLE_DATA, 'children').filter(item => !item.children).length})`),
+                    React.createElement(Text, { strong: true }, `${objectName} (${flatTree(items, 'children').filter(item => !item.children).length})`),
                     React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString())),
                 React.createElement(Spin, { spinning: isLoading },
-                    React.createElement(Scrollbars, { style: { height: '100%' } },
-                        React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: matchedParents.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
-                                    transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
-                                    transition: 'transform 0.3s ease',
-                                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));
+                    React.createElement(Scrollbars, { style: { height: '100%' } }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: matchedParents.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                                transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                                transition: 'transform 0.3s ease',
+                            }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })) : (React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() })))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
@@ -195,7 +203,7 @@ export const MatchesAny = props => {
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
         React.createElement("div", { className: "matches-any__body" },
             React.createElement(Spin, { spinning: isLoading },
-                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-channel-integration", description: "Select items from the list" })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-database", description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                             transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                             transition: 'transform 0.3s ease',
                         }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))))));
@@ -221,17 +229,28 @@ export const MatchesAny = props => {
                 renderSelectedList()),
             React.createElement(Flex, { className: "matches-any__footer", align: "center", justify: "space-between" },
                 React.createElement(Flex, { align: "center", gap: 10 },
-                    React.createElement(Button, { type: "primary" }, t(translations.apply.title).toString()),
-                    React.createElement(Button, null, t(translations.cancel.title).toString())),
+                    React.createElement(Button, { type: "primary", onClick: () => onApply(selectedItems || []) }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { onApply: onApplyExtendValue },
-                    React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, "Extend Value")))))));
+                    React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));
 };
 export const MatchesAnySelect = props => {
-    const { placeholder = 'Select an item', dropdownStyle, objectName } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName"]);
+    var _a, _b, _c;
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, isLoading, onChange = () => { } } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "isLoading", "onChange"]);
     // State
-    const [state, setState] = useState({});
-    // Renders
-    const renderPopoverContent = () => (React.createElement(MatchesAny, { objectName: objectName, style: { margin: '-8px 0px' } }));
-    return renderPopoverContent();
-    return (React.createElement(Select, Object.assign({}, restProps, { dropdownRender: renderPopoverContent, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { padding: 0 }) })));
+    const [state, setState] = useState(initialState);
+    // Variables
+    const { isOpenPopover } = state;
+    // Memo
+    const value = Array.isArray(selectedItems) && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)
+        ? `${(_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title)) === null || _a === void 0 ? void 0 : _a[0]}${((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _b === void 0 ? void 0 : _b.length) ? `, and +${(_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _c === void 0 ? void 0 : _c.length} more` : ''}` || []
+        : undefined;
+    // Handlers
+    const onApplyMatchesAny = (selectedItems) => {
+        onChange(selectedItems);
+        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+    };
+    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { items: items, selectedItems: selectedItems, isLoading: isLoading, objectName: objectName, style: { margin: '-8px 0px' }, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))) }), overlayStyle: { width: 700 }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
+        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ')}` },
+            React.createElement(Select, Object.assign({}, restProps, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { display: 'none', padding: 0 }) })))));
 };

package/es/components/molecules/MatchAnySelect/index.d.ts

@@ -1 +1,3 @@
-export { MatchesAnySelect } from './MatchesAnySelect';
+export { MatchesAnySelect, MatchesAny } from './MatchesAnySelect';
+export type { MatchesAnyItem, MatchesAnyProps, MatchesAnySelectProps } from './types';
+export { SAMPLE_DATA as MATCHES_ANY_SAMPLE_DATA } from './constants';

package/es/components/molecules/MatchAnySelect/index.js

@@ -1 +1,2 @@
-export { MatchesAnySelect } from './MatchesAnySelect';
+export { MatchesAnySelect, MatchesAny } from './MatchesAnySelect';
+export { SAMPLE_DATA as MATCHES_ANY_SAMPLE_DATA } from './constants';

package/es/components/molecules/MatchAnySelect/types.d.ts

@@ -12,9 +12,30 @@ export interface MatchesAnySelectProps extends SelectProps {
     isLoading?: boolean;
     /** Indicates whether show the extend value button */
     showExtendValue?: boolean;
+    /** An array of items. */
+    items?: MatchesAnyItem[];
+    /** An array of selected items. */
+    selectedItems?: MatchesAnyItem[];
+    /** Callback function that is called when the selected items change. */
+    onChange?: (selectedItems: MatchesAnyItem[]) => void;
 }
 export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
+    /** The name of the object, corresponding to the `objectName` property in `MatchesAnySelectProps`. */
     objectName?: MatchesAnySelectProps['objectName'];
+    /** Indicates whether the component is in a loading state, corresponding to the `isLoading` property in `MatchesAnySelectProps`. */
     isLoading?: MatchesAnySelectProps['isLoading'];
+    /** Determines whether to show the extended value, corresponding to the `showExtendValue` property in `MatchesAnySelectProps`. */
     showExtendValue?: MatchesAnySelectProps['showExtendValue'];
+    /** An array of items. */
+    items?: MatchesAnySelectProps['items'];
+    /** An array of selected items. */
+    selectedItems?: MatchesAnySelectProps['selectedItems'];
+    /**
+     * Callback function that is called when the apply action is triggered.
+     *
+     * @param selectedItems - The array of selected items.
+     */
+    onApply?: (selectedItems: MatchesAnyItem[]) => void;
+    /** Callback function that is called when the cancel action is triggered. */
+    onCancel?: () => void;
 }

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

@@ -182,7 +182,7 @@ export const ChildMenu = memo(props => {
                 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 || 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()));
+            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, key), 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/constants/variables.d.ts

@@ -31,6 +31,7 @@ export declare const MARKETING_CHANNEL_KEY: {
 };
 export declare const RENDER_OPTION: {
     readonly CHANNEL: "destination_channel";
+    readonly CHANNEL_GEN2: "destination_channel_gen2";
 };
 /** SETTING APP */
 export declare const SETTING_APP: {

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

@@ -54,7 +54,10 @@ export const MARKETING_ROUTES = {
     CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId',
 };
 export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, JOURNEY_ORCHESTRATION: 8 };
-export const RENDER_OPTION = { CHANNEL: 'destination_channel' };
+export const RENDER_OPTION = {
+    CHANNEL: 'destination_channel',
+    CHANNEL_GEN2: 'destination_channel_gen2',
+};
 /** SETTING APP */
 export const SETTING_APP = {
     CHANNEL_INTEGRATION: {

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

@@ -46,7 +46,7 @@ export const useLeftMenu = (props) => {
         isShowPopover: false,
         isExpandMenu: expandMenu || isOpenMenu,
     });
-    const { mappingChildrenMenu, flattenMenuPermission, permissionMenu, activeItemPath } = usePermission();
+    const { mappingChildrenMenu, flattenMenuPermission, menuListPermission, permissionMenu, activeItemPath, } = usePermission();
     const onMenuClick = useCallback((key, keyPath) => {
         if (isRecommendation) {
             setLeftMenuContextState({ customActiveCurrentKey: key });
@@ -200,13 +200,14 @@ export const useLeftMenu = (props) => {
     useEffect(() => {
         if (!isCustomized && !isRecommendation) {
             // Callback function using at Layout when url change
-            onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
+            onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission, menuListPermission);
         }
     }, [
         activeItemPath,
         flattenMenuPermission,
         isCustomized,
         isRecommendation,
+        menuListPermission,
         onActiveMenuCodeChange,
     ]);
     useEffect(() => clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current), [timeoutPopover]);

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

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

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

@@ -10,6 +10,7 @@ import { getGeneratePath } from '../utils';
 import { hasSelectAccountPermission } from '../../../template/Layout/utils';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
+import { KEEP_HASH_PATH_CODE } from '../../../template/Layout/constants';
 // Hooks
 import { usePermission } from './usePermission';
 export const useNavigatePath = () => {
@@ -37,9 +38,9 @@ export const useNavigatePath = () => {
         }
         return !!customDomain && customDomain !== ((_f = window.location) === null || _f === void 0 ? void 0 : _f.origin);
     }, [isDev]);
-    const getPath = useCallback((path) => {
+    const getPath = useCallback((path, itemKey) => {
         var _a;
-        if (path === null || path === void 0 ? void 0 : path.includes('#')) {
+        if ((path === null || path === void 0 ? void 0 : path.includes('#')) && !KEEP_HASH_PATH_CODE.includes(`${itemKey}`)) {
             const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
             return getGeneratePath(customPath, auth);
         }

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

@@ -2,5 +2,6 @@ export declare const usePermission: () => {
     mappingChildrenMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
     permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
     activeItemPath: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    menuListPermission: import("@antscorp/antsomi-ui/es/models/LeftMenu").FeatureMenuPermission[] | undefined;
     flattenMenuPermission: import("@antscorp/antsomi-ui/es/models/LeftMenu").FeatureMenuPermission[];
 };

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

@@ -58,7 +58,7 @@ export const usePermission = () => {
     });
     const { ownedDashboard = [], sharedDashboard = [] } = (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) || {};
     const dashboardList = useMemo(() => uniqBy([...ownedDashboard, ...sharedDashboard], 'dashboardId'), [ownedDashboard, sharedDashboard]);
-    const { data: destinationChannel } = useGetDestinationChannel({
+    const { data: destinationChannelGen2 } = useGetDestinationChannel({
         args: {
             auth: {
                 token: auth === null || auth === void 0 ? void 0 : auth.token,
@@ -72,6 +72,20 @@ export const usePermission = () => {
             },
         },
     });
+    const { data: destinationChannel } = useGetDestinationChannel({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: env ? `${CDP_API[env]}/hub` : '',
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+            },
+            params: {
+                objectType: 'DESTINATION',
+                languageCode,
+            },
+        },
+    });
     const { data: menuListPermission } = useGetListMenuPermission({
         args: {
             auth: {
@@ -95,8 +109,16 @@ export const usePermission = () => {
         auth,
         dashboardList,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
+        destinationChannelGen2Entries: destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
+        isRecommendation,
+    }), [
+        auth,
+        dashboardList,
+        destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
+        destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
         isRecommendation,
-    }), [auth, dashboardList, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, isRecommendation, permissionMenu]);
+        permissionMenu,
+    ]);
     const activeItemPath = useMemo(() => {
         const url = `${pathname}${hash}`;
         const matchedCode = findLastMatchedItemByUrl({
@@ -113,6 +135,7 @@ export const usePermission = () => {
             : [];
     }, [auth, env, hash, mappingChildrenMenu, pathname]);
     useEffect(() => setLeftMenuState({ dashboardList }), [dashboardList, setLeftMenuState]);
+    console.log({ menuList, menuListPermission, mappingChildrenMenu });
     useEffect(() => {
         if (!isCustomized) {
             const receivePostMessage = (event) => {
@@ -132,5 +155,11 @@ export const usePermission = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return { mappingChildrenMenu, permissionMenu, activeItemPath, flattenMenuPermission };
+    return {
+        mappingChildrenMenu,
+        permissionMenu,
+        activeItemPath,
+        menuListPermission,
+        flattenMenuPermission,
+    };
 };

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

@@ -20,6 +20,6 @@ export interface LeftMenuProps {
         expandMenu?: boolean;
         onMenuItemClick?: (key: string, keyPath: string[]) => void;
     };
-    onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => void;
+    onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[], menuListPermission?: FeatureMenuPermission[]) => void;
 }
 export declare const LeftMenu: React.MemoExoticComponent<(props: LeftMenuProps) => React.JSX.Element | null>;

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

@@ -66,6 +66,7 @@ export declare const getMappingAppChildren: (args: {
     auth?: Partial<PayloadInfo>;
     dashboardList?: TDashboard[];
     destinationChannelEntries?: TDestinationChannel[];
+    destinationChannelGen2Entries?: TDestinationChannel[];
     isRecommendation?: boolean;
 }) => TFeatureMenu[];
 /**

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { cloneDeep, isArray, isEmpty, sortBy } from 'lodash';
 // Constants
 import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, } from '../constants';
-import { MARKETING_CHANNEL_CODE } from '../../../template/Layout/constants';
+import { MARKETING_CHANNEL_CODE, KEEP_HASH_PATH_CODE } from '../../../template/Layout/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { ENV } from '@antscorp/antsomi-ui/es/config';
@@ -132,7 +132,7 @@ export const recursiveGetMenuItemByPermission = (featureMenuItem) => {
 };
 /** Map children to each App Item */
 export const getMappingAppChildren = (args) => {
-    const { menuList, dashboardList, auth, destinationChannelEntries, isRecommendation } = args;
+    const { menuList, dashboardList, auth, destinationChannelEntries, destinationChannelGen2Entries, isRecommendation, } = args;
     const recursiveAddRenderOption = (menuItem) => {
         var _a;
         const cloneMenuItem = cloneDeep(menuItem);
@@ -140,8 +140,6 @@ export const getMappingAppChildren = (args) => {
             case RENDER_OPTION.CHANNEL: {
                 const path = (() => {
                     switch (menuItem.menu_item_code) {
-                        case MARKETING_CHANNEL_CODE.CAMPAIGN:
-                            return MARKETING_ROUTES.CHANNEL;
                         case SETTING_APP.CHANNEL_INTEGRATION.code:
                             return SETTING_APP.CHANNEL_INTEGRATION.path;
                         default:
@@ -158,6 +156,25 @@ export const getMappingAppChildren = (args) => {
                     }))))) || [];
                 break;
             }
+            case RENDER_OPTION.CHANNEL_GEN2: {
+                const path = (() => {
+                    switch (menuItem.menu_item_code) {
+                        case MARKETING_CHANNEL_CODE.CAMPAIGN:
+                            return MARKETING_ROUTES.CHANNEL;
+                        default:
+                            return '';
+                    }
+                })();
+                cloneMenuItem.children =
+                    (destinationChannelGen2Entries === null || destinationChannelGen2Entries === void 0 ? void 0 : destinationChannelGen2Entries.map(item => (Object.assign({}, getInitialFeatureMenuItem({
+                        menu_item_code: item.channelCode,
+                        menu_item_name: item.translateLabel,
+                        logo_url: item.logoUrl,
+                        menu_item_parent: menuItem.menu_item,
+                        menu_item_path: getGeneratePath(path, Object.assign(Object.assign({}, auth), { channelId: item.channelId })),
+                    }))))) || [];
+                break;
+            }
             default:
                 break;
         }
@@ -206,9 +223,6 @@ export const getMappingAppChildren = (args) => {
                         default:
                             break;
                     }
-                    // if (isRecommendation) {
-                    //   childMenuItem.permission_code = MARKETING_CHANNEL_CODE?.[childMenuItem.menu_item_code];
-                    // }
                     return childMenuItem;
                 });
                 break;
@@ -237,10 +251,14 @@ export const findActiveAppCodeByUrl = (args) => {
         const recursiveCheckHasActiveChild = (items) => {
             let matchAppCode = false;
             for (const item of items) {
-                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
-                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth), env))) {
-                    matchAppCode = true;
-                    break;
+                if (item === null || item === void 0 ? void 0 : item.menu_item_path) {
+                    const comparePath = KEEP_HASH_PATH_CODE.includes(item.menu_item_code)
+                        ? getGeneratePath(item.menu_item_path, auth)
+                        : getComparePath(getGeneratePath(item.menu_item_path, auth), env);
+                    if (url.includes(comparePath)) {
+                        matchAppCode = true;
+                        break;
+                    }
                 }
                 if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
                     matchAppCode = recursiveCheckHasActiveChild(item.children);
@@ -279,10 +297,13 @@ export const findLastMatchedItemByUrl = (args) => {
         const matchedItems = [];
         const recursiveFindActiveItem = (items, parentId) => {
             for (const item of items) {
-                if ((item === null || item === void 0 ? void 0 : item.menu_item_path) &&
-                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth), env)) &&
-                    (!parentId || item.menu_item_parent === parentId)) {
-                    matchedItems.push(item);
+                if (item === null || item === void 0 ? void 0 : item.menu_item_path) {
+                    const comparePath = KEEP_HASH_PATH_CODE.includes(item.menu_item_code)
+                        ? getGeneratePath(item.menu_item_path, auth)
+                        : getComparePath(getGeneratePath(item.menu_item_path, auth), env);
+                    if (url.includes(comparePath) && (!parentId || item.menu_item_parent === parentId)) {
+                        matchedItems.push(item);
+                    }
                 }
                 if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
                     recursiveFindActiveItem(item.children, String(item.menu_item));

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

@@ -121,12 +121,13 @@ export const Layout = memo(props => {
     const _c = useDeepCompareMemo(() => merge(cloneDeep(leftMenuProps), cloneDeep(leftMenu)), [leftMenuProps, leftMenu, appConfig]), { className: leftMenuClassName, show: showLeftMenu = true } = _c, mergeLeftMenuProps = __rest(_c, ["className", "show"]);
     const leftMenuAppConfig = useDeepCompareMemo(() => omit(Object.assign(Object.assign({}, appConfig), { permissionDomain }), ['setAppConfig']), [appConfig]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
-    const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList) => {
+    const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList, menuListPermission) => {
         var _a;
         const activeMenuCode = (_a = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1]) === null || _a === void 0 ? void 0 : _a.menu_item_code;
         setActiveMenuCode(activeMenuCode);
         onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange(activeMenuCode);
-        const hasRole = hasSelectAccountPermission(activeItemPath, flattenPermissionList);
+        console.log({ activeItemPath, flattenPermissionList });
+        const hasRole = hasSelectAccountPermission(activeItemPath, flattenPermissionList, menuListPermission);
         setShowAccountSelection(hasRole);
     }, [onActiveMenuChange]);
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/index.js

@@ -29,6 +29,8 @@ export const OldLeftMenu = memo(props => {
                 return 'DATAFLOWS';
             case 'DATASOURCES-SQL_WORKSPACE':
                 return 'DATASOURCES-APP_ANTALYSER';
+            case 'EXPLORERS':
+                return 'ANALYSIS';
             default:
                 return activeKey;
         }

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

@@ -3,10 +3,12 @@ import React, { useLayoutEffect } from 'react';
 // Components
 import { MenuMapping, RecommendationImage } from './components';
 import { Flex } from '../../../../atoms';
+// Stores
 import { useLayoutStore } from '../../stores';
 export const RecommendationWorkspace = () => {
     const setHeaderState = useLayoutStore(store => store.setHeaderState);
     useLayoutEffect(() => {
+        document.title = 'Recommendation';
         setHeaderState({
             pageTitle: 'Recommendation',
         });

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

@@ -28,4 +28,5 @@ export declare const MENU_CODE: {
     JOURNEY_TACTIC: string;
     BATCH_STREAMING: string;
     REALTIME_STREAMING: string;
+    DATA_SOURCE: string;
 };

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

@@ -29,4 +29,5 @@ export const MENU_CODE = {
     JOURNEY_TACTIC: 'JOURNEY_TACTIC',
     BATCH_STREAMING: 'BATCH_STREAMING',
     REALTIME_STREAMING: 'REALTIME_STREAMING',
+    DATA_SOURCE: 'DATA_SOURCE',
 };

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

@@ -18,3 +18,4 @@ export declare const MENU_PERMISSIONS: {
     DESTINATION: string;
     REPORT: string;
 };
+export declare const KEEP_HASH_PATH_CODE: string[];

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

@@ -18,3 +18,4 @@ export const MENU_PERMISSIONS = {
     DESTINATION: 'DESTINATION',
     REPORT: 'REPORT',
 };
+export const KEEP_HASH_PATH_CODE = ['DF_DATA_SOURCE', 'DATA_SOURCE'];

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

@@ -14,4 +14,4 @@ export declare const checkingRoleScope: (args: {
     scope?: number;
     isExactly?: boolean;
 }) => boolean;
-export declare const hasSelectAccountPermission: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => boolean;
+export declare const hasSelectAccountPermission: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[], menuListPermission?: FeatureMenuPermission[]) => boolean;

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

@@ -1,4 +1,4 @@
-import { MENU_CODE, APP_ROLE_SCOPE, MENU_PERMISSIONS } from '../constants';
+import { MENU_CODE, APP_ROLE_SCOPE, MENU_PERMISSIONS, KEEP_HASH_PATH_CODE } from '../constants';
 import { isEmpty } from 'lodash';
 const EDIT_ROLE = new Set(['CREATE', 'UPDATE', 'DELETE']);
 /**
@@ -19,6 +19,7 @@ export const checkingRoleScope = (args) => {
         MENU_CODE.EMAIL_TEMPLATE,
         MENU_CODE.BATCH_STREAMING,
         MENU_CODE.REALTIME_STREAMING,
+        MENU_CODE.DATA_SOURCE,
         // MENU_CODE.SEGMENT,
         // MENU_CODE.DESTINATIONS_HUB,
         MENU_CODE.BUSINESS_OBJECT,
@@ -49,7 +50,7 @@ export const checkingRoleScope = (args) => {
     }
     return isOK;
 };
-export const hasSelectAccountPermission = (activeItemPath, flattenPermissionList) => {
+export const hasSelectAccountPermission = (activeItemPath, flattenPermissionList, menuListPermission) => {
     if (isEmpty(activeItemPath))
         return false;
     let roleScope = false;
@@ -70,7 +71,12 @@ export const hasSelectAccountPermission = (activeItemPath, flattenPermissionList
         else {
             permissionCode = activeItem.permission_code;
         }
-        const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
+        const menuPermission = (() => {
+            if (KEEP_HASH_PATH_CODE.includes(activeItem.menu_item_code)) {
+                // return;
+            }
+            return flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
+        })();
         if (menuPermission) {
             const checkRoleScope = menuPermission
                 ? checkingRoleScope({

package/es/test.js

@@ -20,7 +20,7 @@ import axios from 'axios';
 import { get } from 'lodash';
 import { MENU_PERMISSION } from './components/molecules/ShareAccess/constants';
 import { ConfigProvider } from './providers';
-import { DataTableTest } from './tests';
+import { DataTableTest, MatchesAnySelectTest } from './tests';
 const SHARE_ACCESS_DEFAULT_VALUE = {
     ownerId: 1600085510,
     isPublic: 1,
@@ -106,6 +106,8 @@ export const App = () => {
     const callbackSlideBar = (type, data) => {
         console.log({ type, data });
     };
+    /* MatchesAnySelect */
+    return React.createElement(MatchesAnySelectTest, null);
     /* Data Table */
     return React.createElement(DataTableTest, null);
     // --------------------------- Test Layout 2.0 -------------------------------------------

package/es/tests/MatchesAnySelect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MatchesAnySelectTest: () => React.JSX.Element;

package/es/tests/MatchesAnySelect.js

@@ -0,0 +1,10 @@
+// Libraries
+import React, { useState } from 'react';
+import { MATCHES_ANY_SAMPLE_DATA, MatchesAnySelect } from '../components';
+export const MatchesAnySelectTest = () => {
+    const [state, setState] = useState({
+        selectedItems: [],
+        items: MATCHES_ANY_SAMPLE_DATA,
+    });
+    return (React.createElement(MatchesAnySelect, { items: state.items, selectedItems: state.selectedItems, onChange: selectedItems => setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems }))) }));
+};

package/es/tests/index.d.ts

@@ -1 +1,2 @@
 export { DataTableTest } from './DataTableTest';
+export { MatchesAnySelectTest } from './MatchesAnySelect';

package/es/tests/index.js

@@ -1 +1,2 @@
 export { DataTableTest } from './DataTableTest';
+export { MatchesAnySelectTest } from './MatchesAnySelect';

package/package.json

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