@antscorp/antsomi-ui 1.3.5-beta.544 → 1.3.5-beta.545

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+interface AccessDeniedProps {
+    image?: ReactNode;
+    title?: ReactNode;
+    subTitle?: ReactNode;
+    description?: ReactNode;
+    onClickRequestAccess?: () => void;
+    onClickSwitchAccount?: () => void;
+}
+export declare const AccessDenied: React.FC<AccessDeniedProps>;
+export {};

package/es/components/molecules/AccessDenied/AccessDenied.js

@@ -0,0 +1,25 @@
+// Libraries
+import React from 'react';
+// Components
+import { Button, Flex, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { AccessDeniedWrapper } from './styled';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Assets
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const { Text } = Typography;
+const { t } = i18nInstance;
+const AccessDeniedLockImage = 'https://st-media-template.antsomi.com/icons/antsomi/access_denied.png';
+export const AccessDenied = props => {
+    const { image = AccessDeniedLockImage, title = t(translations.accessDenied.title).toString(), subTitle = t(translations.accessDenied.subTitle).toString(), description = t(translations.accessDenied.description).toString(), onClickRequestAccess, onClickSwitchAccount, } = props;
+    return (React.createElement(AccessDeniedWrapper, { vertical: true, align: "center", justify: "center" },
+        typeof image === 'string' ? (React.createElement("img", { src: image, alt: "Access Denied", className: "access-denied__lock", width: 100, height: "auto" })) : (image),
+        React.createElement(Flex, { vertical: true, gap: 5, align: "center" },
+            React.createElement(Text, { className: "access-denied__title", strong: true }, title),
+            React.createElement(Text, { className: "access-denied__subtitle" }, subTitle),
+            React.createElement(Text, { className: "access-denied__description" }, description)),
+        React.createElement(Flex, { className: "access-denied__actions", gap: 10 },
+            React.createElement(Button, { type: "primary", onClick: onClickRequestAccess }, t(translations.accessDenied.requestAccess).toString()),
+            React.createElement(Button, { type: "default", onClick: onClickSwitchAccount }, t(translations.accessDenied.switchAccount).toString()))));
+};

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

@@ -0,0 +1 @@
+export { AccessDenied } from './AccessDenied';

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

@@ -0,0 +1 @@
+export { AccessDenied } from './AccessDenied';

package/es/components/molecules/AccessDenied/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AccessDeniedWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +1,35 @@
+// Libraries
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import styled from 'styled-components';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { bw8, orange6 } = globalToken || {};
+export const AccessDeniedWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .access-denied {
+    &__lock {
+      width: 100px;
+      margin-bottom: 15px;
+    }
+
+    &__title {
+      color: ${orange6};
+      font-size: 20px;
+      line-height: 23.44px;
+    }
+
+    &__subtitle {
+      font-weight: 600;
+    }
+
+    &__description {
+      color: ${bw8};
+    }
+
+    &__actions {
+      margin-top: 20px;
+    }
+  }
+`;

package/es/components/molecules/SelectAccount/AccountItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+type AccountItemProps = {
+    checked: boolean;
+    label: string;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (e: CheckboxChangeEvent) => void;
+};
+declare const _default: React.NamedExoticComponent<AccountItemProps>;
+export default _default;

package/es/components/molecules/SelectAccount/AccountItem.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { CheckboxStyled } from './styled';
+import { Typography } from '../../atoms';
+const AccountItem = props => {
+    const { checked, label, disabled, name, onChange } = props;
+    const TextLabel = ({ children }) => (React.createElement(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '220px' } }, children));
+    return (React.createElement(CheckboxStyled, { name: name, disabled: disabled, checked: checked, onChange: onChange },
+        React.createElement(TextLabel, null, label)));
+};
+export default memo(AccountItem);

package/es/components/molecules/SelectAccount/AccountList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 type AccountListProps = {};
-declare const AccountList: React.FC<AccountListProps>;
-export default AccountList;
+declare const _default: React.NamedExoticComponent<AccountListProps>;
+export default _default;

package/es/components/molecules/SelectAccount/AccountList.js

@@ -1,56 +1,93 @@
-import React, { useContext, useState } from 'react';
-import { AccountListBody, AccountListContent, AccountListFooter, AccountListTitleGroup, AccountListWrapper, CheckboxStyled, } from './styled';
-import { Button, Icon, Input, Scrollbars, Typography } from '../../atoms';
-import { Dropdown } from '../Dropdown';
+// Libraries
+import React, { memo, useContext, useEffect, useState } from 'react';
+import { slice } from 'lodash';
+// Context
 import { SelectAccountContext } from './context/SelectAccountContext';
+// Components
+import { AccountListBody, AccountListContent, AccountListFooter, AccountListTitleGroup, AccountListWrapper, } from './styled';
+import { Button, Icon, Input, Scrollbars } from '../../atoms';
+import { Dropdown } from '../Dropdown';
+import AccountItem from './AccountItem';
 const AccountList = () => {
+    var _a;
     const { formListRef, state, dispatch } = useContext(SelectAccountContext);
-    const { usersSelected, usersDisplay, disabledAccount, nameKey, userIdKey, searchText, listAccountGroupDisplay, } = state;
+    const { usersSelected, usersDisplay, disabledAccount, nameKey, userIdKey, searchText, listAccountGroupDisplay, limit = 10, } = state;
+    const POSITION_TOP = 0.9;
+    // States
     const [openGroup, setOpenGroup] = useState(true);
     const [openAccount, setOpenAccount] = useState(true);
+    const [page, setPage] = useState(1);
+    const [pageGroup, setPageGroup] = useState(1);
+    const [tempSelected, setTempSelected] = useState([]);
+    useEffect(() => {
+        setTempSelected([...usersSelected]);
+    }, [usersSelected]);
     const handleCancel = () => {
         dispatch({ type: 'CLOSE_ACCOUNT_LIST' });
     };
     const handleApply = () => {
-        dispatch({ type: 'APPLY', payload: { formRef: formListRef } });
+        dispatch({ type: 'APPLY_SELECTED', payload: tempSelected });
     };
     const handleSearch = text => {
         dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: text });
     };
-    const TextLabel = ({ children }) => (React.createElement(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '220px' } }, children));
+    const handleTempSelected = (isChecked, key) => {
+        if (isChecked) {
+            setTempSelected([...tempSelected, key]);
+        }
+        else {
+            setTempSelected(tempSelected.filter(id => id !== key));
+        }
+    };
     return (React.createElement(AccountListWrapper, null,
         React.createElement(AccountListBody, null,
             React.createElement("form", { ref: formListRef, id: "form-account-list" },
                 React.createElement(Input, { value: searchText, placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2" }), onAfterChange: value => handleSearch(value), debounce: 500 }),
                 (state === null || state === void 0 ? void 0 : state.type) === 'group' ? (React.createElement(React.Fragment, null,
-                    React.createElement(Dropdown, { open: openGroup, getPopupContainer: () => document.getElementById('account-group-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (
-                        // <AccountListContent>
-                        React.createElement(Scrollbars, { style: {
-                                width: '100%',
-                                height: 160,
-                            } }, listAccountGroupDisplay === null || listAccountGroupDisplay === void 0 ? void 0 : listAccountGroupDisplay.map((item, idx) => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], name: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], value: typeof (item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), defaultChecked: usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) },
-                            React.createElement(TextLabel, null, item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey])))))
-                        // </AccountListContent>
-                        ) },
+                    React.createElement(Dropdown, { open: openGroup, getPopupContainer: () => document.getElementById('account-group-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => {
+                            var _a;
+                            return (
+                            // <AccountListContent>
+                            React.createElement(Scrollbars, { width: "100%", autoHeight: true, autoHeightMax: 160, onScrollFrame: values => {
+                                    if (values.top > POSITION_TOP &&
+                                        limit * pageGroup < (listAccountGroupDisplay === null || listAccountGroupDisplay === void 0 ? void 0 : listAccountGroupDisplay.length)) {
+                                        setPageGroup(pageGroup + 1);
+                                    }
+                                } },
+                                React.createElement(AccountListContent, null, (_a = slice(listAccountGroupDisplay, 0, limit * pageGroup)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], name: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), label: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) })))))
+                            // </AccountListContent>
+                            );
+                        } },
                         React.createElement(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup) },
-                            React.createElement("div", null, "Account Group"),
-                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, style: {
+                            React.createElement("div", null, state.groupText || 'Account group'),
+                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
                                     transform: openGroup ? 'rotate(180deg)' : 'rotate(0deg)',
                                     transition: '0.3s',
                                 } }))),
                     React.createElement("div", { id: "account-group-list" }),
-                    React.createElement(Dropdown, { open: openAccount, getPopupContainer: () => document.getElementById('account-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => (React.createElement(AccountListContent, null, usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.map(item => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], value: typeof (item === null || item === void 0 ? void 0 : item[userIdKey]), disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), defaultChecked: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]) },
-                            React.createElement(TextLabel, null, item === null || item === void 0 ? void 0 : item[nameKey])))))) },
+                    React.createElement(Dropdown, { open: openAccount, getPopupContainer: () => document.getElementById('account-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => {
+                            var _a;
+                            return (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", onScrollFrame: values => {
+                                    if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
+                                        setPage(page + 1);
+                                    }
+                                } },
+                                React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[userIdKey]) }))))));
+                        } },
                         React.createElement(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount) },
-                            React.createElement("div", null, "Account"),
-                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, style: {
+                            React.createElement("div", null, state.accountText || 'Account'),
+                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
                                     transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
                                     transition: '0.3s',
                                 } }))),
-                    React.createElement("div", { id: "account-list" }))) : (React.createElement(AccountListContent, { style: { marginTop: 15 } }, usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.map(item => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], value: typeof (item === null || item === void 0 ? void 0 : item[userIdKey]), disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), defaultChecked: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]) },
-                    React.createElement(TextLabel, null, item === null || item === void 0 ? void 0 : item[nameKey])))))))),
+                    React.createElement("div", { id: "account-list" }))) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", style: { marginTop: 15 }, onScrollFrame: values => {
+                        if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
+                            setPage(page + 1);
+                        }
+                    } },
+                    React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[userIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[userIdKey]) })))))))),
         React.createElement(AccountListFooter, null,
             React.createElement(Button, { onClick: () => handleCancel() }, state.cancelText || 'Cancel'),
             React.createElement(Button, { type: "primary", onClick: () => handleApply() }, state.applyText || 'Apply'))));
 };
-export default AccountList;
+export default memo(AccountList);

package/es/components/molecules/SelectAccount/context/reducer.js

@@ -90,6 +90,21 @@ export const reducer = (state, action) => produce(state, draft => {
             }
             break;
         }
+        case 'APPLY_SELECTED':
+            draft.usersSelected = action.payload;
+            draft.openAccountList = false;
+            // handle change
+            if (typeof draft.onChange === 'function') {
+                const optionUsersSelected = [...state.users].filter(user => draft.usersSelected.includes(user[state.userIdKey]));
+                const optionGroupSelected = state.type === 'group'
+                    ? [...state.listAccountGroup].filter(group => draft.usersSelected.includes(group[state.groupIdKey]))
+                    : [];
+                draft.onChange(draft.usersSelected, [
+                    ...(optionUsersSelected || []),
+                    ...(optionGroupSelected || []),
+                ]);
+            }
+            break;
         case 'UPDATE_USERS':
             if (Array.isArray(action.payload)) {
                 draft.users = action.payload;

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

@@ -13,6 +13,7 @@ export const SelectAccount = props => (React.createElement(QueryClientProviderAn
             React.createElement(Content, null)))));
 SelectAccount.defaultProps = {
     initData: [],
+    limit: 10,
     limitShow: 10,
     type: 'default',
     searchType: 'client',

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

@@ -108,10 +108,12 @@ export const AccountListTitleGroup = styled.div `
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 10px;
 
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  height: 30px;
   cursor: pointer;
 `;
 export const AccountListContent = styled.div `
@@ -119,41 +121,12 @@ export const AccountListContent = styled.div `
   flex-direction: column;
   gap: 5px;
 
-  max-height: 160px;
-  overflow: auto;
-
   & label:hover {
     background-color: #f2f9ff;
   }
-
-  &:hover::-webkit-scrollbar-thumb {
-    display: initial !important;
-    -ms-overflow-style: initial; /* IE and Edge */
-    scrollbar-width: initial; /* Firefox */
-  }
-
-  ::-webkit-scrollbar {
-    border-radius: 15px !important;
-    width: 4px !important;
-    height: 4px !important;
-    background-color: transparent !important;
-  }
-  ::-webkit-scrollbar-track {
-    border-radius: 15px !important;
-    background-color: transparent !important;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    display: none !important;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-
-    border-radius: 15px !important;
-    background-color: #babac0 !important;
-  }
 `;
 export const CheckboxStyled = styled(Checkbox) `
-  padding: 5px !important;
+  padding: 3px !important;
   border-radius: 10px !important;
 `;
 export const ViewAllWrapper = styled.div `

package/es/components/molecules/SelectAccount/type.d.ts

@@ -7,6 +7,8 @@ type GroupAccountProps = {
     listAccountGroup: any[];
     groupNameKey: string;
     groupIdKey: string;
+    groupText?: string;
+    accountText?: string;
 };
 export type SelectAccountWithUsers = {
     users?: Record<any, string>[];
@@ -27,6 +29,7 @@ export type SelectAccountProps = {
     onlyOne?: boolean;
     disabled?: boolean;
     disabledAccount?: any[];
+    limit?: number;
     limitShow?: number;
     className?: string;
     styles?: {
@@ -64,6 +67,9 @@ export type TAction = {
     payload: {
         formRef: React.RefObject<HTMLFormElement>;
     };
+} | {
+    type: 'APPLY_SELECTED';
+    payload: any[];
 } | {
     type: 'UPDATE';
     payload: SelectAccountProps;

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

@@ -58,6 +58,7 @@ export * from './ProcessLoading';
 export * from './Tree';
 export * from './MatchAnySelect';
 export * from './ApplyPopupContent';
+export * from './AccessDenied';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -58,6 +58,7 @@ export * from './ProcessLoading';
 export * from './Tree';
 export * from './MatchAnySelect';
 export * from './ApplyPopupContent';
+export * from './AccessDenied';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

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

@@ -24,8 +24,9 @@ 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 } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, UOGS_PREFIX } from '@antscorp/antsomi-ui/es/constants';
 import { useAppConfigContext } from '../../..';
+// Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
 // const STEP = {
 //   SWITCH_ACCOUNT: 'SWITCH_ACCOUNT',
@@ -228,7 +229,7 @@ export const AccountSharing = props => {
     });
     // const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
     const onClickButtonLogout = () => {
-        removeCookie(`uogs_${networkId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
+        removeCookie(`${UOGS_PREFIX}${networkId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
             domain: `.${origin.split('.').splice(-2).join('.')}`,
         })), { path: '/', sameSite: 'none', secure: true }));
         if (callbackLogout)

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

@@ -17,22 +17,24 @@ import { cloneDeep, isString, merge, omit } from 'lodash';
 import isEqual from 'react-fast-compare';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { Helmet } from 'react-helmet';
+import { useCookies } from 'react-cookie';
 // Styled
 import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
 // Components
 import { LeftMenu } from '../../organism';
 import { Flex } from '../../atoms';
-import { HeaderV2 } from '../../molecules';
+import { HeaderV2, AccessDenied } from '../../molecules';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
-import { APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, } from '../../../constants';
+import { APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, UOGS_PREFIX, } from '../../../constants';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Css
 import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
 // Utils
 import { hasSelectAccountPermission } from './utils';
-import { useDeepCompareMemo, useMutationObserver } from '@antscorp/antsomi-ui/es/hooks';
+import { useCustomRouter, useDeepCompareMemo, useMutationObserver, } from '@antscorp/antsomi-ui/es/hooks';
 import { HOME_MENU_ITEMS } from '../../organism/LeftMenu/constants';
 import { RecommendationWorkspace } from './components';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
@@ -40,6 +42,7 @@ const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, contentWrapperProps, processingNotificationProps, children, onActiveMenuChange, } = props;
     const _a = workspaceProps || {}, { workspaceContentProps } = _a, restOfWorkspaceProps = __rest(_a, ["workspaceContentProps"]);
+    // Hooks
     const appConfig = useContextSelector(AppConfigContext, state => state);
     const { auth, languageCode, appCode, permissionDomain: configPermissionDomain, iamDomain: configIamDomain, env, } = appConfig;
     const { token, userId, portalId } = auth || {};
@@ -47,10 +50,13 @@ export const Layout = memo(props => {
     const header = useLayoutStore(store => store.state.header);
     const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
     const workspace = useLayoutStore(store => store.state.workspace);
+    const [, , removeCookie] = useCookies();
+    const { navigate } = useCustomRouter();
     const [showAccountSelection, setShowAccountSelection] = useState(false);
     const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
     const [activeMenuCode, setActiveMenuCode] = useState('');
     const [activePageTitle, setActivePageTitle] = useState('');
+    const [isAccessDenied, setIsAccessDenied] = useState(false);
     const notificationWrapperRef = useRef(null);
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
@@ -125,7 +131,7 @@ export const Layout = memo(props => {
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList, menuListPermission) => {
         var _a;
         const activeMenuItem = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1];
-        const { menu_item_code, page_title, menu_item_name } = activeMenuItem || {};
+        const { menu_item_code, page_title, menu_item_name, permission_code } = activeMenuItem || {};
         setActivePageTitle(page_title
             ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
             : menu_item_name);
@@ -138,7 +144,20 @@ export const Layout = memo(props => {
             appItem: activeItemPath[0],
         });
         setShowAccountSelection(hasRole);
+        // Check if the user has permission or not (access denied)
+        if (!!permission_code && !!activeMenuItem && !!flattenPermissionList) {
+            const isAccessDenied = !flattenPermissionList.some(item => item.menu_code === activeMenuItem.permission_code);
+            setIsAccessDenied(isAccessDenied);
+        }
     }, [onActiveMenuChange]);
+    const onClickSwitchAccount = useCallback(() => {
+        // Remove cookie when switch account
+        removeCookie(`${UOGS_PREFIX}${portalId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
+            domain: `.${origin.split('.').splice(-2).join('.')}`,
+        })), { path: '/', sameSite: 'none', secure: true }));
+        // Redirect to login page
+        navigate('/login');
+    }, [env, portalId, navigate, removeCookie]);
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(Helmet, null,
             React.createElement("meta", { charSet: "utf-8" }),
@@ -154,6 +173,5 @@ export const Layout = memo(props => {
             React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), activeMenuCode === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code ? (React.createElement("div", { className: "layout-body__content" },
                 React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps),
                 React.createElement(NotificationWrapper, { className: "process-notification", ref: notificationWrapperRef }, showNotification && (React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig)))),
-                React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps),
-                    React.createElement("div", null, children))))))));
+                React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps), isAccessDenied ? (React.createElement(AccessDenied, { onClickSwitchAccount: onClickSwitchAccount })) : (React.createElement("div", null, children)))))))));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));

