@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

package/es/components/organism/ActivityTimeline/utils.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { DATA_EVENT, mapTranslateCode } from './constants';
 import { get } from 'lodash';
-import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+import { translate, translations } from '@antscorp/antsomi-locales';
 import { safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { formatDate, formatUTCDateTZ } from '@antscorp/antsomi-ui/es/utils/date';
 import { getPortalFormatDateTimeLong, getPortalTimeZone, } from '@antscorp/antsomi-ui/es/utils/portal';
@@ -163,9 +163,9 @@ const handlePageEvent = (itemEvent, data) => {
     if (itemEvent.pageType === 'view') {
         const validateExtra = itemEvent.extra || {};
         const locationUrl = safeParse(validateExtra.location_url, '');
-        const pageTitle = safeParse(validateExtra.page_title, '');
+        const pageType = safeParse(validateExtra.page_type, '');
         // Use page_title if available, otherwise fallback to location_url
-        const pageTypeText = pageTitle.length > 0 ? pageTitle : locationUrl;
+        const pageTypeText = pageType.length > 0 ? pageType : locationUrl;
         // Build clickable link to location_url
         if (locationUrl.length > 0 && pageTypeText.length > 0) {
             data.page_type = `<a class="title-have-url" href="${encodeURI(locationUrl)}" target="_blank">${pageTypeText}</a>`;
@@ -222,22 +222,191 @@ const handleStoreEvent = (itemEvent, data) => {
     }
 };
 const handleScreenviewEvent = (itemEvent, validateExtra, data) => {
-    if (itemEvent.pageType === 'view' && validateExtra.screen_type) {
-        data.screen_type = validateExtra.screen_type;
-        // Add event_source_name from insightPropertyName
+    if (itemEvent.pageType === 'view') {
         data.event_source_name = safeParse(itemEvent.insightPropertyName, 'N/A');
+        if (validateExtra.screen_type) {
+            data.screen_type = validateExtra.screen_type;
+        }
+    }
+};
+const handleLeadFormEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    if (validateExtra.form_name && validateExtra.lead_source) {
+        valuesReplace.form_name = validateExtra.form_name;
+        valuesReplace.lead_source = validateExtra.lead_source;
+        infoEvent.translateCode = translations._EVENT_DES_LEAD_3_INFO;
+    }
+    else if (validateExtra.lead_source) {
+        valuesReplace.lead_source = validateExtra.lead_source;
+        infoEvent.translateCode = translations._EVENT_DES_LEAD_2_INFO;
+    }
+    else {
+        infoEvent.translateCode = translations._EVENT_DES_LEAD_0_INFO;
+    }
+};
+const handleQrScanEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.qr_code_id = validateExtra.qr_code?.id || 'N/A';
+    valuesReplace.status = validateExtra.status || 'N/A';
+    if (validateExtra.message_content) {
+        valuesReplace.message_content = validateExtra.message_content;
+        infoEvent.translateCode = translations._EVENT_DES_SCAN_FULL;
+    }
+    else {
+        infoEvent.translateCode = translations._EVENT_DES_SCAN_NO_ERR;
+    }
+};
+const handleClickBannerEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.position = validateExtra.position || 'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_CLICK_BANNER;
+};
+const handleClickButtonEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.button_label = validateExtra.button_label || 'N/A';
+    valuesReplace.page_cate = validateExtra.page_cate || 'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_CLICK_BUTTON;
+};
+const handleViewSchemeEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.scheme_code =
+        validateExtra.scheme_marketing?.scheme_code ||
+            validateExtra.scheme_code ||
+            validateExtra.scheme_marketing?.id ||
+            'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_VIEW_SCHEME_DETAILS;
+};
+const handleRedeemPointEvent = (validateExtra, valuesReplace, infoEvent, isSuccess) => {
+    delete valuesReplace.event_name;
+    valuesReplace.scheme_code =
+        validateExtra.scheme_marketing?.scheme_code ||
+            validateExtra.scheme_code ||
+            validateExtra.scheme_marketing?.id ||
+            'N/A';
+    if (isSuccess) {
+        infoEvent.translateCode = translations._EVENT_DES_REDEEM_SUCCESS;
+    }
+    else {
+        valuesReplace.reason_fail = validateExtra.reason_fail || 'N/A';
+        infoEvent.translateCode = translations._EVENT_DES_REDEEM_FAIL;
+    }
+};
+const handleUpdateRoleEvent = (validateExtra, valuesReplace, infoEvent, isVisitorProfile) => {
+    delete valuesReplace.event_name;
+    valuesReplace.visitor_name = isVisitorProfile
+        ? translate(translations._THIS_PERSON_UPPERCASE, 'This user')
+        : validateExtra.users?.name || valuesReplace.customer_name;
+    valuesReplace.name = validateExtra.user_update_name || 'N/A';
+    valuesReplace.role = validateExtra.user_update_role || 'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_UPDATE_ROLE;
+};
+const handleApproveRequestEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.visitor_name = validateExtra.users?.name || valuesReplace.customer_name;
+    valuesReplace.name = validateExtra.user_update_name || 'N/A';
+    valuesReplace.reason_fail = validateExtra.reason_fail || 'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_APPROVE_REQ;
+};
+const handleAddMemberEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.visitor_name = valuesReplace.customer_name;
+    valuesReplace.customer_name =
+        validateExtra.customers?.name || validateExtra.customer_name || 'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_ADD_MEM;
+};
+const handleRemoveMemberEvent = (validateExtra, valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    valuesReplace.name = validateExtra.user_update_name || 'N/A';
+    infoEvent.translateCode = translations._EVENT_DES_REMOVE_MEM;
+};
+const handleRequestAccessEvent = (validateExtra, valuesReplace, infoEvent, isVisitorProfile) => {
+    delete valuesReplace.event_name;
+    // Visitor page: "This user requested to join {customer_name}"
+    // Customer page: "{requester_name} requested to join {customer_name}"
+    valuesReplace.visitor_name = isVisitorProfile
+        ? valuesReplace.customer_name
+        : validateExtra.users?.name || 'A user';
+    valuesReplace.customer_name =
+        validateExtra.customer_name || validateExtra.customers?.name || valuesReplace.customer_name;
+    infoEvent.translateCode = translations._EVENT_DES_REQ_ACCESS;
+};
+const handleShareProgramEvent = (valuesReplace, infoEvent) => {
+    delete valuesReplace.event_name;
+    infoEvent.translateCode = translations._EVENT_DES_SHARE_PROGRAM;
+};
+const handleEarnRewardEvent = (validateExtra, valuesReplace, infoEvent, isReferrer) => {
+    delete valuesReplace.event_name;
+    valuesReplace.reward_value = validateExtra.reward_value || 'N/A';
+    valuesReplace.reward_type = validateExtra.reward_type || 'N/A';
+    if (isReferrer) {
+        infoEvent.translateCode = translations._EVENT_DES_EARN_REWARD_REFERRER;
+    }
+    else {
+        infoEvent.translateCode = translations._EVENT_DES_EARN_REWARD_REFEREE;
+    }
+};
+const handleCustomEventByEcEa = (eType, pageType, validateExtra, valuesReplace, infoEvent, isVisitorProfile) => {
+    if ((eType === 'lead_formated' && pageType === 'sync') ||
+        (eType === 'lead_form' && pageType === 'submit')) {
+        handleLeadFormEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'qr_code' && pageType === 'scan') {
+        handleQrScanEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'banner' && pageType === 'click') {
+        handleClickBannerEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'button' && pageType === 'click') {
+        handleClickButtonEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'scheme_marketing' && pageType === 'view') {
+        handleViewSchemeEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'point' && pageType === 'redeem_point') {
+        handleRedeemPointEvent(validateExtra, valuesReplace, infoEvent, true);
+    }
+    else if (eType === 'point' && pageType === 'redeem_point_fail') {
+        handleRedeemPointEvent(validateExtra, valuesReplace, infoEvent, false);
+    }
+    else if (eType === 'role' && pageType === 'update') {
+        handleUpdateRoleEvent(validateExtra, valuesReplace, infoEvent, isVisitorProfile);
+    }
+    else if (eType === 'request' && pageType === 'approve') {
+        handleApproveRequestEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'member' && pageType.toLowerCase() === 'add') {
+        handleAddMemberEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'member' && pageType.toLowerCase() === 'remove') {
+        handleRemoveMemberEvent(validateExtra, valuesReplace, infoEvent);
+    }
+    else if (eType === 'access' && pageType === 'request') {
+        handleRequestAccessEvent(validateExtra, valuesReplace, infoEvent, isVisitorProfile);
+    }
+    else if (eType === 'program' && pageType === 'share') {
+        handleShareProgramEvent(valuesReplace, infoEvent);
+    }
+    else if (eType === 'referrer' && pageType === 'earn_reward') {
+        handleEarnRewardEvent(validateExtra, valuesReplace, infoEvent, true);
+    }
+    else if (eType === 'referee' && pageType === 'earn_reward') {
+        handleEarnRewardEvent(validateExtra, valuesReplace, infoEvent, false);
     }
 };
 const handleEventTrackingCode = (eventTracking, keyTitleEvent, validateExtra, valuesReplace, infoEvent, config) => {
     const { story = {} } = validateExtra;
     if (eventTracking.map[keyTitleEvent]?.eventTrackingCode === 'promotion_code_sent_tracking') {
-        valuesReplace.promotion_code = valuesReplace.event_name;
-        delete valuesReplace.event_name;
-        valuesReplace.journey_name = `<a  class="title-have-url" href=${urlJourney(validateExtra, config)} target="_blank">${story.storyName}</a>`;
-        if (validateExtra.channel &&
-            mapTranslateCode.promotion_code_sent_tracking[parseInt(validateExtra.channel.id)]) {
-            infoEvent.translateCode =
-                mapTranslateCode.promotion_code_sent_tracking[parseInt(validateExtra.channel.id)].translateLabel;
+        const sentTranslation = validateExtra.channel &&
+            mapTranslateCode.promotion_code_sent_tracking[parseInt(validateExtra.channel.id, 10)];
+        if (sentTranslation && story.storyName) {
+            valuesReplace.promotion_code = valuesReplace.event_name;
+            delete valuesReplace.event_name;
+            valuesReplace.journey_name = `<a  class="title-have-url" href=${urlJourney(validateExtra, config)} target="_blank">${story.storyName}</a>`;
+            infoEvent.translateCode = sentTranslation.translateLabel;
+        }
+        else {
+            infoEvent.translateCode = translations._EVENT_DES_PERFORM_EVENT;
+            valuesReplace.event_name = `${eventTracking.map[keyTitleEvent].translateLabel || 'Promotion code sent'}: ${valuesReplace.event_name}`;
         }
     }
     else if (eventTracking.map[keyTitleEvent]?.eventTrackingCode === 'promotion_code_used_tracking') {
@@ -352,7 +521,7 @@ const processEventByType = (eType, itemEvent, validateExtra, data) => {
         handleScreenviewEvent(itemEvent, validateExtra, data);
     }
 };
-const buildInfoEvent = (infoEvent, eventTracking, keyTitleEvent, validateExtra, data, config) => {
+const buildInfoEvent = (infoEvent, eventTracking, keyTitleEvent, validateExtra, data, config, eType, pageType, isVisitorProfile) => {
     let valuesReplace = {};
     if (infoEvent) {
         infoEvent.iconName = get(eventTracking, `map.${keyTitleEvent}.iconUrl`);
@@ -374,6 +543,7 @@ const buildInfoEvent = (infoEvent, eventTracking, keyTitleEvent, validateExtra,
         valuesReplace = getValuesReplace(infoEvent.objectReplace, data);
         handleEventTrackingCode(eventTracking, keyTitleEvent, validateExtra, valuesReplace, infoEvent, config);
     }
+    handleCustomEventByEcEa(eType, pageType, validateExtra, valuesReplace, infoEvent, isVisitorProfile);
     return { infoEvent, valuesReplace };
 };
 const buildFullContentEvent = (infoEvent, titleEvent, valuesReplace, data) => {
@@ -402,6 +572,7 @@ const calculateSlideSettings = (itemEvent, infoEvent) => {
 export const getInfoEvent = (params) => {
     const { eType, itemEvent, eventTracking, config, customerName: customerNameParam } = params;
     const customerName = customerNameParam || '_THIS_PERSON_UPPERCASE';
+    const isVisitorProfile = customerName === '_THIS_PERSON_UPPERCASE';
     // Step 1: Prepare initial data and extract common fields
     const { keyTitleEvent, validateExtra, titleEvent: initialTitleEvent, data, } = prepareInitialData(itemEvent, eType, eventTracking, customerName);
     // Step 2: Update titleEvent if eventTracking has a mapping
@@ -413,7 +584,7 @@ export const getInfoEvent = (params) => {
     processEventByType(eType, itemEvent, validateExtra, data);
     // Step 4: Build infoEvent and valuesReplace
     let infoEvent = DATA_EVENT.map[`${itemEvent.pageType} ${eType}`];
-    const { infoEvent: processedInfoEvent, valuesReplace } = buildInfoEvent(infoEvent, eventTracking, keyTitleEvent, validateExtra, data, config);
+    const { infoEvent: processedInfoEvent, valuesReplace } = buildInfoEvent(infoEvent, eventTracking, keyTitleEvent, validateExtra, data, config, eType, itemEvent.pageType, isVisitorProfile);
     infoEvent = processedInfoEvent;
     // Step 5: Build full content event text
     const fullContentEvent = buildFullContentEvent(infoEvent, titleEvent, valuesReplace, data);

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

@@ -20,7 +20,7 @@ import { renderMenuIcon } from './utils';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const homePermissionCode = 'DASHBOARD';
 export const LeftMenuComponent = memo(props => {
-    const { show = true, style, className, customization, showLogo = true, onClickLogo } = props;
+    const { show = true, style, className, customization, showLogo = true, footer, onClickLogo, } = props;
     const { showMenuPopover = true, showButtonExpand = true, type, items = [], onMenuItemClick, } = customization || {};
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const customHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
@@ -59,21 +59,21 @@ export const LeftMenuComponent = memo(props => {
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
         let Label = null;
-        Label = (_jsxs("li", { role: "menuitem", className: classNames({ isActive, isHover }), children: [renderMenuIcon(component_icon_name || icon_name || ''), _jsx(Typography.Text, { children: menu_item_name }), showMenuPopover && _jsx("div", { className: "popup-triangle" })] }));
+        Label = (_jsxs("li", { role: "menuitem", className: classNames('menu_item', { isActive, isHover }), children: [renderMenuIcon(component_icon_name || icon_name || ''), _jsx(Typography.Text, { ellipsis: { tooltip: menu_item_name }, children: menu_item_name }), showMenuPopover && _jsx("div", { className: "popup-triangle" })] }));
         return (_jsx(FeatureMenuItem, { onClick: () => onClickFeatureMenuItem(item), onMouseEnter: () => onMouseEnter(menu_item_code), children: Label }, menu_item));
     }, [activeAppCode, state.hoverItem, showMenuPopover, onMouseEnter, onClickFeatureMenuItem]);
     const renderRecommendationMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, component_icon_name, icon_name, permission_code } = item;
         const isActive = customActiveAppKey === permission_code;
         const isHover = state.hoverItem === permission_code;
-        const renderLabel = () => (_jsxs("li", { role: "menuitem", className: classNames({ isActive, isHover }), onClick: () => onMenuItemClick?.(permission_code || 'null', [permission_code || 'null']), children: [renderMenuIcon(component_icon_name || icon_name || ''), _jsx(Typography.Text, { children: menu_item_name })] }));
+        const renderLabel = () => (_jsxs("li", { role: "menuitem", className: classNames('menu_item', { isActive, isHover }), onClick: () => onMenuItemClick?.(permission_code || 'null', [permission_code || 'null']), children: [renderMenuIcon(component_icon_name || icon_name || ''), _jsx(Typography.Text, { ellipsis: { tooltip: menu_item_name }, children: menu_item_name })] }));
         return (_jsx(FeatureMenuItem, { onMouseEnter: () => onMouseEnter(permission_code || 'null'), children: renderLabel() }, menu_item));
     }, [customActiveAppKey, onMenuItemClick, onMouseEnter, state.hoverItem]);
     const renderCustomizedMenuItems = useCallback((items) => items?.map(item => {
         const { key, icon, label } = item;
         const isActive = key === customActiveAppKey;
         const isHover = key === state.hoverItem;
-        return (_jsx(FeatureMenuItem, { onClick: () => onMenuItemClick?.(key, [key]), onMouseEnter: () => onMouseEnter(key), children: _jsxs("li", { role: "menuitem", className: classNames({ isActive, isHover }), children: [renderMenuIcon(icon || ''), _jsx(Typography.Text, { children: label }), showMenuPopover && _jsx("div", { className: "popup-triangle" })] }) }, key));
+        return (_jsx(FeatureMenuItem, { onClick: () => onMenuItemClick?.(key, [key]), onMouseEnter: () => onMouseEnter(key), children: _jsxs("li", { role: "menuitem", className: classNames('menu_item', { isActive, isHover }), children: [renderMenuIcon(icon || ''), _jsx(Typography.Text, { ellipsis: { tooltip: label }, children: label }), showMenuPopover && _jsx("div", { className: "popup-triangle" })] }) }, key));
     }), [customActiveAppKey, state.hoverItem, showMenuPopover, onMenuItemClick, onMouseEnter]);
     const renderAppMenuItems = useCallback(() => type === 'customization'
         ? renderCustomizedMenuItems(items)
@@ -99,9 +99,9 @@ export const LeftMenuComponent = memo(props => {
         }
         return null;
     };
-    return (_jsxs(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className, children: [_jsxs(LeftMenuNav, { className: "left-menu-nav", children: [_jsxs(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave, children: [showLogo && (_jsx(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo, children: _jsx("div", { className: "image-wrapper", children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) }) })), _jsxs(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", children: [_jsx("div", { className: "menu-content scroll-content", children: renderAppMenuItems() }), _jsx("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }), showMenuPopover && (_jsx(PopoverWrapper, { show: state.isShowPopover && !isEmpty(hoverMenuChildren), hasMarginTop: type !== 'recommendation', className: "antsomi-scroll-box antsomi-child-menu-popover", children: _jsx("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' }, children: childHoverMenu }) }))] }), _jsx("div", { style: { flexShrink: 0 }, children: renderSettings() })] }), showButtonExpand && (_jsx(ExpandWrapper, { onMouseEnter: onMouseLeave, children: _jsx(Icon, { type: "icon-ants-expand-more", style: {
+    return (_jsxs(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className, children: [_jsxs(LeftMenuNav, { className: "left-menu-nav", children: [_jsxs(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave, children: [showLogo && (_jsx(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo, children: _jsx("div", { className: "image-wrapper", children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) }) })), _jsxs(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", children: [_jsx("div", { className: "menu-content scroll-content", children: renderAppMenuItems() }), _jsx("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }), showMenuPopover && (_jsx(PopoverWrapper, { show: state.isShowPopover && !isEmpty(hoverMenuChildren), hasMarginTop: type !== 'recommendation', className: "antsomi-scroll-box antsomi-child-menu-popover", children: _jsx("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' }, children: childHoverMenu }) }))] }), footer === undefined && _jsx("div", { style: { flexShrink: 0 }, children: renderSettings() })] }), footer !== undefined ? (_jsx("div", { style: { flexShrink: 0 }, children: footer })) : showButtonExpand ? (_jsx(ExpandWrapper, { onMouseEnter: onMouseLeave, children: _jsx(Icon, { type: "icon-ants-expand-more", style: {
                                 cursor: 'pointer',
                                 fontSize: '20px',
                                 transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
-                            }, onClick: onToggleChildMenu }) }))] }), _jsx(ChildMenuWrapper, { isExpand: state.isExpandMenu, isMarginTop: showLogo, className: "antsomi-scroll-box", children: _jsx("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' }, children: childActiveMenu }) })] }));
+                            }, onClick: onToggleChildMenu }) })) : null] }), _jsx(ChildMenuWrapper, { isExpand: state.isExpandMenu, isMarginTop: showLogo, className: "antsomi-scroll-box", children: _jsx("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' }, children: childActiveMenu }) })] }));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));

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

@@ -115,7 +115,7 @@ export const usePermission = () => {
         },
     });
     const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
-    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy(menuList?.rows || [], ['level_position']), flattenMenuPermission), [menuList?.rows, flattenMenuPermission]);
+    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy(menuList?.rows || [], [item => Number(item?.level_position)]), flattenMenuPermission), [menuList?.rows, flattenMenuPermission]);
     const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
         menuList: permissionMenu,
         auth,

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

@@ -163,6 +163,8 @@ export const FeatureMenuItem = styled.div `
       font-size: 11px !important;
       font-weight: 500;
       color: inherit;
+      width: 100%;
+      text-align: center;
     }
 
     .menu-item__icon {

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
 import { FeatureMenuPermission, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireMenuItemKey> & {
@@ -37,6 +38,12 @@ export interface LeftMenuProps {
     style?: React.CSSProperties;
     className?: string;
     showLogo?: boolean;
+    /**
+     * Custom content rendered at the bottom of the primary menu rail.
+     * When provided, it replaces the default Settings item and Expand button.
+     * Pass `null` to hide the default footer without rendering a replacement.
+     */
+    footer?: ReactNode;
     customization?: {
         type?: TLeftMenuType;
         showButtonExpand?: boolean;

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

@@ -84,7 +84,7 @@ export const recursivePermissionMenu = (menuItems, menuPermissions) => {
         ...item,
         ...(isArray(item.children)
             ? {
-                children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), menuPermissions),
+                children: recursivePermissionMenu(sortBy(item.children || [], [item => Number(item.level_position)]), menuPermissions),
             }
             : {}),
     }))

package/es/components/organism/Login/Login.js

@@ -17,6 +17,7 @@ import { LoginSelectPortal, LoginWithGG, SignIn, VerifyAccount, SetupGGAuthentic
 import { useContainerDimensions } from './hooks';
 // Utils
 import { checkURL, navigateTo } from './utils';
+import { createCrossSubdomainCookieOptions } from '@antscorp/antsomi-ui/es/utils/crossSubdomainCookieOptions';
 import { LOGIN_METHODS, STEPS } from './constants';
 import { LoginBannerZone, LoginMain, WrapperLogin } from './styled';
 export const Login = props => {
@@ -208,7 +209,10 @@ export const Login = props => {
                             if (menus && menus.length) {
                                 handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
                                 if (onLoginSuccess && typeof onLoginSuccess === 'function') {
-                                    onLoginSuccess(dataLogin);
+                                    onLoginSuccess({
+                                        ...dataLogin,
+                                        networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                                    });
                                     setLoadingSkip(false);
                                 }
                                 else if (isCallbackUrl && callbackUrl) {
@@ -242,7 +246,10 @@ export const Login = props => {
                                         handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
                                         setLoadingSkip(false);
                                         if (onLoginSuccess && typeof onLoginSuccess === 'function') {
-                                            onLoginSuccess(dataLogin);
+                                            onLoginSuccess({
+                                                ...dataLogin,
+                                                networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                                            });
                                         }
                                         else if (isCallbackUrl && callbackUrl) {
                                             navigateTo(callbackUrl);
@@ -263,7 +270,10 @@ export const Login = props => {
                         setLoadingSkip(false);
                         handleLoginData(dataLogin, !isCallbackUrl && !isHomePageUrl, selectedNetworkRef.current && selectedNetworkRef.current.networkId);
                         if (onLoginSuccess && typeof onLoginSuccess === 'function') {
-                            onLoginSuccess(dataLogin);
+                            onLoginSuccess({
+                                ...dataLogin,
+                                networkId: selectedNetworkRef.current?.networkId ?? networkId,
+                            });
                         }
                         else if (isCallbackUrl && callbackUrl) {
                             navigateTo(callbackUrl);
@@ -430,7 +440,6 @@ export const Login = props => {
         if (postParam.error && postParam.error !== '') {
         }
         else {
-            const arrTmp = window.location.hostname.split('.');
             if (postParam.action === 'ogs-authenticate') {
                 const loginData = { ...postParam, type: 'all_account' };
                 if (loginData.hasOwnProperty('full_name')) {
@@ -454,38 +463,12 @@ export const Login = props => {
                         ? u_ogs
                         : `${u_ogs}_${selectedNetworkRef.current?.networkId}`;
                     const maxAge = 30 * 24 * 3600;
-                    if (window.location.protocol !== 'https:') {
-                        if (arrTmp.length < 4) {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-2).join('.'),
-                                path: '/; samesite=None',
-                                maxAge,
-                            });
-                        }
-                        else {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-3).join('.'),
-                                path: '/; samesite=None',
-                                maxAge,
-                            });
-                        }
-                    }
-                    else {
-                        if (arrTmp.length < 4) {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-2).join('.'),
-                                path: '/; samesite=None; secure',
-                                maxAge,
-                            });
-                        }
-                        else {
-                            setCookie(cookieKey, JSON.stringify(loginData), {
-                                domain: arrTmp.slice(-3).join('.'),
-                                path: '/; samesite=None; secure',
-                                maxAge,
-                            });
-                        }
-                    }
+                    const cookieOptions = createCrossSubdomainCookieOptions({
+                        hostname: window.location.hostname,
+                        protocol: window.location.protocol,
+                        maxAge,
+                    });
+                    setCookie(cookieKey, JSON.stringify(loginData), cookieOptions);
                 }
             }
             if (doPostEvent) {

package/es/components/organism/Login/components/IconInfo/IconInfo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules/ModalV2';
 import Icon from '@antscorp/icons';
 import { Flex, Tooltip, Typography } from 'antd';
 import { useState } from 'react';

package/es/components/organism/Login/components/LoginSelectPortal/LoginSelectPortal.js

@@ -10,7 +10,7 @@ import { get, isEmpty } from 'lodash';
 import { WidgetLayout } from '../WidgetLayout';
 import { Item } from './Item';
 import { Avatar } from '../Avatar';
-import { Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms/Scrollbars';
 import NoData from '../../../../../assets/images/components/Login/NoData.png';
 // Styled
 import { WrapperList } from './styled';

package/es/components/organism/Login/components/SignIn/SignIn.js

@@ -72,10 +72,10 @@ export const SignIn = props => {
                                 message: 'Please enter your email',
                                 pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                             },
-                        ], children: _jsx(StyleInput, { isMobile: isMobile, placeholder: "Email" }) }), _jsx(Form.Item, { name: "password", rules: [
+                        ], children: _jsx(StyleInput, { autoComplete: "username", name: "email", type: "text", isMobile: isMobile, placeholder: "Email" }) }), _jsx(Form.Item, { name: "password", rules: [
                             { required: true, message: 'Please enter your password' },
                             { min: 6, message: 'Password must be at least 6 characters long' },
-                        ], style: { marginTop: 15 }, children: _jsx(StyleInput.Password, { placeholder: "Password", iconRender: visible => visible ? (_jsx(Icon, { type: "icon-ants-eye", style: {
+                        ], style: { marginTop: 15 }, children: _jsx(StyleInput.Password, { name: "password", autoComplete: "current-password", placeholder: "Password", iconRender: visible => visible ? (_jsx(Icon, { type: "icon-ants-eye", style: {
                                     color: '#595959',
                                 } })) : (_jsx(Icon, { type: "icon-ants-invisible", style: {
                                     color: '#595959',

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

@@ -19,6 +19,8 @@ export interface LoginData {
     G2FA: number;
     status: boolean;
     errorCode: string;
+    /** The networkId (portalId) of the network the user logged into */
+    networkId?: number | string;
     [key: string]: any;
 }
 export interface Account {

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LoginV2Props } from './types';
+export declare const LoginV2: React.FC<LoginV2Props>;