chore: auto verify OTP whenever user enters 6 digits OTP instead of waiting for them to click on verify button (#12326)

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 = ({
     <Dialog
       open={isOpenDialog}
       onOpenChange={(open) => {
-        onChange("");
+        setValue("");
         setError("");
         setIsOpenDialog(open);
       }}>
@@ -110,30 +136,6 @@ export const VerifyCodeDialog = ({
             )}
             <DialogFooter>
               <DialogClose />
-              <Button
-                loading={isLoading}
-                disabled={isLoading}
-                onClick={() => {
-                  setError("");
-                  if (value === "") {
-                    setError("The code is a required field");
-                  } else {
-                    setIsLoading(true);
-                    if (isUserSessionRequiredToVerify) {
-                      verifyCodeMutationUserSessionRequired.mutate({
-                        code: value,
-                        email,
-                      });
-                    } else {
-                      verifyCodeMutationUserSessionNotRequired.mutate({
-                        code: value,
-                        email,
-                      });
-                    }
-                  }
-                }}>
-                {t("verify")}
-              </Button>
             </DialogFooter>
           </div>
         </div>