diff --git a/apps/meteor/client/sidebar/header/actions/Administration.tsx b/apps/meteor/client/sidebar/header/actions/Administration.tsx index d2e51f191370..4cb713ff2557 100644 --- a/apps/meteor/client/sidebar/header/actions/Administration.tsx +++ b/apps/meteor/client/sidebar/header/actions/Administration.tsx @@ -4,14 +4,24 @@ import type { HTMLAttributes, VFC } from 'react'; import React from 'react'; import GenericMenu from '../../../components/GenericMenu/GenericMenu'; +import { useAdministrationHighlight } from './hooks/useAdministrationHighlight'; import { useAdministrationMenu } from './hooks/useAdministrationMenu'; -const Administration: VFC, 'is'>> = (props) => { +const Administration: VFC, 'is'>> = ({ className, ...props }) => { const t = useTranslation(); const sections = useAdministrationMenu(); + const { className: highlightDot } = useAdministrationHighlight(); - return ; + return ( + + ); }; export default Administration; diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationHighlight.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationHighlight.tsx new file mode 100644 index 000000000000..465f0031e0af --- /dev/null +++ b/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationHighlight.tsx @@ -0,0 +1,32 @@ +import { css } from '@rocket.chat/css-in-js'; +import { Palette } from '@rocket.chat/fuselage'; + +import { useOmnichannelHighlight } from '../../../../../ee/client/omnichannel/hooks/useOmnichannelHighlight'; + +const highlightDot = css` + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + display: block; + flex: none; + width: 8px; + height: 8px; + background-color: ${Palette.badge['badge-background-level-4'].toString()}; + border-radius: 50%; + } +`; + +export const useAdministrationHighlight = () => { + const { isHighlit: isOmnichannelHighlit } = useOmnichannelHighlight(); + + return { + isHighlit: isOmnichannelHighlit, + get className() { + return this.isHighlit ? highlightDot : undefined; + }, + }; +}; diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx index 531545b20a43..bbc94426db26 100644 --- a/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx +++ b/apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx @@ -9,6 +9,7 @@ import { } from '@rocket.chat/ui-contexts'; import React from 'react'; +import { OmnichannelHighlight } from '../../../../../ee/client/omnichannel/components/OmnichannelHighlight'; import type { UpgradeTabVariant } from '../../../../../lib/upgradeTab'; import { getUpgradeTabLabel, isFullyFeature } from '../../../../../lib/upgradeTab'; import Emoji from '../../../../components/Emoji'; @@ -86,6 +87,7 @@ export const useAdministrationItems = (): GenericMenuItemProps[] => { content: t('Omnichannel'), icon: 'headset', onClick: () => router.navigate('/omnichannel/current'), + addon: , }; const upgradeItem: GenericMenuItemProps = { diff --git a/apps/meteor/client/views/omnichannel/sidebarItems.ts b/apps/meteor/client/views/omnichannel/sidebarItems.tsx similarity index 93% rename from apps/meteor/client/views/omnichannel/sidebarItems.ts rename to apps/meteor/client/views/omnichannel/sidebarItems.tsx index 048bcb4ef88e..78f09f72bdb3 100644 --- a/apps/meteor/client/views/omnichannel/sidebarItems.ts +++ b/apps/meteor/client/views/omnichannel/sidebarItems.tsx @@ -1,4 +1,7 @@ +import React from 'react'; + import { hasPermission } from '../../../app/authorization/client'; +import { OmnichannelHighlight } from '../../../ee/client/omnichannel/components/OmnichannelHighlight'; import { createSidebarItems } from '../../lib/createSidebarItems'; export const { @@ -11,6 +14,7 @@ export const { href: '/omnichannel/current', icon: 'message', i18nLabel: 'Current_Chats', + badge: () => , permissionGranted: (): boolean => hasPermission('view-livechat-current-chats'), }, { diff --git a/apps/meteor/ee/client/omnichannel/components/OmnichannelHighlight/index.tsx b/apps/meteor/ee/client/omnichannel/components/OmnichannelHighlight/index.tsx new file mode 100644 index 000000000000..561112b97e56 --- /dev/null +++ b/apps/meteor/ee/client/omnichannel/components/OmnichannelHighlight/index.tsx @@ -0,0 +1,14 @@ +import { Box, Palette } from '@rocket.chat/fuselage'; +import React from 'react'; + +import { useOmnichannelHighlight } from '../../hooks/useOmnichannelHighlight'; + +export const OmnichannelHighlight = () => { + const { isHighlit } = useOmnichannelHighlight(); + + if (!isHighlit) { + return null; + } + + return ; +}; diff --git a/apps/meteor/ee/client/omnichannel/hooks/useCurrentChatsHighlight.ts b/apps/meteor/ee/client/omnichannel/hooks/useCurrentChatsHighlight.ts new file mode 100644 index 000000000000..f6fc55317349 --- /dev/null +++ b/apps/meteor/ee/client/omnichannel/hooks/useCurrentChatsHighlight.ts @@ -0,0 +1,29 @@ +import { useLocalStorage } from '@rocket.chat/fuselage-hooks'; +import { useRouter } from '@rocket.chat/ui-contexts'; +import { useEffect } from 'react'; + +import { useIsOverMacLimit } from '../../../../client/hooks/omnichannel/useIsOverMacLimit'; + +export const useCurrentChatsHighlight = () => { + const isOverMacLimit = useIsOverMacLimit(); + const [isHighlit, setHighlight] = useLocalStorage('omnichannel-current-chats-highlight', isOverMacLimit); + const router = useRouter(); + + useEffect(() => { + if (!isHighlit) { + return; + } + + return router.subscribeToRouteChange(() => { + if (router.getRouteName() !== 'omnichannel-current-chats') { + return; + } + + setHighlight(false); + }); + }, [isHighlit, router, setHighlight]); + + return { + isHighlit, + }; +}; diff --git a/apps/meteor/ee/client/omnichannel/hooks/useOmnichannelHighlight.tsx b/apps/meteor/ee/client/omnichannel/hooks/useOmnichannelHighlight.tsx new file mode 100644 index 000000000000..43601125e85c --- /dev/null +++ b/apps/meteor/ee/client/omnichannel/hooks/useOmnichannelHighlight.tsx @@ -0,0 +1,7 @@ +import { useCurrentChatsHighlight } from './useCurrentChatsHighlight'; + +export const useOmnichannelHighlight = () => { + const { isHighlit } = useCurrentChatsHighlight(); + + return { isHighlit }; +};