@antscorp/antsomi-ui 1.8.3 → 1.8.5

package/es/components/icons/ExpandMoreIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ExpandMoreIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ExpandMoreIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ExpandMoreIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { d: "M16.5938 8.57812L18 9.98438L12 15.9844L6 9.98438L7.40625 8.57812L12 13.1719L16.5938 8.57812Z", fill: "currentColor" })));
+});

package/es/components/icons/index.d.ts

@@ -238,3 +238,4 @@ export { WebIcon } from './WebIcon';
 export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { ExpandMoreIcon } from './ExpandMoreIcon';

package/es/components/icons/index.js

@@ -238,3 +238,4 @@ export { WebIcon } from './WebIcon';
 export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { ExpandMoreIcon } from './ExpandMoreIcon';

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

@@ -40,6 +40,7 @@ export const AccountSelectionStyled = styled.div `
   li {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: 5px 10px;
     margin-bottom: 6px;
     cursor: pointer;

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

@@ -1,4 +1,5 @@
 import React from 'react';
 import { InputDropdownProps } from './types';
+import './style.scss';
 export { Dropdown } from 'antd';
 export declare const InputDropdown: (props: InputDropdownProps) => React.JSX.Element;

package/es/components/molecules/Dropdown/Dropdown.js

@@ -14,7 +14,7 @@ import { Space, Typography } from 'antd';
 import Icon from '@antscorp/icons';
 import { StyledInputDropdownRoot } from './styled';
 import clsx from 'clsx';
-// import './style.scss';
+import './style.scss';
 export { Dropdown } from 'antd';
 const DefaultExpandIcon = React.createElement(Icon, { type: "icon-ants-expand-more" });
 export const InputDropdown = (props) => {

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

@@ -42,6 +42,7 @@ export interface HeaderV2Props {
         permissionDomain?: string;
         iamDomain?: string;
     };
+    onCLickLogo?: () => void;
 }
 export declare const HeaderV2: React.FC<HeaderV2Props>;
 export {};

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

@@ -32,7 +32,7 @@ export const HeaderV2 = memo(props => {
     const { search } = useLocation();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
-    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, onCLickLogo, } = 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, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -110,7 +110,7 @@ export const HeaderV2 = memo(props => {
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
     return (React.createElement(HeaderV2Styled, { "$show": show, className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
-            showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
+            showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true })),
             React.createElement("div", { className: "title-container" },

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

@@ -6,6 +6,7 @@ import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const LogoWrapper = styled.div `
   height: 30px;
   width: 30px;
