@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,90 @@
+export const CUSTOM_MENU_ITEMS = [
+    {
+        key: 'survey',
+        label: 'Survey',
+        icon: 'icon-ants-survey-v2',
+        children: [
+            {
+                key: 'ANALYSIS',
+                label: 'Analysis',
+                icon: null,
+                children: [
+                    {
+                        key: 'SQL_WORKSPACE',
+                        label: 'SQL Workspace',
+                        icon: null,
+                    },
+                    {
+                        key: 'EXPLORE',
+                        label: 'Explore',
+                        icon: null,
+                    },
+                    {
+                        key: 'SCHEDULE_QUERY',
+                        label: 'Schedule Query',
+                        icon: null,
+                    },
+                ],
+            },
+            {
+                label: 'Reports',
+                icon: null,
+                key: 'REPORT',
+            },
+            {
+                key: 'DATA_SOURCE',
+                label: 'Data Sources',
+                icon: null,
+            },
+            {
+                key: 'GALLERY',
+                label: 'Gallery',
+                icon: null,
+            },
+        ],
+    },
+    {
+        key: 'data',
+        label: 'Data',
+        icon: 'icon-ants-survey-data',
+        children: [
+            {
+                key: 'COUPON',
+                label: 'Coupons',
+                icon: 'icon-ants-coupons',
+            },
+            {
+                label: 'Short Links',
+                icon: 'icon-ants-short-link',
+                key: 'SHORT_LINK',
+            },
+        ],
+    },
+    {
+        key: 'report',
+        label: 'Report',
+        icon: 'icon-ants-overview',
+        children: [
+            {
+                label: 'Overview',
+                icon: 'icon-ants-overview',
+                key: 'JOURNEY_OVERVIEW',
+            },
+            {
+                key: 'ALL_CHANNEL',
+                label: 'All Channels',
+                icon: 'icon-ants-window',
+            },
+            {
+                key: 'CAMPAIGN',
+                label: 'Campaigns',
+                icon: 'icon-ants-campaign',
+            },
+            {
+                key: 'ORCHESTRATION',
+                label: 'Orchestration',
+                icon: 'icon-ants-orchestration',
+            },
+        ],
+    },
+];

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

@@ -0,0 +1,42 @@
+import { TMenuFeatureItem } from '../types';
+export declare const APP_KEYS: {
+    HOME: string;
+    MARKETING: string;
+    CONTENT: string;
+    TEMPLATES: string;
+    PROFILES: string;
+    DATA: string;
+    INSIGHTS: string;
+    SETTINGS: string;
+};
+export declare const MENU_ITEM_TYPE: {
+    APP: number;
+    MENU: number;
+    GROUP_MENU: number;
+};
+export declare const ICON_SIZE = 20;
+export declare const HOME_ROUTE = "/gen2/:networkId/dashboard";
+export declare const HOME_REPORT_ROUTES: {
+    DETAIL: string;
+    CONFIGURE: string;
+    CREATE: string;
+};
+export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;
+export declare const MARKETING_ROUTES: {
+    CHANNEL: string;
+};
+export declare const MARKETING_CHANNEL_KEY: {
+    readonly ALL_CHANNEL: 0;
+    readonly JOURNEY_ORCHESTRATION: 8;
+};
+export declare const RENDER_OPTION: {
+    readonly CHANNEL: "destination_channel";
+    readonly CHANNEL_GEN2: "destination_channel_gen2";
+};
+/** SETTING APP */
+export declare const SETTING_APP: {
+    CHANNEL_INTEGRATION: {
+        code: string;
+        path: string;
+    };
+};

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

