feat: quick send feature to create & send multiple documents at a time

apps/OpenSign/src/pages/GuestLogin.js

@@ -1,16 +1,20 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import "../styles/loginPage.css";
 import loader from "../assets/images/loader2.gif";
 import axios from "axios";
-import { isEnableSubscription, themeColor } from "../constant/const";
+import {
+  isEnableSubscription,
+  modalSubmitBtnColor,
+  themeColor
+} from "../constant/const";
 import { contractUsers, getAppLogo } from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
+import Parse from "parse";
 
 function GuestLogin() {
   const { id, userMail, contactBookId, base64url } = useParams();
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   const [email, setEmail] = useState(userMail);
   const [OTP, setOTP] = useState("");
   const [EnterOTP, setEnterOtp] = useState(false);
@@ -20,9 +24,9 @@ function GuestLogin() {
   const [documentId, setDocumentId] = useState(id);
   const [contactId, setContactId] = useState(contactBookId);
   const [sendmail, setSendmail] = useState();
+  const [contact, setContact] = useState({ name: "", phone: "", email: "" });
   useEffect(() => {
     handleServerUrl();
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -53,54 +57,51 @@ function GuestLogin() {
       //split url in array from '/'
       const checkSplit = decodebase64.split("/");
       setDocumentId(checkSplit[0]);
+      setContact((prev) => ({ ...prev, email: checkSplit[1] }));
       setEmail(checkSplit[1]);
-      setContactId(checkSplit[2]);
+      const contactId = checkSplit?.[2];
       setSendmail(checkSplit[3]);
+      if (!contactId) {
+        const params = { email: checkSplit[1], docId: checkSplit[0] };
+        try {
+          const linkContactRes = await Parse.Cloud.run(
+            "linkcontacttodoc",
+            params
+          );
+          // console.log("linkContactRes ", linkContactRes);
+          setContactId(linkContactRes?.contactId);
+        } catch (err) {
+          console.log("Err in link ext contact", err);
+        }
+      } else {
+        setContactId(checkSplit[2]);
+      }
     }
 
     setIsLoading(false);
   };
 
-  const handleChange = (event) => {
-    const { value } = event.target;
-    setOTP(value);
-  };
-
   //send email OTP function
-  const SendOtp = async (e) => {
-    const serverUrl =
-      localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
-    const parseId =
-      localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-    if (serverUrl && localStorage) {
-      setLoading(true);
-      e.preventDefault();
-      setEmail(email);
-
-      try {
-        let url = `${serverUrl}functions/SendOTPMailV1/`;
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": parseId
-        };
-        let body = {
-          email: email.toString(),
-          docId: documentId
-        };
-        let Otp = await axios.post(url, body, { headers: headers });
-
-        if (Otp) {
-          setLoading(false);
-          setEnterOtp(true);
-        }
-      } catch (error) {
-        alert("something went wrong!");
+  const SendOtp = async () => {
+    setLoading(true);
+    setEmail(email);
+    try {
+      const params = { email: email.toString(), docId: documentId };
+      const Otp = await Parse.Cloud.run("SendOTPMailV1", params);
+      if (Otp) {
+        setLoading(false);
+        setEnterOtp(true);
       }
-    } else {
+    } catch (error) {
       alert("something went wrong!");
     }
   };
 
+  const handleSendOTPBtn = async (e) => {
+    e.preventDefault();
+    await SendOtp();
+  };
+
   //verify OTP send on via email
   const VerifyOTP = async (e) => {
     e.preventDefault();
@@ -164,156 +165,171 @@ function GuestLogin() {
       alert("Please Enter OTP!");
     }
   };
-
+  const handleUserData = async (e) => {
+    e.preventDefault();
+    const params = { ...contact, docId: documentId };
+    try {
+      const linkContactRes = await Parse.Cloud.run("linkcontacttodoc", params);
+      // console.log("linkContactRes ", linkContactRes);
+      setContactId(linkContactRes.contactId);
+      setLoading(true);
+      setEnterOtp(true);
+      await SendOtp();
+    } catch (err) {
+      setLoading(false);
+      alert("something went wron, please try agian later.");
+      console.log("Err in link ext contact", err);
+    }
+  };
+  const handleInputChange = (e) => {
+    setContact((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
   return (
     <div style={{ padding: "2rem", background: "white" }}>
       {isLoading ? (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100vh",
-            flexDirection: "column"
-          }}
-        >
-          <img
-            alt="no img"
-            src={loader}
-            style={{ width: "80px", height: "80px" }}
-          />
+        <div className="flex flex-col justify-center items-center h-[100vh]">
+          <img className="w-[80px] h-[80px]" alt="loader" src={loader} />
           <span style={{ fontSize: "13px", color: "gray" }}>
             {isLoading.message}
           </span>
         </div>
       ) : (
-        <div
-          style={{
-            margin: "10px",
-            border: "0.5px solid #c5c7c9",
-            padding: "30px",
-            boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
-          }}
-        >
-          <div className="main_head">
-            <div className="w-[250px] h-[66px] inline-block overflow-hidden">
-              {appLogo && (
-                <img
-                  src={appLogo}
-                  className="object-contain h-full"
-                  alt="logo"
-                />
-              )}
-            </div>
+        <div className="m-1 md:m-2 border-[0.5px] border-[#c5c7c9] p-[30px] shadow-md">
+          <div className="md:w-[250px] md:h-[66px] inline-block overflow-hidden mt-2 mb-11">
+            {appLogo && (
+              <img src={appLogo} className="object-contain h-full" alt="logo" />
+            )}
           </div>
-
-          {!EnterOTP ? (
-            <div className="row">
-              <div className="col-sm-6 KLO">
-                <span className="welcomeText">Welcome Back !</span>
-                <br />
-                <span className="KNLO">
-                  Verification code is sent to your email
-                </span>
-                <div className="card card-box" style={{ borderRadius: "0px" }}>
-                  <div className="card-body">
+          {contactId ? (
+            <>
+              {!EnterOTP ? (
+                <div className="w-full md:w-[50%]">
+                  <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
+                  <legend className="text-[12px] text-[#878787] mt-2">
+                    Verification code is sent to your email
+                  </legend>
+                  <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
                     <input
                       type="email"
                       name="mobile"
                       value={email}
+                      className="outline-none px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs disabled:bg-[#e0e5f5]"
                       disabled
-                      className="loginInput"
                     />
-                    <br />
+                  </div>
+                  <div className="mt-4">
+                    <button
+                      className="w-[100px] text-white text-sm font-medium py-1 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
+                      style={{ background: themeColor }}
+                      onClick={(e) => handleSendOTPBtn(e)}
+                      disabled={loading}
+                    >
+                      {loading ? "Loading..." : "Send OTP"}
+                    </button>
                   </div>
                 </div>
-                <div className="btnContainer">
-                  {loading ? (
-                    <button
-                      type="button"
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
-                      className="verifyBtn"
-                      disabled
-                    >
-                      <span
-                        className="spinner-border spinner-border-sm "
-                        role="status"
-                        aria-hidden="true"
-                      ></span>
-                      Loading...
-                    </button>
-                  ) : (
-                    <button
-                      className="verifyBtn"
-                      style={{
-                        background: themeColor,
-                        color: "white",
-                        marginLeft: "0px !important"
-                      }}
-                      onClick={(e) => SendOtp(e)}
-                    >
-                      Send OTP
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="row">
-              <div className="col-sm-6 KLO">
-                <span className="welcomeText">Welcome Back !</span>
-                <br />
-                <span className="KNLO">You will get a OTP via Email</span>
-                <div className="card card-box">
-                  <div className="card-body">
-                    <label>Enter Verification Code</label>
+              ) : (
+                <form className="w-full md:w-[50%]" onSubmit={VerifyOTP}>
+                  <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
+                  <legend className="text-[12px] text-[#878787] mt-2">
+                    You will get a OTP via Email
+                  </legend>
+                  <div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
+                    <p>Enter Verification Code</p>
                     <input
                       type="number"
-                      className="loginInput"
+                      className="mt-1 outline-none px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs bg-[#e0e5f5]"
                       name="OTP"
                       value={OTP}
-                      onChange={handleChange}
+                      onChange={(e) => setOTP(e.target.value)}
                     />
-
-                    <br />
                   </div>
-                </div>
-                <div>
-                  {loading ? (
+                  <div className="mt-4">
                     <button
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
-                      className="verifyBtn"
-                      type="button"
-                      disabled
+                      style={{ background: themeColor }}
+                      className="w-[100px] text-white text-sm font-medium py-1 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
+                      type="submit"
+                      disabled={loading}
                     >
-                      <span
-                        className="spinner-border spinner-border-sm "
-                        role="status"
-                        aria-hidden="true"
-                      ></span>
-                      Loading...
+                      {loading ? "Loading..." : "Verify"}
                     </button>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={(e) => VerifyOTP(e)}
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
-                      className="verifyBtn"
-                    >
-                      Verify
-                    </button>
-                  )}
+                  </div>
+                </form>
+              )}
+            </>
+          ) : (
+            <div className="w-full md:w-[50%]">
+              <h1 className="text-2xl md:text-[30px]">Welcome</h1>
+              <legend className="text-[12px] text-[#878787] mt-2">
+                Provide your details
+              </legend>
+              <form
+                className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 rounded shadow-md"
+                onSubmit={handleUserData}
+              >
+                <div className="mb-3">
+                  <label
+                    htmlFor="name"
+                    className="block text-xs text-gray-700 font-semibold"
+                  >
+                    Name
+                    <span className="text-[red] text-[13px]"> *</span>
+                  </label>
+                  <input
+                    type="text"
+                    name="name"
+                    value={contact.name}
+                    onChange={handleInputChange}
+                    className="px-3 py-2 w-full border-[1px] border-gray-300 rounded disabled:bg-[#e0e5f5] focus:outline-none text-xs"
+                    disabled={loading}
+                    required
+                  />
                 </div>
-              </div>
+                <div className="mb-3">
+                  <label
+                    htmlFor="email"
+                    className="block text-xs text-gray-700 font-semibold"
+                  >
+                    Email
+                    <span className="text-[red] text-[13px]"> *</span>
+                  </label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={contact.email}
+                    onChange={handleInputChange}
+                    className="px-3 py-2 w-full border-[1px] border-gray-300 disabled:bg-[#e0e5f5] rounded focus:outline-none text-xs"
+                    required
+                    disabled
+                  />
+                </div>
+                <div className="mb-3">
+                  <label
+                    htmlFor="phone"
+                    className="block text-xs text-gray-700 font-semibold"
+                  >
+                    Phone
+                  </label>
+                  <input
+                    type="text"
+                    name="phone"
+                    value={contact.phone}
+                    onChange={handleInputChange}
+                    className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                    disabled={loading}
+                  />
+                </div>
+                <div className="mt-4 flex justify-start">
+                  <button
+                    type="submit"
+                    style={{ backgroundColor: modalSubmitBtnColor }}
+                    className="mr-2 px-[20px] py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+                    disabled={loading}
+                  >
+                    {loading ? "Loading..." : "Next"}
+                  </button>
+                </div>
+              </form>
             </div>
           )}
         </div>