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 LoadingSpinner from 'ui/components/LoadingSpinner'; import { getErrorDescription } from 'ui/_pages/bookings/BookingErrorCodes'; import global from 'global'; export const CheckoutButton = ( inject( 'appStore', 'bookingsStore', 'checkoutStore' )( withRouter( observer( ({ componentName, completeUrl, router, returnUrl, checkoutStore, appStore, bookingsStore, onlyPostItems, proposalId, }) => { const { t } = useTranslation(); const { invoicePreview, isLoadingInvoicePreview, isLoadingBasketInvoice, } = checkoutStore; const { corporateDashboard } = appStore; const createInvoice = () => { (onlyPostItems ? checkoutStore.loadPostItems({ addNewContracts: proposalId != null, proposalId, }) : checkoutStore.loadBasketInvoice({ addNewContracts: proposalId != null, proposalId, }) ) .then((invoice) => { if (invoice?.WasSuccessful === false) { appStore.setPopMessage(t(invoice.Message)); } else if (!invoice) { checkoutStore.clearBasket(); router.push( returnUrl ?? completeUrl ?? routes.signup_complete ); return; } if (invoice.Message) { appStore.setPopMessage( t( 'Sorry, we could not process this transaction. Check the items in your basket are still available.' ) + '. ' + invoice.Message ); } else { checkoutStore.clearBasket(); bookingsStore.loadUnpaidBookings(); router.push( returnUrl ?? completeUrl ?? routes.signup_complete ); } }) .catch((err) => { appStore.setPopMessage( t('Sorry, we could not process this transaction.') ); }); }; const hasError = invoicePreview && invoicePreview.Message; const isLoading = isLoadingInvoicePreview || isLoadingBasketInvoice; return (

{hasError && (

{getErrorDescription(invoicePreview.Message, '', global.t)}

)} {!hasError && (

)}

); } ) ) ) );