+  cursor: pointer;
 
   img {
     height: 100%;

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.js

@@ -3,12 +3,13 @@ import produce from 'immer';
 import { Avatar, Dropdown, List } from 'antd';
 import { remove, cloneDeep } from 'lodash';
 import React, { useMemo } from 'react';
-import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
+import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, REGEX_REMOVE_NAME, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { getActionsByUser } from '../../utils';
 import { StyledPeopleAccessRoot } from './styled';
 import { updateModalTransferOwnership, updateObjAccessInfo } from '../../actions';
 import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const ROLE_BY_ACTIONS = {
     [PEOPLE_ACTION_KEYS.TO_OWNER]: ROLE_MAPPING.OWNER,
     [PEOPLE_ACTION_KEYS.TO_EDITOR]: ROLE_MAPPING.EDITOR,
@@ -84,6 +85,7 @@ export const PeopleAccess = (props) => {
     return (React.createElement(StyledPeopleAccessRoot, null,
         React.createElement("div", { className: "title" }, "People with access"),
         React.createElement(List, { dataSource: dataSourceSorted, loading: { spinning: dataSourceSorted.length === 0, indicator: React.createElement(Spin, null) }, renderItem: access => {
+                var _a;
                 const actions = getActionsByUser({
                     userId: accessUserId,
                     updatedUserId: access.userId,
@@ -97,8 +99,10 @@ export const PeopleAccess = (props) => {
                 return (React.createElement(List.Item, null,
                     React.createElement(Avatar, { src: access.avatar }),
                     React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" }, access.fullName || (access === null || access === void 0 ? void 0 : access.name)),
-                        React.createElement("div", { className: "email" }, access.email)),
+                        React.createElement("div", { className: "name" },
+                            REGEX_REMOVE_NAME.test(access.email || '') && (React.createElement("span", { style: { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.red6 } }, "[Deleted account]\u00A0")),
+                            access.fullName || (access === null || access === void 0 ? void 0 : access.name)),
+                        React.createElement("div", { className: "email" }, (_a = access.email) === null || _a === void 0 ? void 0 : _a.replace(REGEX_REMOVE_NAME, ''))),
                     React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
                             items: renderActionItems(actions),
                             onClick: e => handleClickAction(e.key, access.userId),

package/es/components/molecules/ShareAccess/constants.d.ts

@@ -1,4 +1,5 @@
 import { AccessRole, UserAccessInfo } from './types';
+export declare const REGEX_REMOVE_NAME: RegExp;
 export declare const PUBLIC_ROLE: {
     ONLY_EDITOR: number;
     ONLY_VIEWER: number;

package/es/components/molecules/ShareAccess/constants.js

@@ -1,3 +1,4 @@
+export const REGEX_REMOVE_NAME = /\.remove#1$/i;
 export const PUBLIC_ROLE = {
     ONLY_EDITOR: 2,
     ONLY_VIEWER: 3,

package/es/components/molecules/ShareAccess/utils.d.ts

@@ -26,19 +26,7 @@ export declare const getActionsByUser: (args: {
     updatedUserId?: number;
     objectAccessInfo?: ObjectAccessInfo;
     omit?: Array<(typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS]>;
-}) => ({
-    readonly label: "Viewer";
-    readonly key: "to_viewer";
-} | {
-    readonly label: "Editor";
-    readonly key: "to_editor";
-} | {
-    readonly label: "Transfer ownership";
-    readonly key: "to_owner";
-} | {
-    readonly label: "Remove Access";
-    readonly key: "remove_acess";
-})[];
+}) => any[];
 export declare const initAccessInfoDefault: (userInfo: Partial<UserInfo>) => ObjectAccessInfo;
 export declare const safeParseAccessInfo: (accessInfo: ObjectAccessInfo) => {
     ownerId: number;

package/es/components/molecules/ShareAccess/utils.js

@@ -1,4 +1,4 @@
-import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
+import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, REGEX_REMOVE_NAME, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
 import { remove } from 'lodash';
 import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
@@ -54,7 +54,9 @@ export const getActionsByUser = (args) => {
     });
     if ((!user && !isPublic) || !updatedUser || !allowEdit || updatedUser.userId === ownerId)
         return [];
-    const actions = Object.values(PEOPLE_ACTION_KEYS);
+    const actions = REGEX_REMOVE_NAME.test(updatedUser.email || '')
+        ? ['remove_acess']
+        : Object.values(PEOPLE_ACTION_KEYS);
     if (userId !== ownerId || (omit === null || omit === void 0 ? void 0 : omit.includes('to_owner'))) {
         remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_OWNER);
     }

package/es/components/organism/AccountSharing/AccountSharing.d.ts

@@ -15,5 +15,6 @@ export interface AccountSharingProps {
     isShareAccountAccess?: boolean;
     u_ogs: string;
     callbackLogout?: () => void;
+    usePrivilege?: boolean;
 }
 export declare const AccountSharing: React.FC<AccountSharingProps>;

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -19,12 +19,12 @@ import CloseIcon from './icons/close';
 import SearchIcon from './icons/search';
 import { InnerCardStyled, InputSearchStyled, PackageSharingStyled, TriggerPopoverStyled, } from './styled';
 // Utils
-import { formatUserId } from '@antscorp/antsomi-ui/es/utils';
+import { formatUserId, getObjectPropSafely, removeAppCookieSessionSubdomain, removeAppCookieSessionSubdomainPrefix, } from '@antscorp/antsomi-ui/es/utils';
 import { translate } from './utils';
 import Icon from '@antscorp/icons';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { DEFAULT_TRANSLATE_DATA } from './constant';
-import { THEME, UOGS_PREFIX } from '@antscorp/antsomi-ui/es/constants';
+import { CDP_ROUTE, THEME, UOGS_PREFIX } from '@antscorp/antsomi-ui/es/constants';
 import { useAppConfigContext } from '../../..';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
@@ -40,7 +40,7 @@ const InputSearch = props => {
 };
 export const AccountSharing = props => {
     var _a;
-    const { permissionDomain = '', iamDomain = '', token = '', accountId = 0, networkId = 0, appCode = '', lang = 'en', translateData = DEFAULT_TRANSLATE_DATA, urlEditProfile = '', callbackGetInfoAccount, urlLogout = '', isShowSharing = false, isShareAccountAccess = false, u_ogs = '', callbackLogout, } = props;
+    const { permissionDomain = '', iamDomain = '', token = '', accountId = 0, networkId = 0, appCode = '', lang = 'en', translateData = DEFAULT_TRANSLATE_DATA, urlEditProfile = '', callbackGetInfoAccount, urlLogout = '', isShowSharing = false, isShareAccountAccess = false, u_ogs = '', callbackLogout, usePrivilege = true, } = props;
     const { appConfig } = useAppConfigContext();
     const { env } = appConfig;
     const selectedNetworkRef = useRef();
@@ -60,7 +60,7 @@ export const AccountSharing = props => {
     const [serverTranslateData, setServerTranslateData] = useState({});
     const [language, setLanguage] = useState(lang || 'en');
     const debounceSearch = useDebounce(accountSearch, 500);
-    const [cookies, setCookie, removeCookie] = useCookies();
+    const [, setCookie] = useCookies();
     const domain = iamDomain.charAt(iamDomain.length - 1) === '/' ? iamDomain : `${iamDomain}/`;
     const translateLang = useMemo(() => translate(translateData, serverTranslateData, language), [serverTranslateData, language, translateData]);
     const getInfoAccount = () => {
@@ -120,6 +120,77 @@ export const AccountSharing = props => {
             }
         });
     };
+    const getMenuUrl = (menu, userId = '') => {
+        if (!menu || !menu.menu_path) {
+            return '';
+        }
+        const { app_domain: appDomain, app_path: appPath, menu_path: menuPath } = menu;
+        return (appDomain + appPath + menuPath).replaceAll(':user_id', userId);
+    };
+    const redirectFirstMenu = (data, redirectAccountId) => {
+        if (!Array.isArray(data)) {
+            return false;
+        }
+        const arrMenus = getObjectPropSafely(() => [...data].sort((first, second) => first.app_order - second.app_order)[0].childs) || [];
+        if (arrMenus && arrMenus.length) {
+            const firstMenu = arrMenus
+                .filter(menu => +menu.show_hide)
+                .sort((first, second) => first.menu_order - second.menu_order)[0];
+            if (firstMenu) {
+                const redirectUrl = getMenuUrl(firstMenu, redirectAccountId);
+                window.location.href = redirectUrl;
+            }
+        }
+    };
+    const buildListAppMenus = (data, userId) => {
+        if (!Array.isArray(data) || !data.length) {
+            return [];
+        }
+        let arrMenus = [];
+        data.forEach(item => {
+            if (item.menu_id) {
+                arrMenus.push(getMenuUrl(item, userId));
+            }
+            if (item.childs && item.childs.length) {
+                arrMenus = arrMenus.concat(buildListAppMenus(item.childs, userId));
+            }
+        });
+        return arrMenus;
+    };
+    const checkRedirectHomePage = (homePage, data, userId) => {
+        const convertedHomePage = String(homePage).replace(/:user_id/g, userId);
+        if (!Array.isArray(data) || !data.length) {
+            window.location.href = convertedHomePage;
+            return;
+        }
+        const arrMenus = buildListAppMenus(data, userId);
+        if (!arrMenus.some(url => convertedHomePage.includes(url))) {
+            return redirectFirstMenu(data, userId);
+        }
+        window.location.href = convertedHomePage;
+    };
+    const getAppsMenus = ({ token, userId, accountId, homePage }) => {
+        if (permissionDomain && token && userId && accountId) {
+            const apiUrl = permissionDomain + (usePrivilege ? '/api/privilege/index' : '/api/permission/index');
+            return axios({
+                url: apiUrl,
+                params: {
+                    type: 'list-app',
+                    _token: token,
+                    _user_id: userId,
+                    _account_id: accountId,
+                    _lang: 'en',
+                    hasChild: true,
+                    from: 'login',
+                },
+            }).then(res => {
+                if (res && res.data) {
+                    checkRedirectHomePage(homePage, res.data.data, userId);
+                }
+            });
+        }
+        return null;
+    };
     const getListAccountSharing = () => {
         if (isShareAccountAccess) {
             const params = {
@@ -208,7 +279,11 @@ export const AccountSharing = props => {
             });
         }
     }, [limitAccount]);
-    const filterListNetwork = useMemo(() => listNetworks.filter((netWork) => netWork.networkName.toLocaleLowerCase().indexOf(portalSearch.toLocaleLowerCase()) !== -1), [listNetworks, portalSearch]);
+    const filterListNetwork = useMemo(() => listNetworks.filter((netWork) => netWork.networkName.toLocaleLowerCase().indexOf(portalSearch.toLocaleLowerCase()) !==
+        -1 ||
+        String(netWork.networkId)
+            .toLocaleLowerCase()
+            .indexOf(portalSearch.toLocaleLowerCase()) !== -1), [listNetworks, portalSearch]);
     const logAccountSwitch = (switchAccountId) => __awaiter(void 0, void 0, void 0, function* () {
         // setIsShowLoading(true)
         if (switchAccountId && isShareAccountAccess) {
@@ -229,18 +304,33 @@ export const AccountSharing = props => {
     });
     // const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
     const onClickButtonLogout = useCallback(() => {
-        removeCookie(`${UOGS_PREFIX}${networkId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
-            domain: `.${origin.split('.').splice(-2).join('.')}`,
-        })), { path: '/', sameSite: 'none', secure: true }));
+        // Handle remove cookie and redirect to login
+        removeAppCookieSessionSubdomainPrefix({ name: UOGS_PREFIX, env });
+        removeAppCookieSessionSubdomain({ name: 'c_pid', env });
+        removeAppCookieSessionSubdomain({ name: 'api_token', env });
+        removeAppCookieSessionSubdomain({ name: 'api_r_token', env });
+        removeAppCookieSessionSubdomain({ name: 'api_pid', env });
+        removeAppCookieSessionSubdomain({ name: 'user_id', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_email', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_full_name', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_avatar', env });
+        removeAppCookieSessionSubdomain({ name: '_fe_ogs_pid', env });
+        localStorage.removeItem('cdp_decrypt_permission');
         if (callbackLogout)
             callbackLogout();
-        if (urlLogout) {
-            window.location.href = urlLogout;
-        }
-        else {
+        // Check if env is dev
+        if (env === ENV.DEV) {
             window.location.reload();
+            return;
         }
-    }, [callbackLogout, env, networkId, removeCookie, urlLogout]);
+        // Handle logout with cdp domain
+        window.location.href = `${CDP_ROUTE[ENV.PROD]}/iam#/login`;
+        // if (urlLogout) {
+        //   window.location.href = urlLogout;
+        // } else {
+        //   window.location.reload();
+        // }
+    }, [callbackLogout, env]);
     useEffect(() => {
         const logoutEvent = (event) => {
             const { data } = event;
@@ -328,7 +418,13 @@ export const AccountSharing = props => {
             }
         }
         if (selectedNetworkRef.current && selectedNetworkRef.current.homePage) {
-            window.location.href = selectedNetworkRef.current.homePage.replaceAll(':user_id', accountId);
+            getAppsMenus({
+                token: postParam.token,
+                userId: accountId,
+                accountId,
+                homePage: selectedNetworkRef.current.homePage,
+            });
+            // window.location.href = selectedNetworkRef.current.homePage.replaceAll(':user_id', accountId);
         }
     };
     const handleLoginData = (data = null) => {

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

@@ -18,7 +18,7 @@ import { useLeftMenuContext } from './contexts';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const homePermissionCode = 'DASHBOARD';
 export const LeftMenuComponent = memo(props => {
-    const { show = true, style, className, customization, showLogo = true } = props;
+    const { show = true, style, className, customization, showLogo = true, onClickLogo } = props;
     const { showMenuPopover = true, showButtonExpand = true, type, items = [], onMenuItemClick, } = customization || {};
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const customHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
@@ -109,7 +109,7 @@ export const LeftMenuComponent = memo(props => {
     return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
             React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
-                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },
+                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo },
                     React.createElement("div", { className: "image-wrapper" },
                         React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),
                 React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },

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

@@ -13,8 +13,8 @@ import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 import { usePermission } from './usePermission';
 import { useCustomRouter, useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import { useNavigatePath } from './useNavigatePath';
+const cookies = new ReactCookies();
 export const useLeftMenu = (props) => {
-    // Props
     const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
     const { defaultExpandMenu, type, items, activeKey, onMenuItemClick } = customization || {};
     const mappedActiveKey = useMemo(() => {
@@ -36,7 +36,6 @@ export const useLeftMenu = (props) => {
                 return activeKey;
         }
     }, [activeKey, type]);
-    const cookies = new ReactCookies();
     const { pathname, hash, origin } = window.location;
     const { navigate } = useCustomRouter();
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
@@ -46,21 +45,13 @@ export const useLeftMenu = (props) => {
     const { auth, env } = appConfig || {};
     const timeoutPopover = useRef(null);
     const openLeftMenuCookies = cookies.get('_leftmenu_state');
-    const isOpenMenu = !isNil(openLeftMenuCookies) ? Boolean(openLeftMenuCookies) : true;
+    const isOpenMenu = !isNil(openLeftMenuCookies) ? Boolean(openLeftMenuCookies) : false;
     const [state, setState] = useState({
         hoverItem: '',
         isShowPopover: false,
-        isExpandMenu: true,
+        isExpandMenu: isBoolean(defaultExpandMenu) ? defaultExpandMenu : isOpenMenu,
     });
     const { mappingChildrenMenu, flattenMenuPermission, menuListPermission, permissionMenu, activeItemPath, } = usePermission();
-    useEffect(() => {
-        if (isBoolean(defaultExpandMenu)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: defaultExpandMenu })));
-        }
-        else {
-            setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: isOpenMenu })));
-        }
-    }, [defaultExpandMenu, isOpenMenu]);
     const onMenuClick = useCallback((key, keyPath) => {
         if (type === 'recommendation') {
             setLeftMenuContextState({ customActiveCurrentKey: key });
@@ -68,7 +59,7 @@ export const useLeftMenu = (props) => {
         onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
     }, [customActiveAppKey, onMenuItemClick, setLeftMenuContextState, type]);
     useDeepCompareEffect(() => {
-        if (!isBoolean(defaultExpandMenu)) {
+        if (defaultExpandMenu === undefined) {
             cookies.set('_leftmenu_state', state.isExpandMenu ? 1 : 0, {
                 domain: `.${origin.split('.').splice(-2).join('.')}`,
                 path: '/',
@@ -76,7 +67,7 @@ export const useLeftMenu = (props) => {
                 secure: true,
             });
         }
-    }, [openLeftMenuCookies, origin, state.isExpandMenu]);
+    }, [cookies, defaultExpandMenu, origin, state.isExpandMenu]);
     useDeepCompareEffect(() => {
         setLeftMenuContextState({
             appConfig,

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

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

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

@@ -276,6 +276,12 @@ export const Layout = memo(props => {
             }
         }
     }, [antsProcessingNotificationConfig, env]);
+    const onCLickLogo = useCallback(() => {
+        // Redirect to recommendation
+        if (env !== ENV.DEV) {
+            window.location.assign(`${CDP_ROUTE[env || 'development']}/gen2/${portalId}/dashboard/recommendation`);
+        }
+    }, [env, portalId]);
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(Helmet, null,
             React.createElement("meta", { charSet: "utf-8" }),
@@ -285,7 +291,7 @@ export const Layout = memo(props => {
                         ? header === null || header === void 0 ? void 0 : header.pageTitle
                         : ''
                     : activePageTitle))),
-        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu })),
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu, onCLickLogo: onCLickLogo })),
         React.createElement(Flex, { className: "layout-body" },
             React.createElement(LeftMenu, Object.assign({ show: showLeftMenu && !showOnlyContent, className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
                     // If user has access denied, disable expandable

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -186,14 +186,34 @@ export const GlobalStyle = () => {
 
       // NOTE: Just hot fix for easy looking
       .antsomi-btn-primary.antsomi-btn-compact-item.antsomi-btn-compact-first-item {
-        padding-right: 4px !important;
+        padding-right: 6px !important;
       }
       .antsomi-btn-compact-item.antsomi-btn-primary.antsomi-btn-compact-last-item {
         width: fit-content;
-        padding: 0px !important;
-        padding-right: 4px !important;
+        //padding: 0px !important;
+        padding: 0px 4px !important;
         &::before {
-          width: 0px !important;
+          content: '';
+          position: absolute;
+          left: 0px;
+          background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue5} !important;
+          top: auto !important;
+          height: 80% !important;
+          width: 1px !important;
+        }
+
+        &:disabled {
+          &::before {
+            background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4} !important;
+          }
+        }
+
+        &:not(:disabled) {
+          &:hover {
+            &:: before {
+              opacity: 0;
+            }
+          }
         }
       }
 

package/es/utils/cookie.d.ts

@@ -0,0 +1,11 @@
+import { TEnv } from '../types/config';
+interface RemoveCookieSubDomain {
+    name: string;
+    env?: TEnv;
+    cookieOptions?: Record<string, any>;
+}
+export declare const removeCookieSubDomain: ({ name, env, cookieOptions, }: RemoveCookieSubDomain) => void;
+export declare const removeAppCookieSessionSubdomain: (args: RemoveCookieSubDomain) => void;
+export declare const removeAppCookieSession: (args: RemoveCookieSubDomain) => void;
+export declare const removeAppCookieSessionSubdomainPrefix: (args: RemoveCookieSubDomain) => void;
+export {};

package/es/utils/cookie.js

@@ -0,0 +1,33 @@
+// Libraries
+import { Cookies } from 'react-cookie';
+import { ENV } from '../config';
+const cookies = new Cookies(null, {
+    path: '/',
+    sameSite: 'none',
+    secure: true,
+});
+export const removeCookieSubDomain = ({ name, env = 'development', cookieOptions, }) => {
+    const arrTmp = location.hostname.split('.');
+    cookies.remove(name, Object.assign(Object.assign(Object.assign({}, (env !== ENV.DEV && {
+        domain: `.${arrTmp.length < 4 ? arrTmp.slice(-2).join('.') : arrTmp.slice(-3).join('.')}`,
+    })), { path: '/', sameSite: 'none', secure: true }), cookieOptions));
+};
+export const removeAppCookieSessionSubdomain = (args) => {
+    removeCookieSubDomain(args);
+    if (typeof Storage !== undefined) {
+        sessionStorage.removeItem(args.name);
+    }
+};
+export const removeAppCookieSession = (args) => {
+    cookies.remove(args === null || args === void 0 ? void 0 : args.name, args === null || args === void 0 ? void 0 : args.cookieOptions);
+    if (typeof Storage !== undefined) {
+        sessionStorage.removeItem(args.name);
+    }
+};
+export const removeAppCookieSessionSubdomainPrefix = (args) => {
+    Object.keys(cookies.getAll()).forEach(cookieName => {
+        if (cookieName.startsWith(args.name)) {
+            removeAppCookieSessionSubdomain(Object.assign(Object.assign({}, args), { name: cookieName }));
+        }
+    });
+};

package/es/utils/index.d.ts

@@ -6,3 +6,4 @@ export * from './styles';
 export * from './variables';
 export * from './actionButtons';
 export * from './dataTable';
+export * from './cookie';

package/es/utils/index.js

@@ -6,3 +6,4 @@ export * from './styles';
 export * from './variables';
 export * from './actionButtons';
 export * from './dataTable';
+export * from './cookie';

package/package.json

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