diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index bfd066ad6..4426849d4 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -304,7 +304,7 @@ function PdfRequestFiles() { for (let i = 0; i < checkUser[0].placeHolder.length; i++) { unSignUrlData = checkUser[0].placeHolder[i].pos.filter( - (pos) => !pos?.SignUrl && !pos.widgetValue + (pos) => !pos?.SignUrl && !pos.options.response ); } let checkboxExist; @@ -313,7 +313,7 @@ function PdfRequestFiles() { if (checkboxExist) { optionRequiredCheckbox = unSignUrlData.filter( - (data) => data.widgetStatus !== "Optional" + (data) => data.options.status !== "Optional" ); } if ( diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index a51ff82b7..7fb642937 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -5,6 +5,7 @@ import { themeColor } from "../utils/ThemeColor/backColor"; import axios from "axios"; import moment from "moment"; import Loader from "./component/loader"; +import loader from "../assests/loader2.gif"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; @@ -17,7 +18,6 @@ import { embedDocId, multiSignEmbed, pdfNewWidthFun, - addDefaultSignatureImg, onImageSelect, calculateInitialWidthHeight, defaultWidthHeight @@ -66,6 +66,7 @@ function SignYourSelf() { const [documentStatus, setDocumentStatus] = useState({ isCompleted: false }); const [myInitial, setMyInitial] = useState(""); const [isInitial, setIsInitial] = useState(false); + const [isUiLoading, setIsUiLoading] = useState(false); const [isLoading, setIsLoading] = useState({ isLoad: true, message: "This might take some time" @@ -176,6 +177,7 @@ function SignYourSelf() { if (documentData && documentData.length > 0) { setPdfDetails(documentData); + setIsUiLoading(false); const isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted; if (isCompleted) { @@ -318,6 +320,130 @@ function SignYourSelf() { return ""; } }; + const addWidgetOptions = (type) => { + let option = {}; + + switch (type) { + case "signature": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "stamp": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "checkbox": + option = { + name: "", + values: [], + status: "Read only", + response: true, + validation: {} + }; + return option; + case "text": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "initials": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "name": + option = { + name: "", + values: [], + status: "", + response: getWidgetValue(type), + validation: { + type: "text", + pattern: "" + } + }; + return option; + + case "company": + option = { + name: "", + values: [], + status: "", + response: getWidgetValue(type), + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "job title": + option = { + name: "", + values: [], + status: "", + response: getWidgetValue(type), + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "date": + option = { + name: "", + values: [], + status: "", + response: getDate(), + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "image": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "email": + option = { + name: "", + values: [], + status: "", + response: getWidgetValue(type), + validation: { + type: "email", + pattern: "" + } + }; + return option; + } + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { const key = Math.floor(1000 + Math.random() * 9000); @@ -330,7 +456,9 @@ function SignYourSelf() { const widgetValue = getWidgetValue(dragTypeValue); const widgetWidth = defaultWidthHeight(dragTypeValue).width; const widgetHeight = defaultWidthHeight(dragTypeValue).height; - + const widgetTypeExist = ["name", "company", "job title", "email"].includes( + dragTypeValue + ); if (item === "onclick") { dropObj = { xPosition: containerWH.width / 2 - widgetWidth / 2, @@ -341,25 +469,18 @@ function SignYourSelf() { key: key, type: dragTypeValue, yBottom: window.innerHeight / 2 - 60, - widgetValue: widgetValue, - Width: - dragTypeValue === "name" || - dragTypeValue === "company" || - dragTypeValue === "job title" || - dragTypeValue === "email" - ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth - : dragTypeValue === "initials" - ? defaultWidthHeight(dragTypeValue).width - : "", - Height: - dragTypeValue === "company" || - dragTypeValue === "name" || - dragTypeValue === "job title" || - dragTypeValue === "email" - ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight - : dragTypeValue === "initials" - ? defaultWidthHeight(dragTypeValue).height - : "" + + Width: widgetTypeExist + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth + : dragTypeValue === "initials" + ? defaultWidthHeight(dragTypeValue).width + : "", + Height: widgetTypeExist + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight + : dragTypeValue === "initials" + ? defaultWidthHeight(dragTypeValue).height + : "", + options: addWidgetOptions(dragTypeValue) }; dropData.push(dropObj); @@ -377,30 +498,18 @@ function SignYourSelf() { dropObj = { xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, - isDrag: false, + // isDrag: false, isStamp: (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, - firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, - firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, - yBottom: ybottom, type: dragTypeValue, - - widgetValue: widgetValue, - Width: - dragTypeValue === "name" || - dragTypeValue === "company" || - dragTypeValue === "job title" || - dragTypeValue === "email" - ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth - : defaultWidthHeight(dragTypeValue).width, - Height: - dragTypeValue === "company" || - dragTypeValue === "name" || - dragTypeValue === "job title" || - dragTypeValue === "email" - ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight - : defaultWidthHeight(dragTypeValue).height + Width: widgetTypeExist + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth + : defaultWidthHeight(dragTypeValue).width, + Height: widgetTypeExist + ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight + : defaultWidthHeight(dragTypeValue).height, + options: addWidgetOptions(dragTypeValue) }; dropData.push(dropObj); @@ -453,10 +562,12 @@ function SignYourSelf() { let allXyPos = 0; for (let i = 0; i < xyPostion.length; i++) { - const posSignUrlData = xyPostion[i].pos.filter((pos) => pos.SignUrl); - const posWidgetData = xyPostion[i].pos.filter((pos) => pos.widgetValue); + // const posSignUrlData = xyPostion[i].pos.filter((pos) => pos.SignUrl); + const posWidgetData = xyPostion[i].pos.filter( + (pos) => pos.options.response + ); - checkSigned = checkSigned + posSignUrlData.length + posWidgetData.length; + checkSigned = checkSigned + posWidgetData.length; allXyPos = allXyPos + xyPostion[i].pos.length; } if (xyPostion.length === 0) { @@ -476,11 +587,7 @@ function SignYourSelf() { setTimeout(() => { setIsCeleb(false); }, 3000); - const loadObj = { - isLoad: true, - message: "This might take some time" - }; - setIsLoading(loadObj); + setIsUiLoading(true); const url = pdfDetails[0] && pdfDetails[0].URL; const existingPdfBytes = await fetch(url).then((res) => @@ -719,13 +826,6 @@ function SignYourSelf() { } }; - //function for add default signature url in local array - const addDefaultSignature = () => { - const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - - setXyPostion(getXyData); - setShowAlreadySignDoc({ status: false }); - }; const handleDontShow = (isChecked) => { setIsDontShow(isChecked); }; @@ -807,232 +907,260 @@ function SignYourSelf() { ) : noData ? ( ) : ( -
- {/* this component used for UI interaction and show their functionality */} - {pdfLoadFail && !checkTourStatus && ( - +
+ {isUiLoading && ( +
+ no img + + This might take some time + +
)} - {/* this component used to render all pdf pages in left side */} +
+ {/* this component used for UI interaction and show their functionality */} + {pdfLoadFail && !checkTourStatus && ( + + )} - + {/* this component used to render all pdf pages in left side */} - {/* pdf render view */} -
500 && "20px", - marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" - }} - > - { - setIsAlert({ - isShow: false, - alertMessage: "" - }); + + + {/* pdf render view */} +
500 && "20px", + marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} > -
-

{isAlert.alertMessage}

+ { + setIsAlert({ + isShow: false, + alertMessage: "" + }); + }} + > +
+

{isAlert.alertMessage}

-
- +
+ +
+ + + {/* this modal is used show this document is already sign */} + { + setShowAlreadySignDoc({ status: false }); + }} + > +
+

{showAlreadySignDoc.mssg}

+ +
+ +
+ + + + {/* this is modal of signature pad */} + + {/* render email component to send email after finish signature on document */} + + {/* pdf header which contain funish back button */} +
+ +
+ {containerWH && ( + + )}
- +
- {/* this modal is used show this document is already sign */} - { - setShowAlreadySignDoc({ status: false }); - }} + {/*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 */} +
-
-

{showAlreadySignDoc.mssg}

- -
- -
- - - - {/* this is modal of signature pad */} - - {/* render email component to send email after finish signature on document */} - - {/* pdf header which contain funish back button */} -
- -
- {containerWH && ( - + {!documentStatus.isCompleted ? ( +
+ +
+ ) : ( +
+ +
)}
- - {/*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 ? ( -
- -
- ) : ( -
- -
- )} -
)} diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index c525d23cb..e72f6d36f 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -348,6 +348,154 @@ const TemplatePlaceholder = () => { getSignerPos(item, monitor); }; + const addWidgetOptions = (type) => { + let option = {}; + + switch (type) { + case "signature": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "stamp": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "checkbox": + option = { + name: "", + values: [], + status: "Optional", + response: false, + validation: {} + }; + return option; + case "text": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "initials": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "name": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "text", + pattern: "" + } + }; + return option; + + case "company": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "job title": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "date": + option = { + name: "", + values: [], + status: "", + response: getDate() + }; + return option; + case "image": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "email": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "email", + pattern: "" + } + }; + return option; + case "dropdown": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "radio": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "label": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + } + }; + // `getSignerPos` is used to get placeholder position when user place it and save it in array const getSignerPos = (item, monitor) => { if (uniqueId) { @@ -373,18 +521,11 @@ const TemplatePlaceholder = () => { isStamp: (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, - isDrag: false, scale: scale, isMobile: isMobile, - yBottom: window.innerHeight / 2 - 60, zIndex: posZIndex, type: dragTypeValue, - widgetValue: - dragTypeValue === "checkbox" - ? false - : dragTypeValue === "date" - ? getDate() - : "" + options: addWidgetOptions(dragTypeValue) }; dropData.push(dropObj); placeHolder = { @@ -407,20 +548,11 @@ const TemplatePlaceholder = () => { isStamp: (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, - isDrag: false, - firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, - firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, - yBottom: ybottom, scale: scale, isMobile: isMobile, zIndex: posZIndex, type: item.text, - widgetValue: - dragTypeValue === "checkbox" - ? false - : dragTypeValue === "date" - ? getDate() - : "" + options: addWidgetOptions(dragTypeValue) }; dropData.push(dropObj); @@ -1013,6 +1145,8 @@ const TemplatePlaceholder = () => { //function for base on condition to add checkbox widget status and input text validation in signerPos array const handleApplyWidgetsStatus = (textValidate) => { + const options = ["email", "number", "text"]; + const regexType = options.includes(textValidate); let regularExpression = textValidate; const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); if (filterSignerPos.length > 0) { @@ -1032,19 +1166,32 @@ const TemplatePlaceholder = () => { if (selectRequiredType === "Read only") { return { ...position, - widgetStatus: selectRequiredType, - widgetValue: true + options: { + ...position.options, + status: selectRequiredType, + response: true + } }; } else { return { ...position, - widgetStatus: selectRequiredType + options: { + ...position.options, + status: selectRequiredType, + response: false + } }; } } else { return { ...position, - validation: regularExpression + options: { + ...position.options, + validation: { + type: regexType ? regularExpression : "regex", + pattern: !regexType ? regularExpression : "" + } + } }; } } @@ -1111,15 +1258,21 @@ const TemplatePlaceholder = () => { } else { return { ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions + options: { + ...position.options, + name: dropdownName, + values: dropdownOptions + } }; } } else { return { ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions + options: { + ...position.options, + name: dropdownName, + values: dropdownOptions + } }; } } diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js index d2946dbc8..f8630ae87 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js @@ -6,8 +6,8 @@ function CheckboxStatus(props) { const checkboxType = ["Optional", "Required", "Read only"]; useEffect(() => { - if (props.currWidgetsDetails?.widgetStatus) { - props.setSelectRequiredType(props.currWidgetsDetails?.widgetStatus); + if (props.currWidgetsDetails?.options?.status) { + props.setSelectRequiredType(props.currWidgetsDetails?.options?.status); } }, [props.currWidgetsDetails]); @@ -53,7 +53,7 @@ function CheckboxStatus(props) { > Apply - {props.currWidgetsDetails?.widgetStatus && ( + {props.currWidgetsDetails?.options?.status && ( - {props.currWidgetsDetails?.widgetOption?.length > 0 && ( + {props.currWidgetsDetails?.options?.values?.length > 0 && (
); case "initials": @@ -402,13 +420,13 @@ function PlaceholderType(props) { tabIndex="0" ref={inputRef} placeholder={"name"} - style={{ fontSize: calculateFontSize(), textAlign: "center" }} + style={{ fontSize: calculateFontSize() }} className="inputPlaceholder" type="text" value={ textValue ? textValue - : props.pos.widgetValue && props.pos.widgetValue + : props.pos.options.response && props.pos.options.response } onBlur={handleInputBlur} onChange={(e) => { @@ -447,7 +465,7 @@ function PlaceholderType(props) { value={ textValue ? textValue - : props.pos.widgetValue && props.pos.widgetValue + : props.pos.options.response && props.pos.options.response } onBlur={handleInputBlur} onChange={(e) => { @@ -486,7 +504,7 @@ function PlaceholderType(props) { value={ textValue ? textValue - : props.pos.widgetValue && props.pos.widgetValue + : props.pos.options.response && props.pos.options.response } onBlur={handleInputBlur} onChange={(e) => { @@ -519,16 +537,15 @@ function PlaceholderType(props) { disabled={ props.isNeedSign && props.data?.signerObjId !== props.signerObjId } - // disabled={props.isPlaceholder ? true : false} onBlur={handleInputBlur} closeOnScroll={true} className="inputPlaceholder" style={{ outlineColor: "#007bff" }} selected={ - // props.pos?.widgetValue ? props.pos.widgetValue : startDate ? startDate - : props.pos?.widgetValue && new Date(props.pos.widgetValue) + : props.pos.options?.response && + new Date(props.pos.options.response) } onChange={(date) => { setStartDate(date); @@ -538,8 +555,8 @@ function PlaceholderType(props) { dateFormat={ props.selectDate ? props.selectDate?.format - : props.pos?.dateFormat - ? props.pos?.dateFormat + : props.pos?.options?.validation?.format + ? props.pos?.options?.validation?.format : "dd MMMM, YYYY" } /> @@ -583,11 +600,14 @@ function PlaceholderType(props) { value={ textValue ? textValue - : props.pos.widgetValue && props.pos.widgetValue + : props.pos.options?.response && props.pos.options.response } onBlur={handleInputBlur} onChange={(e) => { - handleTextValid(e, /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/); + handleTextValid( + e, + /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ + ); onChangeInput( e.target.value, props.pos.key, @@ -612,13 +632,12 @@ function PlaceholderType(props) { case "radio": return (
- {props.pos?.widgetOption?.map((data, ind) => { + {props.pos.options?.values.map((data, ind) => { return ( { + let option = {}; + + switch (type) { + case "signature": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "stamp": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "checkbox": + option = { + name: "", + values: [], + status: "Optional", + response: false, + validation: {} + }; + return option; + case "text": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + + case "initials": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "name": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "text", + pattern: "" + } + }; + return option; + + case "company": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "job title": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "text", + pattern: "" + } + }; + return option; + case "date": + option = { + name: "", + values: [], + status: "", + response: getDate() + }; + return option; + case "image": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "email": + option = { + name: "", + values: [], + status: "", + response: "", + validation: { + type: "email", + pattern: "" + } + }; + return option; + case "dropdown": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "radio": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + case "label": + option = { + name: "", + values: [], + status: "", + response: "", + validation: {} + }; + return option; + } + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { getSignerPos(item, monitor); }; - const getSignerPos = (item, monitor) => { // setSignerObjId(""); // setContractName(""); @@ -351,15 +497,9 @@ function PlaceHolderSign() { isDrag: false, scale: scale, isMobile: isMobile, - yBottom: window.innerHeight / 2 - 60, zIndex: posZIndex, type: dragTypeValue, - widgetValue: - dragTypeValue === "checkbox" - ? false - : dragTypeValue === "date" - ? getDate() - : "" + options: addWidgetOptions(dragTypeValue) }; dropData.push(dropObj); placeHolder = { @@ -374,28 +514,17 @@ function PlaceHolderSign() { .getBoundingClientRect(); const x = offset.x - containerRect.left; const y = offset.y - containerRect.top; - const ybottom = containerRect.bottom - offset.y; - const dropObj = { xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, isStamp: (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, - isDrag: false, - firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, - firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, - yBottom: ybottom, scale: scale, isMobile: isMobile, zIndex: posZIndex, type: dragTypeValue, - widgetValue: - dragTypeValue === "checkbox" - ? false - : dragTypeValue === "date" - ? getDate() - : "" + options: addWidgetOptions(dragTypeValue) }; dropData.push(dropObj); @@ -538,7 +667,6 @@ function PlaceHolderSign() { //function for set and update x and y postion after drag and drop signature tab const handleStop = (event, dragElement, signerId, key) => { - console.log("handle stop"); if (!isResize && isDragging) { const dataNewPlace = addZIndex(signerPos, key, setZIndex); let updateSignPos = [...signerPos]; @@ -647,7 +775,6 @@ function PlaceHolderSign() { } return obj; }); - console.log("signerpos3"); setSignerPos(newUpdateSigner); } else { const updateFilter = signerPos.filter((data) => data.Id !== Id); @@ -988,13 +1115,12 @@ function PlaceHolderSign() { const getXYdata = getPageNumer[0].pos; const getPosData = getXYdata; - const addSignPos = getPosData.map((position, ind) => { + const addSignPos = getPosData.map((position) => { if (position.key === signKey) { if (widgetType === "radio") { if (addOption) { return { ...position, - Height: position.Height ? position.Height + 15 : defaultWidthHeight(widgetType).height + 15 @@ -1009,15 +1135,21 @@ function PlaceHolderSign() { } else { return { ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions + options: { + ...position.options, + name: dropdownName, + values: dropdownOptions + } }; } } else { return { ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions + options: { + ...position.options, + name: dropdownName, + values: dropdownOptions + } }; } } @@ -1138,6 +1270,8 @@ function PlaceHolderSign() { //function for base on condition to add checkbox widget status and input text validation in signerPos array const handleApplyWidgetsStatus = (textValidate) => { + const options = ["email", "number", "text"]; + const regexType = options.includes(textValidate); let regularExpression = textValidate; const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); @@ -1158,19 +1292,32 @@ function PlaceHolderSign() { if (selectRequiredType === "Read only") { return { ...position, - widgetStatus: selectRequiredType, - widgetValue: true + options: { + ...position.options, + status: selectRequiredType, + response: true + } }; } else { return { ...position, - widgetStatus: selectRequiredType + options: { + ...position.options, + status: selectRequiredType, + response: false + } }; } } else { return { ...position, - validation: regularExpression + options: { + ...position.options, + validation: { + type: regexType ? regularExpression : "regex", + pattern: !regexType ? regularExpression : "" + } + } }; } } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 37a20258b..425745505 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -67,7 +67,10 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => { ) { return { ...item, - widgetValue: widgetData, + options: { + ...item.options, + response: widgetData + }, Width: calculateInitialWidthHeight(item.type, widgetData).getWidth, Height: calculateInitialWidthHeight(item.type, widgetData).getHeight }; @@ -109,22 +112,32 @@ export const onChangeInput = ( if (getPageNumer.length > 0) { const getXYdata = getPageNumer[0].pos; const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === signKey) { + const addSignPos = getPosData.map((position, ind) => { + if (position.key === signKey) { if (dateFormat) { return { - ...url, - widgetValue: value, - dateFormat: dateFormat + ...position, + options: { + ...position.options, + response: value, + validation: { + type: "date-format", + format: dateFormat // This indicates the required date format explicitly. + } + } }; } else { return { - ...url, - widgetValue: value + ...position, + + options: { + ...position.options, + response: value + } }; } } - return url; + return position; }); const newUpdateSignPos = getPlaceHolder.map((obj) => { @@ -147,11 +160,14 @@ export const onChangeInput = ( } else { let getXYdata = xyPostion[index].pos; - const updatePosition = getXYdata.map((positionData, ind) => { + const updatePosition = getXYdata.map((positionData) => { if (positionData.key === signKey) { return { ...positionData, - widgetValue: value + options: { + ...positionData.options, + response: value + } }; } return positionData; @@ -493,7 +509,11 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { Width: getIMGWH.newWidth, Height: getIMGWH.newHeight, SignUrl: image.src, - ImageType: image.imgType + ImageType: image.imgType, + options: { + ...position.options, + response: image.src + } }; } return position; @@ -549,7 +569,11 @@ export function onSaveSign( ...position, Width: posWidth, Height: posHeight, - SignUrl: signatureImg + SignUrl: signatureImg, + options: { + ...position.options, + response: signatureImg + } }; } return position; @@ -613,7 +637,7 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { const getPageNo = xyPostion[i].pageNumber; const getPosData = getXYdata; - const addSign = getPosData.map((position, ind) => { + const addSign = getPosData.map((position) => { getIMGWH = calculateImgAspectRatio(imgWH, position); if (position.type) { if (position?.type === "signature") { @@ -622,7 +646,11 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { SignUrl: defaultSignImg, Width: getIMGWH.newWidth, Height: getIMGWH.newHeight, - ImageType: "default" + ImageType: "default", + options: { + ...position.options, + response: defaultSignImg + } }; } } else if (position && !position.isStamp) { @@ -631,7 +659,11 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { SignUrl: defaultSignImg, Width: getIMGWH.newWidth, Height: getIMGWH.newHeight, - ImageType: "default" + ImageType: "default", + options: { + ...position.options, + response: defaultSignImg + } }; } return position; @@ -1030,6 +1062,15 @@ export const multiSignEmbed = async ( } }; const randomboxId = "randombox_" + imgData.key; + const widgetTypeExist = [ + "text", + "name", + "company", + "job title", + "date", + "email", + "label" + ].includes(imgData.type); if (imgData.type === "checkbox") { const checkBox = form.createCheckBox(randomboxId); @@ -1039,25 +1080,17 @@ export const multiSignEmbed = async ( width: scaleWidth, height: scaleHeight }); - if (imgData.widgetValue) { + if (imgData.options.response) { checkBox.check(); } else { checkBox.uncheck(); } checkBox.enableReadOnly(); - } else if ( - imgData.type === "text" || - imgData.type === "name" || - imgData.type === "company" || - imgData.type === "job title" || - imgData.type === "date" || - imgData.type === "email" || - imgData.type === "label" - ) { + } else if (widgetTypeExist) { const font = await pdfDoc.embedFont("Helvetica"); const fontSize = 12; - const textContent = imgData.widgetValue; + const textContent = imgData.options?.response; page.drawText(textContent, { x: xPos(imgData), y: yPos(imgData) + 10, @@ -1067,8 +1100,8 @@ export const multiSignEmbed = async ( }); } else if (imgData.type === "dropdown") { const dropdown = form.createDropdown(randomboxId); - dropdown.addOptions(imgData.widgetOption); - dropdown.select(imgData.widgetValue); + dropdown.addOptions(imgData?.options?.values); + dropdown.select(imgData.options?.response); dropdown.addToPage(page, { x: xPos(imgData), y: yPos(imgData), @@ -1080,8 +1113,8 @@ export const multiSignEmbed = async ( const radioGroup = form.createRadioGroup(randomboxId); let addYPosition = 18; - for (let i = 1; i <= imgData?.widgetOption.length; i++) { - const data = imgData?.widgetOption[i - 1]; + for (let i = 1; i <= imgData?.options?.values.length; i++) { + const data = imgData?.options?.values[i - 1]; let yPosition; if (i > 1) { yPosition = yPos(imgData) - addYPosition; @@ -1100,7 +1133,7 @@ export const multiSignEmbed = async ( } } - radioGroup.select(imgData.widgetValue); + radioGroup.select(imgData.options?.response); radioGroup.enableReadOnly(); } else { page.drawImage(img, { @@ -1164,49 +1197,9 @@ export const handleImageResize = ( (data) => data.pageNumber === pageNumber ); if (getPageNumer.length > 0) { - // const getXYdata = getPageNumer[0].pos.filter( - // (data, ind) => data.key === key && data.Width && data.Height - // ); - // if (getXYdata.length > 0) { - // const getXYdata = getPageNumer[0].pos; - // const getPosData = getXYdata; - // const addSignPos = getPosData.map((url, ind) => { - // if (url.key === key) { - // return { - // ...url, - // Width: ref.offsetWidth, - // Height: ref.offsetHeight, - // IsResize: showResize ? true : false - // }; - // } - // return url; - // }); - - // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - // if (obj.pageNumber === pageNumber) { - // return { ...obj, pos: addSignPos }; - // } - // return obj; - // }); - - // // const newUpdateSigner = signerPos.map((obj, ind) => { - // // if (obj.signerObjId === signerId) { - // // return { ...obj, placeHolder: newUpdateSignPos }; - // // } - // // return obj; - // // }); - - // const newUpdateSigner = signerPos.map((obj, ind) => { - // if (obj.Id === signerId) { - // return { ...obj, placeHolder: newUpdateSignPos }; - // } - // return obj; - // }); - // setSignerPos(newUpdateSigner); - // } else { const getXYdata = getPageNumer[0].pos; const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { + const addSignPos = getPosData.map((url) => { if (url.key === key) { return { ...url, @@ -1218,19 +1211,13 @@ export const handleImageResize = ( return url; }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + const newUpdateSignPos = getPlaceHolder.map((obj) => { if (obj.pageNumber === pageNumber) { return { ...obj, pos: addSignPos }; } return obj; }); - // const newUpdateSigner = signerPos.map((obj, ind) => { - // if (obj.signerObjId === signerId) { - // return { ...obj, placeHolder: newUpdateSignPos }; - // } - // return obj; - // }); const newUpdateSigner = signerPos.map((obj, ind) => { if (obj.Id === signerId) { return { ...obj, placeHolder: newUpdateSignPos }; @@ -1240,7 +1227,6 @@ export const handleImageResize = ( setSignerPos(newUpdateSigner); } - // } } };