WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-11 04:07:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

handle reactour for recipients,pdf loading, resolve warnings

Browse Source
This commit is contained in:
RaktimaNXG
2023-10-30 16:31:21 +05:30
parent b8cebe5368
commit b75016aaa0
10 changed files with 1079 additions and 1019 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/ManageSign.js
+13 -12
View File
@@ -515,20 +515,20 @@ const ManageSign = () => {
border: "none", border: "none",
margin: "5px", margin: "5px",
borderBottom: borderBottom:
key == 0 && penColor == "blue" key === 0 && penColor === "blue"
? "2px solid blue" ? "2px solid blue"
: key == 1 && penColor == "red" : key === 1 && penColor === "red"
? "2px solid red" ? "2px solid red"
: key == 2 && penColor == "black" : key === 2 && penColor === "black"
? "2px solid black" ? "2px solid black"
: "2px solid white", : "2px solid white",
}} }}
onClick={() => { onClick={() => {
if (key == 0) { if (key === 0) {
setPenColor("blue"); setPenColor("blue");
} else if (key == 1) { } else if (key === 1) {
setPenColor("red"); setPenColor("red");
} else if (key == 2) { } else if (key === 2) {
setPenColor("black"); setPenColor("black");
} }
}} }}
@@ -629,24 +629,25 @@ const ManageSign = () => {
{allColor.map((data, key) => { {allColor.map((data, key) => {
return ( return (
<img <img
alt="pen"
style={{ style={{
border: "none", border: "none",
margin: "5px", margin: "5px",
borderBottom: borderBottom:
key == 0 && initialPen == "blue" key === 0 && initialPen === "blue"
? "2px solid blue" ? "2px solid blue"
: key == 1 && initialPen == "red" : key === 1 && initialPen === "red"
? "2px solid red" ? "2px solid red"
: key == 2 && initialPen == "black" : key === 2 && initialPen === "black"
? "2px solid black" ? "2px solid black"
: "2px solid white", : "2px solid white",
}} }}
onClick={() => { onClick={() => {
if (key == 0) { if (key === 0) {
setInitialPen("blue"); setInitialPen("blue");
} else if (key == 1) { } else if (key === 1) {
setInitialPen("red"); setInitialPen("red");
} else if (key == 2) { } else if (key === 2) {
setInitialPen("black"); setInitialPen("black");
} }
}} }}
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+56 -47
View File
@@ -1,6 +1,5 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { themeColor } from "../utils/ThemeColor/backColor"; import { themeColor } from "../utils/ThemeColor/backColor";
import { PDFDocument, rgb } from "pdf-lib"; import { PDFDocument, rgb } from "pdf-lib";
import "../css/signature.css"; import "../css/signature.css";
import axios from "axios"; import axios from "axios";
@@ -16,7 +15,7 @@ import {
contactBook, contactBook,
contractUsers, contractUsers,
getBase64FromIMG, getBase64FromIMG,
getBase64FromUrl, getBase64FromUrl
} from "../utils/Utils"; } from "../utils/Utils";
import Loader from "./component/loader"; import Loader from "./component/loader";
import HandleError from "./component/HandleError"; import HandleError from "./component/HandleError";
@@ -44,7 +43,7 @@ function PdfRequestFiles() {
const [handleError, setHandleError] = useState(); const [handleError, setHandleError] = useState();
const [isLoading, setIsLoading] = useState({ const [isLoading, setIsLoading] = useState({
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}); });
const [defaultSignImg, setDefaultSignImg] = useState(); const [defaultSignImg, setDefaultSignImg] = useState();
const [isDocId, setIsDocId] = useState(false); const [isDocId, setIsDocId] = useState(false);
@@ -58,7 +57,11 @@ function PdfRequestFiles() {
const [currentSigner, setCurrentSigner] = useState(false); const [currentSigner, setCurrentSigner] = useState(false);
const [isCompleted, setIsCompleted] = useState({ const [isCompleted, setIsCompleted] = useState({
isCertificate: false, isCertificate: false,
isModal: false, isModal: false
});
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
}); });
const [isSigned, setIsSigned] = useState(false); const [isSigned, setIsSigned] = useState(false);
const [isExpired, setIsExpired] = useState(false); const [isExpired, setIsExpired] = useState(false);
@@ -104,7 +107,7 @@ function PdfRequestFiles() {
setSignerObjectId(objId); setSignerObjectId(objId);
} else if (contractUsersRes === "Error: Something went wrong!") { } else if (contractUsersRes === "Error: Something went wrong!") {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -126,8 +129,8 @@ function PdfRequestFiles() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -149,13 +152,13 @@ function PdfRequestFiles() {
setIsSigned(true); setIsSigned(true);
const data = { const data = {
isCertificate: true, isCertificate: true,
isModal: true, isModal: true
}; };
setIsCompleted(data); setIsCompleted(data);
} else if (declined) { } else if (declined) {
const currentDecline = { const currentDecline = {
currnt: "another", currnt: "another",
isDeclined: true, isDeclined: true
}; };
setIsDecline(currentDecline); setIsDecline(currentDecline);
} else if (currDate > expireUpdateDate) { } else if (currDate > expireUpdateDate) {
@@ -226,7 +229,7 @@ function PdfRequestFiles() {
// alert("No data found!"); // alert("No data found!");
setNoData(true); setNoData(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
setIsUiLoading(false); setIsUiLoading(false);
@@ -235,7 +238,7 @@ function PdfRequestFiles() {
.catch((err) => { .catch((err) => {
console.log("err", err); console.log("err", err);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -251,8 +254,8 @@ function PdfRequestFiles() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -263,13 +266,13 @@ function PdfRequestFiles() {
setDefaultSignImg(res[0].ImageURL); setDefaultSignImg(res[0].ImageURL);
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
}) })
.catch((err) => { .catch((err) => {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -311,7 +314,7 @@ function PdfRequestFiles() {
); );
const pdfDoc = await PDFDocument.load(existingPdfBytes, { const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true, ignoreEncryption: true
}); });
let pdfBase64; let pdfBase64;
@@ -336,11 +339,11 @@ function PdfRequestFiles() {
y: page.getHeight() - 10, y: page.getHeight() - 10,
size: fontSize, size: fontSize,
font, font,
color: rgb(0.5, 0.5, 0.5), color: rgb(0.5, 0.5, 0.5)
}); });
} }
pdfBase64 = await pdfDoc.saveAsBase64({ pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false, useObjectStreams: false
}); });
} }
@@ -423,7 +426,7 @@ function PdfRequestFiles() {
y: page.getHeight() - 10, y: page.getHeight() - 10,
size: fontSize, size: fontSize,
font, font,
color: rgb(0.5, 0.5, 0.5), color: rgb(0.5, 0.5, 0.5)
}); });
} }
@@ -474,12 +477,12 @@ function PdfRequestFiles() {
x: imgUrlList[id].xPosition, x: imgUrlList[id].xPosition,
y: page.getHeight() - imgUrlList[id].yPosition - imgHeight, y: page.getHeight() - imgUrlList[id].yPosition - imgHeight,
width: imgWidth, width: imgWidth,
height: imgHeight, height: imgHeight
}); });
}); });
} }
const pdfBytes = await pdfDoc.saveAsBase64({ const pdfBytes = await pdfDoc.saveAsBase64({
useObjectStreams: false, useObjectStreams: false
}); });
signPdfFun(pdfBytes, documentId, pngUrl); signPdfFun(pdfBytes, documentId, pngUrl);
@@ -524,8 +527,8 @@ function PdfRequestFiles() {
Bottom: bottomY, Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150, Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height, Height: height,
Page: pageNo, Page: pageNo
}, }
}; };
} else if ( } else if (
xyPosData && xyPosData &&
@@ -534,7 +537,7 @@ function PdfRequestFiles() {
) { ) {
signgleSign = { signgleSign = {
pdfFile: base64Url, pdfFile: base64Url,
docId: documentId, docId: documentId
}; };
} }
@@ -546,8 +549,8 @@ function PdfRequestFiles() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), sessionToken: localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -569,6 +572,10 @@ function PdfRequestFiles() {
}; };
//function for get pdf page details //function for get pdf page details
const pageDetails = async (pdf) => { const pageDetails = async (pdf) => {
const load = {
status: true
};
setPdfLoadFail(load);
pdf.getPage(1).then((pdfPage) => { pdf.getPage(1).then((pdfPage) => {
const pageWidth = pdfPage.view[2]; const pageWidth = pdfPage.view[2];
@@ -666,7 +673,7 @@ function PdfRequestFiles() {
Width: newWidth, Width: newWidth,
Height: nweHeight, Height: nweHeight,
SignUrl: image.src, SignUrl: image.src,
ImageType: image.imgType, ImageType: image.imgType
}; };
} }
return url; return url;
@@ -715,7 +722,7 @@ function PdfRequestFiles() {
Width: newWidth, Width: newWidth,
Height: nweHeight, Height: nweHeight,
SignUrl: image.src, SignUrl: image.src,
ImageType: image.imgType, ImageType: image.imgType
}; };
} }
return url; return url;
@@ -801,7 +808,7 @@ function PdfRequestFiles() {
//function for set decline true on press decline button //function for set decline true on press decline button
const declineDoc = async () => { const declineDoc = async () => {
const data = { const data = {
IsDeclined: true, IsDeclined: true
}; };
setIsUiLoading(true); setIsUiLoading(true);
@@ -815,8 +822,8 @@ function PdfRequestFiles() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((result) => { .then((result) => {
@@ -824,7 +831,7 @@ function PdfRequestFiles() {
if (res) { if (res) {
const currentDecline = { const currentDecline = {
currnt: "YouDeclined", currnt: "YouDeclined",
isDeclined: true, isDeclined: true
}; };
setIsDecline(currentDecline); setIsDecline(currentDecline);
setIsUiLoading(false); setIsUiLoading(false);
@@ -859,7 +866,7 @@ function PdfRequestFiles() {
alignItems: "center", alignItems: "center",
zIndex: "20", zIndex: "20",
backgroundColor: "#e6f2f2", backgroundColor: "#e6f2f2",
opacity: 0.8, opacity: 0.8
}} }}
> >
<img <img
@@ -886,7 +893,7 @@ function PdfRequestFiles() {
<div <div
style={{ style={{
marginLeft: pdfOriginalWidth > 500 && "20px", marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px", marginRight: pdfOriginalWidth > 500 && "20px"
}} }}
> >
<Modal show={isExpired}> <Modal show={isExpired}>
@@ -927,7 +934,7 @@ function PdfRequestFiles() {
<> <>
<button <button
style={{ style={{
color: "black", color: "black"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -937,7 +944,7 @@ function PdfRequestFiles() {
</button> </button>
<button <button
style={{ style={{
background: "#de4337", background: "#de4337"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -965,7 +972,7 @@ function PdfRequestFiles() {
<Modal.Footer> <Modal.Footer>
<button <button
style={{ style={{
color: "black", color: "black"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1027,6 +1034,8 @@ function PdfRequestFiles() {
signerObjectId={signerObjectId} signerObjectId={signerObjectId}
signedSigners={signedSigners} signedSigners={signedSigners}
setCurrentSigner={setCurrentSigner} setCurrentSigner={setCurrentSigner}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
/> />
</div> </div>
<div> <div>
@@ -1035,7 +1044,7 @@ function PdfRequestFiles() {
<> <>
<div <div
style={{ style={{
background: themeColor(), background: themeColor()
// color:"white" // color:"white"
}} }}
className="signedStyle" className="signedStyle"
@@ -1051,7 +1060,7 @@ function PdfRequestFiles() {
flexDirection: "row", flexDirection: "row",
padding: "10px", padding: "10px",
background: checkSignerBackColor(obj), background: checkSignerBackColor(obj)
}} }}
key={ind} key={ind}
> >
@@ -1065,14 +1074,14 @@ function PdfRequestFiles() {
borderRadius: 30 / 2, borderRadius: 30 / 2,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginRight: "20px", marginRight: "20px"
}} }}
> >
<span <span
style={{ style={{
fontSize: "10px", fontSize: "10px",
textAlign: "center", textAlign: "center",
fontWeight: "bold", fontWeight: "bold"
}} }}
> >
{" "} {" "}
@@ -1082,7 +1091,7 @@ function PdfRequestFiles() {
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column"
}} }}
> >
<span className="userName">{obj.Name}</span> <span className="userName">{obj.Name}</span>
@@ -1103,7 +1112,7 @@ function PdfRequestFiles() {
color: "white", color: "white",
padding: "5px", padding: "5px",
fontFamily: "sans-serif", fontFamily: "sans-serif",
marginTop: signedSigners.length > 0 && "20px", marginTop: signedSigners.length > 0 && "20px"
}} }}
> >
Yet To Sign Yet To Sign
@@ -1116,7 +1125,7 @@ function PdfRequestFiles() {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
padding: "10px", padding: "10px",
background: checkSignerBackColor(obj), background: checkSignerBackColor(obj)
}} }}
key={ind} key={ind}
> >
@@ -1130,14 +1139,14 @@ function PdfRequestFiles() {
borderRadius: 30 / 2, borderRadius: 30 / 2,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginRight: "20px", marginRight: "20px"
}} }}
> >
<span <span
style={{ style={{
fontSize: "8px", fontSize: "8px",
textAlign: "center", textAlign: "center",
fontWeight: "bold", fontWeight: "bold"
}} }}
> >
{" "} {" "}
@@ -1147,7 +1156,7 @@ function PdfRequestFiles() {
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column"
}} }}
> >
<span className="userName">{obj.Name}</span> <span className="userName">{obj.Name}</span>
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+74 -61
View File
@@ -1,5 +1,4 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { PDFDocument, rgb } from "pdf-lib"; import { PDFDocument, rgb } from "pdf-lib";
import "../css/./signature.css"; import "../css/./signature.css";
import sign from "../assests/sign3.png"; import sign from "../assests/sign3.png";
@@ -58,7 +57,7 @@ function SignYourSelf() {
const [documentStatus, setDocumentStatus] = useState({ isCompleted: false }); const [documentStatus, setDocumentStatus] = useState({ isCompleted: false });
const [isLoading, setIsLoading] = useState({ const [isLoading, setIsLoading] = useState({
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}); });
const [handleError, setHandleError] = useState(); const [handleError, setHandleError] = useState();
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@@ -70,7 +69,11 @@ function SignYourSelf() {
const [noData, setNoData] = useState(false); const [noData, setNoData] = useState(false);
const [contractName, setContractName] = useState(""); const [contractName, setContractName] = useState("");
const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({ const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
status: false
});
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false, status: false,
type: "load"
}); });
const nodeRef = useRef(null); const nodeRef = useRef(null);
@@ -78,8 +81,8 @@ function SignYourSelf() {
accept: "BOX", accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor), drop: (item, monitor) => addPositionOfSignature(item, monitor),
collect: (monitor) => ({ collect: (monitor) => ({
isOver: !!monitor.isOver(), isOver: !!monitor.isOver()
}), })
}); });
const pdfRef = useRef(); const pdfRef = useRef();
@@ -90,11 +93,11 @@ function SignYourSelf() {
item: { item: {
type: "BOX", type: "BOX",
id: 1, id: 1,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragSign: !!monitor.isDragging(), isDragSign: !!monitor.isDragging()
}), })
}); });
const [{ isDragStamp }, dragStamp] = useDrag({ const [{ isDragStamp }, dragStamp] = useDrag({
@@ -103,11 +106,11 @@ function SignYourSelf() {
item: { item: {
type: "BOX", type: "BOX",
id: 2, id: 2,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragStamp: !!monitor.isDragging(), isDragStamp: !!monitor.isDragging()
}), })
}); });
const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
type: "BOX", type: "BOX",
@@ -115,11 +118,11 @@ function SignYourSelf() {
item: { item: {
type: "BOX", type: "BOX",
id: 3, id: 3,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragSignatureSS: !!monitor.isDragging(), isDragSignatureSS: !!monitor.isDragging()
}), })
}); });
const [{ isDragStampSS }, dragStampSS] = useDrag({ const [{ isDragStampSS }, dragStampSS] = useDrag({
@@ -128,11 +131,11 @@ function SignYourSelf() {
item: { item: {
type: "BOX", type: "BOX",
id: 4, id: 4,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragStampSS: !!monitor.isDragging(), isDragStampSS: !!monitor.isDragging()
}), })
}); });
const index = xyPostion.findIndex((object) => { const index = xyPostion.findIndex((object) => {
@@ -181,8 +184,8 @@ function SignYourSelf() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -194,13 +197,13 @@ function SignYourSelf() {
const isCompleted = res[0].IsCompleted && res[0].IsCompleted; const isCompleted = res[0].IsCompleted && res[0].IsCompleted;
if (isCompleted) { if (isCompleted) {
const docStatus = { const docStatus = {
isCompleted: isCompleted, isCompleted: isCompleted
}; };
setDocumentStatus(docStatus); setDocumentStatus(docStatus);
const alreadySign = { const alreadySign = {
status: true, status: true,
mssg: "You have successfully signed the document!", mssg: "You have successfully signed the document!"
}; };
setShowAlreadySignDoc(alreadySign); setShowAlreadySignDoc(alreadySign);
setPdfUrl(res[0].SignedUrl); setPdfUrl(res[0].SignedUrl);
@@ -209,14 +212,14 @@ function SignYourSelf() {
setNoData(true); setNoData(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
}) })
.catch((err) => { .catch((err) => {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -232,8 +235,8 @@ function SignYourSelf() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -246,14 +249,18 @@ function SignYourSelf() {
}) })
.catch((err) => { .catch((err) => {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
}); });
const contractUsersRes = await contractUsers(jsonSender.objectId); const contractUsersRes = await contractUsers(jsonSender.objectId);
if (contractUsersRes && contractUsersRes[0]) { if (
contractUsersRes !== "Error: Something went wrong!" &&
contractUsersRes &&
contractUsersRes[0]
) {
setContractName("_Users"); setContractName("_Users");
setSignerUserId(contractUsersRes[0].objectId); setSignerUserId(contractUsersRes[0].objectId);
const tourstatuss = const tourstatuss =
@@ -269,12 +276,12 @@ function SignYourSelf() {
} }
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} else if (contractUsersRes === "Error: Something went wrong!") { } else if (contractUsersRes === "Error: Something went wrong!") {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -299,7 +306,7 @@ function SignYourSelf() {
} }
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -366,7 +373,7 @@ function SignYourSelf() {
key: key, key: key,
isStamp: monitor, isStamp: monitor,
yBottom: window.innerHeight / 2 - 60, yBottom: window.innerHeight / 2 - 60
}; };
dropData.push(dropObj); dropData.push(dropObj);
@@ -395,7 +402,7 @@ function SignYourSelf() {
isStamp: isDragStamp || isDragStampSS ? true : false, isStamp: isDragStamp || isDragStampSS ? true : false,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom, yBottom: ybottom
}; };
dropData.push(dropObj); dropData.push(dropObj);
@@ -416,7 +423,7 @@ function SignYourSelf() {
const newSignPos = updateData.concat(dropData); const newSignPos = updateData.concat(dropData);
let xyPos = { let xyPos = {
pageNumber: pageNumber, pageNumber: pageNumber,
pos: newSignPos, pos: newSignPos
}; };
xyPostion.splice(index, 1, xyPos); xyPostion.splice(index, 1, xyPos);
setIsSignPad(true); setIsSignPad(true);
@@ -425,7 +432,7 @@ function SignYourSelf() {
} else { } else {
const xyPos = { const xyPos = {
pageNumber: pageNumber, pageNumber: pageNumber,
pos: dropData, pos: dropData
}; };
setXyPostion((prev) => [...prev, xyPos]); setXyPostion((prev) => [...prev, xyPos]);
setIsSignPad(true); setIsSignPad(true);
@@ -456,7 +463,7 @@ function SignYourSelf() {
}, 3000); }, 3000);
const loadObj = { const loadObj = {
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
const url = pdfDetails[0] && pdfDetails[0].URL; const url = pdfDetails[0] && pdfDetails[0].URL;
@@ -467,7 +474,7 @@ function SignYourSelf() {
// Load a PDFDocument from the existing PDF bytes // Load a PDFDocument from the existing PDF bytes
const pdfDoc = await PDFDocument.load(existingPdfBytes, { const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true, ignoreEncryption: true
}); });
const pngUrl = xyPostion; const pngUrl = xyPostion;
//checking if signature is only one then send image url in jpeg formate to server //checking if signature is only one then send image url in jpeg formate to server
@@ -488,11 +495,11 @@ function SignYourSelf() {
y: page.getHeight() - 10, y: page.getHeight() - 10,
size: fontSize, size: fontSize,
font, font,
color: rgb(0.5, 0.5, 0.5), color: rgb(0.5, 0.5, 0.5)
}); });
} }
const pdfBase64 = await pdfDoc.saveAsBase64({ const pdfBase64 = await pdfDoc.saveAsBase64({
useObjectStreams: false, useObjectStreams: false
}); });
for (let i = 0; i < xyPostion.length; i++) { for (let i = 0; i < xyPostion.length; i++) {
const imgUrlList = xyPostion[i].pos; const imgUrlList = xyPostion[i].pos;
@@ -568,7 +575,7 @@ function SignYourSelf() {
y: page.getHeight() - 10, y: page.getHeight() - 10,
size: fontSize, size: fontSize,
font, font,
color: rgb(0.5, 0.5, 0.5), color: rgb(0.5, 0.5, 0.5)
}); });
} }
for (let i = 0; i < pngUrl.length; i++) { for (let i = 0; i < pngUrl.length; i++) {
@@ -621,7 +628,7 @@ function SignYourSelf() {
y: y:
page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight, page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
width: imgWidth, width: imgWidth,
height: imgHeight, height: imgHeight
}); });
}); });
} }
@@ -668,13 +675,13 @@ function SignYourSelf() {
Bottom: bottomY, Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150, Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height, Height: height,
Page: pageNo, Page: pageNo
}, }
}; };
} else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
singleSign = { singleSign = {
pdfFile: base64Url, pdfFile: base64Url,
docId: documentId, docId: documentId
}; };
} }
// console.log("data",singleSign) // console.log("data",singleSign)
@@ -683,9 +690,9 @@ function SignYourSelf() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), sessionToken: localStorage.getItem("accesstoken")
// sessiontoken, // sessiontoken,
}, }
}) })
.then((Listdata) => { .then((Listdata) => {
const json = Listdata.data; const json = Listdata.data;
@@ -693,12 +700,12 @@ function SignYourSelf() {
setPdfUrl(json.result.data); setPdfUrl(json.result.data);
if (json.result.data) { if (json.result.data) {
const docStatus = { const docStatus = {
isCompleted: true, isCompleted: true
}; };
setDocumentStatus(docStatus); setDocumentStatus(docStatus);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -741,7 +748,7 @@ function SignYourSelf() {
xPosition: dragElement.x, xPosition: dragElement.x,
yPosition: dragElement.y, yPosition: dragElement.y,
isDrag: true, isDrag: true,
yBottom: ybottom, yBottom: ybottom
}; };
} }
return url; return url;
@@ -764,6 +771,10 @@ function SignYourSelf() {
//function for get pdf page details //function for get pdf page details
const pageDetails = async (pdf) => { const pageDetails = async (pdf) => {
const load = {
status: true
};
setPdfLoadFail(load);
pdf.getPage(1).then((pdfPage) => { pdf.getPage(1).then((pdfPage) => {
const pageWidth = pdfPage.view[2]; const pageWidth = pdfPage.view[2];
@@ -848,7 +859,7 @@ function SignYourSelf() {
const xyPosition = { const xyPosition = {
xPos: mouseX, xPos: mouseX,
yPos: mouseY, yPos: mouseY
}; };
setXYSignature(xyPosition); setXYSignature(xyPosition);
@@ -877,7 +888,7 @@ function SignYourSelf() {
...url, ...url,
Width: ref.offsetWidth, Width: ref.offsetWidth,
Height: ref.offsetHeight, Height: ref.offsetHeight,
xPosition: position.x, xPosition: position.x
}; };
} }
return url; return url;
@@ -901,7 +912,7 @@ function SignYourSelf() {
return { return {
...url, ...url,
Width: ref.offsetWidth, Width: ref.offsetWidth,
Height: ref.offsetHeight, Height: ref.offsetHeight
}; };
} }
return url; return url;
@@ -975,7 +986,7 @@ function SignYourSelf() {
const newXypos = { const newXypos = {
pageNumber: getPageNo, pageNumber: getPageNo,
pos: addSign, pos: addSign
}; };
xyDefaultPos.push(newXypos); xyDefaultPos.push(newXypos);
} }
@@ -989,14 +1000,14 @@ function SignYourSelf() {
selector: '[data-tut="reactourFirst"]', selector: '[data-tut="reactourFirst"]',
content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`, content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, },
{ {
selector: '[data-tut="reactourSecond"]', selector: '[data-tut="reactourSecond"]',
content: `Drag and drop anywhere in this area. You can resize and move it later.`, content: `Drag and drop anywhere in this area. You can resize and move it later.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, }
]; ];
//function for update TourStatus //function for update TourStatus
@@ -1023,14 +1034,14 @@ function SignYourSelf() {
"_appName" "_appName"
)}${contractName}/${signerUserId}`, )}${contractName}/${signerUserId}`,
{ {
TourStatus: updatedTourStatus, TourStatus: updatedTourStatus
}, },
{ {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), sessionToken: localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -1054,7 +1065,7 @@ function SignYourSelf() {
) : ( ) : (
<div className="signatureContainer"> <div className="signatureContainer">
{/* this component used for UI interaction and show their functionality */} {/* this component used for UI interaction and show their functionality */}
{!checkTourStatus && ( {pdfLoadFail && !checkTourStatus && (
<Tour <Tour
onRequestClose={closeTour} onRequestClose={closeTour}
steps={tourConfig} steps={tourConfig}
@@ -1079,7 +1090,7 @@ function SignYourSelf() {
<div <div
style={{ style={{
marginLeft: pdfOriginalWidth > 500 && "20px", marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px", marginRight: pdfOriginalWidth > 500 && "20px"
}} }}
> >
{/* this modal is used show this document is already sign */} {/* this modal is used show this document is already sign */}
@@ -1099,7 +1110,7 @@ function SignYourSelf() {
borderRadius: "0px", borderRadius: "0px",
border: "1.5px solid #e3e2e1", border: "1.5px solid #e3e2e1",
fontWeight: "600", fontWeight: "600",
color: "black", color: "black"
}} }}
className="btn" className="btn"
onClick={() => setShowAlreadySignDoc({ status: false })} onClick={() => setShowAlreadySignDoc({ status: false })}
@@ -1110,7 +1121,7 @@ function SignYourSelf() {
<button <button
onClick={() => addDefaultSignature()} onClick={() => addDefaultSignature()}
style={{ style={{
background: themeColor(), background: themeColor()
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1184,6 +1195,8 @@ function SignYourSelf() {
pdfUrl={pdfUrl} pdfUrl={pdfUrl}
numPages={numPages} numPages={numPages}
pageDetails={pageDetails} pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
/> />
</div> </div>
</div> </div>
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useState } from "react"; import React from "react";
import * as Select from "@radix-ui/react-select"; import * as Select from "@radix-ui/react-select";
import classnames from "classnames"; import classnames from "classnames";
microfrontends/SignDocuments/src/Component/component/header.js
+3
View File
@@ -224,11 +224,13 @@ function Header({
)} )}
{isPlaceholder ? ( {isPlaceholder ? (
<div <div
onClick={() => { onClick={() => {
if (!isMailSend) { if (!isMailSend) {
alertSendEmail(); alertSendEmail();
} }
}} }}
style={{ style={{
color: isMailSend ? "gray" : themeColor(), color: isMailSend ? "gray" : themeColor(),
border: "none", border: "none",
@@ -241,6 +243,7 @@ function Header({
</div> </div>
) : ( ) : (
<div <div
data-tut="reactourThird"
onClick={() => { onClick={() => {
if (!pdfUrl) { if (!pdfUrl) {
embedImages(); embedImages();
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+729 -712
View File
File diff suppressed because it is too large Load Diff
microfrontends/SignDocuments/src/Component/login.js
+1 -2
View File
@@ -1,5 +1,4 @@
import React, { useState } from "react"; import React, { useState } from "react";
import signLogo from "../assests/mailLogo.png";
import "../css/LoginPage.css"; import "../css/LoginPage.css";
import loader from "../assests/loader2.gif"; import loader from "../assests/loader2.gif";
import axios from "axios"; import axios from "axios";
@@ -9,7 +8,7 @@ import { useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
// import { useHistory } from "react-router-dom/cjs/react-router-dom.min"; // import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
function Login() { function Login() {
const { id, userMail, serverUrl,serverId } = useParams(); const { id, userMail, serverUrl } = useParams();
let navigate = useNavigate(); let navigate = useNavigate();
// const history = useHistory(); // const history = useHistory();
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+74 -73
View File
@@ -1,5 +1,4 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { Document, Page, pdfjs } from "react-pdf";
import axios from "axios"; import axios from "axios";
import "../css/./signature.css"; import "../css/./signature.css";
import Modal from "react-bootstrap/Modal"; import Modal from "react-bootstrap/Modal";
@@ -9,10 +8,8 @@ import { themeColor } from "../utils/ThemeColor/backColor";
import { DndProvider } from "react-dnd"; import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend"; import { HTML5Backend } from "react-dnd-html5-backend";
import { useDrag, useDrop } from "react-dnd"; import { useDrag, useDrop } from "react-dnd";
import { Rnd } from "react-rnd";
import RenderAllPdfPage from "./component/renderAllPdfPage"; import RenderAllPdfPage from "./component/renderAllPdfPage";
import FieldsComponent from "./component/fieldsComponent"; import FieldsComponent from "./component/fieldsComponent";
import RSC from "react-scrollbars-custom";
import Tour from "reactour"; import Tour from "reactour";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Loader from "./component/loader"; import Loader from "./component/loader";
@@ -25,8 +22,6 @@ import RenderPdf from "./component/renderPdf";
import ModalComponent from "./component/modalComponent"; import ModalComponent from "./component/modalComponent";
function PlaceHolderSign() { function PlaceHolderSign() {
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const [pdfDetails, setPdfDetails] = useState([]); const [pdfDetails, setPdfDetails] = useState([]);
const [isMailSend, setIsMailSend] = useState(false); const [isMailSend, setIsMailSend] = useState(false);
const [allPages, setAllPages] = useState(null); const [allPages, setAllPages] = useState(null);
@@ -46,7 +41,7 @@ function PlaceHolderSign() {
const [isSend, setIsSend] = useState(false); const [isSend, setIsSend] = useState(false);
const [isLoading, setIsLoading] = useState({ const [isLoading, setIsLoading] = useState({
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}); });
const [handleError, setHandleError] = useState(); const [handleError, setHandleError] = useState();
const [currentEmail, setCurrentEmail] = useState(); const [currentEmail, setCurrentEmail] = useState();
@@ -61,7 +56,10 @@ function PlaceHolderSign() {
const { docId } = useParams(); const { docId } = useParams();
const [isShowEmail, setIsShowEmail] = useState(false); const [isShowEmail, setIsShowEmail] = useState(false);
const [selectedEmail, setSelectedEmail] = useState(false); const [selectedEmail, setSelectedEmail] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const color = [ const color = [
"#93a3db", "#93a3db",
"#e6c3db", "#e6c3db",
@@ -74,15 +72,15 @@ function PlaceHolderSign() {
"#cc99ff", "#cc99ff",
"#ffcc99", "#ffcc99",
"#66ccff", "#66ccff",
"#ffffcc", "#ffffcc"
]; ];
const [{ isOver }, drop] = useDrop({ const [{ isOver }, drop] = useDrop({
accept: "BOX", accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor), drop: (item, monitor) => addPositionOfSignature(item, monitor),
collect: (monitor) => ({ collect: (monitor) => ({
isOver: !!monitor.isOver(), isOver: !!monitor.isOver()
}), })
}); });
const [{ isDragSign }, dragSignature] = useDrag({ const [{ isDragSign }, dragSignature] = useDrag({
type: "BOX", type: "BOX",
@@ -90,11 +88,11 @@ function PlaceHolderSign() {
item: { item: {
type: "BOX", type: "BOX",
id: 1, id: 1,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragSign: !!monitor.isDragging(), isDragSign: !!monitor.isDragging()
}), })
}); });
const [{ isDragStamp }, dragStamp] = useDrag({ const [{ isDragStamp }, dragStamp] = useDrag({
type: "BOX", type: "BOX",
@@ -102,11 +100,11 @@ function PlaceHolderSign() {
item: { item: {
type: "BOX", type: "BOX",
id: 2, id: 2,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragStamp: !!monitor.isDragging(), isDragStamp: !!monitor.isDragging()
}), })
}); });
const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
@@ -115,11 +113,11 @@ function PlaceHolderSign() {
item: { item: {
type: "BOX", type: "BOX",
id: 3, id: 3,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragSignatureSS: !!monitor.isDragging(), isDragSignatureSS: !!monitor.isDragging()
}), })
}); });
const isMobile = window.innerWidth < 712; const isMobile = window.innerWidth < 712;
const [{ isDragStampSS }, dragStampSS] = useDrag({ const [{ isDragStampSS }, dragStampSS] = useDrag({
@@ -128,11 +126,11 @@ function PlaceHolderSign() {
item: { item: {
type: "BOX", type: "BOX",
id: 4, id: 4,
text: "drag me", text: "drag me"
}, },
collect: (monitor) => ({ collect: (monitor) => ({
isDragStampSS: !!monitor.isDragging(), isDragStampSS: !!monitor.isDragging()
}), })
}); });
const rowLevel = const rowLevel =
@@ -176,8 +174,8 @@ function PlaceHolderSign() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -201,7 +199,7 @@ function PlaceHolderSign() {
} else { } else {
setNoData(true); setNoData(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -209,7 +207,7 @@ function PlaceHolderSign() {
.catch((err) => { .catch((err) => {
console.log("axois err ", err); console.log("axois err ", err);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -230,12 +228,12 @@ function PlaceHolderSign() {
} }
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} else if (res === "Error: Something went wrong!") { } else if (res === "Error: Something went wrong!") {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -254,7 +252,7 @@ function PlaceHolderSign() {
} }
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -304,7 +302,7 @@ function PlaceHolderSign() {
// setIsLoading(loadObj); // setIsLoading(loadObj);
// }); // });
}; };
console.log("signerpos", signerPos, isDragStampSS, isDragSignatureSS);
//function for setting position after drop signature button over pdf //function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => { const addPositionOfSignature = (item, monitor) => {
const isMobile = window.innerWidth < 712; const isMobile = window.innerWidth < 712;
@@ -339,12 +337,12 @@ function PlaceHolderSign() {
key: key, key: key,
isDrag: false, isDrag: false,
scale: isMobile && scale, scale: isMobile && scale,
yBottom: window.innerHeight / 2 - 60, yBottom: window.innerHeight / 2 - 60
}; };
dropData.push(dropObj); dropData.push(dropObj);
xyPos = { xyPos = {
pageNumber: pageNumber, pageNumber: pageNumber,
pos: dropData, pos: dropData
}; };
xyPosArr.push(xyPos); xyPosArr.push(xyPos);
@@ -367,13 +365,13 @@ function PlaceHolderSign() {
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom, yBottom: ybottom,
scale: isMobile && scale, scale: isMobile && scale
}; };
dropData.push(dropObj); dropData.push(dropObj);
xyPos = { xyPos = {
pageNumber: pageNumber, pageNumber: pageNumber,
pos: dropData, pos: dropData
}; };
xyPosArr.push(xyPos); xyPosArr.push(xyPos);
@@ -402,7 +400,7 @@ function PlaceHolderSign() {
let xyPos = { let xyPos = {
pageNumber: pageNumber, pageNumber: pageNumber,
pos: newSignPos, pos: newSignPos
}; };
updatePlace.push(xyPos); updatePlace.push(xyPos);
@@ -413,8 +411,8 @@ function PlaceHolderSign() {
signerPtr: { signerPtr: {
__type: "Pointer", __type: "Pointer",
className: `${contractName}`, className: `${contractName}`,
objectId: signerObjId, objectId: signerObjId
}, }
}; };
signerPos.splice(colorIndex, 1, placeHolderPos); signerPos.splice(colorIndex, 1, placeHolderPos);
@@ -429,8 +427,8 @@ function PlaceHolderSign() {
signerPtr: { signerPtr: {
__type: "Pointer", __type: "Pointer",
className: `${contractName}`, className: `${contractName}`,
objectId: signerObjId, objectId: signerObjId
}, }
}; };
signerPos.splice(colorIndex, 1, placeHolderPos); signerPos.splice(colorIndex, 1, placeHolderPos);
@@ -440,11 +438,11 @@ function PlaceHolderSign() {
signerPtr: { signerPtr: {
__type: "Pointer", __type: "Pointer",
className: `${contractName}`, className: `${contractName}`,
objectId: signerObjId, objectId: signerObjId
}, },
signerObjId: signerObjId, signerObjId: signerObjId,
blockColor: color[isSelectListId], blockColor: color[isSelectListId],
placeHolder: xyPosArr, placeHolder: xyPosArr
}; };
setSignerPos((prev) => [...prev, placeHolderPos]); setSignerPos((prev) => [...prev, placeHolderPos]);
@@ -452,6 +450,10 @@ function PlaceHolderSign() {
}; };
//function for get pdf page details //function for get pdf page details
const pageDetails = async (pdf) => { const pageDetails = async (pdf) => {
const load = {
status: true
};
setPdfLoadFail(load);
pdf.getPage(1).then((pdfPage) => { pdf.getPage(1).then((pdfPage) => {
const pageWidth = pdfPage.view[2]; const pageWidth = pdfPage.view[2];
@@ -494,7 +496,7 @@ function PlaceHolderSign() {
xPosition: dragElement.x, xPosition: dragElement.x,
yPosition: dragElement.y, yPosition: dragElement.y,
isDrag: true, isDrag: true,
yBottom: ybottom, yBottom: ybottom
}; };
} }
return url; return url;
@@ -607,7 +609,7 @@ function PlaceHolderSign() {
...url, ...url,
Width: ref.offsetWidth, Width: ref.offsetWidth,
Height: ref.offsetHeight, Height: ref.offsetHeight,
xPosition: position.x, xPosition: position.x
}; };
} }
return url; return url;
@@ -636,7 +638,7 @@ function PlaceHolderSign() {
return { return {
...url, ...url,
Width: ref.offsetWidth, Width: ref.offsetWidth,
Height: ref.offsetHeight, Height: ref.offsetHeight
}; };
} }
return url; return url;
@@ -676,7 +678,7 @@ function PlaceHolderSign() {
const xyPosition = { const xyPosition = {
xPos: mouseX, xPos: mouseX,
yPos: mouseY, yPos: mouseY
}; };
setXYSignature(xyPosition); setXYSignature(xyPosition);
@@ -691,13 +693,13 @@ function PlaceHolderSign() {
if (signerPos.length === signersdata.Signers.length) { if (signerPos.length === signersdata.Signers.length) {
const alert = { const alert = {
mssg: "confirm", mssg: "confirm",
alert: true, alert: true
}; };
setIsSendAlert(alert); setIsSendAlert(alert);
} else { } else {
const alert = { const alert = {
mssg: "sure", mssg: "sure",
alert: true, alert: true
}; };
setIsSendAlert(alert); setIsSendAlert(alert);
@@ -706,7 +708,7 @@ function PlaceHolderSign() {
const sendEmailToSigners = async () => { const sendEmailToSigners = async () => {
const loadObj = { const loadObj = {
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
setIsSendAlert({}); setIsSendAlert({});
@@ -717,7 +719,7 @@ function PlaceHolderSign() {
const localExpireDate = newDate.toLocaleDateString("en-US", { const localExpireDate = newDate.toLocaleDateString("en-US", {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric"
}); });
let sender = signersdata.ExtUserPtr.Email; let sender = signersdata.ExtUserPtr.Email;
@@ -734,7 +736,7 @@ function PlaceHolderSign() {
const headers = { const headers = {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), sessionToken: localStorage.getItem("accesstoken")
}; };
const serverUrl = localStorage.getItem("baseUrl"); const serverUrl = localStorage.getItem("baseUrl");
const newServer = serverUrl.replaceAll("/", "%2F"); const newServer = serverUrl.replaceAll("/", "%2F");
@@ -768,7 +770,7 @@ function PlaceHolderSign() {
signPdf + 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 Open Sign. For any queries regarding this email, please contact the sender " + "> <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 Open Sign. For any queries regarding this email, please contact the sender " +
sender + sender +
" directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p> </div></div></body> </html>", " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p> </div></div></body> </html>"
}; };
sendMail = await axios.post(url, params, { headers: headers }); sendMail = await axios.post(url, params, { headers: headers });
} catch (error) { } catch (error) {
@@ -780,11 +782,8 @@ function PlaceHolderSign() {
try { try {
const data = { const data = {
Placeholders: signerPos, Placeholders: signerPos,
SignedUrl: pdfDetails[0].URL, SignedUrl: pdfDetails[0].URL
}; };
const isMobile = window.innerWidth < 712;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
await axios await axios
.put( .put(
@@ -796,8 +795,8 @@ function PlaceHolderSign() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((result) => { .then((result) => {
@@ -805,7 +804,7 @@ function PlaceHolderSign() {
setIsSend(true); setIsSend(true);
setIsMailSend(true); setIsMailSend(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
// console.log("save res", res); // console.log("save res", res);
@@ -826,26 +825,26 @@ function PlaceHolderSign() {
content: `Select a recipient from this list to add a place-holder where he is supposed to sign.The placeholder will appear in the same colour as the recipient name once you drop it on the document.`, content: `Select a recipient from this list to add a place-holder where he is supposed to sign.The placeholder will appear in the same colour as the recipient name once you drop it on the document.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, },
{ {
selector: '[data-tut="reactourSecond"]', selector: '[data-tut="reactourSecond"]',
content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`, content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, },
{ {
selector: '[data-tut="reactourThird"]', selector: '[data-tut="reactourThird"]',
content: `Drag the placeholder for a recipient anywhere on the document.Remember, it will appear in the same colour as the name of the recipient for easy reference.`, content: `Drag the placeholder for a recipient anywhere on the document.Remember, it will appear in the same colour as the name of the recipient for easy reference.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, },
{ {
selector: '[data-tut="reactourFour"]', selector: '[data-tut="reactourFour"]',
content: `Clicking "Send" button will share the document with all the recipients.It will also send out emails to everyone on the recipients list.`, content: `Clicking "Send" button will share the document with all the recipients.It will also send out emails to everyone on the recipients list.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, }
]; ];
//function for update TourStatus //function for update TourStatus
@@ -872,14 +871,14 @@ function PlaceHolderSign() {
"baseUrl" "baseUrl"
)}classes/${extUserClass}/${signerUserId}`, )}classes/${extUserClass}/${signerUserId}`,
{ {
TourStatus: updatedTourStatus, TourStatus: updatedTourStatus
}, },
{ {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), sessionToken: localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -927,7 +926,7 @@ function PlaceHolderSign() {
<div <div
style={{ style={{
marginLeft: pdfOriginalWidth > 500 && "20px", marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px", marginRight: pdfOriginalWidth > 500 && "20px"
}} }}
> >
{/* this modal is used show alert set placeholder for all signers before send mail */} {/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -967,7 +966,7 @@ function PlaceHolderSign() {
<button <button
onClick={() => setIsSendAlert({})} onClick={() => setIsSendAlert({})}
style={{ style={{
color: "black", color: "black"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -978,7 +977,7 @@ function PlaceHolderSign() {
<button <button
onClick={() => sendEmailToSigners()} onClick={() => sendEmailToSigners()}
style={{ style={{
background: "#24b53a", background: "#24b53a"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -992,7 +991,7 @@ function PlaceHolderSign() {
<Modal show={isSend}> <Modal show={isSend}>
<Modal.Header <Modal.Header
style={{ style={{
background: themeColor(), background: themeColor()
}} }}
// className="bg-danger" // className="bg-danger"
> >
@@ -1016,7 +1015,7 @@ function PlaceHolderSign() {
setSignerPos([]); setSignerPos([]);
}} }}
style={{ style={{
color: "black", color: "black"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1031,7 +1030,7 @@ function PlaceHolderSign() {
<button <button
style={{ style={{
background: themeColor(), background: themeColor(),
color: "white", color: "white"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1047,7 +1046,7 @@ function PlaceHolderSign() {
setSignerPos([]); setSignerPos([]);
}} }}
style={{ style={{
color: "black", color: "black"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1093,6 +1092,8 @@ function PlaceHolderSign() {
handleTabDrag={handleTabDrag} handleTabDrag={handleTabDrag}
handleStop={handleStop} handleStop={handleStop}
handleImageResize={handleImageResize} handleImageResize={handleImageResize}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
/> />
</div> </div>
</div> </div>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+73 -58
View File
@@ -14,7 +14,7 @@ import DefaultSignature from "./component/defaultSignature";
import { import {
getBase64FromUrl, getBase64FromUrl,
getBase64FromIMG, getBase64FromIMG,
contactBookName, contactBookName
} from "../utils/Utils"; } from "../utils/Utils";
import Tour from "reactour"; import Tour from "reactour";
import Signedby from "./component/signedby"; import Signedby from "./component/signedby";
@@ -46,7 +46,7 @@ function EmbedPdfImage() {
const [handleError, setHandleError] = useState(); const [handleError, setHandleError] = useState();
const [isLoading, setIsLoading] = useState({ const [isLoading, setIsLoading] = useState({
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}); });
const [defaultSignImg, setDefaultSignImg] = useState(); const [defaultSignImg, setDefaultSignImg] = useState();
const [userObjectID, setUserObjectID] = useState(); const [userObjectID, setUserObjectID] = useState();
@@ -62,9 +62,12 @@ function EmbedPdfImage() {
const [noData, setNoData] = useState(false); const [noData, setNoData] = useState(false);
const [contractName, setContractName] = useState(""); const [contractName, setContractName] = useState("");
const [isDecline, setIsDecline] = useState({ const [isDecline, setIsDecline] = useState({
isDeclined: false, isDeclined: false
});
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
}); });
const [pdfLoadFail, setPdfLoadFail] = useState(false);
const docId = id && id; const docId = id && id;
//"F0hg0twSJH"; //"F0hg0twSJH";
@@ -86,7 +89,8 @@ function EmbedPdfImage() {
//aspfUo7wRl //aspfUo7wRl
let currUserId, userObjectId; let currUserId, userObjectId;
const json = await contactBookName(userPhone, "_Users"); const json = await contactBookName(userPhone, "_Users");
if (json && json.results[0]) {
if (json !== "Error: Something went wrong!" && json && json.results[0]) {
setContractName("_Users"); setContractName("_Users");
if (json.results[0]) { if (json.results[0]) {
userObjectId = json.results[0].UserId.objectId; userObjectId = json.results[0].UserId.objectId;
@@ -109,13 +113,13 @@ function EmbedPdfImage() {
} else { } else {
setNoData(true); setNoData(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
} else if (json === "Error: Something went wrong!") { } else if (json === "Error: Something went wrong!") {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -144,7 +148,7 @@ function EmbedPdfImage() {
} else { } else {
setNoData(true); setNoData(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -210,8 +214,8 @@ function EmbedPdfImage() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -230,27 +234,27 @@ function EmbedPdfImage() {
//then show alert with completed message //then show alert with completed message
const alreadySign = { const alreadySign = {
status: true, status: true,
mssg: "This document has already been signed!", mssg: "This document has already been signed!"
}; };
setIsAlreadySign(alreadySign); setIsAlreadySign(alreadySign);
setPdfUrl(res[0].SignedUrl); setPdfUrl(res[0].SignedUrl);
setSignedPdfData(json.results); setSignedPdfData(json.results);
setCompletePdfData(res); setCompletePdfData(res);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} else if (declined) { } else if (declined) {
const currentDecline = { const currentDecline = {
currnt: "another", currnt: "another",
isDeclined: true, isDeclined: true
}; };
setIsDecline(currentDecline); setIsDecline(currentDecline);
setSignedPdfData(json.results); setSignedPdfData(json.results);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} else if (currDate > expireUpdateDate) { } else if (currDate > expireUpdateDate) {
@@ -281,7 +285,7 @@ function EmbedPdfImage() {
setSignKey(key); setSignKey(key);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -301,13 +305,13 @@ function EmbedPdfImage() {
setSignKey(key); setSignKey(key);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} else { } else {
@@ -338,12 +342,12 @@ function EmbedPdfImage() {
if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) { if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) {
const alreadySign = { const alreadySign = {
status: true, status: true,
mssg: "You have successfully signed the document!", mssg: "You have successfully signed the document!"
}; };
setIsAlreadySign(alreadySign); setIsAlreadySign(alreadySign);
setPdfUrl(res[0].SignedUrl); setPdfUrl(res[0].SignedUrl);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -363,7 +367,7 @@ function EmbedPdfImage() {
setSignKey(key); setSignKey(key);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -384,7 +388,7 @@ function EmbedPdfImage() {
setSignKey(key); setSignKey(key);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
@@ -392,14 +396,14 @@ function EmbedPdfImage() {
} else { } else {
setNoData(true); setNoData(true);
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
} }
}) })
.catch((err) => { .catch((err) => {
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setHandleError("Error: Something went wrong!"); setHandleError("Error: Something went wrong!");
setIsLoading(loadObj); setIsLoading(loadObj);
@@ -414,8 +418,8 @@ function EmbedPdfImage() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -426,7 +430,7 @@ function EmbedPdfImage() {
setDefaultSignImg(res[0].ImageURL); setDefaultSignImg(res[0].ImageURL);
} }
const loadObj = { const loadObj = {
isLoad: false, isLoad: false
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
}) })
@@ -438,6 +442,10 @@ function EmbedPdfImage() {
//function for get pdf page details //function for get pdf page details
const pageDetails = async (pdf) => { const pageDetails = async (pdf) => {
const load = {
status: true
};
setPdfLoadFail(load);
pdf.getPage(1).then((pdfPage) => { pdf.getPage(1).then((pdfPage) => {
const pageWidth = pdfPage.view[2]; const pageWidth = pdfPage.view[2];
@@ -462,7 +470,7 @@ function EmbedPdfImage() {
} else { } else {
const loadObj = { const loadObj = {
isLoad: true, isLoad: true,
message: "This might take some time", message: "This might take some time"
}; };
setIsLoading(loadObj); setIsLoading(loadObj);
const url = pdfUrl const url = pdfUrl
@@ -474,7 +482,7 @@ function EmbedPdfImage() {
// Load a PDFDocument from the existing PDF bytes // Load a PDFDocument from the existing PDF bytes
const pdfDoc = await PDFDocument.load(existingPdfBytes, { const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true, ignoreEncryption: true
}); });
const pngUrl = xyPostion; const pngUrl = xyPostion;
@@ -499,7 +507,7 @@ function EmbedPdfImage() {
y: page.getHeight() - 10, y: page.getHeight() - 10,
size: fontSize, size: fontSize,
font, font,
color: rgb(0.5, 0.5, 0.5), color: rgb(0.5, 0.5, 0.5)
}); });
} }
pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false });
@@ -575,7 +583,7 @@ function EmbedPdfImage() {
y: page.getHeight() - 10, y: page.getHeight() - 10,
size: fontSize, size: fontSize,
font, font,
color: rgb(0.5, 0.5, 0.5), color: rgb(0.5, 0.5, 0.5)
}); });
} }
for (let i = 0; i < pngUrl.length; i++) { for (let i = 0; i < pngUrl.length; i++) {
@@ -621,11 +629,14 @@ function EmbedPdfImage() {
const newWidth = window.innerWidth; const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1; const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
page.drawImage(img, { page.drawImage(img, {
x: imgUrlList[id].xPosition * scale + 50, x: isMobile
? imgUrlList[id].xPosition * scale + 50
: imgUrlList[id].xPosition,
y: y:
page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight, page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
width: imgWidth, width: imgWidth,
height: imgHeight, height: imgHeight
}); });
}); });
} }
@@ -674,13 +685,13 @@ function EmbedPdfImage() {
Bottom: bottomY, Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150, Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height, Height: height,
Page: pageNo, Page: pageNo
}, }
}; };
} else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
signgleSign = { signgleSign = {
pdfFile: base64Url, pdfFile: base64Url,
docId: docId, docId: docId
}; };
} }
@@ -692,8 +703,8 @@ function EmbedPdfImage() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), sessionToken: localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -786,7 +797,7 @@ function EmbedPdfImage() {
//function for set decline true on press decline button //function for set decline true on press decline button
const declineDoc = async () => { const declineDoc = async () => {
const data = { const data = {
IsDeclined: true, IsDeclined: true
}; };
await axios await axios
@@ -799,8 +810,8 @@ function EmbedPdfImage() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((result) => { .then((result) => {
@@ -808,7 +819,7 @@ function EmbedPdfImage() {
if (res) { if (res) {
const currentDecline = { const currentDecline = {
currnt: "YouDeclined", currnt: "YouDeclined",
isDeclined: true, isDeclined: true
}; };
setIsDecline(currentDecline); setIsDecline(currentDecline);
} }
@@ -834,7 +845,7 @@ function EmbedPdfImage() {
const newXypos = { const newXypos = {
pageNumber: getPageNo, pageNumber: getPageNo,
pos: addSign, pos: addSign
}; };
xyDefaultPos.push(newXypos); xyDefaultPos.push(newXypos);
} }
@@ -869,14 +880,14 @@ function EmbedPdfImage() {
"_appName" "_appName"
)}${contractName}/${signerUserId}`, )}${contractName}/${signerUserId}`,
{ {
TourStatus: updatedTourStatus, TourStatus: updatedTourStatus
}, },
{ {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -896,20 +907,20 @@ function EmbedPdfImage() {
selector: '[data-tut="reactourFirst"]', selector: '[data-tut="reactourFirst"]',
content: `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.`, content: `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.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, },
{ {
selector: '[data-tut="reactourSecond"]', selector: '[data-tut="reactourSecond"]',
content: `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.`, content: `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.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, },
{ {
selector: '[data-tut="reactourThird"]', selector: '[data-tut="reactourThird"]',
content: `Click here to finish & download the signed document.You will also receive a copy on your email.`, content: `Click here to finish & download the signed document.You will also receive a copy on your email.`,
position: "top", position: "top",
style: { fontSize: "13px" }, style: { fontSize: "13px" }
}, }
]; ];
const stepsToShow = const stepsToShow =
@@ -928,6 +939,7 @@ function EmbedPdfImage() {
/> />
); );
}; };
return ( return (
<DndProvider backend={HTML5Backend}> <DndProvider backend={HTML5Backend}>
{isLoading.isLoad ? ( {isLoading.isLoad ? (
@@ -939,7 +951,10 @@ function EmbedPdfImage() {
) : ( ) : (
<div className="signatureContainer"> <div className="signatureContainer">
{/* this component used for UI interaction and show their functionality */} {/* this component used for UI interaction and show their functionality */}
{!isExpired || (!pdfLoadFail && !checkTourStatus && tourFunction())} {pdfLoadFail.status &&
!isExpired &&
!checkTourStatus &&
tourFunction()}
{/* this component used to render all pdf pages in left side */} {/* this component used to render all pdf pages in left side */}
<RenderAllPdfPage <RenderAllPdfPage
@@ -954,7 +969,7 @@ function EmbedPdfImage() {
<div <div
style={{ style={{
marginLeft: pdfOriginalWidth > 500 && "20px", marginLeft: pdfOriginalWidth > 500 && "20px",
marginRight: pdfOriginalWidth > 500 && "20px", marginRight: pdfOriginalWidth > 500 && "20px"
}} }}
> >
{/* this modal is used for show decline alert */} {/* this modal is used for show decline alert */}
@@ -982,7 +997,7 @@ function EmbedPdfImage() {
<> <>
<button <button
style={{ style={{
color: "black", color: "black"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -992,7 +1007,7 @@ function EmbedPdfImage() {
</button> </button>
<button <button
style={{ style={{
background: "#de4337", background: "#de4337"
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1004,8 +1019,7 @@ function EmbedPdfImage() {
)} )}
</Modal.Footer> </Modal.Footer>
</Modal> </Modal>
{/* this modal component is used for show failed document pdf files */}
<ModalComponent isShow={pdfLoadFail} type={"pdfFail"} />
{/* this modal component is used for show expired document */} {/* this modal component is used for show expired document */}
<ModalComponent isShow={isExpired} type={"expire"} /> <ModalComponent isShow={isExpired} type={"expire"} />
@@ -1025,7 +1039,7 @@ function EmbedPdfImage() {
borderRadius: "0px", borderRadius: "0px",
border: "1.5px solid #e3e2e1", border: "1.5px solid #e3e2e1",
fontWeight: "600", fontWeight: "600",
color: "black", color: "black"
}} }}
className="btn" className="btn"
onClick={() => setIsAlreadySign({ status: false })} onClick={() => setIsAlreadySign({ status: false })}
@@ -1036,7 +1050,7 @@ function EmbedPdfImage() {
<button <button
onClick={() => addDefaultSignature()} onClick={() => addDefaultSignature()}
style={{ style={{
background: themeColor(), background: themeColor()
}} }}
type="button" type="button"
className="finishBtn" className="finishBtn"
@@ -1063,7 +1077,7 @@ function EmbedPdfImage() {
defaultSign={defaultSignImg} defaultSign={defaultSignImg}
/> />
{/* pdf header which contain funish back button */} {/* pdf header which contain finish back button */}
<Header <Header
recipient={true} recipient={true}
pdfDetails={completePdfData} pdfDetails={completePdfData}
@@ -1095,6 +1109,7 @@ function EmbedPdfImage() {
recipient={true} recipient={true}
isAlreadySign={isAlreadySign} isAlreadySign={isAlreadySign}
setPdfLoadFail={setPdfLoadFail} setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
/> />
</div> </div>
microfrontends/SignDocuments/src/utils/Utils.js
+55 -53
View File
@@ -86,7 +86,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
Width: newWidth, Width: newWidth,
Height: nweHeight, Height: nweHeight,
SignUrl: image.src, SignUrl: image.src,
ImageType: image.imgType, ImageType: image.imgType
}; };
} }
return url; return url;
@@ -132,7 +132,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
Width: newWidth, Width: newWidth,
Height: newHeight, Height: newHeight,
SignUrl: image.src, SignUrl: image.src,
ImageType: image.imgType, ImageType: image.imgType
}; };
} }
return url; return url;
@@ -151,54 +151,54 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
//function for save button to save signature or image url //function for save button to save signature or image url
export function onSaveSign(xyPostion, index, signKey, signatureImg) { export function onSaveSign(xyPostion, index, signKey, signatureImg) {
const updateFilter = xyPostion[index].pos.filter( // const updateFilter = xyPostion[index].pos.filter(
(data) => data.key === signKey && data.SignUrl // (data) => data.key === signKey && data.SignUrl
); // );
if (updateFilter.length > 0) { let getXYdata = xyPostion[index].pos;
const getXYdata = xyPostion[index].pos; let getPosData = getXYdata;
// updateFilter[0].SignUrl = signatureImg; // if (updateFilter.length > 0) {
// updateFilter[0].SignUrl = signatureImg;
const addSign = getPosData.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
};
}
return url;
});
const getPosData = getXYdata; const newUpdateUrl = xyPostion.map((obj, ind) => {
const addSign = getPosData.map((url, ind) => { if (ind === index) {
if (url.key === signKey) { return { ...obj, pos: addSign };
return { }
...url, return obj;
Width: 150, });
Height: 60, return newUpdateUrl;
SignUrl: signatureImg, // } else {
}; // const addSign = getPosData.map((url, ind) => {
} // if (url.key === signKey) {
return url; // return {
}); // ...url,
// SignUrl: signatureImg,
// Width: getPosData[0].Width ? getPosData[0].Width : 150,
// Height: getPosData[0].Height ? getPosData[0].Height : 60
// };
// }
// return url;
// });
const newUpdateUrl = xyPostion.map((obj, ind) => { // const newUpdateUrl = xyPostion.map((obj, ind) => {
if (ind === index) { // if (ind === index) {
return { ...obj, pos: addSign }; // return { ...obj, pos: addSign };
} // }
return obj; // return obj;
}); // });
return newUpdateUrl; // return newUpdateUrl;
} else { // }
const getXYdata = xyPostion[index].pos;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === signKey) {
return { ...url, SignUrl: signatureImg, Width: 150, Height: 60 };
}
return url;
});
const newUpdateUrl = xyPostion.map((obj, ind) => {
if (ind === index) {
return { ...obj, pos: addSign };
}
return obj;
});
return newUpdateUrl;
}
} }
//function for getting contract_User details //function for getting contract_User details
@@ -212,8 +212,8 @@ export const contractUsers = async (objectId) => {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -239,8 +239,8 @@ export const contactBook = async (objectId) => {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -265,8 +265,8 @@ export const contactBookName = async (userPhone, className) => {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"), "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"), "X-Parse-Session-Token": localStorage.getItem("accesstoken")
}, }
} }
) )
.then((Listdata) => { .then((Listdata) => {
@@ -278,3 +278,5 @@ export const contactBookName = async (userPhone, className) => {
}); });
return result; return result;
}; };