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 #261 from OpenSignLabs/staging

Browse Source 
sync fork
This commit is contained in:
prafull-opensignlabs
2023-12-12 19:57:56 +05:30
committed by GitHub
parent 2b345ff840 765c3c19fa
commit db9b8d2ba1
13 changed files with 851 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+11 -2
View File
@@ -7,6 +7,7 @@ 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";
function PdfFile() {
const scrollRef = useRef(null);
@@ -26,6 +27,7 @@ function PdfFile() {
const [docId, setDocId] = useState();
const [handleError, setHandleError] = useState();
const [folderName, setFolderName] = useState([]);
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const currentUser =
localStorage.getItem(
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -219,8 +221,10 @@ function PdfFile() {
}
})
.catch((err) => {
console.log("axois err ", err);
alert("something went wrong");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
} else {
setError("Please fill out this field");
@@ -324,6 +328,11 @@ function PdfFile() {
return (
<div className="folderComponent ">
<div>
<AlertComponent
isShow={isAlert.isShow}
alertMessage={isAlert.alertMessage}
setIsAlert={setIsAlert}
/>
<Modal show={isFolder}>
<ModalHeader style={{ background: themeColor() }}>
<span style={{ color: "white" }}>Add New Folder</span>
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+124 -126
View File
@@ -20,7 +20,9 @@ import {
multiSignEmbed,
embedDocId,
pdfNewWidthFun,
signPdfFun
signPdfFun,
calculateImgAspectRatio,
onImageSelect
} from "../utils/Utils";
import Loader from "./component/loader";
import HandleError from "./component/HandleError";
@@ -28,6 +30,7 @@ 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";
function PdfRequestFiles() {
const { docId } = useParams();
@@ -61,7 +64,7 @@ function PdfRequestFiles() {
const [isUiLoading, setIsUiLoading] = useState(false);
const [isDecline, setIsDecline] = useState({ isDeclined: false });
const [currentSigner, setCurrentSigner] = useState(false);
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const [isCompleted, setIsCompleted] = useState({
isCertificate: false,
isModal: false
@@ -290,26 +293,23 @@ function PdfRequestFiles() {
);
for (let i = 0; i < checkSign.length; i++) {
const posData = checkSign[i].pos.filter((pos) => !pos.SignUrl);
if (posData && posData.length > 0) {
checkSignUrl.push(posData);
}
}
if (checkSignUrl && checkSignUrl.length > 0) {
alert("Please complete your signature!");
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
});
} else {
setIsUiLoading(true);
const url = pdfUrl;
const pngUrl = checkUser[0].placeHolder;
// Load a PDFDocument from the existing PDF bytes
const existingPdfBytes = await fetch(url).then((res) =>
const existingPdfBytes = await fetch(pdfUrl).then((res) =>
res.arrayBuffer()
);
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true
});
@@ -318,22 +318,33 @@ function PdfRequestFiles() {
//checking if signature is only one then send image url in jpeg formate to server
if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) {
if (isDocId) {
pdfBase64 = await getBase64FromUrl(url);
try {
pdfBase64 = await getBase64FromUrl(pdfUrl);
} catch (err) {
console.log(err);
}
} else {
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
try {
await embedDocId(pdfDoc, documentId, allPages);
} catch (err) {
console.log(err);
}
try {
pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
} catch (err) {
console.log(err);
}
}
for (let i = 0; i < pngUrl.length; i++) {
const imgUrlList = pngUrl[i].pos;
const pageNo = pngUrl[i].pageNumber;
for (let pngData of pngUrl) {
const imgUrlList = pngData.pos;
const pageNo = pngData.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");
@@ -348,17 +359,17 @@ function PdfRequestFiles() {
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(
newImgUrl,
documentId,
signerObjectId,
pdfOriginalWidth,
pngUrl,
containerWH,
setIsAlert,
data,
pdfBase64,
pageNo,
containerWH
pageNo
)
.then((res) => {
if (res && res.status === "success") {
@@ -368,11 +379,17 @@ function PdfRequestFiles() {
setUnSignedSigners([]);
getDocumentDetails();
} else {
alert("something went wrong");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
})
.catch((err) => {
alert("something went wrong");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
})
.catch((error) => {
@@ -383,6 +400,7 @@ function PdfRequestFiles() {
}
//else if signature is more than one then embed all sign with the use of pdf-lib
else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) {
const flag = false;
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
//embed multi signature in pdf
@@ -390,39 +408,48 @@ function PdfRequestFiles() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
false
flag,
containerWH
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(
pdfBytes,
documentId,
signerObjectId,
pdfOriginalWidth,
pngUrl,
containerWH
)
.then((res) => {
if (res && res.status === "success") {
setPdfUrl(res.data);
setIsSigned(true);
setSignedSigners([]);
setUnSignedSigners([]);
getDocumentDetails();
} else {
alert("something went wrong");
}
})
.catch((err) => {
alert("something went wrong");
try {
const res = await signPdfFun(
pdfBytes,
documentId,
signerObjectId,
pdfOriginalWidth,
pngUrl,
containerWH,
setIsAlert
);
if (res && res.status === "success") {
setPdfUrl(res.data);
setIsSigned(true);
setSignedSigners([]);
setUnSignedSigners([]);
getDocumentDetails();
} else {
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
} catch (err) {
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
}
setIsSignPad(false);
}
} else {
console.log("something went wrong!");
alert("something went wrong!");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
}
@@ -451,35 +478,7 @@ function PdfRequestFiles() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
const imageType = event.target.files[0].type;
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onloadend = function (e) {
let width, height;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
width = image.width;
height = image.height;
const aspectRatio = 460 / 184;
const imgR = width / height;
if (imgR > aspectRatio) {
width = 460;
height = 460 / imgR;
} else {
width = 184 * imgR;
height = 184;
}
setImgWH({ width: width, height: height });
imageRef.current.style.width = `${width}px`;
imageRef.current.style.height = `${height}px`;
};
image.src = reader.result;
setImage({ src: image.src, imgType: imageType });
};
onImageSelect(event, setImgWH, setImage);
}
};
//function for upload stamp image
@@ -487,7 +486,6 @@ function PdfRequestFiles() {
const currentSigner = signerPos.filter(
(data) => data.signerObjId === signerObjectId
);
const i = currentSigner[0].placeHolder.findIndex((object) => {
return object.pageNumber === pageNumber;
});
@@ -495,34 +493,16 @@ function PdfRequestFiles() {
(data) =>
data.key === signKey && data.Width && data.Height && data.SignUrl
);
let getIMGWH = calculateImgAspectRatio(imgWH);
if (updateFilter.length > 0) {
let newWidth, nweHeight;
const aspectRatio = imgWH.width / imgWH.height;
const getXYdata = currentSigner[0].placeHolder[i].pos;
if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
nweHeight = aspectRatio * 100;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
nweHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
nweHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
nweHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
nweHeight = 10;
}
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: newWidth,
Height: nweHeight,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -546,32 +526,12 @@ function PdfRequestFiles() {
const getPosData = getXYdata;
const aspectRatio = imgWH.width / imgWH.height;
let newWidth, nweHeight;
if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
nweHeight = aspectRatio * 100;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
nweHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
nweHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
nweHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
nweHeight = 10;
}
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: newWidth,
Height: nweHeight,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -597,10 +557,22 @@ function PdfRequestFiles() {
//function for save button to save signature or image url
const onSaveSign = (isDefaultSign) => {
const signatureImg = isDefaultSign ? defaultSignImg : signature;
const isSign = true;
let getIMGWH;
setIsSignPad(false);
setIsImageSelect(false);
setImage();
if (isDefaultSign) {
const img = new Image();
img.src = defaultSignImg;
if (img.complete) {
let imgWH = {
width: img.width,
height: img.height
};
getIMGWH = calculateImgAspectRatio(imgWH);
}
}
const currentSigner = signerPos.filter(
(data) => data.signerObjId === signerObjectId
);
@@ -614,15 +586,36 @@ function PdfRequestFiles() {
updateFilter = currentSigner[0].placeHolder[i].pos.filter(
(data) => data.key === signKey && data.SignUrl
);
const getXYdata = currentSigner[0].placeHolder[i].pos;
const getPosData = getXYdata;
const posWidth = isDefaultSign
? getIMGWH.newWidth
: isSign && getPosData[0].ImageType
? 150
: getPosData[0].Width
? getPosData[0].Width
: 150;
const posHidth = isDefaultSign
? getIMGWH.newHeight
: isSign && getPosData[0].ImageType
? 60
: getPosData[0].Height
? getPosData[0].Height
: 60;
if (updateFilter.length > 0) {
updateFilter[0].SignUrl = signatureImg;
updateFilter[0].Width = posWidth;
updateFilter[0].Height = posHidth;
} else {
const getXYdata = currentSigner[0].placeHolder[i].pos;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return { ...url, SignUrl: signatureImg };
return {
...url,
SignUrl: signatureImg,
Width: posWidth,
Height: posHidth,
ImageType: "sign"
};
}
return url;
});
@@ -729,6 +722,11 @@ function PdfRequestFiles() {
)}
<div className="signatureContainer" ref={divRef}>
<AlertComponent
isShow={isAlert.isShow}
alertMessage={isAlert.alertMessage}
setIsAlert={setIsAlert}
/>
{/* this modal is used to show decline alert */}
<CustomModal
containerWH={containerWH}
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+59 -76
View File
@@ -21,7 +21,9 @@ import {
getBase64FromIMG,
embedDocId,
multiSignEmbed,
pdfNewWidthFun
pdfNewWidthFun,
addDefaultSignatureImg,
onImageSelect
} from "../utils/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -33,6 +35,7 @@ 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";
//For signYourself inProgress section signer can add sign and complete doc sign.
function SignYourSelf() {
@@ -83,6 +86,7 @@ function SignYourSelf() {
status: false,
type: "load"
});
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const divRef = useRef(null);
const nodeRef = useRef(null);
const [{ isOver }, drop] = useDrop({
@@ -401,14 +405,22 @@ function SignYourSelf() {
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) {
alert("Please complete your signature!");
if (xyPostion.length === 0) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
});
return;
} else if (xyPostion.length > 0 && checkSignUrl.length > 0) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
});
return;
} else {
setIsCeleb(true);
setTimeout(() => {
@@ -429,7 +441,7 @@ function SignYourSelf() {
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true
});
const pngUrl = xyPostion;
//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
@@ -437,15 +449,14 @@ function SignYourSelf() {
const pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
for (let i = 0; i < xyPostion.length; i++) {
const imgUrlList = xyPostion[i].pos;
const pageNo = xyPostion[i].pageNumber;
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");
@@ -469,17 +480,20 @@ function SignYourSelf() {
}
//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);
//embed multi signature in pdf
const pdfBytes = await multiSignEmbed(
pngUrl,
xyPostion,
pdfDoc,
pdfOriginalWidth,
true,
flag,
containerWH
);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
}
setIsSignPad(false);
@@ -500,7 +514,7 @@ function SignYourSelf() {
let singleSign;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const imgWidth = xyPosData ? xyPosData.Width : 150;
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
const height = xyPosData.Height ? xyPosData.Height : 60;
const bottomY = xyPosData.isDrag
@@ -623,54 +637,43 @@ function SignYourSelf() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
const imageType = event.target.files[0].type;
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onloadend = function (e) {
let width, height;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
width = image.width;
height = image.height;
const aspectRatio = 460 / 184;
const imgR = width / height;
if (imgR > aspectRatio) {
width = 460;
height = 460 / imgR;
} else {
width = 184 * imgR;
height = 184;
}
setImgWH({ width: width, height: height });
imageRef.current.style.width = `${width}px`;
imageRef.current.style.height = `${height}px`;
};
image.src = reader.result;
setImage({ src: image.src, imgType: imageType });
};
onImageSelect(event, setImgWH, setImage);
}
};
//function for upload stamp or image
const saveImage = () => {
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
setXyPostion(getImage);
};
//function for save button to save signature or image url
const saveSign = (isDefaultSign) => {
const signatureImg = isDefaultSign ? defaultSignImg : signature;
const signFlag = true;
let imgWH = { width: "", 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
signatureImg,
imgWH,
isDefaultSign,
signFlag
);
setXyPostion(getUpdatePosition);
@@ -729,35 +732,11 @@ function SignYourSelf() {
}
};
//function for upload stamp or image
const saveImage = () => {
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
setXyPostion(getImage);
};
//function for add default signature url in local array
const addDefaultSignature = () => {
let xyDefaultPos = [];
for (let i = 0; i < xyPostion.length; i++) {
const getXYdata = xyPostion[i].pos;
const getPageNo = xyPostion[i].pageNumber;
const getPosData = getXYdata;
const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
const addSign = getPosData.map((url, ind) => {
if (url) {
return { ...url, SignUrl: defaultSignImg };
}
return url;
});
const newXypos = {
pageNumber: getPageNo,
pos: addSign
};
xyDefaultPos.push(newXypos);
}
setXyPostion(xyDefaultPos);
setXyPostion(getXyData);
setShowAlreadySignDoc({ status: false });
};
const tourConfig = [
@@ -856,8 +835,12 @@ 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()}
@@ -921,9 +904,9 @@ function SignYourSelf() {
isCeleb={isCeleb}
setIsEmail={setIsEmail}
pdfName={pdfDetails[0] && pdfDetails[0].Name}
signObjId={documentId}
setSuccessEmail={setSuccessEmail}
sender={jsonSender}
setIsAlert={setIsAlert}
/>
{/* pdf header which contain funish back button */}
<Header
microfrontends/SignDocuments/src/Component/component/alertComponent.js
+79
View File
@@ -0,0 +1,79 @@
import React from "react";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { themeColor } from "../../utils/ThemeColor/backColor";
function AlertComponent({
isShow,
alertMessage,
setIsAlert,
isdefaultSign,
addDefaultSignature,
headBG
}) {
return (
<Modal show={isShow}>
<ModalHeader
style={{
color: "white",
background: headBG ? themeColor() : "#dc3545"
}}
>
<span>Alert</span>
</ModalHeader>
<Modal.Body>
<span>{alertMessage}</span>
</Modal.Body>
<Modal.Footer>
{isdefaultSign ? (
<>
<button
onClick={() => addDefaultSignature()}
style={{
background: themeColor()
}}
type="button"
className="finishBtn"
>
Yes
</button>
<button
onClick={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Close
</button>
</>
) : (
<button
onClick={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
)}
</Modal.Footer>
</Modal>
);
}
export default AlertComponent;
microfrontends/SignDocuments/src/Component/component/defaultSignature.js
+6 -9
View File
@@ -1,20 +1,17 @@
import React from "react";
function DefaultSignature({
themeColor,
defaultSignImg,
setShowAlreadySignDoc,
xyPostion
xyPostion,
setIsAlert
}) {
const confirmToaddDefaultSign = () => {
if (xyPostion.length > 0) {
const alreadySign = {
status: true,
mssg: "Are you sure you want to sign at requested locations?",
sure: true
};
setShowAlreadySignDoc(alreadySign);
setIsAlert({
isShow: true,
alertMessage: "Are you sure you want to sign at requested locations?"
});
} else {
alert("please select position!");
}
microfrontends/SignDocuments/src/Component/component/emailComponent.js
+19 -7
View File
@@ -16,9 +16,9 @@ function EmailComponent({
isCeleb,
setIsEmail,
setSuccessEmail,
signObjId,
pdfName,
sender
sender,
setIsAlert
}) {
const [emailList, setEmailList] = useState([]);
const [emailValue, setEmailValue] = useState();
@@ -62,11 +62,15 @@ function EmailComponent({
} catch (error) {
console.log("error", error);
setIsLoading(false);
alert("Something went wrong!");
setIsEmail(false);
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
}
if (sendMail.data.result.status === "success") {
if (sendMail && sendMail.data.result.status === "success") {
setSuccessEmail(true);
setTimeout(() => {
setSuccessEmail(false);
@@ -76,12 +80,20 @@ function EmailComponent({
}, 1500);
setIsLoading(false);
} else if (sendMail.data.result.status === "error") {
} else if (sendMail && sendMail.data.result.status === "error") {
setIsLoading(false);
alert("Something went wrong!");
setIsEmail(false);
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
} else {
setIsLoading(false);
alert("Something went wrong!");
setIsEmail(false);
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
};
microfrontends/SignDocuments/src/Component/component/modalComponent.js
+35 -14
View File
@@ -1,13 +1,16 @@
import React from "react";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { useNavigate } from "react-router-dom";
function ModalComponent({ isShow, type, setIsShowEmail }) {
const navigate = useNavigate();
return (
<Modal show={isShow}>
<ModalHeader className="bg-danger" style={{ color: "white" }}>
{type === "signersAlert" ? (
<span>Select signers</span>
) : type === "alreadyPlace" ? (
<span>Already Placed!</span>
) : (
<span>Document Expired!</span>
)}
@@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) {
<Modal.Body>
{type === "signersAlert" ? (
<p>Please select signer for add placeholder!</p>
) : type === "alreadyPlace" ? (
<p>Already set placeHolder for this document.</p>
) : (
<p>This Document is no longer available.</p>
)}
</Modal.Body>
<Modal.Footer>
{type === "signersAlert" &&(
<button
onClick={() => {
setIsShowEmail(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>)}
{type === "signersAlert" ? (
<button
onClick={() => {
setIsShowEmail(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
) : (
type === "alreadyPlace" && (
<button
onClick={() => {
navigate(-1);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
)
)}
</Modal.Footer>
</Modal>
);
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+59 -19
View File
@@ -59,30 +59,60 @@ function RenderPdf({
let width;
if (isMobile) {
if (!pos.isMobile) {
width = pos.Width / scale ? pos.Width / scale : 150 / scale;
return width;
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = (pos.Width || 150) / scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = (pos.Width || 150) * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
};
const posHeight = (pos) => {
let width;
let height;
if (isMobile) {
if (!pos.isMobile) {
width = pos.Height / scale ? pos.Height / scale : 60 / scale;
return width;
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = (pos.Height || 60) / scale;
return height;
}
} else {
width = pos.Height ? pos.Height : 60;
return width;
height = pos.Height ? pos.Height : 60;
return height;
}
} else {
width = pos.Height ? pos.Height : 60;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = (pos.Height || 60) * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
};
@@ -99,7 +129,7 @@ function RenderPdf({
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.xPosition / scale - 32;
return pos.xPosition / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
@@ -169,7 +199,8 @@ function RenderPdf({
data.signerObjId === signerObjectId
? "pointer"
: "not-allowed",
borderColor: themeColor()
borderColor: themeColor(),
background: data.blockColor
}}
className="placeholderBlock"
size={{
@@ -186,10 +217,13 @@ function RenderPdf({
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH
containerWH,
true
);
}}
lockAspectRatio={pos.Width && 2.5}
lockAspectRatio={
pos.Width ? pos.Width / pos.Height : 2.5
}
default={{
x: xPos(pos),
y: yPos(pos)
@@ -413,7 +447,8 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
borderColor: themeColor()
borderColor: themeColor(),
background: data.blockColor
}}
className="placeholderBlock"
onDrag={() =>
@@ -464,6 +499,7 @@ function RenderPdf({
setSignerPos,
pdfOriginalWidth,
containerWH,
false,
setIsResize
);
}}
@@ -739,10 +775,12 @@ function RenderPdf({
}}
className="placeholderBlock"
size={{
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
width: posWidth(pos),
height: posHeight(pos)
}}
lockAspectRatio={pos.Width && 2.5}
lockAspectRatio={
pos.Width ? pos.Width / pos.Height : 2.5
}
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
default={{
@@ -828,6 +866,7 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
background: data.blockColor,
borderColor: themeColor()
}}
className="placeholderBlock"
@@ -878,6 +917,7 @@ function RenderPdf({
setSignerPos,
pdfOriginalWidth,
containerWH,
false,
setIsResize
);
}}
microfrontends/SignDocuments/src/Component/component/signPad.js
+34 -113
View File
@@ -18,11 +18,10 @@ function SignPad({
isImageSelect,
imageRef,
onImageChange,
onSaveImage,
image,
defaultSign,
setSignature,
setSignature
}) {
const [penColor, setPenColor] = useState("blue");
const allColor = [bluePen, redPen, blackPen];
@@ -47,14 +46,12 @@ function SignPad({
//save button component
const SaveBtn = () => {
// console.log("isSign",isSignImg,image)
return (
<div>
{!isStamp && !isImageSelect && (
<button
style={{
color: "black",
color: "black"
}}
type="button"
className="finishBtn saveBtn"
@@ -89,7 +86,7 @@ function SignPad({
}}
style={{
background: themeColor(),
color: "white",
color: "white"
}}
disabled={isSignImg || image || isDefaultSign ? false : true}
type="button"
@@ -109,6 +106,7 @@ function SignPad({
canvasRef.current.fromDataURL(isSignImg);
}
}, [isTab]);
return (
<div>
{/*isSignPad */}
@@ -120,7 +118,7 @@ function SignPad({
justifyContent: "space-between",
background: "white",
borderBottom: "1.6px solid #ebe6e6",
marginTop: "15px",
marginTop: "15px"
}}
>
<div
@@ -129,7 +127,7 @@ function SignPad({
flexDirection: "row",
justifyContent: "space-around",
alignItems: "end",
gap: 10,
gap: 10
// background: themeColor(),
}}
@@ -150,8 +148,7 @@ function SignPad({
}}
style={{
color: isTab === "signature" ? themeColor() : "#515252",
marginLeft: "2px",
marginLeft: "2px"
}}
className="signTab"
>
@@ -163,7 +160,7 @@ function SignPad({
border:
isTab === "signature"
? "1.5px solid #108783"
: "1.5px solid #ffffff",
: "1.5px solid #ffffff"
}}
></div>
</div>
@@ -175,7 +172,7 @@ function SignPad({
setIsTab("uploadImage");
}}
style={{
color: isTab === "uploadImage" ? themeColor() : "#515252",
color: isTab === "uploadImage" ? themeColor() : "#515252"
}}
className="signTab"
>
@@ -186,7 +183,7 @@ function SignPad({
border:
isTab === "uploadImage"
? "1.5px solid #108783"
: "1.5px solid #ffffff",
: "1.5px solid #ffffff"
}}
></div>
</div>
@@ -202,7 +199,7 @@ function SignPad({
}}
style={{
color:
isTab === "mysignature" ? themeColor() : "#515252",
isTab === "mysignature" ? themeColor() : "#515252"
}}
className="signTab"
>
@@ -213,7 +210,7 @@ function SignPad({
border:
isTab === "mysignature"
? "1.5px solid #108783"
: "1.5px solid #ffffff",
: "1.5px solid #ffffff"
}}
></div>
</div>
@@ -228,7 +225,7 @@ function SignPad({
background: "none",
paddingLeft: "7px",
paddingRight: "7px",
marginRight: "5px",
marginRight: "5px"
}}
onClick={() => {
setPenColor("blue");
@@ -251,14 +248,12 @@ function SignPad({
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer",
// background:'rgb(255, 255, 255)'
cursor: "pointer"
}}
className="signatureCanvas"
>
@@ -267,8 +262,7 @@ function SignPad({
style={{
width: "100%",
height: "100%",
background: "rgb(255, 255, 255)",
objectFit: "contain",
objectFit: "contain"
}}
src={defaultSign}
/>
@@ -282,13 +276,12 @@ function SignPad({
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer",
cursor: "pointer"
}}
className="signatureCanvas"
onClick={() => imageRef.current.click()}
@@ -300,7 +293,6 @@ function SignPad({
accept="image/*"
ref={imageRef}
hidden
// style={{ display: "none" }}
/>
<i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
<div className="uploadImg">Upload</div>
@@ -309,24 +301,25 @@ function SignPad({
<>
<div
style={{
// position: "relative",
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
// justifyContent:"center"
overflow: "hidden",
cursor: "pointer"
}}
className="signatureCanvas"
>
<img
alt="print img"
ref={imageRef}
// alt="preview image"
src={image.src}
alt="stamp img"
style={{
//overflow:"hidden",
objectFit: "contain",
width: "100%",
height: "100%",
objectFit: "contain"
}}
ref={imageRef}
src={image.src}
/>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
@@ -336,36 +329,11 @@ function SignPad({
)
) : (
<>
{/* {isSignImg ? (
<div
style={{
position: "relative",
border: "2px solid #888",
marginBottom: 6,
}}
className="signatureCanvas"
>
<img
alt="preview image"
src={isSignImg}
style={{
width: "100%",
height: "100%",
objectFit: "contain",
}}
/>
</div>
) : ( */}
<SignatureCanvas
ref={canvasRef}
penColor={penColor}
canvasProps={{
// width: "460px",
// height: "184px",
// width:"280px",
// height:"112px",
className: "signatureCanvas",
className: "signatureCanvas"
}}
backgroundColor="rgb(255, 255, 255)"
onEnd={() =>
@@ -373,17 +341,16 @@ function SignPad({
}
dotSize={1}
/>
{/* )} */}
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop:"4px"
marginTop: "4px"
}}
>
<div style={{display:"flex",flexDirection:"row"}}>
<div style={{ display: "flex", flexDirection: "row" }}>
{allColor.map((data, key) => {
return (
<img
@@ -396,10 +363,10 @@ function SignPad({
key === 0 && penColor === "blue"
? "2px solid blue"
: key === 1 && penColor === "red"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white",
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
}}
onClick={() => {
if (key === 0) {
@@ -414,60 +381,14 @@ function SignPad({
width={20}
height={20}
/>
// </button>
);
})}
</div>
<SaveBtn />
</div>
</>
)}
</Modal.Body>
{/* <Modal.Footer>
{!isStamp && !isImageSelect && (
<button
style={{
color: "black",
}}
type="button"
className="finishBtn"
onClick={() => handleClear()}
>
Clear
</button>
)}
<button
onClick={() => {
if (!image) {
if (isDefaultSign) {
onSaveSign(isDefaultSign);
} else {
onSaveSign();
}
setPenColor("blue");
} else {
onSaveImage();
}
setIsSignPad(false);
setIsImageSelect(false);
setIsDefaultSign(false);
setImage();
}}
style={{
background: themeColor(),
color: "white",
}}
type="button"
className="finishBtn"
>
Save
</button>
</Modal.Footer> */}
</Modal>
</div>
);
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+7 -1
View File
@@ -65,6 +65,7 @@ function PlaceHolderSign() {
const [isShowEmail, setIsShowEmail] = useState(false);
const [selectedEmail, setSelectedEmail] = useState(false);
const [isResize, setIsResize] = useState(false);
const [isAlreadyPlace, setIsAlreadyPlace] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -181,8 +182,12 @@ function PlaceHolderSign() {
//getting document details
const documentData = await contractDocument(documentId);
if (documentData && documentData.length > 0) {
const alreadyPlaceholder =
documentData[0].Placeholders && documentData[0].Placeholders;
if (alreadyPlaceholder && alreadyPlaceholder.length > 0) {
setIsAlreadyPlace(true);
}
setPdfDetails(documentData);
const currEmail = documentData[0].ExtUserPtr.Email;
const filterCurrEmail = documentData[0].Signers.filter(
(data) => data.Email === currEmail
@@ -916,6 +921,7 @@ function PlaceHolderSign() {
)}
</Modal.Footer>
</Modal>
<ModalComponent isShow={isAlreadyPlace} type={"alreadyPlace"} />
<ModalComponent
isShow={isShowEmail}
type={"signersAlert"}
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+100 -100
View File
@@ -22,7 +22,9 @@ import {
urlValidator,
multiSignEmbed,
embedDocId,
signPdfFun
signPdfFun,
addDefaultSignatureImg,
onImageSelect
} from "../utils/Utils";
import Tour from "reactour";
import Signedby from "./component/signedby";
@@ -34,6 +36,7 @@ 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";
function EmbedPdfImage() {
const { id, contactBookId } = useParams();
const [isSignPad, setIsSignPad] = useState(false);
@@ -65,18 +68,22 @@ function EmbedPdfImage() {
const [checkTourStatus, setCheckTourStatus] = useState(false);
const [signerUserId, setSignerUserId] = useState();
const [tourStatus, setTourStatus] = useState([]);
const [completePdfData, setCompletePdfData] = 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 docId = id && id;
const isMobile = window.innerWidth < 767;
const index = xyPostion.findIndex((object) => {
@@ -92,8 +99,7 @@ function EmbedPdfImage() {
: `${localStorage.getItem("UserInformation")}` &&
`${localStorage.getItem("UserInformation")}`;
const jsonSender = JSON.parse(senderUser);
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
const isGuestSigner = localStorage.getItem("isGuestSigner");
useEffect(() => {
getDocumentDetails();
}, []);
@@ -202,7 +208,6 @@ function EmbedPdfImage() {
setIsAlreadySign(alreadySign);
setPdfUrl(documentData[0].SignedUrl);
setSignedPdfData(documentData);
setCompletePdfData(documentData);
} else if (declined) {
const currentDecline = {
currnt: "another",
@@ -397,7 +402,10 @@ function EmbedPdfImage() {
}
if (checkSignUrl && checkSignUrl.length > 0) {
alert("Please complete your signature!");
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
});
} else {
const loadObj = {
isLoad: true,
@@ -428,9 +436,10 @@ function EmbedPdfImage() {
await embedDocId(pdfDoc, docId, allPages);
pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false });
}
for (let i = 0; i < xyPostion.length; i++) {
const imgUrlList = pngUrl[i].pos;
const pageNo = pngUrl[i].pageNumber;
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;
@@ -456,30 +465,41 @@ function EmbedPdfImage() {
signerUserId,
pdfOriginalWidth,
xyPostion,
containerWH,
setIsAlert,
data,
pdfBase64,
pageNo,
containerWH
pageNo
)
.then((res) => {
if (res && res.status === "success") {
getDocumentDetails();
} else {
alert("something went wrong");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
}
})
.catch((err) => {
alert("something went wrong!");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
})
.catch((error) => {
console.error("Error:", 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
await embedDocId(pdfDoc, docId, allPages);
//embed multi signature in pdf
@@ -487,29 +507,35 @@ function EmbedPdfImage() {
pngUrl,
pdfDoc,
pdfOriginalWidth,
false,
flag,
containerWH
);
//function for embed signature in pdf and get digital signature pdf
signPdfFun(
pdfBytes,
docId,
signerUserId,
pdfOriginalWidth,
xyPostion,
containerWH
)
.then((res) => {
if (res && res.status === "success") {
getDocumentDetails();
} else {
alert("something went wrong!");
}
})
.catch((err) => {
alert("something went wrong in query");
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([]);
@@ -524,60 +550,43 @@ function EmbedPdfImage() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
const imageType = event.target.files[0].type;
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onloadend = function (e) {
let width, height;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
width = image.width;
height = image.height;
const aspectRatio = 460 / 184;
const imgR = width / height;
if (imgR > aspectRatio) {
width = 460;
height = 460 / imgR;
} else {
width = 184 * imgR;
height = 184;
}
setImgWH({ width: width, height: height });
imageRef.current.style.width = `${width}px`;
imageRef.current.style.height = `${height}px`;
};
image.src = reader.result;
setImage({ src: image.src, imgType: imageType });
};
onImageSelect(event, setImgWH, setImage);
}
};
//function for save button to save signature or image url
const saveSign = (isDefaultSign) => {
const signatureImg = isDefaultSign ? defaultSignImg : signature;
const signFlag = true;
let imgWH = { width: "", 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
signatureImg,
imgWH,
isDefaultSign,
signFlag
);
if (getUpdatePosition) {
setXyPostion(getUpdatePosition);
}
};
//function for upload stamp image
const saveImage = () => {
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
@@ -615,33 +624,21 @@ function EmbedPdfImage() {
}
})
.catch((err) => {
console.log("error updating field is decline ", err);
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
};
const addDefaultSignature = () => {
let xyDefaultPos = [];
for (let i = 0; i < xyPostion.length; i++) {
const getXYdata = xyPostion[i].pos;
const getPageNo = xyPostion[i].pageNumber;
const getPosData = getXYdata;
const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
const addSign = getPosData.map((url, ind) => {
if (url) {
return { ...url, SignUrl: defaultSignImg };
}
return url;
});
const newXypos = {
pageNumber: getPageNo,
pos: addSign
};
xyDefaultPos.push(newXypos);
}
setXyPostion(xyDefaultPos);
setIsAlreadySign({ status: false });
setXyPostion(getXyData);
setAddDefaultSign({
isShow: false,
alertMessage: ""
});
};
//function for update TourStatus
@@ -763,6 +760,20 @@ function EmbedPdfImage() {
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}
@@ -820,18 +831,6 @@ function EmbedPdfImage() {
>
Close
</button>
{isAlreadySign.sure && (
<button
onClick={() => addDefaultSignature()}
style={{
background: themeColor()
}}
type="button"
className="finishBtn"
>
Yes
</button>
)}
</Modal.Footer>
</Modal>
{/* this is modal of signature pad */}
@@ -905,6 +904,7 @@ function EmbedPdfImage() {
xyPostion={xyPostion}
setXyPostion={setXyPostion}
setShowAlreadySignDoc={setIsAlreadySign}
setIsAlert={setAddDefaultSign}
/>
</div>
) : (
microfrontends/SignDocuments/src/css/signature.css
+19 -13
View File
@@ -8,6 +8,7 @@
.penContainer {
width: 460px;
}
.borderResize {
position: absolute;
display: inline-block;
@@ -15,17 +16,20 @@
height: 14px;
}
.mailBtn{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 15px !important;
background-color: rgb(79 190 241);
border: none !important;
color: white !important;
.mailBtn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 15px !important;
background-color: rgb(79 190 241);
border: none !important;
color: white !important;
}
.mailBtn:hover {
box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
}
.emailToast{
.emailToast {
position: absolute;
z-index: 10;
background: #aeedae;
@@ -34,7 +38,7 @@
border-radius: 2px;
}
.signatureBtn {
border: 1.5px solid #47a3ad;
margin-bottom: 10px;
@@ -162,14 +166,15 @@
.placeholdCloseBtn {
position: absolute;
right: -9px;
top: -15px;
right: -5px;
top: -5px;
border-radius: 100%;
font-size: 10px;
cursor: pointer;
padding: 0px 5px;
padding: 0px 5.1px 1px 5px;
}
.placeholderBlock{
.placeholderBlock {
padding: 0px;
z-index: 1;
position: absolute;
@@ -179,7 +184,8 @@
background: #daebe0;
text-align: center;
justify-content: center;
border-width: 0.2px
border-width: 0.2px;
}
.finishBtn {
microfrontends/SignDocuments/src/utils/Utils.js
+299 -118
View File
@@ -1,6 +1,9 @@
import axios from "axios";
import { $ } from "select-dom";
import { rgb } from "pdf-lib";
const isMobile = window.innerWidth < 767;
export async function getBase64FromUrl(url) {
const data = await fetch(url);
const blob = await data.blob();
@@ -74,46 +77,49 @@ export function getHostUrl() {
}
}
export const calculateImgAspectRatio = (imgWH) => {
let newWidth, newHeight;
const aspectRatio = imgWH.width / imgWH.height;
if (aspectRatio === "2.533333333333333") {
newWidth = 150;
newHeight = 60;
} else if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
newHeight = aspectRatio * 100;
} else if (aspectRatio < 1) {
newWidth = aspectRatio * 70;
newHeight = 70;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
newHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
newHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
newHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
newHeight = 10;
}
return { newHeight, newWidth };
};
//function for upload stamp or image
export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
const updateFilter = xyPostion[index].pos.filter(
(data, ind) =>
data.key === signKey && data.Width && data.Height && data.SignUrl
);
let getIMGWH = calculateImgAspectRatio(imgWH);
const getXYdata = xyPostion[index].pos;
if (updateFilter.length > 0) {
let newWidth, newHeight;
const aspectRatio = imgWH.width / imgWH.height;
const getXYdata = xyPostion[index].pos;
if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
newHeight = aspectRatio * 100;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
newHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
newHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
newHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
newHeight = 10;
}
let getPosData = xyPostion[index].pos.filter(
(data) => data.key === signKey
);
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -128,39 +134,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
return obj;
});
return newUpdateUrl;
// setXyPostion(newUpdateUrl);
} else {
const getXYdata = xyPostion[index].pos;
let getPosData = xyPostion[index].pos.filter(
(data) => data.key === signKey
);
const aspectRatio = imgWH.width / imgWH.height;
let newWidth, newHeight;
if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
newHeight = aspectRatio * 100;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
newHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
newHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
newHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
newHeight = 10;
}
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -179,17 +165,46 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
}
//function for save button to save signature or image url
export function onSaveSign(xyPostion, index, signKey, signatureImg) {
export function onSaveSign(
xyPostion,
index,
signKey,
signatureImg,
imgWH,
isDefaultSign,
isSign
) {
let getXYdata = xyPostion[index].pos;
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
let getIMGWH;
if (isDefaultSign) {
getIMGWH = calculateImgAspectRatio(imgWH);
}
const posWidth = isDefaultSign
? getIMGWH.newWidth
: isSign && getPosData[0].ImageType
? 150
: getPosData[0].Width
? getPosData[0].Width
: 150;
const posHidth = isDefaultSign
? getIMGWH.newHeight
: isSign && getPosData[0].ImageType
? 60
: getPosData[0].Height
? getPosData[0].Height
: 60;
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getPosData[0].Width ? getPosData[0].Width : 150,
Height: getPosData[0].Height ? getPosData[0].Height : 60,
SignUrl: signatureImg
Width: posWidth,
Height: posHidth,
SignUrl: signatureImg,
ImageType: "sign"
};
}
return url;
@@ -204,6 +219,78 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) {
return newUpdateUrl;
}
//function for add default signature or image for all requested location
export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
let imgWH = { width: "", height: "" };
const img = new Image();
img.src = defaultSignImg;
if (img.complete) {
imgWH = {
width: img.width,
height: img.height
};
}
const getIMGWH = calculateImgAspectRatio(imgWH);
let xyDefaultPos = [];
for (let i = 0; i < xyPostion.length; i++) {
const getXYdata = xyPostion[i].pos;
const getPageNo = xyPostion[i].pageNumber;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url) {
return {
...url,
SignUrl: defaultSignImg,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
ImageType: "default"
};
}
return url;
});
const newXypos = {
pageNumber: getPageNo,
pos: addSign
};
xyDefaultPos.push(newXypos);
}
return xyDefaultPos;
};
//function for select image and upload image
export const onImageSelect = (event, setImgWH, setImage) => {
const imageType = event.target.files[0].type;
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onloadend = function (e) {
let width, height;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
width = image.width;
height = image.height;
const aspectRatio = 460 / 184;
const imgR = width / height;
if (imgR > aspectRatio) {
width = 460;
height = 460 / imgR;
} else {
width = 184 * imgR;
height = 184;
}
setImgWH({ width: width, height: height });
};
image.src = reader.result;
setImage({ src: image.src, imgType: imageType });
};
};
//function for getting document details from contract_Documents class
export const contractDocument = async (documentId) => {
const data = {
@@ -342,7 +429,83 @@ export function modalAlign() {
modal.style.top = window.innerHeight / 3 + "px";
}
}
export const containerWidth = (pos, scale, signyourself) => {
let width;
if (signyourself) {
if (isMobile) {
return pos.Width * scale;
} else {
return pos.Width;
}
} else {
if (isMobile) {
if (pos.isMobile) {
width = pos.Width ? pos.Width * scale : 150 * scale;
return width;
} else {
if (pos.IsResize) {
width = pos.Width ? pos.Width * scale : 150 * scale;
return width;
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
} else {
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
}
};
export const containerHeight = (pos, scale, signyourself) => {
let height;
if (signyourself) {
if (isMobile) {
return pos.Height * scale;
} else {
return pos.Height;
}
} else {
if (isMobile) {
if (pos.isMobile) {
height = pos.Height ? pos.Height * scale : 60 * scale;
return height;
} else {
if (pos.IsResize) {
height = pos.Height ? pos.Height * scale : 60 * scale;
return height;
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
} else {
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
}
};
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
pngUrl,
@@ -351,9 +514,11 @@ export const multiSignEmbed = async (
signyourself,
containerWH
) => {
for (let i = 0; i < pngUrl.length; i++) {
const pageNo = pngUrl[i].pageNumber;
const imgUrlList = pngUrl[i].pos;
for (let item of pngUrl) {
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const pageNo = item.pageNumber;
const imgUrlList = item.pos;
const pages = pdfDoc.getPages();
const page = pages[pageNo - 1];
const images = await Promise.all(
@@ -384,10 +549,9 @@ export const multiSignEmbed = async (
img = await pdfDoc.embedPng(imgData);
}
const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60;
const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself);
const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself);
const xPos = (pos) => {
if (signyourself) {
if (isMobile) {
@@ -438,13 +602,22 @@ export const multiSignEmbed = async (
const y = pos.yPosition * (pos.scale / scale);
return page.getHeight() - y * scale - imgHeight * scale;
} else {
return page.getHeight() - y * scale - imgHeight * scale;
if (pos.IsResize) {
return page.getHeight() - y * scale - imgHeight * scale;
} else {
return page.getHeight() - y * scale - imgHeight;
}
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
if (pos.IsResize) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
} else {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight * pos.scale;
}
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
@@ -455,12 +628,14 @@ export const multiSignEmbed = async (
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: imgWidth * scale,
height: imgHeight * scale
width: scaleWidth,
height: scaleHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
return pdfBytes;
};
//function for embed document id
@@ -499,14 +674,13 @@ export const handleImageResize = (
setSignerPos,
pdfOriginalWidth,
containerWH,
showResize,
setIsResize
) => {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerId
);
const isMobile = window.innerWidth < 767;
const newWidth = containerWH;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
@@ -523,11 +697,9 @@ export const handleImageResize = (
if (url.key === key) {
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight
// xPosition: position.x
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
@@ -550,17 +722,14 @@ export const handleImageResize = (
setSignerPos(newUpdateSigner);
} else {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === key) {
return {
...url,
Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
Height: !url.isMobile
? ref.offsetHeight * scale
: ref.offsetHeight
Width: ref.offsetWidth,
Height: ref.offsetHeight,
IsResize: showResize ? true : false
};
}
return url;
@@ -602,9 +771,6 @@ export const handleSignYourselfImageResize = (
const updateFilter = xyPostion[index].pos.filter(
(data) => data.key === key && data.Width && data.Height
);
const isMobile = window.innerWidth < 767;
const newWidth = containerWH;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (updateFilter.length > 0) {
const getXYdata = xyPostion[index].pos;
@@ -613,11 +779,9 @@ export const handleSignYourselfImageResize = (
if (url.key === key) {
return {
...url,
// Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
// Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight,
Width: ref.offsetWidth,
Height: ref.offsetHeight
// xPosition: position.xpos
Height: ref.offsetHeight,
IsResize: true
};
}
return url;
@@ -640,10 +804,9 @@ export const handleSignYourselfImageResize = (
if (url.key === key) {
return {
...url,
// Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
// Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
Width: ref.offsetWidth,
Height: ref.offsetHeight
Height: ref.offsetHeight,
IsResize: true
};
}
return url;
@@ -666,13 +829,14 @@ export const signPdfFun = async (
signerObjectId,
pdfOriginalWidth,
signerData,
containerWH,
setIsAlert,
xyPosData,
pdfBase64Url,
pageNo,
containerWH
pageNo
) => {
let signgleSign;
const isMobile = window.innerWidth < 767;
let singleSign;
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) {
@@ -715,24 +879,41 @@ export const signPdfFun = async (
return yPosition;
} else {
const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
if (pos.IsResize) {
yPosition = pos.isDrag
? y * scale - height * scale
: pos.firstYPos
? y * scale - height * scale + pos.firstYPos
: y * scale - height * scale;
return yPosition;
} else {
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
if (pos.IsResize) {
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? y - height * pos.scale
: pos.firstYPos
? y - height * pos.scale + pos.firstYPos
: y - height * pos.scale;
return yPosition;
}
} else {
yPosition = pos.isDrag
? pos.yBottom - height
@@ -743,10 +924,9 @@ export const signPdfFun = async (
}
}
};
const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale;
const imgHeight = height * scale;
const bottomY = yBottom(xyPosData);
signgleSign = {
singleSign = {
pdfFile: pdfBase64Url,
docId: documentId,
userId: signerObjectId,
@@ -754,8 +934,8 @@ export const signPdfFun = async (
Base64: base64Url,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: imgWidth,
Height: imgHeight,
Width: containerWidth(xyPosData, scale),
Height: containerHeight(xyPosData, scale),
Page: pageNo
}
};
@@ -764,7 +944,7 @@ export const signPdfFun = async (
signerData.length > 0 &&
signerData[0].pos.length > 0
) {
signgleSign = {
singleSign = {
pdfFile: base64Url,
docId: documentId,
userId: signerObjectId
@@ -772,7 +952,7 @@ export const signPdfFun = async (
}
const response = await axios
.post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, {
.post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
@@ -782,12 +962,13 @@ export const signPdfFun = async (
.then((Listdata) => {
const json = Listdata.data;
const res = json.result;
// console.log("res", res);
return res;
})
.catch((err) => {
console.log("axois err ", err);
alert("something went wrong");
setIsAlert({
isShow: true,
alertMessage: "something went wrong"
});
});
return response;