From ef1b82f426a65cb35def8b12a4641e4a5da713c0 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Feb 2024 22:04:37 +0530 Subject: [PATCH] feat: implement react-tour alert for unsigned widgets --- .../src/Component/PdfRequestFiles.js | 197 ++++++++++++------ .../Component/WidgetComponent/placeholder.js | 8 +- .../Component/component/fieldsComponent.js | 189 +---------------- .../src/Component/component/renderPdf.js | 16 +- .../src/Component/placeHolderSign.js | 14 +- .../SignDocuments/src/utils/Utils.js | 1 - 6 files changed, 158 insertions(+), 267 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 9294e2761..f9c4d70ad 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -10,6 +10,7 @@ import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { useNavigate } from "react-router-dom"; +import Tour from "reactour"; import { contractDocument, multiSignEmbed, @@ -66,6 +67,7 @@ function PdfRequestFiles() { const [isDecline, setIsDecline] = useState({ isDeclined: false }); const [currentSigner, setCurrentSigner] = useState(false); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); + const [unSignedWidgetId, setUnSignedWidgetId] = useState(""); const [defaultSignAlert, setDefaultSignAlert] = useState({ isShow: false, alertMessage: "" @@ -85,6 +87,7 @@ function PdfRequestFiles() { const [alreadySign, setAlreadySign] = useState(false); const [containerWH, setContainerWH] = useState({}); const [validateAlert, setValidateAlert] = useState(false); + const [widgetsTour, setWidgetsTour] = useState(false); const divRef = useRef(null); const isMobile = window.innerWidth < 767; const rowLevel = @@ -297,6 +300,7 @@ function PdfRequestFiles() { (data) => data.signerObjId === signerObjectId ); if (checkUser && checkUser.length > 0) { + let unSignUrlData; let checkWidgetSign = 0; let allXyPos = 0; let checkedRequireCount = 0; @@ -307,49 +311,74 @@ function PdfRequestFiles() { const posSignUrlData = checkUser[0].placeHolder[i].pos.filter( (pos) => pos?.SignUrl ); - const posWidgetData = checkUser[0].placeHolder[i].pos.filter( - (pos) => pos?.widgetValue && pos?.type !== "checkbox" + unSignUrlData = checkUser[0].placeHolder[i].pos.filter( + (pos) => !pos?.SignUrl && !pos.widgetValue ); - const checkboxReadOnly = checkUser[0].placeHolder[i].pos.filter( - (pos) => - pos?.widgetValue && - pos?.type === "checkbox" && - pos?.widgetStatus === "Read only" - ).length; - const checkboxRequire = checkUser[0].placeHolder[i].pos.filter( - (pos) => pos?.type === "checkbox" && pos?.widgetStatus === "Required" - ); - CheckboxRequireCount = CheckboxRequireCount + checkboxRequire?.length; - checkedRequireCount = - checkedRequireCount + - checkUser[0].placeHolder[i].pos?.filter( - (pos) => - pos?.widgetValue && - pos?.type === "checkbox" && - pos?.widgetStatus === "Required" - )?.length; - optionalCheckbox = checkUser[0].placeHolder[i].pos.filter( - (pos) => pos.type === "checkbox" && pos.widgetStatus === "Optional" - ).length; - checkWidgetSign = - checkWidgetSign + - posSignUrlData.length + - posWidgetData.length + - checkboxReadOnly + - checkedRequireCount + - optionalCheckbox; - allXyPos = allXyPos + checkUser[0].placeHolder[i].pos.length; + console.log("unsigned", unSignUrlData); + + // const posWidgetData = checkUser[0].placeHolder[i].pos.filter( + // (pos) => pos?.widgetValue && pos?.type !== "checkbox" + // ); + // const checkboxReadOnly = checkUser[0].placeHolder[i].pos.filter( + // (pos) => + // pos?.widgetValue && + // pos?.type === "checkbox" && + // pos?.widgetStatus === "Read only" + // ).length; + // const checkboxRequire = checkUser[0].placeHolder[i].pos.filter( + // (pos) => pos?.type === "checkbox" && pos?.widgetStatus === "Required" + // ); + // CheckboxRequireCount = CheckboxRequireCount + checkboxRequire?.length; + // checkedRequireCount = + // checkedRequireCount + + // checkUser[0].placeHolder[i].pos?.filter( + // (pos) => + // pos?.widgetValue && + // pos?.type === "checkbox" && + // pos?.widgetStatus === "Required" + // )?.length; + // optionalCheckbox = checkUser[0].placeHolder[i].pos.filter( + // (pos) => pos.type === "checkbox" && pos.widgetStatus === "Optional" + // ).length; + // checkWidgetSign = + // checkWidgetSign + + // posSignUrlData.length + + // posWidgetData.length + + // checkboxReadOnly + + // checkedRequireCount + + // optionalCheckbox; + // allXyPos = allXyPos + checkUser[0].placeHolder[i].pos.length; } - if (CheckboxRequireCount !== checkedRequireCount) { - setIsAlert({ - isShow: true, - alertMessage: "Please check the required checkbox to continue." - }); - } else if (allXyPos !== checkWidgetSign) { - setIsAlert({ - isShow: true, - alertMessage: "Please complete your signature!" - }); + // if (CheckboxRequireCount !== checkedRequireCount) { + // setIsAlert({ + // isShow: true, + // alertMessage: "Please check the required checkbox to continue." + // }); + // } else if (allXyPos !== checkWidgetSign) { + // setIsAlert({ + // isShow: true, + // alertMessage: "Please complete your signature!" + // }); + // } + let checkboxExist; + let optionRequiredCheckbox; + checkboxExist = unSignUrlData.some((data) => data.type === "checkbox"); + + if (checkboxExist) { + optionRequiredCheckbox = unSignUrlData.filter( + (data) => data.widgetStatus !== "Optional" + ); + } + if ( + checkboxExist && + optionRequiredCheckbox && + optionRequiredCheckbox.length > 0 + ) { + setUnSignedWidgetId(optionRequiredCheckbox[0].key); + setWidgetsTour(true); + } else if (!checkboxExist && unSignUrlData && unSignUrlData.length > 0) { + setUnSignedWidgetId(unSignUrlData[0].key); + setWidgetsTour(true); } else { setIsUiLoading(true); const pngUrl = checkUser[0].placeHolder; @@ -380,34 +409,34 @@ function PdfRequestFiles() { ); //function for call to embed signature in pdf and get digital signature pdf - try { - const res = await signPdfFun( - pdfBytes, - documentId, - signerObjectId, - pdfOriginalWidth, - pngUrl, - containerWH, - setIsAlert - ); - 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" - }); - } + // try { + // const res = await signPdfFun( + // pdfBytes, + // documentId, + // signerObjectId, + // pdfOriginalWidth, + // pngUrl, + // containerWH, + // setIsAlert + // ); + // 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" + // }); + // } } setIsSignPad(false); @@ -420,6 +449,26 @@ function PdfRequestFiles() { } } + //function for update TourStatus + const closeTour = async () => { + setWidgetsTour(false); + }; + + const tourConfig = [ + { + selector: '[data-tut="IsSigned"]', + content: "Please fill out this placeholder.", + // content: () => ( + // + // ), + position: "top", + style: { fontSize: "13px" } + } + ]; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -690,6 +739,15 @@ function PdfRequestFiles() { + + + {/* this modal is used to show decline alert */} )} diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index e11ae1423..2733124e6 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -99,7 +99,10 @@ function Placeholder(props) { //onclick placeholder function to open signature pad const handlePlaceholderClick = () => { - props.setSelectWidgetId(props.pos.key); + if (props.setSelectWidgetId) { + props.setSelectWidgetId(props.pos.key); + } + const widgetTypeExist = [ "text", "checkbox", @@ -268,11 +271,13 @@ function Placeholder(props) { setIsShowDateFormat(!isShowDateFormat); e.stopPropagation(); props.setSignKey(props.pos.key); + props.setUniqueId(props.data.Id); }} onTouchEnd={(e) => { e.stopPropagation(); setIsShowDateFormat(!isShowDateFormat); props.setSignKey(props.pos.key); + props.setUniqueId(props.data.Id); }} > ({ @@ -171,7 +171,7 @@ function FieldsComponent({ item: { type: "BOX", - id: 14, + id: 16, text: "label" }, collect: (monitor) => ({ @@ -368,191 +368,6 @@ function FieldsComponent({
- {/* {pdfUrl ? ( - <> - - - - ) : ( - <> -
{ - dragSignature(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)" - }} - > - - Signature - - sign img - -
-
{ - dragStamp(element); - dragRef.current = element; - if (isDragStamp) { - - } - }} - className={!pdfUrl ? signStyle : "disableSign"} - disabled={pdfUrl && true} - onMouseMove={handleDivClick} - onMouseDown={handleMouseLeave} - style={{ - opacity: isDragStamp ? 0.5 : 1, - boxShadow: - "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)" - }} - > - - Stamp - - - stamp img -
- - )} */} - {/* {updateWidgets.map((item, ind) => { - return ( -
{ - 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)" - }} - > -
- - - {item.type} - -
-
- -
-
- ); - })} */} ) @@ -441,7 +443,12 @@ function RenderPdf({ }} loading={"Loading Document.."} onLoadSuccess={pageDetails} - // ref={pdfRef} + // ref={pdfRef}' + onClick={() => { + if (setSelectWidgetId) { + setSelectWidgetId(""); + } + }} file={ pdfUrl ? pdfUrl @@ -617,8 +624,9 @@ function RenderPdf({ loading={"Loading Document.."} onLoadSuccess={pageDetails} onClick={() => { - console.log("click on pdf"); - setSelectWidgetId(""); + if (setSelectWidgetId) { + setSelectWidgetId(""); + } }} // ref={pdfRef} file={ diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 7f77b71d1..d71a7da90 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -427,8 +427,8 @@ function PlaceHolderSign() { }; } + setSelectWidgetId(key); if (signer && dragTypeValue !== "label") { - setSelectWidgetId(key); let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); const { blockColor, Role } = signer; @@ -454,6 +454,7 @@ function PlaceHolderSign() { const updatesignerPos = signerPos.map((x) => x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x ); + setSignerPos(updatesignerPos); } else { const updatesignerPos = signerPos.map((x) => @@ -465,6 +466,7 @@ function PlaceHolderSign() { } } else { //adding new placeholder for selected signer in pos array (placeholder) + const signerData = signerPos; let placeHolderPos; if (contractName) { placeHolderPos = { @@ -489,7 +491,10 @@ function PlaceHolderSign() { Id: uniqueId }; } - setSignerPos((prev) => [...prev, placeHolderPos]); + + signerData.push(placeHolderPos); + + setSignerPos(signerData); } if (dragTypeValue === "dropdown") { setShowDropdown(true); @@ -500,8 +505,7 @@ function PlaceHolderSign() { } setWidgetType(dragTypeValue); setSignKey(key); - } else { - setSelectWidgetId(key); + } else if (dragTypeValue === "label") { let filterSignerPos = signerPos.filter( (data) => data.Role === "prefill" ); @@ -548,6 +552,7 @@ function PlaceHolderSign() { }; setSignerPos((prev) => [...prev, placeHolderPos]); } + setSignKey(key); } } }; @@ -1235,7 +1240,6 @@ function PlaceHolderSign() { setIsValidate(false); }; - console.log("currentdetails", currWidgetsDetails); return ( <> diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index b756ab445..f458b888d 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -939,7 +939,6 @@ export const multiSignEmbed = async ( imgData.type === "initials" || imgData.type === "image" ) { - console.log(images[id]); if ( (imgData.ImageType && imgData.ImageType === "image/png") || imgData.ImageType === "image/jpeg"