feat: celebration confetti on document completion

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

@@ -10,18 +10,19 @@ import loader from "../../assets/images/loader2.gif";
 function EmailComponent({
   isEmail,
   pdfUrl,
-  isCeleb,
   setIsEmail,
   setSuccessEmail,
   pdfName,
   sender,
   setIsAlert,
   extUserId,
-  activeMailAdapter
+  activeMailAdapter,
+  isCompletionCeleb
 }) {
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
+  const [isCeleb, setIsCeleb] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
@@ -62,6 +63,10 @@ function EmailComponent({
             " target=_blank>here</a> </p></div></div></body></html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
+        setIsCeleb(true);
+        setTimeout(() => {
+          setIsCeleb(false);
+        }, 3000);
       } catch (error) {
         console.log("error", error);
         setIsLoading(false);
@@ -245,7 +250,7 @@ function EmailComponent({
               </div>
             </div>
             <div style={{ height: "100%", padding: 20 }}>
-              {isCeleb && (
+              {(isCeleb || isCompletionCeleb) && (
                 <div
                   style={{
                     position: "absolute",
@@ -261,6 +266,7 @@ function EmailComponent({
                   />
                 </div>
               )}
+
               <p
                 style={{
                   fontFamily: "system-ui",

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -61,6 +61,7 @@ function PdfRequestFiles() {
   const [handleError, setHandleError] = useState();
   const [selectWidgetId, setSelectWidgetId] = useState("");
   const [otpLoader, setOtpLoader] = useState(false);
+  const [isCompletionCeleb, setIsCompletionCeleb] = useState(false);
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -259,6 +260,9 @@ function PdfRequestFiles() {
         };
         setAlreadySign(true);
         setIsCompleted(data);
+        setTimeout(() => {
+          setIsCompletionCeleb(false);
+        }, 1500);
       } else if (declined) {
         const currentDecline = {
           currnt: "another",
@@ -702,6 +706,7 @@ function PdfRequestFiles() {
                 setSignedSigners([]);
                 setUnSignedSigners([]);
                 getDocumentDetails();
+                setIsCompletionCeleb(true);
                 const index = pdfDetails?.[0].Signers.findIndex(
                   (x) => x.Email === jsonSender.email
                 );
@@ -1120,7 +1125,6 @@ function PdfRequestFiles() {
       alertMessage: ""
     });
   };
-
   return (
     <DndProvider backend={HTML5Backend}>
       <Title title={"Request Sign"} />
@@ -1358,6 +1362,9 @@ function PdfRequestFiles() {
                     handleClose={() => {
                       setIsCompleted((prev) => ({ ...prev, isModal: false }));
                     }}
+                    isCompletionCeleb={
+                      !isCompleted?.message && isCompletionCeleb
+                    }
                   >
                     <div style={{ height: "100%", padding: 20 }}>
                       <p>

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -70,7 +70,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 +108,7 @@ function SignYourSelf() {
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
   const [isCompleted, setIsCompleted] = useState(false);
+  const [isCompletionCeleb, setIsCompletionCeleb] = useState(false);
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const [activeMailAdapter, setActiveMailAdapter] = useState("");
   const [isEmailVerified, setIsEmailVerified] = useState(true);
@@ -231,6 +231,9 @@ function SignYourSelf() {
           setIsEmail(true);
           setXyPostion([]);
           setSignBtnPosition([]);
+          setTimeout(() => {
+            setIsCompletionCeleb(false);
+          }, 1500);
         }
       }
     } else if (
@@ -337,6 +340,7 @@ function SignYourSelf() {
       setIsLoading(loadObj);
     }
   };
+  console.log("iscompletion", isCompletionCeleb);
   const getWidgetValue = (type) => {
     switch (type) {
       case "name":
@@ -649,10 +653,6 @@ function SignYourSelf() {
           });
           return;
         } else {
-          setIsCeleb(true);
-          setTimeout(() => {
-            setIsCeleb(false);
-          }, 3000);
           setIsUiLoading(true);
           const existingPdfBytes = pdfArrayBuffer;
           // Load a PDFDocument from the existing PDF bytes
@@ -769,6 +769,7 @@ function SignYourSelf() {
         setPdfUrl(json.result.data);
         if (json.result.data) {
           getDocumentDetails(false);
+          setIsCompletionCeleb(true);
         }
       })
       .catch((err) => {
@@ -1258,7 +1259,6 @@ function SignYourSelf() {
               <EmailComponent
                 isEmail={isEmail}
                 pdfUrl={pdfUrl}
-                isCeleb={isCeleb}
                 setIsEmail={setIsEmail}
                 pdfName={pdfDetails[0] && pdfDetails[0].Name}
                 setSuccessEmail={setSuccessEmail}
@@ -1266,6 +1266,8 @@ function SignYourSelf() {
                 setIsAlert={setIsAlert}
                 extUserId={extUserId}
                 activeMailAdapter={activeMailAdapter}
+                isCompletionCeleb={isCompletionCeleb}
+                setIsCompletionCeleb={setIsCompletionCeleb}
               />
               {/* pdf header which contain funish back button */}
               <Header

apps/OpenSign/src/primitives/ModalUi.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { isEnableSubscription } from "../constant/const";
 import PremiumAlertHeader from "./PremiumAlertHeader";
+import celebration from "../assets/images/newCeleb.gif";
 
 const ModalUi = ({
   children,
@@ -11,7 +12,8 @@ const ModalUi = ({
   showHeader = true,
   showClose = true,
   styleClass,
-  showHeaderMessage
+  showHeaderMessage,
+  isCompletionCeleb
 }) => {
   return (
     <>
@@ -24,6 +26,21 @@ const ModalUi = ({
                 : "fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[500px] overflow-y-auto hide-scrollbar"
             }
           >
+            {isCompletionCeleb && (
+              <div
+                style={{
+                  position: "absolute",
+                  marginLeft: "50px"
+                }}
+              >
+                <img
+                  alt="print img"
+                  width={300}
+                  height={100}
+                  src={celebration}
+                />
+              </div>
+            )}
             {showHeader && (
               <div
                 className="flex justify-between rounded-t items-center py-[15px] px-[20px] text-white"