diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index a79cdb038..1890ab5ca 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -111,6 +111,10 @@ function SignYourSelf() { text: "signature" }, canDrag: isdraggingEnable, + // options: { + // // Set the delay for touch dragging + // delay: { touch: 500 }, // Set the delay in milliseconds + // }, collect: (monitor) => ({ isDragSign: !!monitor.isDragging() @@ -124,7 +128,6 @@ function SignYourSelf() { text: "stamp" }, canDrag: isdraggingEnable, - collect: (monitor) => ({ isDragStamp: !!monitor.isDragging() }) @@ -139,12 +142,16 @@ function SignYourSelf() { text: "drag me" }, canDrag: isdraggingEnable, + // options: { + // // Set the delay for touch dragging + // delay: { touch: 500 }, // Set the delay in milliseconds + // }, collect: (monitor) => ({ isDragSignatureSS: !!monitor.isDragging() }) }); - const [{ isDragStampSS }, dragStampSS] = useDrag({ + const [, dragStampSS] = useDrag({ type: "BOX", item: { type: "BOX", @@ -161,6 +168,7 @@ function SignYourSelf() { return object.pageNumber === pageNumber; }); // rowlevel={JSON.parse(localStorage.getItem("rowlevel"))} + const rowLevel = localStorage.getItem("rowlevel") && JSON.parse(localStorage.getItem("rowlevel")); @@ -534,7 +542,6 @@ function SignYourSelf() { flag, containerWH ); - // console.log(("pdf",pdfBytes)) //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js index 836091f8e..7b73414e9 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js @@ -7,6 +7,9 @@ function AllWidgets(props) { const touchStartTimestamp = useRef(0); const [selectWidgetType, setSelectWidgetType] = useState(""); + const touchTimeoutRef = useRef(null); + const [isTouchHold, setIsTouchHold] = useState(false); + const handleTouchStart = (type) => { // Set a timeout for the long press event touchStartTimestamp.current = Date.now(); @@ -15,6 +18,9 @@ function AllWidgets(props) { timeoutRef.current = setTimeout(() => { // Check if the touch is still ongoing after the long press duration if (Date.now() - touchStartTimestamp.current >= 1000) { + setTimeout(() => { + props.setIsDraggingEnable(true); + }, 1000); setBackgroundColor("lightblue"); // Change the color after the long press setSelectWidgetType(type); props.setIsDraggingEnable(true); @@ -28,7 +34,7 @@ function AllWidgets(props) { const handleTouchMove = () => { // If the touch moves (indicating a drag), cancel the long press effect - clearTimeout(timeoutRef.current); + // clearTimeout(timeoutRef.current); }; const handleTouchEnd = () => { @@ -41,6 +47,38 @@ function AllWidgets(props) { clearTimeout(timeoutRef.current); }; + + // const handleTouchStart = () => { + // touchTimeoutRef.current = setTimeout(() => { + // setIsTouchHold(true); + // setBackgroundColor("lightblue"); // Change the color after the long press + // // setSelectWidgetType(type); + // props.setIsDraggingEnable(true); + // if ("vibrate" in navigator) { + // // Vibrate for 200 milliseconds + // navigator.vibrate(200); + // } + // // Start drag operation when touch-and-hold is detected + // // props.dragSignature(); + // // props.dragSignatureSS(); + + // console.log('go here'); + // }, 1000); // Adjust the duration for touch-and-hold + // }; + + // const handleTouchEnd = () => { + // clearTimeout(touchTimeoutRef.current); + // setIsTouchHold(false); + // props.setIsDraggingEnable(false); + // setBackgroundColor(""); // Change the color after the long press + // setSelectWidgetType(""); + // }; + // const handleTouchMove = () => { + // if (touchTimeoutRef.current) { + // clearTimeout(touchTimeoutRef.current); + // touchTimeoutRef.current = null; + // } + // }; return props.updateWidgets.map((item, ind) => { return (
@@ -59,7 +97,12 @@ function AllWidgets(props) { } } // } + // props.dragSignature(element); + // props.dragSignatureSS(element) + // element && element.addEventListener("touchstart", handleTouchStart); + // element && element.addEventListener("touchend", handleTouchEnd); }} + // handleTouchMove={handleTouchMove} onMouseMove={props?.handleDivClick} onMouseDown={() => { props?.handleMouseLeave(); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index cb9044ca3..2ed82f9b8 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -7,7 +7,7 @@ function DropdownWidgetOption(props) { "option-2" ]); - const [dropdownName, setDropdownName] = useState("Dropdown-1"); + const [dropdownName, setDropdownName] = useState("Field-1"); const [error, setError] = useState(""); const handleInputChange = (index, value) => { setDropdownOptionList((prevInputs) => { @@ -39,7 +39,7 @@ function DropdownWidgetOption(props) { props.handleSaveDropdownOptions(dropdownName, dropdownOptionList); props.setShowDropdown(false); setDropdownOptionList(["option-1", "option-2"]); - setDropdownName("Dropdown-1"); + setDropdownName("Field-1"); } }; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index 6fff2073a..587a78838 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -48,6 +48,7 @@ function Placeholder(props) { } }; + //function for add selected date and format in selectFormat const changeDateFormat = () => { const updateDate = []; dateFormatArr.map((data) => { @@ -63,6 +64,7 @@ function Placeholder(props) { setDateFormat(updateDate); }; useEffect(() => { + //set default current date and default format MM/dd/yyyy if (props.isPlaceholder || props.isSignYourself) { const date = new Date(); const milliseconds = date.getTime(); @@ -211,7 +213,7 @@ function Placeholder(props) { props.pos.type === "name" || props.pos.type === "company" || props.pos.type === "job title" - ? "-20px" + ? "-17px" : "-35px" }} > @@ -232,8 +234,14 @@ function Placeholder(props) { }} style={{ color: "#188ae2", - right: props.pos.type === "checkbox" ? "6px" : "32px", - top: props.pos.type === "checkbox" ? "-35px" : "-18px" + right: + props.pos.type === "checkbox" || props.pos.type === "radio" + ? "6px" + : "32px", + top: + props.pos.type === "checkbox" || props.pos.type === "radio" + ? "-35px" + : "-18px" }} > @@ -243,8 +251,8 @@ function Placeholder(props) { id="menu-container" style={{ zIndex: "99", - top: "-19px", - left: props.isPlaceholder ? "-5px" : "9px" + top: "-27px", + left: props.isPlaceholder ? "-12px" : "5px" }} className={isShowDateFormat ? "dropdown show" : "dropdown"} onClick={(e) => { @@ -252,21 +260,19 @@ function Placeholder(props) { e.stopPropagation(); props.setSignKey(props.pos.key); }} - // onTouchEnd={(e) => { - // e.stopPropagation(); - // setIsShowDateFormat(!isShowDateFormat); - // props.setSignKey(props.pos.key); - // }} + onTouchEnd={(e) => { + e.stopPropagation(); + setIsShowDateFormat(!isShowDateFormat); + props.setSignKey(props.pos.key); + }} > -
- -
+
{ + e.stopPropagation(); + setIsShowDateFormat(!isShowDateFormat); + setSelectDate(data); + }} onClick={() => { setIsShowDateFormat(!isShowDateFormat); setSelectDate(data); @@ -329,11 +340,13 @@ function Placeholder(props) { style={{ color: "#188ae2", right: - props.pos.type === "checkbox" && props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") && + props.isPlaceholder ? "-11px" : "12px", top: - props.pos.type === "checkbox" && props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") && + props.isPlaceholder ? "-35px" : "-18px" }} @@ -362,11 +375,13 @@ function Placeholder(props) { style={{ color: "#188ae2", right: - props.pos.type === "checkbox" && props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") && + props.isPlaceholder ? "-30px" : "-8px", top: - props.pos.type === "checkbox" && props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") && + props.isPlaceholder ? "-35px" : "-18px" }} @@ -404,6 +419,9 @@ function Placeholder(props) { bounds="parent" className="signYourselfBlock" style={{ + // borderRadius:"50%", + // display:"flex", + // alignItem:"center", border: "1px solid #007bff", borderRadius: "2px", textAlign: @@ -438,7 +456,7 @@ function Placeholder(props) { disableDragging={ props.isNeedSign ? true - : props.isPlaceholder + : props.isPlaceholder && props.pos.type !== "date" ? false : !isDraggingEnabled } @@ -473,9 +491,17 @@ function Placeholder(props) { {props.isShowBorder ? ( ) : props.data && props.isNeedSign ? ( props.data?.signerObjId === props.signerObjId ? ( diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js index 554ca6793..135f9572f 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js @@ -4,11 +4,13 @@ import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils"; function PlaceholderBorder(props) { const getResizeBorderExtraWidth = resizeBorderExtraWidth(); const defaultWidth = - props.pos.type === "checkbox" && props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") && + props.isPlaceholder ? 50 : defaultWidthHeight(props.pos.type).width; const defaultHeight = - props.pos.type === "checkbox" && props.isPlaceholder + (props.pos.type === "checkbox" || props.pos.type === "radio") && + props.isPlaceholder ? 50 : defaultWidthHeight(props.pos.type).height; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index d665719ad..a32e05bd1 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -1,5 +1,4 @@ -import React, { useEffect, useState, forwardRef, useMemo, useRef } from "react"; - +import React, { useEffect, useState, forwardRef, useRef } from "react"; import { onChangeInput } from "../../utils/Utils"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; @@ -12,10 +11,6 @@ function PlaceholderType(props) { const [validatePlaceholder, setValidatePlaceholder] = useState(""); const inputRef = useRef(null); const [inputValue, setInputValue] = useState(""); - const memoizedCount = useMemo( - () => props.saveDateFormat, - [props.saveDateFormat] - ); const validateExpression = (regexValidation) => { let isValidate = regexValidation.test(inputValue); @@ -66,10 +61,25 @@ function PlaceholderType(props) { }, []); useEffect(() => { - if (props.selectDate) { - const updateDate = new Date(props.selectDate?.date); + if (props.isNeedSign) { + const updateDate = new Date(props.pos.widgetValue); setStartDate(updateDate); } + }, []); + useEffect(() => { + if (props.selectDate) { + const updateDate = new Date(props.saveDateFormat); + setStartDate(updateDate); + const dateObj = { + date: props.saveDateFormat, + format: props.selectDate + ? props.selectDate?.format + : props.pos?.dateFormat + ? props.pos?.dateFormat + : "MM/dd/YYYY" + }; + props.setSelectDate(dateObj); + } onChangeInput( props.saveDateFormat, @@ -85,7 +95,7 @@ function PlaceholderType(props) { ? props.pos?.dateFormat : "MM/dd/YYYY" ); - }, [memoizedCount]); + }, [props.saveDateFormat]); const dateValue = (value) => { props.setSaveDateFormat(value); @@ -414,6 +424,9 @@ function PlaceholderType(props) { }} /> */} { setStartDate(date); - const dateObj = { - date: props.saveDateFormat, - format: props.pos?.dateFormat - ? props.pos?.dateFormat - : props.selectDate - ? props.selectDate?.format - : "MM/dd/YYYY" - }; - props.setSelectDate(dateObj); - onChangeInput( - props.saveDateFormat, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.signerObjId, - false, - props.selectDate?.format - ? props.selectDate.format - : "MM/dd/YYYY" - ); + + // onChangeInput( + // props.saveDateFormat, + // props.pos.key, + // props.xyPostion, + // props.index, + // props.setXyPostion, + // props.data && props.data.signerObjId, + // false, + // props.selectDate?.format + // ? props.selectDate.format + // : "MM/dd/YYYY" + // ); }} popperPlacement="top-end" customInput={} @@ -522,6 +525,19 @@ function PlaceholderType(props) { {props.pos.type}
); + case "radio": + return ( + + ); default: return props.pos.SignUrl ? ( diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index a8d7572cb..04c29fdd9 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -42,129 +42,140 @@ function FieldsComponent({ setIsDraggingEnable, isdraggingEnable }) { - const temp = ["1", "2", "3", "4", "5", "6", "7", "8", "0", "23"]; const [isSignersModal, setIsSignersModal] = useState(false); - const [initialTouchX, setInitialTouchX] = useState(0); - const [{ isDragDropdown }, dropdown] = useDrag({ + + const [, dropdown] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 5, text: "dropdown" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragDropdown: !!monitor.isDragging() }) }); - const [{ isDragCheck }, checkbox] = useDrag({ + const [, checkbox] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 6, text: "checkbox" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragCheck: !!monitor.isDragging() }) }); - const [{ isDragText }, text] = useDrag({ + const [, text] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 7, text: "text" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragText: !!monitor.isDragging() }) }); - const [{ isDragInitial }, initials] = useDrag({ + const [, initials] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 8, text: "initials" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragInitial: !!monitor.isDragging() }) }); - const [{ isDragName }, name] = useDrag({ + const [, name] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 9, text: "name" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragName: !!monitor.isDragging() }) }); - const [{ isDragCompany }, company] = useDrag({ + const [, company] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 10, text: "company" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragCompany: !!monitor.isDragging() }) }); - const [{ isDragJobtitle }, jobTitle] = useDrag({ + const [, jobTitle] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 11, text: "job title" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragJobtitle: !!monitor.isDragging() }) }); - const [{ isDragDate }, date] = useDrag({ + const [, date] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 12, text: "date" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragDate: !!monitor.isDragging() }) }); - const [{ isDragImage }, image] = useDrag({ + const [, image] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 13, text: "image" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragImage: !!monitor.isDragging() }) }); - const [{ isDragEmail }, email] = useDrag({ + const [, email] = useDrag({ type: "BOX", - canDrag: isdraggingEnable, item: { type: "BOX", id: 14, text: "email" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragEmail: !!monitor.isDragging() }) }); + // const [, radio] = useDrag({ + // type: "BOX", + + // item: { + // type: "BOX", + // id: 14, + // text: "radio" + // }, + // collect: (monitor) => ({ + // isDragRadio: !!monitor.isDragging() + // }) + // }); const isMobile = window.innerWidth < 767; const scrollContainerRef = useRef(null); const [widget, setWidget] = useState([]); @@ -201,6 +212,7 @@ function FieldsComponent({ date, image, email + // radio ]; const getWidgetArray = widgets; const newUpdateSigner = getWidgetArray.map((obj, ind) => { @@ -210,7 +222,10 @@ function FieldsComponent({ setWidget(newUpdateSigner); }, []); - const filterWidgets = widget.filter((data) => data.type !== "dropdown"); + const filterWidgets = widget.filter( + (data) => data.type !== "dropdown" + // && data.type !== "radio" + ); const updateWidgets = isSignYourself ? filterWidgets : widget; return ( @@ -344,6 +359,8 @@ function FieldsComponent({ setIsDraggingEnable={setIsDraggingEnable} isMobile={isMobile} isdraggingEnable={isdraggingEnable} + dragSignature={dragSignature} + dragSignatureSS={dragSignatureSS} />
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 1d91207cd..3804ac92a 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -9,6 +9,7 @@ import { useDrag, useDrop } from "react-dnd"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import FieldsComponent from "./component/fieldsComponent"; import Tour from "reactour"; +import loader from "../assests/loader2.gif"; import { useLocation, useParams } from "react-router-dom"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -92,6 +93,9 @@ function PlaceHolderSign() { const [textValidate, setTextValidate] = useState(""); const [validateError, setValidateError] = useState(""); const [widgetType, setWidgetType] = useState(""); + const [isUiLoading, setIsUiLoading] = useState(false); + const [isRadio, setIsRadio] = useState(false); + const [radioFieldName, setRadioFieldName] = useState({}); const color = [ "#93a3db", "#e6c3db", @@ -690,11 +694,7 @@ function PlaceHolderSign() { } }; const sendEmailToSigners = async () => { - const loadObj = { - isLoad: true, - message: "This might take some time" - }; - setIsLoading(loadObj); + setIsUiLoading(true); setIsSendAlert({}); let sendMail; @@ -820,10 +820,7 @@ function PlaceHolderSign() { .then((result) => { setIsSend(true); setIsMailSend(true); - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); + setIsUiLoading(false); }) .catch((err) => { console.log("axois err ", err); @@ -987,7 +984,6 @@ function PlaceHolderSign() { navigate(`${hostUrl}recipientSignPdf/${documentId}/${currentId}`); }; - console.log("signerpos", signerPos); const handleLinkUser = (id) => { setIsAddUser({ [id]: true }); }; @@ -1004,7 +1000,6 @@ function PlaceHolderSign() { } return { ...x }; }); - // console.log("updatePlaceHolder ", updatePlaceHolder); setSignerPos(updatePlaceHolder); const updateSigner = signersdata.map((x) => { @@ -1063,7 +1058,14 @@ function PlaceHolderSign() { widgetStatus: selectRequiredType }; } - } else { + } else if (widgetType === "radio") { + return { + ...position + // widgetName: dropdownName, + // widgetOption: dropdownOptions + }; + } + { return { ...position, validation: regularExpression @@ -1120,6 +1122,31 @@ function PlaceHolderSign() { ) : (
+ {isUiLoading && ( +
+ no img + + This might take some time + +
+ )} {/* this component used for UI interaction and show their functionality */} {!checkTourStatus && ( //this tour component used in your html component where you want to put @@ -1413,6 +1440,70 @@ function PlaceHolderSign() {
+ +
+
+ + + setTextValidate(e.target.value)} + /> + + + + setTextValidate(e.target.value)} + /> +
+ +
+ +
+ { width: 50, height: 20 }; - return obj; + // case "radio": + // obj = { + // width: 15, + // height: 15 + // }; + // return obj; default: obj = { width: 150,