WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #318 from OpenSignLabs/modal-ui

Browse Source 
fix: modal-ui,replace loading pdf to loading document, onclick placeholder open user details popup
This commit is contained in:
prafull-opensignlabs
2024-01-12 15:38:11 +05:30
committed by GitHub
parent 274620d17b 6080c59bd7
commit 550ce10c92
22 changed files with 981 additions and 1911 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/package-lock.json
Generated
-20
View File
@@ -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",
microfrontends/SignDocuments/package.json
-1
View File
@@ -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": {
microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
+24 -21
View File
@@ -20,7 +20,8 @@ function PdfFileComponent({
setDocId,
setIsLoading,
setPdfData,
isList
isList,
setIsAlert
}) {
const [rename, setRename] = useState("");
const [renameValue, setRenameValue] = useState("");
@@ -103,7 +104,10 @@ function PdfFileComponent({
// console.log("res", res);
})
.catch((err) => {
console.log("error updating field is decline ", err);
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
}
};
@@ -187,11 +191,16 @@ 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) => {
console.log("err", err);
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
};
const handleMoveDocument = async (docData) => {
@@ -243,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);
@@ -276,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;
@@ -291,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;
@@ -732,11 +738,8 @@ function PdfFileComponent({
onClick={() => {
setIsDeleteDoc(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
>
No
</button>
microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css
+3 -1
View File
@@ -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 */
microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+99 -57
View File
@@ -1,13 +1,9 @@
import React, { useEffect, useState, useRef } from "react";
import axios from "axios";
import "./LegaDrive.css";
import loader from "../../assests/loader2.gif";
import PdfFileComponent from "./FolderDrive/legaDriveComponent";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { themeColor, iconColor } from "../../utils/ThemeColor/backColor";
import { getDrive } from "../../utils/Utils";
import AlertComponent from "../component/alertComponent";
import { useNavigate } from "react-router-dom";
import Title from "../component/Title";
import Parse from "parse";
@@ -57,32 +53,38 @@ function PdfFile() {
isLoad: true,
message: "This might take some time"
};
let driveDetails;
setIsLoading(load);
const driveDetails = await getDrive();
if (driveDetails) {
if (driveDetails.length > 0) {
setPdfData(driveDetails);
sortApps(null, null, driveDetails);
}
const data = [
{
name: "OpenSign™ Drive",
objectId: ""
try {
driveDetails = await getDrive();
if (driveDetails) {
if (driveDetails.length > 0) {
setPdfData(driveDetails);
sortApps(null, null, driveDetails);
}
];
setFolderName(data);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else if (driveDetails === "Error: Something went wrong!") {
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
const data = [
{
name: "OpenSign™ Drive",
objectId: ""
}
];
setFolderName(data);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else if (driveDetails === "Error: Something went wrong!") {
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
}
} catch (e) {
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
};
//function for get parent folder document list
@@ -92,24 +94,33 @@ function PdfFile() {
message: "This might take some time"
};
setIsLoading(load);
const driveDetails = await getDrive(docId);
if (driveDetails) {
if (driveDetails.length > 0) {
setPdfData(driveDetails);
sortApps(null, null, driveDetails);
} else {
setPdfData([]);
let driveDetails;
try {
driveDetails = await getDrive(docId);
if (driveDetails) {
if (driveDetails.length > 0) {
setPdfData(driveDetails);
sortApps(null, null, driveDetails);
} else {
setPdfData([]);
}
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else if (driveDetails === "Error: Something went wrong!") {
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
}
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else if (driveDetails === "Error: Something went wrong!") {
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
} catch (e) {
setIsAlert({
isShow: true,
alertMessage: "something went wrong!"
});
}
};
@@ -187,7 +198,7 @@ function PdfFile() {
} catch (e) {
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
alertMessage: "something went wrong!"
});
}
} else {
@@ -328,11 +339,43 @@ function PdfFile() {
<div className="folderComponent ">
<Title title={"OpenSign™ Drive"} drive={true} />
<div>
<AlertComponent
isShow={isAlert.isShow}
alertMessage={isAlert.alertMessage}
setIsAlert={setIsAlert}
/>
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={"Alert"}
handleClose={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>{isAlert.alertMessage}</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() =>
setIsAlert({
isShow: false,
alertMessage: ""
})
}
type="button"
className="finishBtn cancelBtn"
>
Close
</button>
</div>
</ModalUi>
<ModalUi
isOpen={isFolder}
title={"Add New Folder"}
@@ -373,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)}
@@ -409,11 +453,8 @@ function PdfFile() {
Add
</button>
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
onClick={oncloseFolder}
>
Close
@@ -704,6 +745,7 @@ function PdfFile() {
isDocId={docId}
setPdfData={setPdfData}
isList={isList}
setIsAlert={setIsAlert}
/>
)}
</>
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+24 -36
View File
@@ -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>
@@ -851,33 +835,37 @@ function PdfRequestFiles() {
}}
>
{/* this modal is used show this document is already sign */}
<ModalUi
isOpen={isCompleted.isModal}
title={"Sign Documents"}
handleClose={() => {
setIsCompleted({ isModal: false, isCertificate: true });
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>This document has been signed by all Signers.</p>
<Modal show={isCompleted.isModal}>
<ModalHeader style={{ background: themeColor() }}>
<span className="spanTagHead"> Sign Documents</span>
</ModalHeader>
<Modal.Body>
<p className="pTagBody">
This document has been signed by all Signers.
</p>
</Modal.Body>
<Modal.Footer>
<button
<div
style={{
color: "black"
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
onClick={() =>
setIsCompleted({ isModal: false, isCertificate: true })
}
>
Close
</button>
</Modal.Footer>
</Modal>
</div>
</ModalUi>
{/* this component is used for signature pad modal */}
<SignPad
isSignPad={isSignPad}
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+64 -130
View File
@@ -13,19 +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 {
convertPNGtoJPEG,
contractDocument,
getBase64FromIMG,
embedDocId,
multiSignEmbed,
pdfNewWidthFun,
addDefaultSignatureImg,
onImageSelect,
placeholderHeight,
placeholderWidth
onImageSelect
} from "../utils/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -35,12 +29,11 @@ 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";
import ModalUi from "../premitives/ModalUi";
//For signYourself inProgress section signer can add sign and complete doc sign.
function SignYourSelf() {
@@ -445,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);
@@ -498,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([]);
@@ -507,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
@@ -865,52 +778,73 @@ function SignYourSelf() {
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
>
<AlertComponent
isShow={isAlert.isShow}
alertMessage={isAlert.alertMessage}
setIsAlert={setIsAlert}
/>
{/* this modal is used show this document is already sign */}
<Modal
show={showAlreadySignDoc.status}
onShow={() => modalAlign()}
backdropClassName="signature-backdrop"
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={"Alert"}
handleClose={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
>
<ModalHeader style={{ background: themeColor() }}>
<span style={{ color: "white" }}> Sign Documents</span>
</ModalHeader>
<div style={{ height: "100%", padding: 20 }}>
<p>{isAlert.alertMessage}</p>
<Modal.Body>
<p>{showAlreadySignDoc.mssg}</p>
</Modal.Body>
<Modal.Footer>
<button
<div
style={{
borderRadius: "0px",
border: "1.5px solid #e3e2e1",
fontWeight: "600",
color: "black"
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
className="btn"
></div>
<button
onClick={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
type="button"
className="finishBtn cancelBtn"
>
Ok
</button>
</div>
</ModalUi>
{/* this modal is used show this document is already sign */}
<ModalUi
isOpen={showAlreadySignDoc.status}
title={"Sign Documents"}
handleClose={() => {
setShowAlreadySignDoc({ status: false });
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>{showAlreadySignDoc.mssg}</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
className="finishBtn cancelBtn"
onClick={() => setShowAlreadySignDoc({ status: false })}
>
Close
</button>
{showAlreadySignDoc.sure && (
<button
onClick={() => addDefaultSignature()}
style={{
background: themeColor()
}}
type="button"
className="finishBtn"
>
Yes
</button>
)}
</Modal.Footer>
</Modal>
</div>
</ModalUi>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+11 -5
View File
@@ -158,6 +158,7 @@ const TemplatePlaceholder = () => {
const [signKey, setSignKey] = useState();
const [IsReceipent, setIsReceipent] = useState(true);
const [isDontShow, setIsDontShow] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const senderUser =
localStorage.getItem(
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -473,11 +474,12 @@ const TemplatePlaceholder = () => {
//function for save x and y position and show signature tab on that position
const handleTabDrag = (key) => {
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);
@@ -537,6 +539,9 @@ const TemplatePlaceholder = () => {
}
}
setIsMailSend(false);
setTimeout(() => {
setIsDragging(false);
}, 200);
};
//function for delete signature block
@@ -1061,11 +1066,8 @@ const TemplatePlaceholder = () => {
onClick={() => {
setIsCreateDocModal(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
>
No
</button>
@@ -1135,6 +1137,7 @@ const TemplatePlaceholder = () => {
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
setSignerObjId={setSignerObjId}
isDragging={isDragging}
/>
)}
</div>
@@ -1179,6 +1182,7 @@ const TemplatePlaceholder = () => {
handleDeleteUser={handleDeleteUser}
handleRoleChange={handleRoleChange}
handleOnBlur={handleOnBlur}
title={"Role"}
/>
</div>
) : (
@@ -1197,6 +1201,7 @@ const TemplatePlaceholder = () => {
handleDeleteUser={handleDeleteUser}
handleRoleChange={handleRoleChange}
handleOnBlur={handleOnBlur}
title={"Role"}
/>
<div data-tut="reactourSecond">
<FieldsComponent
@@ -1214,6 +1219,7 @@ const TemplatePlaceholder = () => {
isDragStamp={isDragStamp}
isSignYourself={false}
addPositionOfSignature={addPositionOfSignature}
title={"Role"}
/>
</div>
</div>
microfrontends/SignDocuments/src/Component/component/AddRoleModal.js
+2 -7
View File
@@ -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>
microfrontends/SignDocuments/src/Component/component/CustomModal.js
+1 -4
View File
@@ -49,11 +49,8 @@ function CustomModal({
Yes
</button>
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
onClick={() => setIsDecline({ isDeclined: false })}
>
Close
microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
+25 -21
View File
@@ -1,7 +1,6 @@
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";
function PlaceholderCopy(props) {
const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -200,12 +199,14 @@ function PlaceholderCopy(props) {
};
return (
<Modal show={props.isPageCopy}>
<ModalHeader style={{ background: themeColor() }}>
<span style={{ color: "white" }}>Copy to all pages</span>
</ModalHeader>
<Modal.Body>
<ModalUi
isOpen={props.isPageCopy}
title={"Copy to all pages"}
handleClose={() => {
props.setIsPageCopy(false);
}}
>
<div style={{ height: "100%", padding: 20 }}>
{copyType.map((data, key) => {
return (
<div key={key} style={{ display: "flex", flexDirection: "column" }}>
@@ -223,20 +224,16 @@ function PlaceholderCopy(props) {
</div>
);
})}
</Modal.Body>
<Modal.Footer>
<button
<div
style={{
color: "black"
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
type="button"
className="finishBtn"
onClick={() => props.setIsPageCopy(false)}
>
Cancel
</button>
></div>
<button
onClick={() => {
handleApplyCopy();
@@ -251,8 +248,15 @@ function PlaceholderCopy(props) {
>
Apply
</button>
</Modal.Footer>
</Modal>
<button
type="button"
className="finishBtn cancelBtn"
onClick={() => props.setIsPageCopy(false)}
>
Cancel
</button>
</div>
</ModalUi>
);
}
microfrontends/SignDocuments/src/Component/component/emailComponent.js
+243 -224
View File
@@ -1,8 +1,6 @@
import React, { useState } from "react";
import { saveAs } from "file-saver";
import celebration from "../../assests/newCeleb.gif";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import axios from "axios";
import { getBase64FromUrl } from "../../utils/Utils";
import { themeColor } from "../../utils/ThemeColor/backColor";
@@ -88,6 +86,8 @@ function EmailComponent({
isShow: true,
alertMessage: "something went wrong"
});
setEmailValue("");
setEmailList([]);
} else {
setIsLoading(false);
setIsEmail(false);
@@ -95,6 +95,8 @@ function EmailComponent({
isShow: true,
alertMessage: "something went wrong"
});
setEmailValue("");
setEmailList([]);
}
};
@@ -159,251 +161,268 @@ function EmailComponent({
return (
<div>
{/* isEmail */}
<Modal show={isEmail}>
{isLoading && (
<div
style={{
position: "absolute",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
zIndex: "20",
backgroundColor: "#e6f2f2",
opacity: 0.8
}}
>
<img
alt="no img"
src={loader}
style={{ width: "70px", height: "70px" }}
/>
<span style={{ fontSize: "12px", fontWeight: "bold" }}>
This might take some time
</span>
</div>
)}
<ModalHeader style={{ background: themeColor() }}>
<span style={{ color: "white" }}>Successfully signed!</span>
<div style={{ display: "flex", flexDirection: "row" }}>
<div></div>
{!isAndroid && (
<button
onClick={handleToPrint}
{isEmail && (
<div className="modaloverlay">
<div className="modalcontainer">
{isLoading && (
<div
style={{
position: "absolute",
height: "100%",
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center"
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
zIndex: "20",
backgroundColor: "#e6f2f2",
opacity: 0.8
}}
className="btn btn-primary btn-sm"
>
<i
className="fa fa-print"
style={{
fontSize: "15px",
marginRight: "3px",
color: "white"
}}
aria-hidden="true"
></i>
Print
</button>
<img
alt="no img"
src={loader}
style={{ width: "70px", height: "70px" }}
/>
<span style={{ fontSize: "12px", fontWeight: "bold" }}>
This might take some time
</span>
</div>
)}
<div style={{ background: "#32a3ac" }} className="modalheader">
<span style={{ color: "white" }}>Successfully signed!</span>
<button
className="btn btn-danger btn-sm"
onClick={() => handleDownloadPdf()}
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
marginLeft: "10px"
}}
>
<i
className="fa fa-download"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
Download
</button>
</div>
</ModalHeader>
<div style={{ display: "flex", flexDirection: "row" }}>
<div></div>
{!isAndroid && (
<button
onClick={handleToPrint}
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
className="btn btn-primary btn-sm"
>
<i
className="fa fa-print"
style={{
fontSize: "15px",
marginRight: "3px",
color: "white"
}}
aria-hidden="true"
></i>
Print
</button>
)}
<Modal.Body>
{isCeleb && (
<div
style={{
position: "absolute",
marginLeft: "50px"
}}
>
<img
alt="print img"
width={300}
height={250}
// style={styles.gifCeleb}
src={celebration}
/>
</div>
)}
<p
style={{
fontFamily: "system-ui",
verticalAlign: "baseline",
fontWeight: "500",
color: "#403f3e",
fontSize: "15px"
}}
>
Recipients added here will get a copy of the signed document.
</p>
{emailList.length > 0 ? (
<>
<div className="addEmail">
<div
<button
className="btn btn-danger btn-sm"
onClick={() => handleDownloadPdf()}
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
alignItems: "center",
marginLeft: "10px"
}}
>
{emailList.map((data, ind) => {
return (
<div
className="emailChip"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
key={ind}
>
<span
style={{
color: "white",
fontSize: "13px"
}}
>
{data}
</span>
<span
style={{
color: "white",
fontSize: 13,
fontWeight: 600,
marginLeft: 7,
cursor: "pointer"
}}
onClick={() => removeChip(ind)}
>
<i className="fa-solid fa-xmark"></i>
</span>
</div>
);
})}
<i
className="fa fa-download"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
Download
</button>
</div>
</div>
<div style={{ height: "100%", padding: 20 }}>
{isCeleb && (
<div
style={{
position: "absolute",
marginLeft: "50px"
}}
>
<img
alt="print img"
width={300}
height={250}
// style={styles.gifCeleb}
src={celebration}
/>
</div>
{emailList.length <= 9 && (
)}
<p
style={{
fontFamily: "system-ui",
verticalAlign: "baseline",
fontWeight: "500",
color: "#403f3e",
fontSize: "15px",
marginBottom: "5px"
}}
>
Recipients added here will get a copy of the signed document.
</p>
{emailList.length > 0 ? (
<>
<div className="addEmail">
<div
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
}}
>
{emailList.map((data, ind) => {
return (
<div
className="emailChip"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
key={ind}
>
<span
style={{
color: "white",
fontSize: "13px"
}}
>
{data}
</span>
<span
style={{
color: "white",
fontSize: 13,
fontWeight: 600,
marginLeft: 7,
cursor: "pointer"
}}
onClick={() => removeChip(ind)}
>
<i className="fa-solid fa-xmark"></i>
</span>
</div>
);
})}
</div>
{emailList.length <= 9 && (
<input
type="text"
value={emailValue}
className="addEmailInput"
onChange={handleEmailValue}
onKeyDown={handleEnterPress}
onBlur={() => {
if (emailValue) {
handleEnterPress("add");
}
}}
required
/>
)}
</div>
</>
) : (
<div>
<input
type="text"
value={emailValue}
className="addEmailInput"
className="emailInput"
onChange={handleEmailValue}
onKeyDown={handleEnterPress}
placeholder="Add the email addresses"
onBlur={() => {
if (emailValue) {
handleEnterPress("add");
}
}}
required
/>
)}
</div>
)}
<span
style={{
cursor: emailValue && "pointer"
}}
onClick={() => {
if (emailValue) {
handleEnterPress("add");
}
}}
>
<i
style={{
backgroundColor: themeColor(),
padding: "5px 7px",
marginTop: "10px",
color: "white",
borderRadius: "2px"
}}
className="fa fa-plus"
aria-hidden="true"
></i>
</span>
<div
style={{
background: "#e3e2e1",
marginTop: "10px",
padding: "5px",
borderRadius: "3px"
}}
>
<span style={{ fontWeight: "700" }}>Note:</span>
<span style={{ fontSize: "15px" }}>
{" "}
You can only send to ten recipients at a time.
</span>
</div>
</>
) : (
<div>
<input
type="text"
value={emailValue}
className="emailInput"
onChange={handleEmailValue}
onKeyDown={handleEnterPress}
placeholder="Add the email addresses"
required
/>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
disabled={emailList.length === 0 && true}
style={{
background: themeColor(),
color: "white"
}}
type="button"
className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
onClick={() => sendEmail()}
>
Send
</button>
<button
type="button"
className="finishBtn cancelBtn"
onClick={() => {
setIsEmail(false);
setEmailValue("");
setEmailList([]);
}}
>
Close
</button>
</div>
)}
<span
style={{
cursor: emailValue && "pointer"
}}
onClick={() => {
if (emailValue) {
handleEnterPress("add");
}
}}
>
<i
style={{
backgroundColor: themeColor(),
padding: "2px 10px",
marginTop: "10px",
color: "white"
}}
className="fa fa-plus"
aria-hidden="true"
></i>
</span>
<div
style={{
background: "#e3e2e1",
marginTop: "30px",
padding: "5px",
borderRadius: "3px"
}}
>
<span style={{ fontWeight: "700" }}>Note:</span>
<span style={{ fontSize: "15px" }}>
{" "}
You can only send to ten recipients at a time.
</span>
</div>
</Modal.Body>
<Modal.Footer>
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
onClick={() => {
setIsEmail(false);
setEmailValue("");
setEmailList([]);
}}
>
Close
</button>
<button
disabled={emailList.length === 0 && true}
style={{
background: themeColor(),
color: "white"
}}
type="button"
className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
onClick={() => sendEmail()}
>
Send
</button>
</Modal.Footer>
</Modal>
</div>
)}
</div>
);
}
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+3 -2
View File
@@ -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={{
microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
+1
View File
@@ -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"
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+24 -14
View File
@@ -520,7 +520,17 @@ function RenderPdf({
posHeight={posHeight}
/>
<div
onClick={(e) => {
if (!isDragging) {
handleLinkUser(data.Id);
setUniqueId(data.Id);
}
}}
onTouchEnd={() => {
if (!isDragging) {
handleLinkUser(data.Id);
setUniqueId(data.Id);
}
const dataNewPlace = addZIndex(
signerPos,
pos.key,
@@ -777,6 +787,7 @@ function RenderPdf({
onLoadError={(e) => {
setPdfLoadFail(true);
}}
loading={"Loading Document.."}
onLoadSuccess={pageDetails}
ref={pdfRef}
file={
@@ -844,7 +855,11 @@ function RenderPdf({
placeData.pos.map((pos) => {
return (
<Rnd
onClick={() => {
onClick={(e) => {
if (!isDragging) {
handleLinkUser(data.Id);
setUniqueId(data.Id);
}
const dataNewPlace = addZIndex(
signerPos,
pos.key,
@@ -888,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)
@@ -1096,6 +1105,7 @@ function RenderPdf({
};
setPdfLoadFail(load);
}}
loading={"Loading Document.."}
onLoadSuccess={pageDetails}
ref={pdfRef}
file={
microfrontends/SignDocuments/src/Component/component/signPad.js
+374 -362
View File
@@ -4,7 +4,6 @@ import SignatureCanvas from "react-signature-canvas";
import redPen from "../../assests/redPen.png";
import bluePen from "../../assests/bluePen.png";
import blackPen from "../../assests/blackPen.png";
import Modal from "react-bootstrap/Modal";
import { themeColor } from "../../utils/ThemeColor/backColor";
import { useEffect } from "react";
@@ -26,7 +25,6 @@ function SignPad({
const [penColor, setPenColor] = useState("blue");
const allColor = [bluePen, redPen, blackPen];
const canvasRef = useRef(null);
const spanRef = useRef(null);
const [isDefaultSign, setIsDefaultSign] = useState(false);
const [isTab, setIsTab] = useState("draw");
const [isSignImg, setIsSignImg] = useState("");
@@ -57,13 +55,19 @@ function SignPad({
setSignValue(currentUserName);
setFontSelect("Fasthand");
}, []);
//function for clear signature
//function for clear signature image
const handleClear = () => {
if (canvasRef.current) {
canvasRef.current.clear();
}
if (isTab === "draw") {
if (canvasRef.current) {
canvasRef.current.clear();
} else if (isStamp) {
setImage("");
}
setIsSignImg("");
setIsSignImg("");
} else if (isTab === "uploadImage") {
setImage("");
}
};
//function for set signature url
const handleSignatureChange = (dataURL) => {
@@ -75,11 +79,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"
@@ -126,7 +131,9 @@ function SignPad({
}
type="button"
className={
isSignImg || image ? "finishBtn saveBtn" : "disabledFinish saveBtn"
isSignImg || image || isDefaultSign || textWidth
? "finishBtn saveBtn"
: "disabledFinish saveBtn"
}
>
Save
@@ -212,375 +219,380 @@ function SignPad({
return (
<div>
{/*isSignPad */}
<Modal show={isSignPad}>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
background: "white",
borderBottom: "1.6px solid #ebe6e6",
marginTop: "15px"
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "end",
gap: 10
}}
>
{isStamp ? (
<span style={{ color: themeColor() }} className="signTab">
Upload stamp image
</span>
) : (
<>
<div>
<span
onClick={() => {
setIsDefaultSign(false);
setIsImageSelect(false);
setIsTab("draw");
setImage();
}}
style={{
color: isTab === "draw" ? themeColor() : "#515252",
marginLeft: "2px"
}}
className="signTab"
>
Draw
</span>
<div
style={{
border:
isTab === "draw"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
<div>
<span
onClick={() => {
setIsDefaultSign(false);
setIsImageSelect(true);
setIsTab("uploadImage");
}}
style={{
color: isTab === "uploadImage" ? themeColor() : "#515252"
}}
className="signTab"
>
Upload Image
</span>
<div
style={{
border:
isTab === "uploadImage"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
<div>
<span
onClick={() => {
setIsDefaultSign(false);
setIsImageSelect(false);
setIsTab("type");
setImage();
}}
style={{
color: isTab === "type" ? themeColor() : "#515252",
marginLeft: "2px"
}}
className="signTab"
>
Type
</span>
<div
style={{
border:
isTab === "type"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
{defaultSign && (
<div>
<span
onClick={() => {
setIsDefaultSign(true);
setIsImageSelect(true);
setIsTab("mysignature");
setImage();
}}
style={{
color:
isTab === "mysignature" ? themeColor() : "#515252"
}}
className="signTab"
>
My Signature
</span>
<div
style={{
border:
isTab === "mysignature"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
)}
</>
)}
</div>
<button
style={{
border: "0px",
background: "none",
paddingLeft: "7px",
paddingRight: "7px",
marginRight: "5px"
}}
onClick={() => {
setPenColor("blue");
setIsSignPad(false);
setIsImageSelect(false);
setIsDefaultSign(false);
setImage();
setIsTab("draw");
}}
>
X
</button>
</div>
{/* signature modal */}
<Modal.Body className="modalBody">
{isDefaultSign ? (
<>
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer"
// background:'rgb(255, 255, 255)'
}}
className="signatureCanvas"
>
<img
alt="stamp img"
style={{
width: "100%",
height: "100%",
background: "rgb(255, 255, 255)",
objectFit: "contain"
}}
src={defaultSign}
/>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<SaveBtn />
</div>
</>
) : isImageSelect || isStamp ? (
!image ? (
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer"
}}
className="signatureCanvas"
onClick={() => imageRef.current.click()}
>
<input
type="file"
onChange={onImageChange}
className="filetype"
accept="image/*"
ref={imageRef}
hidden
// style={{ display: "none" }}
/>
<i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
<div className="uploadImg">Upload</div>
</div>
) : (
<>
{isSignPad && (
<div className="modaloverlay">
<div className="modalcontainer">
<div
className="modalheader"
style={{ padding: "0 13px", marginTop: "5px" }}
>
<div className="modaltitle">
<div
style={{
// position: "relative",
border: "1px solid black",
marginBottom: 6,
// justifyContent:"center"
overflow: "hidden"
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
background: "white",
marginTop: "3px"
}}
className="signatureCanvas"
>
<img
alt="print img"
ref={imageRef}
// alt="preview image"
src={image.src}
<div
style={{
//overflow:"hidden",
objectFit: "contain"
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "end",
gap: 10
}}
/>
>
{isStamp ? (
<span style={{ color: themeColor() }} className="signTab">
Upload stamp image
</span>
) : (
<>
<div>
<span
onClick={() => {
setIsDefaultSign(false);
setIsImageSelect(false);
setIsTab("draw");
setImage();
}}
style={{
color:
isTab === "draw" ? themeColor() : "#515252",
marginLeft: "2px"
}}
className="signTab"
>
Draw
</span>
<div
style={{
border:
isTab === "draw"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
<div>
<span
onClick={() => {
setIsDefaultSign(false);
setIsImageSelect(true);
setIsTab("uploadImage");
}}
style={{
color:
isTab === "uploadImage"
? themeColor()
: "#515252"
}}
className="signTab"
>
Upload Image
</span>
<div
style={{
border:
isTab === "uploadImage"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
<div>
<span
onClick={() => {
setIsDefaultSign(false);
setIsImageSelect(false);
setIsTab("type");
setImage();
}}
style={{
color:
isTab === "type" ? themeColor() : "#515252",
marginLeft: "2px"
}}
className="signTab"
>
Type
</span>
<div
style={{
border:
isTab === "type"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
{defaultSign && (
<div>
<span
onClick={() => {
setIsDefaultSign(true);
setIsImageSelect(true);
setIsTab("mysignature");
setImage();
}}
style={{
color:
isTab === "mysignature"
? themeColor()
: "#515252"
}}
className="signTab"
>
My Signature
</span>
<div
style={{
border:
isTab === "mysignature"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
></div>
</div>
)}
</>
)}
</div>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<SaveBtn />
</div>
</>
)
) : isTab === "type" ? (
<div>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center"
className="closebtn"
style={{ color: "black" }}
onClick={() => {
setPenColor("blue");
setIsSignPad(false);
setIsImageSelect(false);
setIsDefaultSign(false);
setImage();
setIsTab("draw");
}}
>
<span className="signatureText">Signature:</span>
<input
maxLength={30}
style={{ fontFamily: fontSelect }}
type="text"
className="signatureInput"
placeholder="Your signature"
value={signValue}
onChange={(e) => {
setSignValue(e.target.value);
convertToImg(fontSelect, e.target.value);
}}
/>
</div>
{/* <div ref={spanRef}>nwbfmb</div> */}
<div className="fontOptionContainer">
{fontOptions.map((font, ind) => {
return (
<div
key={ind}
style={{
cursor: "pointer",
fontFamily: font.value,
backgroundColor:
fontSelect === font.value && "rgb(206 225 247)"
}}
onClick={() => {
setFontSelect(font.value);
convertToImg(font.value, signValue);
}}
>
<div
style={{
padding: "5px 10px 5px 10px",
fontSize: "20px"
}}
>
{signValue ? signValue : "Your signature"}
</div>
</div>
);
})}
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<SaveBtn />
&times;
</div>
</div>
) : (
<>
<SignatureCanvas
ref={canvasRef}
penColor={penColor}
canvasProps={{
className: "signatureCanvas"
}}
backgroundColor="rgb(255, 255, 255)"
onEnd={() =>
handleSignatureChange(canvasRef.current.toDataURL())
}
dotSize={1}
/>
<div style={{ height: "100%", padding: 20 }}>
{isDefaultSign ? (
<>
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer"
}}
className="signatureCanvas"
>
<img
alt="stamp img"
style={{
width: "100%",
height: "100%",
background: "rgb(255, 255, 255)",
objectFit: "contain"
}}
src={defaultSign}
/>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<SaveBtn />
</div>
</>
) : isImageSelect || isStamp ? (
!image ? (
<div
style={{
border: "1px solid black",
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "4px"
}}
>
<div style={{ display: "flex", flexDirection: "row" }}>
{allColor.map((data, key) => {
return (
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer"
}}
className="signatureCanvas"
onClick={() => imageRef.current.click()}
>
<input
type="file"
onChange={onImageChange}
className="filetype"
accept="image/*"
ref={imageRef}
hidden
/>
<i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
<div className="uploadImg">Upload</div>
</div>
) : (
<>
<div
style={{
border: "1px solid black",
marginBottom: 6,
overflow: "hidden"
}}
className="signatureCanvas"
>
<img
key={key}
alt="pen img"
alt="print img"
ref={imageRef}
src={image.src}
style={{
border: "none",
margin: "5px",
borderBottom:
key === 0 && penColor === "blue"
? "2px solid blue"
: key === 1 && penColor === "red"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
objectFit: "contain",
height: "100%",
width: "100%"
}}
onClick={() => {
if (key === 0) {
setPenColor("blue");
} else if (key === 1) {
setPenColor("red");
} else if (key === 2) {
setPenColor("black");
}
}}
src={data}
width={20}
height={20}
/>
// </button>
);
})}
</div>
</div>
<div
style={{ display: "flex", justifyContent: "flex-end" }}
>
<SaveBtn />
</div>
</>
)
) : isTab === "type" ? (
<div>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center"
}}
>
<span className="signatureText">Signature:</span>
<SaveBtn />
</div>
</>
)}
</Modal.Body>
</Modal>
<input
maxLength={30}
style={{ fontFamily: fontSelect }}
type="text"
className="signatureInput"
placeholder="Your signature"
value={signValue}
onChange={(e) => {
setSignValue(e.target.value);
convertToImg(fontSelect, e.target.value);
}}
/>
</div>
<div className="fontOptionContainer">
{fontOptions.map((font, ind) => {
return (
<div
key={ind}
style={{
cursor: "pointer",
fontFamily: font.value,
backgroundColor:
fontSelect === font.value && "rgb(206 225 247)"
}}
onClick={() => {
setFontSelect(font.value);
convertToImg(font.value, signValue);
}}
>
<div
style={{
padding: "5px 10px 5px 10px",
fontSize: "20px"
}}
>
{signValue ? signValue : "Your signature"}
</div>
</div>
);
})}
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<SaveBtn />
</div>
</div>
) : (
<>
<SignatureCanvas
ref={canvasRef}
penColor={penColor}
canvasProps={{
className: "signatureCanvas"
}}
backgroundColor="rgb(255, 255, 255)"
onEnd={() =>
handleSignatureChange(canvasRef.current.toDataURL())
}
dotSize={1}
/>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "10px"
}}
>
<div style={{ display: "flex", flexDirection: "row" }}>
{allColor.map((data, key) => {
return (
<img
key={key}
alt="pen img"
style={{
border: "none",
margin: "5px",
borderBottom:
key === 0 && penColor === "blue"
? "2px solid blue"
: key === 1 && penColor === "red"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
}}
onClick={() => {
if (key === 0) {
setPenColor("blue");
} else if (key === 1) {
setPenColor("red");
} else if (key === 2) {
setPenColor("black");
}
}}
src={data}
width={20}
height={20}
/>
);
})}
</div>
<SaveBtn />
</div>
</>
)}
</div>
</div>
</div>
)}
</div>
);
}
microfrontends/SignDocuments/src/Component/component/signerListPlace.js
+3 -1
View File
@@ -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} />
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+51 -28
View File
@@ -1,7 +1,6 @@
import React, { useState, useRef, useEffect } from "react";
import axios from "axios";
import "../css/./signature.css";
import Modal from "react-bootstrap/Modal";
import sign from "../assests/sign3.png";
import stamp from "../assests/stamp2.png";
import { themeColor } from "../utils/ThemeColor/backColor";
@@ -26,7 +25,6 @@ import {
randomId
} from "../utils/Utils";
import RenderPdf from "./component/renderPdf";
import ModalComponent from "./component/modalComponent";
import { useNavigate } from "react-router-dom";
import PlaceholderCopy from "./component/PlaceholderCopy";
import LinkUserModal from "./component/LinkUserModal";
@@ -85,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",
@@ -464,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);
@@ -527,6 +527,9 @@ function PlaceHolderSign() {
}
}
}
setTimeout(() => {
setIsDragging(false);
}, 200);
};
//function for delete signature block
@@ -680,6 +683,9 @@ function PlaceHolderSign() {
const hostUrl = window.location.origin + "/loadmf/signmicroapp";
let signPdf = `${hostUrl}/login/${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`;
const openSignUrl = "https://www.opensignlabs.com/contact-us";
const orgName = pdfDetails[0]?.ExtUserPtr.Company
? pdfDetails[0].ExtUserPtr.Company
: "";
const themeBGcolor = themeColor();
let params = {
recipient: signerMail[i].Email,
@@ -687,7 +693,7 @@ function PlaceHolderSign() {
from: sender,
html:
"<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head> <body> <div style='background-color: #f5f5f5; padding: 20px'> <div style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color: white;padding-bottom: 20px;'> <div><img src=" +
"<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head> <body> <div style='background-color: #f5f5f5; padding: 20px'=> <div style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background: white;padding-bottom: 20px;'> <div style='padding:10px 10px 0 10px'><img src=" +
imgPng +
" height='50' style='padding: 20px,width:170px,height:40px' /></div> <div style=' padding: 2px;font-family: system-ui;background-color:" +
themeBGcolor +
@@ -697,11 +703,13 @@ function PlaceHolderSign() {
pdfDetails?.[0].Name +
"</strong>.</p><div style='padding: 5px 0px 5px 25px;display: flex;flex-direction: row;justify-content: space-around;'><table> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Sender</td> <td> </td> <td style='color:#626363;font-weight:bold'>" +
sender +
"</td></tr><tr><td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Organization Name</td> <td> </td><td style='color:#626363;font-weight:bold'>__</td></tr> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Expire on</td><td> </td> <td style='color:#626363;font-weight:bold'>" +
"</td></tr><tr><td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Organization</td> <td> </td><td style='color:#626363;font-weight:bold'> " +
orgName +
"</td></tr> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Expire on</td><td> </td> <td style='color:#626363;font-weight:bold'>" +
localExpireDate +
"</td></tr><tr> <td></td> <td> <div style='display: flex; justify-content: center;margin-top: 50px;'><a href=" +
"</td></tr><tr> <td></td> <td> </td></tr></table> </div> <div style='margin-left:70px'><a href=" +
signPdf +
"> <button style='padding: 12px 20px 12px 20px;background-color: #d46b0f;color: white; border: 0px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;font-weight:bold'>Sign here</button></a> </div> </td><td> </td></tr></table> </div><div style='display: flex; justify-content: center;margin-top: 10px;'> </div></div></div><div><p> This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " +
"> <button style='padding: 12px 12px 12px 12px;background-color: #d46b0f;color: white; border: 0px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;font-weight:bold;margin-top:30px'>Sign here</button></a> </div> <div style='display: flex; justify-content: center;margin-top: 10px;'> </div></div></div><div><p> This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " +
sender +
" directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign™ <a href= " +
openSignUrl +
@@ -1031,11 +1039,8 @@ function PlaceHolderSign() {
)}
<button
onClick={() => setIsSendAlert({})}
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
>
Close
</button>
@@ -1085,11 +1090,8 @@ function PlaceHolderSign() {
setIsSend(false);
setSignerPos([]);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
>
No
</button>
@@ -1100,11 +1102,8 @@ function PlaceHolderSign() {
setIsSend(false);
setSignerPos([]);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
>
Close
</button>
@@ -1113,11 +1112,37 @@ function PlaceHolderSign() {
</ModalUi>
{/* <ModalComponent isShow={isAlreadyPlace} type={"alreadyPlace"} /> */}
<ModalComponent
isShow={isShowEmail}
type={"signersAlert"}
setIsShowEmail={setIsShowEmail}
/>
<ModalUi
headerColor={"#dc3545"}
isOpen={isShowEmail}
title={"signersAlert"}
handleClose={() => {
setIsShowEmail(false);
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>Please select signer for add placeholder!</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
setIsShowEmail(false);
}}
type="button"
className="finishBtn cancelBtn"
>
Ok
</button>
</div>
</ModalUi>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
@@ -1172,6 +1197,7 @@ function PlaceHolderSign() {
setSignerObjId={setSignerObjId}
handleLinkUser={handleLinkUser}
setUniqueId={setUniqueId}
isDragging={isDragging}
/>
)}
</div>
@@ -1276,11 +1302,8 @@ function PlaceHolderSign() {
></div>
<button
onClick={() => setSignerExistModal(false)}
style={{
color: "black"
}}
type="button"
className="finishBtn"
className="finishBtn cancelBtn"
>
Close
</button>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
-949
View File
@@ -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;
microfrontends/SignDocuments/src/Routes.js
-2
View File
@@ -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 */}
microfrontends/SignDocuments/src/css/signature.css
+29 -15
View File
@@ -2,6 +2,7 @@
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
.signatureCanvas {
border: 2px solid #888;
background-color: rgb(255, 255, 255);
@@ -185,6 +186,7 @@
z-index: 2;
background: white;
}
.signCopy {
position: absolute;
right: 12px;
@@ -204,16 +206,19 @@
z-index: 2;
background: white;
}
.ScrollbarsCustom-Track {
width: 4px !important;
}
.signYourselfBlock {
padding: 0px;
display: flex !important;
display: flex !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
}
.finishBtn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 30px;
@@ -222,6 +227,7 @@
font-size: 14px !important;
border: none;
margin-left: 10px;
border-radius: 2px;
}
.sendMail {
@@ -241,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 {
@@ -276,6 +282,14 @@
margin-left: 10px;
}
.backBtn {
background-color: white;
}
.backBtn:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
}
.defaultBtn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 26px;
@@ -285,14 +299,7 @@
border: 1px solid gray;
border-radius: 2px;
margin-left: 10px;
}
.backBtn {
background-color: white;
}
.backBtn:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
border: "none";
}
.defaultBtn:focus {
@@ -402,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;
@@ -443,7 +453,7 @@
width: 180px;
background-color: white;
height: 100%;
}
.modalBody {
@@ -678,9 +688,11 @@ option {
.dropDownStyle {
width: auto;
}
.autoSignScroll{
.autoSignScroll {
overflow-y: auto;
}
.autoSignScroll::-webkit-scrollbar {
display: none;
}
@@ -797,7 +809,8 @@ option {
.mobileHead {
display: flex;
}
.signatureText{
.signatureText {
margin-right: 5px;
font-size: 12px;
}
@@ -825,6 +838,7 @@ option {
.mobileHead {
display: flex;
}
.signTab {
font-weight: 500 !important;
microfrontends/SignDocuments/src/utils/Utils.js
-11
View File
@@ -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;