/* eslint-disable jsx-a11y/anchor-is-valid */ import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import Link from 'next/link'; import _ from 'lodash'; import { withRouter } from 'next/router'; import { routes } from 'env/routes'; import ActiveLink from 'ui/components/ActiveLink'; import { AdminNotice } from 'ui/components/AdminNotice'; import { UnpaidBookingsNotice } from 'ui/components/UnpaidBookingsNotice'; import withCustomComponent from 'ui/components/withCustomComponent'; import LocationsMenu from 'ui/components/LocationsMenu/LocationsMenu'; import { ReferralModal } from 'ui/_pages/home/ReferralModal/ReferralModal'; import { ReferralNotice } from 'ui/_pages/home/ReferralModal/ReferralNotice'; import { ImpersonationNotice } from 'ui/components/Header/ImpersonationNotice'; import { NotificationsMenuItem } from 'ui/components/Header/NotificationsMenuItem'; import { CustomerInactiveNotice } from 'ui/components/Header/CustomerInactiveNotice'; import { OpenAIProfileReadyNotice } from 'ui/components/Header/OpenAIProfileReadyNotice'; @withCustomComponent('MainHeader') @withTranslation() @withRouter @inject( 'contentStore', 'authStore', 'appStore', 'authStore', 'floorPlanStore', 'bookingsStore', 'checkoutStore', 'coursesStore' ) @observer class MainHeader extends Component { constructor(props) { super(props); this.state = { wiggleCart: false, basketCount: props.checkoutStore.basket.length, }; } initToolTips = () => { const $ = window.$; $('[data-toggle="tooltip"]').tooltip('dispose'); $('[data-toggle="tooltip"]').tooltip({ html: true, }); }; componentDidUpdate(prevProps, prevState) { const currentBasketCount = this.props.checkoutStore.basket.length; if (prevState.basketCount != currentBasketCount) { this.setState({ wiggleCart: true, basketCount: currentBasketCount }); setTimeout(() => this.setState({ wiggleCart: false }), 3000); } } changeProfile(coworkerId) { const { authStore } = this.props; authStore.selectProfile(coworkerId); } componentDidMount() { this.initToolTips(); const { bookingsStore, appStore, floorPlanStore, contentStore, coursesStore, authStore, router, } = this.props; if (!authStore.hasLoadedProfiles) authStore.loadProfiles().catch(() => null); if (!bookingsStore.hasLoadedResources) bookingsStore.loadResources().catch(() => null); 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 (!floorPlanStore.hasLoadedItems) floorPlanStore.loadItems().catch((ex) => null); if (!coursesStore.hasLoadedCoursesPage) coursesStore.loadCoursesPage({ ...router.query }).catch((ex) => null); } render() { const { bookingsStore, checkoutStore, coursesStore, t, router, appStore, authStore, } = this.props; const { publicCustomPages, referralDiscounts, business, configuration, showNotices, corporateDashboard, } = appStore; const { isLoggedIn, impersonationToken, customer } = authStore; const { resources, 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); } if (!business) return <>; const config = appStore.configuration; const impersonationTokens = impersonationToken; const customerIsInactive = customer && customer.Id > 0 && !customer.Active; const customerHasOpenAiProfile = customer && customer.Id > 0 && customer.OpenAiProfileAvailable; const showDiscounts = referralDiscounts.length > 0 && customer && !customerIsInactive; const isAdmin = authStore.me?.CanAccessPlatform; const hasUnpaidBookings = bookingsStore.unpaidBookings.BookingsToPay > 0 && bookingsStore.unpaidBookings.TimeToPay > 0; const clearNotices = () => { const { appStore } = this.props; appStore.setShowNotices(false); }; const noticeCloseButton = ( ); const bottomContent = showNotices && (impersonationTokens || customerHasOpenAiProfile || customerIsInactive || showDiscounts || isAdmin || hasUnpaidBookings); return ( <> {appStore.showReferralModal && }

{isLoggedIn ? (

{/* HEADER - Logged In */}

{checkoutStore.basket.length > 0 && ( {_.sumBy(checkoutStore.basket, (i) => parseInt(i.data?.Quantity ?? '1') )} )} {configuration['PublicWebSite.CommunityBoard'] && ( )}

{resources.length > 0 && ( {t('My bookings')} )} {configuration['PublicWebSite.MyAccount'] && ( {t('My account')} )} {!corporateDashboard && ( {t('Plans and benefits')} )} {!corporateDashboard && configuration['Members.ViewInvoices'] && ( {t('Billing')} )} {authStore.profiles.length > 1 && ( <>

{authStore.profiles.map((p) => ( this.changeProfile(p.Id)} className={`${ customer.Id == p.Id ? 'active' : '' } mb-5 dropdown-item`} > {p.FullName}

{p.CoworkerType == 1 ? p.FullName : p.CompanyName} ))}

)}

{/* END HEADER - Logged In */}

) : ( <>

{/* HEADER - Logged Out */}

{checkoutStore.basket.length > 0 && ( {checkoutStore.basket.length} )}

{/* Incredibly, this is conditional display - the '&&' does it. if the variabble config['PublicWebSite.AboutUs'] is true, then OUTPUT everthing in the parentheses - otherwise, output NOTHING. */} {/*config['PublicWebSite.AboutUs'] && (
{t('Why {{businessName}}', { businessName: t(business.Name), })}
)*/} {config['PublicWebSite.AboutUs'] && (
{t('About')}
)} {/*(config['Blog.Enabled'] || config['PublicWebSite.Events'] || config['PublicWebSite.Directory'] || config['Jitsi.AlwaysOnRooms.Enabled'] || publicCustomPages.length > 0) && (
{t('Community')}
{config['Blog.Enabled'] && (
-1 ? 'active' : '' } > {t('Articles')}
)} {config['PublicWebSite.Events'] && (
-1 ? 'active' : '' } > {t('Events')}
)} {coursesStore.coursesPage?.Courses?.length > 0 && (
-1 ? 'active' : '' }`} > {t('Courses')}
)} {config['PublicWebSite.Directory'] && (
{t('Directory')}
)} {config['Jitsi.AlwaysOnRooms.Enabled'] && (
-1 ? 'active' : '' } > {t('Virtual rooms')}
)} {publicCustomPages.map((page, i) => (
{t(page.Title || page.Name)}
))}

)*/} {config['PublicWebSite.Tour'] && appStore.coworkingDashboard && (
{t('Take a Tour')}
)} {/* testing making a menu linked to a user-added page
{t('Membership')}
*/} {resources.length > 0 && ( <> {resourceGroups.length == 1 && (
{t('Bookings')}
)} {resourceGroups.length > 1 && (
{t('Bookings')}
{resourceGroups.map((group) => (
{t(group.groupName) || t('All Resources')}
))}

)} )}
{/* Right Side Menu Bar stuff (Cart, Sign in etc) */}

{checkoutStore.basket.length > 0 && ( {checkoutStore.basket.length} )}

{t('Sign in')}
{config['Members.CanSignup'] && (
{t('Become a member')} {t('Sign up')}
)}

{/* END HEADER - Logged Out */}

)} {bottomContent && (
{customerHasOpenAiProfile && } {!hasUnpaidBookings && impersonationTokens && ( <> {noticeCloseButton} )} {!hasUnpaidBookings && customerIsInactive && ( <> {noticeCloseButton} )} {!hasUnpaidBookings && showDiscounts && ( <> {noticeCloseButton} )} {hasUnpaidBookings && } {!hasUnpaidBookings && !customerIsInactive && !impersonationTokens && !showDiscounts && ( <> {isAdmin && ( <> {noticeCloseButton} )} )}
)}

); } } export default MainHeader;

Get in touch with us

Contact details