Skip to content

Commit fe37f3e

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: expired and decline document block whole screeen
1 parent 95558d1 commit fe37f3e

File tree

8 files changed

+201
-136
lines changed

8 files changed

+201
-136
lines changed

‎microfrontends/SignDocuments/src/Component/PdfRequestFiles.js‎

Lines changed: 34 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,13 @@ import { HTML5Backend } from "react-dnd-html5-backend";
1111
import { useParams } from "react-router-dom";
1212
import SignPad from "./component/signPad";
1313
import RenderAllPdfPage from "./component/renderAllPdfPage";
14-
import {
15-
getBase64FromIMG,
16-
getBase64FromUrl
17-
} from "../utils/Utils";
14+
import { getBase64FromIMG, getBase64FromUrl } from "../utils/Utils";
1815
import Loader from "./component/loader";
1916
import HandleError from "./component/HandleError";
2017
import Nodata from "./component/Nodata";
2118
import Header from "./component/header";
2219
import RenderPdf from "./component/renderPdf";
20+
import CustomModal from "./component/CustomModal";
2321

2422
function PdfRequestFiles() {
2523
const { docId } = useParams();
@@ -191,7 +189,7 @@ function PdfRequestFiles() {
191189
//comparison auditTrail user details with signers user details
192190
for (let i = 0; i < signerRes.length; i++) {
193191
const signerId = signerRes[i].objectId;
194-
192+
195193
let isSigned = false;
196194
for (let j = 0; j < checkDocIdExist.length; j++) {
197195
const signedExist =
@@ -912,6 +910,7 @@ function PdfRequestFiles() {
912910

913911
//function for set decline true on press decline button
914912
const declineDoc = async () => {
913+
setIsDecline({ isDeclined: false });
915914
const data = {
916915
IsDeclined: true
917916
};
@@ -984,6 +983,36 @@ function PdfRequestFiles() {
984983
)}
985984

986985
<div className="signatureContainer">
986+
{/* this modal is used to show decline alert */}
987+
<CustomModal
988+
show={isDecline.isDeclined}
989+
headMsg="Document Declined Alert!"
990+
bodyMssg={
991+
isDecline.currnt === "Sure" ? (
992+
<p className="pTagBody">
993+
Are you sure want to decline this document ?
994+
</p>
995+
) : isDecline.currnt === "YouDeclined" ? (
996+
<p className="pTagBody">You have declined this document!</p>
997+
) : (
998+
isDecline.currnt === "another" && (
999+
<p className="pTagBody">
1000+
You cannot sign this document as it has been declined by
1001+
one or more person(s).
1002+
</p>
1003+
)
1004+
)
1005+
}
1006+
footerMessage={isDecline.currnt === "Sure"}
1007+
declineDoc={declineDoc}
1008+
setIsDecline={setIsDecline}
1009+
/>
1010+
{/* this modal is used for show expired alert */}
1011+
<CustomModal
1012+
show={isExpired}
1013+
headMsg="Document Expired!"
1014+
bodyMssg="This Document is no longer available."
1015+
/>
9871016
{/* this component used to render all pdf pages in left side */}
9881017
<RenderAllPdfPage
9891018
signPdfUrl={pdfDetails[0].URL}
@@ -999,66 +1028,6 @@ function PdfRequestFiles() {
9991028
marginRight: pdfOriginalWidth > 500 && "20px"
10001029
}}
10011030
>
1002-
<Modal show={isExpired}>
1003-
<ModalHeader className="bg-danger">
1004-
<span className="spanTagHead">Document Expired!</span>
1005-
</ModalHeader>
1006-
1007-
<Modal.Body>
1008-
<p className="pTagBody">
1009-
This Document is no longer available.
1010-
</p>
1011-
</Modal.Body>
1012-
</Modal>
1013-
{/* this modal is used for show decline alert */}
1014-
<Modal show={isDecline.isDeclined}>
1015-
<ModalHeader className="bg-danger">
1016-
<span className="spanTagHead">Document Declined Alert!</span>
1017-
</ModalHeader>
1018-
1019-
<Modal.Body>
1020-
{isDecline.currnt === "Sure" ? (
1021-
<p className="pTagBody">
1022-
Are you sure want to decline this document ?
1023-
</p>
1024-
) : isDecline.currnt === "YouDeclined" ? (
1025-
<p className="pTagBody">You have declined this document!</p>
1026-
) : (
1027-
isDecline.currnt === "another" && (
1028-
<p className="pTagBody">
1029-
You cannot sign this document as it has been declined by
1030-
one or more person(s).
1031-
</p>
1032-
)
1033-
)}
1034-
</Modal.Body>
1035-
<Modal.Footer>
1036-
{isDecline.currnt === "Sure" && (
1037-
<>
1038-
<button
1039-
style={{
1040-
color: "black"
1041-
}}
1042-
type="button"
1043-
className="finishBtn"
1044-
onClick={() => setIsDecline({ isDeclined: false })}
1045-
>
1046-
Close
1047-
</button>
1048-
<button
1049-
style={{
1050-
background: "#de4337"
1051-
}}
1052-
type="button"
1053-
className="finishBtn"
1054-
onClick={() => declineDoc()}
1055-
>
1056-
Yes
1057-
</button>
1058-
</>
1059-
)}
1060-
</Modal.Footer>
1061-
</Modal>
10621031
{/* this modal is used show this document is already sign */}
10631032

10641033
<Modal show={isCompleted.isModal}>

‎microfrontends/SignDocuments/src/Component/component/CustomModal.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from "react";
2+
import "../../css/customModal.css";
3+
import "../../css/signature.css";
4+
5+
function CustomModal({
6+
show,
7+
headMsg,
8+
bodyMssg,
9+
footerMessage,
10+
declineDoc,
11+
setIsDecline
12+
}) {
13+
return (
14+
show && (
15+
<div className="parentDiv">
16+
<div className="childDiv">
17+
<div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
18+
<div className="modalBodyDIv">
19+
<p className="pTagBody">{bodyMssg && bodyMssg}</p>
20+
</div>
21+
{footerMessage && (
22+
<div className="modalFooterDiv">
23+
<button
24+
style={{
25+
color: "black"
26+
}}
27+
type="button"
28+
className="finishBtn"
29+
onClick={() => setIsDecline({ isDeclined: false })}
30+
>
31+
Close
32+
</button>
33+
<button
34+
style={{
35+
background: "#de4337"
36+
}}
37+
type="button"
38+
className="finishBtn"
39+
onClick={() => declineDoc()}
40+
>
41+
Yes
42+
</button>
43+
</div>
44+
)}
45+
</div>
46+
</div>
47+
)
48+
);
49+
}
50+
51+
export default CustomModal;

‎microfrontends/SignDocuments/src/Component/component/defaultSignature.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useEffect } from "react";
2-
import axios from "axios";
1+
import React from "react";
2+
33

44
function DefaultSignature({
55
themeColor,

‎microfrontends/SignDocuments/src/Component/component/emailComponent.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function EmailComponent({
2626
//function for send email
2727
const sendEmail = async () => {
2828
setIsLoading(true);
29-
let sendMail, recipent;
29+
let sendMail;
3030
for (let i = 0; i < emailCount.length; i++) {
3131

3232
try {

‎microfrontends/SignDocuments/src/Component/recipientSignPdf.js‎

Lines changed: 29 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ import Loader from "./component/loader";
2323
import HandleError from "./component/HandleError";
2424
import Nodata from "./component/Nodata";
2525
import Header from "./component/header";
26-
import ModalComponent from "./component/modalComponent";
2726
import RenderPdf from "./component/renderPdf";
27+
import CustomModal from "./component/CustomModal";
2828
function EmbedPdfImage() {
2929
const { id, contactBookId } = useParams();
3030
const [isSignPad, setIsSignPad] = useState(false);
@@ -953,6 +953,34 @@ function EmbedPdfImage() {
953953
<Nodata />
954954
) : (
955955
<div className="signatureContainer">
956+
{/* this modal is used to show decline alert */}
957+
<CustomModal
958+
show={isDecline.isDeclined}
959+
headMsg="Document Declined Alert!"
960+
bodyMssg={
961+
isDecline.currnt === "Sure" ? (
962+
<p>Are you sure want to decline this document ?</p>
963+
) : isDecline.currnt === "YouDeclined" ? (
964+
<p>You have declined this document!</p>
965+
) : (
966+
isDecline.currnt === "another" && (
967+
<p>
968+
You cannot sign this document as it has been declined by one
969+
or more person(s).
970+
</p>
971+
)
972+
)
973+
}
974+
footerMessage={isDecline.currnt === "Sure"}
975+
declineDoc={declineDoc}
976+
setIsDecline={setIsDecline}
977+
/>
978+
{/* this modal is used for show expired alert */}
979+
<CustomModal
980+
show={isExpired}
981+
headMsg="Document Expired!"
982+
bodyMssg="This Document is no longer available."
983+
/>
956984
{/* this component used for UI interaction and show their functionality */}
957985
{pdfLoadFail.status &&
958986
!isExpired &&
@@ -975,57 +1003,6 @@ function EmbedPdfImage() {
9751003
marginRight: pdfOriginalWidth > 500 && "20px"
9761004
}}
9771005
>
978-
{/* this modal is used for show decline alert */}
979-
<Modal show={isDecline.isDeclined}>
980-
<ModalHeader className="bg-danger" style={{ color: "white" }}>
981-
Document Declined Alert!
982-
</ModalHeader>
983-
984-
<Modal.Body>
985-
{isDecline.currnt === "Sure" ? (
986-
<p>Are you sure want to decline this document ?</p>
987-
) : isDecline.currnt === "YouDeclined" ? (
988-
<p>You have declined this document!</p>
989-
) : (
990-
isDecline.currnt === "another" && (
991-
<p>
992-
You cannot sign this document as it has been declined by
993-
one or more person(s).
994-
</p>
995-
)
996-
)}
997-
</Modal.Body>
998-
<Modal.Footer>
999-
{isDecline.currnt === "Sure" && (
1000-
<>
1001-
<button
1002-
style={{
1003-
color: "black"
1004-
}}
1005-
type="button"
1006-
className="finishBtn"
1007-
onClick={() => setIsDecline({ isDeclined: false })}
1008-
>
1009-
Close
1010-
</button>
1011-
<button
1012-
style={{
1013-
background: "#de4337"
1014-
}}
1015-
type="button"
1016-
className="finishBtn"
1017-
onClick={() => declineDoc()}
1018-
>
1019-
Yes
1020-
</button>
1021-
</>
1022-
)}
1023-
</Modal.Footer>
1024-
</Modal>
1025-
1026-
{/* this modal component is used for show expired document */}
1027-
<ModalComponent isShow={isExpired} type={"expire"} />
1028-
10291006
{/* this modal is used show this document is already sign */}
10301007
<Modal show={isAlreadySign.status}>
10311008
<ModalHeader style={{ background: themeColor() }}>

‎microfrontends/SignDocuments/src/css/customModal.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.parentDiv {
2+
width: 100%;
3+
height: 100%;
4+
background: gray;
5+
position: absolute;
6+
z-index: 100;
7+
background-color: rgba(0, 0, 0, 0.75);
8+
display: flex;
9+
flex-direction: column;
10+
/* justify-content: center; */
11+
align-items: center;
12+
}
13+
14+
.childDiv {
15+
width: 50%;
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
align-content: center;
20+
background-color: #fff;
21+
margin:30px 20px;
22+
border: 0px 1px 1px 1px solid rgba(0, 0, 0, .2);
23+
border-radius: 0.3rem;
24+
outline: 0;
25+
}
26+
27+
.modalHeadDiv {
28+
padding: 10px;
29+
color: #fff;
30+
border-top-left-radius: 0.3rem;
31+
border-top-right-radius: 0.3rem;
32+
font-size: 17px;
33+
font-weight: 500;
34+
}
35+
36+
.modalBodyDIv {
37+
padding: 20px;
38+
}
39+
40+
.spanTagHead {
41+
color: white !important;
42+
font-size: 17px;
43+
font-weight: 500;
44+
}
45+
46+
.pTagBody {
47+
48+
font-size: 15px !important;
49+
}
50+
.modalFooterDiv{
51+
margin: 10px;
52+
display: flex;
53+
justify-content: flex-end;
54+
}
55+
56+
@media screen and (max-width:500px) {
57+
.childDiv {
58+
margin: 50px 7px;
59+
width: 90%;
60+
}
61+
}

‎microfrontends/SignDocuments/src/css/signature.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,7 @@
341341
flex-direction: row;
342342
justify-content: space-between;
343343
background-color: #ebebeb;
344+
position:"relative"
344345
/* max-height: 800px; */
345346
/* overflow: auto; */
346347
}

0 commit comments

Comments
 (0)