diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 5e4f05de6..c18be304f 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -1,8 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import { PDFDocument } from "pdf-lib"; import "../css/./signature.css"; -import sign from "../assests/sign3.png"; -import stamp from "../assests/stamp2.png"; import { themeColor } from "../utils/ThemeColor/backColor"; import axios from "axios"; import Loader from "./component/loader"; @@ -87,6 +85,7 @@ function SignYourSelf() { }); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const [isDontShow, setIsDontShow] = useState(false); + const [initial, setInitial] = useState(""); const divRef = useRef(null); const nodeRef = useRef(null); const [{ isOver }, drop] = useDrop({ @@ -171,17 +170,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"); + localStorage.setItem("accesstoken", "r:17de3495dd207dc88677da7f9f9e4d6b"); + 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":"5645676534","username":"raktimachaurasiya@gmail.com","emailVerified":false,"createdAt":"2024-01-10T14:40:59.326Z","updatedAt":"2024-01-10T14:40:59.326Z","ACL":{"9MUdPyX2ae":{"read":true,"write":true}},"sessionToken":"r:17de3495dd207dc88677da7f9f9e4d6b","__type":"Object","className":"_User","objectId":"9MUdPyX2ae"}' + ); + localStorage.setItem("_appName", "contracts"); if (documentId) { getDocumentDetails(true); } @@ -255,9 +254,9 @@ function SignYourSelf() { .then((Listdata) => { const json = Listdata.data; const res = json.results; - if (res[0] && res.length > 0) { setDefaultSignImg(res[0].ImageURL); + setInitial(res[0]?.Initials); } }) .catch((err) => { @@ -322,6 +321,28 @@ function SignYourSelf() { } }; + //calculate width and height + const calculateWidthHeight = (type) => { + const intialText = + type === "name" + ? pdfDetails[0].ExtUserPtr.Name + : type === "company" + ? pdfDetails[0].ExtUserPtr.Company + : type === "job title" && pdfDetails[0].ExtUserPtr.JobTitle; + const span = document.createElement("span"); + span.textContent = intialText; + span.style.font = `14px`; // here put your text size and font family + span.style.display = "hidden"; + document.body.appendChild(span); + const width = span.offsetWidth; + const height = span.offsetHeight; + + document.body.removeChild(span); + return { + getWidth: width, + getHeight: height + }; + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { const key = Math.floor(1000 + Math.random() * 9000); @@ -330,6 +351,7 @@ function SignYourSelf() { let filterDropPos = xyPostion.filter( (data) => data.pageNumber === pageNumber ); + if (item === "onclick") { dropObj = { xPosition: window.innerWidth / 2 - 100, @@ -338,7 +360,8 @@ function SignYourSelf() { key: key, isStamp: monitor, type: item.text, - yBottom: window.innerHeight / 2 - 60 + yBottom: window.innerHeight / 2 - 60, + SignUrl: item.text === "initials" && initial }; dropData.push(dropObj); @@ -368,7 +391,28 @@ function SignYourSelf() { firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, yBottom: ybottom, - type: item.text + type: item.text, + SignUrl: item.text === "initials" && initial, + widgetValue: + item.text === "name" + ? pdfDetails[0].ExtUserPtr.Name + : item.text === "company" + ? pdfDetails[0].ExtUserPtr.Company + : item.text === "job title" + ? pdfDetails[0].ExtUserPtr.JobTitle + : "", + Width: + item.text === "name" || + item.text === "company" || + item.text === "job title" + ? calculateWidthHeight(item.text).getWidth + : "", + Height: + item.text === "company" || + item.text === "name" || + item.text === "job title" + ? calculateWidthHeight(item.text).getHeight + : "" }; dropData.push(dropObj); @@ -468,7 +512,7 @@ function SignYourSelf() { containerWH ); - console.log("pdf", pdfBytes); + // console.log("pdf", pdfBytes); //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); @@ -514,7 +558,7 @@ function SignYourSelf() { }; //function for set and update x and y postion after drag and drop signature tab - const handleStop = (event, dragElement) => { + const handleStop = (event, dragElement, type) => { if (isDragging && dragElement) { event.preventDefault(); const containerRect = document @@ -533,13 +577,24 @@ function SignYourSelf() { const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === dragKey) { - return { - ...url, - xPosition: dragElement.x, - yPosition: dragElement.y, - isDrag: true, - yBottom: ybottom - }; + if (type === "initials") { + return { + ...url, + xPosition: dragElement.x, + yPosition: dragElement.y, + isDrag: true, + yBottom: ybottom, + SignUrl: initial + }; + } else { + return { + ...url, + xPosition: dragElement.x, + yPosition: dragElement.y, + isDrag: true, + yBottom: ybottom + }; + } } return url; }); @@ -954,8 +1009,6 @@ function SignYourSelf() { ) : ( diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 07762c8d7..f41b5d454 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -3,8 +3,6 @@ import RenderAllPdfPage from "./component/renderAllPdfPage"; import { useParams, useNavigate } from "react-router-dom"; import axios from "axios"; import "../css/./signature.css"; -import sign from "../assests/sign3.png"; -import stamp from "../assests/stamp2.png"; import { themeColor } from "../utils/ThemeColor/backColor"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; @@ -637,7 +635,7 @@ const TemplatePlaceholder = () => { if (signerPos.length !== signersdata.length) { setIsSendAlert(true); } else { - handleSaveTemplate(); + // handleSaveTemplate(); } }; const handleSaveTemplate = async () => { @@ -1149,8 +1147,6 @@ const TemplatePlaceholder = () => { dataTut="reactourFirst" dataTut2="reactourSecond" pdfUrl={isMailSend} - sign={sign} - stamp={stamp} dragSignature={dragSignature} signRef={signRef} handleDivClick={handleDivClick} @@ -1206,8 +1202,6 @@ const TemplatePlaceholder = () => {
{ return (
- {/*
- - - {item.type} - -
-
- -
*/} - {getWidgetType(item)} + {item.ref && getWidgetType(item, props?.marginLeft)}
); }); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index adf770299..d60a66c28 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import BorderResize from "../component/borderResize"; import PlaceholderBorder from "./placeholderBorder"; import { Rnd } from "react-rnd"; @@ -6,7 +6,13 @@ import { defaultWidthHeight } from "../../utils/Utils"; import PlaceholderType from "./placeholderType"; function Placeholder(props) { + const [isDraggingEnabled, setDraggingEnabled] = useState(true); + const handlePlaceholderClick = () => { + if (props.pos.type === "text") { + setDraggingEnabled(false); + } + if (!props.data && !props.isDragging) { if (props.pos.type) { if (props.pos.type === "signature" || props.pos.type === "stamp") { @@ -79,6 +85,11 @@ function Placeholder(props) { style={{ border: "1px solid #007bff", borderRadius: "2px", + textAlign: + props.pos.type !== "name" && + props.pos.type !== "company" && + props.pos.type !== "job title" && + "center", cursor: props.data && props.isNeedSign ? props.data?.signerObjId === props.signerObjId @@ -88,18 +99,23 @@ function Placeholder(props) { zIndex: "1", background: props.data ? props.data.blockColor : "rgb(203 233 237)" }} - onDrag={() => props.handleTabDrag && props.handleTabDrag(props.pos.key)} + onDrag={() => { + setDraggingEnabled(true); + props.handleTabDrag && props.handleTabDrag(props.pos.key); + }} size={{ width: props.posWidth(props.pos, props.isSignYourself), height: props.posHeight(props.pos, props.isSignYourself) }} onResizeStart={() => { + setDraggingEnabled(true); props.setIsResize && props.setIsResize(true); }} onResizeStop={() => { props.setIsResize && props.setIsResize(false); }} - disableDragging={props.isNeedSign || (props.isRecipient && true)} + disableDragging={!isDraggingEnabled} + // disableDragging={props.isNeedSign || (props.isRecipient && true)} onDragStop={(event, dragElement) => props.handleStop && props.handleStop(event, dragElement, props.signerObjId, props.pos.key) @@ -227,6 +243,8 @@ function Placeholder(props) { isPlaceholder={props.isPlaceholder} signerObjId={props.signerObjId} handleUserName={props.handleUserName} + setDraggingEnabled={setDraggingEnabled} + pdfDetails={props.pdfDetails} />
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 6c8c401ef..1f102ba60 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -4,20 +4,21 @@ import { onChangeInput } from "../../utils/Utils"; function PlaceholderType(props) { const [selectOption, setSelectOption] = useState(""); + const handleInputBlur = () => { + props.setDraggingEnabled(true); + }; switch (props.pos.type) { case "signature": return props.pos.SignUrl ? ( -
- signimg -
+ signimg ) : (
- signimg -
+ signimg ) : (
onChangeInput( e.target.checked, @@ -85,7 +86,9 @@ function PlaceholderType(props) { onChangeInput( e.target.value, @@ -132,7 +135,72 @@ function PlaceholderType(props) { {props.pos.widgetName ? props.pos.widgetName : props.pos.type}
); - + case "initials": + return ( + signimg + ); + case "name": + return ( +
+ {props.pos.widgetValue} +
+ ); + case "company": + return ( +
+
{props.pos.widgetValue}
+
+ ); + case "job title": + return ( +
+
{props.pos.widgetValue}
+
+ ); + case "date": + return ( + + onChangeInput( + e.target.value, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false + ) + } + /> + ); default: return props.pos.SignUrl ? (
diff --git a/microfrontends/SignDocuments/src/Component/component/DragElement.js b/microfrontends/SignDocuments/src/Component/component/DragElement.js index 89568b3ca..978cc01a8 100644 --- a/microfrontends/SignDocuments/src/Component/component/DragElement.js +++ b/microfrontends/SignDocuments/src/Component/component/DragElement.js @@ -1,58 +1,13 @@ import React from "react"; -import stamp from "../../assests/stamp2.png"; -import sign from "../../assests/sign3.png"; -import { themeColor } from "../../utils/ThemeColor/backColor"; +import { getWidgetType, widgets } from "../../utils/Utils"; -function DragElement({ type, id }) { - const selectedId = id; - - return ( -
- {selectedId === 3 ? ( -
- sign img - - Signature - -
- ) : ( -
- stamp img - Stamp -
- )} -
+function DragElement(item) { + const getWidgets = widgets; + const filterWidgetPreview = getWidgets.filter( + (data) => data.type === item?.text ); + + return
{getWidgetType(filterWidgetPreview[0])}
; } export default DragElement; diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index bc2efa951..bb4f8621a 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -7,8 +7,6 @@ import { widgets } from "../../utils/Utils"; function FieldsComponent({ pdfUrl, - sign, - stamp, dragSignature, signRef, handleDivClick, @@ -39,7 +37,8 @@ function FieldsComponent({ signerPos, handleRoleChange, handleOnBlur, - title + title, + initial }) { const [isSignersModal, setIsSignersModal] = useState(false); @@ -69,14 +68,69 @@ function FieldsComponent({ type: "BOX", item: { type: "BOX", - id: 2, + id: 7, text: "text" }, collect: (monitor) => ({ isDragText: !!monitor.isDragging() }) }); - const signStyle = pdfUrl ? "disableSign" : "signatureBtn"; + const [{ isDragInitial }, initials] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 8, + text: "initials" + }, + collect: (monitor) => ({ + isDragInitial: !!monitor.isDragging() + }) + }); + const [{ isDragName }, name] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 9, + text: "name" + }, + collect: (monitor) => ({ + isDragName: !!monitor.isDragging() + }) + }); + const [{ isDragCompany }, company] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 10, + text: "company" + }, + collect: (monitor) => ({ + isDragCompany: !!monitor.isDragging() + }) + }); + const [{ isDragJobtitle }, jobTitle] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 11, + text: "job title" + }, + collect: (monitor) => ({ + isDragJobtitle: !!monitor.isDragging() + }) + }); + const [{ isDragDate }, date] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 11, + text: "date" + }, + collect: (monitor) => ({ + isDragDate: !!monitor.isDragging() + }) + }); + const isMobile = window.innerWidth < 767; const scrollContainerRef = useRef(null); const [widget, setWidget] = useState([]); @@ -100,12 +154,27 @@ function FieldsComponent({ }; useEffect(() => { - const widgetRef = [dragSignature, dragStamp, dropdown, checkbox, text]; + const widgetRef = [ + dragSignature, + dragStamp, + dropdown, + checkbox, + text, + initials, + name, + company, + jobTitle, + date + ]; const getWidgetArray = widgets; const newUpdateSigner = getWidgetArray.map((obj, ind) => { return { ...obj, ref: widgetRef[ind] }; }); - setWidget(newUpdateSigner); + const removeInitial = newUpdateSigner.filter( + (widgetData) => widgetData.type !== "initials" + ); + + setWidget(initial ? newUpdateSigner : removeInitial); }, []); const filterWidgets = widget.filter((data) => data.type !== "dropdown"); @@ -294,7 +363,7 @@ function FieldsComponent({ color: "rgb(140 142 149)", position: "fixed", left: "1%", - bottom: "6%", + bottom: "3%", fontSize: "23px" }} onClick={() => handleScroll(-100)} @@ -372,8 +441,8 @@ function FieldsComponent({ style={{ color: "rgb(140 142 149)", position: "fixed", - left: "95%", - bottom: "6%", + left: "93%", + bottom: "3%", fontSize: "23px" }} onClick={() => handleScroll(100)} diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 1a47969e9..78e0eed33 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -104,7 +104,6 @@ function RenderPdf({ } }; const posHeight = (pos, signYourself) => { - // console.log("signyourself",pos) let height; const posHeight = pos.Height; const defaultHeight = defaultWidthHeight(pos.type).height; @@ -964,6 +963,7 @@ function RenderPdf({ yPos={yPos} posWidth={posWidth} posHeight={posHeight} + pdfDetails={pdfDetails[0]} /> ) ); @@ -1468,7 +1468,9 @@ function RenderPdf({ handleDeleteSign={handleDeleteSign} setIsStamp={setIsStamp} handleTabDrag={handleTabDrag} - handleStop={handleStop} + handleStop={(event, dragElement) => + handleStop(event, dragElement, pos.type) + } handleSignYourselfImageResize={ handleSignYourselfImageResize } @@ -1484,6 +1486,7 @@ function RenderPdf({ yPos={yPos} posWidth={posWidth} posHeight={posHeight} + pdfDetails={pdfDetails[0]} /> ) ); diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 450f46509..c1034ce06 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -1,8 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import axios from "axios"; import "../css/./signature.css"; -import sign from "../assests/sign3.png"; -import stamp from "../assests/stamp2.png"; import { themeColor } from "../utils/ThemeColor/backColor"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; @@ -1273,8 +1271,6 @@ function PlaceHolderSign() { dataTut="reactourFirst" dataTut2="reactourSecond" pdfUrl={isMailSend} - sign={sign} - stamp={stamp} dragSignature={dragSignature} signRef={signRef} handleDivClick={handleDivClick} @@ -1321,8 +1317,6 @@ function PlaceHolderSign() {
{ const isSigners = xyPostion.some((data) => data.signerPtr); - console.log("isSigner", isSigners); + if (isSigners) { const filterSignerPos = xyPostion.filter( (data) => data.signerObjId === signerObjId @@ -76,8 +76,8 @@ export const onChangeInput = ( export const widgets = [ { type: "signature", - icon: "fa-solid fa-signature", - iconSize: "16px" + icon: "fa-solid fa-pen-nib", + iconSize: "20px" }, { type: "stamp", @@ -92,53 +92,88 @@ export const widgets = [ { type: "checkbox", icon: "fa-solid fa-square-check", - iconSize: "21px" + iconSize: "22px" }, { type: "text", icon: "fa-solid fa-font", iconSize: "21px" + }, + { + type: "initials", + icon: "fa-solid fa-signature", + iconSize: "15px" + }, + { + type: "name", + icon: "fa-solid fa-user", + iconSize: "21px" + }, + { + type: "company", + icon: "fa-solid fa-building", + iconSize: "24px" + }, + { + type: "job title", + icon: "fa-solid fa-address-card", + iconSize: "16px" + }, + { + type: "date", + icon: "fa-solid fa-calendar-days", + iconSize: "19px" } ]; -export const getWidgetType = (item) => { +export const getWidgetType = (item, marginLeft) => { return ( <>
- - - {item.type} - -
-
- + + + {item.type} + +
+
+ +
); @@ -178,6 +213,37 @@ export const defaultWidthHeight = (type) => { height: 22 }; return obj; + case "initials": + obj = { + width: 150, + height: 60 + }; + return obj; + case "name": + obj = { + width: 150, + height: 25 + }; + return obj; + + case "company": + obj = { + width: 150, + height: 25 + }; + return obj; + case "job title": + obj = { + width: 150, + height: 25 + }; + return obj; + case "date": + obj = { + width: 100, + height: 20 + }; + return obj; default: obj = { width: 150, @@ -704,7 +770,11 @@ export const multiSignEmbed = async ( imgUrlList.forEach(async (imgData, id) => { let img; - if (imgData.type === "signature" || imgData.type === "stamp") { + if ( + imgData.type === "signature" || + imgData.type === "stamp" || + imgData.type === "initials" + ) { if ( (imgData.ImageType && imgData.ImageType === "image/png") || imgData.ImageType === "image/jpeg" @@ -800,13 +870,19 @@ export const multiSignEmbed = async ( }); checkBox.check(); checkBox.enableReadOnly(); - } else if (imgData.type === "text") { + } else if ( + imgData.type === "text" || + imgData.type === "name" || + imgData.type === "company" || + imgData.type === "job title" || + imgData.type === "date" + ) { const font = await pdfDoc.embedFont("Helvetica"); const fontSize = 12; const textContent = imgData.widgetValue; page.drawText(textContent, { x: xPos(imgData), - y: yPos(imgData), + y: yPos(imgData) + 10, size: fontSize, font, color: rgb(0, 0, 0)