From c34c27fc0a08f32ae106bd16d7eb0931ff981727 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 9 Jan 2024 11:32:25 +0000
Subject: [PATCH] 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>
---
 .../BookEventForm/BookEventForm.tsx           | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
index 0ce4dfbd65..18371c74ed 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -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"
                 }>