import React, { useEffect } from 'react'; 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 { withRouter } from 'next/router'; import { slugify } from 'env/utils/strings'; import ActiveLink from 'ui/components/ActiveLink'; import withCustomComponent from 'ui/components/withCustomComponent'; import LocationsMenu from 'ui/components/LocationsMenu/LocationsMenu'; const cookies = new Cookies(); export const MainMenu = withCustomComponent('MainMenu')( inject( 'contentStore', 'coursesStore', 'floorPlanStore', 'invoicingStore', 'appStore', 'authStore', 'bookingsStore' )( withRouter( observer( ({ componentName, router, appStore, contentStore, coursesStore, floorPlanStore, 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 isCoursesRoute = router.pathname === routes.courses || router.pathname === routes.my_courses; const coursesExist = coursesStore.coursesPage?.Courses?.length > 0 || coursesStore.myCourses?.length > 0; // const isTeamActive = // router.pathname === routes.team_dashboard || // router.pathname === routes.team_attendance; const isTeamActive = [ routes.team_dashboard, routes.team_attendance, ].includes(router.pathname); // router.pathname === routes.team_dashboard || // router.pathname === routes.team_attendance; const isBookingsActive = router.pathname === routes.resources || router.pathname === routes.my_bookings || router.pathname === routes.floorplan || router.pathname === routes.floorplan_by_id('[floorplan_id]') || router.pathname === routes.calendar || router.pathname === routes.my_events || router.pathname === routes.visitors || router.pathname === routes.deliveries; const isCommunityActive = router.pathname === routes.forum || router.pathname === routes.forum_by_group('[group_id]') || router.pathname === routes.forum_start || router.pathname === routes.my_threads || router.pathname === routes.private_threads || router.pathname === routes.virtual_rooms || router.pathname === routes.posts || router.pathname === routes.events || router.pathname === routes.event_by_id('[event_id]') || router.pathname === routes.events_calendar || router.pathname === routes.courses || router.pathname === routes.my_courses || router.pathname === routes.course_by_id('[course_id]') || router.pathname === routes.lesson_by_id('[lesson_id]') || router.pathname === routes.directory_members || router.pathname === routes.directory_member_by_id('[member_id]') || router.pathname === routes.directory_team_by_id('[team_id]') || router.pathname === routes.directory_teams || router.pathname === routes.custom_page('[...page_slug]'); const isSupportActive = router.pathname === routes.faq || router.pathname === routes.support || router.pathname === routes.support_new || router.pathname === routes.support_message('[message_id]'); const isSettingsActive = router.pathname === routes.profile || router.pathname === routes.profile_team || router.pathname === routes.profile_team || router.pathname === routes.profile_team || router.pathname === routes.plan || router.pathname === routes.invoices || router.pathname === routes.integrations || router.pathname === routes.notifications || router.pathname === routes.files || router.pathname === routes.metrics; 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 openDropdown = (shouldHide) => { if (isTeamActive) { $('#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 (isBookingsActive) { $('#bookings-dropdown').off('hide.bs.dropdown'); $('#bookings-dropdown-toggle').dropdown('toggle'); if (mainMenuExpanded) { $('#bookings-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(); }); } } }; const communityMenu = (config['PublicWebSite.CommunityBoard'] || config['Jitsi.AlwaysOnRooms.Enabled'] || config['Jitsi.AlwaysOnRooms.Enabled'] || config['Blog.Enabled'] || publicCustomPages.length > 0 || (!corporateDashboard && config['PublicWebSite.Events']) || coursesStore.coursesPage?.Courses?.length > 0 || config['PublicWebSite.Directory']) && ( ); 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.hasLoadedStoreProducts) invoicingStore .loadStoreProducts({ ...router.query }) .catch((ex) => null); if (!appStore.mainMenuDocked) appStore.toggleMainMenuExpanded(false); if (appStore.mainMenuDocked) openDropdown(); window.addEventListener('resize', updateDimensions); }, []); useEffect(() => { initToolTips(); }); 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/search' && ( )}

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

{/* Location selector */} {/* Dashboard */} {bookingsStore.sensors?.length > 0 && ( )} {customer?.TeamNames && ( )} {virtualDashboard && communityMenu} {/* Bookings */} {bookingsStore.resources?.length > 0 && ( )} {/* Products and Services */} {invoicingStore.storeProducts.products.length > 0 && ( )} {/* Community */} {!virtualDashboard && communityMenu} {/* Perks Benefits */} {communityPerks.length > 0 && ( )} {/* Support */} {(faqArticles.length > 0 || config['PublicWebSite.Help']) && ( )} {/* Settings */}

); } ) ) ) );