@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/InformationPropsTable/index.js

@@ -0,0 +1,76 @@
+// Libraries
+import React from 'react';
+import { Image } from 'antd';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Images
+import buttonTextImage from '../../../../../../../assets/images/components/PreviewModal/Information/buttonText.png';
+import descriptionImage from '../../../../../../../assets/images/components/PreviewModal/Information/description.png';
+import itemNameImage from '../../../../../../../assets/images/components/PreviewModal/Information/itemName.png';
+import deviceRadioImage from '../../../../../../../assets/images/components/PreviewModal/Information/deviceRadio.png';
+import clickButtonImage from '../../../../../../../assets/images/components/PreviewModal/Information/clickButton.png';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const InformationPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'itemName',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Name of template item"),
+                React.createElement(Image, { src: itemNameImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "Template name"),
+        },
+        {
+            key: '2',
+            property: 'categoryListing',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Children of Banner Component"))),
+            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-category-item", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'buttonText',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Text of Information Button"),
+                React.createElement(Image, { src: buttonTextImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " Use template "),
+        },
+        {
+            key: '4',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "description of Preview Modal Information "),
+                React.createElement(Image, { src: descriptionImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '5',
+            property: 'showDeviceRadios',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
+                React.createElement(Image, { src: deviceRadioImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, " true "),
+        },
+        {
+            key: '6',
+            property: 'onButtonClick',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
+                React.createElement(Image, { src: clickButtonImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    //
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/SimilarTemplatePropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SimilarTemplatePropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/SimilarTemplatePropsTable/index.js

@@ -0,0 +1,40 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const SimilarTemplatePropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide similar template"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "true"),
+        },
+        {
+            key: '2',
+            property: 'similarTemplates',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of similar templates"))),
+            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-template-item", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "TTemplateItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
+        },
+        {
+            key: '3',
+            property: 'similarCardProps',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Custom similar card"))),
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "similarCardProps"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TThumbnailTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.js

@@ -0,0 +1,30 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TThumbnailTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'id',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of thumbnail"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string | number"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'url',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Thumbnail url"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThumbnailPropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const ThumbnailPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'thumbnails',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show list thumbnails as a slider"))),
+            type: (React.createElement(LinkTo, { story: "t-thumbnail" },
+                React.createElement(CustomTag, { type: "link" }, "TThumbnail [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'onClickThumbnail',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle click on thumbnail"))),
+            type: (React.createElement(CustomTag, { type: "normal" },
+                `(value: `,
+                React.createElement(LinkTo, { story: "t-thumbnail" },
+                    React.createElement(CustomTag, { type: "link" }, "TThumbnail")),
+                ') => void')),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'ThumbnailCardProps',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Custom thumbnail card"),
+                React.createElement(Typography.Text, null, "Omit id, name, thumbnail, onClickWrapper properties of thumbnail Card Props"))),
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "ThumbnailCardProps"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/index.d.ts

@@ -0,0 +1,6 @@
+export { DataTypeTable } from './DataTypeTable';
+export { BannerPropsTable } from './BannerPropsTable';
+export { InformationPropsTable } from './InformationPropsTable';
+export { SimilarTemplatePropsTable } from './SimilarTemplatePropsTable';
+export { ThumbnailPropsTable } from './ThumbnailPropsTable';
+export { TThumbnailTable } from './TThumbnailTable';

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/index.js

@@ -0,0 +1,6 @@
+export { DataTypeTable } from './DataTypeTable';
+export { BannerPropsTable } from './BannerPropsTable';
+export { InformationPropsTable } from './InformationPropsTable';
+export { SimilarTemplatePropsTable } from './SimilarTemplatePropsTable';
+export { ThumbnailPropsTable } from './ThumbnailPropsTable';
+export { TThumbnailTable } from './TThumbnailTable';

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/dataType.stories.d.ts