@@ -0,0 +1,54 @@
+export const APP_KEYS = {
+    HOME: 'HOME',
+    MARKETING: 'MARKETING',
+    CONTENT: 'PROMOTION_CENTER',
+    TEMPLATES: 'TEMPLATE',
+    PROFILES: 'PROFILE',
+    DATA: 'DATA',
+    INSIGHTS: 'INSIGHT',
+    SETTINGS: 'SETTING',
+};
+export const MENU_ITEM_TYPE = {
+    APP: 1,
+    MENU: 2,
+    GROUP_MENU: 3,
+};
+export const ICON_SIZE = 20;
+/* HOME APP */
+export const HOME_ROUTE = '/gen2/:networkId/dashboard';
+export const HOME_REPORT_ROUTES = {
+    DETAIL: `${HOME_ROUTE}/detail/:dashboardId`,
+    CONFIGURE: `configure`,
+    CREATE: `create`,
+};
+export const HOME_MENU_ITEMS = {
+    RECOMMENDATION: {
+        menu_item_name: 'Recommendation',
+        menu_item_code: 'recommendation',
+        icon_name: 'icon-ants-tips',
+        menu_item_path: `${HOME_ROUTE}/recommendation`,
+        page_title: '_recommendation',
+    },
+    DASHBOARD: {
+        menu_item_name: 'Dashboard',
+        menu_item_code: 'ownedDashboard',
+        icon_name: 'icon-ants-dashboard',
+        page_title: '_dashboard',
+    },
+};
+/* MARKETING APP */
+export const MARKETING_ROUTES = {
+    CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId',
+};
+export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, JOURNEY_ORCHESTRATION: 8 };
+export const RENDER_OPTION = {
+    CHANNEL: 'destination_channel',
+    CHANNEL_GEN2: 'destination_channel_gen2',
+};
+/** SETTING APP */
+export const SETTING_APP = {
+    CHANNEL_INTEGRATION: {
+        code: 'CHANNEL_INTEGRATION',
+        path: '/gen2/:networkId/:user_id/marketing-hub/destinations/:channelId',
+    },
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StoreApi } from 'zustand';
+import { LeftMenuState } from '../stores';
+export declare const LeftMenuContext: import("react").Context<StoreApi<LeftMenuState> | null>;
+export declare const useLeftMenuContext: <T>(selector: (leftMenuStore: LeftMenuState) => T) => T;

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

@@ -0,0 +1,15 @@
+// Libraries
+import { createContext, useContext } from 'react';
+import { useStore } from 'zustand';
+// Types
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import isEqual from 'react-fast-compare';
+export const LeftMenuContext = createContext(null);
+export const useLeftMenuContext = (selector) => {
+    const store = useContext(LeftMenuContext);
+    if (!store)
+        throw new Error('Missing LeftMenuContext.Provider in the tree');
+    const selectedState = useStore(store, selector);
+    const memoizedState = useDeepCompareMemo(() => selectedState, [selectedState]);
+    return useDeepCompareMemo(() => (isEqual(selectedState, memoizedState) ? memoizedState : selectedState), [selectedState, memoizedState]);
+};

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

@@ -0,0 +1,3 @@
+export { useLeftMenu } from './useLeftMenu';
+export { useNavigatePath } from './useNavigatePath';
+export { usePermission } from './usePermission';

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

@@ -0,0 +1,3 @@
+export { useLeftMenu } from './useLeftMenu';
+export { useNavigatePath } from './useNavigatePath';
+export { usePermission } from './usePermission';

package/es/components/organism/LeftMenu/hooks/useLeftMenu.d.ts

@@ -0,0 +1,18 @@
+import { LeftMenuProps } from '..';
+interface TState {
+    hoverItem: string;
+    isExpandMenu: boolean;
+    isShowPopover: boolean;
+}
+export declare const useLeftMenu: (props: LeftMenuProps) => {
+    state: TState;
+    activeAppCode: string;
+    permissionMenu: import("../../../../models/LeftMenu").TFeatureMenu[];
+    customActiveAppKey: string;
+    onToggleChildMenu: () => void;
+    onMouseEnter: (key: string) => void;
+    onMouseLeave: () => void;
+    onHoverMenuBar: () => void;
+    onShowPopover: (hoverItem?: string) => void;
+};
+export {};

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

