From 0715ca9d85df3ca7ff8c5611c83b198add0685d4 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Fri, 12 Jan 2024 14:07:53 +0530
Subject: [PATCH] fix: on-drag placeholder user-details popup open issue,close
 button design, remove unnecessary code & npm package

---
 .../SignDocuments/package-lock.json           |  20 -
 microfrontends/SignDocuments/package.json     |   1 -
 .../FolderDrive/legaDriveComponent.js         |  32 +-
 .../src/Component/LegaDrive/LegaDrive.css     |   4 +-
 .../src/Component/LegaDrive/LegaDrive.js      |  15 +-
 .../src/Component/PdfRequestFiles.js          |  27 +-
 .../src/Component/SignYourselfPdf.js          | 107 +-
 .../src/Component/TemplatePlaceholder.js      |   8 +-
 .../src/Component/component/AddRoleModal.js   |   9 +-
 .../src/Component/component/CustomModal.js    |   5 +-
 .../Component/component/PlaceholderCopy.js    |   7 +-
 .../src/Component/component/emailComponent.js |  19 +-
 .../Component/component/fieldsComponent.js    |   5 +-
 .../Component/component/renderAllPdfPage.js   |   1 +
 .../src/Component/component/renderPdf.js      |  41 +-
 .../src/Component/component/signPad.js        |  39 +-
 .../Component/component/signerListPlace.js    |   4 +-
 .../src/Component/placeHolderSign.js          |  33 +-
 .../src/Component/recipientSignPdf.js         | 949 ------------------
 microfrontends/SignDocuments/src/Routes.js    |   2 -
 .../SignDocuments/src/css/signature.css       |  10 +-
 .../SignDocuments/src/utils/Utils.js          |  11 -
 22 files changed, 122 insertions(+), 1227 deletions(-)
 delete mode 100644 microfrontends/SignDocuments/src/Component/recipientSignPdf.js

diff --git a/microfrontends/SignDocuments/package-lock.json b/microfrontends/SignDocuments/package-lock.json
index aeedb863c..98359a78d 100644
--- a/microfrontends/SignDocuments/package-lock.json
+++ b/microfrontends/SignDocuments/package-lock.json
@@ -38,7 +38,6 @@
         "react-select": "^5.8.0",
         "react-signature-canvas": "^1.0.6",
         "reactour": "^1.19.1",
-        "select-dom": "^9.0.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -18883,20 +18882,6 @@
       "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz",
       "integrity": "sha512-HSdN78VMvFCSGCkh0oYX/tY4R3P1DW61f8+TeZZ4j2VLgfwvw0bpRSOv4PCVKisktIwbzHCfZsx+rLbbDBqIBA=="
     },
-    "node_modules/select-dom": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/select-dom/-/select-dom-9.0.0.tgz",
-      "integrity": "sha512-AD1NfASSwJQc1Sy713R1vT9CMmUSUo2tg0j1FtkRGIxllTphDrkuH2pYYvhRlGaoq3pS6tcKkKS/diEZLy+7BQ==",
-      "dependencies": {
-        "typed-query-selector": "^2.11.0"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fregante"
-      }
-    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -20403,11 +20388,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typed-query-selector": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.0.tgz",
-      "integrity": "sha512-qBs4sfmnLlPOyo2oSdvHbIFHe2CPgU54/1UGfSNceb7LARpIEVxUaeRX0Doje6oKpuySS2stqy90R3YrynR8Kg=="
-    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
diff --git a/microfrontends/SignDocuments/package.json b/microfrontends/SignDocuments/package.json
index c0e70c06d..1eae68515 100644
--- a/microfrontends/SignDocuments/package.json
+++ b/microfrontends/SignDocuments/package.json
@@ -34,7 +34,6 @@
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
     "reactour": "^1.19.1",