@@ -0,0 +1,38 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export namespace DataTypes {
+    function render(): import("react").JSX.Element;
+    let name: string;
+}
+export namespace BannerProps {
+    export function render_1(): import("react").JSX.Element;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace InformationProps {
+    export function render_2(): import("react").JSX.Element;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace SimilarTemplateProps {
+    export function render_3(): import("react").JSX.Element;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace ThumbnailProps {
+    export function render_4(): import("react").JSX.Element;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace TThumbnail {
+    export function render_5(): import("react").JSX.Element;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/dataType.stories.js

@@ -0,0 +1,30 @@
+import LinkTo from '@storybook/addon-links/react';
+import { Button, Tag, Table } from '@antscorp/antsomi-ui/es/index';
+import { DataTypeTable, BannerPropsTable, InformationPropsTable, SimilarTemplatePropsTable, ThumbnailPropsTable, TThumbnailTable, } from './components';
+export default {
+    title: 'Organisms/PreviewTemplateModal/DataType',
+};
+export const DataTypes = {
+    render: () => React.createElement(DataTypeTable, null),
+    name: 'DataTypes',
+};
+export const BannerProps = {
+    render: () => React.createElement(BannerPropsTable, null),
+    name: 'BannerProps',
+};
+export const InformationProps = {
+    render: () => React.createElement(InformationPropsTable, null),
+    name: 'InformationProps',
+};
+export const SimilarTemplateProps = {
+    render: () => React.createElement(SimilarTemplatePropsTable, null),
+    name: 'SimilarTemplateProps',
+};
+export const ThumbnailProps = {
+    render: () => React.createElement(ThumbnailPropsTable, null),
+    name: 'ThumbnailProps',
+};
+export const TThumbnail = {
+    render: () => React.createElement(TThumbnailTable, null),
+    name: 'TThumbnail',
+};

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../molecules/Modal/styled").CustomModalProps, any>;
+export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

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

@@ -5,7 +5,7 @@ export const ModalContainer = styled(Modal) `
     width: fit-content !important;
 
     .antsomi-modal-content {
-      width: 1440px;
+      width: 1400px;
       height: auto;
     }
   }

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -7,24 +7,25 @@ export type TThumbnail = {
     url: string;
 };
 export interface PreviewTemplateModalProps extends ModalProps {
-    bannerProps?: Omit<BannerProps, 'deviceType'>;
+    bannerProps?: BannerProps;
     thumbnailProps?: ThumbnailProps;
     similarTemplateProps?: SimilarTemplateProps;
     informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
 }
-export interface BannerProps {
-    deviceType: InformationProps['deviceType'];
-    showBackgroundSkeleton?: boolean;
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    deviceType?: InformationProps['deviceType'];
+    showSkeleton?: boolean;
+    height?: number;
     children?: React.ReactNode;
 }
-export type ThumbnailProps = Omit<ThumbnailCardProps, keyof TTemplateItem | 'onClickWrapper'> & {
+export type ThumbnailProps = Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail' | 'onClickWrapper'> & {
     thumbnails?: TThumbnail[];
     onClickThumbnail?: (value: TThumbnail) => void;
 };
 export interface SimilarTemplateProps {
     show?: boolean;
-    similarTemplates?: TTemplateItem[];
-    similarCardProps?: Omit<ThumbnailCardProps, keyof TTemplateItem>;
+    similarTemplates?: (TTemplateItem | undefined)[];
+    similarCardProps?: Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail'>;
 }
 export interface InformationProps {
     deviceType: string;
@@ -33,7 +34,6 @@ export interface InformationProps {
     buttonText?: string;
     description?: string;
     showDeviceRadios?: boolean;
-    loading?: boolean;
     onDeviceTypeChange: (value: string) => void;
     onButtonClick?: React.MouseEventHandler<HTMLElement>;
 }

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

@@ -1,5 +1,11 @@
 export { Help } from './Help';
 export { Menu } from './Menu';
+export { Notification, type NotificationProps } from './Notification';
+export { AccountSharing, type AccountSharingProps } from './AccountSharing';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
+export { default as ContentSources } from './ContentSources';
+export { LeftMenu, type LeftMenuProps } from './LeftMenu';
+export * from './ContentSources/provider';
+export * from './DataTable';

package/es/components/organism/index.js

@@ -1,5 +1,11 @@
 export { Help } from './Help';
 export { Menu } from './Menu';
+export { Notification } from './Notification';
+export { AccountSharing } from './AccountSharing';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
+export { default as ContentSources } from './ContentSources';
+export { LeftMenu } from './LeftMenu';
+export * from './ContentSources/provider';
+export * from './DataTable';

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

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+import { LeftMenuProps } from '../../organism';
+import { HeaderV2Props } from '../../molecules';
+import '@antscorp/processing-notification/dist/index.css';
+import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
+interface LayoutProps {
+    headerProps?: Partial<Omit<HeaderV2Props, 'helpConfig'> & {
+        helpConfig: Partial<HeaderV2Props['helpConfig']>;
+    }>;
+    leftMenuProps?: LeftMenuProps;
+    processingNotificationProps?: Partial<ProcessingNotificationProps>;
+    workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {
+        workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
+    };
+    onActiveMenuChange?: (menuActive?: string) => void;
+}
+export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ants-processing-notification': any;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,148 @@
+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;
+};
+// Libraries
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import AntsProcessingNotification from '@antscorp/processing-notification';
+import { isEmpty, merge } from 'lodash';
+// Styled
+import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
+// Components
+import { LeftMenu } from '../../organism';
+import { Flex } from '../../atoms';
+import { HeaderV2 } from '../../molecules';
+// Contexts
+import { AppConfigContext } from '../../..';
+// Constants
+import { APP_ROLE_SCOPE, MENU_PERMISSIONS } 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';
+const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
+export const Layout = memo(props => {
+    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, onActiveMenuChange, } = props;
+    const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
+    const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
+    const appConfig = useContextSelector(AppConfigContext, state => state);
+    const { auth, languageCode, appCode, env } = appConfig;
+    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:
+            case APP_ANTALYSER:
+                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:
+            case APP_ANTALYSER:
+                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', useURLParam: true }, 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, iamDomain, permissionDomain, showAccountSelection]);
+    const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
+    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) => {
+        var _a;
+        onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange((_a = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1]) === null || _a === void 0 ? void 0 : _a.menu_item_code);
+        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: menuPermission.menu_code || '',
+                        menuPermission,
+                        scope: APP_ROLE_SCOPE.EVERYTHING,
+                    })
+                    : 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);
+    }, [onActiveMenuChange]);
+    return (React.createElement(LayoutWrapper, null,
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),
+        React.createElement(Flex, { className: "layout-body" },
+            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}`, appConfig: appConfig }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange })),
+            React.createElement(ContentWrapper, null,
+                React.createElement("div", Object.assign({}, restOfWorkspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
+                    React.createElement(NotificationWrapper, null,
+                        React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
+                    React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps),
+                        React.createElement("div", null, children)))))));
+});

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

