From fe37f3e021ff061b17f4621d728663a0f89f3de6 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 6 Nov 2023 14:51:33 +0530 Subject: [PATCH] fix: expired and decline document block whole screeen --- .../src/Component/PdfRequestFiles.js | 99 +++++++------------ .../src/Component/component/CustomModal.js | 51 ++++++++++ .../Component/component/defaultSignature.js | 4 +- .../src/Component/component/emailComponent.js | 2 +- .../src/Component/recipientSignPdf.js | 81 ++++++--------- .../SignDocuments/src/css/customModal.css | 61 ++++++++++++ .../SignDocuments/src/css/signature.css | 1 + .../SignDocuments/src/utils/Utils.js | 38 ++++--- 8 files changed, 201 insertions(+), 136 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/component/CustomModal.js create mode 100644 microfrontends/SignDocuments/src/css/customModal.css diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 012f4e347..a851baac3 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -11,15 +11,13 @@ import { HTML5Backend } from "react-dnd-html5-backend"; import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; -import { - getBase64FromIMG, - getBase64FromUrl -} from "../utils/Utils"; +import { getBase64FromIMG, getBase64FromUrl } 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"; function PdfRequestFiles() { const { docId } = useParams(); @@ -191,7 +189,7 @@ function PdfRequestFiles() { //comparison auditTrail user details with signers user details for (let i = 0; i < signerRes.length; i++) { const signerId = signerRes[i].objectId; - + let isSigned = false; for (let j = 0; j < checkDocIdExist.length; j++) { const signedExist = @@ -912,6 +910,7 @@ function PdfRequestFiles() { //function for set decline true on press decline button const declineDoc = async () => { + setIsDecline({ isDeclined: false }); const data = { IsDeclined: true }; @@ -984,6 +983,36 @@ function PdfRequestFiles() { )}
+ {/* this modal is used to show decline alert */} + + Are you sure want to decline this document ? +

+ ) : isDecline.currnt === "YouDeclined" ? ( +

You have declined this document!

+ ) : ( + isDecline.currnt === "another" && ( +

+ You cannot sign this document as it has been declined by + one or more person(s). +

+ ) + ) + } + footerMessage={isDecline.currnt === "Sure"} + declineDoc={declineDoc} + setIsDecline={setIsDecline} + /> + {/* this modal is used for show expired alert */} + {/* this component used to render all pdf pages in left side */} 500 && "20px" }} > - - - Document Expired! - - - -

- This Document is no longer available. -

