diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx index ffa7077aaf..b2c8933dad 100644 --- a/packages/features/bookings/components/VerifyCodeDialog.tsx +++ b/packages/features/bookings/components/VerifyCodeDialog.tsx @@ -4,16 +4,7 @@ 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 = ({ @@ -31,7 +22,6 @@ export const VerifyCodeDialog = ({ }) => { const { t } = useLocale(); // 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(""); @@ -39,16 +29,40 @@ export const VerifyCodeDialog = ({ acceptedCharacters: /^[0-9]$/, length: 6, value, - onChange, + onChange: (newValue) => { + onChange(newValue); + + // Check if all digits are filled and trigger verification if they are + if (newValue.replace(/\D/g, "").length === 6) { + handleVerification(newValue); // Call the verification function + } + }, }); + const handleVerification = (value: number) => { + setError(""); + if (value === "") { + setError("The code is a required field"); + } else { + if (isUserSessionRequiredToVerify) { + verifyCodeMutationUserSessionRequired.mutate({ + code: value, + email, + }); + } else { + verifyCodeMutationUserSessionNotRequired.mutate({ + code: value, + email, + }); + } + } + }; + const verifyCodeMutationUserSessionRequired = trpc.viewer.organizations.verifyCode.useMutation({ onSuccess: (data) => { - setIsLoading(false); onSuccess(data); }, onError: (err) => { - setIsLoading(false); if (err.message === "invalid_code") { setError(t("code_provided_invalid")); } @@ -57,11 +71,9 @@ export const VerifyCodeDialog = ({ const verifyCodeMutationUserSessionNotRequired = trpc.viewer.auth.verifyCodeUnAuthenticated.useMutation({ onSuccess: (data) => { - setIsLoading(false); onSuccess(data); }, onError: (err) => { - setIsLoading(false); if (err.message === "invalid_code") { setError(t("code_provided_invalid")); } @@ -110,30 +122,6 @@ export const VerifyCodeDialog = ({ )} -