From 82312a1e0d7788f1d3b8967a55cd4c8d0f82704a Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 20 May 2024 11:42:37 +0530 Subject: [PATCH] feat: celebration confetti on document completion --- .../src/components/pdf/EmailComponent.js | 12 +++++++++--- apps/OpenSign/src/pages/PdfRequestFiles.js | 9 ++++++++- apps/OpenSign/src/pages/SignyourselfPdf.js | 14 ++++++++------ apps/OpenSign/src/primitives/ModalUi.js | 19 ++++++++++++++++++- 4 files changed, 43 insertions(+), 11 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js index b1e905719..8cb2b9ade 100644 --- a/apps/OpenSign/src/components/pdf/EmailComponent.js +++ b/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

" }; 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({
- {isCeleb && ( + {(isCeleb || isCompletionCeleb) && (
)} +

{ + 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 ( @@ -1358,6 +1362,9 @@ function PdfRequestFiles() { handleClose={() => { setIsCompleted((prev) => ({ ...prev, isModal: false })); }} + isCompletionCeleb={ + !isCompleted?.message && isCompletionCeleb + } > <div style={{ height: "100%", padding: 20 }}> <p> diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index db813272f..2ad4ccb0a 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/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 diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js index dcc726f18..be6122e69 100644 --- a/apps/OpenSign/src/primitives/ModalUi.js +++ b/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"