mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-29 19:29:44 +02:00
Merge branch 'staging' into text-input
This commit is contained in:
Raktima
@@ -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();
|
||||
@@ -625,6 +626,7 @@ function PdfRequestFiles() {
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Title title={"Request Sign"}/>
|
||||
{isLoading.isLoad ? (
|
||||
<Loader isLoading={isLoading} />
|
||||
) : handleError ? (
|
||||
|
||||
@@ -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({
|
||||
@@ -748,16 +751,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" }
|
||||
}
|
||||
@@ -766,47 +784,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 ? (
|
||||
|
||||
@@ -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`
|
||||
@@ -197,7 +198,6 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
}
|
||||
);
|
||||
// console.log("templateDeatils.data ", templateDeatils.data);
|
||||
const documentData =
|
||||
templateDeatils.data && templateDeatils.data.result
|
||||
? [templateDeatils.data.result]
|
||||
@@ -327,201 +327,136 @@ const TemplatePlaceholder = () => {
|
||||
|
||||
//function for setting position after drop signature button over pdf
|
||||
const addPositionOfSignature = (item, monitor) => {
|
||||
getSignerPos(item, monitor);
|
||||
getSignerPos(item, monitor);
|
||||
};
|
||||
|
||||
// `getSignerPos` is used to get placeholder position when user place it and save it in array
|
||||
const getSignerPos = (item, monitor) => {
|
||||
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 xyPosArr = [];
|
||||
let xyPos = {};
|
||||
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);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
} 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);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
}
|
||||
const { blockColor, Role } = signersdata.find((x) => x.Id === uniqueId);
|
||||
//adding placholder in existing signer pos array (placaholder)
|
||||
if (filterSignerPos.length > 0) {
|
||||
// const colorIndex = signerPos
|
||||
// .map((e) => e.signerObjId)
|
||||
// .indexOf(signerObjId);
|
||||
|
||||
const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId);
|
||||
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
|
||||
};
|
||||
updatePlace.push(xyPos);
|
||||
let placeHolderPos;
|
||||
if (contractName) {
|
||||
placeHolderPos = {
|
||||
blockColor: blockColor ? blockColor : color[isSelectListId],
|
||||
signerObjId: signerObjId,
|
||||
placeHolder: updatePlace,
|
||||
signerPtr: {
|
||||
__type: "Pointer",
|
||||
className: `${contractName}`,
|
||||
objectId: signerObjId
|
||||
},
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
} else {
|
||||
placeHolderPos = {
|
||||
blockColor: blockColor ? blockColor : color[isSelectListId],
|
||||
signerObjId: "",
|
||||
placeHolder: updatePlace,
|
||||
signerPtr: {},
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
}
|
||||
// signerPos.splice(colorIndex, 1, placeHolderPos);
|
||||
const newArry = [placeHolderPos];
|
||||
const newArray = [
|
||||
...signerPos.slice(0, colorIndex),
|
||||
...newArry,
|
||||
...signerPos.slice(colorIndex + 1)
|
||||
];
|
||||
setSignerPos(newArray);
|
||||
} else {
|
||||
const newSignPoss = getPlaceHolder.concat(xyPosArr[0]);
|
||||
let placeHolderPos;
|
||||
if (contractName) {
|
||||
placeHolderPos = {
|
||||
blockColor: color[isSelectListId],
|
||||
signerObjId: signerObjId,
|
||||
placeHolder: newSignPoss,
|
||||
signerPtr: {
|
||||
__type: "Pointer",
|
||||
className: `${contractName}`,
|
||||
objectId: signerObjId
|
||||
},
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
} else {
|
||||
placeHolderPos = {
|
||||
blockColor: color[isSelectListId],
|
||||
signerObjId: "",
|
||||
placeHolder: newSignPoss,
|
||||
signerPtr: {},
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
}
|
||||
} 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 newArry = [placeHolderPos];
|
||||
const newArray = [
|
||||
...signerPos.slice(0, colorIndex),
|
||||
...newArry,
|
||||
...signerPos.slice(colorIndex + 1)
|
||||
];
|
||||
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
|
||||
};
|
||||
|
||||
setSignerPos(newArray);
|
||||
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 = {
|
||||
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: xyPosArr,
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
} else {
|
||||
placeHolderPos = {
|
||||
signerPtr: {},
|
||||
signerObjId: "",
|
||||
blockColor: blockColor ? blockColor : color[isSelectListId],
|
||||
placeHolder: xyPosArr,
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
}
|
||||
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
setIsReceipent(false);
|
||||
}
|
||||
setIsMailSend(false);
|
||||
} else {
|
||||
setIsReceipent(false);
|
||||
}
|
||||
};
|
||||
//function for get pdf page details
|
||||
@@ -760,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" }
|
||||
}
|
||||
@@ -800,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
|
||||
@@ -848,7 +814,9 @@ const TemplatePlaceholder = () => {
|
||||
// handle create document
|
||||
const res = await createDocument(pdfDetails, signerPos, signersdata);
|
||||
if (res.status === "success") {
|
||||
navigate(`${hostUrl}placeHolderSign/${res.id}`);
|
||||
navigate(`${hostUrl}placeHolderSign/${res.id}`, {
|
||||
state: { title: "Use Template" }
|
||||
});
|
||||
setIsCreateDoc(false);
|
||||
} else {
|
||||
setHandleError("Error: Something went wrong!");
|
||||
@@ -866,6 +834,8 @@ const TemplatePlaceholder = () => {
|
||||
// save Role in entry in signerList and user
|
||||
const handleAddRole = (e) => {
|
||||
e.preventDefault();
|
||||
setSignerObjId('')
|
||||
setContractName('')
|
||||
const count = signersdata.length > 0 ? signersdata.length + 1 : 1;
|
||||
const Id = randomId();
|
||||
const index = signersdata.length;
|
||||
@@ -884,18 +854,18 @@ const TemplatePlaceholder = () => {
|
||||
// `handleDeleteUser` function is used to delete record and placeholder when user click on delete which is place next user name in recipients list
|
||||
const handleDeleteUser = (Id) => {
|
||||
const updateSigner = signersdata
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
setSignersData(updateSigner);
|
||||
const updatePlaceholderUser = signerPos
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
const index = signersdata.findIndex((x)=> x.Id === Id)
|
||||
if(index === signersdata.length - 1){
|
||||
setUniqueId(updateSigner[updateSigner.length - 1]?.Id ||"");
|
||||
setIsSelectId(0);
|
||||
}else{
|
||||
setUniqueId(updateSigner[index]?.Id ||"");
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
const index = signersdata.findIndex((x) => x.Id === Id);
|
||||
if (index === signersdata.length - 1) {
|
||||
setUniqueId(updateSigner[updateSigner.length - 1]?.Id || "");
|
||||
setIsSelectId(index - 1|| 0);
|
||||
} else {
|
||||
setUniqueId(updateSigner[index]?.Id || "");
|
||||
setIsSelectId(index);
|
||||
}
|
||||
|
||||
@@ -924,12 +894,14 @@ const TemplatePlaceholder = () => {
|
||||
|
||||
const updateSigner = signersdata.map((x) => {
|
||||
if (x.Id === uniqueId) {
|
||||
return { ...x, ...data };
|
||||
return { ...x, ...data, className: "contracts_Contactbook" };
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
setSignersData(updateSigner);
|
||||
setIsMailSend(false);
|
||||
const index = signersdata.findIndex((x) => x.Id === uniqueId);
|
||||
setIsSelectId(index);
|
||||
};
|
||||
|
||||
// `closePopup` is used to close Add/Choose signer modal
|
||||
@@ -1054,7 +1026,10 @@ const TemplatePlaceholder = () => {
|
||||
handleClose={() => setIsCreateDocModal(false)}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>Do you want to create a document using the template you just created ?</p>
|
||||
<p>
|
||||
Do you want to create a document using the template you just
|
||||
created ?
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
|
||||
@@ -43,7 +43,7 @@ const EditTemplate = ({ template, onSuccess }) => {
|
||||
fontWeight: "700"
|
||||
}}
|
||||
>
|
||||
file selected : {template.URL?.split("/")[3]?.split("_")[1]}
|
||||
{template.URL?.split("/")[3]?.split("_")[1]}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-section">
|
||||
|
||||
@@ -10,12 +10,12 @@ const LinkUserModal = (props) => {
|
||||
details={props.handleAddUser}
|
||||
closePopup={props.closePopup}
|
||||
/>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 5, margin:"0px 25px" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 5, margin:"0 30%", color:"#808080" }}>
|
||||
<span
|
||||
style={{
|
||||
height: 1,
|
||||
width: "100%",
|
||||
backgroundColor: "grey"
|
||||
backgroundColor: "#ccc"
|
||||
}}
|
||||
></span>
|
||||
<span>or</span>
|
||||
@@ -23,7 +23,7 @@ const LinkUserModal = (props) => {
|
||||
style={{
|
||||
height: 1,
|
||||
width: "100%",
|
||||
backgroundColor: "grey"
|
||||
backgroundColor: "#ccc"
|
||||
}}
|
||||
></span>
|
||||
</div>
|
||||
|
||||
@@ -83,22 +83,56 @@ function FieldsComponent({
|
||||
justifyContent: "center"
|
||||
}}
|
||||
onClick={() => {
|
||||
if (signersdata?.length) {
|
||||
handleModal();
|
||||
}
|
||||
// if (signersdata?.length) {
|
||||
handleModal();
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "13px", fontWeight: "700" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
Recipient
|
||||
</span>
|
||||
<span style={{ fontSize: "13px", fontWeight: "700" }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
fontWeight: "700",
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
{signersdata[isSelectListId]?.Role && (
|
||||
<div>
|
||||
{signersdata[isSelectListId]?.Name
|
||||
? ` : ${signersdata[isSelectListId]?.Name}`
|
||||
: ` : ${signersdata[isSelectListId]?.Role}`}
|
||||
{signersdata[isSelectListId]?.Name ? (
|
||||
<>
|
||||
:{" "}
|
||||
{signersdata[isSelectListId]?.Name?.length > 12
|
||||
? `${signersdata[isSelectListId].Name.slice(
|
||||
0,
|
||||
12
|
||||
)}...`
|
||||
: signersdata[isSelectListId]?.Name}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
:{" "}
|
||||
{signersdata[isSelectListId]?.Role?.length > 12
|
||||
? `${signersdata[isSelectListId].Role.slice(
|
||||
0,
|
||||
12
|
||||
)}...`
|
||||
: signersdata[isSelectListId]?.Role}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginLeft: 6, fontSize: 16 }}>
|
||||
<i className="fa-solid fa-angle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -333,25 +367,41 @@ function FieldsComponent({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ModalUi
|
||||
title={"Recipients"}
|
||||
isOpen={isSignersModal}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
<RecipientList
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
/>
|
||||
</ModalUi>
|
||||
{isSignersModal && (
|
||||
<ModalUi
|
||||
title={"Recipients"}
|
||||
isOpen={isSignersModal}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
{signersdata.length > 0 ? (
|
||||
<RecipientList
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
handleModal={handleModal}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
padding: 20,
|
||||
fontSize: 15,
|
||||
fontWeight: "500",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
Please add Recipient
|
||||
</div>
|
||||
)}
|
||||
</ModalUi>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -381,14 +381,12 @@ function RenderPdf({
|
||||
};
|
||||
const handleUserName = (signerId, Role) => {
|
||||
if (signerId) {
|
||||
const checkSign = signersdata.filter(
|
||||
(sign) => sign.objectId === signerId
|
||||
);
|
||||
if (checkSign.length > 0) {
|
||||
const checkSign = signersdata.find((sign) => sign.objectId === signerId);
|
||||
if (checkSign?.Name) {
|
||||
return (
|
||||
<>
|
||||
<div style={{ color: "black", fontSize: 11 }}>
|
||||
{checkSign[0].Name}
|
||||
{checkSign?.Name}
|
||||
</div>
|
||||
<div style={{ color: "black", fontSize: 11 }}> {`(${Role})`} </div>
|
||||
</>
|
||||
@@ -479,7 +477,7 @@ function RenderPdf({
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(false);
|
||||
setIsStamp(pos?.isStamp ? pos.isStamp : false);
|
||||
}}
|
||||
>
|
||||
<BorderResize />
|
||||
@@ -647,6 +645,7 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
<i
|
||||
data-tut="reactourLinkUser"
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -788,7 +787,6 @@ function RenderPdf({
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion
|
||||
|
||||
);
|
||||
}}
|
||||
>
|
||||
@@ -1008,7 +1006,7 @@ function RenderPdf({
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(false);
|
||||
setIsStamp(pos?.isStamp ? pos.isStamp : false);
|
||||
}}
|
||||
>
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
@@ -1173,6 +1171,7 @@ function RenderPdf({
|
||||
/>
|
||||
<div>
|
||||
<i
|
||||
data-tut="reactourLinkUser"
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -11,7 +11,7 @@ import { useDrag, useDrop } from "react-dnd";
|
||||
import RenderAllPdfPage from "./component/renderAllPdfPage";
|
||||
import FieldsComponent from "./component/fieldsComponent";
|
||||
import Tour from "reactour";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useLocation, useParams } from "react-router-dom";
|
||||
import Loader from "./component/loader";
|
||||
import HandleError from "./component/HandleError";
|
||||
import Nodata from "./component/Nodata";
|
||||
@@ -31,9 +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 [pdfDetails, setPdfDetails] = useState([]);
|
||||
const [isMailSend, setIsMailSend] = useState(false);
|
||||
const [allPages, setAllPages] = useState(null);
|
||||
@@ -53,7 +55,7 @@ function PlaceHolderSign() {
|
||||
message: "This might take some time"
|
||||
});
|
||||
const [handleError, setHandleError] = useState();
|
||||
const [currentEmail, setCurrentEmail] = useState();
|
||||
const [currentId, setCurrentId] = useState("");
|
||||
const [pdfNewWidth, setPdfNewWidth] = useState();
|
||||
const [placeholderTour, setPlaceholderTour] = useState(true);
|
||||
const [checkTourStatus, setCheckTourStatus] = useState(false);
|
||||
@@ -81,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",
|
||||
@@ -202,10 +205,7 @@ function PlaceHolderSign() {
|
||||
|
||||
if (documentData[0].Signers && documentData[0].Signers.length > 0) {
|
||||
const currEmail = documentData[0].ExtUserPtr.Email;
|
||||
const filterCurrEmail = documentData[0].Signers.filter(
|
||||
(data) => data.Email === currEmail
|
||||
);
|
||||
setCurrentEmail(filterCurrEmail);
|
||||
setCurrentId(currEmail);
|
||||
setSignerObjId(documentData[0].Signers[0].objectId);
|
||||
setContractName(documentData[0].Signers[0].className);
|
||||
setIsSelectId(0);
|
||||
@@ -317,208 +317,136 @@ function PlaceHolderSign() {
|
||||
|
||||
//function for setting position after drop signature button over pdf
|
||||
const addPositionOfSignature = (item, monitor) => {
|
||||
if (isMobile) {
|
||||
if (selectedEmail) {
|
||||
getSignerPos(item, monitor);
|
||||
} else {
|
||||
setIsShowEmail(true);
|
||||
}
|
||||
} else {
|
||||
getSignerPos(item, monitor);
|
||||
}
|
||||
getSignerPos(item, monitor);
|
||||
};
|
||||
|
||||
const getSignerPos = (item, monitor) => {
|
||||
const posZIndex = zIndex + 1;
|
||||
setZIndex(posZIndex);
|
||||
const newWidth = containerWH.width;
|
||||
const scale = pdfOriginalWidth / newWidth;
|
||||
const key = Math.floor(1000 + Math.random() * 9000);
|
||||
// let filterSignerPos = signerPos.filter(
|
||||
// (data) => data.signerObjId === signerObjId
|
||||
// );
|
||||
let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
|
||||
|
||||
let dropData = [];
|
||||
let xyPosArr = [];
|
||||
let xyPos = {};
|
||||
if (item === "onclick") {
|
||||
const dropObj = {
|
||||
//onclick put placeholder center on pdf
|
||||
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);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
} 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);
|
||||
xyPos = {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData
|
||||
};
|
||||
|
||||
xyPosArr.push(xyPos);
|
||||
}
|
||||
|
||||
//add signers objId first inseretion
|
||||
if (filterSignerPos.length > 0) {
|
||||
// const colorIndex = signerPos
|
||||
// .map((e) => e.signerObjId)
|
||||
// .indexOf(signerObjId);
|
||||
|
||||
const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId);
|
||||
|
||||
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 = {
|
||||
setSignerObjId('')
|
||||
setContractName('')
|
||||
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
|
||||
};
|
||||
updatePlace.push(xyPos);
|
||||
} 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 = {
|
||||
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 = {
|
||||
blockColor: color[isSelectListId],
|
||||
signerObjId: signerObjId,
|
||||
placeHolder: updatePlace,
|
||||
signerPtr: {
|
||||
__type: "Pointer",
|
||||
className: `${contractName}`,
|
||||
objectId: signerObjId
|
||||
},
|
||||
Role: roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
} else {
|
||||
placeHolderPos = {
|
||||
blockColor: color[isSelectListId],
|
||||
signerObjId: "",
|
||||
placeHolder: updatePlace,
|
||||
signerPtr: {},
|
||||
Role: roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
}
|
||||
// signerPos.splice(colorIndex, 1, placeHolderPos);
|
||||
const newArry = [placeHolderPos];
|
||||
const newArray = [
|
||||
...signerPos.slice(0, colorIndex),
|
||||
...newArry,
|
||||
...signerPos.slice(colorIndex + 1)
|
||||
];
|
||||
setSignerPos(newArray);
|
||||
} else {
|
||||
const newSignPoss = getPlaceHolder.concat(xyPosArr[0]);
|
||||
let placeHolderPos;
|
||||
if (contractName) {
|
||||
placeHolderPos = {
|
||||
blockColor: color[isSelectListId],
|
||||
signerObjId: signerObjId,
|
||||
placeHolder: newSignPoss,
|
||||
signerPtr: {
|
||||
__type: "Pointer",
|
||||
className: `${contractName}`,
|
||||
objectId: signerObjId
|
||||
},
|
||||
Role: roleName,
|
||||
blockColor: blockColor ? blockColor : color[isSelectListId],
|
||||
placeHolder: [placeHolder],
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
} else {
|
||||
placeHolderPos = {
|
||||
blockColor: color[isSelectListId],
|
||||
signerObjId: "",
|
||||
placeHolder: newSignPoss,
|
||||
signerPtr: {},
|
||||
Role: roleName,
|
||||
signerObjId: "",
|
||||
blockColor: blockColor ? blockColor : color[isSelectListId],
|
||||
placeHolder: [placeHolder],
|
||||
Role: Role ? Role : roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
}
|
||||
|
||||
// signerPos.splice(colorIndex, 1, placeHolderPos);
|
||||
const newArry = [placeHolderPos];
|
||||
const newArray = [
|
||||
...signerPos.slice(0, colorIndex),
|
||||
...newArry,
|
||||
...signerPos.slice(colorIndex + 1)
|
||||
];
|
||||
|
||||
setSignerPos(newArray);
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
}
|
||||
} else {
|
||||
let placeHolderPos;
|
||||
if (contractName) {
|
||||
placeHolderPos = {
|
||||
signerPtr: {
|
||||
__type: "Pointer",
|
||||
className: `${contractName}`,
|
||||
objectId: signerObjId
|
||||
},
|
||||
signerObjId: signerObjId,
|
||||
blockColor: color[isSelectListId],
|
||||
placeHolder: xyPosArr,
|
||||
Role: roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
} else {
|
||||
placeHolderPos = {
|
||||
signerPtr: {},
|
||||
signerObjId: "",
|
||||
blockColor: color[isSelectListId],
|
||||
placeHolder: xyPosArr,
|
||||
Role: roleName,
|
||||
Id: uniqueId
|
||||
};
|
||||
}
|
||||
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
}
|
||||
setIsMailSend(false);
|
||||
}
|
||||
};
|
||||
|
||||
//function for get pdf page details
|
||||
const pageDetails = async (pdf) => {
|
||||
const load = {
|
||||
@@ -791,6 +719,8 @@ function PlaceHolderSign() {
|
||||
objectId: x.objectId
|
||||
};
|
||||
});
|
||||
const currentUser = signersdata.find((x) => x.Email === currentId);
|
||||
setCurrentId(currentUser?.objectId);
|
||||
// console.log("signers ", signers);
|
||||
try {
|
||||
const data = {
|
||||
@@ -829,31 +759,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" }
|
||||
}
|
||||
@@ -862,81 +826,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}/${currentEmail[0].objectId}`
|
||||
);
|
||||
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 };
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
|
||||
setSignersData(updateSigner);
|
||||
}
|
||||
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 = () => {
|
||||
@@ -944,7 +909,7 @@ function PlaceHolderSign() {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Title title={"placeholder"} />
|
||||
<Title title={state?.title ? state.title : "New Document"} />
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{isLoading.isLoad ? (
|
||||
<Loader isLoading={isLoading} />
|
||||
@@ -1056,13 +1021,13 @@ function PlaceHolderSign() {
|
||||
{/* signature modal */}
|
||||
<Modal.Body>
|
||||
<p>You have successfully sent mails to all recipients!</p>
|
||||
{currentEmail?.length > 0 && (
|
||||
{currentId && (
|
||||
<p>Do you want to sign documents right now ?</p>
|
||||
)}
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
{currentEmail?.length > 0 ? (
|
||||
{currentId ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
|
||||
@@ -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) => {
|
||||
@@ -645,66 +648,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" }
|
||||
}
|
||||
@@ -730,6 +753,7 @@ function EmbedPdfImage() {
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Title title={"Sign Document"} />
|
||||
{isLoading.isLoad ? (
|
||||
<Loader isLoading={isLoading} />
|
||||
) : handleError ? (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.addusercontainer {
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
padding: 10px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.loaderdiv {
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -80,11 +80,14 @@ const RecipientList = (props) => {
|
||||
: nonHoverStyle(ind)
|
||||
}
|
||||
onClick={() => {
|
||||
props.setSignerObjId(obj?.objectId);
|
||||
props.setSignerObjId(obj?.objectId || "");
|
||||
props.setIsSelectId(ind);
|
||||
props.setContractName(obj?.className);
|
||||
props.setContractName(obj?.className || "");
|
||||
props.setUniqueId(obj.Id);
|
||||
props.setRoleName(obj.Role);
|
||||
if(props.handleModal){
|
||||
props.handleModal()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -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 = () => {
|
||||
@@ -87,10 +87,9 @@ const SelectSigners = (props) => {
|
||||
/>
|
||||
</div>
|
||||
{isError ? <p style={{color:'red', fontSize: "12px", margin:"5px"}}>Please select signer</p>: <p style={{color:'transparent', fontSize: "12px", margin:"5px"}}>.</p>}
|
||||
|
||||
<div >
|
||||
<div>
|
||||
<button className="submitbutton" onClick={() => handleAdd()}>
|
||||
Add Signer
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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", "justifyContent":'center' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
style={{ marginRight: 3 }}
|
||||
checked={isCheck}
|
||||
onChange={handleCheck}
|
||||
/>{" "}
|
||||
<span style={{color:"#787878", fontSize: 12}}>Don't show this again</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -764,7 +764,8 @@ 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