@@ -0,0 +1,256 @@
+// Libraries
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isArray, isNil } from 'lodash';
+import { Cookies as ReactCookies } from 'react-cookie';
+// Utils
+import { findActiveAppCodeByChild, findActiveAppCodeByUrl, recursiveGetMenuItemByPermission, } from '../utils';
+// Store
+import { useLeftMenuContext } from '../contexts';
+// Constants
+import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
+// Hooks
+import { usePermission } from './usePermission';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+export const useLeftMenu = (props) => {
+    // Props
+    const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
+    const { expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
+    const mappedActiveKey = useMemo(() => {
+        if (!isRecommendation)
+            return activeKey;
+        switch (activeKey) {
+            case 'BUSINESS_OBJECT':
+            case 'BUSINESS_OBJECT-APP_API_HUB':
+                return 'DATA_OBJECT';
+            case 'BUSINESS_OBJECT-PERMISSION_ACCOUNT':
+                return 'BUSINESS_OBJECT';
+            case 'ANALYSIS':
+                return 'SQL_WORKSPACE';
+            case 'DATASOURCES-APP_ANTALYSER':
+                return 'DATASOURCES-SQL_WORKSPACE';
+            default:
+                return activeKey;
+        }
+    }, [activeKey, isRecommendation]);
+    const cookies = new ReactCookies();
+    const { pathname, hash, origin } = window.location;
+    const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
+    const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
+    const setLeftMenuContextState = useLeftMenuContext(store => store.setState);
+    const { auth, env } = appConfig || {};
+    const timeoutPopover = useRef(null);
+    const openLeftMenuCookies = cookies.get('_leftmenu_state');
+    const isOpenMenu = !isNil(openLeftMenuCookies) ? Boolean(openLeftMenuCookies) : true;
+    const [state, setState] = useState({
+        hoverItem: '',
+        isShowPopover: false,
+        isExpandMenu: expandMenu || isOpenMenu,
+    });
+    const { mappingChildrenMenu, flattenMenuPermission, menuListPermission, permissionMenu, activeItemPath, } = usePermission();
+    const onMenuClick = useCallback((key, keyPath) => {
+        if (isRecommendation) {
+            setLeftMenuContextState({ customActiveCurrentKey: key });
+        }
+        onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
+    }, [customActiveAppKey, isRecommendation, onMenuItemClick, setLeftMenuContextState]);
+    useDeepCompareEffect(() => {
+        if (!expandMenu) {
+            cookies.set('_leftmenu_state', state.isExpandMenu ? 1 : 0, {
+                domain: `.${origin.split('.').splice(-2).join('.')}`,
+                path: '/',
+                sameSite: 'none',
+                secure: true,
+            });
+        }
+    }, [openLeftMenuCookies, origin, state.isExpandMenu]);
+    useDeepCompareEffect(() => {
+        setLeftMenuContextState({
+            appConfig,
+            isCustomized,
+            isRecommendation,
+            dashboardParams: { objectId, isGrouped, objectType },
+            onMenuClick,
+        });
+    }, [
+        appConfig,
+        isCustomized,
+        isGrouped,
+        isRecommendation,
+        objectId,
+        objectType,
+        onMenuClick,
+        setLeftMenuContextState,
+    ]);
+    // Active Custom App Key when active key is changed
+    useDeepCompareEffect(() => {
+        switch (true) {
+            case isCustomized:
+                setLeftMenuContextState({
+                    customActiveAppKey: findActiveAppCodeByChild({
+                        activeCurrentKey: activeKey || '',
+                        menuItems: items || [],
+                    }) || '',
+                    customActiveCurrentKey: activeKey,
+                });
+                break;
+            case isRecommendation: {
+                setLeftMenuContextState({
+                    customActiveAppKey: findActiveAppCodeByChild({
+                        activeCurrentKey: mappedActiveKey || '',
+                        menuItems: mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.map(item => recursiveGetMenuItemByPermission(item)),
+                        isRecommendation: true,
+                    }) || '',
+                    customActiveCurrentKey: mappedActiveKey,
+                });
+                break;
+            }
+            default:
+                break;
+        }
+    }, [
+        activeKey,
+        appConfig,
+        isCustomized,
+        isRecommendation,
+        items,
+        mappedActiveKey,
+        mappingChildrenMenu,
+        setLeftMenuContextState,
+    ]);
+    // Change list menu children when hovering or activating items, giving priority to hovering items
+    useDeepCompareEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
+        switch (true) {
+            case isCustomized: {
+                setLeftMenuContextState({
+                    customItems: items,
+                    customMenuChildren: ((_a = items === null || items === void 0 ? void 0 : items.find(item => item.key === appActiveKey)) === null || _a === void 0 ? void 0 : _a.children) || [],
+                    customHoverMenuChildren: state.hoverItem
+                        ? ((_b = items === null || items === void 0 ? void 0 : items.find(item => item.key === state.hoverItem)) === null || _b === void 0 ? void 0 : _b.children) || []
+                        : [],
+                });
+                break;
+            }
+            case isRecommendation: {
+                setLeftMenuContextState({
+                    menuItems: mappingChildrenMenu,
+                    appMenuChildren: ((_c = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _c === void 0 ? void 0 : _c.children) ||
+                        [],
+                    appHoverMenuChildren: state.hoverItem
+                        ? ((_d = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === state.hoverItem)) === null || _d === void 0 ? void 0 : _d.children) || []
+                        : [],
+                });
+                break;
+            }
+            default: {
+                if (isArray(mappingChildrenMenu)) {
+                    setLeftMenuContextState({
+                        menuItems: mappingChildrenMenu,
+                        appMenuChildren: ((_e = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appActiveKey)) === null || _e === void 0 ? void 0 : _e.children) ||
+                            [],
+                        appHoverMenuChildren: state.hoverItem
+                            ? ((_f = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === state.hoverItem)) === null || _f === void 0 ? void 0 : _f.children) || []
+                            : [],
+                    });
+                }
+                break;
+            }
+        }
+    }, [
+        activeAppCode,
+        customActiveAppKey,
+        isCustomized,
+        items,
+        mappingChildrenMenu,
+        state.hoverItem,
+        isRecommendation,
+        setLeftMenuContextState,
+    ]);
+    useDeepCompareEffect(() => {
+        switch (true) {
+            case isCustomized:
+                break;
+            default: {
+                const url = `${pathname}${hash}`;
+                // Active App Item having code matching url
+                const matchAppCode = findActiveAppCodeByUrl({
+                    url,
+                    menuItems: mappingChildrenMenu,
+                    auth,
+                    env,
+                });
+                if (matchAppCode && matchAppCode !== activeAppCode) {
+                    setLeftMenuContextState({ activeAppCode: matchAppCode });
+                }
+                break;
+            }
+        }
+    }, [
+        activeAppCode,
+        auth,
+        hash,
+        isCustomized,
+        isRecommendation,
+        mappingChildrenMenu,
+        pathname,
+        env,
+        setLeftMenuContextState,
+    ]);
+    useEffect(() => {
+        if (!isCustomized && !isRecommendation) {
+            // Callback function using at Layout when url change
+            onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission, menuListPermission);
+        }
+    }, [
+        activeItemPath,
+        flattenMenuPermission,
+        isCustomized,
+        isRecommendation,
+        menuListPermission,
+        onActiveMenuCodeChange,
+    ]);
+    useEffect(() => clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current), [timeoutPopover]);
+    const onShowPopover = useCallback((hoverItem) => {
+        if (timeoutPopover)
+            clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current);
+        if (!state.isShowPopover)
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: true })));
+        if (hoverItem)
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem })));
+    }, [state.isShowPopover]);
+    const onToggleChildMenu = useCallback(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
+    }, []);
+    const onMouseEnter = useCallback((key) => {
+        if (state.hoverItem !== key) {
+            onShowPopover(key);
+            // if (!state.isExpandMenu || !isExpandable) {
+            //   setState(prev => ({ ...prev, hoverItem: key }));
+            // }
+        }
+    }, [state.hoverItem, onShowPopover]);
+    const onMouseLeave = useCallback(() => {
+        timeoutPopover.current = setTimeout(() => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: false })));
+        }, 200);
+        // if (!state.isExpandMenu || !isExpandable) {
+        //   setState(prev => ({ ...prev, hoverItem: '' }));
+        // }
+    }, []);
+    const onHoverMenuBar = useCallback(() => {
+        onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
+    }, [activeAppCode, customActiveAppKey, isCustomized, onMouseEnter]);
+    return {
+        state,
+        activeAppCode,
+        permissionMenu,
+        customActiveAppKey,
+        onToggleChildMenu,
+        onMouseEnter,
+        onMouseLeave,
+        onHoverMenuBar,
+        onShowPopover,
+    };
+};

