fix: Button re-enables on sluggish networks whilst redirecting (#13106)

* fix: Button re-enables on sluggish networks whilst re-direct is happening

* Add explanatory comment

* fix: Booking form validation can take a while

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Alex van Andel 2024-01-09 11:32:25 +00:00 committed by GitHub
parent 6dbf372ab0
commit c34c27fc0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -200,7 +200,7 @@ export const BookEventFormChild = ({
const { uid, paymentUid } = responseData;
const fullName = getFullName(bookingForm.getValues("responses.name"));
if (paymentUid) {
return router.push(
router.push(
createPaymentLink({
paymentUid,
date: timeslot,
@ -225,7 +225,7 @@ export const BookEventFormChild = ({
isRescheduling && bookingData?.startTime ? dayjs(bookingData.startTime).toString() : undefined,
};
return bookingSuccessRedirect({
bookingSuccessRedirect({
successRedirectUrl: eventType?.successRedirectUrl || "",
query,
booking: responseData,
@ -272,7 +272,7 @@ export const BookEventFormChild = ({
isRescheduling && bookingData?.startTime ? dayjs(bookingData.startTime).toString() : undefined,
};
return bookingSuccessRedirect({
bookingSuccessRedirect({
successRedirectUrl: eventType?.successRedirectUrl || "",
query,
booking,
@ -325,10 +325,6 @@ export const BookEventFormChild = ({
);
const bookEvent = (values: BookingFormValues) => {
// Clears form values stored in store, so old values won't stick around.
setFormValues({});
bookingForm.clearErrors();
// It shouldn't be possible that this method is fired without having eventQuery data,
// but since in theory (looking at the types) it is possible, we still handle that case.
if (!eventQuery?.data) {
@ -375,6 +371,9 @@ export const BookEventFormChild = ({
} else {
createBookingMutation.mutate(mapBookingToMutationInput(bookingInput));
}
// Clears form values stored in store, so old values won't stick around.
setFormValues({});
bookingForm.clearErrors();
};
if (!eventType) {
@ -442,7 +441,14 @@ export const BookEventFormChild = ({
<Button
type="submit"
color="primary"
loading={createBookingMutation.isLoading || createRecurringBookingMutation.isLoading}
loading={
bookingForm.formState.isSubmitting ||
createBookingMutation.isLoading ||
createRecurringBookingMutation.isLoading ||
// A redirect is triggered on mutation success, so keep the button disabled as this is happening.
createBookingMutation.isSuccess ||
createRecurringBookingMutation.isSuccess
}
data-testid={
rescheduleUid && bookingData ? "confirm-reschedule-button" : "confirm-book-button"
}>