mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-20 06:35:54 +02:00
Merge pull request #307 from OpenSignLabs/need-your-sign
fix: placeholder display issue of all signers after save placeholder and login flow
This commit is contained in:
prafull-opensignlabs
+16
-20
@@ -17,7 +17,7 @@ function PdfFileComponent({
|
||||
setDocId,
|
||||
setIsLoading,
|
||||
setPdfData,
|
||||
isList,
|
||||
isList
|
||||
}) {
|
||||
const [rename, setRename] = useState("");
|
||||
const [renameValue, setRenameValue] = useState("");
|
||||
@@ -39,12 +39,12 @@ function PdfFileComponent({
|
||||
const handleOnclikFolder = (data) => {
|
||||
const folderData = {
|
||||
name: data.Name,
|
||||
objectId: data.objectId,
|
||||
objectId: data.objectId
|
||||
};
|
||||
setFolderName((prev) => [...prev, folderData]);
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
message: "This might take some time",
|
||||
message: "This might take some time"
|
||||
};
|
||||
|
||||
setIsLoading(loadObj);
|
||||
@@ -57,7 +57,7 @@ function PdfFileComponent({
|
||||
|
||||
if (trimmedValue.length > 0) {
|
||||
const updateName = {
|
||||
Name: renameValue,
|
||||
Name: renameValue
|
||||
};
|
||||
const docId = data.objectId;
|
||||
|
||||
@@ -83,8 +83,8 @@ function PdfFileComponent({
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken"),
|
||||
},
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((result) => {
|
||||
@@ -99,7 +99,6 @@ function PdfFileComponent({
|
||||
|
||||
//function for navigate user to microapp-signature component
|
||||
const checkPdfStatus = async (data) => {
|
||||
|
||||
const hostUrl = getHostUrl();
|
||||
const expireDate = data.ExpiryDate.iso;
|
||||
const expireUpdateDate = new Date(expireDate).getTime();
|
||||
@@ -116,10 +115,7 @@ function PdfFileComponent({
|
||||
|
||||
// window.location.hash = `/pdfRequestFiles/${data.objectId}`;
|
||||
} else if (data.IsCompleted && !signerExist) {
|
||||
navigate(
|
||||
`${hostUrl}signaturePdf/${data.objectId}`
|
||||
);
|
||||
// window.location.hash = `/recipientSignPdf/${data.objectId}/${data.ExtUserPtr.Phone}`;
|
||||
navigate(`${hostUrl}signaturePdf/${data.objectId}`);
|
||||
}
|
||||
//checking if document has declined by someone
|
||||
else if (isDecline) {
|
||||
@@ -231,8 +227,8 @@ function PdfFileComponent({
|
||||
|
||||
const sanitizeFileName = (pdfName) => {
|
||||
// Replace spaces with underscore
|
||||
return pdfName.replace(/ /g, '_');
|
||||
}
|
||||
return pdfName.replace(/ /g, "_");
|
||||
};
|
||||
|
||||
const handleEnterPress = (e, data) => {
|
||||
if (e.key === "Enter") {
|
||||
@@ -312,7 +308,7 @@ function PdfFileComponent({
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
cursor: "pointer",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@@ -344,7 +340,7 @@ function PdfFileComponent({
|
||||
width: "100px",
|
||||
border: "1.5px solid black",
|
||||
borderRadius: "2px",
|
||||
fontSize: "10px",
|
||||
fontSize: "10px"
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
@@ -385,7 +381,7 @@ function PdfFileComponent({
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
cursor: "pointer",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@@ -417,7 +413,7 @@ function PdfFileComponent({
|
||||
width: "100px",
|
||||
border: "1.5px solid black",
|
||||
borderRadius: "2px",
|
||||
fontSize: "10px",
|
||||
fontSize: "10px"
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
@@ -484,7 +480,7 @@ function PdfFileComponent({
|
||||
width: "100px",
|
||||
border: "1.5px solid black",
|
||||
borderRadius: "2px",
|
||||
fontSize: "10px",
|
||||
fontSize: "10px"
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
@@ -576,8 +572,8 @@ function PdfFileComponent({
|
||||
//component to handle type of document and render according to type
|
||||
|
||||
return isList ? (
|
||||
<div className="container" style={{overflowX:"auto"}}>
|
||||
<Table striped bordered hover >
|
||||
<div className="container" style={{ overflowX: "auto" }}>
|
||||
<Table striped bordered hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
@@ -23,7 +23,8 @@ import {
|
||||
signPdfFun,
|
||||
onImageSelect,
|
||||
onSaveSign,
|
||||
onSaveImage
|
||||
onSaveImage,
|
||||
addDefaultSignatureImg
|
||||
} from "../utils/Utils";
|
||||
import Loader from "./component/loader";
|
||||
import HandleError from "./component/HandleError";
|
||||
@@ -33,6 +34,8 @@ import RenderPdf from "./component/renderPdf";
|
||||
import CustomModal from "./component/CustomModal";
|
||||
import AlertComponent from "./component/alertComponent";
|
||||
import Title from "./component/Title";
|
||||
import DefaultSignature from "./component/defaultSignature";
|
||||
import ModalUi from "../premitives/ModalUi";
|
||||
|
||||
function PdfRequestFiles() {
|
||||
const { docId } = useParams();
|
||||
@@ -67,6 +70,10 @@ function PdfRequestFiles() {
|
||||
const [isDecline, setIsDecline] = useState({ isDeclined: false });
|
||||
const [currentSigner, setCurrentSigner] = useState(false);
|
||||
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
|
||||
const [defaultSignAlert, setDefaultSignAlert] = useState({
|
||||
isShow: false,
|
||||
alertMessage: ""
|
||||
});
|
||||
const [isCompleted, setIsCompleted] = useState({
|
||||
isCertificate: false,
|
||||
isModal: false
|
||||
@@ -195,7 +202,7 @@ function PdfRequestFiles() {
|
||||
for (let i = 0; i < signerRes.length; i++) {
|
||||
const signerId = signerRes[i].objectId;
|
||||
|
||||
let isSigned = false;
|
||||
let isSignedSignature = false;
|
||||
for (let j = 0; j < checkDocIdExist.length; j++) {
|
||||
const signedExist =
|
||||
checkDocIdExist[j] && checkDocIdExist[j].UserPtr.objectId;
|
||||
@@ -204,12 +211,12 @@ function PdfRequestFiles() {
|
||||
|
||||
if (signerId === signedExist) {
|
||||
signers.push({ ...signerRes[i], ...signerRes[i] });
|
||||
isSigned = true;
|
||||
isSignedSignature = true;
|
||||
break;
|
||||
}
|
||||
// if does not match then add unsigned data in unSignedSigner array
|
||||
}
|
||||
if (!isSigned) {
|
||||
if (!isSignedSignature) {
|
||||
unSignedSigner.push({ ...signerRes[i], ...signerRes[i] });
|
||||
}
|
||||
}
|
||||
@@ -624,6 +631,27 @@ function PdfRequestFiles() {
|
||||
console.log("error updating field is decline ", err);
|
||||
});
|
||||
};
|
||||
//function to add default signature for all requested placeholder of sign
|
||||
const addDefaultSignature = () => {
|
||||
//get current signers placeholder position data
|
||||
const currentSignerPosition = signerPos.filter(
|
||||
(data) => data.signerObjId === signerObjectId
|
||||
);
|
||||
//function for save default signature url for all placeholder position
|
||||
const updatePlace = addDefaultSignatureImg(
|
||||
currentSignerPosition[0].placeHolder,
|
||||
defaultSignImg
|
||||
);
|
||||
|
||||
const updatesignerPos = signerPos.map((x) =>
|
||||
x.signerObjId === signerObjectId ? { ...x, placeHolder: updatePlace } : x
|
||||
);
|
||||
setSignerPos(updatesignerPos);
|
||||
setDefaultSignAlert({
|
||||
isShow: false,
|
||||
alertMessage: ""
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
@@ -663,11 +691,47 @@ function PdfRequestFiles() {
|
||||
)}
|
||||
|
||||
<div className="signatureContainer" ref={divRef}>
|
||||
<AlertComponent
|
||||
isShow={isAlert.isShow}
|
||||
alertMessage={isAlert.alertMessage}
|
||||
setIsAlert={setIsAlert}
|
||||
/>
|
||||
<ModalUi
|
||||
headerColor={"#dc3545"}
|
||||
isOpen={isAlert.isShow}
|
||||
title={"Alert message"}
|
||||
handleClose={() => {
|
||||
setIsAlert({
|
||||
isShow: false,
|
||||
alertMessage: ""
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>{isAlert.alertMessage}</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsAlert({
|
||||
isShow: false,
|
||||
alertMessage: ""
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* this modal is used to show decline alert */}
|
||||
<CustomModal
|
||||
containerWH={containerWH}
|
||||
@@ -700,6 +764,76 @@ function PdfRequestFiles() {
|
||||
headMsg="Document Expired!"
|
||||
bodyMssg="This Document is no longer available."
|
||||
/>
|
||||
<ModalUi
|
||||
headerColor={defaultSignImg ? themeColor() : "#dc3545"}
|
||||
isOpen={defaultSignAlert.isShow}
|
||||
title={"Auto sign"}
|
||||
handleClose={() => {
|
||||
setDefaultSignAlert({
|
||||
isShow: false,
|
||||
alertMessage: ""
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>{defaultSignAlert.alertMessage}</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
{defaultSignImg ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => addDefaultSignature()}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDefaultSignAlert({
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* this component used to render all pdf pages in left side */}
|
||||
<RenderAllPdfPage
|
||||
signPdfUrl={pdfDetails[0].URL}
|
||||
@@ -805,137 +939,153 @@ function PdfRequestFiles() {
|
||||
</div>
|
||||
<div>
|
||||
<div className="signerComponent">
|
||||
{signedSigners.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
className="signedStyle"
|
||||
>
|
||||
Signed by
|
||||
</div>
|
||||
<div style={{ marginTop: "2px" }}>
|
||||
{signedSigners.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
padding: "10px 0",
|
||||
background: checkSignerBackColor(obj)
|
||||
}}
|
||||
key={ind}
|
||||
>
|
||||
<div
|
||||
style={{ maxHeight: window.innerHeight - 70 + "px" }}
|
||||
className="autoSignScroll"
|
||||
>
|
||||
{signedSigners.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
className="signedStyle"
|
||||
>
|
||||
Signed by
|
||||
</div>
|
||||
<div style={{ marginTop: "2px" }}>
|
||||
{signedSigners.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
background: "#abd1d0",
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
margin: "0 10px 0 5px"
|
||||
padding: "10px 0",
|
||||
background: checkSignerBackColor(obj)
|
||||
}}
|
||||
key={ind}
|
||||
>
|
||||
<span
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "black",
|
||||
textTransform: "uppercase"
|
||||
background: "#abd1d0",
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "0 10px 0 5px"
|
||||
}}
|
||||
>
|
||||
{getFirstLetter(obj.Name)}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "black",
|
||||
textTransform: "uppercase"
|
||||
}}
|
||||
>
|
||||
{getFirstLetter(obj.Name)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
<span className="userName">{obj.Name}</span>
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
<span className="userName">{obj.Name}</span>
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{unsignedSigners.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
padding: "5px",
|
||||
fontFamily: "sans-serif",
|
||||
marginTop: signedSigners.length > 0 && "20px"
|
||||
}}
|
||||
>
|
||||
Yet to sign
|
||||
</div>
|
||||
<div style={{ marginTop: "5px" }}>
|
||||
{unsignedSigners.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
padding: "10px 0",
|
||||
background: checkSignerBackColor(obj)
|
||||
}}
|
||||
key={ind}
|
||||
>
|
||||
{unsignedSigners.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
padding: "5px",
|
||||
fontFamily: "sans-serif",
|
||||
marginTop: signedSigners.length > 0 && "20px"
|
||||
}}
|
||||
>
|
||||
Yet to sign
|
||||
</div>
|
||||
<div style={{ marginTop: "5px" }}>
|
||||
{unsignedSigners.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
background: "#abd1d0",
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
margin: "0 10px 0 5px"
|
||||
padding: "10px 0",
|
||||
background: checkSignerBackColor(obj)
|
||||
}}
|
||||
key={ind}
|
||||
>
|
||||
<span
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "black",
|
||||
textTransform: "uppercase"
|
||||
background: "#abd1d0",
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "0 10px 0 5px"
|
||||
}}
|
||||
>
|
||||
{getFirstLetter(obj.Name)}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "black",
|
||||
textTransform: "uppercase"
|
||||
}}
|
||||
>
|
||||
{getFirstLetter(obj.Name)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
<span className="userName">{obj.Name}</span>
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
<span className="userName">{obj.Name}</span>
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{defaultSignImg && !alreadySign && (
|
||||
<DefaultSignature
|
||||
themeColor={themeColor}
|
||||
defaultSignImg={defaultSignImg}
|
||||
setDefaultSignImg={setDefaultSignImg}
|
||||
userObjectId={signerObjectId}
|
||||
setIsLoading={setIsLoading}
|
||||
xyPostion={signerPos}
|
||||
setDefaultSignAlert={setDefaultSignAlert}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -741,7 +741,7 @@ const TemplatePlaceholder = () => {
|
||||
selector: '[data-tut="reactourThird"]',
|
||||
content: () => (
|
||||
<TourContentWithBtn
|
||||
message={`The PDF content area already displays the template's existing placeholders. For your convenience, these placeholders will match the color of the recipient's name, making them easily identifiable.`}
|
||||
message={`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.`}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
|
||||
@@ -25,31 +25,41 @@ function CustomModal({
|
||||
<div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
|
||||
<div className="modalBodyDIv">
|
||||
<p className="pTagBody">{bodyMssg && bodyMssg}</p>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
|
||||
{footerMessage && (
|
||||
<div className="modalFooterDiv">
|
||||
<button
|
||||
style={{
|
||||
background: "#de4337"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
onClick={() => declineDoc()}
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
onClick={() => setIsDecline({ isDeclined: false })}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{footerMessage && (
|
||||
<div className="modalFooterDiv">
|
||||
<button
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
onClick={() => setIsDecline({ isDeclined: false })}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
background: "#de4337"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
onClick={() => declineDoc()}
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -4,27 +4,32 @@ function DefaultSignature({
|
||||
themeColor,
|
||||
defaultSignImg,
|
||||
xyPostion,
|
||||
setIsAlert
|
||||
setDefaultSignAlert
|
||||
}) {
|
||||
const confirmToaddDefaultSign = () => {
|
||||
if (xyPostion.length > 0) {
|
||||
setIsAlert({
|
||||
setDefaultSignAlert({
|
||||
isShow: true,
|
||||
alertMessage: "Are you sure you want to sign at requested locations?"
|
||||
alertMessage:
|
||||
"Are you sure you want to auto sign at requested all locations?"
|
||||
});
|
||||
} else {
|
||||
alert("please select position!");
|
||||
setDefaultSignAlert({
|
||||
isShow: true,
|
||||
alertMessage: "please select position!"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="signerComponent">
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
padding: "5px",
|
||||
fontFamily: "sans-serif"
|
||||
fontFamily: "sans-serif",
|
||||
marginTop: "5px"
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
@@ -38,41 +43,34 @@ function DefaultSignature({
|
||||
fontWeight: "600"
|
||||
}}
|
||||
>
|
||||
{defaultSignImg ? (
|
||||
<>
|
||||
<p>Your Signature</p>
|
||||
<div className="defaultSignBox">
|
||||
<img
|
||||
alt="default img"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
src={defaultSignImg}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
<>
|
||||
<p>Your Signature</p>
|
||||
<div className="defaultSignBox">
|
||||
<img
|
||||
alt="default img"
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
marginTop: "20px",
|
||||
cursor: "pointer"
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn finishnHover"
|
||||
onClick={() => confirmToaddDefaultSign()}
|
||||
>
|
||||
Auto Sign All
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ margin: "10px" }}>
|
||||
<span>
|
||||
Click a signature placeholder to start signing the document!
|
||||
</span>
|
||||
src={defaultSignImg}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white",
|
||||
marginTop: "20px",
|
||||
cursor: "pointer",
|
||||
marginBottom: "10px"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn finishnHover"
|
||||
onClick={() => confirmToaddDefaultSign()}
|
||||
>
|
||||
Auto Sign All
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -225,10 +225,7 @@ function Header({
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
|
||||
className="mobileHead"
|
||||
>
|
||||
<div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
|
||||
{isMobile && isShowHeader ? (
|
||||
<div
|
||||
id="navbar"
|
||||
@@ -540,8 +537,8 @@ function Header({
|
||||
<div>
|
||||
{signerPos.length === 0 ? (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
Add {signersdata.length - signerPos.length}{" "}
|
||||
recipients signature
|
||||
Add {signersdata.length - signerPos.length} recipients
|
||||
signature
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
@@ -554,7 +551,14 @@ function Header({
|
||||
|
||||
<div>
|
||||
{setIsEditTemplate && (
|
||||
<button onClick={() => setIsEditTemplate(true)} style={{border:"none", outline:"none", textAlign:"center"}}>
|
||||
<button
|
||||
onClick={() => setIsEditTemplate(true)}
|
||||
style={{
|
||||
border: "none",
|
||||
outline: "none",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-gear fa-lg"></i>
|
||||
</button>
|
||||
)}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -103,7 +103,12 @@ function Login() {
|
||||
setLoading(false);
|
||||
} else {
|
||||
let _user = user.data.result;
|
||||
const parseId = localStorage.getItem("parseAppId");
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
localStorage.setItem(
|
||||
`Parse/${parseId}/currentUser`,
|
||||
JSON.stringify(_user)
|
||||
);
|
||||
localStorage.setItem("username", _user.name);
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
//save isGuestSigner true in local to handle login flow header in mobile view
|
||||
|
||||
@@ -722,7 +722,7 @@ function PlaceHolderSign() {
|
||||
});
|
||||
const currentUser = signersdata.find((x) => x.Email === currentId);
|
||||
setCurrentId(currentUser?.objectId);
|
||||
// console.log("signers ", signers);
|
||||
|
||||
try {
|
||||
const data = {
|
||||
Placeholders: signerPos,
|
||||
@@ -898,7 +898,11 @@ function PlaceHolderSign() {
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
if (updateSigner && updateSigner.length > 0) {
|
||||
setCurrentId(updateSigner[0].Email);
|
||||
}
|
||||
|
||||
setSignersData(updateSigner);
|
||||
const index = signersdata.findIndex((x) => x.Id === uniqueId);
|
||||
setIsSelectId(index);
|
||||
@@ -987,16 +991,7 @@ function PlaceHolderSign() {
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
onClick={() => setIsSendAlert({})}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
{isSendAlert.mssg === "confirm" && (
|
||||
<button
|
||||
onClick={() => sendEmailToSigners()}
|
||||
@@ -1009,6 +1004,16 @@ function PlaceHolderSign() {
|
||||
Yes
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsSendAlert({})}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
|
||||
@@ -1037,20 +1042,6 @@ function PlaceHolderSign() {
|
||||
></div>
|
||||
{currentId ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsSend(false);
|
||||
setSignerPos([]);
|
||||
}}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
handleRecipientSign();
|
||||
@@ -1064,6 +1055,19 @@ function PlaceHolderSign() {
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsSend(false);
|
||||
setSignerPos([]);
|
||||
}}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
@@ -1225,16 +1229,26 @@ function PlaceHolderSign() {
|
||||
)}
|
||||
</DndProvider>
|
||||
<div>
|
||||
<Modal show={signerExistModal}>
|
||||
<Modal.Header className="bg-danger">
|
||||
<span style={{ color: "white" }}>Users required</span>
|
||||
</Modal.Header>
|
||||
<ModalUi
|
||||
headerColor={"#dc3545"}
|
||||
isOpen={signerExistModal}
|
||||
title={"Users required"}
|
||||
handleClose={() => {
|
||||
setSignerExistModal(false);
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>Please assign signers to all placeholders</p>
|
||||
|
||||
{/* signature modal */}
|
||||
<Modal.Body>
|
||||
<p>Please attach users to all fields</p>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
onClick={() => setSignerExistModal(false)}
|
||||
style={{
|
||||
@@ -1245,8 +1259,9 @@ function PlaceHolderSign() {
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</div>
|
||||
</ModalUi>
|
||||
|
||||
<LinkUserModal
|
||||
handleAddUser={handleAddUser}
|
||||
isAddUser={isAddUser}
|
||||
|
||||
@@ -25,8 +25,9 @@ function AppRoutes() {
|
||||
<Route path="/signaturePdf/:docId" element={<SignYourselfPdf />} />
|
||||
{/* recipient signature route with no rowlevel data using docId from url */}
|
||||
<Route
|
||||
path="/recipientSignPdf/:id/:contactBookId"
|
||||
element={<RecipientSignPdf />}
|
||||
path="/recipientSignPdf/:docId/:contactBookId"
|
||||
// element={<RecipientSignPdf />
|
||||
element={<PdfRequestFiles />}
|
||||
/>
|
||||
{/* recipient placeholder set route with rowlevel data */}
|
||||
<Route path="/placeHolderSign" element={<PlaceHolderSign />} />{" "}
|
||||
|
||||
@@ -5,11 +5,12 @@
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.childDiv {
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -27,7 +28,7 @@
|
||||
border-top-left-radius: 0.3rem;
|
||||
border-top-right-radius: 0.3rem;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.modalBodyDIv {
|
||||
@@ -48,12 +49,12 @@
|
||||
.modalFooterDiv {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media screen and (max-width:500px) {
|
||||
.childDiv {
|
||||
margin: 50px 7px;
|
||||
width: 90%;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
|
||||
|
||||
.signatureCanvas {
|
||||
border: 2px solid #888;
|
||||
background-color: rgb(255, 255, 255);
|
||||
@@ -266,7 +265,7 @@
|
||||
|
||||
.defaultSignBox {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
width: 180px;
|
||||
width: 90%;
|
||||
height: 111px;
|
||||
padding: 8px 20px;
|
||||
color: white;
|
||||
@@ -444,6 +443,7 @@
|
||||
width: 180px;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
@@ -678,6 +678,12 @@ option {
|
||||
.dropDownStyle {
|
||||
width: auto;
|
||||
}
|
||||
.autoSignScroll{
|
||||
overflow-y: auto;
|
||||
}
|
||||
.autoSignScroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width:766px) {
|
||||
|
||||
|
||||
@@ -95,19 +95,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
|
||||
let getIMGWH;
|
||||
//get current page position
|
||||
const getXYData = xyPostion[index].pos;
|
||||
const updateXYData = getXYData.map((url) => {
|
||||
if (url.key === signKey) {
|
||||
getIMGWH = calculateImgAspectRatio(imgWH, url);
|
||||
const updateXYData = getXYData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
getIMGWH = calculateImgAspectRatio(imgWH, position);
|
||||
|
||||
return {
|
||||
...url,
|
||||
...position,
|
||||
Width: getIMGWH.newWidth,
|
||||
Height: getIMGWH.newHeight,
|
||||
SignUrl: image.src,
|
||||
ImageType: image.imgType
|
||||
};
|
||||
}
|
||||
return url;
|
||||
return position;
|
||||
});
|
||||
|
||||
const updateXYposition = xyPostion.map((obj, ind) => {
|
||||
@@ -215,18 +215,18 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
|
||||
const getPageNo = xyPostion[i].pageNumber;
|
||||
const getPosData = getXYdata;
|
||||
|
||||
const addSign = getPosData.map((url, ind) => {
|
||||
getIMGWH = calculateImgAspectRatio(imgWH, url);
|
||||
if (url) {
|
||||
const addSign = getPosData.map((position, ind) => {
|
||||
getIMGWH = calculateImgAspectRatio(imgWH, position);
|
||||
if (position && !position.isStamp) {
|
||||
return {
|
||||
...url,
|
||||
...position,
|
||||
SignUrl: defaultSignImg,
|
||||
Width: getIMGWH.newWidth,
|
||||
Height: getIMGWH.newHeight,
|
||||
ImageType: "default"
|
||||
};
|
||||
}
|
||||
return url;
|
||||
return position;
|
||||
});
|
||||
|
||||
const newXypos = {
|
||||
@@ -764,8 +764,7 @@ export const handleSignYourselfImageResize = (
|
||||
key,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion
|
||||
|
||||
setXyPostion
|
||||
) => {
|
||||
// const updateFilter = xyPostion[index].pos.filter(
|
||||
// (data) => data.key === key && data.Width && data.Height
|
||||
|
||||
Reference in New Issue
Block a user