diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 005cc4cb2..5b0dbf2a9 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -368,8 +368,9 @@ function PdfRequestFiles() { return true; } }; + //function for embed signature or image url in pdf - async function embedImages() { + async function embedWidgetsData() { const validateSigning = checkSendInOrder(); if (validateSigning) { const checkUser = signerPos.filter( @@ -378,69 +379,122 @@ function PdfRequestFiles() { if (checkUser && checkUser.length > 0) { let unSignUrlData, checkboxExist, - isReadOnly, - minCountAlert = false, - checkboxKey; + requiredRadio, + showAlert = false, + widgetKey, + radioExist, + requiredCheckbox + ; for (let i = 0; i < checkUser[0].placeHolder.length; i++) { checkboxExist = checkUser[0].placeHolder[i].pos.some( (data) => data.type === "checkbox" ); - + radioExist = checkUser[0].placeHolder[i].pos.some( + (data) => data.type === "radio" + ); if (checkboxExist) { - isReadOnly = checkUser[0].placeHolder[i].pos.filter( - (position) => !position.options?.isReadOnly + requiredCheckbox = checkUser[0].placeHolder[i].pos.filter( + (position) => !position.options?.isReadOnly && position.type ==='checkbox' ); - if (isReadOnly && isReadOnly.length > 0) { - for (let i = 0; i < isReadOnly.length; i++) { + if (requiredCheckbox && requiredCheckbox.length > 0) { + for (let i = 0; i < requiredCheckbox.length; i++) { const minCount = - isReadOnly[i].options?.validation?.minRequiredCount; + requiredCheckbox[i].options?.validation?.minRequiredCount; const parseMin = minCount && parseInt(minCount); const maxCount = - isReadOnly[i].options?.validation?.maxRequiredCount; + requiredCheckbox[i].options?.validation?.maxRequiredCount; const parseMax = maxCount && parseInt(maxCount); - const response = isReadOnly[i].options?.response?.length; - const defaultValue = isReadOnly[i].options?.defaultValue?.length; + const response = requiredCheckbox[i].options?.response?.length; + const defaultValue = requiredCheckbox[i].options?.defaultValue?.length; if (parseMin === 0 && parseMax === 0) { - if (!minCountAlert) { - minCountAlert = false; + if (!showAlert) { + showAlert = false; } } else if (parseMin === 0 && parseMax > 0) { - if (!minCountAlert) { - minCountAlert = false; + if (!showAlert) { + showAlert = false; } } else if (!response) { if (!defaultValue) { - if (!minCountAlert) { - minCountAlert = true; - checkboxKey = isReadOnly[i].key; + if (!showAlert) { + showAlert = true; + widgetKey = requiredCheckbox[i].key; setminRequiredCount(parseMin); } } } else if (parseMin > 0 && parseMin > response) { - if (!minCountAlert) { - minCountAlert = true; - checkboxKey = isReadOnly[i].key; + if (!showAlert) { + showAlert = true; + widgetKey = requiredCheckbox[i].key; setminRequiredCount(parseMin); } } } } - } else { - unSignUrlData = checkUser[0].placeHolder[i].pos.filter( - (pos) => !pos?.SignUrl && !pos.options.response + } else if(radioExist) { + requiredRadio = checkUser[0].placeHolder[i].pos.filter( + (position) => !position.options?.isReadOnly && position.type ==='radio' + ); + + if (requiredRadio && requiredRadio.length > 0) { + let checkSigned ; + for(let i=0; i < requiredRadio.length; i++){ + checkSigned = requiredRadio[i]?.options.response + if(!checkSigned){ + let checkDefaultSigned = requiredRadio[i]?.options.defaultValue + if(!checkDefaultSigned){ + if (!showAlert) { + showAlert = true; + widgetKey = requiredRadio[i].key; + } + } + } + } + } + } else{ + + const requiredWidgets = checkUser[0].placeHolder[i].pos.filter( + (position) => !position.options?.isReadOnly ); + if(requiredWidgets && requiredCheckbox.length >0){ + unSignUrlData = checkUser[0].placeHolder[i].pos.filter( + (pos) => !pos?.SignUrl && !pos.options.response + ); + let checkSigned ; + for(let i=0; i < requiredWidgets.length; i++){ + checkSigned = requiredWidgets[i]?.options?.response + if(!checkSigned){ + const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl + + let checkDefaultSigned = requiredWidgets[i]?.options?.defaultValue + if(!checkSignUrl){ + if(!checkDefaultSigned){ + if (!showAlert) { + showAlert = true; + widgetKey = requiredWidgets[i].key; + } + } + } + + } + } + } } } - if (checkboxExist && isReadOnly && minCountAlert) { - setUnSignedWidgetId(checkboxKey); + if (checkboxExist && requiredCheckbox && showAlert) { + setUnSignedWidgetId(widgetKey); setWidgetsTour(true); - } else if (!checkboxExist && unSignUrlData && unSignUrlData.length > 0) { - setUnSignedWidgetId(unSignUrlData[0].key); + }else if(radioExist && showAlert ){ + setUnSignedWidgetId(widgetKey); setWidgetsTour(true); } + else if (showAlert) { + setUnSignedWidgetId(widgetKey); + setWidgetsTour(true); + } else { setIsUiLoading(true); const pngUrl = checkUser[0].placeHolder; @@ -555,6 +609,7 @@ function PdfRequestFiles() { flag, containerWH ); + //function for call to embed signature in pdf and get digital signature pdf try { const res = await signPdfFun( @@ -1188,7 +1243,7 @@ function PdfRequestFiles() { signerPos={signerPos} isSigned={isSigned} isCompleted={isCompleted} - embedImages={embedImages} + embedWidgetsData={embedWidgetsData} isShowHeader={true} setIsDecline={setIsDecline} decline={true} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 9e3f40565..40c0b161c 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -98,7 +98,7 @@ function SignYourSelf() { const [isDontShow, setIsDontShow] = useState(false); const divRef = useRef(null); const nodeRef = useRef(null); - const [{ isOver }, drop] = useDrop({ + const [, drop] = useDrop({ accept: "BOX", drop: (item, monitor) => addPositionOfSignature(item, monitor), collect: (monitor) => ({ @@ -180,7 +180,7 @@ function SignYourSelf() { if (documentData && documentData.length > 0) { setPdfDetails(documentData); - setIsUiLoading(false); + const isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted; if (isCompleted) { @@ -195,6 +195,12 @@ function SignYourSelf() { }; if (showComplete) { setShowAlreadySignDoc(alreadySign); + }else{ + setIsUiLoading(false); + setIsSignPad(false); + setIsEmail(true); + setXyPostion([]); + setSignBtnPosition([]); } } } else if ( @@ -561,13 +567,12 @@ function SignYourSelf() { }; //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url - async function embedImages() { + async function embedWidgetsData() { let checkSigned = 0; 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( + const posWidgetData = xyPostion[i].pos.filter( (pos) => pos.options.response ); @@ -620,13 +625,10 @@ function SignYourSelf() { flag, containerWH ); - +// console.log(pdfBytes) //function for call to embed signature in pdf and get digital signature pdf - signPdfFun(pdfBytes, documentId); - setIsSignPad(false); - setIsEmail(true); - setXyPostion([]); - setSignBtnPosition([]); + await signPdfFun(pdfBytes, documentId); + } } @@ -1150,7 +1152,7 @@ function SignYourSelf() { changePage={changePage} pdfUrl={pdfUrl} documentStatus={documentStatus} - embedImages={embedImages} + embedWidgetsData={embedWidgetsData} pdfDetails={pdfDetails} isShowHeader={true} currentSigner={true} @@ -1202,7 +1204,7 @@ 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 ? ( diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 761a7047b..c4351b7c6 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -143,7 +143,7 @@ const TemplatePlaceholder = () => { const [isDragging, setIsDragging] = useState(false); const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]); const [isCheckbox, setIsCheckbox] = useState(false); - + const [widgetName, setWidgetName] = useState(false); const senderUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -312,6 +312,9 @@ const TemplatePlaceholder = () => { //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { + if (item && item.text) { + setWidgetName(item.text); + } getSignerPos(item, monitor); }; @@ -445,7 +448,7 @@ const TemplatePlaceholder = () => { setIsCheckbox(true); } else if (dragTypeValue === "radio") { setIsRadio(true); - } else { + } else if(dragTypeValue !== 'label' && dragTypeValue !== 'signature') { setIsNameModal(true); } setCurrWidgetsDetails(""); @@ -1155,6 +1158,7 @@ const TemplatePlaceholder = () => { }; const handleNameModal = () => { setIsNameModal(!isNameModal); + setCurrWidgetsDetails({}) }; return ( @@ -1488,6 +1492,7 @@ const TemplatePlaceholder = () => { /> { textvalidate: props.defaultdata?.options?.validation?.type === "regex" ? props.defaultdata?.options?.validation?.pattern - : props.defaultdata?.options?.validation?.type || "text" + : props.defaultdata?.options?.validation?.type || "" }); } else { setFormdata({ - name: props.defaultdata?.options?.name || props?.widgetName || "" + ...formdata, + name: props.defaultdata?.options?.name || props?.widgetName || "", + }); } }, [props.defaultdata, props.widgetName]); @@ -114,7 +116,7 @@ const NameModal = (props) => { <>
{ zIndex: 2 }} name="textvalidate" + placeholder="Enter custom expression" value={formdata.textvalidate} onChange={(e) => handleChange(e)} onBlur={() => handleBlurRegex()} @@ -202,9 +205,6 @@ const NameModal = (props) => { )}
-
{ type="submit" className="finishBtn" > - Add + Save diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index 3cc894971..c47841bc4 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -30,8 +30,8 @@ function DropdownWidgetOption(props) { ); setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly); setStatus(props.currWidgetsDetails?.options?.status || "required"); - setDefaultValue(props.currWidgetsDetails?.options?.defaultValue); - setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue); + setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || ""); + setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue|| []); } else { setStatus("required"); } @@ -58,12 +58,14 @@ function DropdownWidgetOption(props) { setDropdownOptionList(getUpdatedOptions); props.handleSaveWidgetsOptions(null, null, null, null, null, false, flage); }; - + + const handleSaveOption = () => { const defaultData = defaultCheckbox && defaultCheckbox.length > 0 ? defaultCheckbox : defaultValue; + props.handleSaveWidgetsOptions( dropdownName, dropdownOptionList, @@ -78,11 +80,12 @@ function DropdownWidgetOption(props) { props.setShowDropdown(false); setDropdownOptionList(["option-1", "option-2"]); setDropdownName(props.type); - props.setCurrWidgetsDetails([]); + props.setCurrWidgetsDetails({}); setIsReadOnly(false); setMinCount(0); setMaxCount(0); setDefaultCheckbox([]); + setDefaultValue("") }; const handleSetMinMax = (e) => { @@ -94,16 +97,16 @@ function DropdownWidgetOption(props) { } }; - // const handleDefaultCheck = (index) => { - // const getDefaultCheck = defaultCheckbox.includes(index); - - // if (getDefaultCheck[0] === index) { - // return "check"; - // } else { - // return "uncheck"; - // } - // // return "check"; - // }; + const handleDefaultCheck = (index) => { + const getDefaultCheck = defaultCheckbox.includes(index); + if (getDefaultCheck) { + return true; + } else { + return false; + } + + }; + return ( //props.showDropdown
- {props.type === "checkbox" && !props.isSignYourself && ( - <> + + +
{ + e.preventDefault(); + handleSaveOption(); + }} + > +
+ {["checkbox","radio"].includes(props.type) && !props.isSignYourself && ( +
- +
)} - - { - e.preventDefault(); - handleSaveOption(); - }} - > -
@@ -144,65 +148,12 @@ function DropdownWidgetOption(props) { onChange={(e) => setDropdownName(e.target.value)} className="drodown-input" /> - {props.type !== "checkbox" && ( - <> - -
- {statusArr.map((data, ind) => { - return ( -
- setStatus(data.toLowerCase())} - checked={status.toLowerCase() === data.toLowerCase()} - /> -
- {data} -
-
- ); - })} -
- - )} - {props.type !== "checkbox" && ( - <> - - setDefaultValue(e.target.value)} - className="drodown-input" - /> - - )} + + {props.type === "checkbox" && !props.isSignYourself && ( <> + {props.type === "checkbox" && !props.isSignYourself && ( + { + + if (e.target.checked) { + const getDefaultCheck = + defaultCheckbox?.includes(index); + if (!getDefaultCheck) { + setDefaultCheckbox((prev) => [...prev, index]); + } + } else { + const removeOption = defaultCheckbox.filter( + (data) => data !== index + ); + setDefaultCheckbox(removeOption); + } + }} + style={{width:"23px",height:"19px",marginRight:"5px"}} /> + )} handleInputChange(index, e.target.value)} /> - {props.type === "checkbox" && !props.isSignYourself && ( - - )} + handleDeleteInput(index)} @@ -305,6 +253,72 @@ function DropdownWidgetOption(props) { className="fa-solid fa-square-plus" >
+ {["dropdown","radio"].includes(props.type) && ( + <> + + + + + + )} + {props.type !== "checkbox" && props.type !== 'radio' && ( + <> +
+ {statusArr.map((data, ind) => { + return ( +
+ setStatus(data.toLowerCase())} + checked={status.toLowerCase() === data.toLowerCase()} + /> +
+ {data} +
+
+ ); + })} +
+ + )}
Cancel diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index ce9c0c469..44f23a98f 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -176,8 +176,11 @@ function Placeholder(props) { } else { props?.handleNameModal(true); } + + if(props.isPlaceholder){ + props.setUniqueId(props.data.Id); + } props.setSignKey(props.pos.key); - props.setUniqueId(props.data.Id); props.setWidgetType(props.pos.type); props.setCurrWidgetsDetails(props.pos); }; @@ -185,31 +188,51 @@ function Placeholder(props) { return ( props.isShowBorder && ( <> - {props.isPlaceholder && ( + {(props.isPlaceholder || props.isSignYourself) && ( <> - {props.type !== "date" && ( + {props.pos.type === 'checkbox' && props.isSignYourself ? + ( + { + e.stopPropagation(); + handleWidgetsOnclick(); + }} + onTouchEnd={(e) => { + e.stopPropagation(); + handleWidgetsOnclick(); + }} + className="fa-solid fa-gear settingIcon" + style={{ + color: "#188ae2", + right:'9px', + top: "-28px" + + }} + >): props.pos.type !== "date" && props.pos.type !== 'label' && props.pos.type !== 'signature' && !props.isSignYourself &&( { - e.stopPropagation(); - handleWidgetsOnclick(); - }} - onTouchEnd={(e) => { - e.stopPropagation(); - handleWidgetsOnclick(); - }} - className="fa-solid fa-gear settingIcon" - style={{ - color: "#188ae2", - right: ["checkbox", "radio"].includes(props.pos.type) - ? "24px" - : "47px", - top: ["checkbox", "radio"].includes(props.pos.type) - ? "-28px" - : "-19px" - }} - > - )} - {props.pos.type !== "label" && ( + onClick={(e) => { + e.stopPropagation(); + handleWidgetsOnclick(); + }} + onTouchEnd={(e) => { + e.stopPropagation(); + handleWidgetsOnclick(); + }} + className="fa-solid fa-gear settingIcon" + style={{ + color: "#188ae2", + right: ["checkbox", "radio"].includes(props.pos.type) + ? "24px" + : "47px", + top: ["checkbox", "radio"].includes(props.pos.type) + ? "-28px" + : "-19px" + }} + > + ) + } + + {props.pos.type !== "label" && !props.isSignYourself && ( + )} )} @@ -330,13 +354,11 @@ function Placeholder(props) { style={{ color: "#188ae2", right: - (props.pos.type === "checkbox" || props.pos.type === "radio") && - props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") ? "-9px" : "12px", top: - (props.pos.type === "checkbox" || props.pos.type === "radio") && - props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") ? "-28px" : "-18px" }} @@ -365,13 +387,11 @@ function Placeholder(props) { style={{ color: "#188ae2", right: - (props.pos.type === "checkbox" || props.pos.type === "radio") && - props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") ? "-27px" : "-8px", top: - (props.pos.type === "checkbox" || props.pos.type === "radio") && - props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") ? "-28px" : "-18px" }} @@ -495,15 +515,13 @@ function Placeholder(props) { props.pos.key === props.selectWidgetId ? ( @@ -534,7 +552,7 @@ function Placeholder(props) { left: props.xPos(props.pos, props.isSignYourself), top: props.yPos(props.pos, props.isSignYourself), width: props.posWidth(props.pos, props.isSignYourself), - height: props.posHeight(props.pos, props.isSignYourself), + // height: props.posHeight(props.pos, props.isSignYourself), zIndex: "10" }} onTouchEnd={() => { diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js index ca45b22ba..daf2e6e93 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js @@ -3,9 +3,8 @@ import { themeColor } from "../../utils/ThemeColor/backColor"; import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils"; function PlaceholderBorder(props) { const getResizeBorderExtraWidth = - (props.pos.type === "checkbox" || props.pos.type === "radio") && - props.isPlaceholder - ? 38 + (props.pos.type === "checkbox" || props.pos.type === "radio") + ? 38 : resizeBorderExtraWidth(); const defaultWidth = defaultWidthHeight(props.pos.type).width; const defaultHeight = defaultWidthHeight(props.pos.type).height; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 47223b13f..c7a5d9db8 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -7,16 +7,15 @@ import RegexParser from "regex-parser"; function PlaceholderType(props) { const type = props.pos.type; - const [selectOption, setSelectOption] = useState(""); + const [selectOption, setSelectOption] = useState(props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue :""); const [startDate, setStartDate] = useState(new Date()); const [validatePlaceholder, setValidatePlaceholder] = useState(""); const inputRef = useRef(null); - const [textValue, setTextValue] = useState(""); - const [isCheckedRadio, setIsCheckedRadio] = useState({ - isChecked: false, - selectValue: "" - }); - const [selectedCheckbox, setSelectedCheckbox] = useState([]); + const [textValue, setTextValue] = useState(); + const [selectedCheckbox, setSelectedCheckbox] = useState([]); + + + const validateExpression = (regexValidation) => { let regexObject = regexValidation; @@ -31,6 +30,7 @@ function PlaceholderType(props) { } }; + const handleInputBlur = () => { props.setDraggingEnabled(true); const validateType = props.pos?.options?.validation?.type; @@ -89,58 +89,10 @@ function PlaceholderType(props) { const updateDate = new Date(); setStartDate(updateDate); } + setTextValue(props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue :"") }, []); - useEffect(() => { - const isCheckedValue = isCheckedRadio?.selectValue - ? isCheckedRadio.selectValue - : selectedCheckbox; - if (props.pos?.type && props.pos.type === "checkbox") { - let isDefaultValue; - if (props.isNeedSign) { - isDefaultValue = props.pos.options?.defaultValue; - } - if (isDefaultValue && isDefaultValue.length > 0) { - onChangeInput( - isCheckedValue, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.Id, - false, - null, - null, - null, - true - ); - } else { - onChangeInput( - isCheckedValue, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.Id, - false, - null, - props.isPlaceholder, - isCheckedRadio.selectedKey - ); - } - } else if (props.pos?.type && props.pos.type === "radio") { - onChangeInput( - isCheckedValue, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.Id, - false, - null - ); - } - }, [isCheckedRadio]); + //for handle default checked options useEffect(() => { @@ -157,7 +109,7 @@ function PlaceholderType(props) { const [day, month, year] = props.saveDateFormat.split("-"); updateDate = new Date(`${year}-${month}-${day}`); } else { - updateDate = new Date(props.saveDateFormat); + updateDate = new Date(); } // const updateDate = new Date(props.saveDateFormat); setStartDate(updateDate); @@ -201,7 +153,7 @@ function PlaceholderType(props) { ref={ref} > {dateValue(value)} - +
)); @@ -233,7 +185,7 @@ function PlaceholderType(props) { const selectCheckbox = (ind) => { const res = props.pos.options?.response; const defaultCheck = props.pos.options?.defaultValue; - if (res) { + if (res && res?.length>0) { const isSelectIndex = res.indexOf(ind); if (isSelectIndex > -1) { return true; @@ -253,6 +205,83 @@ function PlaceholderType(props) { } }; + const handleRadioCheck =(data)=>{ + const defaultData = props.pos.options?.defaultValue; + if(textValue === data){ + return true; + }else if(defaultData ===data) + { + return true; + } + else{ + return false; + } +} + + //function for set checked and unchecked value of checkbox + const handleCheckboxValue =(isChecked,ind)=>{ + let updateSelectedCheckbox =[], checkedList; + let isDefaultValue,isDefaultEmpty; + if (props.pos?.type && ["checkbox","radio"].includes(props.pos.type) ) { + updateSelectedCheckbox = selectedCheckbox + if(isChecked){ + updateSelectedCheckbox.push(ind) + setSelectedCheckbox(updateSelectedCheckbox) + }else{ + checkedList = selectedCheckbox.filter((data)=> data!==ind) + setSelectedCheckbox(checkedList) + } + if (props.isNeedSign) { + isDefaultValue = props.pos.options?.defaultValue; + } + if (isDefaultValue && isDefaultValue.length > 0) { + isDefaultEmpty = true; + } + onChangeInput( + checkedList ? checkedList :updateSelectedCheckbox, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.Id, + false, + null, + null, + null, + isDefaultEmpty + ); + } + } + + //function to handle select radio widget and set value seletced by user + const handleCheckRadio =(isChecked,data)=>{ + let isDefaultValue,isDefaultEmpty; + if (props.isNeedSign) { + isDefaultValue = props.pos.options?.defaultValue; + } + if (isDefaultValue ) { + isDefaultEmpty = true; + } + if(isChecked){ + setTextValue(data) + }else{ + setTextValue("") + } + onChangeInput( + textValue, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.Id, + false, + null, + null, + null, + isDefaultEmpty + ); + + } switch (props.pos.type) { case "signature": return props.pos.SignUrl ? ( @@ -325,26 +354,16 @@ function PlaceholderType(props) { const maxCountInt = maxRequired && parseInt(maxRequired); if (maxCountInt > 0) { if (selectedCheckbox.length <= maxCountInt - 1) { - setSelectedCheckbox((prev) => [...prev, ind]); + handleCheckboxValue(e.target.checked,ind) } } else { - setSelectedCheckbox((prev) => [...prev, ind]); + handleCheckboxValue(e.target.checked,ind) } } else { - const removeOption = selectedCheckbox.filter( - (data) => data !== ind - ); - setSelectedCheckbox(removeOption); + handleCheckboxValue(e.target.checked,ind) } }} - onClick={() => { - !props.isPlaceholder && - setIsCheckedRadio({ - isChecked: !isCheckedRadio, - selectValue: "", - selectedKey: ind - }); - }} + /> ); })} @@ -358,13 +377,7 @@ function PlaceholderType(props) { ref={inputRef} placeholder={validatePlaceholder} style={{ fontSize: calculateFontSize() }} - value={ - props.pos?.options?.validation - ? textValue - ? textValue - : props.pos.options?.response && props.pos.options.response - : textValue - } + value={textValue} type="text" tabIndex="0" disabled={ @@ -374,6 +387,7 @@ function PlaceholderType(props) { } onBlur={handleInputBlur} onChange={(e) => { + setTextValue(e.target.value); onChangeInput( e.target.value, @@ -468,11 +482,7 @@ function PlaceholderType(props) { style={{ fontSize: calculateFontSize() }} className="inputPlaceholder" type="text" - value={ - textValue - ? textValue - : props.pos.options.response && props.pos.options.response - } + value={textValue} onBlur={handleInputBlur} onChange={(e) => { handleTextValid(e); @@ -506,11 +516,7 @@ function PlaceholderType(props) { ref={inputRef} placeholder={"company"} style={{ fontSize: calculateFontSize() }} - value={ - textValue - ? textValue - : props.pos.options.response && props.pos.options.response - } + value={textValue} onBlur={handleInputBlur} onChange={(e) => { handleTextValid(e); @@ -544,11 +550,7 @@ function PlaceholderType(props) { ref={inputRef} placeholder={"job title"} style={{ fontSize: calculateFontSize() }} - value={ - textValue - ? textValue - : props.pos.options.response && props.pos.options.response - } + value={textValue} onBlur={handleInputBlur} onChange={(e) => { handleTextValid(e); @@ -635,11 +637,7 @@ function PlaceholderType(props) { ref={inputRef} placeholder={"email"} style={{ fontSize: calculateFontSize() }} - value={ - textValue - ? textValue - : props.pos.options?.response && props.pos.options.response - } + value={textValue} onBlur={handleInputBlur} onChange={(e) => { handleTextValid(e); @@ -679,15 +677,22 @@ function PlaceholderType(props) { marginTop: "5px" }} type="radio" - disabled={props.isPlaceholder} - checked={isCheckedRadio.selectValue === data} + disabled={ + props.isNeedSign && + props.pos.options?.isReadOnly && + props.pos.options?.isReadOnly + } + // disabled={props.isPlaceholder} + checked={handleRadioCheck(data)} // checked={isCheckedRadio.isChecked} - onClick={() => { - setIsCheckedRadio({ - isChecked: !isCheckedRadio, - selectValue: data - }); + onChange={(e)=>{ + if(!props.isPlaceholder){ + handleCheckRadio(e.target.checked,data) + + } + }} + /> ); })} diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index 4cc1ec4ce..f736d3d31 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -204,18 +204,18 @@ function FieldsComponent({ const widgetRef = [ dragSignature, dragStamp, - dropdown, - checkbox, - text, initials, + label, + text, + checkbox, + dropdown, + radio, + image, + date, name, + email, company, jobTitle, - date, - image, - email, - radio, - label ]; const getWidgetArray = widgets; const newUpdateSigner = getWidgetArray.map((obj, ind) => { diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index b7a38659b..695821b36 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/microfrontends/SignDocuments/src/Component/component/header.js @@ -21,7 +21,7 @@ function Header({ changePage, pdfUrl, documentStatus, - embedImages, + embedWidgetsData, pdfDetails, signerPos, signersdata, @@ -423,9 +423,9 @@ function Header({ data-tut="reactourThird" onClick={() => { if (!pdfUrl) { - embedImages(); + embedWidgetsData(); } else if (isPdfRequestFiles) { - embedImages(); + embedWidgetsData(); } }} style={{ @@ -523,7 +523,7 @@ function Header({ className="finishBtn sendHover" onClick={() => { if (!pdfUrl) { - embedImages(); + embedWidgetsData(); } }} > @@ -669,7 +669,7 @@ function Header({ type="button" className="finishBtn sendHover" onClick={() => { - embedImages(); + embedWidgetsData(); }} > Finish @@ -767,7 +767,7 @@ function Header({ className="finishBtn sendHover" onClick={() => { if (!pdfUrl) { - embedImages(); + embedWidgetsData(); } }} > diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index c85e8aee1..9f739d7b2 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -442,6 +442,10 @@ function RenderPdf({ setSelectWidgetId={setSelectWidgetId} selectWidgetId={selectWidgetId} handleUserName={handleUserName} + setIsCheckbox={setIsCheckbox} + setCurrWidgetsDetails={ + setCurrWidgetsDetails + } /> ) ); @@ -624,6 +628,10 @@ function RenderPdf({ setSelectWidgetId={setSelectWidgetId} selectWidgetId={selectWidgetId} handleUserName={handleUserName} + setIsCheckbox={setIsCheckbox} + setCurrWidgetsDetails={ + setCurrWidgetsDetails + } /> ) diff --git a/microfrontends/SignDocuments/src/Component/component/signedby.js b/microfrontends/SignDocuments/src/Component/component/signedby.js index 3d233a4d9..f7e8f8ce8 100644 --- a/microfrontends/SignDocuments/src/Component/component/signedby.js +++ b/microfrontends/SignDocuments/src/Component/component/signedby.js @@ -8,18 +8,17 @@ function Signedby({ pdfDetails }) { }; return ( - -
+
Signed By
-
+
+ + + ); } diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 4e9c86b57..036517be1 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -488,7 +488,7 @@ function PlaceHolderSign() { setIsCheckbox(true); } else if (dragTypeValue === "radio") { setIsRadio(true); - } else { + } else if(dragTypeValue !== 'label' && dragTypeValue !== 'signature') { setIsNameModal(true); } setWidgetType(dragTypeValue); @@ -704,7 +704,7 @@ function PlaceHolderSign() { flag, containerWH ); - + const parseBaseUrl = localStorage.getItem("baseUrl"); const parseAppId = localStorage.getItem("parseAppId"); Parse.initialize(parseAppId); @@ -746,7 +746,7 @@ function PlaceHolderSign() { setIsSendAlert(alert); } }; - + const sendEmailToSigners = async () => { setIsUiLoading(true); const pdfUrl = await embedPrefilllData(); @@ -839,12 +839,15 @@ function PlaceHolderSign() { let updateExpiryDate, data; updateExpiryDate = new Date(); updateExpiryDate.setDate(updateExpiryDate.getDate() + addExtraDays); + //filter label widgets after add label widgets data on pdf + const filterPrefill = signerPos.filter((data) => data.Role !== "prefill"); + try { if (updateExpiryDate) { data = { - Placeholders: signerPos, - SignedUrl: pdfDetails[0].URL, + Placeholders: filterPrefill, + SignedUrl: pdfUrl, Signers: signers, ExpiryDate: { iso: updateExpiryDate, @@ -853,8 +856,8 @@ function PlaceHolderSign() { }; } else { data = { - Placeholders: signerPos, - SignedUrl: pdfDetails[0].URL, + Placeholders: filterPrefill, + SignedUrl: pdfUrl, Signers: signers }; } @@ -880,6 +883,7 @@ function PlaceHolderSign() { isLoad: false }; setIsLoading(loadObj); + setIsUiLoading(false); }) .catch((err) => { console.log("axois err ", err); @@ -1062,7 +1066,7 @@ function PlaceHolderSign() { ...position.options, name: dropdownName, values: dropdownOptions, - status: status, + isReadOnly: isReadOnly, defaultValue: defaultValue } }; @@ -1093,6 +1097,7 @@ function PlaceHolderSign() { minRequiredCount: minCount, maxRequiredCount: maxCount }, + defaultValue: defaultValue, isReadOnly: isReadOnly } }; @@ -1207,6 +1212,7 @@ function PlaceHolderSign() { const handleNameModal = () => { setIsNameModal(!isNameModal); + setCurrWidgetsDetails({}) }; //function for update TourStatus const closeTour = async () => { diff --git a/microfrontends/SignDocuments/src/premitives/GuestSign.js b/microfrontends/SignDocuments/src/premitives/GuestSign.js index 99bc0e11f..9fa32a5e0 100644 --- a/microfrontends/SignDocuments/src/premitives/GuestSign.js +++ b/microfrontends/SignDocuments/src/premitives/GuestSign.js @@ -284,7 +284,7 @@ if(jsonSender?.objectId){ await axios }; //function for embed signature or image url in pdf - async function embedImages() { + async function embedWidgetsData() { const checkUser = signerPos.filter( (data) => data.signerObjId === signerObjectId ); @@ -808,7 +808,7 @@ if(jsonSender?.objectId){ await axios signerPos={signerPos} isSigned={isSigned} isCompleted={isCompleted} - embedImages={embedImages} + embedWidgetsData={embedWidgetsData} isShowHeader={true} setIsDecline={setIsDecline} decline={true} diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index a23288340..e4fe02a61 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -82,10 +82,8 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => { } }); }; -const handleDefaultValue = (ind, defaultValue) => { - const updateDefault = defaultValue.filter((data) => data !== ind); - return updateDefault; -}; + +//function for save widgets value on onchange function export const onChangeInput = ( value, signKey, @@ -130,27 +128,8 @@ export const onChangeInput = ( } } }; - } else if (isPlaceholder) { - return { - ...position, - options: { - ...position.options, - defaultValue: value - } - }; - } else if (selectedKey) { - return { - ...position, - options: { - ...position.options, - response: value, - defaultValue: handleDefaultValue( - selectedKey, - position.options.defaultValue - ) - } - }; - } else if (isDefaultEmpty) { + } + else if (isDefaultEmpty) { return { ...position, options: { @@ -214,6 +193,79 @@ export const onChangeInput = ( } }; +// export const widgets = [ +// { +// type: "signature", +// icon: "fa-solid fa-pen-nib", +// iconSize: "20px" +// }, +// { +// type: "stamp", +// icon: "fa-solid fa-stamp", +// iconSize: "19px" +// }, +// { +// type: "dropdown", +// icon: "fa-solid fa-circle-chevron-down", +// iconSize: "19px" +// }, +// { +// type: "checkbox", +// icon: "fa-solid fa-square-check", +// iconSize: "22px" +// }, +// { +// type: "text", +// icon: "fa-solid fa-font", +// iconSize: "21px" +// }, +// { +// type: "initials", +// icon: "fa-solid fa-signature", +// iconSize: "15px" +// }, +// { +// type: "name", +// icon: "fa-solid fa-user", +// iconSize: "21px" +// }, +// { +// type: "company", +// icon: "fa-solid fa-building", +// iconSize: "25px" +// }, +// { +// type: "job title", +// icon: "fa-solid fa-address-card", +// 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" +// }, +// { +// type: "radio", +// icon: "fa-regular fa-circle-dot", +// iconSize: "20px" +// }, +// { +// type: "label", +// icon: "fa-solid fa-text-width", +// iconSize: "20px" +// } +// ]; + export const widgets = [ { type: "signature", @@ -226,14 +278,14 @@ export const widgets = [ iconSize: "19px" }, { - type: "dropdown", - icon: "fa-solid fa-circle-chevron-down", - iconSize: "19px" + type: "initials", + icon: "fa-solid fa-signature", + iconSize: "15px" }, { - type: "checkbox", - icon: "fa-solid fa-square-check", - iconSize: "22px" + type: "label", + icon: "fa-solid fa-text-width", + iconSize: "20px" }, { type: "text", @@ -241,15 +293,40 @@ export const widgets = [ iconSize: "21px" }, { - type: "initials", - icon: "fa-solid fa-signature", - iconSize: "15px" + type: "checkbox", + icon: "fa-solid fa-square-check", + iconSize: "22px" + }, + { + type: "dropdown", + icon: "fa-solid fa-circle-chevron-down", + iconSize: "19px" + }, + { + type: "radio", + icon: "fa-regular fa-circle-dot", + iconSize: "20px" + }, + { + type: "image", + icon: "fa-solid fa-image", + iconSize: "20px" + }, + { + type: "date", + icon: "fa-solid fa-calendar-days", + iconSize: "20px" }, { type: "name", icon: "fa-solid fa-user", iconSize: "21px" }, + { + type: "email", + icon: "fa-solid fa-envelope", + iconSize: "20px" + }, { type: "company", icon: "fa-solid fa-building", @@ -260,31 +337,6 @@ export const widgets = [ icon: "fa-solid fa-address-card", 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" - }, - { - type: "radio", - icon: "fa-regular fa-circle-dot", - iconSize: "20px" - }, - { - type: "label", - icon: "fa-solid fa-text-width", - iconSize: "20px" - } ]; const getDate = () => { @@ -1031,11 +1083,39 @@ export const multiSignEmbed = async ( const yPos = (pos, ind) => { const resizePos = pos.yPosition; + const widgetHeight = + position.type === "radio" + ? 10 + : position.type === "checkbox" + ? 10 + : scaleHeight; + const newHeight = ind + ? ind > 0 + ? widgetHeight + : 0 + : widgetHeight; + + if (signyourself) { if (isMobile) { - return page.getHeight() - resizePos * scale - scaleHeight; + if (ind && ind > 0 && position.type === "checkbox") { + return page.getHeight() - resizePos * scale - newHeight; + } else if (!ind && position.type === "checkbox") { + return page.getHeight() - resizePos * scale; + } else { + return page.getHeight() - resizePos * scale - newHeight; + } + // return page.getHeight() - resizePos * scale - scaleHeight; } else { - return page.getHeight() - resizePos - scaleHeight; + + if (ind && ind > 0 && position.type === "checkbox") { + return page.getHeight() - resizePos - newHeight; + } else if (!ind && position.type === "checkbox") { + return page.getHeight() - resizePos; + } else { + return page.getHeight() - resizePos - newHeight; + } + // return page.getHeight() - resizePos - scaleHeight; } } else { //checking both condition mobile and desktop view @@ -1063,17 +1143,7 @@ export const multiSignEmbed = async ( return page.getHeight() - y - scaleHeight; } } else { - const widgetHeight = - position.type === "radio" - ? 10 - : position.type === "checkbox" - ? 10 - : scaleHeight; - const newHeight = ind - ? ind > 0 - ? widgetHeight - : 0 - : widgetHeight; + if (ind && ind > 0 && position.type === "checkbox") { return page.getHeight() - resizePos - newHeight; @@ -1104,7 +1174,7 @@ export const multiSignEmbed = async ( const checkboxRandomId = "checkbox" + randomId(); let yPosition; const height = 10; - if (position?.options?.response) { + if (position?.options?.response && position?.options?.response?.length >0) { isCheck = position?.options?.response?.includes(ind); } else if (position?.options?.defaultValue) { isCheck = position?.options?.defaultValue?.includes(ind); @@ -1135,7 +1205,12 @@ export const multiSignEmbed = async ( } else if (widgetTypeExist) { const font = await pdfDoc.embedFont("Helvetica"); const fontSize = 12; - const textContent = position.options?.response; + let textContent; + if (position?.options?.response) { + textContent = position.options?.response; + } else if (position?.options?.defaultValue) { + textContent = position?.options?.defaultValue; + } page.drawText(textContent, { x: xPos(position), y: yPos(position) + 10, @@ -1146,7 +1221,13 @@ export const multiSignEmbed = async ( } else if (position.type === "dropdown") { const dropdown = form.createDropdown(randomboxId); dropdown.addOptions(position?.options?.values); - dropdown.select(position.options?.response); + if (position?.options?.response) { + dropdown.select(position.options?.response); + } else if (position?.options?.defaultValue) { + dropdown.select( position?.options?.defaultValue); + + } + dropdown.addToPage(page, { x: xPos(position), y: yPos(position), @@ -1177,8 +1258,12 @@ export const multiSignEmbed = async ( addYPosition = addYPosition + 18; } } - - radioGroup.select(position.options?.response); + if (position?.options?.response) { + radioGroup.select(position.options?.response); + } else if (position?.options?.defaultValue) { + radioGroup.select(position?.options?.defaultValue); + } + radioGroup.enableReadOnly(); } else { page.drawImage(img, {