From 8eec662f5ce1c65ed0f98074319b3ead92661a82 Mon Sep 17 00:00:00 2001 From: prafullnavkar-nxg Date: Fri, 27 Oct 2023 21:59:14 +0530 Subject: [PATCH] update signDocuments microfrontend and change zindex of layout in opensign --- .../src/components/sidebar/Sidebar.js | 2 +- apps/OpenSign/src/layout/HomeLayout.js | 6 +- .../src/Component/LegaDrive/LegaDrive.js | 2 +- .../src/Component/PdfRequestFiles.js | 1 - .../src/Component/SignYourselfPdf.js | 7 +- .../src/Component/component/emailComponent.js | 4 +- .../Component/component/fieldsComponent.js | 636 ++++++------ .../src/Component/component/header.js | 913 +++++++++--------- .../src/Component/component/modalComponent.js | 25 +- .../src/Component/component/renderPdf.js | 11 +- .../src/Component/placeHolderSign.js | 212 ++-- .../src/Component/recipientSignPdf.js | 118 +-- .../SignDocuments/src/css/signature.css | 258 ++--- 13 files changed, 1147 insertions(+), 1048 deletions(-) diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js index 008c8520b..b88094154 100644 --- a/apps/OpenSign/src/components/sidebar/Sidebar.js +++ b/apps/OpenSign/src/components/sidebar/Sidebar.js @@ -38,7 +38,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js index 579d4924d..eaa479716 100644 --- a/apps/OpenSign/src/layout/HomeLayout.js +++ b/apps/OpenSign/src/layout/HomeLayout.js @@ -166,15 +166,15 @@ const HomeLayout = ({ children }) => { }; return (
-
+
-
+
{children}
-
+
diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index d27df51b0..cd004168a 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -535,7 +535,7 @@ function PdfFile() {
)}
+ ) : ( +
+ + + {recipient ? ( + pdfUrl || isAlreadySign.mssg ? ( +
+ {pdfDetails[0] && pdfDetails.length > 0 && ( + // + } + fileName={`completion certificate-${ + pdfDetails[0] && pdfDetails[0].Name + }.pdf`} + > + {({ blob, url, loading, error }) => + loading ? ( + "Loading document..." + ) : ( + + ) + } + + )} + + + +
+ ) : ( +
+ + + +
+ ) + ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? ( +
+ } + fileName={`completion certificate-${ + pdfDetails[0] && pdfDetails[0].Name + }.pdf`} + > + {({ blob, url, loading, error }) => + loading ? ( + "Loading document..." + ) : ( + + ) + } + + + +
+ ) : isPlaceholder ? ( + <> + {!isMailSend && + signersdata.Signers && + signersdata.Signers.length !== signerPos.length && ( +
+ {signerPos.length === 0 ? ( + + Add all {signersdata.Signers.length - signerPos.length}{" "} + recipients signature + + ) : ( + + Add {signersdata.Signers.length - signerPos.length} more + recipients signature + + )} +
+ )} + +
+ + + +
+ + ) : isPdfRequestFiles ? ( + isSigned ? ( +
+ {isCompleted.isCertificate && ( + } + fileName={`completion certificate-${ + pdfDetails[0] && pdfDetails[0].Name + }.pdf`} + > + {({ blob, url, loading, error }) => + loading ? ( + "Loading document..." + ) : ( + + ) + } + + )} + + + +
+ ) : ( +
+ + {currentSigner && ( + <> + + + + )} +
+ ) + ) : ( +
+ + + +
+ )} +
)}
); diff --git a/microfrontends/SignDocuments/src/Component/component/modalComponent.js b/microfrontends/SignDocuments/src/Component/component/modalComponent.js index bf071624c..f7a293712 100644 --- a/microfrontends/SignDocuments/src/Component/component/modalComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/modalComponent.js @@ -2,25 +2,42 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; -function ModalComponent({ isShow, type }) { +function ModalComponent({ isShow, type,setIsShowEmail }) { return ( {type === "pdfFail" ? ( Failed to load pdf! + ) : type === "signersAlert" ? ( + Select signers ) : ( Document Expired! )} - {type === "pdfFail" ? ( -

Something went wrong failed to load pdf file!

+ {type === "pdfFail" ? ( +

Something went wrong failed to load pdf file!

+ ) : type === "signersAlert" ? ( +

Please select signer for add placeholder!

) : (

This Document is no longer available.

)} - + + + ); } diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index d5781b15a..03258c263 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -38,11 +38,12 @@ function RenderPdf({ signerObjectId, signedSigners, setPdfLoadFail, - setIsDragging, placeholder, }) { const isMobile = window.innerWidth < 712; + //function for render placeholder block over pdf document + const checkSignedSignes = (data) => { // console.log("data",data) const checkSign = signedSigners.filter( @@ -903,8 +904,12 @@ function RenderPdf({ }} disableDragging={true} default={{ - x: pos.xPosition, - y: pos.yPosition, + x: pos.scale + ? pos.xPosition * pos.scale + : pos.xPosition, + y: pos.scale + ? pos.yPosition * pos.scale + : pos.yPosition, }} onClick={() => { setIsSignPad(true); diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index fdcb058e2..7adb49a51 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -22,6 +22,7 @@ import SignerListPlace from "./component/signerListPlace"; import Header from "./component/header"; import { contactBook, contractUsers } from "../utils/Utils"; import RenderPdf from "./component/renderPdf"; +import ModalComponent from "./component/modalComponent"; function PlaceHolderSign() { pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -58,6 +59,8 @@ function PlaceHolderSign() { const [pdfOriginalWidth, setPdfOriginalWidth] = useState(); const [contractName, setContractName] = useState(""); const { docId } = useParams(); + const [isShowEmail, setIsShowEmail] = useState(false); + const [selectedEmail, setSelectedEmail] = useState(false); const color = [ "#93a3db", @@ -301,40 +304,80 @@ function PlaceHolderSign() { // setIsLoading(loadObj); // }); }; + console.log("signerpos", signerPos, isDragStampSS, isDragSignatureSS); //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { + const isMobile = window.innerWidth < 712; + + if (isMobile) { + if (selectedEmail) { + getSignerPos(item, monitor); + } else { + setIsShowEmail(true); + } + } else { + getSignerPos(item, monitor); + } + }; + + const getSignerPos = (item, monitor) => { + const isMobile = window.innerWidth < 712; + const newWidth = window.innerWidth; + const scale = pdfOriginalWidth / newWidth; const key = Math.floor(1000 + Math.random() * 9000); - const offset = monitor.getClientOffset(); - //adding and updating drop position in array when user drop signature button in div - const containerRect = document - .getElementById("container") - .getBoundingClientRect(); - const x = offset.x - containerRect.left; - const y = offset.y - containerRect.top; - const ybottom = containerRect.bottom - offset.y; - - const dropData = []; - const xyPosArr = []; - const dropObj = { - xPosition: x - signBtnPosition[0].xPos, - yPosition: y - signBtnPosition[0].yPos, - isStamp: isDragStamp ? true : false, - key: key, - isDrag: false, - firstXPos: signBtnPosition[0].xPos, - firstYPos: signBtnPosition[0].yPos, - yBottom: ybottom, - }; - dropData.push(dropObj); - const xyPos = { - pageNumber: pageNumber, - pos: dropData, - }; - - xyPosArr.push(xyPos); - const filterSignerPos = signerPos.filter( + let filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerObjId ); + let dropData = []; + let xyPosArr = []; + let xyPos = {}; + if (item === "onclick") { + const dropObj = { + xPosition: window.innerWidth / 2 - 100, + yPosition: window.innerHeight / 2 - 60, + isStamp: monitor, + key: key, + isDrag: false, + scale: isMobile && scale, + yBottom: window.innerHeight / 2 - 60, + }; + dropData.push(dropObj); + xyPos = { + pageNumber: pageNumber, + pos: dropData, + }; + + xyPosArr.push(xyPos); + } else if (item.type === "BOX") { + const offset = monitor.getClientOffset(); + //adding and updating drop position in array when user drop signature button in div + const containerRect = document + .getElementById("container") + .getBoundingClientRect(); + const x = offset.x - containerRect.left; + const y = offset.y - containerRect.top; + const ybottom = containerRect.bottom - offset.y; + + const dropObj = { + xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, + yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, + isStamp: isDragStamp || isDragStampSS ? true : false, + key: key, + isDrag: false, + firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, + firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, + yBottom: ybottom, + scale: isMobile && scale, + }; + + dropData.push(dropObj); + xyPos = { + pageNumber: pageNumber, + pos: dropData, + }; + + xyPosArr.push(xyPos); + } //add signers objId first inseretion if (filterSignerPos.length > 0) { @@ -739,6 +782,9 @@ function PlaceHolderSign() { Placeholders: signerPos, SignedUrl: pdfDetails[0].URL, }; + const isMobile = window.innerWidth < 712; + const newWidth = window.innerWidth; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; await axios .put( @@ -822,7 +868,9 @@ function PlaceHolderSign() { } await axios .put( - `${localStorage.getItem("baseUrl")}classes/${extUserClass}/${signerUserId}`, + `${localStorage.getItem( + "baseUrl" + )}classes/${extUserClass}/${signerUserId}`, { TourStatus: updatedTourStatus, }, @@ -1009,6 +1057,11 @@ function PlaceHolderSign() { )} + {/* pdf header which contain funish back button */}
- +
+ +
{/* signature button */} {isMobile ? ( - -
- - +
+
) : (
@@ -1098,9 +1159,6 @@ function PlaceHolderSign() { dragRef={dragRef} isDragStamp={isDragStamp} isSignYourself={false} - isDragSignatureSS={isDragSignatureSS} - dragSignatureSS={dragSignatureSS} - dragStampSS={dragStampSS} // xyPostion={xyPostion} // isSigners={false} addPositionOfSignature={addPositionOfSignature} diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 331eecfdd..a560a6b3a 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -26,7 +26,6 @@ import Header from "./component/header"; import ModalComponent from "./component/modalComponent"; import RenderPdf from "./component/renderPdf"; function EmbedPdfImage() { - const { id, userPhone } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -618,10 +617,13 @@ function EmbedPdfImage() { ? imgUrlList[id].Height : 60; const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - + const isMobile = window.innerWidth < 712; + const newWidth = window.innerWidth; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; page.drawImage(img, { - x: imgUrlList[id].xPosition, - y: page.getHeight() - imgUrlList[id].yPosition - imgHeight, + x: imgUrlList[id].xPosition * scale + 50, + y: + page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight, width: imgWidth, height: imgHeight, }); @@ -647,17 +649,26 @@ function EmbedPdfImage() { pageNo ) => { let signgleSign; + const isMobile = window.innerWidth < 712; + const newWidth = window.innerWidth; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; const bottomY = xyPosData.isDrag - ? xyPosData.yBottom - height - : xyPosData.yBottom - height + xyPosData.firstYPos; + ? xyPosData.yBottom * scale - height + : xyPosData.firstYPos + ? xyPosData.yBottom * scale - height + xyPosData.firstYPos + : xyPosData.yBottom * scale - height; signgleSign = { pdfFile: pdfBase64Url, docId: docId, sign: { Base64: base64Url, - Left: xyPosData.resizeXPos + Left: isMobile + ? xyPosData.resizeXPos + ? xyPosData.resizeXPos * scale + 80 + : xyPosData.xPosition * scale + 80 + : xyPosData.resizeXPos ? xyPosData.resizeXPos : xyPosData.xPosition, Bottom: bottomY, @@ -770,99 +781,6 @@ function EmbedPdfImage() { const saveImage = () => { const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); setXyPostion(getImage); - // const updateFilter = xyPostion[index].pos.filter( - // (data) => - // data.key === signKey && data.Width && data.Height && data.SignUrl - // ); - - // if (updateFilter.length > 0) { - // let newWidth, nweHeight; - // const aspectRatio = imgWH.width / imgWH.height; - // const getXYdata = xyPostion[index].pos; - // if (aspectRatio === 1) { - // newWidth = aspectRatio * 100; - // nweHeight = aspectRatio * 100; - // } else if (aspectRatio < 2) { - // newWidth = aspectRatio * 100; - // nweHeight = 100; - // } else if (aspectRatio > 2 && aspectRatio < 4) { - // newWidth = aspectRatio * 70; - // nweHeight = 70; - // } else if (aspectRatio > 4) { - // newWidth = aspectRatio * 40; - // nweHeight = 40; - // } else if (aspectRatio > 5) { - // newWidth = aspectRatio * 10; - // nweHeight = 10; - // } - // const getPosData = getXYdata; - // const addSign = getPosData.map((url, ind) => { - // if (url.key === signKey) { - // return { - // ...url, - // Width: newWidth, - // Height: nweHeight, - // SignUrl: image.src, - // ImageType: image.imgType, - // }; - // } - // return url; - // }); - - // const newUpdateUrl = xyPostion.map((obj, ind) => { - // if (ind === index) { - // return { ...obj, pos: addSign }; - // } - // return obj; - // }); - // setXyPostion(newUpdateUrl); - // } else { - // const getXYdata = xyPostion[index].pos; - - // const getPosData = getXYdata; - - // const aspectRatio = imgWH.width / imgWH.height; - - // let newWidth, nweHeight; - // if (aspectRatio === 1) { - // newWidth = aspectRatio * 100; - // nweHeight = aspectRatio * 100; - // } else if (aspectRatio < 2) { - // newWidth = aspectRatio * 100; - // nweHeight = 100; - // } else if (aspectRatio > 2 && aspectRatio < 4) { - // newWidth = aspectRatio * 70; - // nweHeight = 70; - // } else if (aspectRatio > 4) { - // newWidth = aspectRatio * 40; - // nweHeight = 40; - // } else if (aspectRatio > 5) { - // newWidth = aspectRatio * 10; - // nweHeight = 10; - // } - - // const addSign = getPosData.map((url, ind) => { - // if (url.key === signKey) { - // return { - // ...url, - // Width: newWidth, - // Height: nweHeight, - // SignUrl: image.src, - // ImageType: image.imgType, - // }; - // } - // return url; - // }); - - // const newUpdateUrl = xyPostion.map((obj, ind) => { - // if (ind === index) { - // return { ...obj, pos: addSign }; - // } - // return obj; - // }); - - // setXyPostion(newUpdateUrl); - // } }; //function for set decline true on press decline button diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 4bade1c1d..dad6e2673 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -10,8 +10,9 @@ width: 460px; height: 184px; } - .penContainer{ - width: 460px; + + .penContainer { + width: 460px; } .signatureBtn { @@ -37,18 +38,21 @@ } */ .disableSign { - border: none; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + border: 1.5px solid #47a3ad; margin-bottom: 10px; border-radius: 3px; display: flex; padding: 0px; justify-content: space-between; - background: #d3edeb; + background: white; transition-duration: 0.4s; - cursor: pointer; - color: white; - font-weight: 600; + cursor: all-scroll; + width: 150px; + height: 30px; + color: black; + border: 1px solid rgb(203, 203, 203); + cursor: text; + } .emailInput { @@ -76,13 +80,14 @@ .addEmail, .emailInput { - + + outline: none; + } + + .addEmailInput { + border: none; outline: none; } - .addEmailInput{ - border: none; - outline: none; - } .emailChip { background-color: #47a3ad; @@ -115,12 +120,23 @@ border: none; margin-left: 10px; } - +.sendMail{ + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 500 !important; + font-size: 14px !important; + border: none; + margin-left: 10px; + /* color: rgb(77, 75, 75); */ +} + .finishBtn:focus { border: none; outline: none; } + .finishBtn:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); color: white; @@ -382,29 +398,33 @@ background-color: #887abf; border: none; padding: 5px; - + animation-duration: 400ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; z-index: 30 !important; } + .DropdownMenuContent[data-side='top'], .DropdownMenuSubContent[data-side='top'] { animation-name: slideDownAndFade; } + .DropdownMenuContent[data-side='right'], .DropdownMenuSubContent[data-side='right'] { animation-name: slideLeftAndFade; } + .DropdownMenuContent[data-side='bottom'], .DropdownMenuSubContent[data-side='bottom'] { animation-name: slideUpAndFade; } + .DropdownMenuContent[data-side='left'], .DropdownMenuSubContent[data-side='left'] { animation-name: slideRightAndFade; } - + .DropdownMenuItem { font-size: 13px; line-height: 1; @@ -420,106 +440,112 @@ outline: none; border: none; } + .SelectTrigger { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 15px; - font-size: 13px; - line-height: 1; - height: 35px; - gap: 5px; - border: none; - background-color: #887abf; - color: black - -} -option{ - overflow-y:scroll; -} -.SelectTrigger:hover { - border: none; - outline: none; -} -.SelectTrigger:focus { - /* box-shadow: 0 0 0 2px black; */ - border: none; - outline: none; -} -.SelectTrigger[data-placeholder] { - color: black; -} + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 15px; + font-size: 13px; + line-height: 1; + height: 35px; + gap: 5px; + border: none; + background-color: #887abf; + color: black + } -.SelectIcon { - color: Var(--violet-11); -} + option { + overflow-y: scroll; + } -.SelectContent { - overflow: hidden; - background-color: white; - border-radius: 6px; - box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); -} + .SelectTrigger:hover { + border: none; + outline: none; + } -.SelectViewport { - padding: 5px; -} + .SelectTrigger:focus { + /* box-shadow: 0 0 0 2px black; */ + border: none; + outline: none; + } -.SelectItem { - font-size: 13px; - line-height: 1; - color: var(--violet-11); - border-radius: 3px; - display: flex; - align-items: center; - height: 25px; - padding: 0 35px 0 25px; - position: relative; - user-select: none; - z-index: 10 !important; -} -.SelectItem[data-disabled] { - color: var(--mauve-8); - pointer-events: none; -} -.SelectItem[data-highlighted] { - outline: none; - background-color: var(--violet-9); - color: var(--violet-1); -} + .SelectTrigger[data-placeholder] { + color: black; + } -.SelectLabel { - padding: 0 25px; - font-size: 12px; - line-height: 25px; - color: var(--mauve-11); -} + .SelectIcon { + color: Var(--violet-11); + } -.SelectSeparator { - height: 1px; - background-color: var(--violet-6); - margin: 5px; -} + .SelectContent { + overflow: hidden; + background-color: white; + border-radius: 6px; + box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); + } -.SelectItemIndicator { - position: absolute; - left: 0; - width: 25px; - display: inline-flex; - align-items: center; - justify-content: center; -} + .SelectViewport { + padding: 5px; + } -.SelectScrollButton { - display: flex; - align-items: center; - justify-content: center; - height: 25px; - background-color: white; - color: var(--violet-11); - cursor: default; -} + .SelectItem { + font-size: 13px; + line-height: 1; + color: var(--violet-11); + border-radius: 3px; + display: flex; + align-items: center; + height: 25px; + padding: 0 35px 0 25px; + position: relative; + user-select: none; + z-index: 10 !important; + } + + .SelectItem[data-disabled] { + color: var(--mauve-8); + pointer-events: none; + } + + .SelectItem[data-highlighted] { + outline: none; + background-color: var(--violet-9); + color: var(--violet-1); + } + + .SelectLabel { + padding: 0 25px; + font-size: 12px; + line-height: 25px; + color: var(--mauve-11); + } + + .SelectSeparator { + height: 1px; + background-color: var(--violet-6); + margin: 5px; + } + + .SelectItemIndicator { + position: absolute; + left: 0; + width: 25px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .SelectScrollButton { + display: flex; + align-items: center; + justify-content: center; + height: 25px; + background-color: white; + color: var(--violet-11); + cursor: default; + } @@ -637,9 +663,11 @@ option{ width: 300px; height: 120px; } - .penContainer{ - width: 300px; + + .penContainer { + width: 300px; } + .uploadImgLogo { font-size: 30px; } @@ -660,9 +688,11 @@ option{ width: 280px; height: 112px; } - .penContainer{ - width: 280px; + + .penContainer { + width: 280px; } + .hidePdf { display: none; } @@ -694,9 +724,11 @@ option{ width: 230px; height: 92px; } - .penContainer{ - width: 230px; + + .penContainer { + width: 230px; } + .hidePdf { display: none; }