/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import Link from 'next/link';
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';

@withCustomComponent('Header')
@withTranslation()
@withRouter
@inject(
'contentStore',
'appStore',
'authStore',
'floorPlanStore',
'bookingsStore',
'checkoutStore'
)
@observer
class Header extends Component {
initStickyHeader = () => {
const $ = window.$;
function stickyHeader() {
if (sticky.offset().top > scrollTop) {
sticky.addClass('site-header--stuck');
$('body').addClass('header-stuck');
} else {
sticky.removeClass('site-header--stuck');
$('body').removeClass('header-stuck');
}
}
if ($(window).width() > 992 && $('.site-header').length > 0) {
var sticky = $('.site-header'),
scrollTop = sticky.height();

stickyHeader();

$(window).scroll(function () {
stickyHeader();
});
}
};

componentDidMount() {
this.initStickyHeader();
const {
bookingsStore,
appStore,
floorPlanStore,
contentStore,
} = 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);
}

render() {
const {
bookingsStore,
checkoutStore,
floorPlanStore,
t,
router,
appStore,
authStore,
contentStore,
} = this.props;
const { publicCustomPages, referralDiscounts, business } = appStore;
const { isLoggedIn, impersonationToken, customer } = authStore;
const { resourceGroups, resources } = bookingsStore;
const { faqArticles, communityPerks } = contentStore;
if (!business) return <div></div>;

const config = appStore.configuration;
const customerIsInactive = customer && customer.Id > 0 && !customer.Active;
const showDiscounts =
referralDiscounts.length > 0 && customer && !customerIsInactive;
const isAdmin = authStore.me?.CanAccessPlatform;

const basketLink = (
<li className="shopping--basket with-bubble" id={`nav-basket-menu`}>
<Link href={routes.checkout}>
<a className="btn btn--primary btn--sm">
<i className="fa fa-shopping-basket" />
{checkoutStore.basket.length > 0 && (
<span>{checkoutStore.basket.length}</span>
)}
</a>
</Link>
</li>
);
return (
<>
{appStore.showReferralModal && <ReferralModal />}
{/* HEADER */}
<header
data-component-name={this.props.componentName}
className={`site-header ${
impersonationToken || isAdmin || showDiscounts || customerIsInactive
? 'with-top-bar'
: ''
}`}
>
{impersonationToken && <ImpersonationNotice />}
{customerIsInactive && <CustomerInactiveNotice />}
{showDiscounts && <ReferralNotice />}
{!customerIsInactive &&
!impersonationToken &&
!showDiscounts &&
isAdmin && <AdminNotice />}

<nav className="navbar navbar-static-top" role="navigation">
<div className="container">
<div className="navbar-header">
{/* LOGO OR SPACE NAME */}
<Link href="/">
<a className="navbar-brand">
<img
src={`${business.NativeHomeUrlWithLanguage}/business/getlogo?w=600&h=150&mode=pad`}
alt={business.Name}
/>
</a>
</Link>
{/* END LOGO OR SPACE NAME */}

{/* COLLAPSE BUTTON */}
<button
type="button"
className="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false"
aria-controls="navbar"
>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="sr-only">{t('Toggle navigation')}</span>
</button>
{/* END COLLAPSE BUTTON */}
</div>

<div id="navbar" className="navbar-collapse collapse">
{/* MAIN NAVIGATION */}
<ul className="navbar-nav navbar-nav--main">
{
<>
{/*<li className="dropdown" id={`nav-business-menu`}>
<a
id="nav-business-menu-root"
href="#"
className="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
{business.Name} <span className="caret"></span>
</a>
<ul className="dropdown-menu" role="menu">
<li
className={
router.pathname === routes.store ? 'active' : ''
}
id={`nav-faq-menu`}
>
<Link href={routes.store}>
<a role="menuitem" tabIndex="-1">
{t('Products and Services')}
</a>
</Link>
</li>

{faqArticles.length > 0 && (
<li
className={
router.pathname === routes.faq ? 'active' : ''
}
id={`nav-faq-menu`}
>
<Link href={routes.faq}>
<a role="menuitem" tabIndex="-1">
{t('Frequent Questions')}
</a>
</Link>
</li>
)}
{communityPerks.length > 0 && (
<li
className={
router.pathname === routes.perks ? 'active' : ''
}
id={`nav-faq-menu`}
>
<Link href={routes.perks}>
<a role="menuitem" tabIndex="-1">
{t('Perks and Discounts')}
</a>
</Link>
</li>
)}

{publicCustomPages.map((page, i) => (
<li
id={`nav-custom-page-${page.Id}`}
key={i}
className={
router.pathname === routes.custom_page &&
router.query.page_name == page.Permalink
? 'active'
: ''
}
>
<Link
as={routes.custom_page(page.Permalink)}
href={routes.custom_page('[...page_slug]')}
>
<a role="menuitem" tabIndex="-1">
{t(page.Title || page.Name)}
</a>
</Link>
</li>
))}
</ul>
</li>*/}
</>
}

{(config['PublicWebSite.CommunityBoard'] ||
config['PublicWebSite.Directory'] ||
config['PublicWebSite.Blog'] ||
config['PublicWebSite.Events'] ||
config['Jitsi.AlwaysOnRooms.Enabled']) && (
<li className="dropdown" id={`nav-community-menu`}>
<a
href="#"
className="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
{t('Community')} <span className="caret"></span>
</a>
<ul className="dropdown-menu" role="menu">
{config['PublicWebSite.Directory'] && (
<li
id={`nav-directory-menu`}
className={
router.pathname === routes.directory_members ||
router.pathname === routes.directory_teams
? 'active'
: ''
}
>
<Link
href={
config['Directory.DirectoryRecords'] == 2
? routes.directory_teams
: routes.directory_members
}
>
<a role="menuitem" tabIndex="-1">
{t('Directory')}
</a>
</Link>
</li>
)}
{config['PublicWebSite.CommunityBoard'] && (
<li
id={`nav-boards-menu`}
className={
router.pathname.indexOf(routes.forum) > -1
? 'active'
: ''
}
>
<Link href={routes.forum}>
<a role="menuitem" tabIndex="-1">
{t('Discussion boards')}
</a>
</Link>
</li>
)}
{config['PublicWebSite.Events'] && (
<li
id={`nav-events-menu`}
className={
router.pathname.indexOf(routes.events) > -1
? 'active'
: ''
}
>
<Link href={routes.events}>
<a role="menuitem" tabIndex="-1">
{t('Events')}
</a>
</Link>
</li>
)}
{config['Jitsi.AlwaysOnRooms.Enabled'] && (
<li
id={`nav-virtual-rooms-menu`}
className={
router.pathname.indexOf(routes.virtual_rooms) > -1
? 'active'
: ''
}
>
<Link href={routes.virtual_rooms}>
<a role="menuitem" tabIndex="-1">
{t('Virtual Rooms')}
</a>
</Link>
</li>
)}
{config['Blog.Enabled'] && (
<li
id={`nav-blog-menu`}
className={
router.pathname.indexOf(routes.posts) > -1
? 'active'
: ''
}
>
<Link href={routes.posts}>
<a role="menuitem" tabIndex="-1">
{t('Articles')}
</a>
</Link>
</li>
)}
{/* <li>
<a href="#" role="menuitem" tabIndex="-1">
Discounts
</a>
</li> */}
</ul>
</li>
)}
{resources.length > 0 && (
<li id={`nav-bookings-menu`} className="dropdown">
<a
href="#"
className="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
{t('Bookings')} <span className="caret"></span>
</a>
<ul className="dropdown-menu" role="menu">
<li
id={`nav-calendar-menu`}
className={
router.pathname === routes.calendar ? 'active' : ''
}
role="menuitem"
tabIndex="-1"
>
<Link href={routes.calendar}>
<a>{t('Calendar')}</a>
</Link>
</li>
{floorPlanStore.items.length > 0 && (
<li
id={`nav-floorplan-menu`}
className={
router.pathname === routes.floorplan
? 'active'
: ''
}
role="menuitem"
tabIndex="-1"
>
<Link href={routes.floorplan}>
<a>{t('Floor plans')}</a>
</Link>
</li>
)}
{resourceGroups.map((resourceGroup, i) => (
<li
key={i}
id={`nav-resource-group-menu-${slugify(
resourceGroup.groupName
)}`}
className={
router.pathname === routes.resources &&
router.query.group == resourceGroup.groupName
? 'active'
: ''
}
role="menuitem"
tabIndex="-1"
>
<Link
href={{
pathname: routes.resources,
query: {
group: resourceGroup.groupName,
},
}}
>
<a>{t(resourceGroup.groupName ?? 'Resources')}</a>
</Link>
{/*{slugify(resourceGroup.groupName) === 'coworking-space' && (
<Link
href={"https://puraworkasion.spaces.nexudus.com/store/products?portal&"}
>
<a>{t(resourceGroup.groupName ?? 'Resources')}</a>
</Link>

)}
{slugify(resourceGroup.groupName) !== 'coworking-space' && (
<Link
href={{
pathname: routes.resources,
query: {
group: resourceGroup.groupName,
},
}}
>
<a>{t(resourceGroup.groupName ?? 'Resources')}</a>
</Link>
)}*/}
</li>
))}
</ul>
</li>
)}
{/* <li>
<a href="#">{t('Blog')}</a>
</li> */}
</ul>
{/* END MAIN NAVIGATION */}

{/* USER NAVIGATION */}
<ul className="navbar-nav navbar-nav--user">
{config['PublicWebSite.AboutUs'] && (
<li id={`nav-about-us-menu`}>
<Link href={routes.about}>
<a>{t('About us')}</a>
</Link>
</li>
)}
{config['PublicWebSite.Tour'] && (
<li id={`nav-tour-menu`}>
<Link href={routes.tour}>
<a>{t('Take a tour')}</a>
</Link>
</li>
)}
{config['PublicWebSite.Help'] &&
config['Members.AllowHelpMessages'] && (
<li id={`nav-help-menu`}>
<Link href={routes.support}>
<a>{t('Help')}</a>
</Link>
</li>
)}

<LocationsMenu showCurrent={false} />

{!isLoggedIn && (
<>
<li id={`nav-sign-in-menu`}>
<Link href={routes.login}>
<a>{t('Sign in')}</a>
</Link>
</li>
{basketLink}
{config['Members.CanSignup'] && (
<li id={`nav-sign-up-menu`}>
<Link href={routes.signup}>
<a className="btn btn--primary btn--sm">
{t('Become a member')}
</a>
</Link>
</li>
)}
</>
)}
{isLoggedIn && (
<>
<li id={`nav-sign-out-menu`}>
<a onClick={() => authStore.logout()} href="#">
{t('Log out')}
</a>
</li>
{basketLink}
<NotificationsMenuItem />
{config['PublicWebSite.MyAccount'] && (
<li id={`nav-my-account-menu`} className="my-account">
<Link href={routes.profile}>
<a className="btn btn--primary btn--sm">
{t('My account')}
</a>
</Link>
</li>
)}
</>
)}
</ul>
{/* END USER NAVIGATION */}
</div>
</div>
</nav>
</header>
{/* END HEADER */}
</>
);
}
}
export default Header;

Get in touch with us

Contact details