package/es/constants/theme.js

@@ -102,6 +102,9 @@ THEME.components = {
         colorBgTextHover: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue,
         colorBgTextActive: (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue1_1,
     },
+    Typography: {
+        lineHeight: 1.2,
+    },
     Input: {
         controlHeight: 31,
         colorBgContainerDisabled: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw2,

package/es/constants/variables.d.ts

@@ -50,3 +50,4 @@ export declare const METRIC_TYPE: {
 export declare const ENDPOINT: {
     toolkitV2: string;
 };
+export declare const UOGS_PREFIX = "uogs_";

package/es/constants/variables.js

@@ -53,3 +53,4 @@ const TOOLKIT_API_VERSION = '2.0';
 export const ENDPOINT = {
     toolkitV2: `toolkit/v${TOOLKIT_API_VERSION}`,
 };
+export const UOGS_PREFIX = 'uogs_';

package/es/locales/en/translation.json

@@ -658,5 +658,12 @@
             "_builtIn": "Built in",
             "_standard": "Standard"
         }
+    },
+    "accessDenied": {
+        "title": "Access Denied",
+        "subTitle": "You don’t have permission to access this feature",
+        "description": "Ask for permission or switch to an account with access",
+        "requestAccess": "Request access",
+        "switchAccount": "Switch account"
     }
 }

