diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx
index fce9c3d14fd4..e554d3c16c82 100644
--- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx
+++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx
@@ -7,14 +7,14 @@ import React from 'react';
import UserMenuHeader from '../UserMenuHeader';
import { useAccountItems } from './useAccountItems';
import { useStatusItems } from './useStatusItems';
-import { useVoipItems } from './useVoipItems';
+import { useVoipItemsSection } from './useVoipItemsSection';
export const useUserMenu = (user: IUser) => {
const t = useTranslation();
const statusItems = useStatusItems();
const accountItems = useAccountItems();
- const voipItems = useVoipItems();
+ const voipSection = useVoipItemsSection();
const logout = useLogout();
const handleLogout = useEffectEvent(() => {
@@ -37,9 +37,7 @@ export const useUserMenu = (user: IUser) => {
title: t('Status'),
items: statusItems,
},
- {
- items: voipItems,
- },
+ voipSection,
{
title: t('Account'),
items: accountItems,
@@ -47,5 +45,5 @@ export const useUserMenu = (user: IUser) => {
{
items: [logoutItem],
},
- ];
+ ].filter((section) => section !== undefined);
};
diff --git a/apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx
similarity index 72%
rename from apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx
rename to apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx
index d7cbf2428c32..9b126e4eb1e5 100644
--- a/apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx
+++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx
@@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-const useVoipItems = (): GenericMenuItemProps[] => {
+export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => {
const { t } = useTranslation();
const dispatchToastMessage = useToastMessageDispatch();
@@ -45,23 +45,25 @@ const useVoipItems = (): GenericMenuItemProps[] => {
return useMemo(() => {
if (!isEnabled) {
- return [];
+ return;
}
- return [
- {
- id: 'toggle-voip',
- icon: isRegistered ? 'phone-disabled' : 'phone',
- disabled: !isReady || toggleVoip.isLoading,
- onClick: () => toggleVoip.mutate(),
- content: (
-
- {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
-
- ),
- },
- ];
+ return {
+ items: [
+ {
+ id: 'toggle-voip',
+ icon: isRegistered ? 'phone-disabled' : 'phone',
+ disabled: !isReady || toggleVoip.isLoading,
+ onClick: () => toggleVoip.mutate(),
+ content: (
+
+ {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
+
+ ),
+ },
+ ],
+ };
}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]);
};
-export default useVoipItems;
+export default useVoipItemsSection;
diff --git a/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx b/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx
index e9ad8cc73836..030c248036a8 100644
--- a/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx
+++ b/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx
@@ -7,14 +7,14 @@ import React from 'react';
import UserMenuHeader from '../UserMenuHeader';
import { useAccountItems } from './useAccountItems';
import { useStatusItems } from './useStatusItems';
-import useVoipItems from './useVoipItems';
+import { useVoipItemsSection } from './useVoipItemsSection';
export const useUserMenu = (user: IUser) => {
const t = useTranslation();
const statusItems = useStatusItems();
const accountItems = useAccountItems();
- const voipItems = useVoipItems();
+ const voipItemsSection = useVoipItemsSection();
const logout = useLogout();
const handleLogout = useMutableCallback(() => {
@@ -37,9 +37,7 @@ export const useUserMenu = (user: IUser) => {
title: t('Status'),
items: statusItems,
},
- {
- items: voipItems,
- },
+ voipItemsSection,
{
title: t('Account'),
items: accountItems,
@@ -47,5 +45,5 @@ export const useUserMenu = (user: IUser) => {
{
items: [logoutItem],
},
- ];
+ ].filter((section) => section !== undefined);
};
diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx b/apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx
similarity index 73%
rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx
rename to apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx
index b3e4cbf22d52..35922ff68cf5 100644
--- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx
+++ b/apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx
@@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-export const useVoipItems = (): GenericMenuItemProps[] => {
+export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => {
const { t } = useTranslation();
const dispatchToastMessage = useToastMessageDispatch();
@@ -45,23 +45,23 @@ export const useVoipItems = (): GenericMenuItemProps[] => {
return useMemo(() => {
if (!isEnabled) {
- return [];
+ return;
}
- return [
- {
- id: 'toggle-voip',
- icon: isRegistered ? 'phone-disabled' : 'phone',
- disabled: !isReady || toggleVoip.isLoading,
- onClick: () => toggleVoip.mutate(),
- content: (
-
- {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
-
- ),
- },
- ];
+ return {
+ items: [
+ {
+ id: 'toggle-voip',
+ icon: isRegistered ? 'phone-disabled' : 'phone',
+ disabled: !isReady || toggleVoip.isLoading,
+ onClick: () => toggleVoip.mutate(),
+ content: (
+
+ {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')}
+
+ ),
+ },
+ ],
+ };
}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]);
};
-
-export default useVoipItems;