import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; import _ from 'lodash'; import moment from 'moment'; import Link from 'next/link'; import { withRouter } from 'next/router'; import { routes } from 'env/routes'; import { withTranslation } from 'react-i18next'; import { getColorForResource } from 'ui/_pages/bookings/calendar/ResourceColorHelper'; import { linkTo } from 'env/utils/strings'; import withCustomComponent from 'ui/components/withCustomComponent'; import ActiveLink from 'ui/components/ActiveLink'; import DateInputField from 'ui/components/forms/DateInputField'; import LoadingSpinner from 'ui/components/LoadingSpinner'; import { bookingsFeatures } from 'env/bookingsResources'; import { TimeInputField } from 'ui/components/forms/TimeInputField'; @withCustomComponent('BookingHeader') @withTranslation() @withRouter @inject('appStore', 'bookingsStore', 'floorPlanStore', 'checkoutStore') @observer class BookingHeader extends Component { constructor(props) { super(props); this.state = { filtersExpanded: false, availabilityExpanded: false, allocation: props.router?.query?.allocation ?? '', }; } handleSearchBySelectChange = (e) => { // Room features are queried as "proyector=true&catering=true"... // Resource and types are queried as type=123456&group=Rooms... //TODO: consider the option to filter by multiple features as in the app. const { router, t } = this.props; const href = e.target.name == 'feature' ? linkTo( router, bookingsFeatures(t).reduce((acc, cur) => { acc[cur.key] = cur.key == e.target.value && e.target.value ? 'true' : null; return acc; }, {}) ) : linkTo(router, { [e.target.name]: e.target.value, }); e.preventDefault(); router.push(href); }; filtersToggle = (e) => { this.setState({ filtersExpanded: !this.state.filtersExpanded, }); }; availabilityToggle = (e) => { this.setState({ availabilityExpanded: !this.state.availabilityExpanded, }); }; render() { const { t, componentName, router, appStore, bookingsStore, floorPlanStore, doSearch, selectShift, selectDates, shifts, isLoadingItems, shiftId, fromTime, toTime, hideResourceFilters = false, checkoutStore, } = this.props; const { configuration } = appStore; const { basket } = checkoutStore; const { resourceGroups, resourceTypes, resourceSearch } = bookingsStore; const { floorPlans } = floorPlanStore; const resources = resourceSearch.Resources; const showAvailability = router.pathname === routes.calendar ? false : true; const updateByShift = (shiftId) => { selectShift(shiftId); doSearch(); }; const updateDates = (name, value) => { //If we are moving the fromTime, shift the toTime by the same amount. var updateObj = {}; if (name == 'fromTime') { var diff = moment(value).diff(fromTime, 'minutes'); updateObj.toTime = moment(toTime).add(diff, 'minutes').toDate(); } updateObj[name] = value; selectDates(updateObj); doSearch(); }; const hasShifts = shifts ? shifts.length > 0 : false; const dateToday = new Date(); const minHour = moment(fromTime).isSame(dateToday, 'day') ? moment(dateToday).minute() > 30 ? moment(dateToday).set('minutes', 60).toDate() : moment(dateToday).set('minutes', 30).toDate() : moment(dateToday).startOf('day').toDate(); const featuresToShow = bookingsFeatures(t) // Show only features that at least has one resource in them. .filter((feature) => resources.find((r) => r[feature.key]) != null); return (

Book a hot desk

{t('Available resources')}

{t('Card view')} {t('Calendar view')} {floorPlans.length > 0 && ( {t('Floor plan view')} )} {t('Map')}

{!hideResourceFilters && (

{t('Resource:')}
{t('Type:')}
{t('Capacity:')}
{t('Features:')}

)}

{t('Timeslot:')}
{basket.length > 0 && ( )}

); } } export default BookingHeader;

Get in touch with us

Contact details