import React, { useEffect } from 'react'; import { withRouter } from 'next/router'; import { useTranslation } from 'react-i18next'; import { observer, inject } from 'mobx-react'; import Cookies from 'universal-cookie'; import Link from 'next/link'; import classNames from 'classnames'; import { routes } from 'env/routes'; import ActiveLink from 'ui/components/ActiveLink'; import LocationsMenu from 'ui/components/LocationsMenu/LocationsMenu'; const cookies = new Cookies(); export const MainMenu = ( inject( 'contentStore', 'coursesStore', 'floorPlanStore', 'invoicingStore', 'appStore', 'authStore', 'bookingsStore' )( withRouter( observer( ({ componentName, router, appStore, contentStore, coursesStore, invoicingStore, bookingsStore, authStore, }) => { const { t } = useTranslation(); const { business, mainMenuDocked, corporateDashboard, virtualDashboard, mainMenuExpanded, publicCustomPages, } = appStore; const { isLoggedIn, customer } = authStore; const { faqArticles, communityPerks } = contentStore; const config = appStore.configuration; const hasCourses = coursesStore.coursesPage?.Courses?.length > 0 || coursesStore.myCourses?.length > 0; const isDashboardActive = [ routes.home, routes.home_index, routes.team_dashboard, routes.team_settings, routes.team_attendance, ].includes(router.pathname); const isCoursesRoute = [routes.courses, routes.my_courses].includes( router.pathname ); const isCommunityActive = [ routes.forum, routes.forum_by_group('[group_id]'), routes.forum_start, routes.my_threads, routes.thread_by_id('[thread_id]'), routes.private_threads, routes.virtual_rooms, routes.posts, routes.post_by_id('[post_id]'), routes.events, routes.event_by_id('[event_id]'), routes.events_calendar, routes.courses, routes.my_courses, routes.course_by_id('[course_id]'), routes.lesson_by_id('[lesson_id]'), routes.directory, routes.directory_members, routes.directory_member_by_id('[member_id]'), routes.directory_team_by_id('[team_id]'), routes.directory_teams, routes.custom_page('[...page_slug]'), ].includes(router.pathname); const isSupportActive = [ routes.faq, routes.faq_by_id('[article_id]'), routes.support, routes.support_new, routes.support_message('[message_id]'), ].includes(router.pathname); const isSettingsActive = [ routes.language, routes.security, routes.integrations, routes.notifications, ].includes(router.pathname); const isBuildingActive = [routes.sensors, routes.capacity].includes( router.pathname ); const canAccessHelpDesk = config['Access.Help'] == 2 || (customer?.IsMember && config['Access.Help'] == 3) || (!customer?.IsMember && config['Access.Help'] == 4); const initToolTips = () => { const $ = window.$; $('[data-toggle="tooltip"]').tooltip('dispose'); $('[data-toggle="tooltip"]').tooltip({ html: true, }); }; const updateDimensions = () => { if (window.innerWidth < 1024) { if (appStore.mainMenuDocked) { appStore.toggleMainMenuDocked(false); appStore.toggleMainMenuExpanded(false); } } }; const getActiveClass = (routes) => { return routes.find((route) => window.location.href.includes(route)); }; const openDropdown = () => { if (isDashboardActive) { $('#dashboard-dropdown').off('hide.bs.dropdown'); $('#dashboard-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { // if menu is expanded, prevent dropdown from closing $('#dashboard-dropdown').on('hide.bs.dropdown', function (e) { e.preventDefault(); }); } } else if (isCommunityActive) { $('#community-dropdown').off('hide.bs.dropdown'); $('#community-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { $('#community-dropdown').on('hide.bs.dropdown', function (e) { e.preventDefault(); }); } } else if (isSupportActive) { $('#support-dropdown').off('hide.bs.dropdown'); $('#support-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { $('#support-dropdown').on('hide.bs.dropdown', function (e) { e.preventDefault(); }); } } else if (isSettingsActive) { $('#settings-dropdown').off('hide.bs.dropdown'); $('#settings-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { $('#settings-dropdown').on('hide.bs.dropdown', function (e) { e.preventDefault(); }); } } else if (isBuildingActive) { $('#building-dropdown').off('hide.bs.dropdown'); $('#building-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { $('#building-dropdown').on('hide.bs.dropdown', function (e) { e.preventDefault(); }); } else if (isDashboardActive) { $('#dashboard-dropdown').off('hide.bs.dropdown'); $('#dashboard-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { $('#dashboard-dropdown').on('hide.bs.dropdown', function (e) { e.preventDefault(); }); } } } }; const isDirectoryActive = config['PublicWebSite.Directory'] == 'true'; const isEventsEnabled = !corporateDashboard && config['PublicWebSite.Events'] == 'true'; const isAlwaysOnRoomsEnabled = config['Jitsi.AlwaysOnRooms.Enabled'] == 'true'; const isBlogEnabled = config['Blog.Enabled'] == 'true'; const isCommunityEnabled = config['PublicWebSite.CommunityBoard'] == 'true'; const communityMenu = (isCommunityEnabled || isAlwaysOnRoomsEnabled || isBlogEnabled || publicCustomPages.length > 0 || isEventsEnabled || hasCourses || isDirectoryActive) && ( ); useEffect(() => { initToolTips(); updateDimensions(); if (!appStore.hasLoadedReferralDiscounts) appStore.loadReferralDiscounts().catch((ex) => null); if (!contentStore.hasLoadedFaqArticles) contentStore.loadFaqArticles().catch((ex) => null); if (!contentStore.hasLoadedCommunityPerks) contentStore.loadCommunityPerks().catch((ex) => null); if (!bookingsStore.hasLoadedResources) bookingsStore.loadResources().catch(() => null); if (!bookingsStore.hasLoadedSensors) bookingsStore.loadSensors().catch(() => null); if (!coursesStore.hasLoadedCoursesPage) coursesStore .loadCoursesPage({ ...router.query }) .catch((ex) => null); if (!invoicingStore.hasLoadedPricePlans) invoicingStore.loadPricePlans({}).catch((ex) => null); if (!invoicingStore.hasLoadedStoreProducts) invoicingStore.loadStoreProducts({}).catch((ex) => null); if (!appStore.mainMenuDocked) appStore.toggleMainMenuExpanded(false); if (appStore.mainMenuDocked) openDropdown(); window.addEventListener('resize', updateDimensions); }, []); useEffect(() => { initToolTips(); }); useEffect(() => { authStore.loadTeamProfileSummaries().catch((x) => null); }, []); if (!business) return <>; if (!isLoggedIn) return <>; const { resourceGroups } = bookingsStore; // move 'All Resources' group to first element if ( resourceGroups.length && resourceGroups[resourceGroups.length - 1].groupName === null ) { const allResourcesGroup = resourceGroups.pop(); resourceGroups.unshift(allResourcesGroup); } const inMsTeams = cookies.get('in-ms-teams') == 'true'; return ( <> <> {inMsTeams && location.pathname != '/bookings' && ( )}

appStore.toggleMainMenuExpanded()} className="site-mainmenu__shadow" >

{/* Location selector */} {customer?.TeamNames ? ( ) : ( )} {/* Building */} {/**/} {virtualDashboard && communityMenu} {/* Bookings */} {bookingsStore.resources?.length > 0 && ( )} {/* Store */} {(invoicingStore.pricePlans.PricePlans.length > 0 || invoicingStore.storeProducts.products.length > 0) && ( )} {/* Community */} {!virtualDashboard && communityMenu} {/* Perks Benefits */} {communityPerks.length > 0 && ( )} {/* Support */} {(faqArticles.length > 0 || config['PublicWebSite.Help']) && (

{faqArticles.length > 0 && ( {t('FAQ')} )} {config['PublicWebSite.Help'] && canAccessHelpDesk && ( {t('Help Request')} )}

)} {/* Settings */}

{config['PublicWebSite.Notifications'] && ( {t('Notifications')} )} {t('Security')} {t('Integrations')} {t('Language')}

{customer.FullName}

); } ) ) ) );