/* eslint-disable jsx-a11y/anchor-is-valid */ import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; import Link from 'next/link'; import ActiveLink from 'ui/components/ActiveLink'; import LocationsMenu from 'ui/components/LocationsMenu/LocationsMenu'; import { withTranslation } from 'react-i18next'; import { routes } from 'env/routes'; import { withRouter } from 'next/router'; import withCustomComponent from 'ui/components/withCustomComponent'; import { ReferralNotice } from 'ui/_pages/home/ReferralModal/ReferralNotice'; import { CustomerInactiveNotice } from 'ui/components/Header/CustomerInactiveNotice'; import { ReferralModal } from 'ui/_pages/home/ReferralModal/ReferralModal'; import { slugify } from 'env/utils/strings'; import { ImpersonationNotice } from 'ui/components/Header/ImpersonationNotice'; import { AdminNotice } from 'ui/components/AdminNotice'; import { NotificationsMenuItem } from 'ui/components/Header/NotificationsMenuItem'; import { action } from 'mobx'; @withCustomComponent('MainHeader') @withTranslation() @withRouter @inject( 'contentStore', '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); } } componentDidMount() { this.initToolTips(); const { bookingsStore, appStore, floorPlanStore, contentStore, coursesStore, router, } = this.props; 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, showNotices, corporateDashboard, } = appStore; const { isLoggedIn, impersonationToken, customer } = authStore; const { resources } = bookingsStore; if (!business) return <>; const config = appStore.configuration; const impersonationTokens = impersonationToken; const customerIsInactive = customer && customer.Id > 0 && !customer.Active; const showDiscounts = referralDiscounts.length > 0 && customer && !customerIsInactive; const isAdmin = authStore.me?.CanAccessPlatform; const clearNotices = () => { const { appStore } = this.props; appStore.setShowNotices(false); }; const bottomContent = showNotices && (impersonationTokens || customerIsInactive || showDiscounts || isAdmin); return ( <> {appStore.showReferralModal && }

{isLoggedIn ? ( {/* HEADER - Loged In */}

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

{t('My bookings')} {t('My account')} {!corporateDashboard && ( {t('Plans and benefits')} )} {!corporateDashboard && ( {t('Billing')} )}

{/* END HEADER - Loged In */} ) : ( {/* HEADER - Loged Out */}

{t('Why {{businessName}}', { businessName: business.Name, })}

{(config['Blog.Enabled'] || config['PublicWebSite.Events'] || config['PublicWebSite.Directory'] || config['Jitsi.AlwaysOnRooms.Enabled'] || publicCustomPages.length > 0) && (

{t('Community')}

)} {config['PublicWebSite.Tour'] && appStore.coworkingDashboard && (

{t('Take a tour')}

)} {resources.length > 0 && (

{t('Bookings')}

)}

{checkoutStore.basket.length > 0 && ( {checkoutStore.basket.length} )}
{t('Sign in')} {t('Take a Tour')}

{/* END HEADER - Loged Out */} )} {bottomContent && ( {impersonationTokens && } {customerIsInactive && } {showDiscounts && } {!customerIsInactive && !impersonationTokens && !showDiscounts && <>{isAdmin && }} )}

); } } export default MainHeader;

Get in touch with us

Contact details