- - - {/* this modal is used for show decline alert */} - - - Document Declined Alert! - - - - {isDecline.currnt === "Sure" ? ( -

- Are you sure want to decline this document ? -

- ) : isDecline.currnt === "YouDeclined" ? ( -

You have declined this document!

- ) : ( - isDecline.currnt === "another" && ( -

- You cannot sign this document as it has been declined by - one or more person(s). -

- ) - )} - - - {isDecline.currnt === "Sure" && ( - <> - - - - )} - - {/* this modal is used show this document is already sign */} diff --git a/microfrontends/SignDocuments/src/Component/component/CustomModal.js b/microfrontends/SignDocuments/src/Component/component/CustomModal.js new file mode 100644 index 000000000..dad3790b6 --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/CustomModal.js @@ -0,0 +1,51 @@ +import React from "react"; +import "../../css/customModal.css"; +import "../../css/signature.css"; + +function CustomModal({ + show, + headMsg, + bodyMssg, + footerMessage, + declineDoc, + setIsDecline +}) { + return ( + show && ( +
+
+
{headMsg && headMsg}
+
+

{bodyMssg && bodyMssg}

+
+ {footerMessage && ( +
+ + +
+ )} +
+
+ ) + ); +} + +export default CustomModal; diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js index 782133bea..5bc7fedd9 100644 --- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js +++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js @@ -1,5 +1,5 @@ -import React, { useEffect } from "react"; -import axios from "axios"; +import React from "react"; + function DefaultSignature({ themeColor, diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index af6ecf0e4..bdbb1eb52 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -26,7 +26,7 @@ function EmailComponent({ //function for send email const sendEmail = async () => { setIsLoading(true); - let sendMail, recipent; + let sendMail; for (let i = 0; i < emailCount.length; i++) { try { diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index a60627218..1acd56a64 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -23,8 +23,8 @@ import Loader from "./component/loader"; import HandleError from "./component/HandleError"; import Nodata from "./component/Nodata"; import Header from "./component/header"; -import ModalComponent from "./component/modalComponent"; import RenderPdf from "./component/renderPdf"; +import CustomModal from "./component/CustomModal"; function EmbedPdfImage() { const { id, contactBookId } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -953,6 +953,34 @@ function EmbedPdfImage() { ) : (
+ {/* this modal is used to show decline alert */} + Are you sure want to decline this document ?

+ ) : isDecline.currnt === "YouDeclined" ? ( +

You have declined this document!

+ ) : ( + isDecline.currnt === "another" && ( +

+ You cannot sign this document as it has been declined by one + or more person(s). +

+ ) + ) + } + footerMessage={isDecline.currnt === "Sure"} + declineDoc={declineDoc} + setIsDecline={setIsDecline} + /> + {/* this modal is used for show expired alert */} + {/* this component used for UI interaction and show their functionality */} {pdfLoadFail.status && !isExpired && @@ -975,57 +1003,6 @@ function EmbedPdfImage() { marginRight: pdfOriginalWidth > 500 && "20px" }} > - {/* this modal is used for show decline alert */} - - - Document Declined Alert! - - - - {isDecline.currnt === "Sure" ? ( -

Are you sure want to decline this document ?

- ) : isDecline.currnt === "YouDeclined" ? ( -

You have declined this document!

- ) : ( - isDecline.currnt === "another" && ( -

- You cannot sign this document as it has been declined by - one or more person(s). -

- ) - )} - - - {isDecline.currnt === "Sure" && ( - <> - - - - )} - - - - {/* this modal component is used for show expired document */} - - {/* this modal is used show this document is already sign */} diff --git a/microfrontends/SignDocuments/src/css/customModal.css b/microfrontends/SignDocuments/src/css/customModal.css new file mode 100644 index 000000000..05d62e699 --- /dev/null +++ b/microfrontends/SignDocuments/src/css/customModal.css @@ -0,0 +1,61 @@ +.parentDiv { + width: 100%; + height: 100%; + background: gray; + position: absolute; + z-index: 100; + background-color: rgba(0, 0, 0, 0.75); + display: flex; + flex-direction: column; + /* justify-content: center; */ + align-items: center; +} + +.childDiv { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + background-color: #fff; + margin:30px 20px; + border: 0px 1px 1px 1px solid rgba(0, 0, 0, .2); + border-radius: 0.3rem; + outline: 0; +} + +.modalHeadDiv { + padding: 10px; + color: #fff; + border-top-left-radius: 0.3rem; + border-top-right-radius: 0.3rem; + font-size: 17px; + font-weight: 500; +} + +.modalBodyDIv { + padding: 20px; +} + +.spanTagHead { + color: white !important; + font-size: 17px; + font-weight: 500; +} + +.pTagBody { + + font-size: 15px !important; +} +.modalFooterDiv{ + margin: 10px; + display: flex; + justify-content: flex-end; +} + +@media screen and (max-width:500px) { + .childDiv { + margin: 50px 7px; + width: 90%; + } +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index d3e16258a..a8c724680 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -341,6 +341,7 @@ flex-direction: row; justify-content: space-between; background-color: #ebebeb; + position:"relative" /* max-height: 800px; */ /* overflow: auto; */ } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 138b22e62..0b915423d 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -57,37 +57,41 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { (data, ind) => data.key === signKey && data.Width && data.Height && data.SignUrl ); + if (updateFilter.length > 0) { - let newWidth, nweHeight; + let newWidth, newHeight; const aspectRatio = imgWH.width / imgWH.height; + const getXYdata = xyPostion[index].pos; - + if (aspectRatio === 1) { newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; + newHeight = aspectRatio * 100; } else if (aspectRatio < 2) { newWidth = aspectRatio * 100; - nweHeight = 100; + newHeight = 100; } else if (aspectRatio > 2 && aspectRatio < 4) { newWidth = aspectRatio * 70; - nweHeight = 70; + newHeight = 70; } else if (aspectRatio > 4) { newWidth = aspectRatio * 40; - nweHeight = 40; + newHeight = 40; } else if (aspectRatio > 5) { newWidth = aspectRatio * 10; - nweHeight = 10; + newHeight = 10; } - - let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); - + + let getPosData = xyPostion[index].pos.filter( + (data) => data.key === signKey + ); + const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : 150, - Height: getPosData[0].Height ? getPosData[0].Height : 60, + Width: getPosData[0].Width ? getPosData[0].Width : newWidth, + Height: getPosData[0].Height ? getPosData[0].Height : newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -106,7 +110,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { } else { const getXYdata = xyPostion[index].pos; - let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); + let getPosData = xyPostion[index].pos.filter( + (data) => data.key === signKey + ); const aspectRatio = imgWH.width / imgWH.height; let newWidth, newHeight; @@ -131,9 +137,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : 150, - Height: getPosData[0].Height ? getPosData[0].Height : 60, - SignUrl: image.src, + Width: getPosData[0].Width ? getPosData[0].Width : newWidth, + Height: getPosData[0].Height ? getPosData[0].Height : newHeight, + SignUrl: image.src, ImageType: image.imgType }; }