/* eslint-disable jsx-a11y/anchor-is-valid */ import React, { Component } from 'react'; import { withTranslation } from 'react-i18next'; import { inject, observer } from 'mobx-react'; import { withRouter } from 'next/router'; import { action } from 'mobx'; import moment from 'moment'; import { routes } from 'env/routes'; import { isWeekend } from 'env/utils/dateUtil'; import LoadingSpinner from 'ui/components/LoadingSpinner'; import { LocalizedPrice } from 'env/utils/NumbersLocalization'; import withCustomComponent from 'ui/components/withCustomComponent'; import { addSplitBookingToBasket, addToBasket, getResource, } from 'ui/_pages/bookings/details/BasketBookingHelper'; @withRouter @withCustomComponent('BookingFormToolBar') @withTranslation() @inject('appStore', 'authStore', 'bookingsStore', 'checkoutStore') @observer class BookingFormToolBar extends Component { constructor(props) { super(props); this.state = {}; this.updateBooking = this.props.updateBooking; this.showBookingModal = this.props.showBookingModal; this.hideBookingModal = this.props.hideBookingModal; } getResource(booking) { const { bookingsStore } = this.props; return getResource({ booking, bookingsStore }); } addSplitBookingToBasket = async (fromTime, toTime) => { const { t, appStore, authStore, bookingsStore, checkoutStore } = this.props; const { customer } = authStore; await addSplitBookingToBasket({ t, appStore, bookingsStore, checkoutStore, fromTime, toTime, customer, }); this.hideBookingModal(); this.props.close(); }; addToBasket = async ({ goToBasket = true }) => { const { t, router, appStore, bookingsStore, authStore, checkoutStore } = this.props; const { customer } = authStore; this.hideBookingModal(); await addToBasket({ t, appStore, bookingsStore, checkoutStore, customer, router, goToBasket, }); this.props.close(); }; addWeekToBasket = async ({ goToBasket = true }) => { const { router, bookingsStore, authStore, checkoutStore } = this.props; const { isLoadingBookingPrice, resourceProducts, bookingPrice, booking } = bookingsStore; if (goToBasket) router.push(routes.checkout); const { customer } = authStore; if (isLoadingBookingPrice) return; await this.addSplitBookingToBasket( booking.FromTime, moment(booking.ToTime).clone().day(5).toDate() ); //this.hideBookingModal(); //bookingsStore.closeNewBooking(); //this.props.close(); }; refreshFullCalendar() { var fc = window.getFullCalendarRef && window.getFullCalendarRef(); if (fc) { let calendarApi = fc.current.getApi(); calendarApi.refetchEvents(); } } saveBooking = async () => { const { t, appStore, router, bookingsStore, authStore, checkoutStore } = this.props; const { isLoadingBookingPrice, bookingPrice, booking, resourceProducts } = bookingsStore; const { customer } = authStore; const { configuration } = appStore; const cancelUnpaidMembers = configuration['Bookings.CancelUnPaidBookingsForSubscribers']; const cancelUnpaidContacts = configuration['Bookings.CancelUnPaidBookingsForNonSubscribers']; const isMember = customer.IsMember; if (isLoadingBookingPrice) return; //New booking if (!(booking?.Id > 0)) { return this.addToBasket({ goToBasket: true }); } //Existing booking bookingsStore .saveBooking() .then((result) => { bookingsStore.loadUpcomingBookings().catch(() => { //swallow exceptions in this case. }); this.hideBookingModal(); appStore.setPopMessage(result.Message).then(() => { if (result.Status !== 200) this.showBookingModal(); else { this.props.close(); if ( (isMember && cancelUnpaidMembers) || (!isMember && cancelUnpaidContacts) ) { router.push(routes.invoices); } } }); }) .then(() => { this.refreshFullCalendar(); }) .catch(() => { this.hideBookingModal(); appStore .setPopMessage( t('Could not save this booking. Please try again later.') ) .then(this.showBookingModal); }); }; async getCancellationMessage(currentBooking) { const { appStore, bookingsStore } = this.props; await bookingsStore.loadBookingCancellationFeeDetails(currentBooking.Id); if (bookingsStore.cancellationDetails.hasCancellationFee) { return t( `A cancellation fee of ${LocalizedPrice({ currency: appStore.business.Currency.Code, amount: bookingsStore.cancellationDetails.cancellationFee, })} will apply when cancelling this booking. Do you want to continue?` ); } return t('Would you like to cancel this booking?'); } getCurrentBooking = () => { const { bookingsStore } = this.props; const { booking } = bookingsStore; return booking; }; @action async deleteBooking() { const { t, appStore, bookingsStore } = this.props; const booking = this.getCurrentBooking(); this.hideBookingModal(); const cancellationMessage = await this.getCancellationMessage(booking); appStore.setYesNotQuestion(cancellationMessage).then((response) => { if (response) { bookingsStore .deleteBooking(booking.Id) .then((result) => { if (result?.Status == 500) appStore.setPopMessage( result.Message ? t(result.Message) : t('Please contact this space to change this booking.') ); }) .then(() => bookingsStore.loadUpcomingBookings()) .then(() => { this.refreshFullCalendar(); }) .then(() => this.props.close()) .catch(() => { this.hideBookingModal(); appStore .setPopMessage( t('Could not cancel this booking. Please try again later.') ) .then(this.showBookingModal); }); } else { this.showBookingModal(); } }); } render() { const { t, componentName, appStore, authStore, bookingsStore } = this.props; const { isSavingBookingToCreate, isSavingBookingToUpdate, isLoadingBookingPrice, bookingPrice, booking, } = bookingsStore; const { isLoggedIn, customer } = authStore; const { configuration } = appStore; const isSavingBooking = isSavingBookingToCreate || isSavingBookingToUpdate; const isCorporateDashboard = appStore.corporateDashboard; const bookingCanBeMade = bookingPrice && bookingPrice.IsAvailable && !bookingPrice.Message; const disableButtons = !bookingCanBeMade || isLoadingBookingPrice || isSavingBooking; const resource = this.getResource(booking); const addToBasketButton = ( ); //TW EDIT const addToWeekBasketButton = ( ); if (!booking) return <>; return (

{!isCorporateDashboard && ( <> {isLoggedIn && !booking.Id > 0 && configuration['Bookings.RequestDrafts'] && (

!disableButtons && this.updateBooking('Tentative', ev.target.checked) } /> {t( 'I am not ready to book, send me a proposal with the details of this booking instead.' )}

)} )}

{resource && isLoggedIn && !booking.inBasket && ( )} {(!isLoggedIn || booking.inBasket) && <>{addToBasketButton}{addToWeekBasketButton}} { ev.preventDefault(); this.props.close(); }} href="#" className="btn btn-outline d-flex w-100 mt-8 close-booking-button" > {t('Close')} {isLoggedIn && booking.Id == 0 && <>{addToBasketButton}{addToWeekBasketButton}} {!booking.inBasket && booking.Id > 0 && ( )}

); } } export default BookingFormToolBar;

Get in touch with us

Contact details