package/es/components/organism/LeftMenu/hooks/useNavigatePath.d.ts

@@ -0,0 +1,5 @@
+export declare const useNavigatePath: () => {
+    isPushDifferentDomain: (domain: string | null, path: string | null) => boolean;
+    getPath: (path: string | null, itemKey?: string) => string;
+    navigatePath: (domain: string | null, path: string | null) => void;
+};

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

@@ -0,0 +1,54 @@
+// Libraries
+import { useCallback, useMemo } from 'react';
+import { isNil } from 'lodash';
+import { useLocation } from 'react-router-dom';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Contexts
+import { useLeftMenuContext } from '../contexts';
+// Utils
+import { getGeneratePath } from '../utils';
+import { hasSelectAccountPermission } from '../../../template/Layout/utils';
+// Constants
+import { ENV } from '@antscorp/antsomi-ui/es/config';
+import { KEEP_HASH_PATH_DEV } from '../../../template/Layout/constants';
+// Hooks
+import { usePermission } from './usePermission';
+export const useNavigatePath = () => {
+    const appConfig = useLeftMenuContext(store => store.appConfig);
+    const { auth, env } = appConfig || {};
+    const { search } = useLocation();
+    const isDev = env === ENV.DEV;
+    const { activeItemPath, flattenMenuPermission } = usePermission();
+    const hasRole = useDeepCompareMemo(() => hasSelectAccountPermission({ activeItemPath, flattenPermissionList: flattenMenuPermission }), [activeItemPath, flattenMenuPermission]);
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const oidParam = hasRole ? urlParams.get('oid') : null;
+    const searchParams = oidParam ? `?oid=${oidParam}` : '';
+    const isPushDifferentDomain = useCallback((domain, path) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (isDev)
+            return false;
+        const customDomain = domain !== null && domain !== void 0 ? domain : '';
+        const splitNextPath = (path === null || path === void 0 ? void 0 : path.split('#')) || ['', ''];
+        const isCurrentPathIncludeHash = (_b = (_a = window.location) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.includes('#');
+        const isNextPathIncludeHash = path === null || path === void 0 ? void 0 : path.includes('#');
+        if (isCurrentPathIncludeHash && isNextPathIncludeHash) {
+            const currentRoute = ((_e = (_d = (_c = window.location.href) === null || _c === void 0 ? void 0 : _c.split) === null || _d === void 0 ? void 0 : _d['#']) === null || _e === void 0 ? void 0 : _e[0]) || '';
+            const nextRoute = `${customDomain}${splitNextPath[0]}`;
+            return currentRoute !== nextRoute;
+        }
+        return !!customDomain && customDomain !== ((_f = window.location) === null || _f === void 0 ? void 0 : _f.origin);
+    }, [isDev]);
+    const getPath = useCallback((path, itemKey) => {
+        var _a;
+        if ((path === null || path === void 0 ? void 0 : path.includes('#')) && !KEEP_HASH_PATH_DEV.includes(`${itemKey}`)) {
+            const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+            return getGeneratePath(customPath, auth);
+        }
+        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}${searchParams}`, auth);
+    }, [auth, searchParams]);
+    const navigatePath = useCallback((domain, path) => {
+        const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;
+        window.location.assign(getGeneratePath(`${newDomain}${path}${searchParams}`, auth));
+    }, [auth, env, searchParams]);
+    return { isPushDifferentDomain, getPath, navigatePath };
+};

package/es/components/organism/LeftMenu/hooks/usePermission.d.ts

@@ -0,0 +1,7 @@
+export declare const usePermission: () => {
+    mappingChildrenMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    activeItemPath: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    menuListPermission: import("@antscorp/antsomi-ui/es/models/LeftMenu").FeatureMenuPermission[] | undefined;
+    flattenMenuPermission: import("@antscorp/antsomi-ui/es/models/LeftMenu").FeatureMenuPermission[];
+};