@antscorp/antsomi-ui 1.3.5-beta.494 → 1.3.5-beta.495

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

@@ -167,7 +167,7 @@ export const getMappingAppChildren = (args) => {
                 })();
                 cloneMenuItem.children =
                     (destinationChannelGen2Entries === null || destinationChannelGen2Entries === void 0 ? void 0 : destinationChannelGen2Entries.map(item => (Object.assign({}, getInitialFeatureMenuItem({
-                        menu_item_code: item.channelCode,
+                        menu_item_code: `${menuItem.menu_item_code}_${item.channelCode}`,
                         menu_item_name: item.translateLabel,
                         logo_url: item.logoUrl,
                         menu_item_parent: menuItem.menu_item,

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

@@ -16,6 +16,7 @@ import AntsProcessingNotification from '@antscorp/processing-notification';
 import { cloneDeep, merge, omit } from 'lodash';
 import isEqual from 'react-fast-compare';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { Helmet } from 'react-helmet';
 // Styled
 import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
 // Components
@@ -46,10 +47,10 @@ export const Layout = memo(props => {
     const header = useLayoutStore(store => store.state.header);
     const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
     const workspace = useLayoutStore(store => store.state.workspace);
-    const setHeaderState = useLayoutStore(store => store.setHeaderState);
     const [showAccountSelection, setShowAccountSelection] = useState(false);
     const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
     const [activeMenuCode, setActiveMenuCode] = useState('');
+    const [activePageTitle, setActivePageTitle] = useState('');
     // Refs
     const notificationWrapperRef = useRef(null);
     // Hooks
@@ -118,7 +119,7 @@ export const Layout = memo(props => {
                         INSIGHT_U_OGS: 'uogs',
                     } }) }), accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 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 = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), Object.assign(Object.assign({}, header), { pageTitle: (header === null || header === void 0 ? void 0 : header.pageTitle) || (header === null || header === void 0 ? void 0 : header.pageTitleTemp) })), [initialHeaderProps, header]);
+    const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), Object.assign(Object.assign({}, header), { pageTitle: (header === null || header === void 0 ? void 0 : header.pageTitle) || activePageTitle })), [initialHeaderProps, header]);
     const _b = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]), { noPadding, showNotification = true } = _b, mergeContentWrapperProps = __rest(_b, ["noPadding", "showNotification"]);
     const mergeWorkSpaceProps = useDeepCompareMemo(() => merge(cloneDeep(restOfWorkspaceProps), omit(workspace, 'workspaceContentProps')), [restOfWorkspaceProps, workspace]);
     const _c = useDeepCompareMemo(() => merge(cloneDeep(leftMenuProps), cloneDeep(leftMenu)), [leftMenuProps, leftMenu, appConfig]), { className: leftMenuClassName, show: showLeftMenu = true } = _c, mergeLeftMenuProps = __rest(_c, ["className", "show"]);
@@ -128,11 +129,9 @@ export const Layout = memo(props => {
         var _a;
         const activeMenuItem = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1];
         const { menu_item_code, page_title, menu_item_name } = activeMenuItem || {};
-        setHeaderState({
-            pageTitleTemp: page_title
-                ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
-                : menu_item_name,
-        });
+        setActivePageTitle(page_title
+            ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
+            : menu_item_name);
         setActiveMenuCode(menu_item_code);
         onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange(menu_item_code);
         const hasRole = hasSelectAccountPermission({
@@ -142,8 +141,11 @@ export const Layout = memo(props => {
             appItem: activeItemPath[0],
         });
         setShowAccountSelection(hasRole);
-    }, [onActiveMenuChange, setHeaderState]);
+    }, [onActiveMenuChange]);
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
+        React.createElement(Helmet, null,
+            React.createElement("meta", { charSet: "utf-8" }),
+            React.createElement("title", null, (header === null || header === void 0 ? void 0 : header.browser) || (header === null || header === void 0 ? void 0 : header.pageTitle) || activePageTitle)),
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
             showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }))),

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Typography } from '../../../../../../atoms';
 // Assets
 import recommendationHumanImage from '@antscorp/antsomi-ui/es/assets/images/components/Layout/recommendation-human.png';
+// Styled
 import { ImageWrapper, MessageWrapper, RecommendationImageWrapper } from './styled';
 export const RecommendationImage = () => (React.createElement(RecommendationImageWrapper, null,
     React.createElement(MessageWrapper, null,

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

@@ -26,6 +26,21 @@ export const MessageWrapper = styled.div `
     transform: rotate(180deg);
     z-index: 100;
   }
+
+  @media screen and (max-width: 1400px) {
+    width: 300px;
+    & > div.antsomi-typography {
+      font-size: 22px !important;
+      line-height: 26px;
+    }
+  }
+  @media screen and (max-width: 1330px) {
+    width: 250px;
+    & > div.antsomi-typography {
+      font-size: 20px !important;
+      line-height: 24px;
+    }
+  }
 `;
 export const ImageWrapper = styled.div `
   width: 100%;

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

@@ -1,26 +1,9 @@
 // Libraries
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 // Components
 import { MenuMapping, RecommendationImage } from './components';
-// Stores
-import { useLayoutStore } from '../../stores';
 // Styled
 import { RecommendationWorkspaceWrapper } from './styled';
-export const RecommendationWorkspace = () => {
-    const setHeaderState = useLayoutStore(store => store.setHeaderState);
-    useLayoutEffect(() => {
-        document.title = 'Recommendation';
-        setHeaderState({
-            pageTitle: 'Recommendation',
-        });
-        return () => {
-            document.title = '';
-            setHeaderState({
-                pageTitle: '',
-            });
-        };
-    }, [setHeaderState]);
-    return (React.createElement(RecommendationWorkspaceWrapper, null,
-        React.createElement(RecommendationImage, null),
-        React.createElement(MenuMapping, null)));
-};
+export const RecommendationWorkspace = () => (React.createElement(RecommendationWorkspaceWrapper, null,
+    React.createElement(RecommendationImage, null),
+    React.createElement(MenuMapping, null)));

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

@@ -4,7 +4,7 @@ import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
 import { ContentWrapperProps, WorkspaceProps } from '../types';
 import { LeftMenuProps } from '../../../organism';
 export interface HeaderStore extends Partial<HeaderV2Props> {
-    pageTitleTemp?: string;
+    browser?: string;
 }
 export interface LeftMenuStore extends LeftMenuProps {
     show?: boolean;

package/es/locales/vi/translation.json

@@ -148,12 +148,12 @@
         "pageTitle": {
             "recommendation": "Gợi ý",
             "_dashboard": "Bảng tổng quan",
-            "_marketing": "",
+            "_marketing": "Tiếp thị",
             "_content": "Nội dung",
             "_templates": "Thư viện mẫu",
             "_profiles": "Chân dung",
             "_data": "Dữ liệu",
-            "_insights": "",
+            "_insights": "Nhận thức chiến lược",
             "_settings": "Cài đặt",
             "_overview": "Trang tổng quan",
             "_allChannel": "Tất cả kênh",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.494",
+  "version": "1.3.5-beta.495",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -111,6 +111,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
+    "react-helmet": "^6.1.0",
     "react-intersection-observer": "^9.10.3",
     "react-konva": "^18.2.10",
     "react-markdown": "^8.0.7",