package/es/locales/i18n.d.ts

@@ -661,6 +661,13 @@ export declare const translationsJson: {
                     _standard: string;
                 };
             };
+            accessDenied: {
+                title: string;
+                subTitle: string;
+                description: string;
+                requestAccess: string;
+                switchAccount: string;
+            };
         };
     };
     vi: {
@@ -875,6 +882,13 @@ export declare const translationsJson: {
                     _standard: string;
                 };
             };
+            accessDenied: {
+                title: string;
+                subTitle: string;
+                description: string;
+                requestAccess: string;
+                switchAccount: string;
+            };
         };
     };
 };

package/es/locales/translations.d.ts

@@ -661,6 +661,13 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
             _standard: string;
         };
     };
+    accessDenied: {
+        title: string;
+        subTitle: string;
+        description: string;
+        requestAccess: string;
+        switchAccount: string;
+    };
 }>, current?: string) => void;
 export declare const t: (id: string, ...rest: any[]) => [string, ...any[]];
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;

package/es/locales/vi/translation.json

@@ -208,5 +208,12 @@
             "_builtIn": "Mẫu",
             "_standard": "Tiêu chuẩn"
         }
+    },
+    "accessDenied": {
+        "title": "Truy cập bị từ chối",
+        "subTitle": "Bạn không có quyền truy cập tính năng này",
+        "description": "Hãy yêu cầu quyền truy cập hoặc chuyển sang tài khoản có quyền",
+        "requestAccess": "Yêu cầu truy cập",
+        "switchAccount": "Đổi tài khoản"
     }
 }

package/package.json

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