import React from 'react'; import Link from 'next/link'; import { routes } from 'env/routes'; import { useTranslation } from 'react-i18next'; import { withRouter } from 'next/router'; import { inject, observer } from 'mobx-react'; import withCustomComponent from 'ui/components/withCustomComponent'; import moment from 'moment'; import ResponsiveTable from 'ui/components/tables/ResponsiveTable'; import { LocalizedPrice } from 'env/utils/NumbersLocalization'; export const MyBookingsTable = withCustomComponent('MyBookingsTable')( inject( 'appStore', 'bookingsStore' )( withRouter( observer(({ router, appStore, bookingsStore, componentName }) => { const { t } = useTranslation(); const { upcomingBookings } = bookingsStore; const { business } = appStore; const newBooking = () => { bookingsStore.newBooking({}); }; const highlightColor = 'green'; const isCorporateDashboard = appStore.corporateDashboard; return (

{t('My bookings')}

{t( 'This list shows bookings in the coming 90 days. Use the calendar to see all your bookings' )}

{upcomingBookings.length === 0 && (

{t(`You've got no bookings.`)}

{t( 'You can make a booking by checking available resources. These are some links you may find useful:' )}

{t('Make a Booking')}

)} {upcomingBookings.length > 0 && ( <> {t('Resource')} {t('Date')} {t('Hours')} {!isCorporateDashboard && {t('Amount')}} {upcomingBookings.map((booking, i) => (

{booking.Resource.Name} {booking.FloorPlanDeskId && booking.Resource.Name != booking.FloorPlanDeskName && ( <> {' '} {booking.FloorPlanDeskName} )}

{/* BB-TODO : Update API to return ResourceProducts */} {booking.ResourceProducts && booking.ResourceProducts.length > 0 && (

{booking.ResourceProducts.filter( (p) => p.Quantity > 0 ).map((product, i) => ( {product.Quantity} {'x '} {product.ProductName} ))}

)}

{moment(booking.FromTime).format('LL')} {booking.Tentative && ( {t('This booking has not been confirmed yet.')} )} {moment(booking.FromTime).format('LT')} -{' '} {moment(booking.ToTime).format('LT')} {!isCorporateDashboard && ( {(booking.CoworkerExtraServicePrice != null && booking.Invoiced) && ( )} {(!booking.Invoiced || booking.CoworkerExtraServicePrice == null) && '—'} )} {t('Change')} ))} {/* {% endfor %} */}

{/* {t('Make a booking')} */} {t('My bookings calendar')}

)}

); }) ) ) );

Get in touch with us

Contact details