Merge pull request #753 from OpenSignLabs/raktima-opensignlabs-patch-7

feat:  celebration confetti on document completion

Author: prafull-opensignlabs

apps/OpenSign/package-lock.json

@@ -17,6 +17,7 @@
     "radix-ui": "^1.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
+    "react-confetti": "^6.1.0",
     "react-cookie": "^7.1.4",
     "react-datepicker": "^6.4.0",
     "react-dnd": "^16.0.1",

apps/OpenSign/package.json

@@ -10,7 +10,6 @@ import loader from "../../assets/images/loader2.gif";
 function EmailComponent({
   isEmail,
   pdfUrl,
-  isCeleb,
   setIsEmail,
   setSuccessEmail,
   pdfName,
@@ -22,6 +21,7 @@ function EmailComponent({
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
+  const [isEmailCelebration, setIsEmailCelebration] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
@@ -62,6 +62,10 @@ function EmailComponent({
             " target=_blank>here</a> </p></div></div></body></html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
+        setIsEmailCelebration(true);
+        setTimeout(() => {
+          setIsEmailCelebration(false);
+        }, 3000);
       } catch (error) {
         console.log("error", error);
         setIsLoading(false);
@@ -245,22 +249,17 @@ function EmailComponent({
               </div>
             </div>
             <div style={{ height: "100%", padding: 20 }}>
-              {isCeleb && (
-                <div
-                  style={{
-                    position: "absolute",
-                    marginLeft: "50px"
-                  }}
-                >
+              {isEmailCelebration && (
+                <div className="absolute w-[100%] flex justify-center items-center">
                   <img
                     alt="print img"
                     width={300}
                     height={250}
-                    // style={styles.gifCeleb}
                     src={celebration}
                   />
                 </div>
               )}
+
               <p
                 style={{
                   fontFamily: "system-ui",

apps/OpenSign/src/components/pdf/EmailComponent.js

@@ -11,6 +11,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import SignPad from "../components/pdf/SignPad";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import Tour from "reactour";
+import Confetti from "react-confetti";
 import moment from "moment";
 import {
   contractDocument,
@@ -61,6 +62,7 @@ function PdfRequestFiles() {
   const [handleError, setHandleError] = useState();
   const [selectWidgetId, setSelectWidgetId] = useState("");
   const [otpLoader, setOtpLoader] = useState(false);
+  const [isCelebration, setIsCelebration] = useState(false);
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -219,7 +221,7 @@ function PdfRequestFiles() {
     }
   }
   //function for get document details for perticular signer with signer'object id
-  const getDocumentDetails = async () => {
+  const getDocumentDetails = async (isNextUser) => {
     let currUserId;
     //getting document details
     const documentData = await contractDocument(documentId);
@@ -412,6 +414,27 @@ function PdfRequestFiles() {
           setSignerPos(documentData[0].Placeholders);
         }
         setPdfDetails(documentData);
+        // Check if the current signer is not a last signer and handle the complete message.
+        if (isNextUser) {
+          const getSignedAuditTrail = documentData[0].AuditTrail.filter(
+            (data) => data.Activity === "Signed"
+          );
+          const isLastSigner =
+            getSignedAuditTrail?.length === documentData?.[0]?.Signers?.length;
+          if (!isLastSigner) {
+            setIsCompleted({
+              isModal: true,
+              message:
+                "You have successfully signed the document. You can download or print a copy of the partially signed document. A copy of the digitally signed document will be sent to the owner over email once it is signed by all signers."
+            });
+          } else {
+            setIsCelebration(true);
+            setTimeout(() => {
+              setIsCelebration(false);
+            }, 5000);
+          }
+        }
+
         setIsUiLoading(false);
       } else {
         alert("No data found!");
@@ -701,19 +724,12 @@ function PdfRequestFiles() {
                 setIsSigned(true);
                 setSignedSigners([]);
                 setUnSignedSigners([]);
-                getDocumentDetails();
+                getDocumentDetails(true);
                 const index = pdfDetails?.[0].Signers.findIndex(
                   (x) => x.Email === jsonSender.email
                 );
                 const newIndex = index + 1;
                 const user = pdfDetails?.[0].Signers[newIndex];
-                if (user) {
-                  setIsCompleted({
-                    isModal: true,
-                    message:
-                      "You have successfully signed the document. You can download or print a copy of the partially signed document. A copy of the digitally signed document will be sent to the owner over email once it is signed by all signers."
-                  });
-                }
                 if (sendInOrder) {
                   const requestBody = pdfDetails?.[0]?.RequestBody;
                   const requestSubject = pdfDetails?.[0]?.RequestSubject;
@@ -1120,7 +1136,6 @@ function PdfRequestFiles() {
       alertMessage: ""
     });
   };
-
   return (
     <DndProvider backend={HTML5Backend}>
       <Title title={"Request Sign"} />
@@ -1169,6 +1184,14 @@ function PdfRequestFiles() {
                   </span>
                 </div>
               )}
+              {isCelebration && (
+                <div style={{ position: "relative", zIndex: "1000" }}>
+                  <Confetti
+                    width={window.innerWidth}
+                    height={window.innerHeight}
+                  />
+                </div>
+              )}
 
               <div
                 className="relative flex flex-col md:flex-row justify-between bg-[#ebebeb]"

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -3,6 +3,7 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
 import { isEnableSubscription, themeColor } from "../constant/const";
+import Confetti from "react-confetti";
 import axios from "axios";
 import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
@@ -70,7 +71,6 @@ function SignYourSelf() {
   const [dragKey, setDragKey] = useState();
   const [signKey, setSignKey] = useState();
   const [imgWH, setImgWH] = useState({});
-  const [isCeleb, setIsCeleb] = useState(false);
   const [pdfNewWidth, setPdfNewWidth] = useState();
   const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
   const [successEmail, setSuccessEmail] = useState(false);
@@ -109,6 +109,7 @@ function SignYourSelf() {
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
   const [isCompleted, setIsCompleted] = useState(false);
+  const [isCelebration, setIsCelebration] = useState(false);
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const [activeMailAdapter, setActiveMailAdapter] = useState("");
   const [isEmailVerified, setIsEmailVerified] = useState(true);
@@ -229,8 +230,12 @@ function SignYourSelf() {
           setIsUiLoading(false);
           setIsSignPad(false);
           setIsEmail(true);
+          setIsCelebration(true);
           setXyPostion([]);
           setSignBtnPosition([]);
+          setTimeout(() => {
+            setIsCelebration(false);
+          }, 5000);
         }
       }
     } else if (
@@ -649,10 +654,6 @@ function SignYourSelf() {
           });
           return;
         } else {
-          setIsCeleb(true);
-          setTimeout(() => {
-            setIsCeleb(false);
-          }, 3000);
           setIsUiLoading(true);
           const existingPdfBytes = pdfArrayBuffer;
           // Load a PDFDocument from the existing PDF bytes
@@ -1122,6 +1123,11 @@ function SignYourSelf() {
               </span>
             </div>
           )}
+          {isCelebration && (
+            <div style={{ position: "relative", zIndex: "999" }}>
+              <Confetti width={window.innerWidth} height={window.innerHeight} />
+            </div>
+          )}
 
           <div className="signatureContainer" ref={divRef}>
             {!isEmailVerified && (
@@ -1258,7 +1264,6 @@ function SignYourSelf() {
               <EmailComponent
                 isEmail={isEmail}
                 pdfUrl={pdfUrl}
-                isCeleb={isCeleb}
                 setIsEmail={setIsEmail}
                 pdfName={pdfDetails[0] && pdfDetails[0].Name}
                 setSuccessEmail={setSuccessEmail}