fix: add verify email otp verification in signyour-self flow

2026-08-25 17:12:37 +02:00 · 2024-05-05 15:53:51 +05:30
parent 9daed4a5ed
commit c240eb133d
4 changed files with 180 additions and 229 deletions
@@ -0,0 +1,84 @@
+import React from "react";
+import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
+
+function VerifyEmail(props) {
+  return (
+    <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
+      <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
+        <div
+          style={{ backgroundColor: themeColor }}
+          className=" text-white p-[10px] rounded-t"
+        >
+          OTP verification
+        </div>
+        {props.isVerifyModal ? (
+          <form
+            onSubmit={(e) => {
+              props.setIsVerifyModal(false);
+              props.handleVerifyEmail(e);
+            }}
+          >
+            <div className="px-6 py-3">
+              <label className="mb-2">Enter OTP</label>
+              <input
+                type="tel"
+                pattern="[0-9]{4}"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                placeholder="Enter OTP sent on mail"
+                value={props.otp}
+                onChange={(e) => props.setOtp(e.target.value)}
+              />
+            </div>
+            <hr />
+            <div className="px-6 my-3">
+              <button type="submit" className={submitBtn}>
+                Verify
+              </button>
+              <button
+                className={`${rejectBtn} ml-2`}
+                onClick={(e) => props.handleReset(e)}
+              >
+                Resend
+              </button>
+            </div>
+          </form>
+        ) : props.otpLoader ? (
+          <div
+            style={{
+              height: "150px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <div
+              style={{
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        ) : (
+          <div className="p-[15px]">
+            <p>Please verify your email !</p>
+            <div className="h-[1px] bg-[#9f9f9f] w-full"></div>
+            <div className="m-[15px] ">
+              <button
+                className={submitBtn}
+                type="submit"
+                onClick={() => {
+                  props.handleVerifyBtn();
+                }}
+              >
+                Verify
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default VerifyEmail;
@@ -1,10 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import {
-  isEnableSubscription,
-  rejectBtn,
-  submitBtn,
-  themeColor
-} from "../constant/const";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
@@ -42,6 +37,7 @@ import PdfDeclineModal from "../primitives/PdfDeclineModal";
 import Title from "../components/Title";
 import DefaultSignature from "../components/pdf/DefaultSignature";
 import ModalUi from "../primitives/ModalUi";
+import VerifyEmail from "../components/pdf/VerifyEmail";

 function PdfRequestFiles() {
  const { docId } = useParams();
@@ -1243,81 +1239,16 @@ function PdfRequestFiles() {
                  bodyMssg={`This document expired on ${expiredDate} and is no longer available to sign.`}
                />
                {!isEmailVerified && (
-                  <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
-                    <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
-                      <div
-                        style={{ backgroundColor: themeColor }}
-                        className=" text-white p-[10px] rounded-t"
-                      >
-                        OTP verification
-                      </div>
-                      {isVerifyModal ? (
-                        <form
-                          onSubmit={(e) => {
-                            setIsVerifyModal(false);
-                            handleVerifyEmail(e);
-                          }}
-                        >
-                          <div className="px-6 py-3">
-                            <label className="mb-2">Enter OTP</label>
-                            <input
-                              type="tel"
-                              pattern="[0-9]{4}"
-                              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                              placeholder="Enter OTP sent on mail"
-                              value={otp}
-                              onChange={(e) => setOtp(e.target.value)}
-                            />
-                          </div>
-                          <hr />
-                          <div className="px-6 my-3">
-                            <button type="submit" className={submitBtn}>
-                              Verify
-                            </button>
-                            <button
-                              className={`${rejectBtn} ml-2`}
-                              onClick={(e) => handleReset(e)}
-                            >
-                              Resend
-                            </button>
-                          </div>
-                        </form>
-                      ) : otpLoader ? (
-                        <div
-                          style={{
-                            height: "150px",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center"
-                          }}
-                        >
-                          <div
-                            style={{
-                              fontSize: "45px",
-                              color: "#3dd3e0"
-                            }}
-                            className="loader-37"
-                          ></div>
-                        </div>
-                      ) : (
-                        <div className="p-[15px]">
-                          <p>Please verify your email !</p>
-                          <div className="h-[1px] bg-[#9f9f9f] w-full"></div>
-                          <div className="m-[15px] ">
-                            <button
-                              className={submitBtn}
-                              type="submit"
-                              onClick={() => {
-                                handleVerifyBtn();
-                              }}
-                            >
-                              Verify
-                            </button>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </div>
+                  <VerifyEmail
+                    isVerifyModal={isVerifyModal}
+                    setIsVerifyModal={setIsVerifyModal}
+                    handleVerifyEmail={handleVerifyEmail}
+                    setOtp={setOtp}
+                    otp={otp}
+                    otpLoader={otpLoader}
+                    handleVerifyBtn={handleVerifyBtn}
+                    handleReset={handleReset}
+                  />
                )}

                <ModalUi
@@ -3,12 +3,7 @@ import axios from "axios";
 import Parse from "parse";
 import "../styles/signature.css";
 import { PDFDocument } from "pdf-lib";
-import {
-  isEnableSubscription,
-  rejectBtn,
-  submitBtn,
-  themeColor
-} from "../constant/const";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
@@ -39,8 +34,7 @@ import {
  replaceMailVaribles,
  copytoData,
  fetchSubscription,
-  convertPdfArrayBuffer,
-  handleSendOTP
+  convertPdfArrayBuffer
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -90,7 +84,6 @@ function PlaceHolderSign() {
  const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
  const [contractName, setContractName] = useState("");
  const [containerWH, setContainerWH] = useState();
-  const [otpLoader, setOtpLoader] = useState(false);
  const { docId } = useParams();
  const signRef = useRef(null);
  const dragRef = useRef(null);
@@ -131,9 +124,6 @@ function PlaceHolderSign() {
  const [requestBody, setRequestBody] = useState("");
  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
  const [activeMailAdapter, setActiveMailAdapter] = useState("");
-  const [isEmailVerified, setIsEmailVerified] = useState(false);
-  const [isVerifyModal, setIsVerifyModal] = useState(false);
-  const [otp, setOtp] = useState("");
  const [isAlreadyPlace, setIsAlreadyPlace] = useState({
    status: false,
    message: ""
@@ -261,63 +251,10 @@ function PlaceHolderSign() {
      navigate(`/subscription`);
    }
  }
-  const handleVerifyBtn = async () => {
-    setIsVerifyModal(true);
-    await handleSendOTP(Parse.User.current().getEmail());
-  };

-  const handleReset = async (e) => {
-    e.preventDefault();
-    setOtpLoader(true);
-    await handleSendOTP(Parse.User.current().getEmail());
-    setOtpLoader(false);
-    alert("OTP sent on you email");
-  };
-  const handleVerifyEmail = async (e) => {
-    e.preventDefault();
-    setOtpLoader(true);
-    try {
-      const resEmail = await Parse.Cloud.run("verifyemail", {
-        otp: otp,
-        email: Parse.User.current().getEmail()
-      });
-      if (resEmail?.message === "Email is verified.") {
-        setIsEmailVerified(true);
-      } else if (resEmail?.message === "Email is already verified.") {
-        setIsEmailVerified(true);
-      }
-      setOtp("");
-      alert(resEmail.message);
-      setIsVerifyModal(false);
-      handleRecipientSign();
-    } catch (error) {
-      alert(error.message);
-    } finally {
-      setOtpLoader(false);
-    }
-  };
-  const handleCloseVerifyModal = async () => {
-    setIsVerifyModal(false);
-  };
  //function for get document details
  const getDocumentDetails = async () => {
    fetchTenantDetails();
-
-    const jsonSender = JSON.parse(
-      localStorage.getItem(
-        `Parse/${localStorage.getItem("parseAppId")}/currentUser`
-      )
-    );
-    // const isEmailVerified = Parse.User.current()?.attributes?.emailVerified;
-    const userQuery = new Parse.Query(Parse.User);
-    const user = await userQuery.get(jsonSender.objectId, {
-      sessionToken: localStorage.getItem("accesstoken")
-    });
-    if (user) {
-      const isEmailVerified = user?.get("emailVerified");
-      setIsEmailVerified(isEmailVerified);
-    }
-
    //getting document details
    const documentData = await contractDocument(documentId);
    if (documentData && documentData.length > 0) {
@@ -1901,36 +1838,21 @@ function PlaceHolderSign() {
                      marginBottom: "15px"
                    }}
                  ></div>
-                  {isCurrUser &&
-                    (isEmailVerified ? (
-                      <button
-                        onClick={() => {
-                          handleRecipientSign();
-                        }}
-                        style={{
-                          background: themeColor,
-                          color: "white"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                      >
-                        Yes
-                      </button>
-                    ) : (
-                      <button
-                        onClick={() => {
-                          handleVerifyBtn();
-                        }}
-                        style={{
-                          background: themeColor,
-                          color: "white"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                      >
-                        Verify Email
-                      </button>
-                    ))}
+                  {isCurrUser && (
+                    <button
+                      onClick={() => {
+                        handleRecipientSign();
+                      }}
+                      style={{
+                        background: themeColor,
+                        color: "white"
+                      }}
+                      type="button"
+                      className="finishBtn"
+                    >
+                      Yes
+                    </button>
+                  )}

                  <button
                    onClick={() => {
@@ -2221,58 +2143,6 @@ function PlaceHolderSign() {
          handleData={handleWidgetdefaultdata}
          isSubscribe={isSubscribe}
        />
-        {isVerifyModal && (
-          <ModalUi
-            isOpen
-            title={"OTP verification"}
-            handleClose={handleCloseVerifyModal}
-          >
-            {otpLoader ? (
-              <div
-                style={{
-                  height: "150px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                }}
-              >
-                <div
-                  style={{
-                    fontSize: "45px",
-                    color: "#3dd3e0"
-                  }}
-                  className="loader-37"
-                ></div>
-              </div>
-            ) : (
-              <form onSubmit={(e) => handleVerifyEmail(e)}>
-                <div className="px-6 py-3">
-                  <label className="mb-2">Enter OTP</label>
-                  <input
-                    type="tel"
-                    pattern="[0-9]{4}"
-                    className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                    placeholder="Enter OTP sent on mail"
-                    value={otp}
-                    onChange={(e) => setOtp(e.target.value)}
-                  />
-                </div>
-                <hr />
-                <div className="px-6 my-3">
-                  <button type="submit" className={submitBtn}>
-                    Verify
-                  </button>
-                  <button
-                    className={`${rejectBtn} ml-2`}
-                    onClick={(e) => handleReset(e)}
-                  >
-                    Resend
-                  </button>
-                </div>
-              </form>
-            )}
-          </ModalUi>
-        )}
      </div>
    </>
  );
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
+import Parse from "parse";
 import { isEnableSubscription, themeColor } from "../constant/const";
 import axios from "axios";
 import Loader from "../primitives/LoaderWithMsg";
@@ -31,7 +32,8 @@ import {
  checkIsSubscribed,
  convertPdfArrayBuffer,
  fetchImageBase64,
-  changeImageWH
+  changeImageWH,
+  handleSendOTP
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -44,6 +46,7 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Title from "../components/Title";
 import ModalUi from "../primitives/ModalUi";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
+import VerifyEmail from "../components/pdf/VerifyEmail";

 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
@@ -91,6 +94,7 @@ function SignYourSelf() {
  const [containerWH, setContainerWH] = useState({});
  const [isPageCopy, setIsPageCopy] = useState(false);
  const [selectWidgetId, setSelectWidgetId] = useState("");
+  const [otpLoader, setOtpLoader] = useState(false);
  const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
    status: false
  });
@@ -107,6 +111,9 @@ function SignYourSelf() {
  const [isCompleted, setIsCompleted] = useState(false);
  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
  const [activeMailAdapter, setActiveMailAdapter] = useState("");
+  const [isEmailVerified, setIsEmailVerified] = useState(true);
+  const [isVerifyModal, setIsVerifyModal] = useState(false);
+  const [otp, setOtp] = useState("");
  const divRef = useRef(null);
  const nodeRef = useRef(null);
  const [, drop] = useDrop({
@@ -226,6 +233,17 @@ function SignYourSelf() {
          setSignBtnPosition([]);
        }
      }
+
+      if (!isCompleted) {
+        const userQuery = new Parse.Query(Parse.User);
+        const user = await userQuery.get(jsonSender.objectId, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
+        if (user) {
+          const isEmailVerified = user?.get("emailVerified");
+          setIsEmailVerified(isEmailVerified);
+        }
+      }
    } else if (
      documentData === "Error: Something went wrong!" ||
      (documentData.result && documentData.result.error)
@@ -533,6 +551,42 @@ function SignYourSelf() {
    setSelectWidgetId(key);
    setSignKey(key);
  };
+
+  const handleReset = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+    setOtpLoader(false);
+    alert("OTP sent on you email");
+  };
+  const handleVerifyEmail = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    try {
+      const resEmail = await Parse.Cloud.run("verifyemail", {
+        otp: otp,
+        email: Parse.User.current().getEmail()
+      });
+      if (resEmail?.message === "Email is verified.") {
+        setIsEmailVerified(true);
+      } else if (resEmail?.message === "Email is already verified.") {
+        setIsEmailVerified(true);
+      }
+      setOtp("");
+      alert(resEmail.message);
+      setIsVerifyModal(false);
+      // handleRecipientSign();
+    } catch (error) {
+      alert(error.message);
+    } finally {
+      setOtpLoader(false);
+    }
+  };
+
+  const handleVerifyBtn = async () => {
+    setIsVerifyModal(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+  };
  //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
  async function embedWidgetsData() {
    let showAlert = false;
@@ -1037,6 +1091,18 @@ function SignYourSelf() {
          )}

          <div className="signatureContainer" ref={divRef}>
+            {!isEmailVerified && (
+              <VerifyEmail
+                isVerifyModal={isVerifyModal}
+                setIsVerifyModal={setIsVerifyModal}
+                handleVerifyEmail={handleVerifyEmail}
+                setOtp={setOtp}
+                otp={otp}
+                otpLoader={otpLoader}
+                handleVerifyBtn={handleVerifyBtn}
+                handleReset={handleReset}
+              />
+            )}
            {/* this component used for UI interaction and show their functionality */}
            {pdfLoadFail && !checkTourStatus && (
              <Tour