-    "select-dom": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
index a50857a01..5edf387e7 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
@@ -191,8 +191,10 @@ function PdfFileComponent({
       )
       .then((result) => {
         const res = result.data;
-        const updatedData = pdfData.filter((x) => x.objectId !== docId);
-        setPdfData(updatedData);
+        if (res) {
+          const updatedData = pdfData.filter((x) => x.objectId !== docId);
+          setPdfData(updatedData);
+        }
       })
       .catch((err) => {
         setIsAlert({
@@ -250,10 +252,13 @@ function PdfFileComponent({
 
         .then((Listdata) => {
           // console.log("Listdata ", Listdata);
-          const json = Listdata.data;
-
-          const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
-          setPdfData(updatedData);
+          const res = Listdata.data;
+          if (res) {
+            const updatedData = pdfData.filter(
+              (x) => x.objectId !== updateDocId
+            );
+            setPdfData(updatedData);
+          }
         })
         .catch((err) => {
           console.log("err", err);
@@ -283,13 +288,7 @@ function PdfFileComponent({
 
   //component to handle type of document and render according to type
   const handleFolderData = (data, ind, listType) => {
-    let createddate,
-      status,
-      isDecline,
-      signerExist,
-      isComplete,
-      signUrl,
-      isPlaceholder;
+    let createddate, status, isDecline, signerExist, isComplete, isPlaceholder;
     if (data.Type !== "Folder") {
       const expireDate = data.ExpiryDate && data.ExpiryDate.iso;
       const createdDate = data.createdAt && data.createdAt;
@@ -298,7 +297,7 @@ function PdfFileComponent({
       isDecline = data.IsDeclined && data.IsDeclined;
       isPlaceholder = data.Placeholders && data.Placeholders;
       signerExist = data.Signers && data.Signers;
-      signUrl = data.SignedUrl && data.SignedUrl;
+
       const expireUpdateDate = new Date(expireDate).getTime();
       const currDate = new Date().getTime();
       let isExpire = false;
@@ -739,11 +738,8 @@ function PdfFileComponent({
             onClick={() => {
               setIsDeleteDoc(false);
             }}
-            style={{
-              color: "black"
-            }}
             type="button"
-            className="finishBtn"
+            className="finishBtn cancelBtn"
           >
             No
           </button>
diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css
index 2997553ce..a74ca1553 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css
@@ -116,7 +116,9 @@
   margin: 30px;
   height: 100%;
 }
-
+.inputStyle{
+  border: 1.6px solid #ccc !important;
+}
 .folderComponent::-webkit-scrollbar {
   display: none;
   /* for Chrome, Safari, and Opera */
diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
index e68045b8e..15b3a425b 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
@@ -369,11 +369,8 @@ function PdfFile() {
                   alertMessage: ""
                 })
               }
-              style={{
-                color: "black"
-              }}
               type="button"
-              className="finishBtn"
+              className="finishBtn cancelBtn"
             >
               Close
             </button>
@@ -419,12 +416,13 @@ function PdfFile() {
                     fontWeight: "400"
                   }}
                 >
-                  Name*
+                  Name
+                  <span style={{ color: "red" }}>*</span>
                 </label>
 
                 <input
                   required
-                  className="form-control"
+                  className="form-control inputStyle"
                   type="text"
                   value={newFolderName}
                   onChange={(e) => handleFolderName(e)}
@@ -455,11 +453,8 @@ function PdfFile() {
                     Add
                   </button>
                   <button
-                    style={{
-                      color: "black"
-                    }}
                     type="button"
-                    className="finishBtn"
+                    className="finishBtn cancelBtn"
                     onClick={oncloseFolder}
                   >
                     Close
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 8c384da3b..901c37a3f 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -3,8 +3,6 @@ import { themeColor } from "../utils/ThemeColor/backColor";
 import { PDFDocument } from "pdf-lib";
 import "../css/signature.css";
 import axios from "axios";
-import ModalHeader from "react-bootstrap/esm/ModalHeader";
-import Modal from "react-bootstrap/Modal";
 import loader from "../assests/loader2.gif";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -12,11 +10,7 @@ import { useParams } from "react-router-dom";
 import SignPad from "./component/signPad";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
 import {
-  convertPNGtoJPEG,
   contractDocument,
-  getBase64FromIMG,
-  getBase64FromUrl,
-  urlValidator,
   multiSignEmbed,
   embedDocId,
   pdfNewWidthFun,
@@ -32,7 +26,6 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import CustomModal from "./component/CustomModal";
-import AlertComponent from "./component/alertComponent";
 import Title from "./component/Title";
 import DefaultSignature from "./component/defaultSignature";
 import ModalUi from "../premitives/ModalUi";
@@ -722,11 +715,8 @@ function PdfRequestFiles() {
                       alertMessage: ""
                     });
                   }}
-                  style={{
-                    color: "black"
-                  }}
                   type="button"
-                  className="finishBtn"
+                  className="finishBtn cancelBtn"
                 >
                   Ok
                 </button>
@@ -806,11 +796,8 @@ function PdfRequestFiles() {
                           alertMessage: ""
                         });
                       }}
-                      style={{
-                        color: "black"
-                      }}
                       type="button"
-                      className="finishBtn"
+                      className="finishBtn cancelBtn"
                     >
                       Close
                     </button>
@@ -823,11 +810,8 @@ function PdfRequestFiles() {
                         alertMessage: ""
                       });
                     }}
-                    style={{
-                      color: "black"
-                    }}
                     type="button"
-                    className="finishBtn"
+                    className="finishBtn cancelBtn"
                   >
                     Ok
                   </button>
@@ -871,11 +855,8 @@ function PdfRequestFiles() {
                     }}
                   ></div>
                   <button
-                    style={{
-                      color: "black"
-                    }}
                     type="button"
-                    className="finishBtn"
+                    className="finishBtn cancelBtn"
                     onClick={() =>
                       setIsCompleted({ isModal: false, isCertificate: true })
                     }
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index b46cf719c..221d3d3f7 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -13,17 +13,13 @@ import { useDrag, useDrop } from "react-dnd";
 import SignPad from "./component/signPad";
 import EmailComponent from "./component/emailComponent";
 import FieldsComponent from "./component/fieldsComponent";
-import Modal from "react-bootstrap/Modal";
-import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import {
   contractDocument,
   embedDocId,
   multiSignEmbed,
   pdfNewWidthFun,
   addDefaultSignatureImg,
-  onImageSelect,
-  placeholderHeight,
-  placeholderWidth
+  onImageSelect
 } from "../utils/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -33,9 +29,7 @@ import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
-import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
-import { modalAlign } from "../utils/Utils";
-import AlertComponent from "./component/alertComponent";
+import { contractUsers, contactBook } from "../utils/Utils";
 import PlaceholderCopy from "./component/PlaceholderCopy";
 import TourContentWithBtn from "../premitives/TourContentWithBtn";
 import Title from "./component/Title";
@@ -444,44 +438,6 @@ function SignYourSelf() {
         ignoreEncryption: true
       });
 
-      // //checking if signature is only one then send image url in jpeg formate to server
-      // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
-      //   //embed document's object id to all pages in pdf document
-      //   await embedDocId(pdfDoc, documentId, allPages);
-      //   const pdfBase64 = await pdfDoc.saveAsBase64({
-      //     useObjectStreams: false
-      //   });
-
-      //   for (let xyData of xyPostion) {
-      //     const imgUrlList = xyData.pos;
-      //     const pageNo = xyData.pageNumber;
-      //     imgUrlList.map(async (data) => {
-      //       let ImgUrl = data.SignUrl;
-      //       //cheking signUrl is defau;t signature url of custom url
-      //       const checkUrl = urlValidator(ImgUrl);
-      //       //if default signature url then convert it in base 64
-      //       if (checkUrl) {
-      //         ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
-      //       }
-      //       //function for convert signature png base64 url to jpeg base64
-      //       convertPNGtoJPEG(ImgUrl)
-      //         .then((jpegBase64Data) => {
-      //           const removeBase64Fromjpeg = "data:image/jpeg;base64,";
-      //           const newImgUrl = jpegBase64Data.replace(
-      //             removeBase64Fromjpeg,
-      //             ""
-      //           );
-      //           //function for call to embed signature in pdf and get digital signature pdf
-      //           signPdfFun(newImgUrl, documentId, data, pdfBase64, pageNo);
-      //         })
-      //         .catch((error) => {
-      //           console.error("Error:", error);
-      //         });
-      //     });
-      //   }
-      // }
-      //else if signature is more than one then embed all sign with the use of pdf-lib
-      // else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
       const flag = true;
       //embed document's object id to all pages in pdf document
       await embedDocId(pdfDoc, documentId, allPages);
@@ -497,7 +453,6 @@ function SignYourSelf() {
 
       //function for call to embed signature in pdf and get digital signature pdf
       signPdfFun(pdfBytes, documentId);
-      // }
       setIsSignPad(false);
       setIsEmail(true);
       setXyPostion([]);
@@ -506,51 +461,10 @@ function SignYourSelf() {
   }
 
   //function for get digital signature
-  const signPdfFun = async (
-    base64Url,
-    documentId,
-    xyPosData,
-    pdfBase64Url,
-    pageNo
-  ) => {
-    let singleSign;
-    const newWidth = containerWH.width;
-    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-
-    // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
-    //   const xPos = () => {
-    //     const resizePos = xyPosData.xPosition;
-    //     if (isMobile) {
-    //       return resizePos * scale;
-    //     } else {
-    //       return resizePos;
-    //     }
-    //   };
-    //   const height = xyPosData.Height ? xyPosData.Height : 60;
-    //   const resizePos = xyPosData.yBottom;
-    //   const bottomY = xyPosData.isDrag
-    //     ? resizePos * scale - height * scale
-    //     : xyPosData.firstYPos
-    //       ? resizePos * scale - height * scale + xyPosData.firstYPos
-    //       : resizePos * scale - height * scale;
-
-    //   singleSign = {
-    //     pdfFile: pdfBase64Url,
-    //     docId: documentId,
-    //     sign: {
-    //       Base64: base64Url,
-    //       Left: xPos(),
-    //       Bottom: bottomY,
-    //       Width: placeholderWidth(xyPosData, scale),
-    //       Height: placeholderHeight(xyPosData, scale),
-    //       Page: pageNo
-    //     }
-    //   };
-    // } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
-    singleSign = {
+  const signPdfFun = async (base64Url, documentId) => {
+    const singleSign = {
       pdfFile: base64Url,
       docId: documentId
-      // };
     };
 
     await axios
@@ -894,11 +808,8 @@ function SignYourSelf() {
                       alertMessage: ""
                     });
                   }}
-                  style={{
-                    color: "black"
-                  }}
                   type="button"
-                  className="finishBtn"
+                  className="finishBtn cancelBtn"
                 >
                   Ok
                 </button>
@@ -926,13 +837,7 @@ function SignYourSelf() {
                   }}
                 ></div>
                 <button
-                  style={{
-                    borderRadius: "0px",
-                    border: "1.5px solid #e3e2e1",
-                    fontWeight: "600",
-                    color: "black"
-                  }}
-                  className="btn"
+                  className="finishBtn cancelBtn"
                   onClick={() => setShowAlreadySignDoc({ status: false })}
                 >
                   Close
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
index f84663c3c..5e078ac45 100644
--- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
@@ -1061,11 +1061,8 @@ const TemplatePlaceholder = () => {
                         onClick={() => {
                           setIsCreateDocModal(false);
                         }}
-                        style={{
-                          color: "black"
-                        }}
                         type="button"
-                        className="finishBtn"
+                        className="finishBtn cancelBtn"
                       >
                         No
                       </button>
@@ -1179,6 +1176,7 @@ const TemplatePlaceholder = () => {
                   handleDeleteUser={handleDeleteUser}
                   handleRoleChange={handleRoleChange}
                   handleOnBlur={handleOnBlur}
+                  title={"Role"}
                 />
               </div>
             ) : (
@@ -1197,6 +1195,7 @@ const TemplatePlaceholder = () => {
                     handleDeleteUser={handleDeleteUser}
                     handleRoleChange={handleRoleChange}
                     handleOnBlur={handleOnBlur}
+                    title={"Role"}
                   />
                   <div data-tut="reactourSecond">
                     <FieldsComponent
@@ -1214,6 +1213,7 @@ const TemplatePlaceholder = () => {
                       isDragStamp={isDragStamp}
                       isSignYourself={false}
                       addPositionOfSignature={addPositionOfSignature}
+                      title={"Role"}
                     />
                   </div>
                 </div>
diff --git a/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js b/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js
index ede404e54..8e6491376 100644
--- a/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js
+++ b/microfrontends/SignDocuments/src/Component/component/AddRoleModal.js
@@ -8,9 +8,7 @@ const AddRoleModal = (props) => {
       isOpen={props.isModalRole}
       handleClose={props.handleCloseRoleModal}
     >
-      <div 
-        className="addusercontainer"
-      >
+      <div className="addusercontainer">
         <form
           style={{ display: "flex", flexDirection: "column" }}
           onSubmit={props.handleAddRole}
@@ -54,11 +52,8 @@ const AddRoleModal = (props) => {
             </button>
             <button
               onClick={props.handleCloseRoleModal}
-              style={{
-                color: "black"
-              }}
               type="button"
-              className="finishBtn"
+              className="finishBtn cancelBtn"
             >
               Close
             </button>
diff --git a/microfrontends/SignDocuments/src/Component/component/CustomModal.js b/microfrontends/SignDocuments/src/Component/component/CustomModal.js
index 5b91cf932..ba2eb720d 100644
--- a/microfrontends/SignDocuments/src/Component/component/CustomModal.js
+++ b/microfrontends/SignDocuments/src/Component/component/CustomModal.js
@@ -49,11 +49,8 @@ function CustomModal({
                     Yes
                   </button>
                   <button
-                    style={{
-                      color: "black"
-                    }}
                     type="button"
-                    className="finishBtn"
+                    className="finishBtn cancelBtn"
                     onClick={() => setIsDecline({ isDeclined: false })}
                   >
                     Close
diff --git a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
index 5fc56ad20..3a9049ade 100644
--- a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
+++ b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import Modal from "react-bootstrap/Modal";
-import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import { themeColor } from "../../utils/ThemeColor/backColor";
 import ModalUi from "../../premitives/ModalUi";
 
@@ -251,11 +249,8 @@ function PlaceholderCopy(props) {
           Apply
         </button>
         <button
-          style={{
-            color: "black"
-          }}
           type="button"
-          className="finishBtn"
+          className="finishBtn cancelBtn"
           onClick={() => props.setIsPageCopy(false)}
         >
           Cancel
diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
index b5f8b323c..1b5aaa36d 100644
--- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
@@ -86,6 +86,8 @@ function EmailComponent({
         isShow: true,
         alertMessage: "something went wrong"
       });
+      setEmailValue("");
+      setEmailList([]);
     } else {
       setIsLoading(false);
       setIsEmail(false);
@@ -93,6 +95,8 @@ function EmailComponent({
         isShow: true,
         alertMessage: "something went wrong"
       });
+      setEmailValue("");
+      setEmailList([]);
     }
   };
 
@@ -259,7 +263,8 @@ function EmailComponent({
                   verticalAlign: "baseline",
                   fontWeight: "500",
                   color: "#403f3e",
-                  fontSize: "15px"
+                  fontSize: "15px",
+                  marginBottom: "5px"
                 }}
               >
                 Recipients added here will get a copy of the signed document.
@@ -358,9 +363,10 @@ function EmailComponent({
                 <i
                   style={{
                     backgroundColor: themeColor(),
-                    padding: "2px 10px",
+                    padding: "5px 7px",
                     marginTop: "10px",
-                    color: "white"
+                    color: "white",
+                    borderRadius: "2px"
                   }}
                   className="fa fa-plus"
                   aria-hidden="true"
@@ -370,7 +376,7 @@ function EmailComponent({
               <div
                 style={{
                   background: "#e3e2e1",
-                  marginTop: "30px",
+                  marginTop: "10px",
                   padding: "5px",
                   borderRadius: "3px"
                 }}
@@ -403,11 +409,8 @@ function EmailComponent({
                 Send
               </button>
               <button
-                style={{
-                  color: "black"
-                }}
                 type="button"
-                className="finishBtn"
+                className="finishBtn cancelBtn"
                 onClick={() => {
                   setIsEmail(false);
                   setEmailValue("");
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
index 189946bc7..c3b4947ef 100644
--- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
@@ -35,7 +35,8 @@ function FieldsComponent({
   handleDeleteUser,
   signerPos,
   handleRoleChange,
-  handleOnBlur
+  handleOnBlur,
+  title
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
   const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
@@ -95,7 +96,7 @@ function FieldsComponent({
                     textAlign: "center"
                   }}
                 >
-                  Recipient
+                  {title ? title : "Recipient"}
                 </span>
                 <span
                   style={{
diff --git a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
index 85d424200..68c7ada02 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
@@ -50,6 +50,7 @@ function RenderAllPdfPage({
               }}
             >
               <Document
+                loading={"Loading Document.."}
                 onLoadSuccess={onDocumentLoad}
                 file={pdfUrl ? pdfUrl : signPdfUrl}
                 //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index 002a3b1ca..0172cea2e 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -521,13 +521,16 @@ function RenderPdf({
                                       />
                                       <div
                                         onClick={(e) => {
-                                          e.stopPropagation();
-                                          handleLinkUser(data.Id);
-                                          setUniqueId(data.Id);
+                                          if (!isDragging) {
+                                            handleLinkUser(data.Id);
+                                            setUniqueId(data.Id);
+                                          }
                                         }}
                                         onTouchEnd={() => {
-                                          handleLinkUser(data.Id);
-                                          setUniqueId(data.Id);
+                                          if (!isDragging) {
+                                            handleLinkUser(data.Id);
+                                            setUniqueId(data.Id);
+                                          }
                                           const dataNewPlace = addZIndex(
                                             signerPos,
                                             pos.key,
@@ -852,9 +855,11 @@ function RenderPdf({
                                   placeData.pos.map((pos) => {
                                     return (
                                       <Rnd
-                                        onClick={() => {
-                                          handleLinkUser(data.Id);
-                                          setUniqueId(data.Id);
+                                        onClick={(e) => {
+                                          if (!isDragging) {
+                                            handleLinkUser(data.Id);
+                                            setUniqueId(data.Id);
+                                          }
                                           const dataNewPlace = addZIndex(
                                             signerPos,
                                             pos.key,
@@ -898,20 +903,14 @@ function RenderPdf({
                                             ? pos.Width / pos.Height
                                             : 2.5
                                         }
-                                        onDragStop={
-                                          (event, dragElement) =>
-                                            handleStop(
-                                              event,
-                                              dragElement,
-                                              data.Id,
-                                              pos.key
-                                            )
-                                          // data.signerObjId,
+                                        onDragStop={(event, dragElement) =>
+                                          handleStop(
+                                            event,
+                                            dragElement,
+                                            data.Id,
+                                            pos.key
+                                          )
                                         }
-                                        // default={{
-                                        //   x: pos.xPosition,
-                                        //   y: pos.yPosition
-                                        // }}
                                         default={{
                                           x: xPos(pos),
                                           y: yPos(pos)
diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js
index 576a45757..bb128cccd 100644
--- a/microfrontends/SignDocuments/src/Component/component/signPad.js
+++ b/microfrontends/SignDocuments/src/Component/component/signPad.js
@@ -56,12 +56,16 @@ function SignPad({
     setFontSelect("Fasthand");
   }, []);
   //function for clear signature
-  const handleClear = () => {
-    if (canvasRef.current) {
-      canvasRef.current.clear();
-    }
+  const handleClear = (type) => {
+    if (isTab === "draw") {
+      if (canvasRef.current) {
+        canvasRef.current.clear();
+      }
 
-    setIsSignImg("");
+      setIsSignImg("");
+    } else if (isTab === "uploadImage") {
+      setImage("");
+    }
   };
   //function for set signature url
   const handleSignatureChange = (dataURL) => {
@@ -73,11 +77,12 @@ function SignPad({
   //save button component
   const SaveBtn = () => {
     return (
-      <div>
-        {!isStamp && !isImageSelect && (
+      <div style={{ marginTop: "2px" }}>
+        {(isTab === "draw" || isTab === "uploadImage") && (
           <button
             style={{
-              color: "black"
+              color: "black",
+              border: "1px solid #ccc"
             }}
             type="button"
             className="finishBtn saveBtn"
@@ -124,7 +129,9 @@ function SignPad({
           }
           type="button"
           className={
-            isSignImg || image ? "finishBtn saveBtn" : "disabledFinish saveBtn"
+            isSignImg || image || isDefaultSign || textWidth
+              ? "finishBtn saveBtn"
+              : "disabledFinish saveBtn"
           }
         >
           Save
@@ -213,7 +220,10 @@ function SignPad({
       {isSignPad && (
         <div className="modaloverlay">
           <div className="modalcontainer">
-            <div className="modalheader" style={{ padding: "0 5px" }}>
+            <div
+              className="modalheader"
+              style={{ padding: "0 13px", marginTop: "5px" }}
+            >
               <div className="modaltitle">
                 <div
                   style={{
@@ -221,8 +231,7 @@ function SignPad({
                     flexDirection: "row",
                     justifyContent: "space-between",
                     background: "white",
-
-                    marginTop: "15px"
+                    marginTop: "3px"
                   }}
                 >
                   <div
@@ -445,7 +454,9 @@ function SignPad({
                         ref={imageRef}
                         src={image.src}
                         style={{
-                          objectFit: "contain"
+                          objectFit: "contain",
+                          height: "100%",
+                          width: "100%"
                         }}
                       />
                     </div>
@@ -534,7 +545,7 @@ function SignPad({
                       display: "flex",
                       flexDirection: "row",
                       justifyContent: "space-between",
-                      marginTop: "4px"
+                      marginTop: "10px"
                     }}
                   >
                     <div style={{ display: "flex", flexDirection: "row" }}>
diff --git a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js
index 9a4c56b08..68b0df130 100644
--- a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js
+++ b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js
@@ -12,7 +12,9 @@ function SignerListPlace(props) {
           padding: "5px"
         }}
       >
-        <span className="signedStyle">Recipients</span>
+        <span className="signedStyle">
+          {props.title ? props.title : "Recipients"}
+        </span>
       </div>
       <div className="signerList">
         <RecipientList {...props} />
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 953100091..5dd79e66b 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -83,6 +83,7 @@ function PlaceHolderSign() {
   const [isAddUser, setIsAddUser] = useState({});
   const [signerExistModal, setSignerExistModal] = useState(false);
   const [isDontShow, setIsDontShow] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -462,11 +463,12 @@ function PlaceHolderSign() {
   //function for save x and y position and show signature  tab on that position
   const handleTabDrag = (key, signerId) => {
     setDragKey(key);
+    setIsDragging(true);
   };
 
   //function for set and update x and y postion after drag and drop signature tab
   const handleStop = (event, dragElement, signerId, key) => {
-    if (!isResize) {
+    if (!isResize && isDragging) {
       const dataNewPlace = addZIndex(signerPos, key, setZIndex);
       let updateSignPos = [...signerPos];
       updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
@@ -525,6 +527,9 @@ function PlaceHolderSign() {
         }
       }
     }
+    setTimeout(() => {
+      setIsDragging(false);
+    }, 200);
   };
 
   //function for delete signature block
@@ -1034,11 +1039,8 @@ function PlaceHolderSign() {
                   )}
                   <button
                     onClick={() => setIsSendAlert({})}
-                    style={{
-                      color: "black"
-                    }}
                     type="button"
-                    className="finishBtn"
+                    className="finishBtn cancelBtn"
                   >
                     Close
                   </button>
@@ -1088,11 +1090,8 @@ function PlaceHolderSign() {
                           setIsSend(false);
                           setSignerPos([]);
                         }}
-                        style={{
-                          color: "black"
-                        }}
                         type="button"
-                        className="finishBtn"
+                        className="finishBtn cancelBtn"
                       >
                         No
                       </button>
@@ -1103,11 +1102,8 @@ function PlaceHolderSign() {
                         setIsSend(false);
                         setSignerPos([]);
                       }}
-                      style={{
-                        color: "black"
-                      }}
                       type="button"
-                      className="finishBtn"
+                      className="finishBtn cancelBtn"
                     >
                       Close
                     </button>
@@ -1140,11 +1136,8 @@ function PlaceHolderSign() {
                     onClick={() => {
                       setIsShowEmail(false);
                     }}
-                    style={{
-                      color: "black"
-                    }}
                     type="button"
-                    className="finishBtn"
+                    className="finishBtn cancelBtn"
                   >
                     Ok
                   </button>
@@ -1204,6 +1197,7 @@ function PlaceHolderSign() {
                     setSignerObjId={setSignerObjId}
                     handleLinkUser={handleLinkUser}
                     setUniqueId={setUniqueId}
+                    isDragging={isDragging}
                   />
                 )}
               </div>
@@ -1308,11 +1302,8 @@ function PlaceHolderSign() {
             ></div>
             <button
               onClick={() => setSignerExistModal(false)}
-              style={{
-                color: "black"
-              }}
               type="button"
-              className="finishBtn"
+              className="finishBtn cancelBtn"
             >
               Close
             </button>
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
deleted file mode 100644
index bc1ef4d7a..000000000
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ /dev/null
@@ -1,949 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { PDFDocument } from "pdf-lib";
-import "../css/./signature.css";
-import axios from "axios";
-import Modal from "react-bootstrap/Modal";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import ModalHeader from "react-bootstrap/esm/ModalHeader";
-import { themeColor } from "../utils/ThemeColor/backColor";
-import { useParams } from "react-router-dom";
-import SignPad from "./component/signPad";
-import RenderAllPdfPage from "./component/renderAllPdfPage";
-import DefaultSignature from "./component/defaultSignature";
-import {
-  getBase64FromUrl,
-  getBase64FromIMG,
-  pdfNewWidthFun,
-  convertPNGtoJPEG,
-  contractUsers,
-  contactBook,
-  contractDocument,
-  urlValidator,
-  multiSignEmbed,
-  embedDocId,
-  signPdfFun,
-  addDefaultSignatureImg,
-  onImageSelect
-} from "../utils/Utils";
-import Tour from "reactour";
-import Signedby from "./component/signedby";
-import { onSaveImage, onSaveSign } from "../utils/Utils";
-import Loader from "./component/loader";
-import HandleError from "./component/HandleError";
-import Nodata from "./component/Nodata";
-import Header from "./component/header";
-import RenderPdf from "./component/renderPdf";
-import CustomModal from "./component/CustomModal";
-import { modalAlign } from "../utils/Utils";
-import AlertComponent from "./component/alertComponent";
-import TourContentWithBtn from "../premitives/TourContentWithBtn";
-import Title from "./component/Title";
-function EmbedPdfImage() {
-  const { id, contactBookId } = useParams();
-  const [isSignPad, setIsSignPad] = useState(false);
-  const [pdfUrl, setPdfUrl] = useState();
-  const [allPages, setAllPages] = useState(null);
-  const numPages = 1;
-  const [pageNumber, setPageNumber] = useState(1);
-  const [image, setImage] = useState(null);
-  const [isImageSelect, setIsImageSelect] = useState(false);
-  const [signature, setSignature] = useState();
-  const [isStamp, setIsStamp] = useState(false);
-  const [signKey, setSignKey] = useState();
-  const [imgWH, setImgWH] = useState({});
-  const [xyPostion, setXyPostion] = useState([]);
-  const [isAlreadySign, setIsAlreadySign] = useState({ status: false });
-  const imageRef = useRef(null);
-  const [signedPdfData, setSignedPdfData] = useState();
-  const [handleError, setHandleError] = useState();
-  const [isLoading, setIsLoading] = useState({
-    isLoad: true,
-    message: "This might take some time"
-  });
-  const [defaultSignImg, setDefaultSignImg] = useState();
-  const [userObjectID, setUserObjectID] = useState();
-  const [isDocId, setIsDocId] = useState(false);
-  const [pdfNewWidth, setPdfNewWidth] = useState();
-  const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
-  const [signTour, setSignTour] = useState(true);
-  const [checkTourStatus, setCheckTourStatus] = useState(false);
-  const [signerUserId, setSignerUserId] = useState();
-  const [tourStatus, setTourStatus] = useState([]);
-  const [isExpired, setIsExpired] = useState(false);
-  const [noData, setNoData] = useState(false);
-  const [contractName, setContractName] = useState("");
-  const [isDecline, setIsDecline] = useState({
-    isDeclined: false
-  });
-  const [addDefaultSign, setAddDefaultSign] = useState({
-    isShow: false,
-    alertMessage: ""
-  });
-  const [pdfLoadFail, setPdfLoadFail] = useState({
-    status: false,
-    type: "load"
-  });
-  const [containerWH, setContainerWH] = useState({});
-  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
-  const [isDontShow, setIsDontShow] = useState(false);
-  const docId = id && id;
-  const isMobile = window.innerWidth < 767;
-  const index = xyPostion.findIndex((object) => {
-    return object.pageNumber === pageNumber;
-  });
-  const divRef = useRef(null);
-  const senderUser = localStorage.getItem(
-    `Parse/${localStorage.getItem("parseAppId")}/currentUser`
-  )
-    ? localStorage.getItem(
-        `Parse/${localStorage.getItem("parseAppId")}/currentUser`
-      )
-    : `${localStorage.getItem("UserInformation")}` &&
-      `${localStorage.getItem("UserInformation")}`;
-  const jsonSender = JSON.parse(senderUser);
-
-  useEffect(() => {
-    getDocumentDetails();
-  }, []);
-  useEffect(() => {
-    if (divRef.current) {
-      const pdfWidth = pdfNewWidthFun(divRef);
-      setPdfNewWidth(pdfWidth);
-      setContainerWH({
-        width: divRef.current.offsetWidth,
-        height: divRef.current.offsetHeight
-      });
-    }
-  }, [divRef.current]);
-
-  //function for get document details for perticular signer with signer'object id
-  const getDocumentDetails = async () => {
-    let currUserId, userObjectId;
-    //getting contracts_contactBook details
-    const json = await contactBook(contactBookId);
-    if (json && json.length > 0) {
-      setContractName("_Contactbook");
-
-      userObjectId = json[0].UserId.objectId;
-      setUserObjectID(userObjectId);
-      currUserId = json[0].objectId;
-
-      setSignerUserId(currUserId);
-      const tourstatus = json[0].TourStatus && json[0].TourStatus;
-
-      if (tourstatus && tourstatus.length > 0) {
-        setTourStatus(tourstatus);
-        const checkTourRecipients = tourstatus.filter(
-          (data) => data.recipientssign
-        );
-        if (checkTourRecipients && checkTourRecipients.length > 0) {
-          setCheckTourStatus(checkTourRecipients[0].recipientssign);
-        }
-      }
-    } else if (json === "Error: Something went wrong!") {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
-    } else {
-      const json = await contractUsers(jsonSender.email);
-      if (json && json.length > 0) {
-        setContractName("_Users");
-        if (json[0]) {
-          userObjectId = json[0].UserId.objectId;
-          setUserObjectID(userObjectId);
-          currUserId = json[0].objectId;
-
-          setSignerUserId(currUserId);
-          const tourstatus = json[0].TourStatus && json[0].TourStatus;
-
-          if (tourstatus && tourstatus.length > 0) {
-            setTourStatus(tourstatus);
-            const checkTourRecipients = tourstatus.filter(
-              (data) => data.recipientssign
-            );
-            if (checkTourRecipients && checkTourRecipients.length > 0) {
-              setCheckTourStatus(checkTourRecipients[0].recipientssign);
-            }
-          }
-        } else {
-          setNoData(true);
-          const loadObj = {
-            isLoad: false
-          };
-          setIsLoading(loadObj);
-        }
-      } else if (json === "Error: Something went wrong!") {
-        const loadObj = {
-          isLoad: false
-        };
-        setHandleError("Error: Something went wrong!");
-        setIsLoading(loadObj);
-      } else {
-        setNoData(true);
-
-        const loadObj = {
-          isLoad: false
-        };
-        setIsLoading(loadObj);
-      }
-    }
-
-    //getting document details
-    const documentData = await contractDocument(docId);
-    if (documentData && documentData.length > 0) {
-      const declined = documentData[0].IsDeclined && documentData[0].IsDeclined;
-      const isCompleted =
-        documentData[0].IsCompleted && documentData[0].IsCompleted;
-      const expireDate = documentData[0].ExpiryDate.iso;
-
-      const expireUpdateDate = new Date(expireDate).getTime();
-      const currDate = new Date().getTime();
-      if (isCompleted) {
-        //checking document is completed (signed by all requested signers) than isCompleted true
-        //then show alert with completed message
-        const alreadySign = {
-          status: true,
-          mssg: "This document has been successfully signed!"
-        };
-        setIsAlreadySign(alreadySign);
-        setPdfUrl(documentData[0].SignedUrl);
-        setSignedPdfData(documentData);
-      } else if (declined) {
-        const currentDecline = {
-          currnt: "another",
-          isDeclined: true
-        };
-        setIsDecline(currentDecline);
-
-        setSignedPdfData(documentData);
-      } else if (currDate > expireUpdateDate) {
-        setIsExpired(true);
-        const checkDocIdExist =
-          documentData[0].AuditTrail &&
-          documentData[0].AuditTrail.length > 0 &&
-          documentData[0].AuditTrail.filter(
-            (data) => data.Activity === "Signed"
-          );
-
-        //if signed by someone than go to in if condition
-        // and second signer could not be add documentId
-        //for that setIsDocId true
-        if (checkDocIdExist && checkDocIdExist.length > 0) {
-          setIsDocId(true);
-          const currUser =
-            documentData.Placeholders &&
-            documentData.Placeholders.filter(
-              (data) => data.signerObjId === currUserId
-            );
-
-          setSignedPdfData(documentData);
-
-          setXyPostion(currUser[0].placeHolder);
-
-          const key = currUser[0].placeHolder[0].pos[0].key;
-          setSignKey(key);
-        }
-        //for show current requested signer's placeholder
-        else {
-          const currUser =
-            documentData[0].Placeholders &&
-            documentData[0].Placeholders.filter(
-              (data) => data.signerObjId === currUserId
-            );
-
-          setSignedPdfData(documentData);
-
-          setXyPostion(currUser[0].placeHolder);
-
-          const key = currUser[0].placeHolder[0].pos[0].key;
-          setSignKey(key);
-        }
-      } else {
-        //checking document has signed by someone or not
-
-        const checkDocIdExist =
-          documentData[0].AuditTrail &&
-          documentData[0].AuditTrail.length > 0 &&
-          documentData[0].AuditTrail.filter(
-            (data) => data.Activity === "Signed"
-          );
-
-        //if signed by someone than go to in if condition
-        // and second signer could not be add documentId
-        //for that setIsDocId true
-
-        if (checkDocIdExist && checkDocIdExist.length > 0) {
-          setIsDocId(true);
-
-          //condition for checking document signed by current requested user or not
-          const checkAlreadyBySigner = documentData[0].AuditTrail.filter(
-            (data) =>
-              data.UserPtr.objectId === currUserId && data.Activity === "Signed"
-          );
-
-          // if checkAlreadyBySigner has some data that current user already sign this document
-          // then show alert with message
-          if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) {
-            const alreadySign = {
-              status: true,
-              mssg: "You have successfully signed the document!"
-            };
-            setIsAlreadySign(alreadySign);
-            setPdfUrl(documentData[0].SignedUrl);
-            setSignedPdfData(documentData);
-          }
-          //else show placeholder of current requested signer
-          else {
-            const currUser =
-              documentData[0].Placeholders &&
-              documentData[0].Placeholders.filter(
-                (data) => data.signerObjId === currUserId
-              );
-
-            setSignedPdfData(documentData);
-
-            setXyPostion(currUser[0].placeHolder);
-
-            const key = currUser[0].placeHolder[0].pos[0].key;
-            setSignKey(key);
-          }
-        }
-        //for show current requested signer's placeholder
-        else {
-          const currUser =
-            documentData[0].Placeholders &&
-            documentData[0].Placeholders.filter(
-              (data) => data.signerObjId === currUserId
-            );
-
-          setSignedPdfData(documentData);
-
-          setXyPostion(currUser[0].placeHolder);
-
-          const key = currUser[0].placeHolder[0].pos[0].key;
-          setSignKey(key);
-        }
-      }
-    } else if (
-      documentData === "Error: Something went wrong!" ||
-      (documentData.result && documentData.result.error)
-    ) {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
-    } else {
-      setNoData(true);
-
-      const loadObj = {
-        isLoad: false
-      };
-      setIsLoading(loadObj);
-    }
-    await axios
-      .get(
-        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-          "_appName"
-        )}_Signature?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${userObjectId}"}}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-          }
-        }
-      )
-      .then((Listdata) => {
-        const json = Listdata.data;
-        const res = json.results;
-
-        if (res[0] && res.length > 0) {
-          setDefaultSignImg(res[0].ImageURL);
-        }
-        const loadObj = {
-          isLoad: false
-        };
-        setIsLoading(loadObj);
-      })
-      .catch((err) => {
-        console.log("axois err ", err);
-        const loadObj = {
-          isLoad: false
-        };
-        setHandleError("Error: Something went wrong!");
-        setIsLoading(loadObj);
-      });
-  };
-
-  //function for get pdf page details
-  const pageDetails = async (pdf) => {
-    const load = {
-      status: true
-    };
-    setPdfLoadFail(load);
-    pdf.getPage(1).then((pdfPage) => {
-      const pageWidth = pdfPage.view[2];
-
-      setPdfOriginalWidth(pageWidth);
-    });
-  };
-
-  //function for embed signature or image url in pdf
-  async function embedImages() {
-    let checkSignUrl = [];
-
-    for (let i = 0; i < xyPostion.length; i++) {
-      const posData = xyPostion[i].pos.filter((pos) => !pos.SignUrl);
-
-      if (posData && posData.length > 0) {
-        checkSignUrl.push(posData);
-      }
-    }
-
-    if (checkSignUrl && checkSignUrl.length > 0) {
-      setIsAlert({
-        isShow: true,
-        alertMessage: "Please complete your signature!"
-      });
-    } else {
-      const loadObj = {
-        isLoad: true,
-        message: "This might take some time"
-      };
-      setIsLoading(loadObj);
-      const url = pdfUrl
-        ? pdfUrl
-        : signedPdfData[0] && signedPdfData[0].SignedUrl;
-      const existingPdfBytes = await fetch(url).then((res) =>
-        res.arrayBuffer()
-      );
-
-      // Load a PDFDocument from the existing PDF bytes
-      const pdfDoc = await PDFDocument.load(existingPdfBytes, {
-        ignoreEncryption: true
-      });
-
-      const pngUrl = xyPostion;
-
-      // let pdfBase64;
-      //checking if signature is only one then send image url in jpeg formate to server
-      // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
-      //   if (isDocId) {
-      //     pdfBase64 = await getBase64FromUrl(url);
-      //   } else {
-      //     //embed document's object id to all pages in pdf document
-      //     await embedDocId(pdfDoc, docId, allPages);
-      //     pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-      //   }
-
-      //   for (let xyData of xyPostion) {
-      //     const imgUrlList = xyData.pos;
-      //     const pageNo = xyData.pageNumber;
-      //     imgUrlList.map(async (data) => {
-      //       //cheking signUrl is defau;t signature url of custom url
-      //       let ImgUrl = data.SignUrl;
-      //       const checkUrl = urlValidator(ImgUrl);
-
-      //       //if default signature url then convert it in base 64
-      //       if (checkUrl) {
-      //         ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
-      //       }
-      //       //function for convert signature png base64 url to jpeg base64
-      //       convertPNGtoJPEG(ImgUrl)
-      //         .then((jpegBase64Data) => {
-      //           const removeBase64Fromjpeg = "data:image/jpeg;base64,";
-      //           const newImgUrl = jpegBase64Data.replace(
-      //             removeBase64Fromjpeg,
-      //             ""
-      //           );
-
-      //           //function for embed signature in pdf and get digital signature pdf
-      //           signPdfFun(
-      //             newImgUrl,
-      //             docId,
-      //             signerUserId,
-      //             pdfOriginalWidth,
-      //             xyPostion,
-      //             containerWH,
-      //             setIsAlert,
-      //             data,
-      //             pdfBase64,
-      //             pageNo
-      //           )
-      //             .then((res) => {
-      //               if (res && res.status === "success") {
-      //                 getDocumentDetails();
-      //               } else {
-      //                 setIsAlert({
-      //                   isShow: true,
-      //                   alertMessage: "something went wrong"
-      //                 });
-      //               }
-      //             })
-      //             .catch((err) => {
-      //               setIsAlert({
-      //                 isShow: true,
-      //                 alertMessage: "something went wrong"
-      //               });
-      //             });
-      //         })
-      //         .catch((error) => {
-      //           setIsAlert({
-      //             isShow: true,
-      //             alertMessage: "something went wrong"
-      //           });
-      //         });
-      //     });
-      //   }
-      // }
-      // //else if signature is more than one then embed all sign with the use of pdf-lib
-      // else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
-      const flag = false;
-      //embed document's object id to all pages in pdf document
-      if (!isDocId) {
-        await embedDocId(pdfDoc, docId, allPages);
-      }
-      //embed multi signature in pdf
-      const pdfBytes = await multiSignEmbed(
-        pngUrl,
-        pdfDoc,
-        pdfOriginalWidth,
-        flag,
-        containerWH
-      );
-
-      //function for embed signature in pdf and get digital signature pdf
-      try {
-        const res = await signPdfFun(
-          pdfBytes,
-          docId,
-          signerUserId,
-          pdfOriginalWidth,
-          xyPostion,
-          containerWH,
-          setIsAlert
-        );
-        if (res && res.status === "success") {
-          getDocumentDetails();
-        } else {
-          setIsAlert({
-            isShow: true,
-            alertMessage: "something went wrong"
-          });
-        }
-      } catch (err) {
-        setIsAlert({
-          isShow: true,
-          alertMessage: "something went wrong"
-        });
-      }
-    }
-    setIsSignPad(false);
-    setXyPostion([]);
-    // }
-  }
-
-  //function for change page
-  function changePage(offset) {
-    setPageNumber((prevPageNumber) => prevPageNumber + offset);
-  }
-
-  //function for image upload or update
-  const onImageChange = (event) => {
-    if (event.target.files && event.target.files[0]) {
-      onImageSelect(event, setImgWH, setImage);
-    }
-  };
-
-  //function for save button to save signature or image url
-  const saveSign = (isDefaultSign, width, height) => {
-    const isTypeText = width && height ? true : false;
-    const signatureImg = isDefaultSign ? defaultSignImg : signature;
-
-    let imgWH = { width: width ? width : "", height: height ? height : "" };
-    setIsSignPad(false);
-    setIsImageSelect(false);
-    setImage();
-
-    if (isDefaultSign) {
-      const img = new Image();
-      img.src = defaultSignImg;
-      if (img.complete) {
-        imgWH = {
-          width: img.width,
-          height: img.height
-        };
-      }
-    }
-    const getUpdatePosition = onSaveSign(
-      xyPostion,
-      index,
-      signKey,
-      signatureImg,
-      imgWH,
-      isDefaultSign,
-      isTypeText
-    );
-
-    if (getUpdatePosition) {
-      setXyPostion(getUpdatePosition);
-    }
-  };
-  //function for upload stamp image
-  const saveImage = () => {
-    const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
-    setXyPostion(getImage);
-  };
-
-  //function for set decline true on press decline button
-  const declineDoc = async () => {
-    const data = {
-      IsDeclined: true
-    };
-
-    await axios
-      .put(
-        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-          "_appName"
-        )}_Document/${docId}`,
-        data,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-          }
-        }
-      )
-      .then((result) => {
-        const res = result.data;
-        if (res) {
-          const currentDecline = {
-            currnt: "YouDeclined",
-            isDeclined: true
-          };
-          setIsDecline(currentDecline);
-        }
-      })
-      .catch((err) => {
-        setIsAlert({
-          isShow: true,
-          alertMessage: "something went wrong"
-        });
-      });
-  };
-
-  const addDefaultSignature = () => {
-    const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
-
-    setXyPostion(getXyData);
-    setAddDefaultSign({
-      isShow: false,
-      alertMessage: ""
-    });
-  };
-
-  //function for update TourStatus
-  const closeTour = async () => {
-    setSignTour(false);
-    if (isDontShow) {
-      let updatedTourStatus = [];
-      if (tourStatus.length > 0) {
-        updatedTourStatus = [...tourStatus];
-        const recipientssignIndex = tourStatus.findIndex(
-          (obj) =>
-            obj["recipientssign"] === false || obj["recipientssign"] === true
-        );
-        if (recipientssignIndex !== -1) {
-          updatedTourStatus[recipientssignIndex] = { recipientssign: true };
-        } else {
-          updatedTourStatus.push({ recipientssign: true });
-        }
-      } else {
-        updatedTourStatus = [{ recipientssign: true }];
-      }
-
-      await axios
-        .put(
-          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-            "_appName"
-          )}${contractName}/${signerUserId}`,
-          {
-            TourStatus: updatedTourStatus
-          },
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-            }
-          }
-        )
-        .then((Listdata) => {
-          // const json = Listdata.data;
-          // const res = json.results;
-          // console.log("res", json);
-        })
-        .catch((err) => {
-          console.log("axois err ", err);
-        });
-    }
-  };
-
-  const handleDontShow = (isChecked) => {
-    setIsDontShow(isChecked);
-  };
-
-  const tourFunction = () => {
-    const tourConfig = [
-      {
-        selector: '[data-tut="reactourFirst"]',
-        content: () => (
-          <TourContentWithBtn
-            message={`You can click "Auto Sign All" to automatically sign at all the locations meant to be signed by you.Make sure that you review the document properly before you click this button.`}
-            isChecked={handleDontShow}
-          />
-        ),
-        position: "top",
-        style: { fontSize: "13px" }
-      },
-      {
-        selector: '[data-tut="reactourSecond"]',
-        content: () => (
-          <TourContentWithBtn
-            message={`Click any of such placeholders appearing on the document to sign.You will see the options to draw sign or upload an image once you click here.`}
-            isChecked={handleDontShow}
-          />
-        ),
-        position: "top",
-        style: { fontSize: "13px" }
-      },
-      {
-        selector: '[data-tut="reactourThird"]',
-        content: () => (
-          <TourContentWithBtn
-            message={`Click here to finish & download the signed document.You will also receive a copy on your email.`}
-            isChecked={handleDontShow}
-          />
-        ),
-        position: "top",
-        style: { fontSize: "13px" }
-      }
-    ];
-
-    let stepsToShow = [];
-    if (!defaultSignImg || isMobile) {
-      stepsToShow = tourConfig.filter(
-        (step) => step.selector !== '[data-tut="reactourFirst"]'
-      );
-    }
-
-    return (
-      <Tour
-        onRequestClose={closeTour}
-        steps={stepsToShow && stepsToShow.length > 0 ? stepsToShow : tourConfig}
-        isOpen={signTour}
-        closeWithMask={false}
-        rounded={5}
-      />
-    );
-  };
-
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <Title title={"Sign Document"} />
-      {isLoading.isLoad ? (
-        <Loader isLoading={isLoading} />
-      ) : handleError ? (
-        <HandleError handleError={handleError} />
-      ) : noData ? (
-        <Nodata />
-      ) : (
-        <div className="signatureContainer" ref={divRef}>
-          {/* this modal is used to show decline alert */}
-          <CustomModal
-            containerWH={containerWH}
-            show={isDecline.isDeclined}
-            headMsg="Document Declined Alert!"
-            bodyMssg={
-              isDecline.currnt === "Sure" ? (
-                <p>Are you sure want to decline this document ?</p>
-              ) : isDecline.currnt === "YouDeclined" ? (
-                <p>You have declined this document!</p>
-              ) : (
-                isDecline.currnt === "another" && (
-                  <p>
-                    You cannot sign this document as it has been declined by one
-                    or more person(s).
-                  </p>
-                )
-              )
-            }
-            footerMessage={isDecline.currnt === "Sure"}
-            declineDoc={declineDoc}
-            setIsDecline={setIsDecline}
-          />
-          <AlertComponent
-            isShow={isAlert.isShow}
-            alertMessage={isAlert.alertMessage}
-            setIsAlert={setIsAlert}
-          />
-          <AlertComponent
-            isShow={addDefaultSign.isShow}
-            alertMessage={addDefaultSign.alertMessage}
-            setIsAlert={setAddDefaultSign}
-            isdefaultSign={true}
-            addDefaultSignature={addDefaultSignature}
-            headBG={themeColor()}
-          />
-
-          {/* this modal is used for show expired alert */}
-          <CustomModal
-            containerWH={containerWH}
-            show={isExpired}
-            headMsg="Document Expired!"
-            bodyMssg="This Document is no longer available."
-          />
-          {/* this component used for UI interaction and show their functionality */}
-          {pdfLoadFail.status &&
-            !isExpired &&
-            !checkTourStatus &&
-            tourFunction()}
-
-          {/* this component used to render all pdf pages in left side */}
-          <RenderAllPdfPage
-            pdfUrl={pdfUrl}
-            signPdfUrl={signedPdfData[0] && signedPdfData[0].URL}
-            allPages={allPages}
-            setAllPages={setAllPages}
-            setPageNumber={setPageNumber}
-            pageNumber={pageNumber}
-          />
-
-          {/* pdf render view */}
-          <div
-            style={{
-              marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
-              marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
-            }}
-            ref={divRef}
-          >
-            {/* this modal is used show this document is already sign */}
-            <Modal
-              show={isAlreadySign.status}
-              onShow={() => modalAlign()}
-              backdropClassName="signature-backdrop"
-            >
-              <ModalHeader style={{ background: themeColor() }}>
-                <span style={{ color: "white" }}> Sign Documents</span>
-              </ModalHeader>
-
-              <Modal.Body>
-                <p>{isAlreadySign.mssg}</p>
-              </Modal.Body>
-
-              <Modal.Footer>
-                <button
-                  style={{
-                    borderRadius: "0px",
-                    border: "1.5px solid #e3e2e1",
-                    fontWeight: "600",
-                    color: "black"
-                  }}
-                  className="btn"
-                  onClick={() => setIsAlreadySign({ status: false })}
-                >
-                  Close
-                </button>
-              </Modal.Footer>
-            </Modal>
-            {/* this is modal of signature pad */}
-            <SignPad
-              isSignPad={isSignPad}
-              isStamp={isStamp}
-              setIsImageSelect={setIsImageSelect}
-              setIsSignPad={setIsSignPad}
-              setImage={setImage}
-              isImageSelect={isImageSelect}
-              imageRef={imageRef}
-              onImageChange={onImageChange}
-              setSignature={setSignature}
-              image={image}
-              onSaveImage={saveImage}
-              onSaveSign={saveSign}
-              defaultSign={defaultSignImg}
-            />
-
-            {/* pdf header which contain finish back button */}
-            <Header
-              recipient={true}
-              pdfDetails={signedPdfData}
-              isAlreadySign={isAlreadySign}
-              pageNumber={pageNumber}
-              allPages={allPages}
-              changePage={changePage}
-              pdfUrl={pdfUrl}
-              setIsDecline={setIsDecline}
-              embedImages={embedImages}
-              isShowHeader={true}
-              currentSigner={true}
-              decline={true}
-              alreadySign={pdfUrl ? true : false}
-            />
-            {containerWH && (
-              <RenderPdf
-                pageNumber={pageNumber}
-                pdfOriginalWidth={pdfOriginalWidth}
-                pdfNewWidth={pdfNewWidth}
-                setIsSignPad={setIsSignPad}
-                setIsStamp={setIsStamp}
-                setSignKey={setSignKey}
-                pdfDetails={signedPdfData}
-                xyPostion={xyPostion}
-                successEmail={false}
-                pdfUrl={pdfUrl}
-                numPages={numPages}
-                pageDetails={pageDetails}
-                recipient={true}
-                isAlreadySign={isAlreadySign}
-                setPdfLoadFail={setPdfLoadFail}
-                pdfLoadFail={pdfLoadFail}
-                setXyPostion={setXyPostion}
-                index={index}
-                containerWH={containerWH}
-              />
-            )}
-          </div>
-
-          {!pdfUrl ? (
-            <div data-tut="reactourFirst">
-              {/* this component is used to render default signature of user in the right side of the component */}
-
-              <DefaultSignature
-                themeColor={themeColor}
-                defaultSignImg={defaultSignImg}
-                setDefaultSignImg={setDefaultSignImg}
-                userObjectId={userObjectID}
-                setIsLoading={setIsLoading}
-                xyPostion={xyPostion}
-                setXyPostion={setXyPostion}
-                setShowAlreadySignDoc={setIsAlreadySign}
-                setIsAlert={setAddDefaultSign}
-              />
-            </div>
-          ) : (
-            <div>
-              <Signedby pdfDetails={signedPdfData[0]} />
-            </div>
-          )}
-        </div>
-      )}
-    </DndProvider>
-  );
-}
-
-export default EmbedPdfImage;
diff --git a/microfrontends/SignDocuments/src/Routes.js b/microfrontends/SignDocuments/src/Routes.js
index 0307ce8d4..1b1cba4d5 100644
--- a/microfrontends/SignDocuments/src/Routes.js
+++ b/microfrontends/SignDocuments/src/Routes.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
 import SignYourselfPdf from "./Component/SignYourselfPdf";
-import RecipientSignPdf from "./Component/recipientSignPdf";
 import PlaceHolderSign from "./Component/placeHolderSign";
 import ManageSign from "./Component/ManageSign";
 import Login from "./Component/login";
@@ -28,7 +27,6 @@ function AppRoutes() {
         {/* recipient signature route with no rowlevel data using docId from url */}
         <Route
           path="/recipientSignPdf/:docId/:contactBookId"
-          // element={<RecipientSignPdf />
           element={<PdfRequestFiles />}
         />
         {/* recipient placeholder set route with  rowlevel data */}
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index d0504407f..f8b64cf2f 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -227,6 +227,7 @@
   font-size: 14px !important;
   border: none;
   margin-left: 10px;
+  border-radius: 2px;
 }
 
 .sendMail {
@@ -246,7 +247,7 @@
 
 .finishBtn:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  color: white;
+   
 }
 
 .saveBtn {
@@ -408,10 +409,13 @@
 .signTab {
   cursor: pointer !important;
   font-weight: 400 !important;
-  margin-left: 10px !important;
+  margin: 7px !important;
   font-size: 15px !important;
 }
-
+.cancelBtn {
+  color: black;
+  border: 1px solid #ccc;
+}
 .draggable-button {
   padding: 10px 20px;
   background: #3498db;
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 9950cfccc..bdc28cf40 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -1,5 +1,4 @@
 import axios from "axios";
-import { $ } from "select-dom";
 import { rgb } from "pdf-lib";
 
 const isMobile = window.innerWidth < 767;
@@ -398,16 +397,6 @@ export function urlValidator(url) {
     return false;
   }
 }
-export function modalAlign() {
-  let modalDialog = $(".modal-dialog").getBoundingClientRect();
-  let mobileHead = $(".mobileHead").getBoundingClientRect();
-  let modal = $(".modal-dialog");
-  if (modalDialog.left < mobileHead.left) {
-    let leftOffset = mobileHead.left - modalDialog.left;
-    modal.style.left = leftOffset + "px";
-    modal.style.top = window.innerHeight / 3 + "px";
-  }
-}
 
 export const placeholderWidth = (pos, scale, signyourself) => {
   let width;