import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import _ from 'lodash'; import { action } from 'mobx'; import withCustomComponent from 'ui/components/withCustomComponent'; import ProductsHeader from 'ui/_pages/store/ProductsHeader'; @withCustomComponent('BookingServicesForm') @withTranslation() @inject('appStore', 'bookingsStore') @observer class BookingServicesForm extends Component { componentDidMount() { const { bookingsStore } = this.props; if (!bookingsStore.hasLoadedResources) bookingsStore.loadResources(); } loadBookingPrice = this.props.loadBookingPrice; @action updateProduct = (product, quantity) => { product.Quantity = quantity; product.Selected = quantity == 1; this.loadBookingPrice(); }; render() { const { t, componentName, appStore, bookingsStore, isSidePopup } = this.props; const { resourceProducts } = bookingsStore; if (resourceProducts.length <= 0) return <>; const isCorporateDashboard = appStore.corporateDashboard; return (

{t('Additional Services')}

{resourceProducts.map((p, i) => !p.RequestQuantity ? (

0} /> { this.updateProduct(p, p.Quantity === 0 ? 1 : 0); }} > {p.ProductName}

{!isCorporateDashboard && <>{p.FormattedPrice}}

) : ( ) )} {isSidePopup &&

}

); } } export default BookingServicesForm; const NumberInput = ({ product, quantity, i, isCorporateDashboard, isSidePopup, updateProduct, }) => { if (isSidePopup) { return (

{ updateProduct(product, parseInt(ev.target.value)); }} value={quantity} /> {product.ProductName}

{!isCorporateDashboard && <>{product.FormattedPrice}}

); } else { return (

{product.ProductName}

{!isCorporateDashboard && <>{product.FormattedPrice}}

); } };

Meeting Rooms and Resources