import React, { useState, useEffect } from 'react'; import { inject, observer } from 'mobx-react'; import { useTranslation } from 'react-i18next'; import { withRouter } from 'next/router'; import { withCheckTerms } from 'env/withCheckTerms'; import usePrevious from 'env/usePrevious'; import withCustomComponent from 'ui/components/withCustomComponent'; import DefaultLayout from 'ui/layouts/DefaultLayout'; import LoadingSpinner from 'ui/components/LoadingSpinner'; import Link from 'next/link'; import { routes } from 'env/routes'; import { NoAccessNotice } from 'ui/components/NoAccessNotice'; import { CardBookingsAvailable } from 'ui/components/cards/CardBookingsAvailable'; import { BookingDetails } from 'ui/_pages/bookings/calendar/BookingDetails'; import { action } from 'mobx'; import moment from 'moment'; const CustomHomePageResourceList = withCustomComponent('ResourcesPage')( withCheckTerms( inject( 'appStore', 'bookingsStore' )( withRouter( observer(({ appStore, bookingsStore, router, componentName }) => { const [error, setError] = useState(null); const [showAvailability, setShowAvailability] = useState(false); const prevQuery = usePrevious(router.query); const { t } = useTranslation(); const { business } = appStore; const { resourceSearch, isLoadingResourceSearch } = bookingsStore; useEffect(() => { const { resource_id, desk_id } = router.query; bookingsStore .loadResources() .then(() => { if (resource_id) { bookingsStore.newBooking({ resourceId: resource_id ? parseInt(resource_id) : null, floorPlanDeskId: desk_id ? parseInt(desk_id) : null, }); } }) .catch(() => null); // Check if there are any passed in parameters if (router.query.date) { action(() => { bookingsStore.fromTime = moment(router.query.date).toDate(); bookingsStore.toTime = moment(router.query.date) .add(router.query.duration ?? 60, 'minutes') .toDate(); bookingsStore .loadResourceSearch({ ...router.query }) .catch((err) => { setError( t( 'We could not load any available resources at this time.' ) ); }); })(); setShowAvailability(true); } else if (router.query.fromTime || router.query.toTime) { if (router.query.fromTime) { action(() => { bookingsStore.fromTime = moment( router.query.fromTime ).toDate(); })(); setShowAvailability(true); bookingsStore .loadResourceSearch({ ...router.query }) .catch((err) => { setError( t( 'We could not load any available resources at this time.' ) ); }); } if (router.query.toTime) { action(() => { bookingsStore.toTime = moment(router.query.toTime).toDate(); })(); setShowAvailability(true); bookingsStore .loadResourceSearch({ ...router.query }) .catch((err) => { setError( t( 'We could not load any available resources at this time.' ) ); }); } } else { bookingsStore .loadResourceSearch({ ...router.query }) .catch((err) => { setError( t('We could not load any available resources at this time.') ); }); } }, []); useEffect(() => { const currentQuery = router.query; if (JSON.stringify(currentQuery) != JSON.stringify(prevQuery)) doSearch(); }, [router]); const doSearch = (skipShifts) => { bookingsStore .loadResourceSearch({ ...{...router.query, skipShifts}}) .catch((err) => { appStore.setPopMessage( t('Sorry, we could not load this page. {{err}}', { err }) ); }); }; const selectShift = (shiftId) => { bookingsStore.selectShift(shiftId); }; const selectDates = (dates) => { bookingsStore.selectDates(dates); }; return (

Available Rooms

{isLoadingResourceSearch && } {!isLoadingResourceSearch && resourceSearch?.Resources?.length > 0 ? (

) : ( <> {!isLoadingResourceSearch && (

{t(`No available booking resources.`)}

{t( 'Please try resource search with different search criteria. You can also try to search for available booking through:' )}

{t('Calendar view')} {t('Floor plan view')}

)} )}

); }) ) ) ) ); export default CustomHomePageResourceList;