From ad5776cfba6963f2e7243a0ae190c67161600f6f Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 24 Jan 2024 18:01:06 +0530 Subject: [PATCH] feat: implement initial signature feature, fix signature drag and sign-your self issue --- .../SignDocuments/src/Component/ManageSign.js | 79 +++-- .../src/Component/PdfRequestFiles.js | 14 +- .../src/Component/SignYourselfPdf.js | 238 +++++++-------- .../Component/WidgetComponent/allWidgets.js | 37 +-- .../Component/WidgetComponent/placeholder.js | 246 +++++++++------- .../WidgetComponent/placeholderType.js | 57 ++++ .../Component/component/fieldsComponent.js | 37 ++- .../src/Component/component/renderPdf.js | 6 +- .../src/Component/component/signPad.js | 270 +++++++++++------- .../src/Component/placeHolderSign.js | 5 +- .../SignDocuments/src/css/signature.css | 22 +- .../SignDocuments/src/utils/Utils.js | 55 +++- 12 files changed, 661 insertions(+), 405 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/ManageSign.js b/microfrontends/SignDocuments/src/Component/ManageSign.js index c0e1208cd..9351de9cf 100644 --- a/microfrontends/SignDocuments/src/Component/ManageSign.js +++ b/microfrontends/SignDocuments/src/Component/ManageSign.js @@ -8,7 +8,6 @@ import "../css/signature.css"; import axios from "axios"; import { toDataUrl } from "../utils/toDataUrl"; - const ManageSign = () => { let appName; const [penColor, setPenColor] = useState("blue"); @@ -50,7 +49,7 @@ const ManageSign = () => { const userId = { __type: "Pointer", className: "_User", - objectId: User.objectId, + objectId: User.objectId }; const strObj = JSON.stringify(userId); const url = @@ -59,7 +58,7 @@ const ManageSign = () => { const headers = { "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + "X-Parse-Application-Id": localStorage.getItem("parseAppId") // "X-Parse-Session-Token": localStorage.getItem("accesstoken"), }; const res = await axios @@ -142,7 +141,6 @@ const ManageSign = () => { if (!signName) { setNameWarning(true); - } else if (!isvalue) { setWarning(true); setTimeout(() => setWarning(false), 1000); @@ -173,7 +171,7 @@ const ManageSign = () => { await saveEntry({ name: signName, url: imgUrl.data.imageUrl, - initialsUrl: initialsUrl, + initialsUrl: initialsUrl }); } } @@ -199,14 +197,14 @@ const ManageSign = () => { const config = { headers: { "content-type": "multipart/form-data", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + "X-Parse-Application-Id": localStorage.getItem("parseAppId") }, onUploadProgress: function (progressEvent) { let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); // setpercentage(percentCompleted); - }, + } }; const response = await axios .post(url, formData, config) @@ -241,12 +239,12 @@ const ManageSign = () => { UserId: { __type: "Pointer", className: "_User", - objectId: User.objectId, - }, + objectId: User.objectId + } }; const headers = { "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + "X-Parse-Application-Id": localStorage.getItem("parseAppId") // "X-Parse-Session-Token": localStorage.getItem("accesstoken"), }; const res = await axios @@ -279,12 +277,12 @@ const ManageSign = () => { UserId: { __type: "Pointer", className: "_User", - objectId: User.objectId, - }, + objectId: User.objectId + } }; const headers = { "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + "X-Parse-Application-Id": localStorage.getItem("parseAppId") // "X-Parse-Session-Token": localStorage.getItem("accesstoken"), }; const res = await axios @@ -320,7 +318,7 @@ const ManageSign = () => {
{isSuccess && ( @@ -337,7 +335,7 @@ const ManageSign = () => { className="mainDiv" style={{ width: "100%", - paddingRight: "10px", + paddingRight: "10px" }} >
@@ -346,7 +344,7 @@ const ManageSign = () => { fontWeight: "700", fontSize: 15, color: "#000", - paddingBottom: 8, + paddingBottom: 8 }} > Manage Signature @@ -357,7 +355,7 @@ const ManageSign = () => { style={{ fontSize: 12, position: "relative", - paddingBottom: 5, + paddingBottom: 5 }} > Signer's Name @@ -386,7 +384,7 @@ const ManageSign = () => { height: 35, padding: "6px 12px", marginBottom: 10, - fontSize: 12, + fontSize: 12 }} required onFocus={() => setNameWarning(false)} @@ -397,7 +395,7 @@ const ManageSign = () => { htmlFor="imgoverview" style={{ fontSize: 12, - paddingBottom: 5, + paddingBottom: 5 }} > Signature/Image @@ -412,7 +410,7 @@ const ManageSign = () => { flexDirection: "row", justifyContent: "space-between", width: "50%", - paddingLeft: 10, + paddingLeft: 10 }} >
{ justifyContent: "space-around", alignItems: "center", gap: 10, - marginBottom: 10, + marginBottom: 10 }} > <> @@ -458,7 +456,7 @@ const ManageSign = () => { position: "relative", border: "2px solid #888", - marginBottom: 6, + marginBottom: 6 }} className="signatureCanvas" > @@ -468,7 +466,7 @@ const ManageSign = () => { style={{ width: "100%", height: "100%", - objectFit: "contain", + objectFit: "contain" }} />
@@ -479,7 +477,7 @@ const ManageSign = () => { canvasProps={{ width: "456px", height: "180px", - className: "signatureCanvas", + className: "signatureCanvas" }} backgroundColor="rgb(255, 255, 255)" onEnd={() => @@ -492,7 +490,7 @@ const ManageSign = () => { style={{ display: "flex", flexDirection: "row", - justifyContent: "space-between", + justifyContent: "space-between" // width: 460, }} className="penContainer" @@ -513,10 +511,10 @@ const ManageSign = () => { key === 0 && penColor === "blue" ? "2px solid blue" : key === 1 && penColor === "red" - ? "2px solid red" - : key === 2 && penColor === "black" - ? "2px solid black" - : "2px solid white", + ? "2px solid red" + : key === 2 && penColor === "black" + ? "2px solid black" + : "2px solid white" }} onClick={() => { if (key === 0) { @@ -579,9 +577,9 @@ const ManageSign = () => { position: "relative", border: "2px solid #888", - marginBottom: 6, + marginBottom: 6 }} - className="signatureCanvas" + className="intialSignature" > preview image { style={{ width: "100%", height: "100%", - objectFit: "contain", + objectFit: "contain" }} />
@@ -598,9 +596,7 @@ const ManageSign = () => { ref={initailsRef} penColor={initialPen} canvasProps={{ - width: "456px", - height: "180px", - className: "signatureCanvas", + className: "intialSignature" }} backgroundColor="rgb(255, 255, 255)" onEnd={() => @@ -613,8 +609,7 @@ const ManageSign = () => { style={{ display: "flex", flexDirection: "row", - justifyContent: "space-between", - // width: 460, + justifyContent: "space-between" }} className="penContainer" > @@ -624,7 +619,7 @@ const ManageSign = () => { {allColor.map((data, key) => { return ( pen { key === 0 && initialPen === "blue" ? "2px solid blue" : key === 1 && initialPen === "red" - ? "2px solid red" - : key === 2 && initialPen === "black" - ? "2px solid black" - : "2px solid white", + ? "2px solid red" + : key === 2 && initialPen === "black" + ? "2px solid black" + : "2px solid white" }} onClick={() => { if (key === 0) { diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index f6b1739b4..6a6d4ad6f 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -74,6 +74,8 @@ function PdfRequestFiles() { isCertificate: false, isModal: false }); + const [myInitial, setMyInitial] = useState(""); + const [isInitial, setIsInitial] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -270,6 +272,7 @@ function PdfRequestFiles() { if (res[0] && res.length > 0) { setDefaultSignImg(res[0].ImageURL); + setMyInitial(res[0]?.Initials); } const loadObj = { @@ -450,7 +453,11 @@ function PdfRequestFiles() { //function for save button to save signature or image url const saveSign = (isDefaultSign, width, height) => { const isTypeText = width && height ? true : false; - const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signatureImg = isDefaultSign + ? isDefaultSign === "initials" + ? myInitial + : defaultSignImg + : signature; let imgWH = { width: width ? width : "", height: height ? height : "" }; setIsSignPad(false); setIsImageSelect(false); @@ -805,6 +812,10 @@ function PdfRequestFiles() { onSaveImage={saveImage} onSaveSign={saveSign} defaultSign={defaultSignImg} + myInitial={myInitial} + isInitial={isInitial} + setIsInitial={setIsInitial} + setIsStamp={setIsStamp} /> {/* pdf header which contain funish back button */}
)}
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 7adb1b3f1..cfa96706f 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -18,7 +18,8 @@ import { pdfNewWidthFun, addDefaultSignatureImg, onImageSelect, - calculateInitialWidthHeight + calculateInitialWidthHeight, + defaultWidthHeight } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -62,6 +63,8 @@ function SignYourSelf() { const [successEmail, setSuccessEmail] = useState(false); const imageRef = useRef(null); const [documentStatus, setDocumentStatus] = useState({ isCompleted: false }); + const [myInitial, setMyInitial] = useState(""); + const [isInitial, setIsInitial] = useState(false); const [isLoading, setIsLoading] = useState({ isLoad: true, message: "This might take some time" @@ -86,7 +89,6 @@ 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({ @@ -249,7 +251,7 @@ function SignYourSelf() { const res = json.results; if (res[0] && res.length > 0) { setDefaultSignImg(res[0].ImageURL); - setInitial(res[0]?.Initials); + setMyInitial(res[0]?.Initials); } }) .catch((err) => { @@ -323,48 +325,55 @@ function SignYourSelf() { (data) => data.pageNumber === pageNumber ); + const dragTypeValue = item?.text ? item.text : monitor.type; + const widgetValue = - monitor.type === "name" + dragTypeValue === "name" ? pdfDetails[0].ExtUserPtr.Name - : monitor.type === "company" + : dragTypeValue === "company" ? pdfDetails[0].ExtUserPtr.Company - : monitor.type === "job title" + : dragTypeValue === "job title" ? pdfDetails[0].ExtUserPtr.JobTitle - : monitor.type === "checkbox" - ? true - : ""; + : dragTypeValue === "email" + ? pdfDetails[0].ExtUserPtr.Email + : dragTypeValue === "checkbox" + ? true + : ""; + if (item === "onclick") { dropObj = { xPosition: window.innerWidth / 2 - 100, yPosition: window.innerHeight / 2 - 60, isDrag: false, - isStamp: monitor.type === "stamp" && true, + isStamp: + (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, - type: monitor.type, + type: dragTypeValue, yBottom: window.innerHeight / 2 - 60, - // SignUrl: monitor.type === "initials" && initial, widgetValue: widgetValue, Width: - monitor.type === "name" || - monitor.type === "company" || - monitor.type === "job title" - ? calculateInitialWidthHeight(monitor.type, widgetValue).getWidth - : "", + dragTypeValue === "name" || + dragTypeValue === "company" || + dragTypeValue === "job title" || + dragTypeValue === "email" || + dragTypeValue === "initials" + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth + : dragTypeValue === "initials" + ? defaultWidthHeight(dragTypeValue).width + : "", Height: - monitor.type === "company" || - monitor.type === "name" || - monitor.type === "job title" - ? calculateInitialWidthHeight(monitor.type, widgetValue).getHeight - : "" + dragTypeValue === "company" || + dragTypeValue === "name" || + dragTypeValue === "job title" || + dragTypeValue === "email" || + dragTypeValue === "initials" + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight + : dragTypeValue === "initials" + ? defaultWidthHeight(dragTypeValue).height + : "" }; dropData.push(dropObj); - - if (monitor) { - setIsStamp(true); - } else { - setIsStamp(false); - } } else { const offset = monitor.getClientOffset(); //adding and updating drop position in array when user drop signature button in div @@ -375,49 +384,39 @@ function SignYourSelf() { const x = offset.x - containerRect.left; const y = offset.y - containerRect.top; const ybottom = containerRect.bottom - offset.y; - const widgetData = - item.text === "name" - ? pdfDetails[0].ExtUserPtr.Name - : item.text === "company" - ? pdfDetails[0].ExtUserPtr.Company - : item.text === "job title" - ? pdfDetails[0].ExtUserPtr.JobTitle - : item.text === "checkbox" - ? true - : ""; + dropObj = { xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, isDrag: false, - isStamp: item.text === "stamp" && true, + isStamp: + (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, yBottom: ybottom, - type: item.text, - // SignUrl: item.text === "initials" && initial, - widgetValue: widgetData, + type: dragTypeValue, + + widgetValue: widgetValue, Width: - item.text === "name" || - item.text === "company" || - item.text === "job title" - ? calculateInitialWidthHeight(item.text, widgetData).getWidth - : "", + dragTypeValue === "name" || + dragTypeValue === "company" || + dragTypeValue === "job title" || + dragTypeValue === "email" + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth + : defaultWidthHeight(dragTypeValue).width, Height: - item.text === "company" || - item.text === "name" || - item.text === "job title" - ? calculateInitialWidthHeight(item.text, widgetData).getHeight - : "" + dragTypeValue === "company" || + dragTypeValue === "name" || + dragTypeValue === "job title" || + dragTypeValue === "email" + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight + : dragTypeValue === "initials" + ? defaultWidthHeight(dragTypeValue).height + : "" }; dropData.push(dropObj); - - if (isDragStamp || isDragStampSS) { - setIsStamp(true); - } else { - setIsStamp(false); - } } if (filterDropPos.length > 0) { const index = xyPostion.findIndex((object) => { @@ -432,10 +431,6 @@ function SignYourSelf() { pos: newSignPos }; xyPostion.splice(index, 1, xyPos); - if (isDragSign || isDragSignatureSS || isDragStamp || isDragStampSS) { - setIsSignPad(true); - setSignKey(key); - } // } } else { @@ -444,11 +439,22 @@ function SignYourSelf() { pos: dropData }; setXyPostion((prev) => [...prev, xyPos]); + } - if (isDragSign || isDragSignatureSS || isDragStamp || isDragStampSS) { - setIsSignPad(true); - setSignKey(key); - } + if ( + dragTypeValue === "signature" || + dragTypeValue === "stamp" || + dragTypeValue === "image" || + dragTypeValue === "initials" + ) { + setIsSignPad(true); + setSignKey(key); + } + + if (dragTypeValue === "stamp" || dragTypeValue === "image") { + setIsStamp(true); + } else if (dragTypeValue === "initials") { + setIsInitial(true); } }; @@ -574,24 +580,13 @@ function SignYourSelf() { const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === dragKey) { - 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, + xPosition: dragElement.x, + yPosition: dragElement.y, + isDrag: true, + yBottom: ybottom + }; } return url; }); @@ -646,7 +641,11 @@ function SignYourSelf() { //function for save button to save signature or image url const saveSign = (isDefaultSign, width, height) => { const isTypeText = width && height ? true : false; - const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signatureImg = isDefaultSign + ? isDefaultSign === "initials" + ? myInitial + : defaultSignImg + : signature; let imgWH = { width: width ? width : "", height: height ? height : "" }; setIsSignPad(false); setIsImageSelect(false); @@ -937,6 +936,10 @@ function SignYourSelf() { onSaveImage={saveImage} onSaveSign={saveSign} defaultSign={defaultSignImg} + myInitial={myInitial} + isInitial={isInitial} + setIsInitial={setIsInitial} + setIsStamp={setIsStamp} /> {/* render email component to send email after finish signature on document */} )} @@ -1001,36 +1005,40 @@ function SignYourSelf() { {/*if document is not completed then render signature and stamp button in the right side */} {/*else document is completed then render signed by signer name in the right side */} - {!documentStatus.isCompleted ? ( -
- -
- ) : ( -
- -
- )} +
+ {!documentStatus.isCompleted ? ( +
+ +
+ ) : ( +
+ +
+ )} +
)} diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js index d7f8d7f2d..51ef9ec67 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js @@ -4,26 +4,27 @@ import { getWidgetType } from "../../utils/Utils"; function AllWidgets(props) { return props.updateWidgets.map((item, ind) => { return ( -
- props.addPositionOfSignature && - props.addPositionOfSignature("onclick", item) - } - ref={(element) => { - if (!props.isMobile) { - item.ref(element); - if (element) { - if (props?.signRef) { - props.signRef.current = element; +
+
+ props.addPositionOfSignature && + props.addPositionOfSignature("onclick", item) + } + ref={(element) => { + if (!props.isMobile) { + item.ref(element); + if (element) { + if (props?.signRef) { + props.signRef.current = element; + } } } - } - }} - onMouseMove={props?.handleDivClick} - onMouseDown={props?.handleMouseLeave} - > - {item.ref && getWidgetType(item, props?.marginLeft)} + }} + onMouseMove={props?.handleDivClick} + onMouseDown={props?.handleMouseLeave} + > + {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 2db145f79..81c5267a6 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -2,7 +2,7 @@ import React, { useState } from "react"; import BorderResize from "../component/borderResize"; import PlaceholderBorder from "./placeholderBorder"; import { Rnd } from "react-rnd"; -import { defaultWidthHeight } from "../../utils/Utils"; +import { defaultWidthHeight, isMobile } from "../../utils/Utils"; import PlaceholderType from "./placeholderType"; function Placeholder(props) { @@ -16,7 +16,8 @@ function Placeholder(props) { props.pos.type === "name" || props.pos.type === "company" || props.pos.type === "job title" || - props.pos.type === "date" + props.pos.type === "date" || + props.pos.type === "email" ) { setDraggingEnabled(false); } @@ -25,11 +26,16 @@ function Placeholder(props) { if ( props.pos.type === "signature" || props.pos.type === "stamp" || - props.pos.type === "initials" + props.pos.type === "image" ) { props.setIsSignPad(true); props.setSignKey(props.pos.key); props.setIsStamp(props.pos.isStamp); + } else if (props.pos.type === "initials") { + props.setIsSignPad(true); + props.setSignKey(props.pos.key); + props.setIsStamp(props.pos.isStamp); + props.setIsInitial(true); } } else { props.setIsSignPad(true); @@ -66,6 +72,82 @@ function Placeholder(props) { } }; + const PlaceholderIcon = () => { + return ( + props.isShowBorder && ( + <> + {props.isPlaceholder && ( + { + 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" + }} + > + )} + + { + 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" + }} + > + { + e.stopPropagation(); + + if (props.data) { + props.handleDeleteSign(props.pos.key, props.data.Id); + } else { + props.handleDeleteSign(props.pos.key); + props.setIsStamp(false); + } + }} + onTouchEnd={(e) => { + e.stopPropagation(); + if (props.data) { + props.handleDeleteSign(props.pos.key, props.data.Id); + } else { + props.handleDeleteSign(props.pos.key); + props.setIsStamp(false); + } + }} + style={{ + color: "#188ae2" + }} + > + + ) + ); + }; + return ( )} -
{ - props.isNeedSign && props.data?.signerObjId === props.signerObjId - ? handlePlaceholderClick() - : props.isPlaceholder + {isMobile ? ( +
{ + props.isNeedSign && props.data?.signerObjId === props.signerObjId ? handlePlaceholderClick() - : props.isSignYourself && handlePlaceholderClick(); - }} - > - {props.isShowBorder && ( - <> - {props.isPlaceholder && ( - { - 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" - }} - > - )} + : props.isPlaceholder + ? handlePlaceholderClick() + : props.isSignYourself && handlePlaceholderClick(); + }} + > + + +
+ ) : ( + <> + - { - 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" - }} - > - { - e.stopPropagation(); - - if (props.data) { - props.handleDeleteSign(props.pos.key, props.data.Id); - } else { - props.handleDeleteSign(props.pos.key); - props.setIsStamp(false); - } - }} - onTouchEnd={(e) => { - e.stopPropagation(); - if (props.data) { - props.handleDeleteSign(props.pos.key, props.data.Id); - } else { - props.handleDeleteSign(props.pos.key); - props.setIsStamp(false); - } - }} - style={{ - color: "#188ae2" - }} - > - - )} - - -
+ + + )} ); } diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 9a99aeb08..38cf7cf6c 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -308,6 +308,63 @@ function PlaceholderType(props) { /> ); + case "image": + return props.pos.SignUrl ? ( + signimg + ) : ( +
+
{props.pos.type}
+ + {props?.handleUserName && + props?.handleUserName(props?.data.Id, props?.data.Role)} +
+ ); + case "email": + return props.isSignYourself || + (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? ( + + onChangeInput( + e.target.value, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false + ) + } + /> + ) : ( +
+ {props.pos.type} +
+ ); + default: return props.pos.SignUrl ? (
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index c32259265..ca7e0cd57 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -37,8 +37,7 @@ function FieldsComponent({ signerPos, handleRoleChange, handleOnBlur, - title, - initial + title }) { const [isSignersModal, setIsSignersModal] = useState(false); @@ -123,14 +122,35 @@ function FieldsComponent({ type: "BOX", item: { type: "BOX", - id: 11, + id: 12, text: "date" }, collect: (monitor) => ({ isDragDate: !!monitor.isDragging() }) }); - + const [{ isDragImage }, image] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 13, + text: "image" + }, + collect: (monitor) => ({ + isDragImage: !!monitor.isDragging() + }) + }); + const [{ isDragEmail }, email] = useDrag({ + type: "BOX", + item: { + type: "BOX", + id: 14, + text: "email" + }, + collect: (monitor) => ({ + isDragEmail: !!monitor.isDragging() + }) + }); const isMobile = window.innerWidth < 767; const scrollContainerRef = useRef(null); const [widget, setWidget] = useState([]); @@ -164,17 +184,16 @@ function FieldsComponent({ name, company, jobTitle, - date + date, + image, + email ]; const getWidgetArray = widgets; const newUpdateSigner = getWidgetArray.map((obj, ind) => { return { ...obj, ref: widgetRef[ind] }; }); - const removeInitial = newUpdateSigner.filter( - (widgetData) => widgetData.type !== "initials" - ); - setWidget(initial ? newUpdateSigner : removeInitial); + setWidget(newUpdateSigner); }, []); const filterWidgets = widget.filter((data) => data.type !== "dropdown"); diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 233423311..075b6423e 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -54,7 +54,8 @@ function RenderPdf({ signersdata, setIsPageCopy, setSignerObjId, - setShowDropdown + setShowDropdown, + setIsInitial }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -360,6 +361,7 @@ function RenderPdf({ handleUserName={handleAllUserName} isDragging={false} pdfDetails={pdfDetails} + setIsInitial={setIsInitial} /> ) @@ -941,6 +943,7 @@ function RenderPdf({ posHeight={posHeight} pdfDetails={pdfDetails[0]} isDragging={isDragging} + setIsInitial={setIsInitial} /> ) ); @@ -1332,6 +1335,7 @@ function RenderPdf({ posHeight={posHeight} pdfDetails={pdfDetails[0]} isDragging={isDragging} + setIsInitial={setIsInitial} /> ) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index fb7f42f77..3a3b5a242 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -20,7 +20,11 @@ function SignPad({ onSaveImage, image, defaultSign, - setSignature + setSignature, + myInitial, + isInitial, + setIsInitial, + setIsStamp }) { const [penColor, setPenColor] = useState("blue"); const allColor = [bluePen, redPen, blackPen]; @@ -40,19 +44,22 @@ function SignPad({ ]; const [fontSelect, setFontSelect] = useState(fontOptions[0].value); - useEffect(() => { - const senderUser = - localStorage.getItem( - `Parse/${localStorage.getItem("parseAppId")}/currentUser` - ) && - localStorage.getItem( - `Parse/${localStorage.getItem("parseAppId")}/currentUser` - ); - const jsonSender = JSON.parse(senderUser); + const senderUser = + localStorage.getItem( + `Parse/${localStorage.getItem("parseAppId")}/currentUser` + ) && + localStorage.getItem( + `Parse/${localStorage.getItem("parseAppId")}/currentUser` + ); + const jsonSender = JSON.parse(senderUser); - const currentUserName = jsonSender && jsonSender.name; - //function for clear signature - setSignValue(currentUserName); + const currentUserName = jsonSender && jsonSender.name; + + useEffect(() => { + const trimmedName = currentUserName.trim(); + const firstCharacter = trimmedName.charAt(0); + const userName = isInitial ? firstCharacter : currentUserName; + setSignValue(userName); setFontSelect("Fasthand"); }, []); //function for clear signature image @@ -68,6 +75,7 @@ function SignPad({ } else if (isTab === "uploadImage") { setImage(""); } + setIsInitial(false); }; //function for set signature url const handleSignatureChange = (dataURL) => { @@ -97,9 +105,13 @@ function SignPad({
- {defaultSign && ( + {!isInitial && defaultSign ? (
{ @@ -361,6 +386,37 @@ function SignPad({ }} >
+ ) : ( + isInitial && + myInitial && ( +
+ { + setIsDefaultSign(true); + setIsImageSelect(true); + setIsTab("mysignature"); + setImage(); + }} + style={{ + color: + isTab === "mysignature" + ? themeColor() + : "#515252" + }} + className="signTab" + > + My Initials + +
+
+ ) )} )} @@ -373,11 +429,13 @@ function SignPad({ onClick={() => { setPenColor("blue"); setIsSignPad(false); - + setIsInitial(false); setIsImageSelect(false); setIsDefaultSign(false); setImage(); setIsTab("draw"); + setSignValue(""); + setIsStamp(false); }} > × @@ -386,29 +444,33 @@ function SignPad({
{isDefaultSign ? ( <> -
- stamp img +
+ className={ + isInitial ? "intialSignatureCanvas" : "signatureCanvas" + } + > + stamp img +
@@ -416,54 +478,63 @@ function SignPad({ ) : isImageSelect || isStamp ? ( !image ? ( -
imageRef.current.click()} - > - - -
Upload
-
- ) : ( - <> +
imageRef.current.click()} > - + +
Upload
+
+
+ ) : ( + <> +
+
+ print img +
- Signature: + + {isInitial ? "Initials" : "Signature"}: + ) : ( <> - + + handleSignatureChange(canvasRef.current.toDataURL()) } - }} - backgroundColor="rgb(255, 255, 255)" - onEnd={() => - handleSignatureChange(canvasRef.current.toDataURL()) - } - dotSize={1} - /> - + dotSize={1} + /> +
{ @@ -54,11 +54,15 @@ export const addInitialData = (signerPos, setXyPostion, value, signerObjId) => { ? value?.Company : item.type === "job title" ? value?.JobTitle - : ""; + : item.type === "email" + ? value?.Email + : ""; + if ( item.type === "name" || item.type === "company" || - item.type === "job title" + item.type === "job title" || + item.type === "email" ) { return { ...item, @@ -195,17 +199,27 @@ export const widgets = [ { type: "company", icon: "fa-solid fa-building", - iconSize: "24px" + iconSize: "25px" }, { type: "job title", icon: "fa-solid fa-address-card", - iconSize: "16px" + iconSize: "17px" }, { type: "date", icon: "fa-solid fa-calendar-days", iconSize: "20px" + }, + { + type: "image", + icon: "fa-solid fa-image", + iconSize: "20px" + }, + { + type: "email", + icon: "fa-solid fa-envelope", + iconSize: "20px" } ]; @@ -215,7 +229,6 @@ export const getWidgetType = (item, marginLeft) => {
{ return obj; case "initials": obj = { - width: 150, - height: 60 + width: 50, + height: 50 }; return obj; case "name": @@ -327,6 +340,18 @@ export const defaultWidthHeight = (type) => { height: 20 }; return obj; + case "image": + obj = { + width: 150, + height: 60 + }; + return obj; + case "email": + obj = { + width: 50, + height: 20 + }; + return obj; default: obj = { width: 150, @@ -414,6 +439,7 @@ export function getHostUrl() { export const calculateImgAspectRatio = (imgWH, pos) => { let newWidth, newHeight; + const placeholderHeight = pos && pos.Width ? pos.Height : 60; const aspectRatio = imgWH.width / imgWH.height; newWidth = aspectRatio * placeholderHeight; @@ -465,13 +491,22 @@ export function onSaveSign( let getXYdata = xyPostion[index].pos; const updateXYData = getXYdata.map((position) => { if (position.key === signKey) { - if (isDefaultSign) { + if (isDefaultSign === "initials") { + let imgWH = { width: position.Width, height: position.Height }; + getIMGWH = calculateImgAspectRatio(imgWH, position); + } else if (isDefaultSign === "default") { getIMGWH = calculateImgAspectRatio(imgWH, position); } else if (isTypeText) { getIMGWH = { newWidth: imgWH.width, newHeight: imgWH.height }; } else { + const defaultWidth = defaultWidthHeight(position?.type).width; + const defaultHeight = defaultWidthHeight(position?.type).height; + getIMGWH = calculateImgAspectRatio( - { width: 150, height: 60 }, + { + width: defaultWidth ? defaultWidth : 150, + height: defaultHeight ? defaultHeight : 60 + }, position ); }