diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 901c37a3f..2b23e9384 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -79,6 +79,7 @@ function PdfRequestFiles() { const [isExpired, setIsExpired] = useState(false); const [alreadySign, setAlreadySign] = useState(false); const [containerWH, setContainerWH] = useState({}); + const [initial, setInitial] = useState(""); const divRef = useRef(null); const isMobile = window.innerWidth < 767; const rowLevel = @@ -268,6 +269,7 @@ function PdfRequestFiles() { if (res[0] && res.length > 0) { setDefaultSignImg(res[0].ImageURL); + setInitial(res[0]?.Initials); } const loadObj = { isLoad: false @@ -289,18 +291,23 @@ function PdfRequestFiles() { (data) => data.signerObjId === signerObjectId ); if (checkUser && checkUser.length > 0) { - let checkSignUrl = []; - const checkSign = checkUser[0].placeHolder.filter( - (data, ind) => data.pos - ); - for (let i = 0; i < checkSign.length; i++) { - const posData = checkSign[i].pos.filter((pos) => !pos.SignUrl); - if (posData && posData.length > 0) { - checkSignUrl.push(posData); - } + let checkSigned = 0; + let allXyPos = 0; + + for (let i = 0; i < checkUser[0].placeHolder.length; i++) { + const posSignUrlData = checkUser[0].placeHolder[i].pos.filter( + (pos) => pos.SignUrl + ); + const posWidgetData = checkUser[0].placeHolder[i].pos.filter( + (pos) => pos.widgetValue + ); + + checkSigned = + checkSigned + posSignUrlData.length + posWidgetData.length; + allXyPos = allXyPos + checkUser[0].placeHolder[i].pos.length; } - if (checkSignUrl && checkSignUrl.length > 0) { + if (allXyPos !== checkSigned) { setIsAlert({ isShow: true, alertMessage: "Please complete your signature!" @@ -315,93 +322,7 @@ function PdfRequestFiles() { const pdfDoc = await PDFDocument.load(existingPdfBytes, { ignoreEncryption: true }); - // let pdfBase64; - //checking if signature is only one then send image url in jpeg formate to server - // if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) { - // if (isDocId) { - // try { - // pdfBase64 = await getBase64FromUrl(pdfUrl); - // } catch (err) { - // console.log(err); - // } - // } else { - // //embed document's object id to all pages in pdf document - // try { - // await embedDocId(pdfDoc, documentId, allPages); - // } catch (err) { - // console.log(err); - // } - // try { - // pdfBase64 = await pdfDoc.saveAsBase64({ - // useObjectStreams: false - // }); - // } catch (err) { - // console.log(err); - // } - // } - // for (let pngData of pngUrl) { - // const imgUrlList = pngData.pos; - // const pageNo = pngData.pageNumber; - // imgUrlList.map(async (data) => { - // //cheking signUrl is defau;t signature url of custom url - // let ImgUrl = data.SignUrl; - // const checkUrl = urlValidator(ImgUrl); - // //if default signature url then convert it in base 64 - // if (checkUrl) { - // ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); - // } - // //function for called convert png signatre to jpeg in base 64 - // convertPNGtoJPEG(ImgUrl) - // .then((jpegBase64Data) => { - // const removeBase64Fromjpeg = "data:image/jpeg;base64,"; - // const newImgUrl = jpegBase64Data.replace( - // removeBase64Fromjpeg, - // "" - // ); - - // //function for call to embed signature in pdf and get digital signature pdf - // signPdfFun( - // newImgUrl, - // documentId, - // signerObjectId, - // pdfOriginalWidth, - // pngUrl, - // containerWH, - // setIsAlert, - // data, - // pdfBase64, - // pageNo - // ) - // .then((res) => { - // if (res && res.status === "success") { - // setPdfUrl(res.data); - // setIsSigned(true); - // setSignedSigners([]); - // setUnSignedSigners([]); - // getDocumentDetails(); - // } else { - // setIsAlert({ - // isShow: true, - // alertMessage: "something went wrong" - // }); - // } - // }) - // .catch((err) => { - // setIsAlert({ - // isShow: true, - // alertMessage: "something went wrong" - // }); - // }); - // }) - // .catch((error) => { - // console.error("Error:", error); - // }); - // }); - // } - // } - // //else if signature is more than one then embed all sign with the use of pdf-lib - // else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) { const flag = false; //embed document's object id to all pages in pdf document if (!isDocId) { @@ -415,6 +336,7 @@ function PdfRequestFiles() { flag, containerWH ); + //function for call to embed signature in pdf and get digital signature pdf try { const res = await signPdfFun( @@ -922,6 +844,7 @@ function PdfRequestFiles() { pdfLoadFail={pdfLoadFail} setSignerPos={setSignerPos} containerWH={containerWH} + initial={initial} /> )} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 0e69563c6..2dfc58da9 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -17,7 +17,8 @@ import { multiSignEmbed, pdfNewWidthFun, addDefaultSignatureImg, - onImageSelect + onImageSelect, + calculateInitialWidthHeight } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -321,28 +322,6 @@ 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); @@ -357,11 +336,31 @@ function SignYourSelf() { xPosition: window.innerWidth / 2 - 100, yPosition: window.innerHeight / 2 - 60, isDrag: false, + isStamp: monitor.type === "stamp" && true, key: key, - isStamp: monitor, - type: item.text, + type: monitor.type, yBottom: window.innerHeight / 2 - 60, - SignUrl: item.text === "initials" && initial + SignUrl: monitor.type === "initials" && initial, + widgetValue: + monitor.type === "name" + ? pdfDetails[0].ExtUserPtr.Name + : monitor.type === "company" + ? pdfDetails[0].ExtUserPtr.Company + : monitor.type === "job title" + ? pdfDetails[0].ExtUserPtr.JobTitle + : "", + Width: + monitor.type === "name" || + monitor.type === "company" || + monitor.type === "job title" + ? calculateInitialWidthHeight(monitor.type, pdfDetails[0]).getWidth + : "", + Height: + monitor.type === "company" || + monitor.type === "name" || + monitor.type === "job title" + ? calculateInitialWidthHeight(monitor.type, pdfDetails[0]).getHeight + : "" }; dropData.push(dropObj); @@ -386,8 +385,8 @@ function SignYourSelf() { xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, isDrag: false, + isStamp: item.text === "stamp" && true, key: key, - isStamp: isDragStamp || isDragStampSS ? true : false, firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, yBottom: ybottom, @@ -405,13 +404,13 @@ function SignYourSelf() { item.text === "name" || item.text === "company" || item.text === "job title" - ? calculateWidthHeight(item.text).getWidth + ? calculateInitialWidthHeight(item.text, pdfDetails[0]).getWidth : "", Height: item.text === "company" || item.text === "name" || item.text === "job title" - ? calculateWidthHeight(item.text).getHeight + ? calculateInitialWidthHeight(item.text, pdfDetails[0]).getHeight : "" }; @@ -449,78 +448,79 @@ function SignYourSelf() { }; setXyPostion((prev) => [...prev, xyPos]); - if (isDragSign || isDragSignatureSS) { + if (isDragSign || isDragSignatureSS || isDragStamp || isDragStampSS) { setIsSignPad(true); setSignKey(key); } } - - // setXyPostion((prev) => [...prev, xyPos]); }; //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url async function embedImages() { - let checkSignUrl = []; + let checkSigned = 0; + let allXyPos = 0; for (let i = 0; i < xyPostion.length; i++) { - const posData = xyPostion[i].pos.filter((pos) => !pos.SignUrl); - if (posData && posData.length > 0) { - checkSignUrl.push(posData); - } + const posSignUrlData = xyPostion[i].pos.filter((pos) => pos.SignUrl); + const posWidgetData = xyPostion[i].pos.filter((pos) => pos.widgetValue); + + checkSigned = checkSigned + posSignUrlData.length + posWidgetData.length; + allXyPos = allXyPos + xyPostion[i].pos.length; } - // 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 && allXyPos !== checkSigned) { + 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 + ); - // console.log("pdf", pdfBytes); - //function for call to embed signature in pdf and get digital signature pdf - signPdfFun(pdfBytes, documentId); + //function for call to embed signature in pdf and get digital signature pdf + signPdfFun(pdfBytes, documentId); - setIsSignPad(false); - setIsEmail(true); - setXyPostion([]); - setSignBtnPosition([]); - // } + setIsSignPad(false); + setIsEmail(true); + setXyPostion([]); + setSignBtnPosition([]); + } } //function for get digital signature diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js index 4fd96e06c..3974f0270 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js @@ -6,6 +6,10 @@ function AllWidgets(props) { return (
+ props.addPositionOfSignature && + props.addPositionOfSignature("onclick", item) + } ref={(element) => { item.ref(element); if (element) { diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index d60a66c28..bce9dd82d 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -8,20 +8,20 @@ import PlaceholderType from "./placeholderType"; function Placeholder(props) { const [isDraggingEnabled, setDraggingEnabled] = useState(true); + //onclick placeholder function to open signature pad const handlePlaceholderClick = () => { - if (props.pos.type === "text") { + if (props.pos.type === "text" || props.pos.type === "checkbox") { setDraggingEnabled(false); } - - if (!props.data && !props.isDragging) { + if (props.isNeedSign && !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 if (props.pos.type === "dropdown" && !props.isNeedSign) { + props?.setShowDropdown(true); + props?.setSignKey(props.pos.key); } } else { props.setIsSignPad(true); @@ -33,7 +33,7 @@ function Placeholder(props) { props.setShowDropdown(true); props.setSignKey(props.pos.key); } - } else { + } else if (!props.pos.type) { if ( !props.pos.type && props.isNeedSign && @@ -209,8 +209,9 @@ function Placeholder(props) { className="fa-regular fa-circle-xmark signCloseBtn" onClick={(e) => { e.stopPropagation(); + if (props.data) { - props.handleDeleteSign(props.pos.key, props.data.signerObjId); + props.handleDeleteSign(props.pos.key, props.data.Id); } else { props.handleDeleteSign(props.pos.key); props.setIsStamp(false); @@ -219,7 +220,7 @@ function Placeholder(props) { onTouchEnd={(e) => { e.stopPropagation(); if (props.data) { - props.handleDeleteSign(props.pos.key, props.data.signerObjId); + props.handleDeleteSign(props.pos.key, props.data.Id); } else { props.handleDeleteSign(props.pos.key); props.setIsStamp(false); @@ -239,12 +240,14 @@ function Placeholder(props) { setXyPostion={props.setXyPostion} data={props.data} setSignKey={props.setSignKey} - isShowDropdown={props.isShowDropdown} + isShowDropdown={props?.isShowDropdown} isPlaceholder={props.isPlaceholder} signerObjId={props.signerObjId} handleUserName={props.handleUserName} setDraggingEnabled={setDraggingEnabled} - pdfDetails={props.pdfDetails} + pdfDetails={props?.pdfDetails && props?.pdfDetails[0]} + isNeedSign={props.isNeedSign} + initial={props.initial} />
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 1f102ba60..4852a6a8f 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -1,12 +1,26 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { onChangeInput } from "../../utils/Utils"; function PlaceholderType(props) { const [selectOption, setSelectOption] = useState(""); - + const type = props.pos.type; const handleInputBlur = () => { props.setDraggingEnabled(true); }; + useEffect(() => { + if (props.isNeedSign) { + onChangeInput( + props.pdfDetails, + null, + props.xyPostion, + null, + props.setXyPostion, + props.data && props.data.signerObjId, + props.initial + ); + } + }, [type]); + switch (props.pos.type) { case "signature": return props.pos.SignUrl ? ( @@ -136,19 +150,54 @@ function PlaceholderType(props) { ); case "initials": - return ( + return props.pos.SignUrl || props.initial ? ( signimg + ) : ( +
+
{props.pos.type}
+ + {props?.handleUserName && + props?.handleUserName(props?.data.signerObjId, props?.data.Role)} +
); + case "name": - return ( + return props.isNeedSign ? ( + + onChangeInput( + e.target.value, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false + ) + } + /> + ) : props.pos.widgetValue ? (
{props.pos.widgetValue}
- ); - case "company": - return ( + ) : (
-
{props.pos.widgetValue}
+ {props.pos.type}
); - case "job title": - return ( + + case "company": + return props.isNeedSign ? ( + + onChangeInput( + e.target.value, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false + ) + } + /> + ) : props.pos.widgetValue ? (
-
{props.pos.widgetValue}
+ {props.pos.widgetValue} +
+ ) : ( +
+ {props.pos.type} +
+ ); + + case "job title": + return props.isNeedSign ? ( + + onChangeInput( + e.target.value, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false + ) + } + /> + ) : props.pos.widgetValue ? ( +
+ {props.pos.widgetValue} +
+ ) : ( +
+ {props.pos.type}
); case "date": @@ -186,7 +306,9 @@ function PlaceholderType(props) { className="inputPlaceholder" style={{ outlineColor: "#007bff" }} type="date" - disabled={props.isPlaceholder} + disabled={ + props.isNeedSign ? false : props.isPlaceholder ? true : false + } onBlur={handleInputBlur} onChange={(e) => onChangeInput( @@ -201,6 +323,7 @@ function PlaceholderType(props) { } /> ); + default: return props.pos.SignUrl ? (
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index bb4f8621a..6f0137a4a 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -435,6 +435,7 @@ function FieldsComponent({ handleMouseLeave={handleMouseLeave} signRef={signRef} marginLeft={5} + addPositionOfSignature={addPositionOfSignature} />
) @@ -964,6 +968,7 @@ function RenderPdf({ posWidth={posWidth} posHeight={posHeight} pdfDetails={pdfDetails[0]} + isDragging={isDragging} /> ) ); @@ -1487,6 +1492,7 @@ function RenderPdf({ posWidth={posWidth} posHeight={posHeight} pdfDetails={pdfDetails[0]} + isDragging={isDragging} /> ) ); diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index c1034ce06..a610b79e5 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -452,9 +452,14 @@ function PlaceHolderSign() { } setSignerPos((prev) => [...prev, placeHolderPos]); } + if (item.text === "dropdown") { + setShowDropdown(true); + setSignKey(key); + } } } }; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -858,52 +863,46 @@ 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 filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); - const placeholderPosition = currentSigner[0].placeHolder; - //function of save signature image and get updated position with signature image url + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; - let getXYdata = placeholderPosition[getIndex].pos; - const updateXYData = getXYdata.map((position) => { - if (position.key === signKey) { - return { - ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions - }; + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); + + if (getPageNumer.length > 0) { + const getXYdata = getPageNumer[0].pos; + + const getPosData = getXYdata; + const addSignPos = getPosData.map((position, ind) => { + if (position.key === signKey) { + return { + ...position, + widgetName: dropdownName, + widgetOption: dropdownOptions + }; + } + return position; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.Id === uniqueId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); } - 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 @@ -1082,7 +1081,7 @@ function PlaceHolderSign() { {isSendAlert.mssg === "confirm" && (