@@ -0,0 +1,2 @@
+export * from './menuCode';
+export * from './permission';

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

@@ -0,0 +1,2 @@
+export * from './menuCode';
+export * from './permission';

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

@@ -0,0 +1,29 @@
+export declare const MENU_CODE: {
+    VISITOR: string;
+    PLANNINGS: string;
+    CUSTOMER: string;
+    SEGMENT: string;
+    EVENT_SOURCES: string;
+    ANALYTICS_MODELS: string;
+    JOURNEY: string;
+    DESTINATIONS_HUB: string;
+    ACCOUNT: string;
+    DATA_ENCRYPT: string;
+    PORTAL_PREFERENCES: string;
+    BUSINESS_OBJECT: string;
+    PROMOTION_CENTER: string;
+    LABELS: string;
+    DASHBOARD_OVERVIEW: string;
+    MEDIA_TEMPLATE: string;
+    JSON_TEMPLATE: string;
+    EMAIL_TEMPLATE: string;
+    DIAGRAM: string;
+    RFM: string;
+    LINK_MANAGEMENT: string;
+    CONVERSION: string;
+    OVERVIEW: string;
+    DASHBOARD: string;
+    DATA_VIEW: string;
+    DATA_OBJECT: string;
+    JOURNEY_TACTIC: string;
+};

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

@@ -0,0 +1,30 @@
+export const MENU_CODE = {
+    VISITOR: `VISITOR`,
+    PLANNINGS: 'PLANNINGS',
+    CUSTOMER: `CUSTOMER`,
+    SEGMENT: `SEGMENT`,
+    EVENT_SOURCES: `EVENT_SOURCES`,
+    ANALYTICS_MODELS: `ANALYTICS_MODELS`,
+    JOURNEY: `JOURNEY`,
+    DESTINATIONS_HUB: `DESTINATIONS_HUB`,
+    ACCOUNT: `ACCOUNT`,
+    DATA_ENCRYPT: `DATA_ENCRYPT`,
+    PORTAL_PREFERENCES: 'PORTAL_PREFERENCES',
+    // PORTAL_PREFERENCES: 'ACCOUNT',
+    BUSINESS_OBJECT: 'BUSINESS_OBJECT',
+    PROMOTION_CENTER: 'PROMOTION_CENTER',
+    LABELS: 'LABELS',
+    DASHBOARD_OVERVIEW: 'DASHBOARD_OVERVIEW',
+    MEDIA_TEMPLATE: 'MEDIA_TEMPLATE',
+    JSON_TEMPLATE: 'JSON_TEMPLATE',
+    EMAIL_TEMPLATE: 'EMAIL_TEMPLATE',
+    DIAGRAM: 'DATA_SCHEMA',
+    RFM: 'RFM',
+    LINK_MANAGEMENT: 'LINK_MANAGEMENT',
+    CONVERSION: 'CONVERSION',
+    OVERVIEW: 'JOURNEY_OVERVIEW',
+    DASHBOARD: 'DASHBOARD',
+    DATA_VIEW: 'DATA_VIEW',
+    DATA_OBJECT: 'DATA_OBJECT',
+    JOURNEY_TACTIC: 'JOURNEY_TACTIC',
+};

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

@@ -0,0 +1,22 @@
+export declare const APP_ROLE_SCOPE: {
+    NONE: number;
+    CREATED_BY_USER: number;
+    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: {
+    BATCH_STREAM: string;
+    REALTIME_STREAM: string;
+    DF_DATA_SOURCE: string;
+    DESTINATION: string;
+    REPORT: string;
+};