WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+2
View File
@@ -32,6 +32,7 @@ import Header from "./component/header";
import RenderPdf from "./component/renderPdf";
import CustomModal from "./component/CustomModal";
import AlertComponent from "./component/alertComponent";
import Title from "./component/Title";
function PdfRequestFiles() {
const { docId } = useParams();
@@ -623,6 +624,7 @@ function PdfRequestFiles() {
return (
<DndProvider backend={HTML5Backend}>
<Title title={"Request Sign"}/>
{isLoading.isLoad ? (
<Loader isLoading={isLoading} />
) : handleError ? (
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+58 -38
View File
@@ -39,6 +39,8 @@ import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
import { modalAlign } from "../utils/Utils";
import AlertComponent from "./component/alertComponent";
import PlaceholderCopy from "./component/PlaceholderCopy";
import TourContentWithBtn from "../premitives/TourContentWithBtn";
import Title from "./component/Title";
//For signYourself inProgress section signer can add sign and complete doc sign.
function SignYourSelf() {
@@ -91,6 +93,7 @@ function SignYourSelf() {
type: "load"
});
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const [isDontShow, setIsDontShow] = useState(false);
const divRef = useRef(null);
const nodeRef = useRef(null);
const [{ isOver }, drop] = useDrop({
@@ -747,16 +750,31 @@ function SignYourSelf() {
setXyPostion(getXyData);
setShowAlreadySignDoc({ status: false });
};
const handleDontShow = (isChecked) => {
setIsDontShow(isChecked);
};
const tourConfig = [
{
selector: '[data-tut="reactourFirst"]',
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="reactourSecond"]',
content: `Drag and drop anywhere in this area. You can resize and move it later.`,
content: () => (
<TourContentWithBtn
message={`Drag and drop anywhere in this area. You can resize and move it later.`}
isChecked={handleDontShow}
/>
),
position: "top",
style: { fontSize: "13px" }
}
@@ -765,47 +783,49 @@ function SignYourSelf() {
//function for update TourStatus
const closeTour = async () => {
setSignTour(false);
let updatedTourStatus = [];
if (tourStatus.length > 0) {
updatedTourStatus = [...tourStatus];
const signyourselfIndex = tourStatus.findIndex(
(obj) => obj["signyourself"] === false || obj["signyourself"] === true
);
if (signyourselfIndex !== -1) {
updatedTourStatus[signyourselfIndex] = { signyourself: true };
} else {
updatedTourStatus.push({ signyourself: true });
}
} else {
updatedTourStatus = [{ signyourself: true }];
}
await axios
.put(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
"_appName"
)}${contractName}/${signerUserId}`,
{
TourStatus: updatedTourStatus
},
{
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
}
if (isDontShow) {
let updatedTourStatus = [];
if (tourStatus.length > 0) {
updatedTourStatus = [...tourStatus];
const signyourselfIndex = tourStatus.findIndex(
(obj) => obj["signyourself"] === false || obj["signyourself"] === true
);
if (signyourselfIndex !== -1) {
updatedTourStatus[signyourselfIndex] = { signyourself: true };
} else {
updatedTourStatus.push({ signyourself: true });
}
)
.then((Listdata) => {
// const json = Listdata.data;
})
.catch((err) => {
console.log("axois err ", err);
});
} else {
updatedTourStatus = [{ signyourself: true }];
}
await axios
.put(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
"_appName"
)}${contractName}/${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;
})
.catch((err) => {
console.log("axois err ", err);
});
}
};
return (
<DndProvider backend={HTML5Backend}>
<Title title={"Self Sign"} />
{isLoading.isLoad ? (
<Loader isLoading={isLoading} />
) : handleError ? (
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+202 -165
View File
@@ -33,7 +33,7 @@ import ModalUi from "../premitives/ModalUi";
import AddRoleModal from "./component/AddRoleModal";
import PlaceholderCopy from "./component/PlaceholderCopy";
import ModalComponent from "./component/modalComponent";
import TourContentWithBtn from "../premitives/TourContentWithBtn";
const TemplatePlaceholder = () => {
const navigate = useNavigate();
const { templateId } = useParams();
@@ -157,6 +157,7 @@ const TemplatePlaceholder = () => {
const [isPageCopy, setIsPageCopy] = useState(false);
const [signKey, setSignKey] = useState();
const [IsReceipent, setIsReceipent] = useState(true);
const [isDontShow, setIsDontShow] = useState(false);
const senderUser =
localStorage.getItem(
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -331,129 +332,132 @@ const TemplatePlaceholder = () => {
// `getSignerPos` is used to get placeholder position when user place it and save it in array
const getSignerPos = (item, monitor) => {
if(uniqueId){const signer = signersdata.find((x) => x.Id === uniqueId);
if (signer) {
const posZIndex = zIndex + 1;
setZIndex(posZIndex);
const newWidth = containerWH.width;
const scale = pdfOriginalWidth / newWidth;
const key = randomId();
// let filterSignerPos = signerPos.filter(
// (data) => data.signerObjId === signerObjId
// );
let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
let dropData = [];
let placeHolder ;
if (item === "onclick") {
const dropObj = {
xPosition: window.innerWidth / 2 - 100,
yPosition: window.innerHeight / 2 - 60,
isStamp: monitor,
key: key,
isDrag: false,
scale: scale,
isMobile: isMobile,
yBottom: window.innerHeight / 2 - 60,
zIndex: posZIndex
};
dropData.push(dropObj);
placeHolder = {
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
const containerRect = document
.getElementById("container")
.getBoundingClientRect();
const x = offset.x - containerRect.left;
const y = offset.y - containerRect.top;
const ybottom = containerRect.bottom - offset.y;
const dropObj = {
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
isStamp: isDragStamp || isDragStampSS ? true : false,
key: key,
isDrag: false,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
scale: scale,
isMobile: isMobile,
zIndex: posZIndex
};
dropData.push(dropObj);
placeHolder = {
pageNumber: pageNumber,
pos: dropData
};
}
const { blockColor, Role } = signer
//adding placholder in existing signer pos array (placaholder)
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const updatePlace = getPlaceHolder.filter(
(data) => data.pageNumber !== pageNumber
);
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
//add entry of position for same signer on multiple page
if (getPageNumer.length > 0) {
const getPos = getPageNumer[0].pos;
const newSignPos = getPos.concat(dropData);
let xyPos = {
if (uniqueId) {
const signer = signersdata.find((x) => x.Id === uniqueId);
if (signer) {
const posZIndex = zIndex + 1;
setZIndex(posZIndex);
const newWidth = containerWH.width;
const scale = pdfOriginalWidth / newWidth;
const key = randomId();
// let filterSignerPos = signerPos.filter(
// (data) => data.signerObjId === signerObjId
// );
let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
let dropData = [];
let placeHolder;
if (item === "onclick") {
const dropObj = {
xPosition: window.innerWidth / 2 - 100,
yPosition: window.innerHeight / 2 - 60,
isStamp: monitor,
key: key,
isDrag: false,
scale: scale,
isMobile: isMobile,
yBottom: window.innerHeight / 2 - 60,
zIndex: posZIndex
};
dropData.push(dropObj);
placeHolder = {
pageNumber: pageNumber,
pos: newSignPos
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
const containerRect = document
.getElementById("container")
.getBoundingClientRect();
const x = offset.x - containerRect.left;
const y = offset.y - containerRect.top;
const ybottom = containerRect.bottom - offset.y;
const dropObj = {
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
isStamp: isDragStamp || isDragStampSS ? true : false,
key: key,
isDrag: false,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
scale: scale,
isMobile: isMobile,
zIndex: posZIndex
};
dropData.push(dropObj);
placeHolder = {
pageNumber: pageNumber,
pos: dropData
};
updatePlace.push(xyPos);
const updatesignerPos = signerPos.map((x) =>
x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
);
setSignerPos(updatesignerPos);
} else {
const updatesignerPos = signerPos.map((x) =>
x.Id === uniqueId ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } : x
);
setSignerPos(updatesignerPos);
}
const { blockColor, Role } = signer;
//adding placholder in existing signer pos array (placaholder)
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const updatePlace = getPlaceHolder.filter(
(data) => data.pageNumber !== pageNumber
);
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
//add entry of position for same signer on multiple page
if (getPageNumer.length > 0) {
const getPos = getPageNumer[0].pos;
const newSignPos = getPos.concat(dropData);
let xyPos = {
pageNumber: pageNumber,
pos: newSignPos
};
updatePlace.push(xyPos);
const updatesignerPos = signerPos.map((x) =>
x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
);
setSignerPos(updatesignerPos);
} else {
const updatesignerPos = signerPos.map((x) =>
x.Id === uniqueId
? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
: x
);
setSignerPos(updatesignerPos);
}
} else {
//adding new placeholder for selected signer in pos array (placeholder)
let placeHolderPos;
if (contractName) {
placeHolderPos = {
signerPtr: {
__type: "Pointer",
className: `${contractName}`,
objectId: signerObjId
},
signerObjId: signerObjId,
blockColor: blockColor ? blockColor : color[isSelectListId],
placeHolder: [placeHolder],
Role: Role ? Role : roleName,
Id: uniqueId
};
} else {
placeHolderPos = {
signerPtr: {},
signerObjId: "",
blockColor: blockColor ? blockColor : color[isSelectListId],
placeHolder: [placeHolder],
Role: Role ? Role : roleName,
Id: uniqueId
};
}
setSignerPos((prev) => [...prev, placeHolderPos]);
}
setIsMailSend(false);
} else {
//adding new placeholder for selected signer in pos array (placeholder)
let placeHolderPos;
if (contractName) {
placeHolderPos = {
signerPtr: {
__type: "Pointer",
className: `${contractName}`,
objectId: signerObjId
},
signerObjId: signerObjId,
blockColor: blockColor ? blockColor : color[isSelectListId],
placeHolder: [placeHolder],
Role: Role ? Role : roleName,
Id: uniqueId
};
} else {
placeHolderPos = {
signerPtr: {},
signerObjId: "",
blockColor: blockColor ? blockColor : color[isSelectListId],
placeHolder: [placeHolder],
Role: Role ? Role : roleName,
Id: uniqueId
};
}
setSignerPos((prev) => [...prev, placeHolderPos]);
setIsReceipent(false);
}
setIsMailSend(false);
} else {
setIsReceipent(false);
}}
}
};
//function for get pdf page details
const pageDetails = async (pdf) => {
@@ -691,38 +695,67 @@ const TemplatePlaceholder = () => {
setIsReceipent(false);
}
};
//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="reactourAddbtn"]',
content: `Clicking "Add role" button will allow you to add various signer roles. You can attach users to each role in subsequent steps.`,
content: () => (
<TourContentWithBtn
message={`Clicking "Add role" button will allow you to add various signer roles. You can attach users to each role in subsequent steps.`}
isChecked={handleDontShow}
/>
),
position: "top",
observe: '[data-tut="reactourAddbtn--observe"]',
style: { fontSize: "13px" }
},
{
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" },
action: () => handleCloseRoleModal()
},
{
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="reactourFour"]',
content: `Clicking "Save" button will save the template and will ask you for creating new document.`,
content: () => (
<TourContentWithBtn
message={`Clicking "Save" button will save the template and will ask you for creating new document.`}
isChecked={handleDontShow}
/>
),
position: "top",
style: { fontSize: "13px" }
}
@@ -731,44 +764,46 @@ const TemplatePlaceholder = () => {
//function for update TourStatus
const closeTour = async () => {
setTemplateTour(false);
const extUserClass = localStorage.getItem("extended_class");
let updatedTourStatus = [];
if (tourStatus.length > 0) {
updatedTourStatus = [...tourStatus];
const templatetourIndex = tourStatus.findIndex(
(obj) => obj["templatetour"] === false || obj["templatetour"] === true
);
if (templatetourIndex !== -1) {
updatedTourStatus[templatetourIndex] = { templatetour: true };
} else {
updatedTourStatus.push({ templatetour: true });
}
} else {
updatedTourStatus = [{ templatetour: 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 templatetourIndex = tourStatus.findIndex(
(obj) => obj["templatetour"] === false || obj["templatetour"] === true
);
if (templatetourIndex !== -1) {
updatedTourStatus[templatetourIndex] = { templatetour: true };
} else {
updatedTourStatus.push({ templatetour: true });
}
)
.then((Listdata) => {
// const json = Listdata.data;
// const res = json.results;
})
.catch((err) => {
console.log("axois err ", err);
});
} else {
updatedTourStatus = [{ templatetour: 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);
});
}
};
// `handleCreateDocModal` is used to create Document from template when user click on yes from modal
@@ -779,7 +814,9 @@ const TemplatePlaceholder = () => {
// handle create document
const res = await createDocument(pdfDetails, signerPos, signersdata);
if (res.status === "success") {
navigate(`${hostUrl}placeHolderSign/${res.id}`,{state: {title:"Use Template"}});
navigate(`${hostUrl}placeHolderSign/${res.id}`, {
state: { title: "Use Template" }
});
setIsCreateDoc(false);
} else {
setHandleError("Error: Something went wrong!");
@@ -861,8 +898,8 @@ const TemplatePlaceholder = () => {
});
setSignersData(updateSigner);
setIsMailSend(false);
const index = signersdata.findIndex((x)=> x.Id ===uniqueId)
setIsSelectId(index)
const index = signersdata.findIndex((x) => x.Id === uniqueId);
setIsSelectId(index);
};
// `closePopup` is used to close Add/Choose signer modal
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+4 -2
View File
@@ -477,7 +477,7 @@ function RenderPdf({
onClick={() => {
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(false);
setIsStamp(pos?.isStamp ? pos.isStamp : false);
}}
>
<BorderResize />
@@ -645,6 +645,7 @@ function RenderPdf({
}}
>
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
onTouchEnd={(e) => {
e.stopPropagation();
@@ -1005,7 +1006,7 @@ function RenderPdf({
onClick={() => {
setIsSignPad(true);
setSignKey(pos.key);
setIsStamp(false);
setIsStamp(pos?.isStamp ? pos.isStamp : false);
}}
>
<div style={{ pointerEvents: "none" }}>
@@ -1170,6 +1171,7 @@ function RenderPdf({
/>
<div>
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
onClick={(e) => {
e.stopPropagation();
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+121 -83
View File
@@ -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} />
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+67 -43
View File
@@ -37,6 +37,8 @@ import RenderPdf from "./component/renderPdf";
import CustomModal from "./component/CustomModal";
import { modalAlign } from "../utils/Utils";
import AlertComponent from "./component/alertComponent";
import TourContentWithBtn from "../premitives/TourContentWithBtn";
import Title from "./component/Title";
function EmbedPdfImage() {
const { id, contactBookId } = useParams();
const [isSignPad, setIsSignPad] = useState(false);
@@ -84,6 +86,7 @@ function EmbedPdfImage() {
});
const [containerWH, setContainerWH] = useState({});
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const [isDontShow, setIsDontShow] = useState(false);
const docId = id && id;
const isMobile = window.innerWidth < 767;
const index = xyPostion.findIndex((object) => {
@@ -644,66 +647,86 @@ function EmbedPdfImage() {
//function for update TourStatus
const closeTour = async () => {
setSignTour(false);
let updatedTourStatus = [];
if (tourStatus.length > 0) {
updatedTourStatus = [...tourStatus];
const recipientssignIndex = tourStatus.findIndex(
(obj) =>
obj["recipientssign"] === false || obj["recipientssign"] === true
);
if (recipientssignIndex !== -1) {
updatedTourStatus[recipientssignIndex] = { recipientssign: true };
} else {
updatedTourStatus.push({ recipientssign: true });
}
} else {
updatedTourStatus = [{ recipientssign: true }];
}
await axios
.put(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
"_appName"
)}${contractName}/${signerUserId}`,
{
TourStatus: updatedTourStatus
},
{
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
}
if (isDontShow) {
let updatedTourStatus = [];
if (tourStatus.length > 0) {
updatedTourStatus = [...tourStatus];
const recipientssignIndex = tourStatus.findIndex(
(obj) =>
obj["recipientssign"] === false || obj["recipientssign"] === true
);
if (recipientssignIndex !== -1) {
updatedTourStatus[recipientssignIndex] = { recipientssign: true };
} else {
updatedTourStatus.push({ recipientssign: true });
}
)
.then((Listdata) => {
// const json = Listdata.data;
// const res = json.results;
// console.log("res", json);
})
.catch((err) => {
console.log("axois err ", err);
});
} else {
updatedTourStatus = [{ recipientssign: true }];
}
await axios
.put(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
"_appName"
)}${contractName}/${signerUserId}`,
{
TourStatus: updatedTourStatus
},
{
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
}
}
)
.then((Listdata) => {
// const json = Listdata.data;
// const res = json.results;
// console.log("res", json);
})
.catch((err) => {
console.log("axois err ", err);
});
}
};
const handleDontShow = (isChecked) => {
setIsDontShow(isChecked);
};
const tourFunction = () => {
const tourConfig = [
{
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: () => (
<TourContentWithBtn
message={`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.`}
isChecked={handleDontShow}
/>
),
position: "top",
style: { fontSize: "13px" }
},
{
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: () => (
<TourContentWithBtn
message={`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.`}
isChecked={handleDontShow}
/>
),
position: "top",
style: { fontSize: "13px" }
},
{
selector: '[data-tut="reactourThird"]',
content: `Click here to finish & download the signed document.You will also receive a copy on your email.`,
content: () => (
<TourContentWithBtn
message={`Click here to finish & download the signed document.You will also receive a copy on your email.`}
isChecked={handleDontShow}
/>
),
position: "top",
style: { fontSize: "13px" }
}
@@ -729,6 +752,7 @@ function EmbedPdfImage() {
return (
<DndProvider backend={HTML5Backend}>
<Title title={"Sign Document"} />
{isLoading.isLoad ? (
<Loader isLoading={isLoading} />
) : handleError ? (
microfrontends/SignDocuments/src/premitives/AddUser.js
+4 -4
View File
@@ -158,10 +158,10 @@ const AddUser = (props) => {
const res = await contactQuery.save();
const parseData = JSON.parse(JSON.stringify(res));
props.details({
value: parseData[props.valueKey],
label: parseData[props.displayKey]
});
if(props.details){
props.details(parseData);
}
if (props.closePopup) {
props.closePopup();
}
microfrontends/SignDocuments/src/premitives/SelectSigners.js
+3 -3
View File
@@ -26,9 +26,9 @@ const SelectSigners = (props) => {
// `handleOptions` is used to set just save from quick form to selected option in dropdown
const handleOptions = (item) => {
setSelected(item);
const userData = userList.filter((x) => x.objectId === item.value);
if (userData.length > 0) {
setUserData(userData[0]);
const userData = userList.find((x) => x.objectId === item.value);
if (userData) {
setUserData(userData);
}
};
const handleAdd = () => {
microfrontends/SignDocuments/src/premitives/TourContentWithBtn.js
+26
View File
@@ -0,0 +1,26 @@
import React, { useState } from "react";
export default function TourContentWithBtn({ message, isChecked }) {
const [isCheck, setIsCheck] = useState(false);
const handleCheck = () => {
setIsCheck(!isCheck);
if (isChecked) {
isChecked(!isCheck);
}
};
return (
<div>
<p>{message}</p>
<label style={{ textAlign: "center", display: "flex" }}>
<input
type="checkbox"
style={{ marginRight: 3 }}
checked={isCheck}
onChange={handleCheck}
/>{" "}
<span>Don't show</span>
</label>
</div>
);
}