Merge pull request #17 from OpenSignLabs/staging

Update main

Author: raktima-opensignlabs

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -192,7 +192,6 @@ function PdfRequestFiles() {
 
             //check document is signed or not
             if (checkDocIdExist && checkDocIdExist.length > 0) {
-              setAlreadySign(true);
               setIsDocId(true);
               const signerRes = res[0].Signers;
               //comparison auditTrail user details with signers user details

microfrontends/SignDocuments/src/Component/component/header.js

@@ -27,13 +27,13 @@ function Header({
   signersdata,
   isMailSend,
   alertSendEmail,
-  isSigned,
   isCompleted,
   isShowHeader,
   decline,
   currentSigner,
   dataTut4,
-  alreadySign
+  alreadySign,
+  isSignYourself
 }) {
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
@@ -61,12 +61,19 @@ function Header({
 
     const pdf = await getBase64FromUrl(pdfUrl);
     const isAndroidDevice = navigator.userAgent.match(/Android/i);
-    const isAppleDevice = (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) && !window.MSStream
+    const isAppleDevice =
+      (/iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
+      !window.MSStream;
     if (isAndroidDevice || isAppleDevice) {
-      const byteArray = Uint8Array.from(atob(pdf).split('').map(char => char.charCodeAt(0)));
-      const blob = new Blob([byteArray], { type: 'application/pdf' });
+      const byteArray = Uint8Array.from(
+        atob(pdf)
+          .split("")
+          .map((char) => char.charCodeAt(0))
+      );
+      const blob = new Blob([byteArray], { type: "application/pdf" });
       const blobUrl = URL.createObjectURL(blob);
-      window.open(blobUrl, '_blank');
+      window.open(blobUrl, "_blank");
     } else {
       printModule({ printable: pdf, type: "pdf", base64: true });
     }
@@ -75,27 +82,86 @@ function Header({
   //handle download signed pdf
   const handleDownloadPdf = () => {
     const pdfName = pdfDetails[0] && pdfDetails[0].Name;
-
-    saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+  saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
   };
-
+  
   const sanitizeFileName = (pdfName) => {
     // Replace spaces with underscore
     return pdfName.replace(/ /g, '_');
   }
-
-
+  //certificate generate and download component in mobile view
+  const CertificateDropDown = () => {
+    //after generate download certifcate pdf
+    const handleDownload = (pdfBlob, fileName) => {
+      if (pdfBlob) {
+        const url = window.URL.createObjectURL(pdfBlob);
+        // Create a temporary anchor element
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName;
+        // Append the anchor to the body
+        document.body.appendChild(link);
+        // Programmatically click the anchor to trigger the download
+        link.click();
+        // Remove the anchor from the body
+        document.body.removeChild(link);
+        // Release the object URL to free up resources
+        window.URL.revokeObjectURL(url);
+      }
+    };
+    return (
+      <PDFDownloadLink
+        onClick={(e) => e.preventDefault()}
+        style={{ textDecoration: "none", zIndex: "35" }}
+        document={<Certificate pdfData={pdfDetails} />}
+      >
+        {({ blob, url, loading, error }) => (
+          <>
+            {loading ? (
+              "Loading document..."
+            ) : (
+              <div
+                style={{
+                  border: "none",
+                  backgroundColor: "#fff"
+                }}
+                onClick={() =>
+                  handleDownload(
+                    blob,
+                    `completion certificate-${
+                      pdfDetails[0] && pdfDetails[0].Name
+                    }.pdf`
+                  )
+                }
+              >
+                <i
+                  className="fa fa-certificate"
+                  style={{
+                    marginRight: "2px"
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Certificate
+              </div>
+            )}
+          </>
+        )}
+      </PDFDownloadLink>
+    );
+  };
   return (
     <div
-    style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
+      style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
       className="mobileHead"
     >
       {isMobile && isShowHeader ? (
         <div
           id="navbar"
           className={isGuestSigner ? "stickySignerHead" : "stickyHead"}
           style={{
-            width: isGuestSigner ? window.innerWidth : window.innerWidth - 30 + "px"
+            width: isGuestSigner
+              ? window.innerWidth
+              : window.innerWidth - 30 + "px"
           }}
         >
           <div className="preBtn2">
@@ -140,16 +206,16 @@ function Header({
                 style={{ color: "gray", cursor: "pointer" }}
               ></i>
             </div>
-            {pdfUrl ? (
+            {pdfUrl && alreadySign ? (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
                   <div
-                    // onClick={() => handleDownloadPdf()}
                     style={{
                       color: themeColor(),
                       border: "none",
                       fontWeight: "650",
-                      fontSize: "16px"
+                      fontSize: "16px",
+                      padding:"0px 3px 0px 5px"
                     }}
                   >
                     <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
@@ -179,51 +245,46 @@ function Header({
                         Download
                       </div>
                     </DropdownMenu.Item>
-                    <DropdownMenu.Item className="DropdownMenuItem">
-                      <PDFDownloadLink
-                        style={{ textDecoration: "none" }}
-                        document={<Certificate pdfData={pdfDetails} />}
-                        fileName={`completion certificate-${
-                          pdfDetails[0] && pdfDetails[0].Name
-                        }.pdf`}
+                    {recipient && pdfDetails[0] && pdfDetails.length > 0 ? (
+                      <DropdownMenu.Item className="DropdownMenuItem">
+                        <CertificateDropDown />
+                      </DropdownMenu.Item>
+                    ) : isPdfRequestFiles &&
+                      alreadySign &&
+                      isCompleted.isCertificate ? (
+                      <DropdownMenu.Item className="DropdownMenuItem">
+                        <CertificateDropDown />
+                      </DropdownMenu.Item>
+                    ) :isSignYourself && (
+                      <DropdownMenu.Item className="DropdownMenuItem">
+                        <CertificateDropDown />
+                      </DropdownMenu.Item>
+                    )}
+                    <DropdownMenu.Item
+                      className="DropdownMenuItem"
+                      onClick={handleToPrint}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "row"
+                        }}
                       >
-                        {({ blob, url, loading, error }) => (
-                          <>
-                            {console.log("error", error)}
-                            {loading ? (
-                              "Loading document..."
-                            ) : (
-                              <button
-                                type="button"
-                                className="defaultBtn certificateBtn"
-                                style={{
-                                  display: "flex",
-                                  flexDirection: "row",
-                                  alignItems: "center"
-                                }}
-                              >
-                                <i
-                                  className="fa fa-certificate"
-                                  style={{
-                                    color: "white",
-                                    fontSize: "15px",
-                                    marginRight: "3px"
-                                  }}
-                                  aria-hidden="true"
-                                ></i>
-                                Certificate
-                              </button>
-                            )}
-                          </>
-                        )}
-                      </PDFDownloadLink>
+                        {" "}
+                        <i
+                          className="fa fa-print"
+                          aria-hidden="true"
+                          style={{ marginRight: "2px" }}
+                        ></i>
+                        Print
+                      </div>
                     </DropdownMenu.Item>
                   </DropdownMenu.Content>
                 </DropdownMenu.Portal>
               </DropdownMenu.Root>
             ) : (
               <div style={{ display: "flex", justifyContent: "space-around" }}>
-                {/* current signer is checking user send request and check status of pdf sign than if current
+                {/* current signer is checking user send request and check status of pdf sign than if current 
                 user exist than show finish button else no
                 */}
                 {currentSigner && (
@@ -267,6 +328,8 @@ function Header({
                         onClick={() => {
                           if (!pdfUrl) {
                             embedImages();
+                          } else if (isPdfRequestFiles) {
+                            embedImages();
                           }
                         }}
                         style={{
@@ -689,4 +752,4 @@ function Header({
   );
 }
 
-export default Header;
+export default Header;

microfrontends/SignDocuments/src/Component/component/renderPdf.js

@@ -42,7 +42,8 @@ function RenderPdf({
   const isMobile = window.innerWidth < 767;
   const newWidth = window.innerWidth;
   const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
- 
+ //check isGuestSigner is present in local if yes than handle login flow header in mobile view
+ const isGuestSigner = localStorage.getItem("isGuestSigner");
   // handle signature block width and height according to screen
   const posWidth = (pos) => {
     let width;
@@ -74,8 +75,7 @@ function RenderPdf({
       return width;
     }
   };
-  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
-  const isGuestSigner = localStorage.getItem("isGuestSigner");
+   
 
   //function for render placeholder block over pdf document
   const checkSignedSignes = (data) => {
@@ -777,7 +777,13 @@ function RenderPdf({
               }}
               onLoadSuccess={pageDetails}
               ref={pdfRef}
-              file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
+              file={
+                pdfUrl
+                  ? pdfUrl
+                  : pdfDetails[0] && pdfDetails[0].SignedUrl
+                  ? pdfDetails[0].SignedUrl
+                  : pdfDetails[0].URL
+              }
             >
               {Array.from(new Array(numPages), (el, index) => (
                 <Page
@@ -1293,7 +1299,13 @@ function RenderPdf({
               }}
               onLoadSuccess={pageDetails}
               ref={pdfRef}
-              file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
+              file={
+                pdfUrl
+                  ? pdfUrl
+                  : pdfDetails[0] && pdfDetails[0].SignedUrl
+                  ? pdfDetails[0].SignedUrl
+                  : pdfDetails[0].URL
+              }
             >
               {Array.from(new Array(numPages), (el, index) => (
                 <Page

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -1083,6 +1083,7 @@ function EmbedPdfImage() {
               isShowHeader={true}
               currentSigner={true}
               decline={true}
+              alreadySign={pdfUrl ? true :false}
             />
 
             <RenderPdf

microfrontends/SignDocuments/src/css/signature.css

@@ -374,15 +374,13 @@
   font-size: 50px;
 }
 
-
-
 .DropdownMenuContent,
 .DropdownMenuSubContent {
   min-width: 130px;
-  background-color: #887abf;
-  border: none;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 0.25rem;
   padding: 5px;
-
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
@@ -413,13 +411,13 @@
   font-size: 13px;
   line-height: 1;
   color: black;
-  background-color: #887abf;
+  background-color: #fff;
   display: flex;
   align-items: center;
   height: 25px;
   padding: 0 5px;
   position: relative;
-  padding-left: 25px;
+  padding-left: 20px;
   user-select: none;
   outline: none;
   border: none;
@@ -565,12 +563,12 @@ option {
   color: var(--violet-11);
   cursor: default;
 }
-.fontOptionContainer{
- border: 1px solid #d6d3d3;
- margin: 10px 5px 5px 5px;
 
-}
+.fontOptionContainer {
+  border: 1px solid #d6d3d3;
+  margin: 10px 5px 5px 5px;
 
+}
 
 @media screen and (max-width:766px) {
 
@@ -634,11 +632,13 @@ option {
     position: fixed;
     top: 50px;
     left: 0.9rem;
-}
-  .stickySignerHead{
-   position: fixed;
-   }
-   .stickyfooter {
+  }
+
+  .stickySignerHead {
+    position: fixed;
+  }
+
+  .stickyfooter {
     position: fixed;
     bottom: 0px;
     right: 0rem;