/* eslint-disable jsx-a11y/anchor-is-valid */ import React, { Component } from 'react'; import { withTranslation } from 'react-i18next'; import moment from 'moment'; import _ from 'lodash'; import { inject, observer } from 'mobx-react'; import { LocalizedPrice } from 'env/utils/NumbersLocalization'; import withCustomComponent from 'ui/components/withCustomComponent'; import { bookingsFeatures } from 'env/bookingsResources'; import { ResourceAvailableSlots } from 'ui/_pages/bookings/resources/ResourceAvailableSlots'; import BookingDateTimeForm from 'ui/_pages/bookings/details/BookingDateTimeForm'; import BookingServicesForm from 'ui/_pages/bookings/details/BookingServicesForm'; import Accordion from 'ui/components/Accordion'; @withCustomComponent('BookingResourceInfo') @withTranslation() @inject('appStore', 'bookingsStore') @observer class BookingResourceInfo extends Component { componentDidMount() { const { bookingsStore } = this.props; if (!bookingsStore.hasLoadedResources) bookingsStore.loadResources(); this.initToolTips(); } initToolTips = () => { const $ = window.$; if ($('[data-toggle="available-tooltip"]').length > 0) { $('[data-toggle="available-tooltip"]').tooltip({ html: true, }); } }; updateBooking = this.props.updateBooking; getCurrentBooking = () => { const { bookingsStore } = this.props; const { booking } = bookingsStore; return booking; }; getResource() { const { bookingsStore } = this.props; const { booking, networkResources } = bookingsStore; return ( booking && _(networkResources) .filter((r) => r.Id === booking.ResourceId) .first() ); } loadBookingPrice = () => { const { bookingsStore } = this.props; bookingsStore.loadBookingPrice(); }; selectDates = (selectingDate, date) => { const booking = this.getCurrentBooking(); let dates = {}; dates[selectingDate] = moment(date).toDate(); if (selectingDate == 'fromTime') { if (moment(date) >= moment(booking.ToTime)) { // the date will always be at most midnight of the next day or earlier const smallestDate = moment.min( moment(date).endOf('day'), moment(date).add(60, 'minutes') ); dates.toTime = smallestDate.toDate(); } } if (selectingDate == 'toTime') { if (moment(date) <= moment(booking.FromTime)) { // the date will always be at least midnight of the same day or later const greatestDate = moment.max( moment(date).startOf('day'), moment(date).add(-60, 'minutes') ); dates.fromTime = greatestDate.toDate(); } } if (dates.fromTime) this.updateBooking('FromTime', dates.fromTime); if (dates.toTime) this.updateBooking('ToTime', dates.toTime); }; render() { const { t, componentName, isSidePopup } = this.props; const { bookingsStore, appStore } = this.props; const { booking, resources } = bookingsStore; const { business, configuration } = appStore; const resource = this.getResource(); const bookingsFeaturesObjectArray = resource != undefined ? bookingsFeatures(t) .map((feature, i) => { if (resource[feature.key] == true) return feature; }) .filter((f) => f != undefined) : null; if (!resource || resource == undefined) return ( {t('Please select resource to continue booking.')} ); if (!booking.ResourceId) return <>; // will show only if time is between today at midnight and tomorrow at midnight const shouldShowSlots = moment(booking.ToTime).isSameOrBefore( moment(booking.FromTime).startOf('day').add(1, 'days') ); return (

{/* {booking.ResourceName && booking.DeskName && (

{booking.DeskName}

)} */}

{resource && (

{'x'} {resource.Allocation}
{resource.ResourceTypeName}
{resource.GroupName}

{isSidePopup && ( this.updateBooking(prop, value)} withBorder isSidePopup /> )}

)} {isSidePopup && ( this.loadBookingPrice()} isSidePopup /> )} {isSidePopup ? ( <>

{bookingsFeaturesObjectArray.length > 0 && ( <>

{feature.name}

)} ) : ( <>

{bookingsFeaturesObjectArray.length > 0 && ( <>

{t('Features')}

{feature.name}

)} )}

); } } export default BookingResourceInfo;

Plan