add dont show button for reactour and minor bug fix in template flow

This commit is contained in:
prafull-opensignlabs
2024-01-01 10:49:37 +05:30
parent e7bcad80cc
commit 2cb4575db1
9 changed files with 487 additions and 338 deletions
@@ -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} />