import React, { useEffect } from 'react'; import { inject, observer } from 'mobx-react'; import { useTranslation } from 'react-i18next'; import Link from 'next/link'; import { routes } from 'env/routes'; import PageContainer from 'ui/layouts/PageContainer'; import DefaultLayout from 'ui/layouts/DefaultLayout'; import { PriceTaxStatus } from 'ui/components/PriceTaxStatus'; import { CheckoutButton } from 'ui/_pages/checkout/CheckoutButton'; import withCustomComponent from 'ui/components/withCustomComponent'; import { CheckoutZeroCase } from 'ui/_pages/checkout/CheckoutZeroCase'; import { BasketItemFactory } from 'ui/_pages/checkout/basketItemFactory'; import { CheckoutTotalPrice } from 'ui/_pages/checkout/CheckoutTotalPrice'; import { BookingDetails } from 'ui/_pages/bookings/calendar/BookingDetails'; import { CheckoutClearButton } from 'ui/_pages/checkout/CheckoutClearButton'; import { DiscountInfoSection } from 'ui/_pages/checkout/DiscountInfoSection'; import { CheckoutDiscountSection } from 'ui/_pages/checkout/CheckoutDiscountSection'; const Checkout = withCustomComponent('Checkout')( inject( 'appStore', 'authStore', 'checkoutStore', )( observer(({ appStore, authStore, checkoutStore, componentName }) => { const { t } = useTranslation(); const { business, canCreateCustomerAccount } = appStore; const { isLoggedIn } = authStore; const { basket, invoicePreview } = checkoutStore; const isCorporateDashboard = appStore.corporateDashboard; const hasTeam = authStore.customer?.TeamNames?.length > 0; const someoneElsePays = hasTeam && basket.find( (x) => authStore.payingMember == null && x.data?.CoworkerId && x.data?.CoworkerId != authStore.customer?.Id, ); useEffect(() => { if (authStore.isLoggedIn && !checkoutStore.isLoadingInvoicePreview) { checkoutStore.loadInvoicePreview().catch((err) => { appStore.setPopMessage( t('Sorry, this page could not be loaded. {{err}}', { err }), ); }); } if (!authStore.hasLoadedPayingMember) { authStore.loadPayingMember(); } }, []); return (

{basket.length > 0 ? appStore.corporateDashboard ? t('Summary') : t('Basket') : appStore.corporateDashboard ? t('Summary') : t('Your basket is empty')}

{basket.length == 0 && } {basket.length > 0 && (

{basket .filter((item) => !item?.data.Hidden) .map((item, i) => ( ))} {!isCorporateDashboard && invoicePreview && invoicePreview.Lines && } {basket.length > 0 && }

{!isCorporateDashboard && ( <> {isLoggedIn && } {someoneElsePays && (

{t( 'Since your team uses individual billing, when you book on behalf of a team member, they will be issued an invoice.', )}

)} )} {isLoggedIn && ( )} {!isLoggedIn && ( <> {canCreateCustomerAccount && ( )} )}

)} ); }), ), ); export default Checkout;

Meeting Rooms and Resources