Optimize backend query during booking process

[popod]

On the first step of the booking process, we query unavailabilities, ... for the next booking step. Each time the user change the provider or the service, some unneeded query are done to the backend. Why ?

Will it not be better to only do this queries when the user click on the "next" button in of the booking process ?

I think this will simplify the frontend javascript code too !

[alextselegidis]

Hello!

The reason is that we cannot guarantee that no one had changed the calendar between these requests, so the more often this happens the more accurate the results are (the booking page must never offer invalid slots).

But I also believe that some form of client side caching would be useful for short term e.g. 5 minutes or similar.

I will review this ticket for the 1.6 release again and see if it makes sense to proceed with the change or not.

Alex Tselegidis, Easy!Appointments Creator Need a customization? Get a free quote!

[popod]

I agree with you, we should never propose invalid slots. But a lot of requests to the backend can certainly be optimized.

For exemple: when the user go to the first booking process step (service and provider selection), dates and unavailabilities periods are query from the backend. And if the user change the service, then the provider, two others similar query are done.

We could optimize that by only doing the query regarding the slots (unavailabilities, etc.) when the user clicks on the "next" button to go to the second step of the booking process (date and time selection).

In place of 3+ queries, we ensure only one query is done for that and this changes nothing about the invalid slots problem.

[alextselegidis]

Hello!

I remember that I had already worked on that, but it can be that those optimizations were disabled after new work was introduced in the booking page.

But I also believe that this could be improved, so I will review the request handling before 1.6 one more time.

Alex Tselegidis, Easy!Appointments Creator Need a customization? Get a free quote!

[popod]

For exemple, when the provider change :

easyappointments/assets/js/pages/booking.js

Lines 342 to 357 in 95ae020

	$selectProvider.on('change', (event) => {
	const $target = $(event.target);
	const todayDateTimeObject = new Date();
	const todayDateTimeMoment = moment(todayDateTimeObject);
	App.Utils.UI.setDateTimePickerValue($selectDate, todayDateTimeObject);
	App.Http.Booking.getUnavailableDates(
	$target.val(),
	$selectService.val(),
	todayDateTimeMoment.format('YYYY-MM-DD'),
	);
	App.Pages.Booking.updateConfirmFrame();
	});

getUnavailableDates() and updateConfirmFrame() are called on each changes.

The same appears for service changes.

But I think that we can only call this functions on the $('.button-next').on('click', (event) => { ... }); event.