mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-07 02:07:40 +02:00
feat: implement changes to ensure compatibility with multiple widgets
This commit is contained in:
RaktimaNXG
@@ -103,9 +103,8 @@ function SignYourSelf() {
|
||||
const [{ isDragSign }, dragSignature] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 1,
|
||||
text: "drag me"
|
||||
text: "signature"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragSign: !!monitor.isDragging()
|
||||
@@ -115,14 +114,14 @@ function SignYourSelf() {
|
||||
const [{ isDragStamp }, dragStamp] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 2,
|
||||
text: "drag me"
|
||||
text: "stamp"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragStamp: !!monitor.isDragging()
|
||||
})
|
||||
});
|
||||
|
||||
const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
|
||||
type: "BOX",
|
||||
|
||||
@@ -172,6 +171,17 @@ function SignYourSelf() {
|
||||
const jsonSender = JSON.parse(senderUser);
|
||||
|
||||
useEffect(() => {
|
||||
// localStorage.setItem("accesstoken", "r:d70a32032557e982aab7aec1cae668fc");
|
||||
// localStorage.setItem(
|
||||
// "baseUrl",
|
||||
// "https://staging-app.opensignlabs.com/api/app/"
|
||||
// );
|
||||
// localStorage.setItem("parseAppId", "opensignstgn");
|
||||
// localStorage.setItem(
|
||||
// "Parse/opensignstgn/currentUser",
|
||||
// '{"name":"raktima","email":"raktimachaurasiya@gmail.com","phone":"9876567876","username":"raktimachaurasiya@gmail.com","createdAt":"2024-01-03T05:48:49.407Z","sessionToken":"r:d70a32032557e982aab7aec1cae668fc","updatedAt":"2024-01-03T05:48:49.407Z","emailVerified":false,"ACL":{"YHwDtLNto7":{"read":true,"write":true}},"__type":"Object","className":"_User","objectId":"YHwDtLNto7"}'
|
||||
// );
|
||||
// localStorage.setItem("_appName", "contracts");
|
||||
if (documentId) {
|
||||
getDocumentDetails(true);
|
||||
}
|
||||
@@ -316,16 +326,18 @@ function SignYourSelf() {
|
||||
const addPositionOfSignature = (item, monitor) => {
|
||||
const key = Math.floor(1000 + Math.random() * 9000);
|
||||
let dropData = [];
|
||||
let dropObj = {};
|
||||
let filterDropPos = xyPostion.filter(
|
||||
(data) => data.pageNumber === pageNumber
|
||||
);
|
||||
if (item === "onclick") {
|
||||
const dropObj = {
|
||||
dropObj = {
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
yPosition: window.innerHeight / 2 - 60,
|
||||
isDrag: false,
|
||||
key: key,
|
||||
isStamp: monitor,
|
||||
type: item.text,
|
||||
yBottom: window.innerHeight / 2 - 60
|
||||
};
|
||||
|
||||
@@ -347,7 +359,7 @@ function SignYourSelf() {
|
||||
const y = offset.y - containerRect.top;
|
||||
const ybottom = containerRect.bottom - offset.y;
|
||||
|
||||
const dropObj = {
|
||||
dropObj = {
|
||||
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
|
||||
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
|
||||
isDrag: false,
|
||||
@@ -355,7 +367,8 @@ function SignYourSelf() {
|
||||
isStamp: isDragStamp || isDragStampSS ? true : false,
|
||||
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
|
||||
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
|
||||
yBottom: ybottom
|
||||
yBottom: ybottom,
|
||||
type: item.text
|
||||
};
|
||||
|
||||
dropData.push(dropObj);
|
||||
@@ -379,8 +392,11 @@ function SignYourSelf() {
|
||||
pos: newSignPos
|
||||
};
|
||||
xyPostion.splice(index, 1, xyPos);
|
||||
setIsSignPad(true);
|
||||
setSignKey(key);
|
||||
if (isDragSign || isDragSignatureSS || isDragStamp || isDragStampSS) {
|
||||
setIsSignPad(true);
|
||||
setSignKey(key);
|
||||
}
|
||||
|
||||
// }
|
||||
} else {
|
||||
const xyPos = {
|
||||
@@ -388,8 +404,11 @@ function SignYourSelf() {
|
||||
pos: dropData
|
||||
};
|
||||
setXyPostion((prev) => [...prev, xyPos]);
|
||||
setIsSignPad(true);
|
||||
setSignKey(key);
|
||||
|
||||
if (isDragSign || isDragSignatureSS) {
|
||||
setIsSignPad(true);
|
||||
setSignKey(key);
|
||||
}
|
||||
}
|
||||
|
||||
// setXyPostion((prev) => [...prev, xyPos]);
|
||||
@@ -405,64 +424,64 @@ function SignYourSelf() {
|
||||
checkSignUrl.push(posData);
|
||||
}
|
||||
}
|
||||
if (xyPostion.length === 0) {
|
||||
setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "Please complete your signature!"
|
||||
});
|
||||
return;
|
||||
} else if (xyPostion.length > 0 && checkSignUrl.length > 0) {
|
||||
setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "Please complete your signature!"
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
setIsCeleb(true);
|
||||
setTimeout(() => {
|
||||
setIsCeleb(false);
|
||||
}, 3000);
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
const url = pdfDetails[0] && pdfDetails[0].URL;
|
||||
// if (xyPostion.length === 0) {
|
||||
// setIsAlert({
|
||||
// isShow: true,
|
||||
// alertMessage: "Please complete your signature!"
|
||||
// });
|
||||
// return;
|
||||
// } else if (xyPostion.length > 0 && checkSignUrl.length > 0) {
|
||||
// setIsAlert({
|
||||
// isShow: true,
|
||||
// alertMessage: "Please complete your signature!"
|
||||
// });
|
||||
// return;
|
||||
// } else {
|
||||
setIsCeleb(true);
|
||||
setTimeout(() => {
|
||||
setIsCeleb(false);
|
||||
}, 3000);
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
const url = pdfDetails[0] && pdfDetails[0].URL;
|
||||
|
||||
const existingPdfBytes = await fetch(url).then((res) =>
|
||||
res.arrayBuffer()
|
||||
);
|
||||
const existingPdfBytes = await fetch(url).then((res) => res.arrayBuffer());
|
||||
|
||||
// Load a PDFDocument from the existing PDF bytes
|
||||
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
|
||||
ignoreEncryption: true
|
||||
});
|
||||
// Load a PDFDocument from the existing PDF bytes
|
||||
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
|
||||
ignoreEncryption: true
|
||||
});
|
||||
|
||||
const flag = true;
|
||||
//embed document's object id to all pages in pdf document
|
||||
await embedDocId(pdfDoc, documentId, allPages);
|
||||
const flag = true;
|
||||
//embed document's object id to all pages in pdf document
|
||||
await embedDocId(pdfDoc, documentId, allPages);
|
||||
|
||||
//embed multi signature in pdf
|
||||
const pdfBytes = await multiSignEmbed(
|
||||
xyPostion,
|
||||
pdfDoc,
|
||||
pdfOriginalWidth,
|
||||
flag,
|
||||
containerWH
|
||||
);
|
||||
//embed multi signature in pdf
|
||||
const pdfBytes = await multiSignEmbed(
|
||||
xyPostion,
|
||||
pdfDoc,
|
||||
pdfOriginalWidth,
|
||||
flag,
|
||||
containerWH
|
||||
);
|
||||
|
||||
//function for call to embed signature in pdf and get digital signature pdf
|
||||
signPdfFun(pdfBytes, documentId);
|
||||
setIsSignPad(false);
|
||||
setIsEmail(true);
|
||||
setXyPostion([]);
|
||||
setSignBtnPosition([]);
|
||||
}
|
||||
console.log("pdf", pdfBytes);
|
||||
//function for call to embed signature in pdf and get digital signature pdf
|
||||
signPdfFun(pdfBytes, documentId);
|
||||
|
||||
setIsSignPad(false);
|
||||
setIsEmail(true);
|
||||
setXyPostion([]);
|
||||
setSignBtnPosition([]);
|
||||
// }
|
||||
}
|
||||
|
||||
//function for get digital signature
|
||||
const signPdfFun = async (base64Url, documentId) => {
|
||||
const singleSign = {
|
||||
let singleSign = {
|
||||
pdfFile: base64Url,
|
||||
docId: documentId
|
||||
};
|
||||
@@ -603,7 +622,6 @@ function SignYourSelf() {
|
||||
|
||||
setXyPostion(getUpdatePosition);
|
||||
};
|
||||
|
||||
//function for capture position on hover signature button
|
||||
const handleDivClick = (e) => {
|
||||
const divRect = e.currentTarget.getBoundingClientRect();
|
||||
@@ -664,11 +682,9 @@ function SignYourSelf() {
|
||||
setXyPostion(getXyData);
|
||||
setShowAlreadySignDoc({ status: false });
|
||||
};
|
||||
|
||||
const handleDontShow = (isChecked) => {
|
||||
setIsDontShow(isChecked);
|
||||
};
|
||||
|
||||
const tourConfig = [
|
||||
{
|
||||
selector: '[data-tut="reactourFirst"]',
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import React from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { getWidgetType } from "../../utils/Utils";
|
||||
|
||||
function AllWidgets(props) {
|
||||
const signStyle = "signatureBtn";
|
||||
|
||||
return props.updateWidgets.map((item, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
ref={(element) => {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
if (props?.signRef) {
|
||||
props.signRef.current = element;
|
||||
}
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
onMouseMove={props?.handleDivClick}
|
||||
onMouseDown={props?.handleMouseLeave}
|
||||
style={{
|
||||
// opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
marginLeft: `${props?.marginLeft}px`
|
||||
}}
|
||||
>
|
||||
{/* <div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
class="fa-sharp fa-solid fa-grip-vertical"
|
||||
style={{ color: "#908d8d", fontSize: "13px" }}
|
||||
></i>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
// padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
{item.type}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: themeColor(),
|
||||
padding: "0 5px",
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
style={{ color: "white", fontSize: item.iconSize }}
|
||||
className={item.icon}
|
||||
></i>
|
||||
</div> */}
|
||||
{getWidgetType(item)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export default AllWidgets;
|
||||
@@ -0,0 +1,141 @@
|
||||
import React, { useState } from "react";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import ModalHeader from "react-bootstrap/esm/ModalHeader";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
function DropdownWidgetOption(props) {
|
||||
const [dropdownOptionList, setDropdownOptionList] = useState([
|
||||
"option-1",
|
||||
"option-2"
|
||||
]);
|
||||
|
||||
const [dropdownName, setDropdownName] = useState("Dropdown-1");
|
||||
const [error, setError] = useState("");
|
||||
const handleInputChange = (index, value) => {
|
||||
setDropdownOptionList((prevInputs) => {
|
||||
const newInputs = [...prevInputs];
|
||||
newInputs[index] = value;
|
||||
return newInputs;
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddInput = () => {
|
||||
setDropdownOptionList((prevInputs) => [...prevInputs, ""]);
|
||||
};
|
||||
const handleAddOption = () => {
|
||||
setDropdownOptionList([...dropdownOptionList, ""]);
|
||||
};
|
||||
const handleDeleteInput = (ind) => {
|
||||
const getUpdatedOptions = dropdownOptionList.filter(
|
||||
(data, index) => index !== ind
|
||||
);
|
||||
setDropdownOptionList(getUpdatedOptions);
|
||||
};
|
||||
const handleSaveOption = () => {
|
||||
const existEmptyOption = dropdownOptionList.some((data) => data === "");
|
||||
|
||||
if (existEmptyOption) {
|
||||
setError("Enter all option");
|
||||
setTimeout(() => {
|
||||
setError("");
|
||||
}, 1000);
|
||||
} else {
|
||||
props.handleSaveDropdownOptions(dropdownName, dropdownOptionList);
|
||||
props.setShowDropdown(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
//props.showDropdown
|
||||
<Modal show={props.showDropdown} size="sm">
|
||||
<ModalHeader style={{ color: "white", background: themeColor() }}>
|
||||
Dropdown options
|
||||
</ModalHeader>
|
||||
<Modal.Body>
|
||||
<div className="dropdownContainer">
|
||||
<label style={{ fontSize: "13px", fontWeight: "600" }}>Name</label>
|
||||
<input
|
||||
defaultValue={dropdownName}
|
||||
value={dropdownName}
|
||||
onChange={(e) => setDropdownName(e.target.value)}
|
||||
className="drodown-input"
|
||||
/>
|
||||
<label
|
||||
style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
|
||||
>
|
||||
Options
|
||||
</label>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap"
|
||||
}}
|
||||
>
|
||||
{dropdownOptionList.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
marginBottom: "5px"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="drodown-input"
|
||||
type="text"
|
||||
value={option}
|
||||
onChange={(e) => handleInputChange(index, e.target.value)}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="fa-solid fa-rectangle-xmark"
|
||||
onClick={() => handleDeleteInput(index)}
|
||||
style={{ color: "red", fontSize: "25px", marginLeft: "10px" }}
|
||||
></i>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<i
|
||||
onClick={handleAddInput}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
color: themeColor(),
|
||||
fontSize: "25px",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
className="fa-solid fa-square-plus"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<span style={{ fontSize: "13px", color: "red" }}>{error}</span>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<button
|
||||
onClick={() => props.setShowDropdown(false)}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSaveOption()}
|
||||
disabled={dropdownOptionList.length === 0 && true}
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
type="button"
|
||||
className={"finishBtn"}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default DropdownWidgetOption;
|
||||
@@ -0,0 +1,236 @@
|
||||
import React from "react";
|
||||
import BorderResize from "../component/borderResize";
|
||||
import PlaceholderBorder from "./placeholderBorder";
|
||||
import { Rnd } from "react-rnd";
|
||||
import { defaultWidthHeight } from "../../utils/Utils";
|
||||
import PlaceholderType from "./placeholderType";
|
||||
|
||||
function Placeholder(props) {
|
||||
const handlePlaceholderClick = () => {
|
||||
if (!props.data && !props.isDragging) {
|
||||
if (props.pos.type) {
|
||||
if (props.pos.type === "signature" || props.pos.type === "stamp") {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
} else if (props.pos.type === "dropdown") {
|
||||
props.setShowDropdown(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
}
|
||||
} else {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false);
|
||||
}
|
||||
} else if (props.isPlaceholder && props.pos.type) {
|
||||
if (props.pos.type === "dropdown") {
|
||||
props.setShowDropdown(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
!props.pos.type &&
|
||||
props.isNeedSign &&
|
||||
props.data.signerObjId === props.signerObjId
|
||||
) {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
} else if (
|
||||
(props.isNeedSign && props.pos.type === "signature") ||
|
||||
props.pos.type === "stamp"
|
||||
) {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
} else if (props.isNeedSign && props.pos.type === "dropdown") {
|
||||
props.setSignKey(props.pos.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Rnd
|
||||
// ref={nodeRef}
|
||||
key={props.pos.key}
|
||||
lockAspectRatio={
|
||||
props.pos.Width
|
||||
? props.pos.Width / props.pos.Height
|
||||
: defaultWidthHeight(props.pos.type).width /
|
||||
defaultWidthHeight(props.pos.type).height
|
||||
}
|
||||
enableResizing={{
|
||||
top: false,
|
||||
right: false,
|
||||
bottom: false,
|
||||
left: false,
|
||||
topRight: false,
|
||||
bottomRight:
|
||||
props.data && props.isNeedSign
|
||||
? props.data?.signerObjId === props.signerObjId
|
||||
? true
|
||||
: false
|
||||
: true,
|
||||
bottomLeft: false,
|
||||
topLeft: false
|
||||
}}
|
||||
bounds="parent"
|
||||
className="signYourselfBlock"
|
||||
style={{
|
||||
border: "1px solid #007bff",
|
||||
borderRadius: "2px",
|
||||
cursor:
|
||||
props.data && props.isNeedSign
|
||||
? props.data?.signerObjId === props.signerObjId
|
||||
? "pointer"
|
||||
: "not-allowed"
|
||||
: "all-scroll",
|
||||
zIndex: "1",
|
||||
background: props.data ? props.data.blockColor : "rgb(203 233 237)"
|
||||
}}
|
||||
onDrag={() => props.handleTabDrag && props.handleTabDrag(props.pos.key)}
|
||||
size={{
|
||||
width: props.posWidth(props.pos, props.isSignYourself),
|
||||
height: props.posHeight(props.pos, props.isSignYourself)
|
||||
}}
|
||||
onResizeStart={() => {
|
||||
props.setIsResize && props.setIsResize(true);
|
||||
}}
|
||||
onResizeStop={() => {
|
||||
props.setIsResize && props.setIsResize(false);
|
||||
}}
|
||||
disableDragging={props.isNeedSign || (props.isRecipient && true)}
|
||||
onDragStop={(event, dragElement) =>
|
||||
props.handleStop &&
|
||||
props.handleStop(event, dragElement, props.signerObjId, props.pos.key)
|
||||
}
|
||||
default={{
|
||||
x: props.xPos(props.pos, props.isSignYourself),
|
||||
y: props.yPos(props.pos, props.isSignYourself)
|
||||
}}
|
||||
onResize={(e, direction, ref, delta, position) => {
|
||||
props.handleSignYourselfImageResize &&
|
||||
props.handleSignYourselfImageResize(
|
||||
ref,
|
||||
props.pos.key,
|
||||
props.xyPostion,
|
||||
props.setXyPostion,
|
||||
props.index,
|
||||
props.data && props.data.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
onClick={() => handlePlaceholderClick()}
|
||||
>
|
||||
{props.isShowBorder ? (
|
||||
<BorderResize right={-12} top={-11} />
|
||||
) : props.data && props.isNeedSign ? (
|
||||
props.data?.signerObjId === props.signerObjId ? (
|
||||
<BorderResize />
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<BorderResize />
|
||||
)}
|
||||
|
||||
{props.isShowBorder && <PlaceholderBorder pos={props.pos} />}
|
||||
<div
|
||||
style={{
|
||||
left: props.xPos(props.pos, props.isSignYourself),
|
||||
top: props.yPos(props.pos, props.isSignYourself),
|
||||
width: props.posWidth(props.pos, props.isSignYourself),
|
||||
height: props.posHeight(props.pos, props.isSignYourself),
|
||||
zIndex: "10"
|
||||
}}
|
||||
onTouchEnd={(e) => handlePlaceholderClick()}
|
||||
>
|
||||
{props.isShowBorder && (
|
||||
<>
|
||||
{props.isPlaceholder && (
|
||||
<i
|
||||
data-tut="reactourLinkUser"
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
props.handleLinkUser(props.data.Id);
|
||||
props.setUniqueId(props.data.Id);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
props.handleLinkUser(props.data.Id);
|
||||
props.setUniqueId(props.data.Id);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
|
||||
<i
|
||||
className="fa-regular fa-copy signCopy"
|
||||
onClick={(e) => {
|
||||
if (props.data) {
|
||||
props.setSignerObjId(props.data.signerObjId);
|
||||
}
|
||||
e.stopPropagation();
|
||||
props.setIsPageCopy(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
if (props.data) {
|
||||
props.setSignerObjId(props.data.signerObjId);
|
||||
}
|
||||
e.stopPropagation();
|
||||
props.setIsPageCopy(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
className="fa-regular fa-circle-xmark signCloseBtn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (props.data) {
|
||||
props.handleDeleteSign(props.pos.key, props.data.signerObjId);
|
||||
} else {
|
||||
props.handleDeleteSign(props.pos.key);
|
||||
props.setIsStamp(false);
|
||||
}
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
if (props.data) {
|
||||
props.handleDeleteSign(props.pos.key, props.data.signerObjId);
|
||||
} else {
|
||||
props.handleDeleteSign(props.pos.key);
|
||||
props.setIsStamp(false);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
</>
|
||||
)}
|
||||
|
||||
<PlaceholderType
|
||||
pos={props.pos}
|
||||
xyPostion={props.xyPostion}
|
||||
index={props.index}
|
||||
setXyPostion={props.setXyPostion}
|
||||
data={props.data}
|
||||
setSignKey={props.setSignKey}
|
||||
isShowDropdown={props.isShowDropdown}
|
||||
isPlaceholder={props.isPlaceholder}
|
||||
signerObjId={props.signerObjId}
|
||||
handleUserName={props.handleUserName}
|
||||
/>
|
||||
</div>
|
||||
</Rnd>
|
||||
);
|
||||
}
|
||||
|
||||
export default Placeholder;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils";
|
||||
function PlaceholderBorder(props) {
|
||||
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
|
||||
const defaultWidth = defaultWidthHeight(props.pos.type).width;
|
||||
const defaultHeight = defaultWidthHeight(props.pos.type).height;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="borderResize"
|
||||
style={{
|
||||
borderColor: themeColor(),
|
||||
borderStyle: "dashed",
|
||||
|
||||
width: props.pos.Width
|
||||
? props.pos.Width + getResizeBorderExtraWidth
|
||||
: defaultWidth + getResizeBorderExtraWidth,
|
||||
height: props.pos.Height
|
||||
? props.pos.Height + getResizeBorderExtraWidth
|
||||
: defaultHeight + getResizeBorderExtraWidth,
|
||||
borderWidth: "0.2px",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlaceholderBorder;
|
||||
@@ -0,0 +1,165 @@
|
||||
import React, { useState } from "react";
|
||||
import { onChangeInput } from "../../utils/Utils";
|
||||
|
||||
function PlaceholderType(props) {
|
||||
const [selectOption, setSelectOption] = useState("");
|
||||
|
||||
switch (props.pos.type) {
|
||||
case "signature":
|
||||
return props.pos.SignUrl ? (
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
<img
|
||||
alt="signimg"
|
||||
src={props.pos.SignUrl}
|
||||
style={{
|
||||
width: "99%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<div>{props.pos.type}</div>
|
||||
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data.signerObjId, props?.data.Role)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case "stamp":
|
||||
return props.pos.SignUrl ? (
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
<img
|
||||
alt="signimg"
|
||||
src={props.pos.SignUrl}
|
||||
style={{
|
||||
width: "99%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<div>{props.pos.type}</div>
|
||||
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data?.signerObjId, props?.data?.Role)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<input
|
||||
className="inputPlaceholder"
|
||||
type="checkbox"
|
||||
disabled={props.isPlaceholder}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
e.target.checked,
|
||||
props.pos.key,
|
||||
props.xyPostion,
|
||||
props.index,
|
||||
props.setXyPostion,
|
||||
props.data && props.data.signerObjId,
|
||||
false
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
case "text":
|
||||
return (
|
||||
<input
|
||||
className="inputPlaceholder"
|
||||
type="text"
|
||||
disabled={props.isPlaceholder}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPostion,
|
||||
props.index,
|
||||
props.setXyPostion,
|
||||
props.data && props.data.signerObjId,
|
||||
false
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
case "dropdown":
|
||||
return !props.isPlaceholder ? (
|
||||
<select
|
||||
className="inputPlaceholder"
|
||||
id="myDropdown"
|
||||
value={selectOption}
|
||||
onChange={(e) => {
|
||||
setSelectOption(e.target.value);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPostion,
|
||||
props.index,
|
||||
props.setXyPostion,
|
||||
props.data && props.data.signerObjId,
|
||||
false
|
||||
);
|
||||
}}
|
||||
>
|
||||
{/* Default/Title option */}
|
||||
<option value="" disabled hidden>
|
||||
{props.pos.widgetName}
|
||||
</option>
|
||||
|
||||
{props.pos.widgetOption.map((data, ind) => {
|
||||
return <option value={data}>{data}</option>;
|
||||
})}
|
||||
</select>
|
||||
) : (
|
||||
<div className="inputPlaceholder">
|
||||
{props.pos.widgetName ? props.pos.widgetName : props.pos.type}
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return props.pos.SignUrl ? (
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
<img
|
||||
alt="signimg"
|
||||
src={props.pos.SignUrl}
|
||||
style={{
|
||||
width: "99%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data?.signerObjId, props?.data?.Role)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlaceholderType;
|
||||
@@ -1,6 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import ModalUi from "../../premitives/ModalUi";
|
||||
import RecipientList from "../../premitives/RecipientList";
|
||||
import { useDrag } from "react-dnd";
|
||||
import AllWidgets from "../WidgetComponent/allWidgets";
|
||||
import { widgets } from "../../utils/Utils";
|
||||
|
||||
function FieldsComponent({
|
||||
pdfUrl,
|
||||
@@ -39,9 +42,44 @@ function FieldsComponent({
|
||||
title
|
||||
}) {
|
||||
const [isSignersModal, setIsSignersModal] = useState(false);
|
||||
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
|
||||
|
||||
const [{ isDragDropdown }, dropdown] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 5,
|
||||
text: "dropdown"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragDropdown: !!monitor.isDragging()
|
||||
})
|
||||
});
|
||||
const [{ isDragCheck }, checkbox] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 6,
|
||||
text: "checkbox"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragCheck: !!monitor.isDragging()
|
||||
})
|
||||
});
|
||||
const [{ isDragText }, text] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 2,
|
||||
text: "text"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragText: !!monitor.isDragging()
|
||||
})
|
||||
});
|
||||
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const scrollContainerRef = useRef(null);
|
||||
const [widget, setWidget] = useState([]);
|
||||
|
||||
const color = [
|
||||
"#93a3db",
|
||||
@@ -57,13 +95,31 @@ function FieldsComponent({
|
||||
"#66ccff",
|
||||
"#ffffcc"
|
||||
];
|
||||
|
||||
const handleModal = () => {
|
||||
setIsSignersModal(!isSignersModal);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const widgetRef = [dragSignature, dragStamp, dropdown, checkbox, text];
|
||||
const getWidgetArray = widgets;
|
||||
const newUpdateSigner = getWidgetArray.map((obj, ind) => {
|
||||
return { ...obj, ref: widgetRef[ind] };
|
||||
});
|
||||
setWidget(newUpdateSigner);
|
||||
}, []);
|
||||
|
||||
const filterWidgets = widget.filter((data) => data.type !== "dropdown");
|
||||
const updateWidgets = isSignYourself ? filterWidgets : widget;
|
||||
|
||||
const handleScroll = (scrollOffset) => {
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollLeft += scrollOffset;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobile && isSignYourself ? (
|
||||
{isMobile ? (
|
||||
!isMailSend && (
|
||||
<div
|
||||
data-tut={dataTut}
|
||||
@@ -152,7 +208,7 @@ function FieldsComponent({
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
{/* <div
|
||||
data-tut={dataTut2}
|
||||
className="signLayoutContainer2"
|
||||
style={{ backgroundColor: themeColor() }}
|
||||
@@ -222,6 +278,107 @@ function FieldsComponent({
|
||||
Stamp
|
||||
</span>
|
||||
</div>
|
||||
</div> */}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
style={{
|
||||
overflowX: "scroll",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "10px",
|
||||
background: "white",
|
||||
borderTop: `2px solid ${themeColor()}`
|
||||
}}
|
||||
>
|
||||
<i
|
||||
style={{
|
||||
color: "rgb(140 142 149)",
|
||||
position: "fixed",
|
||||
left: "1%",
|
||||
bottom: "6%",
|
||||
fontSize: "23px"
|
||||
}}
|
||||
onClick={() => handleScroll(-100)}
|
||||
className="fa-solid fa-circle-chevron-left"
|
||||
></i>
|
||||
<div style={{ display: "flex" }}>
|
||||
{/* {updateWidgets.map((item, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
ref={(element) => {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
class="fa-sharp fa-solid fa-grip-vertical"
|
||||
style={{ color: "#908d8d", fontSize: "13px" }}
|
||||
></i>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
// padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
{item.type}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: themeColor(),
|
||||
padding: "0 5px",
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
style={{ color: "white", fontSize: item.iconSize }}
|
||||
className={item.icon}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})} */}
|
||||
<AllWidgets
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
signRef={signRef}
|
||||
marginLeft={5}
|
||||
/>
|
||||
</div>
|
||||
<i
|
||||
style={{
|
||||
color: "rgb(140 142 149)",
|
||||
position: "fixed",
|
||||
left: "95%",
|
||||
bottom: "6%",
|
||||
fontSize: "23px"
|
||||
}}
|
||||
onClick={() => handleScroll(100)}
|
||||
className="fa-solid fa-circle-chevron-right"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -237,7 +394,7 @@ function FieldsComponent({
|
||||
</div>
|
||||
|
||||
<div className="signLayoutContainer1">
|
||||
{pdfUrl ? (
|
||||
{/* {pdfUrl ? (
|
||||
<>
|
||||
<button className={signStyle} disabled={true}>
|
||||
<span
|
||||
@@ -291,8 +448,6 @@ function FieldsComponent({
|
||||
dragSignature(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
// const height = signRef && signRef.current.offsetHeight;
|
||||
// const width = signRef && signRef.current.offsetWidth;
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
@@ -319,17 +474,18 @@ function FieldsComponent({
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: themeColor()
|
||||
background: themeColor(),
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
ref={(element) => {
|
||||
dragStamp(element);
|
||||
dragRef.current = element;
|
||||
if (isDragStamp) {
|
||||
// setIsStamp(true);
|
||||
|
||||
}
|
||||
}}
|
||||
className={!pdfUrl ? signStyle : "disableSign"}
|
||||
@@ -364,7 +520,71 @@ function FieldsComponent({
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
)} */}
|
||||
{/* {updateWidgets.map((item, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
ref={(element) => {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
class="fa-sharp fa-solid fa-grip-vertical"
|
||||
style={{ color: "#908d8d", fontSize: "13px" }}
|
||||
></i>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
// padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
{item.type}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: themeColor(),
|
||||
padding: "0 5px",
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
style={{ color: "white", fontSize: item.iconSize }}
|
||||
className={item.icon}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})} */}
|
||||
<AllWidgets
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
signRef={signRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -66,7 +66,7 @@ function SignPad({
|
||||
|
||||
setIsSignImg("");
|
||||
} else if (isTab === "uploadImage") {
|
||||
setImage("");
|
||||
setImage("");
|
||||
}
|
||||
};
|
||||
//function for set signature url
|
||||
@@ -388,7 +388,8 @@ function SignPad({
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid black",
|
||||
border: "1.3px solid #007bff",
|
||||
borderRadius: "2px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
@@ -417,7 +418,8 @@ function SignPad({
|
||||
!image ? (
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid black",
|
||||
border: "1.3px solid #007bff",
|
||||
borderRadius: "2px",
|
||||
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
@@ -444,7 +446,8 @@ function SignPad({
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid black",
|
||||
border: "1.3px solid #007bff",
|
||||
borderRadius: "2px",
|
||||
marginBottom: 6,
|
||||
|
||||
overflow: "hidden"
|
||||
@@ -533,7 +536,11 @@ function SignPad({
|
||||
ref={canvasRef}
|
||||
penColor={penColor}
|
||||
canvasProps={{
|
||||
className: "signatureCanvas"
|
||||
className: "signatureCanvas",
|
||||
style: {
|
||||
border: "1.6px solid #007bff",
|
||||
borderRadius: "2px"
|
||||
}
|
||||
}}
|
||||
backgroundColor="rgb(255, 255, 255)"
|
||||
onEnd={() =>
|
||||
|
||||
@@ -31,6 +31,7 @@ import LinkUserModal from "./component/LinkUserModal";
|
||||
import Title from "./component/Title";
|
||||
import TourContentWithBtn from "../premitives/TourContentWithBtn";
|
||||
import ModalUi from "../premitives/ModalUi";
|
||||
import DropdownWidgetOption from "../Component/WidgetComponent/dropdownWidgetOption";
|
||||
|
||||
function PlaceHolderSign() {
|
||||
const navigate = useNavigate();
|
||||
@@ -84,6 +85,8 @@ function PlaceHolderSign() {
|
||||
const [signerExistModal, setSignerExistModal] = useState(false);
|
||||
const [isDontShow, setIsDontShow] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
@@ -111,7 +114,7 @@ function PlaceHolderSign() {
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 1,
|
||||
text: "drag me"
|
||||
text: "signature"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragSign: !!monitor.isDragging()
|
||||
@@ -122,7 +125,13 @@ function PlaceHolderSign() {
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 2,
|
||||
text: "drag me"
|
||||
text: "stamp"
|
||||
},
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 2,
|
||||
text: "stamp"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragStamp: !!monitor.isDragging()
|
||||
@@ -132,9 +141,8 @@ function PlaceHolderSign() {
|
||||
const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 3,
|
||||
text: "drag me"
|
||||
text: "signature"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragSignatureSS: !!monitor.isDragging()
|
||||
@@ -144,9 +152,8 @@ function PlaceHolderSign() {
|
||||
const [{ isDragStampSS }, dragStampSS] = useDrag({
|
||||
type: "BOX",
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 4,
|
||||
text: "drag me"
|
||||
text: "stamp"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragStampSS: !!monitor.isDragging()
|
||||
@@ -339,6 +346,7 @@ function PlaceHolderSign() {
|
||||
let placeHolder;
|
||||
if (item === "onclick") {
|
||||
const dropObj = {
|
||||
//onclick put placeholder center on pdf
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
yPosition: window.innerHeight / 2 - 60,
|
||||
isStamp: monitor,
|
||||
@@ -347,7 +355,8 @@ function PlaceHolderSign() {
|
||||
scale: scale,
|
||||
isMobile: isMobile,
|
||||
yBottom: window.innerHeight / 2 - 60,
|
||||
zIndex: posZIndex
|
||||
zIndex: posZIndex,
|
||||
type: item.text
|
||||
};
|
||||
dropData.push(dropObj);
|
||||
placeHolder = {
|
||||
@@ -375,7 +384,8 @@ function PlaceHolderSign() {
|
||||
yBottom: ybottom,
|
||||
scale: scale,
|
||||
isMobile: isMobile,
|
||||
zIndex: posZIndex
|
||||
zIndex: posZIndex,
|
||||
type: item.text
|
||||
};
|
||||
|
||||
dropData.push(dropObj);
|
||||
@@ -642,7 +652,6 @@ function PlaceHolderSign() {
|
||||
setIsSendAlert(alert);
|
||||
}
|
||||
};
|
||||
|
||||
const sendEmailToSigners = async () => {
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
@@ -682,7 +691,7 @@ function PlaceHolderSign() {
|
||||
|
||||
const hostUrl = window.location.origin + "/loadmf/signmicroapp";
|
||||
let signPdf = `${hostUrl}/login/${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`;
|
||||
const openSignUrl = "https://www.opensignlabs.com/contact-us";
|
||||
const openSignUrl = "https://www.opensignlabs.com/";
|
||||
const orgName = pdfDetails[0]?.ExtUserPtr.Company
|
||||
? pdfDetails[0].ExtUserPtr.Company
|
||||
: "";
|
||||
@@ -787,12 +796,11 @@ function PlaceHolderSign() {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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"]',
|
||||
@@ -851,6 +859,55 @@ function PlaceHolderSign() {
|
||||
}
|
||||
];
|
||||
|
||||
const handleSaveDropdownOptions = (dropdownName, dropdownOptions) => {
|
||||
//get current signers placeholder position data
|
||||
const currentSigner = signerPos.filter(
|
||||
(data) => data.signerObjId === signerObjId
|
||||
);
|
||||
//get current pagenumber placeholder index
|
||||
const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
|
||||
return object.pageNumber === pageNumber;
|
||||
});
|
||||
|
||||
const placeholderPosition = currentSigner[0].placeHolder;
|
||||
//function of save signature image and get updated position with signature image url
|
||||
|
||||
let getXYdata = placeholderPosition[getIndex].pos;
|
||||
const updateXYData = getXYdata.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
return {
|
||||
...position,
|
||||
widgetName: dropdownName,
|
||||
widgetOption: dropdownOptions
|
||||
};
|
||||
}
|
||||
return position;
|
||||
});
|
||||
|
||||
const getUpdatePosition = placeholderPosition.map((obj, ind) => {
|
||||
if (ind === getIndex) {
|
||||
return { ...obj, pos: updateXYData };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
|
||||
const updateSignerData = currentSigner.map((obj, ind) => {
|
||||
if (obj.signerObjId === signerObjId) {
|
||||
return { ...obj, placeHolder: getUpdatePosition };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
|
||||
const index = signerPos.findIndex(
|
||||
(data) => data.signerObjId === signerObjId
|
||||
);
|
||||
setSignerPos((prevState) => {
|
||||
const newState = [...prevState];
|
||||
newState.splice(index, 1, ...updateSignerData);
|
||||
return newState;
|
||||
});
|
||||
};
|
||||
|
||||
//function for update TourStatus
|
||||
const closeTour = async () => {
|
||||
setPlaceholderTour(false);
|
||||
@@ -925,7 +982,6 @@ function PlaceHolderSign() {
|
||||
}
|
||||
return { ...x };
|
||||
});
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
if (updateSigner && updateSigner.length > 0) {
|
||||
const currEmail = pdfDetails[0].ExtUserPtr.Email;
|
||||
const getCurrentUserDeatils = updateSigner.filter(
|
||||
@@ -935,6 +991,7 @@ function PlaceHolderSign() {
|
||||
setCurrentId(getCurrentUserDeatils[0].Email);
|
||||
}
|
||||
}
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
|
||||
setSignersData(updateSigner);
|
||||
const index = signersdata.findIndex((x) => x.Id === uniqueId);
|
||||
@@ -1027,7 +1084,7 @@ function PlaceHolderSign() {
|
||||
|
||||
{isSendAlert.mssg === "confirm" && (
|
||||
<button
|
||||
onClick={() => sendEmailToSigners()}
|
||||
// onClick={() => sendEmailToSigners()}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
@@ -1154,6 +1211,11 @@ function PlaceHolderSign() {
|
||||
// signerObjId={signerObjId}
|
||||
Id={uniqueId}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
showDropdown={showDropdown}
|
||||
setShowDropdown={setShowDropdown}
|
||||
handleSaveDropdownOptions={handleSaveDropdownOptions}
|
||||
/>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
isPlaceholder={true}
|
||||
@@ -1198,6 +1260,7 @@ function PlaceHolderSign() {
|
||||
handleLinkUser={handleLinkUser}
|
||||
setUniqueId={setUniqueId}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -1221,7 +1284,7 @@ function PlaceHolderSign() {
|
||||
dragStamp={dragStamp}
|
||||
dragRef={dragRef}
|
||||
isDragStamp={isDragStamp}
|
||||
isSignYourself={true}
|
||||
isSignYourself={false}
|
||||
isDragSignatureSS={isDragSignatureSS}
|
||||
dragSignatureSS={dragSignatureSS}
|
||||
dragStampSS={dragStampSS}
|
||||
@@ -1309,7 +1372,6 @@ function PlaceHolderSign() {
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
|
||||
<LinkUserModal
|
||||
handleAddUser={handleAddUser}
|
||||
isAddUser={isAddUser}
|
||||
|
||||
Reference in New Issue
Block a user