diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx index ffa7077aaf..f1550ea31f 100644 --- a/packages/features/bookings/components/VerifyCodeDialog.tsx +++ b/packages/features/bookings/components/VerifyCodeDialog.tsx @@ -1,19 +1,10 @@ import type { Dispatch, SetStateAction } from "react"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useCallback } from "react"; import useDigitInput from "react-digit-input"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { - Button, - Dialog, - DialogClose, - DialogContent, - DialogFooter, - DialogHeader, - Label, - Input, -} from "@calcom/ui"; +import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, Label, Input } from "@calcom/ui"; import { Info } from "@calcom/ui/components/icon"; export const VerifyCodeDialog = ({ @@ -33,13 +24,17 @@ export const VerifyCodeDialog = ({ // Not using the mutation isLoading flag because after verifying we submit the underlying org creation form const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); - const [value, onChange] = useState(""); + const [value, setValue] = useState(""); const digits = useDigitInput({ acceptedCharacters: /^[0-9]$/, length: 6, value, - onChange, + onChange: useCallback((value: string) => { + // whenever there's a change in the input, we reset the error value. + setError(""); + setValue(value); + }, []), }); const verifyCodeMutationUserSessionRequired = trpc.viewer.organizations.verifyCode.useMutation({ @@ -68,7 +63,38 @@ export const VerifyCodeDialog = ({ }, }); - useEffect(() => onChange(""), [isOpenDialog]); + const verifyCode = useCallback(() => { + setError(""); + setIsLoading(true); + if (isUserSessionRequiredToVerify) { + verifyCodeMutationUserSessionRequired.mutate({ + code: value, + email, + }); + } else { + verifyCodeMutationUserSessionNotRequired.mutate({ + code: value, + email, + }); + } + }, [ + email, + isUserSessionRequiredToVerify, + value, + verifyCodeMutationUserSessionNotRequired, + verifyCodeMutationUserSessionRequired, + ]); + + useEffect(() => { + // trim the input value because "react-digit-input" creates a string of the given length, + // even when some digits are missing. And finally we use regex to check if the value consists + // of 6 non-empty digits. + if (error || isLoading || !/^\d{6}$/.test(value.trim())) return; + + verifyCode(); + }, [error, isLoading, value, verifyCode]); + + useEffect(() => setValue(""), [isOpenDialog]); const digitClassName = "h-12 w-12 !text-xl text-center"; @@ -76,7 +102,7 @@ export const VerifyCodeDialog = ({ { - onChange(""); + setValue(""); setError(""); setIsOpenDialog(open); }}> @@ -110,30 +136,6 @@ export const VerifyCodeDialog = ({ )} -