mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-08 10:47:39 +02:00
add dont show button for reactour and minor bug fix in template flow
This commit is contained in:
@@ -31,10 +31,11 @@ import { useNavigate } from "react-router-dom";
|
||||
import PlaceholderCopy from "./component/PlaceholderCopy";
|
||||
import LinkUserModal from "./component/LinkUserModal";
|
||||
import Title from "./component/Title";
|
||||
import TourContentWithBtn from "../premitives/TourContentWithBtn";
|
||||
|
||||
function PlaceHolderSign() {
|
||||
const navigate = useNavigate();
|
||||
const {state}= useLocation()
|
||||
const { state } = useLocation();
|
||||
const [pdfDetails, setPdfDetails] = useState([]);
|
||||
const [isMailSend, setIsMailSend] = useState(false);
|
||||
const [allPages, setAllPages] = useState(null);
|
||||
@@ -82,6 +83,7 @@ function PlaceHolderSign() {
|
||||
const [roleName, setRoleName] = useState("");
|
||||
const [isAddUser, setIsAddUser] = useState({});
|
||||
const [signerExistModal, setSignerExistModal] = useState(false);
|
||||
const [isDontShow, setIsDontShow] = useState(false);
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
@@ -203,7 +205,7 @@ function PlaceHolderSign() {
|
||||
|
||||
if (documentData[0].Signers && documentData[0].Signers.length > 0) {
|
||||
const currEmail = documentData[0].ExtUserPtr.Email;
|
||||
setCurrentId(currEmail)
|
||||
setCurrentId(currEmail);
|
||||
setSignerObjId(documentData[0].Signers[0].objectId);
|
||||
setContractName(documentData[0].Signers[0].className);
|
||||
setIsSelectId(0);
|
||||
@@ -327,6 +329,7 @@ function PlaceHolderSign() {
|
||||
};
|
||||
|
||||
const getSignerPos = (item, monitor) => {
|
||||
if (uniqueId) {
|
||||
const signer = signersdata.find((x) => x.Id === uniqueId);
|
||||
if (signer) {
|
||||
const posZIndex = zIndex + 1;
|
||||
@@ -339,7 +342,7 @@ function PlaceHolderSign() {
|
||||
// );
|
||||
let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
|
||||
let dropData = [];
|
||||
let placeHolder ;
|
||||
let placeHolder;
|
||||
if (item === "onclick") {
|
||||
const dropObj = {
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
@@ -357,7 +360,6 @@ function PlaceHolderSign() {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData
|
||||
};
|
||||
|
||||
} else if (item.type === "BOX") {
|
||||
const offset = monitor.getClientOffset();
|
||||
//adding and updating drop position in array when user drop signature button in div
|
||||
@@ -388,7 +390,7 @@ function PlaceHolderSign() {
|
||||
pos: dropData
|
||||
};
|
||||
}
|
||||
const { blockColor, Role } = signer
|
||||
const { blockColor, Role } = signer;
|
||||
//adding placholder in existing signer pos array (placaholder)
|
||||
if (filterSignerPos.length > 0) {
|
||||
const getPlaceHolder = filterSignerPos[0].placeHolder;
|
||||
@@ -402,7 +404,7 @@ function PlaceHolderSign() {
|
||||
//add entry of position for same signer on multiple page
|
||||
if (getPageNumer.length > 0) {
|
||||
const getPos = getPageNumer[0].pos;
|
||||
const newSignPos = getPos.concat(dropData);
|
||||
const newSignPos = getPos.concat(dropData);
|
||||
let xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: newSignPos
|
||||
@@ -414,7 +416,9 @@ function PlaceHolderSign() {
|
||||
setSignerPos(updatesignerPos);
|
||||
} else {
|
||||
const updatesignerPos = signerPos.map((x) =>
|
||||
x.Id === uniqueId ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } : x
|
||||
x.Id === uniqueId
|
||||
? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
|
||||
: x
|
||||
);
|
||||
setSignerPos(updatesignerPos);
|
||||
}
|
||||
@@ -446,8 +450,8 @@ function PlaceHolderSign() {
|
||||
}
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//function for get pdf page details
|
||||
const pageDetails = async (pdf) => {
|
||||
@@ -721,8 +725,8 @@ function PlaceHolderSign() {
|
||||
objectId: x.objectId
|
||||
};
|
||||
});
|
||||
const currentUser = signersdata.find((x)=> x.Email === currentId)
|
||||
setCurrentId(currentUser?.objectId)
|
||||
const currentUser = signersdata.find((x) => x.Email === currentId);
|
||||
setCurrentId(currentUser?.objectId);
|
||||
// console.log("signers ", signers);
|
||||
try {
|
||||
const data = {
|
||||
@@ -761,31 +765,65 @@ function PlaceHolderSign() {
|
||||
}
|
||||
}
|
||||
};
|
||||
//here you can add your messages in content and selector is key of particular steps
|
||||
|
||||
const handleDontShow = (isChecked) => {
|
||||
setIsDontShow(isChecked);
|
||||
};
|
||||
|
||||
//here you can add your messages in content and selector is key of particular steps
|
||||
const tourConfig = [
|
||||
{
|
||||
selector: '[data-tut="reactourFirst"]',
|
||||
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: () => (
|
||||
<TourContentWithBtn
|
||||
message={`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.`}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
position: "top",
|
||||
|
||||
style: { fontSize: "13px" }
|
||||
},
|
||||
{
|
||||
selector: '[data-tut="reactourSecond"]',
|
||||
content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
|
||||
content: () => (
|
||||
<TourContentWithBtn
|
||||
message={`Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
position: "top",
|
||||
style: { fontSize: "13px" }
|
||||
},
|
||||
{
|
||||
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: () => (
|
||||
<TourContentWithBtn
|
||||
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}
|
||||
/>
|
||||
),
|
||||
position: "top",
|
||||
style: { fontSize: "13px" }
|
||||
},
|
||||
{
|
||||
selector: '[data-tut="reactourLinkUser"]',
|
||||
content: () => (
|
||||
<TourContentWithBtn
|
||||
message={`Click to this icon to assign or replace signer for the placeholder.`}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
position: "top",
|
||||
style: { fontSize: "13px" }
|
||||
},
|
||||
{
|
||||
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: () => (
|
||||
<TourContentWithBtn
|
||||
message={`Clicking "Send" button will share the document with all the recipients.It will also send out emails to everyone on the recipients list.`}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
position: "top",
|
||||
style: { fontSize: "13px" }
|
||||
}
|
||||
@@ -794,82 +832,82 @@ function PlaceHolderSign() {
|
||||
//function for update TourStatus
|
||||
const closeTour = async () => {
|
||||
setPlaceholderTour(false);
|
||||
const extUserClass = localStorage.getItem("extended_class");
|
||||
let updatedTourStatus = [];
|
||||
if (tourStatus.length > 0) {
|
||||
updatedTourStatus = [...tourStatus];
|
||||
const placeholderIndex = tourStatus.findIndex(
|
||||
(obj) => obj["placeholder"] === false || obj["placeholder"] === true
|
||||
);
|
||||
if (placeholderIndex !== -1) {
|
||||
updatedTourStatus[placeholderIndex] = { placeholder: true };
|
||||
} else {
|
||||
updatedTourStatus.push({ placeholder: true });
|
||||
}
|
||||
} else {
|
||||
updatedTourStatus = [{ placeholder: true }];
|
||||
}
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem(
|
||||
"baseUrl"
|
||||
)}classes/${extUserClass}/${signerUserId}`,
|
||||
{
|
||||
TourStatus: updatedTourStatus
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
sessionToken: localStorage.getItem("accesstoken")
|
||||
}
|
||||
if (isDontShow) {
|
||||
const extUserClass = localStorage.getItem("extended_class");
|
||||
let updatedTourStatus = [];
|
||||
if (tourStatus.length > 0) {
|
||||
updatedTourStatus = [...tourStatus];
|
||||
const placeholderIndex = tourStatus.findIndex(
|
||||
(obj) => obj["placeholder"] === false || obj["placeholder"] === true
|
||||
);
|
||||
if (placeholderIndex !== -1) {
|
||||
updatedTourStatus[placeholderIndex] = { placeholder: true };
|
||||
} else {
|
||||
updatedTourStatus.push({ placeholder: true });
|
||||
}
|
||||
)
|
||||
.then((Listdata) => {
|
||||
// const json = Listdata.data;
|
||||
// const res = json.results;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("axois err ", err);
|
||||
});
|
||||
} else {
|
||||
updatedTourStatus = [{ placeholder: true }];
|
||||
}
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem(
|
||||
"baseUrl"
|
||||
)}classes/${extUserClass}/${signerUserId}`,
|
||||
{
|
||||
TourStatus: updatedTourStatus
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
sessionToken: localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((Listdata) => {
|
||||
// const json = Listdata.data;
|
||||
// const res = json.results;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("axois err ", err);
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleRecipientSign = () => {
|
||||
const hostUrl = getHostUrl();
|
||||
navigate(
|
||||
`${hostUrl}recipientSignPdf/${documentId}/${currentId}`
|
||||
);
|
||||
navigate(`${hostUrl}recipientSignPdf/${documentId}/${currentId}`);
|
||||
};
|
||||
|
||||
const handleLinkUser = (id) => {
|
||||
setIsAddUser({ [id]: true });
|
||||
};
|
||||
const handleAddUser = (data) => {
|
||||
if(data && data.objectId){
|
||||
const signerPtr = {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Contactbook",
|
||||
objectId: data.objectId
|
||||
};
|
||||
const updatePlaceHolder = signerPos.map((x) => {
|
||||
if (x.Id === uniqueId) {
|
||||
return { ...x, signerPtr: signerPtr, signerObjId: data.objectId };
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updatePlaceHolder ", updatePlaceHolder);
|
||||
setSignerPos(updatePlaceHolder);
|
||||
if (data && data.objectId) {
|
||||
const signerPtr = {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Contactbook",
|
||||
objectId: data.objectId
|
||||
};
|
||||
const updatePlaceHolder = signerPos.map((x) => {
|
||||
if (x.Id === uniqueId) {
|
||||
return { ...x, signerPtr: signerPtr, signerObjId: data.objectId };
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updatePlaceHolder ", updatePlaceHolder);
|
||||
setSignerPos(updatePlaceHolder);
|
||||
|
||||
const updateSigner = signersdata.map((x) => {
|
||||
if (x.Id === uniqueId) {
|
||||
return { ...x, ...data, className: "contracts_Contactbook" };
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
setSignersData(updateSigner);
|
||||
const index = signersdata.findIndex((x)=> x.Id ===uniqueId)
|
||||
setIsSelectId(index)
|
||||
}
|
||||
const updateSigner = signersdata.map((x) => {
|
||||
if (x.Id === uniqueId) {
|
||||
return { ...x, ...data, className: "contracts_Contactbook" };
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
setSignersData(updateSigner);
|
||||
const index = signersdata.findIndex((x) => x.Id === uniqueId);
|
||||
setIsSelectId(index);
|
||||
}
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
@@ -877,7 +915,7 @@ function PlaceHolderSign() {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Title title={state?.title ? state.title: "New Document"} />
|
||||
<Title title={state?.title ? state.title : "New Document"} />
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{isLoading.isLoad ? (
|
||||
<Loader isLoading={isLoading} />
|
||||
|
||||
Reference in New Issue
Block a user