@antscorp/antsomi-ui 1.3.5-beta.216 → 1.3.5-beta.217

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

@@ -8,6 +8,7 @@ export interface AccountSelectionProps {
         userId: number;
         portalId?: number;
         languageCode?: string;
+        appCode?: string;
     };
     showAllAccount?: boolean;
     currentAccount?: number | 'ALL_ACCOUNT';

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

@@ -3,16 +3,54 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Input, Popover, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { AccountItem } from './components';
 import { AccountSelectionStyled, PopoverFieldStyled } from './styled';
-import { useGetAccountList, useGetRecentAccount } from '../../..';
+import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
 import { Tooltip } from 'antd';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
 export const AccountSelection = props => {
     const { show = true, className, apiConfig, showAllAccount = true, currentAccount, inputStyle = 'input', onChange, } = props;
-    const { data } = useGetAccountList({ apiConfig });
-    const { data: recentData } = useGetRecentAccount({ apiConfig });
+    const { domain, token, userId, appCode, portalId } = apiConfig;
+    const { data } = useGetAccountList({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: permissionAccountList } = useGetPermissionAccountList({
+        args: {
+            _account_id: userId,
+            _user_id: userId,
+            _app_code: appCode || '',
+            _token: token,
+            domain,
+            appCode: appCode || '',
+            fullParent: true,
+            menuCode: appCode || '',
+        },
+        options: {
+            enabled: portalId === PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: recentData } = useGetRecentAccount({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const accountData = useMemo(() => {
+        if (portalId === PORTALS_IDS.SANDBOX_76753) {
+            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
+                email: account.email,
+                userId: account.user_id,
+                userName: account.full_name,
+                status: 1,
+            }))) || []);
+        }
+        return (data === null || data === void 0 ? void 0 : data.entries) || [];
+    }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
+    const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === currentAccount), [accountData, currentAccount]);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
-    const currentAccountInfo = useMemo(() => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.entries) === null || _a === void 0 ? void 0 : _a.find(account => account.userId === currentAccount); }, [data, currentAccount]);
     const handleSelectAccount = useCallback((userId) => {
         setOpen(false);
         if (onChange)
@@ -20,10 +58,11 @@ export const AccountSelection = props => {
     }, [onChange]);
     return (show && (React.createElement(Popover, { content: React.createElement(AccountSelectionStyled, { className: className },
             React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
-            React.createElement(Text, { className: "recent-text" }, "Recent"),
-            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.entries) === null || _a === void 0 ? void 0 : _a.find(account => account.userId === accountId); }).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))),
+            !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
+                React.createElement(Text, { className: "recent-text" }, "Recent"),
+                React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))))),
             React.createElement("div", { className: "antsomi-scroll-box account-list" },
-                React.createElement("ul", { className: "scroll-content" }, data === null || data === void 0 ? void 0 : data.entries.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
+                React.createElement("ul", { className: "scroll-content" }, accountData === null || accountData === void 0 ? void 0 : accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
                     searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId }))))),
             showAllAccount ? (React.createElement(Text, { className: `all-account ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
                 React.createElement("strong", null, "All account"))) : null), trigger: "click", overlayInnerStyle: { padding: 0 }, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen },

package/es/components/molecules/HeaderV2/HeaderV2.d.ts

@@ -29,6 +29,8 @@ export interface HeaderV2Props {
         portalId?: number;
         token?: string;
         appCode?: string;
+        permissionDomain?: string;
+        iamDomain?: string;
     };
 }
 export declare const HeaderV2: React.FC<HeaderV2Props>;

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

@@ -9,23 +9,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
 import { AccountSelection } from '../AccountSelection';
 import { AccountSharing, Help, Notification, } from '../../organism';
 // Constants
-import { CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
+import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
+const { DATAFLOWS } = APP_CODES;
 export const HeaderV2 = memo(props => {
     var _a, _b, _c;
-    const { auth, env: envContext, languageCode = 'en', } = useContextSelector(AppConfigContext, state => state);
+    const { auth, env: envContext, languageCode = 'en', appCode, } = useContextSelector(AppConfigContext, state => state);
     /** Prefer to use Header in AppConfigContext */
     const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
-    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, } = config || {};
+    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
     const urlParams = new URLSearchParams(window.location.search);
     const oidParam = urlParams.get('oid');
@@ -47,17 +48,30 @@ export const HeaderV2 = memo(props => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [oidParam, useURLParam, userId]);
+    // Memo
+    const accountSelectionDomain = useMemo(() => {
+        var _a;
+        if (portalId !== PORTALS_IDS.SANDBOX_76753)
+            return CDP_API[env || 'development'];
+        switch (appCode) {
+            case APP_CODES.DATAFLOWS:
+                return (_a = APP_PERMISSION_DOMAIN[appCode || '']) === null || _a === void 0 ? void 0 : _a[env || ''];
+            default:
+                return CDP_API[env || 'development'];
+        }
+    }, [portalId, env, appCode]);
     if (!env || !language || !userId || !portalId || !token)
         return null;
     const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
     const { show: showNotification = true } = notificationConfig;
     const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
     const accountSelectionApiConfig = {
-        domain: CDP_API[env],
+        domain: accountSelectionDomain,
         languageCode: language,
         userId,
         portalId,
         token,
+        appCode,
     };
     const helpConfigProps = Object.assign(Object.assign({}, configs), { portalId: portalId.toString(), userId: userId.toString(), token, domain: CDP_API[env], domainTicket: ISSUE_API[env], domainPlatform: PLATFORM_API, config: Object.assign(Object.assign({}, configs.config), { user_language: language }) });
     const notificationConfigProps = {
@@ -65,17 +79,17 @@ export const HeaderV2 = memo(props => {
         networkId: portalId,
         token,
         lang: language,
-        permissionDomain: PERMISSION_API,
+        permissionDomain,
         socketDomain: SOCKET_API,
     };
     const accountSharingPropsFormatted = {
-        permissionDomain: PERMISSION_API,
-        iamDomain: IAM_API,
+        permissionDomain,
+        iamDomain,
         accountId: userId,
         networkId: portalId,
-        urlEditProfile: `${PERMISSION_API}/${portalId}#/account/profile/`,
+        urlEditProfile: `${permissionDomain}/${portalId}#/account/profile/`,
         // 6006 is storybook port so direct to sandbox page
-        urlLogout: `${window.location.port === '6006' ? 'https://sandbox-cdp.antsomi.com/' : window.location.origin}/gen2/login`,
+        urlLogout: window.location.origin,
         token,
         lang: language,
     };

package/es/components/organism/FilterSetting/utils.d.ts

@@ -40,7 +40,7 @@ export declare const getInputDefaultValue: ({ operator, dataType, property }: {
 export declare const validateFilters: (filters: TFilters, validateFirstCondition?: boolean) => any;
 export declare const getScopSuggest: ({ itemTypeId }: {
     itemTypeId: any;
-}) => 3 | 1 | 2;
+}) => 1 | 2 | 3;
 export declare const setValueSelectAll: (treeData: any) => any;
 export declare const checkDuplicateArray: (data: any) => any;
 export {};

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

@@ -1,7 +1,7 @@
 // Libraries
 import React, { memo, useEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
-import { isEmpty, isNil, isString, uniq } from 'lodash';
+import { isEmpty, isNil, uniq } from 'lodash';
 import classNames from 'classnames';
 import { Link, useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
@@ -11,12 +11,13 @@ import { Flex } from '../../../../../atoms';
 import { MenuItemImage } from './components';
 // Styled
 import { LabelCustom, MenuWrapper } from './styled';
+import { IconWrapper } from '../../../styled';
 // Constants
 import { ICON_SIZE } from '../../../constants';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Utils
-import { findActiveAppCodeByUrl, findLastMatchedCodeByUrl } from '../../../utils';
+import { findActiveAppCodeByUrl, findLastMatchedItemByUrl } from '../../../utils';
 import { recursiveFindParentOfActiveItem } from './utils';
 import { random } from '@antscorp/antsomi-ui/es/utils';
 // Hooks
@@ -40,9 +41,10 @@ export const ChildMenu = memo(props => {
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     // Side Effects
     useEffect(() => {
+        var _a;
         const url = `${pathname}${hash}${search}`;
         /** Active menu item by current url */
-        const activeMenuItem = findLastMatchedCodeByUrl({ url, menuItems, auth });
+        const activeMenuItem = (_a = findLastMatchedItemByUrl({ url, menuItems, auth })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
         if (activeMenuItem && activeMenuItem !== currentActiveItem) {
             setCurrentActiveItem(activeMenuItem);
             /** Find parent key of active menu item to open it */
@@ -91,8 +93,9 @@ 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) ? (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, className: classNames({ isActive: currentActiveItem === key }) })) : null,
+                label: !menu_item_path ? (labelComponent()) : 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())),
+                icon: !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,
                 children: customMenuItems({ parent: item, items: children }),
             };
         });

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

@@ -18,7 +18,6 @@ export const MenuWrapper = styled.div `
     height: 100%;
 
     li {
-      margin: 0 !important;
       width: 100% !important;
 
       [role='icon'] {
@@ -33,6 +32,7 @@ export const MenuWrapper = styled.div `
   }
 
   [role='menuitem'] {
+    margin: 0 !important;
     border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
     padding-right: 10px !important;
   }

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

@@ -26,11 +26,7 @@ export declare const MARKETING_ROUTES: {
 };
 export declare const MARKETING_CHANNEL_KEY: {
     readonly ALL_CHANNEL: 0;
-    readonly ORCHESTRATION: 8;
-};
-export declare const MARKETING_CHANNEL_CODE: {
-    readonly ALL_CHANNEL: "ALL_CHANNEL";
-    readonly ORCHESTRATION: "ORCHESTRATION";
+    readonly JOURNEY_ORCHESTRATION: 8;
 };
 export declare const RENDER_OPTION: {
     readonly CHANNEL: "destination_channel";

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

@@ -42,9 +42,5 @@ export const HOME_REPORT_ROUTES = {
 export const MARKETING_ROUTES = {
     CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId/list',
 };
-export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, ORCHESTRATION: 8 };
-export const MARKETING_CHANNEL_CODE = {
-    ALL_CHANNEL: 'ALL_CHANNEL',
-    ORCHESTRATION: 'ORCHESTRATION',
-};
+export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, JOURNEY_ORCHESTRATION: 8 };
 export const RENDER_OPTION = { CHANNEL: 'destination_channel' };

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, findLastMatchedCodeByUrl, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
 // Store
 import { useLeftMenuStore } from '../stores';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
@@ -48,10 +48,10 @@ export const useLeftMenu = (props) => {
     const { data: menuListPermission } = useGetListMenuPermission({
         args: {
             auth: {
-                token: '5474r2x214z254a4u2a4y4t5w244o444l4s4f464n5k5' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                token: '5474r2x214z284d4w2b4y454a4p5x2d4j4n4w2q4a4v5' || (auth === null || auth === void 0 ? void 0 : auth.token),
                 url: 'https://permission.antsomi.com',
-                userId: '1600080515' || (auth === null || auth === void 0 ? void 0 : auth.userId),
-                accountId: '1600080515' || (auth === null || auth === void 0 ? void 0 : auth.accountId),
+                userId: '1600083836' || (auth === null || auth === void 0 ? void 0 : auth.userId),
+                accountId: '1600083836' || (auth === null || auth === void 0 ? void 0 : auth.accountId),
             },
             params: {
                 type: 'list-app',
@@ -157,13 +157,20 @@ export const useLeftMenu = (props) => {
      * Callback function when url change
      */
     useEffect(() => {
+        var _a;
         const url = `${pathname}${hash}${search}`;
-        const matchedCode = findLastMatchedCodeByUrl({
+        const matchedCode = (_a = findLastMatchedItemByUrl({
             url,
             menuItems: mappingChildrenMenu,
             auth,
-        });
-        onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(matchedCode, flattenMenuPermission);
+        })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
+        const activeItemPath = matchedCode
+            ? findPathOfActiveItem({
+                activeMenuItem: matchedCode,
+                menuItems: mappingChildrenMenu,
+            })
+            : [];
+        onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
     }, [
         auth,
         flattenMenuPermission,

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

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

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

@@ -12,3 +12,4 @@ export declare const FeatureMenuItem: import("styled-components").StyledComponen
 export declare const ChildMenuWrapper: import("styled-components").StyledComponent<"div", any, {
     isExpand: boolean;
 }, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+import { ICON_SIZE } from './constants';
 // Components
 import { Flex } from '../../atoms';
 export const PopoverWrapper = styled.div `
@@ -185,3 +186,14 @@ export const ChildMenuWrapper = styled.div `
   box-sizing: border-box;
   z-index: 1;
 `;
+export const IconWrapper = styled.div `
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: ${ICON_SIZE};
+  }
+`;

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

@@ -54,8 +54,12 @@ export declare const findActiveAppCodeByUrl: (args: {
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
 }) => string | undefined;
-export declare const findLastMatchedCodeByUrl: (args: {
+export declare const findLastMatchedItemByUrl: (args: {
     url: string;
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
-}) => string | undefined;
+}) => TFeatureMenu | undefined;
+export declare const findPathOfActiveItem: (args: {
+    activeMenuItem: string;
+    menuItems: TFeatureMenu[];
+}) => TFeatureMenu[];

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

@@ -13,7 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 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, HOME_REPORT_ROUTES, } from '../constants';
+import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, } from '../constants';
+import { MARKETING_CHANNEL_CODE } from '../../../template/Layout/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
@@ -127,14 +128,14 @@ export const getMappingAppChildren = (args) => {
                             childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
                             break;
                         case MARKETING_CHANNEL_CODE.ORCHESTRATION:
-                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ORCHESTRATION }));
+                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION }));
                             break;
                         default:
                             break;
                     }
                     if ((childMenuItem === null || childMenuItem === void 0 ? void 0 : childMenuItem.render_option) === RENDER_OPTION.CHANNEL) {
                         childMenuItem.children =
-                            ((_a = destinationChannelEntries === null || destinationChannelEntries === void 0 ? void 0 : destinationChannelEntries.filter(item => item.channelId !== MARKETING_CHANNEL_KEY.ORCHESTRATION)) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign({}, getInitialFeatureMenuItem({
+                            ((_a = destinationChannelEntries === null || destinationChannelEntries === void 0 ? void 0 : destinationChannelEntries.filter(item => item.channelId !== MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION)) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign({}, getInitialFeatureMenuItem({
                                 menu_item_code: item.channelCode,
                                 menu_item_name: item.translateLabel,
                                 logo_url: item.logoUrl,
@@ -201,14 +202,14 @@ export const findActiveAppCodeByUrl = (args) => {
         });
     }
 };
-export const findLastMatchedCodeByUrl = (args) => {
+export const findLastMatchedItemByUrl = (args) => {
     try {
         const { url, menuItems, auth } = args;
-        const matchedItemCodes = [];
+        const matchedItems = [];
         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);
+                    matchedItems.push(item);
                 }
                 if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
                     recursiveFindActiveItem(item.children);
@@ -216,13 +217,42 @@ export const findLastMatchedCodeByUrl = (args) => {
             }
         };
         recursiveFindActiveItem(menuItems || []);
-        return matchedItemCodes === null || matchedItemCodes === void 0 ? void 0 : matchedItemCodes.pop();
+        return matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.pop();
     }
     catch (error) {
         handleError(error, {
             path: PATH,
-            name: findLastMatchedCodeByUrl.name,
+            name: findLastMatchedItemByUrl.name,
             args,
         });
     }
 };
+export const findPathOfActiveItem = (args) => {
+    try {
+        const { activeMenuItem, menuItems } = args;
+        const recursiveFindPathOfActiveItem = (menuItems) => {
+            let path = [];
+            for (const item of menuItems) {
+                if (item.menu_item_code === activeMenuItem) {
+                    path.push(item);
+                    break;
+                }
+                const childPath = recursiveFindPathOfActiveItem((item === null || item === void 0 ? void 0 : item.children) || []);
+                if (childPath.length) {
+                    path = [item, ...childPath];
+                    break;
+                }
+            }
+            return path;
+        };
+        return recursiveFindPathOfActiveItem(menuItems);
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: findPathOfActiveItem.name,
+            args,
+        });
+        return [];
+    }
+};

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import AntsProcessingNotification from '@antscorp/processing-notification';
-import { merge } from 'lodash';
+import { isEmpty, merge } from 'lodash';
 // Styled
 import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
 // Components
@@ -23,43 +23,106 @@ import { HeaderV2 } from '../../molecules';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
-import { PERMISSION_API, SOCKET_API } from '../../../constants';
+import { APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, } from '../../../constants';
 // Css
 import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
+// Utils
 import { checkingRoleScope } from './utils';
+import { MENU_PERMISSIONS } from './constants';
+// Types
+const { DATAFLOWS } = APP_CODES;
 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 { auth, languageCode, appCode, env } = useContextSelector(AppConfigContext, state => state);
     const { token, userId, portalId } = auth || {};
     const headerStore = useLayoutStore(store => store.state.header);
     const [showAccountSelection, setShowAccountSelection] = useState(false);
     // Memo
+    const permissionDomain = useMemo(() => {
+        var _a;
+        /**
+         * Check if appCode not exist and portalId is SANDBOX
+         * then return production permission api
+         */
+        if (!appCode || portalId === PORTALS_IDS.SANDBOX)
+            return PERMISSION_API;
+        switch (appCode) {
+            case DATAFLOWS:
+                return ((_a = APP_PERMISSION_DOMAIN[appCode]) === null || _a === void 0 ? void 0 : _a[env || 'development']) || PERMISSION_API;
+            default:
+                return PERMISSION_API;
+        }
+    }, [appCode, env, portalId]);
+    const iamDomain = useMemo(() => {
+        var _a;
+        /**
+         * Check if appCode not exist and portalId is SANDBOX
+         * then return production iam api
+         */
+        if (!appCode || portalId === PORTALS_IDS.SANDBOX)
+            return IAM_API;
+        switch (appCode) {
+            case DATAFLOWS:
+                return ((_a = APP_IAM_DOMAIN[appCode]) === null || _a === void 0 ? void 0 : _a[env || 'development']) || IAM_API;
+            default:
+                return IAM_API;
+        }
+    }, [appCode, env, portalId]);
     const initialHeaderProps = useMemo(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : 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: {
+        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { config: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.config), { permissionDomain,
+                iamDomain }), helpConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : 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',
                         api_pid: 33167,
                         p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
                         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' }), 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]);
+                    } }) }), 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, permissionDomain, 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;
+    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) => {
+        if (isEmpty(activeItemPath)) {
+            setShowAccountSelection(false);
+            return;
+        }
+        let roleScope = false;
+        for (const activeItem of activeItemPath) {
+            let permissionCode;
+            /** Dùng để check xem Permission Code có được lấy từ @constant MENU_PERMISSIONS hay không */
+            let isExternalPermissionCode = false;
+            /**
+             * Kiểm tra nếu MENU_CODE có trong @constant MENU_PERMISSIONS thì lấy Permission từ constant
+             * Không thì lấy từ api Permission
+             * Nếu ở cả 2 nơi đều không có permission thì không hiện account selection
+             */
+            if (Object.keys(MENU_PERMISSIONS).includes(activeItem.menu_item_code)) {
+                permissionCode = MENU_PERMISSIONS[activeItem.menu_item_code];
+                isExternalPermissionCode = true;
+            }
+            else {
+                permissionCode = activeItem.permission_code;
+            }
+            const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
+            if (menuPermission) {
+                const checkRoleScope = menuPermission
+                    ? checkingRoleScope({ menuCode: activeItem.menu_item_code, menuPermission })
+                    : false;
+                if (checkRoleScope) {
+                    roleScope = true;
+                    break;
+                }
+            }
+            /** Nếu trong Api Permission không có những có trong @constant MENU_PERMISSIONS thì vẫn trả về True vì có những MENU_CODE mà BA chưa define permission  */
+            if (isExternalPermissionCode) {
+                roleScope = true;
+                break;
+            }
+        }
         setShowAccountSelection(roleScope);
     }, []);
     return (React.createElement(LayoutWrapper, null,

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

@@ -4,3 +4,17 @@ export declare const APP_ROLE_SCOPE: {
     MANAGEMENT_BY_USER: number;
     EVERYTHING: number;
 };
+export declare const MARKETING_CHANNEL_CODE: {
+    readonly ALL_CHANNEL: "ALL_CHANNEL";
+    readonly ORCHESTRATION: "ORCHESTRATION";
+    readonly CAMPAIGN: "CAMPAIGN";
+};
+/**
+ * Check permissions for showing account selection
+ * 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: {
+    ALL_CHANNEL: string;
+    ORCHESTRATION: string;
+    CAMPAIGN: string;
+};

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

@@ -4,3 +4,17 @@ export const APP_ROLE_SCOPE = {
     MANAGEMENT_BY_USER: 3,
     EVERYTHING: 4,
 };
+export const MARKETING_CHANNEL_CODE = {
+    ALL_CHANNEL: 'ALL_CHANNEL',
+    ORCHESTRATION: 'ORCHESTRATION',
+    CAMPAIGN: 'CAMPAIGN',
+};
+/**
+ * Check permissions for showing account selection
+ * 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 = {
+    [MARKETING_CHANNEL_CODE.ALL_CHANNEL]: 'JOURNEY',
+    [MARKETING_CHANNEL_CODE.ORCHESTRATION]: 'JOURNEY',
+    [MARKETING_CHANNEL_CODE.CAMPAIGN]: 'JOURNEY',
+};

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

@@ -64,8 +64,10 @@ export const TemplateListing = memo(props => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
         setOpenPreviewModal(false);
     };
-    return (React.createElement(AntdConfigProviderV2, null,
-        React.createElement(TemplateListingWrapper, null,
+    return (
+    /** The className "template-listing-wrapper" is used to detect dom in useListingItemResize hook */
+    React.createElement(AntdConfigProviderV2, null,
+        React.createElement(TemplateListingWrapper, { className: "template-listing-wrapper" },
             React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
             React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
                 header,

package/es/constants/api.d.ts

@@ -13,3 +13,17 @@ export declare const PLATFORM_API = "https://platform.ants.tech";
 export declare const PERMISSION_API = "https://permission.antsomi.com";
 export declare const SOCKET_API = "https://ws.ants.tech";
 export declare const IAM_API = "https://iam.ants.tech";
+export declare const APP_PERMISSION_DOMAIN: {
+    [x: string]: {
+        development: string;
+        sandbox: string;
+        production: string;
+    };
+};
+export declare const APP_IAM_DOMAIN: {
+    [x: string]: {
+        development: string;
+        sandbox: string;
+        production: string;
+    };
+};

package/es/constants/api.js

@@ -1,5 +1,7 @@
 // Constants
 import { ENV } from '../config';
+import { APP_CODES } from './variables';
+const { DATAFLOWS } = APP_CODES;
 export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35';
 export const CDP_API = {
     [ENV.DEV]: 'https://sandbox-app.cdp.asia',
@@ -15,3 +17,17 @@ export const PLATFORM_API = 'https://platform.ants.tech';
 export const PERMISSION_API = 'https://permission.antsomi.com';
 export const SOCKET_API = 'https://ws.ants.tech';
 export const IAM_API = 'https://iam.ants.tech';
+export const APP_PERMISSION_DOMAIN = {
+    [DATAFLOWS]: {
+        [ENV.DEV]: 'https://sandbox-permission.ants.vn',
+        [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
+        [ENV.PROD]: 'https://permission.antsomi.com',
+    },
+};
+export const APP_IAM_DOMAIN = {
+    [DATAFLOWS]: {
+        [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
+        [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
+        [ENV.PROD]: 'https://iam.ants.tech',
+    },
+};

package/es/constants/queries.d.ts

@@ -23,5 +23,6 @@ export declare const QUERY_KEYS: {
     GET_LIST_MENU_PERMISSION: string;
     GET_DESTINATION_CHANNEL: string;
     GET_ACCOUNT_LISTING: string;
+    GET_PERMISSION_ACCOUNT_LISTING: string;
     GET_RECENT_ACCOUNT: string;
 };

package/es/constants/queries.js

@@ -34,5 +34,6 @@ export const QUERY_KEYS = {
     GET_DESTINATION_CHANNEL: 'GET_DESTINATION_CHANNEL',
     // Account Listing
     GET_ACCOUNT_LISTING: 'GET_ACCOUNT_LISTING',
+    GET_PERMISSION_ACCOUNT_LISTING: 'GET_PERMISSION_ACCOUNT_LISTING',
     GET_RECENT_ACCOUNT: 'GET_RECENT_ACCOUNT',
 };

package/es/constants/variables.d.ts

@@ -17,3 +17,10 @@ export declare const GET_LIST_TYPE: {
     readonly HAVE_ACCESS: 3;
     readonly SELECTOR: 4;
 };
+export declare const APP_CODES: {
+    DATAFLOWS: string;
+};
+export declare const PORTALS_IDS: {
+    SANDBOX: number;
+    SANDBOX_76753: number;
+};

package/es/constants/variables.js

@@ -17,3 +17,11 @@ export const GET_LIST_TYPE = {
     HAVE_ACCESS: 3,
     SELECTOR: 4,
 };
+/* APP_CODES */
+export const APP_CODES = {
+    DATAFLOWS: 'DATAFLOWS',
+};
+export const PORTALS_IDS = {
+    SANDBOX: 33167,
+    SANDBOX_76753: 76753,
+};

package/es/queries/Permission/index.d.ts

@@ -0,0 +1,8 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+import { TGetAccountList } from '../../services/Permission';
+interface GetAccountListProps {
+    args: TGetAccountList;
+    options?: UseQueryOptions<any, any, any[], any[]>;
+}
+export declare const useGetPermissionAccountList: (props: GetAccountListProps) => import("@tanstack/react-query").UseQueryResult<any[], any>;
+export {};

package/es/queries/Permission/index.js

@@ -0,0 +1,10 @@
+// Libraries
+import { useQuery } from '@tanstack/react-query';
+// Services
+import { permissionService } from '../../services/Permission';
+// Constants
+import { QUERY_KEYS } from '../../constants';
+export const useGetPermissionAccountList = (props) => {
+    const { args, options } = props;
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_PERMISSION_ACCOUNT_LISTING], queryFn: () => permissionService.getAccountList(args) }, options));
+};

package/es/queries/index.d.ts

@@ -7,3 +7,4 @@ export * from './DynamicContentAttribute';
 export * from './ThirdParty';
 export * from './TemplateListing';
 export * from './Media';
+export * from './Permission';

package/es/queries/index.js

@@ -7,3 +7,4 @@ export * from './DynamicContentAttribute';
 export * from './ThirdParty';
 export * from './TemplateListing';
 export * from './Media';
+export * from './Permission';

package/es/services/Permission/index.d.ts

@@ -0,0 +1,13 @@
+export type TGetAccountList = {
+    domain: string;
+    appCode: string;
+    menuCode: string;
+    fullParent: boolean;
+    _user_id: number;
+    _account_id: number;
+    _token: string;
+    _app_code: string;
+};
+export declare const permissionService: {
+    getAccountList: (config: TGetAccountList) => Promise<any>;
+};

package/es/services/Permission/index.js

@@ -0,0 +1,39 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import axios from 'axios';
+import { get } from 'lodash';
+const permissionPath = '/api/permission/index';
+export const permissionService = {
+    getAccountList: (config) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const { domain } = config, restOfConfig = __rest(config, ["domain"]);
+            const response = yield axios({
+                method: 'GET',
+                url: `${domain}${permissionPath}`,
+                params: Object.assign({ type: 'list-account' }, restOfConfig),
+            });
+            return get(response, 'data.data.listAccountId', []);
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    }),
+};

package/package.json

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