fix: toast message is not visble and some refactor (#15649)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

packages/features/bookings/Booker/Booker.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence, LazyMotion, m } from "framer-motion";
 import dynamic from "next/dynamic";
 import { useEffect, useMemo, useRef } from "react";
+import { Toaster } from "react-hot-toast";
 import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
 
@@ -123,6 +124,7 @@ const BookerComponent = ({
     setEmailVerificationModalVisible,
     handleVerifyEmail,
     renderConfirmNotVerifyEmailButtonCond,
+    isVerificationCodeSending,
   } = verifyEmail;
 
   const {
@@ -171,6 +173,7 @@ const BookerComponent = ({
         eventQuery={event}
         extraOptions={extraOptions}
         rescheduleUid={rescheduleUid}
+        isVerificationCodeSending={isVerificationCodeSending}
         isPlatform={isPlatform}>
         <>
           {verifyCode ? (
@@ -469,6 +472,7 @@ const BookerComponent = ({
         visible={bookerState === "booking" && shouldShowFormInDialog}>
         {EventBooker}
       </BookFormAsModal>
+      <Toaster position="bottom-right" />
     </>
   );
 };

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -27,6 +27,7 @@ type BookEventFormProps = {
   renderConfirmNotVerifyEmailButtonCond: boolean;
   extraOptions: Record<string, string | string[]>;
   isPlatform?: boolean;
+  isVerificationCodeSending: boolean;
 };
 
 export const BookEventForm = ({
@@ -41,6 +42,7 @@ export const BookEventForm = ({
   bookingForm,
   children,
   extraOptions,
+  isVerificationCodeSending,
   isPlatform = false,
 }: Omit<BookEventFormProps, "event"> & {
   eventQuery: {
@@ -154,7 +156,11 @@ export const BookEventForm = ({
               <Button
                 type="submit"
                 color="primary"
-                loading={loadingStates.creatingBooking || loadingStates.creatingRecurringBooking}
+                loading={
+                  loadingStates.creatingBooking ||
+                  loadingStates.creatingRecurringBooking ||
+                  isVerificationCodeSending
+                }
                 data-testid={
                   rescheduleUid && bookingData ? "confirm-reschedule-button" : "confirm-book-button"
                 }>

packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts

@@ -28,10 +28,11 @@ export const useVerifyEmail = ({
 
   const { t } = useLocale();
   const sendEmailVerificationByCodeMutation = trpc.viewer.auth.sendVerifyEmailCode.useMutation({
-    onSuccess() {
+    onSuccess: () => {
+      setEmailVerificationModalVisible(true);
       showToast(t("email_sent"), "success");
     },
-    onError() {
+    onError: () => {
       showToast(t("email_not_sent"), "error");
     },
   });
@@ -54,9 +55,10 @@ export const useVerifyEmail = ({
       email,
       username: typeof name === "string" ? name : name?.firstName,
     });
-    setEmailVerificationModalVisible(true);
   };
 
+  const isVerificationCodeSending = sendEmailVerificationByCodeMutation.isPending;
+
   const renderConfirmNotVerifyEmailButtonCond =
     (!requiresBookerEmailVerification && !isEmailVerificationRequired) ||
     (email && verifiedEmail && verifiedEmail === email);
@@ -67,5 +69,6 @@ export const useVerifyEmail = ({
     setEmailVerificationModalVisible,
     setVerifiedEmail,
     renderConfirmNotVerifyEmailButtonCond: Boolean(renderConfirmNotVerifyEmailButtonCond),
+    isVerificationCodeSending,
   };
 };

packages/features/bookings/components/VerifyCodeDialog.tsx

@@ -88,10 +88,9 @@ export const VerifyCodeDialog = ({
   return (
     <Dialog
       open={isOpenDialog}
-      onOpenChange={(open) => {
+      onOpenChange={() => {
         setValue("");
         resetErrors();
-        setIsOpenDialog(open);
       }}>
       <DialogContent className="sm:max-w-md">
         <div className="flex flex-row">
@@ -122,7 +121,7 @@ export const VerifyCodeDialog = ({
               </div>
             )}
             <DialogFooter>
-              <DialogClose />
+              <DialogClose onClick={() => setIsOpenDialog(false)} />
               <Button type="submit" onClick={verifyCode} loading={isPending}>
                 {t("submit")}
               </Button>