diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 64766efaea..d6467e47ac 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/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} + > ); }; diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx index 15e1c15cb7..6d29abf757 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx +++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx @@ -27,6 +27,7 @@ type BookEventFormProps = { renderConfirmNotVerifyEmailButtonCond: boolean; extraOptions: Record; isPlatform?: boolean; + isVerificationCodeSending: boolean; }; export const BookEventForm = ({ @@ -41,6 +42,7 @@ export const BookEventForm = ({ bookingForm, children, extraOptions, + isVerificationCodeSending, isPlatform = false, }: Omit & { eventQuery: { @@ -154,7 +156,11 @@ export const BookEventForm = ({ diff --git a/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts b/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts index 8887335193..5358d45d96 100644 --- a/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts +++ b/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, }; }; diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx index 254bd9bad4..4736d5003d 100644 --- a/packages/features/bookings/components/VerifyCodeDialog.tsx +++ b/packages/features/bookings/components/VerifyCodeDialog.tsx @@ -88,10 +88,9 @@ export const VerifyCodeDialog = ({ return ( { + onOpenChange={() => { setValue(""); resetErrors(); - setIsOpenDialog(open); }}> @@ -122,7 +121,7 @@ export const VerifyCodeDialog = ({ )} - + setIsOpenDialog(false)} /> {t("submit")}