@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

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

@@ -12,19 +12,20 @@ export interface PreviewTemplateModalProps extends ModalProps {
     similarTemplateProps?: SimilarTemplateProps;
     informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
 }
-export interface BannerProps {
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     deviceType: InformationProps['deviceType'];
-    showBackgroundSkeleton?: boolean;
+    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,9 @@
 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';

package/es/components/organism/index.js

@@ -1,5 +1,9 @@
 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';

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

@@ -0,0 +1,22 @@
+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<HeaderV2Props>;
+    leftMenuProps?: LeftMenuProps;
+    processingNotificationProps?: Partial<ProcessingNotificationProps>;
+    workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {
+        workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
+    };
+}
+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,77 @@
+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 { 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 { PERMISSION_API, SOCKET_API } from '../../../constants';
+// Css
+import '@antscorp/processing-notification/dist/index.css';
+import { useLayoutStore } from './stores';
+import { checkingRoleScope } from './utils';
+export const Layout = memo(props => {
+    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, } = props;
+    const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
+    const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
+    // Selectors
+    const { auth, languageCode } = useContextSelector(AppConfigContext, state => state);
+    const { token, userId, portalId } = auth || {};
+    const headerStore = useLayoutStore(store => store.state.header);
+    const [showAccountSelection, setShowAccountSelection] = useState(false);
+    // Memo
+    const initialHeaderProps = useMemo(() => {
+        var _a, _b;
+        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: {
+                configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
+                        p_timezone: 'Asia/Singapore',
+                        api_pid: 33167,
+                        p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
+                        embeddedData: {},
+                        INSIGHT_U_OGS: 'uogs',
+                    } }),
+            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: ((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
+    }, [headerProps, showAccountSelection]);
+    const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
+    const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain: PERMISSION_API, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [languageCode, portalId, token, userId, processingNotificationProps]);
+    // const showAccountSelection = useMemo(() => HIDE_MODAL_ACCOUNT.includes(menuCodeActive), []);
+    // const showAccountSelection =
+    //   !state.hasRoleBreadcrumb ||
+    //   HIDE_MODAL_ACCOUNT.includes(menuCodeActive) ||
+    //   isHiddenAccountJourney;
+    const onActiveMenuCodeChange = useCallback((activeMenuCode, flattenPermissionList) => {
+        const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => activeMenuCode === item.app_code || activeMenuCode === item.menu_code);
+        const roleScope = activeMenuCode && menuPermission
+            ? checkingRoleScope({ menuCode: activeMenuCode, menuPermission })
+            : false;
+        setShowAccountSelection(roleScope);
+    }, []);
+    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}` }, 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,6 @@
+export declare const APP_ROLE_SCOPE: {
+    NONE: number;
+    CREATED_BY_USER: number;
+    MANAGEMENT_BY_USER: number;
+    EVERYTHING: number;
+};

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

@@ -0,0 +1,6 @@
+export const APP_ROLE_SCOPE = {
+    NONE: 1,
+    CREATED_BY_USER: 2,
+    MANAGEMENT_BY_USER: 3,
+    EVERYTHING: 4,
+};

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

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './stores';

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

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './stores';

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

@@ -0,0 +1,23 @@
+import { HeaderV2Props } from '../../../molecules';
+import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
+export interface HeaderStore extends Partial<HeaderV2Props> {
+}
+export interface LeftMenuStore {
+    menuCodeActive?: string;
+}
+export interface WorkspaceStore {
+}
+export interface LayoutStoreState {
+    header: HeaderStore;
+    leftMenu: LeftMenuStore;
+    workspace: WorkspaceStore;
+}
+interface LayoutStore {
+    state: LayoutStoreState;
+    setHeaderState: (state: DeepPartial<HeaderStore>) => void;
+    setLeftMenuState: (state: DeepPartial<LeftMenuStore>) => void;
+    setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
+    setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+}
+export declare const useLayoutStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LayoutStore>>;
+export {};

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

@@ -0,0 +1,21 @@
+// Libraries
+import { create } from 'zustand';
+import { merge } from 'lodash';
+const initialState = {
+    header: {},
+    leftMenu: {},
+    workspace: {},
+};
+export const useLayoutStore = create(set => ({
+    state: initialState,
+    setLayoutState: newState => set(store => ({ state: merge(store.state, newState) })),
+    setHeaderState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
+    })),
+    setLeftMenuState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { leftMenu: Object.assign(Object.assign({}, store.state.leftMenu), newState) }),
+    })),
+    setWorkspaceState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
+    })),
+}));

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LayoutWrapper: 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>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,79 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../atoms';
+// Constants
+import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const LayoutWrapper = styled(Flex) `
+  width: 100%;
+  background-color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_3};
+  position: relative;
+
+  .layout-header {
+    width: calc(100% - 71px);
+    position: absolute;
+    left: 71px;
+    z-index: 20;
+  }
+
+  .layout-body {
+    position: relative;
+    width: 100%;
+    z-index: 10;
+
+    &__menu {
+      flex-shrink: 0;
+    }
+
+    &__content {
+      position: relative;
+      flex: 1 1 0%;
+      border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+      background-color: white;
+      height: 100%;
+      padding: 15px;
+      padding-top: 0px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow: auto;
+      z-index: 1;
+    }
+  }
+`;
+export const ContentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  padding: ${HEADER_HEIGHT}px 15px 15px 0;
+  box-sizing: border-box;
+`;
+export const NotificationWrapper = styled.div `
+  flex-shrink: 0;
+  top: 0px;
+  position: sticky;
+  /* height: 50px; */
+  width: 100%;
+  /* margin-bottom: 6px; */
+  padding-top: 15px;
+  background-color: white;
+  z-index: 999;
+
+  > div {
+    margin-bottom: 6px;
+  }
+`;
+export const ChildrenWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+  /* height: calc(100% - 50px); */
+`;

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export declare const checkingRoleScope: (args: {
+    menuCode: string;
+    menuPermission: FeatureMenuPermission;
+    action?: string;
+    scope?: string;
+    isExactly?: boolean;
+}) => boolean;

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

@@ -0,0 +1,48 @@
+import { MENU_CODE, APP_ROLE_SCOPE } from '../constants';
+const EDIT_ROLE = new Set(['CREATE', 'UPDATE', 'DELETE']);
+/**
+ *
+ * @param {*} menuCode MENU_CODE
+ * @param {*} action APP_ACTION
+ * @param {*} scope APP_ROLE_SCOPE
+ * @param {*} isExactly
+ * @returns
+ */
+export const checkingRoleScope = (args) => {
+    const { menuCode, menuPermission, scope = APP_ROLE_SCOPE.NONE, action = 'NONE', isExactly = false, } = args;
+    if (![
+        MENU_CODE.JOURNEY,
+        MENU_CODE.LABELS,
+        MENU_CODE.DASHBOARD_OVERVIEW,
+        MENU_CODE.MEDIA_TEMPLATE,
+        MENU_CODE.EMAIL_TEMPLATE,
+        MENU_CODE.SEGMENT,
+        MENU_CODE.DESTINATIONS_HUB,
+        MENU_CODE.BUSINESS_OBJECT,
+        MENU_CODE.DATA_OBJECT,
+        MENU_CODE.DATA_VIEW,
+    ].includes(menuCode))
+        return false;
+    const menuRole = menuPermission;
+    let isOK = false;
+    // role Create/Update/Delete is similar current define, only has view and edit(create/delete)
+    const { selected_view = 1, selected_edit = 1 } = menuRole;
+    if (isExactly) {
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) === Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) === Number(scope);
+        }
+    }
+    else {
+        // eslint-disable-next-line no-lonely-if
+        if (EDIT_ROLE.has(action)) {
+            isOK = Number(selected_edit) >= Number(scope);
+        }
+        else {
+            isOK = Number(selected_view) >= Number(scope);
+        }
+    }
+    return isOK;
+};

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;
+export declare const TemplateListing: (props: import("@antscorp/antsomi-ui/es/components").TemplateListingProps<{}>) => JSX.Element;