fix: template flow dropdown and radio issue, date setting icon ,expired document issue

2026-08-20 06:35:54 +02:00 · 2024-02-09 17:11:32 +05:30
parent 6a0788c2a1
commit c0ae0c7ffa
7 changed files with 482 additions and 176 deletions
@@ -334,6 +334,25 @@ function SignYourSelf() {
    const newDate = moment(milliseconds).format("MM/DD/YYYY");
    return newDate;
  };
+  const getWidgetValue = (type) => {
+    switch (type) {
+      case "name":
+        return pdfDetails[0].ExtUserPtr.Name;
+      case "company":
+        return pdfDetails[0].ExtUserPtr.Company;
+      case "job title":
+        return pdfDetails[0].ExtUserPtr.JobTitle;
+      case "email":
+        return pdfDetails[0].ExtUserPtr.Email;
+      case "checkbox":
+        const flag = true;
+        return flag;
+      case "date":
+        return getDate();
+      default:
+        return "";
+    }
+  };
  //function for setting position after drop signature button over pdf
  const addPositionOfSignature = (item, monitor) => {
    const key = Math.floor(1000 + Math.random() * 9000);
@@ -345,20 +364,7 @@ function SignYourSelf() {

    const dragTypeValue = item?.text ? item.text : monitor.type;

-    const widgetValue =
-      dragTypeValue === "name"
-        ? pdfDetails[0].ExtUserPtr.Name
-        : dragTypeValue === "company"
-          ? pdfDetails[0].ExtUserPtr.Company
-          : dragTypeValue === "job title"
-            ? pdfDetails[0].ExtUserPtr.JobTitle
-            : dragTypeValue === "email"
-              ? pdfDetails[0].ExtUserPtr.Email
-              : dragTypeValue === "checkbox"
-                ? true
-                : dragTypeValue === "date"
-                  ? getDate()
-                  : "";
+    const widgetValue = getWidgetValue(dragTypeValue);
    const widgetWidth = defaultWidthHeight(dragTypeValue).width;
    const widgetHeight = defaultWidthHeight(dragTypeValue).height;

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
+import moment from "moment";
 import "../css/./signature.css";
 import { themeColor } from "../utils/ThemeColor/backColor";
 import { DndProvider } from "react-dnd";
@@ -20,7 +21,8 @@ import {
  getHostUrl,
  randomId,
  addZIndex,
-  createDocument
+  createDocument,
+  defaultWidthHeight
 } from "../utils/Utils";
 import RenderPdf from "./component/renderPdf";
 import "../css/AddUser.css";
@@ -32,6 +34,7 @@ import AddRoleModal from "./component/AddRoleModal";
 import PlaceholderCopy from "./component/PlaceholderCopy";
 import ModalComponent from "./component/modalComponent";
 import TourContentWithBtn from "../premitives/TourContentWithBtn";
+import DropdownWidgetOption from "./WidgetComponent/dropdownWidgetOption";
 const TemplatePlaceholder = () => {
  const navigate = useNavigate();
  const { templateId } = useParams();
@@ -49,6 +52,8 @@ const TemplatePlaceholder = () => {
  const [isSelectListId, setIsSelectId] = useState();
  const [isSendAlert, setIsSendAlert] = useState(false);
  const [isCreateDocModal, setIsCreateDocModal] = useState(false);
+  const [isCheckboxRequired, setIsCheckboxRequired] = useState(false);
+  const [selectRequiredType, setSelectRequiredType] = useState("Optional");
  const [isLoading, setIsLoading] = useState({
    isLoad: true,
    message: "This might take some time"
@@ -73,6 +78,12 @@ const TemplatePlaceholder = () => {
  const [isSigners, setIsSigners] = useState(false);
  const [zIndex, setZIndex] = useState(1);
  const [isdraggingEnable, setIsDraggingEnable] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [widgetType, setWidgetType] = useState("");
+  const [isRadio, setIsRadio] = useState(false);
+  const [validateError, setValidateError] = useState("");
+  const [isValidate, setIsValidate] = useState(false);
+  const [textValidate, setTextValidate] = useState("");
  const [pdfLoadFail, setPdfLoadFail] = useState({
    status: false,
    type: "load"
@@ -158,6 +169,8 @@ const TemplatePlaceholder = () => {
  const [IsReceipent, setIsReceipent] = useState(true);
  const [isDontShow, setIsDontShow] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
+  const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
+  const checkboxType = ["Optional", "Required", "Read only"];
  const senderUser =
    localStorage.getItem(
      `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -327,6 +340,12 @@ const TemplatePlaceholder = () => {
    }
  };

+  const getDate = () => {
+    const date = new Date();
+    const milliseconds = date.getTime();
+    const newDate = moment(milliseconds).format("MM/DD/YYYY");
+    return newDate;
+  };
  //function for setting position after drop signature button over pdf
  const addPositionOfSignature = (item, monitor) => {
    getSignerPos(item, monitor);
@@ -346,27 +365,36 @@ const TemplatePlaceholder = () => {
        //   (data) => data.signerObjId === signerObjId
        // );
        let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
+        const dragTypeValue = item?.text ? item.text : monitor.type;
        let dropData = [];
        let placeHolder;
        if (item === "onclick") {
          const dropObj = {
-            xPosition: window.innerWidth / 2 - 100,
+            //onclick put placeholder center on pdf
+            xPosition: window.innerWidth / 2 - 150,
            yPosition: window.innerHeight / 2 - 60,
-            isStamp: monitor.type === "stamp" && true,
+            isStamp:
+              (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
            key: key,
            isDrag: false,
            scale: scale,
            isMobile: isMobile,
            yBottom: window.innerHeight / 2 - 60,
            zIndex: posZIndex,
-            type: monitor.type
+            type: dragTypeValue,
+            widgetValue:
+              dragTypeValue === "checkbox"
+                ? false
+                : dragTypeValue === "date"
+                  ? getDate()
+                  : ""
          };
          dropData.push(dropObj);
          placeHolder = {
            pageNumber: pageNumber,
            pos: dropData
          };
-        } else if (item.type === "BOX") {
+        } else {
          const offset = monitor.getClientOffset();
          //adding and updating drop position in array when user drop signature button in div
          const containerRect = document
@@ -379,7 +407,8 @@ const TemplatePlaceholder = () => {
          const dropObj = {
            xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
            yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
-            isStamp: isDragStamp || isDragStampSS ? true : false,
+            isStamp:
+              (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
            key: key,
            isDrag: false,
            firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
@@ -388,7 +417,13 @@ const TemplatePlaceholder = () => {
            scale: scale,
            isMobile: isMobile,
            zIndex: posZIndex,
-            type: item.text
+            type: item.text,
+            widgetValue:
+              dragTypeValue === "checkbox"
+                ? false
+                : dragTypeValue === "date"
+                  ? getDate()
+                  : ""
          };

          dropData.push(dropObj);
@@ -457,9 +492,18 @@ const TemplatePlaceholder = () => {
          }
          setSignerPos((prev) => [...prev, placeHolderPos]);
        }
-        if (isMobile) {
-          setIsDraggingEnable(false);
+
+        if (dragTypeValue === "dropdown") {
+          setShowDropdown(true);
+        } else if (dragTypeValue === "checkbox") {
+          setIsCheckboxRequired(true);
+        } else if (dragTypeValue === "radio") {
+          setIsRadio(true);
        }
+        setCurrWidgetsDetails("");
+        setWidgetType(dragTypeValue);
+        setSignKey(key);
+
        setIsMailSend(false);
      } else {
        setIsReceipent(false);
@@ -969,6 +1013,154 @@ const TemplatePlaceholder = () => {
    setIsModalRole(false);
  };

+  //function for base on condition to add checkbox widget status and input text validation in signerPos array
+  const handleApplyWidgetsStatus = (textValidate) => {
+    let regularExpression = textValidate;
+    const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
+    if (filterSignerPos.length > 0) {
+      const getPlaceHolder = filterSignerPos[0].placeHolder;
+
+      const getPageNumer = getPlaceHolder.filter(
+        (data) => data.pageNumber === pageNumber
+      );
+
+      if (getPageNumer.length > 0) {
+        const getXYdata = getPageNumer[0].pos;
+
+        const getPosData = getXYdata;
+        const addSignPos = getPosData.map((position, ind) => {
+          if (position.key === signKey) {
+            if (widgetType === "checkbox") {
+              if (selectRequiredType === "Read only") {
+                return {
+                  ...position,
+                  widgetStatus: selectRequiredType,
+                  widgetValue: true
+                };
+              } else {
+                return {
+                  ...position,
+                  widgetStatus: selectRequiredType
+                };
+              }
+            } else {
+              return {
+                ...position,
+                validation: regularExpression
+              };
+            }
+          }
+          return position;
+        });
+
+        const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+          if (obj.pageNumber === pageNumber) {
+            return { ...obj, pos: addSignPos };
+          }
+          return obj;
+        });
+        const newUpdateSigner = signerPos.map((obj, ind) => {
+          if (obj.Id === uniqueId) {
+            return { ...obj, placeHolder: newUpdateSignPos };
+          }
+          return obj;
+        });
+
+        setSignerPos(newUpdateSigner);
+        setIsCheckboxRequired(false);
+
+        setSelectRequiredType("Optional");
+      }
+    }
+  };
+
+  const handleSaveWidgetsOptions = (
+    dropdownName,
+    dropdownOptions,
+    addOption,
+    deleteOption
+  ) => {
+    const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
+    if (filterSignerPos.length > 0) {
+      const getPlaceHolder = filterSignerPos[0].placeHolder;
+
+      const getPageNumer = getPlaceHolder.filter(
+        (data) => data.pageNumber === pageNumber
+      );
+
+      if (getPageNumer.length > 0) {
+        const getXYdata = getPageNumer[0].pos;
+
+        const getPosData = getXYdata;
+        const addSignPos = getPosData.map((position, ind) => {
+          if (position.key === signKey) {
+            if (widgetType === "radio") {
+              if (addOption) {
+                return {
+                  ...position,
+
+                  Height: position.Height
+                    ? position.Height + 15
+                    : defaultWidthHeight(widgetType).height + 15
+                };
+              } else if (deleteOption) {
+                return {
+                  ...position,
+                  Height: position.Height
+                    ? position.Height - 15
+                    : defaultWidthHeight(widgetType).height - 15
+                };
+              } else {
+                return {
+                  ...position,
+                  widgetName: dropdownName,
+                  widgetOption: dropdownOptions
+                };
+              }
+            } else {
+              return {
+                ...position,
+                widgetName: dropdownName,
+                widgetOption: dropdownOptions
+              };
+            }
+          }
+          return position;
+        });
+
+        const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+          if (obj.pageNumber === pageNumber) {
+            return { ...obj, pos: addSignPos };
+          }
+          return obj;
+        });
+        const newUpdateSigner = signerPos.map((obj, ind) => {
+          if (obj.Id === uniqueId) {
+            return { ...obj, placeHolder: newUpdateSignPos };
+          }
+          return obj;
+        });
+
+        setSignerPos(newUpdateSigner);
+      }
+    }
+  };
+
+  const handleValidateInput = (e) => {
+    if (
+      textValidate === "email" ||
+      textValidate === "number" ||
+      textValidate === "text"
+    ) {
+      handleApplyWidgetsStatus(textValidate);
+      setIsValidate(false);
+    } else {
+      setValidateError("please enter accurate validation.");
+      setTimeout(() => {
+        setValidateError("");
+      }, 1500);
+    }
+  };
  return (
    <div>
      <Title title={"Template"} />
@@ -1087,6 +1279,128 @@ const TemplatePlaceholder = () => {
                type={"signersAlert"}
                setIsShowEmail={setIsShowEmail}
              />
+
+              {/* checkbox widget status component */}
+              <ModalUi isOpen={isCheckboxRequired} title={"Checkbox"}>
+                <div style={{ height: "100%", padding: 20 }}>
+                  {checkboxType.map((data, key) => {
+                    return (
+                      <div
+                        key={key}
+                        style={{ display: "flex", flexDirection: "column" }}
+                      >
+                        <label
+                          key={key}
+                          style={{ fontSize: "16px", fontWeight: "500" }}
+                        >
+                          <input
+                            style={{ accentColor: "red", marginRight: "10px" }}
+                            type="radio"
+                            value={data}
+                            onChange={() => setSelectRequiredType(data)}
+                            checked={selectRequiredType === data}
+                          />
+
+                          {data}
+                        </label>
+                      </div>
+                    );
+                  })}
+
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
+                  <button
+                    onClick={() => {
+                      handleApplyWidgetsStatus();
+                    }}
+                    style={{
+                      background: themeColor()
+                    }}
+                    type="button"
+                    // disabled={!selectCopyType}
+                    className="finishBtn"
+                  >
+                    Apply
+                  </button>
+                </div>
+              </ModalUi>
+              <ModalUi
+                //isValidate
+                isOpen={isValidate}
+                handleClose={() => {
+                  setIsValidate(false);
+                }}
+                title={"Validation"}
+              >
+                <div style={{ height: "100%", padding: 20 }}>
+                  <div className="validateText">
+                    <label
+                      style={{
+                        marginRight: "5px",
+                        fontSize: "14px",
+                        fontWeight: "500"
+                      }}
+                    >
+                      Regular expression:
+                    </label>
+
+                    <input
+                      placeholder="email, number, text"
+                      className="drodown-input validateInputText"
+                      onChange={(e) => setTextValidate(e.target.value)}
+                    />
+                    {validateError && (
+                      <p style={{ color: "red", fontSize: "12px" }}>
+                        {validateError}
+                      </p>
+                    )}
+                  </div>
+
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
+                  <button
+                    onClick={() => {
+                      handleValidateInput();
+                    }}
+                    style={{
+                      background: themeColor()
+                    }}
+                    type="button"
+                    // disabled={!selectCopyType}
+                    className="finishBtn"
+                  >
+                    Apply
+                  </button>
+                </div>
+              </ModalUi>
+              <DropdownWidgetOption
+                title="RadioGroup"
+                showDropdown={isRadio}
+                setShowDropdown={setIsRadio}
+                handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                currWidgetsDetails={currWidgetsDetails}
+              />
+              <DropdownWidgetOption
+                title="Dropdown options"
+                showDropdown={showDropdown}
+                setShowDropdown={setShowDropdown}
+                handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                currWidgetsDetails={currWidgetsDetails}
+              />
              <PlaceholderCopy
                isPageCopy={isPageCopy}
                setIsPageCopy={setIsPageCopy}
@@ -1144,6 +1458,12 @@ const TemplatePlaceholder = () => {
                    setSignKey={setSignKey}
                    setSignerObjId={setSignerObjId}
                    isDragging={isDragging}
+                    setShowDropdown={setShowDropdown}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    setWidgetType={setWidgetType}
+                    setIsRadio={setIsRadio}
+                    setIsCheckboxRequired={setIsCheckboxRequired}
+                    setIsValidate={setIsValidate}
                  />
                )}
              </div>
@@ -55,7 +55,6 @@ function DropdownWidgetOption(props) {
      isOpen={props.showDropdown}
      title={props.title}
      closeOff={true}
-      // handleClose={() => props.setShowDropdown(false)}
    >
      <div style={{ height: "100%", padding: 20 }}>
        <form
@@ -148,6 +147,15 @@ function DropdownWidgetOption(props) {
          >
            Save
          </button>
+          {props.currWidgetsDetails?.widgetOption?.length > 0 && (
+            <button
+              type="submit"
+              className="finishBtn cancelBtn"
+              onClick={() => props.setShowDropdown(false)}
+            >
+              Cancel
+            </button>
+          )}
        </form>
      </div>
    </ModalUi>
@@ -99,15 +99,17 @@ function Placeholder(props) {

  //onclick placeholder function to open signature pad
  const handlePlaceholderClick = () => {
-    if (
-      props.pos.type === "text" ||
-      props.pos.type === "checkbox" ||
-      props.pos.type === "name" ||
-      props.pos.type === "company" ||
-      props.pos.type === "job title" ||
-      props.pos.type === "date" ||
-      props.pos.type === "email"
-    ) {
+    const widgetTypeExist = [
+      "text",
+      "checkbox",
+      "name",
+      "company",
+      "job title",
+      "date",
+      "email"
+    ].includes(props.pos.type);
+
+    if (widgetTypeExist) {
      setDraggingEnabled(false);
    }
    if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) {
@@ -167,13 +169,16 @@ function Placeholder(props) {
        <>
          {props.isPlaceholder && (
            <>
-              {(props.pos.type === "checkbox" ||
-                props.pos.type === "text" ||
-                props.pos.type === "email" ||
-                props.pos.type === "name" ||
-                props.pos.type === "company" ||
-                props.pos.type === "job title" ||
-                props.pos.type === "radio") && (
+              {[
+                "checkbox",
+                "text",
+                "email",
+                "name",
+                "company",
+                "job title",
+                "dropdown",
+                "radio"
+              ].includes(props.pos.type) && (
                <i
                  onClick={(e) => {
                    e.stopPropagation();
@@ -181,6 +186,8 @@ function Placeholder(props) {
                      props.setIsCheckboxRequired(true);
                    } else if (props.pos.type === "radio") {
                      props.setIsRadio(true);
+                    } else if (props.pos.type === "dropdown") {
+                      props?.setShowDropdown(true);
                    } else {
                      props.setIsValidate(true);
                    }
@@ -214,7 +221,8 @@ function Placeholder(props) {
                      props.pos.type === "email" ||
                      props.pos.type === "name" ||
                      props.pos.type === "company" ||
-                      props.pos.type === "job title"
+                      props.pos.type === "job title" ||
+                      props.pos.type === "dropdown"
                        ? "49px"
                        : "23px",
                    top:
@@ -222,7 +230,8 @@ function Placeholder(props) {
                      props.pos.type === "email" ||
                      props.pos.type === "name" ||
                      props.pos.type === "company" ||
-                      props.pos.type === "job title"
+                      props.pos.type === "job title" ||
+                      props.pos.type === "dropdown"
                        ? "-17px"
                        : "-28px"
                  }}
@@ -261,10 +270,14 @@ function Placeholder(props) {
              id="menu-container"
              style={{
                zIndex: "99",
-                top: isMobile ? "-17px" : "-27px",
-                left: props.isPlaceholder ? "-12px" : "5px"
+                top: "-19px",
+                right: props.isPlaceholder ? "60px" : "44px"
              }}
-              className={isShowDateFormat ? "dropdown show" : "dropdown"}
+              className={
+                isShowDateFormat
+                  ? "dropdown signUserIcon show"
+                  : "dropdown signUserIcon"
+              }
              onClick={(e) => {
                setIsShowDateFormat(!isShowDateFormat);
                e.stopPropagation();
@@ -65,7 +65,7 @@ function PlaceholderType(props) {
  }, []);

  useEffect(() => {
-    if (props.isNeedSign) {
+    if (props.isNeedSign && props.pos.type === "date") {
      // props.pos.widgetValue
      const updateDate = new Date();
      setStartDate(updateDate);
@@ -73,45 +73,50 @@ function PlaceholderType(props) {
  }, []);

  useEffect(() => {
-    onChangeInput(
-      isCheckedRadio.selectValue,
-      props.pos.key,
-      props.xyPostion,
-      props.index,
-      props.setXyPostion,
-      props.data && props.data.signerObjId,
-      false
-    );
+    if (props.pos?.type && props.pos.type === "radio" && props.isNeedSign) {
+      console.log("props.pos?.type", props.pos?.type);
+      onChangeInput(
+        isCheckedRadio.selectValue,
+        props.pos.key,
+        props.xyPostion,
+        props.index,
+        props.setXyPostion,
+        props.data && props.data.Id,
+        false
+      );
+    }
  }, [isCheckedRadio]);
  useEffect(() => {
-    if (props.selectDate) {
-      const updateDate = new Date(props.saveDateFormat);
-      setStartDate(updateDate);
-      const dateObj = {
-        date: props.saveDateFormat,
-        format: props.selectDate
-          ? props.selectDate?.format
+    if (props.pos?.type && props.pos.type === "date") {
+      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,
+        props.pos.key,
+        props.xyPostion,
+        props.index,
+        props.setXyPostion,
+        props.data && props.data.Id,
+        false,
+        props.selectDate?.format
+          ? props.selectDate.format
          : props.pos?.dateFormat
            ? props.pos?.dateFormat
            : "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
-        : props.pos?.dateFormat
-          ? props.pos?.dateFormat
-          : "MM/dd/YYYY"
-    );
  }, [props.saveDateFormat]);

  const dateValue = (value) => {
@@ -131,19 +136,21 @@ function PlaceholderType(props) {
  ));

  useEffect(() => {
-    const senderUser = localStorage.getItem(`Extand_Class`);
-    const jsonSender = JSON.parse(senderUser);
+    if (props.pos?.type) {
+      const senderUser = localStorage.getItem(`Extand_Class`);
+      const jsonSender = JSON.parse(senderUser);

-    if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
-      onChangeInput(
-        jsonSender && jsonSender[0],
-        null,
-        props.xyPostion,
-        null,
-        props.setXyPostion,
-        props.signerObjId,
-        true
-      );
+      if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
+        onChangeInput(
+          jsonSender && jsonSender[0],
+          null,
+          props.xyPostion,
+          null,
+          props.setXyPostion,
+          props.data.Id,
+          true
+        );
+      }
    }
  }, [type]);

@@ -223,7 +230,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data.Id,
              false
            )
          }
@@ -251,7 +258,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data?.Id,
              false
            );
          }}
@@ -271,7 +278,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data?.Id,
              false
            );
          }}
@@ -334,7 +341,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data?.Id,
              false
            )
          }
@@ -367,7 +374,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data?.Id,
              false
            )
          }
@@ -400,7 +407,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data?.Id,
              false
            )
          }
@@ -418,28 +425,6 @@ function PlaceholderType(props) {
    case "date":
      return (
        <div>
-          {/* <input
-            placeholder="mm/dd/yyyy"
-            className="inputPlaceholder"
-            style={{ outlineColor: "#007bff" }}
-            type="date"
-            disabled={props.isPlaceholder ? true : false}
-            onBlur={handleInputBlur}
-            //  value={props.selectDate && formatDate(props.selectDate)}
-            // value={props.selectDate && props.selectDate}
-            onChange={(e) => {
-              props.setSelectDate(e.target.value);
-              onChangeInput(
-                e.target.value,
-                props.pos.key,
-                props.xyPostion,
-                props.index,
-                props.setXyPostion,
-                props.data && props.data.signerObjId,
-                false
-              );
-            }}
-          /> */}
          <DatePicker
            disabled={
              props.isNeedSign && props.data?.signerObjId !== props.signerObjId
@@ -457,19 +442,6 @@ function PlaceholderType(props) {
            }
            onChange={(date) => {
              setStartDate(date);
-
-              // 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={<ExampleCustomInput />}
@@ -527,7 +499,7 @@ function PlaceholderType(props) {
              props.xyPostion,
              props.index,
              props.setXyPostion,
-              props.data && props.data.signerObjId,
+              props.data && props.data?.Id,
              false
            )
          }
@@ -207,6 +207,7 @@ function PlaceHolderSign() {
      });
    }
  }, [divRef.current]);
+
  //function for get document details
  const getDocumentDetails = async () => {
    //getting document details
@@ -364,8 +365,6 @@ function PlaceHolderSign() {
        let dropData = [];
        let placeHolder;
        const dragTypeValue = item?.text ? item.text : monitor.type;
-        // const widgetWidth = defaultWidthHeight(dragTypeValue).width;
-        // const widgetHeight = defaultWidthHeight(dragTypeValue).height;

        if (item === "onclick") {
          const dropObj = {
@@ -498,6 +497,7 @@ function PlaceHolderSign() {
        } else if (dragTypeValue === "radio") {
          setIsRadio(true);
        }
+        setCurrWidgetsDetails("");
        setWidgetType(dragTypeValue);
        setSignKey(key);
        if (isMobile) {
@@ -21,18 +21,18 @@ export const calculateInitialWidthHeight = (type, widgetData) => {
    getHeight: height
  };
 };
-export const addInitialData = (signerPos, setXyPostion, value, signerObjId) => {
+export const addInitialData = (signerPos, setXyPostion, value, userId) => {
  return signerPos.map((item) => {
    if (item.placeHolder && item.placeHolder.length > 0) {
      // If there is a nested array, recursively add the field to the last object
-      if (item.signerObjId === signerObjId) {
+      if (item.Id === userId) {
        return {
          ...item,
          placeHolder: addInitialData(
            item.placeHolder,
            setXyPostion,
            value,
-            signerObjId
+            userId
          )
        };
      } else {
@@ -44,7 +44,7 @@ export const addInitialData = (signerPos, setXyPostion, value, signerObjId) => {
      // If there is no nested array, add the new field
      return {
        ...item,
-        pos: addInitialData(item.pos, setXyPostion, value, signerObjId)
+        pos: addInitialData(item.pos, setXyPostion, value, userId)
        // Adjust this line to add the desired field
      };
    } else {
@@ -85,30 +85,23 @@ export const onChangeInput = (
  xyPostion,
  index,
  setXyPostion,
-  signerObjId,
+  userId,
  initial,
  dateFormat
 ) => {
  const isSigners = xyPostion.some((data) => data.signerPtr);
-
+  let filterSignerPos;
  if (isSigners) {
-    let filterSignerPos;
-    if (signerObjId) {
-      filterSignerPos = xyPostion.filter(
-        (data) => data.signerObjId === signerObjId
-      );
+    if (userId) {
+      filterSignerPos = xyPostion.filter((data) => data.Id === userId);
    } else {
      filterSignerPos = xyPostion.filter((data) => data.Role === "prefill");
    }
-    const getPlaceHolder = filterSignerPos[0].placeHolder;
+    console.log("filter", filterSignerPos);
+    const getPlaceHolder = filterSignerPos[0]?.placeHolder;

    if (initial) {
-      const xyData = addInitialData(
-        xyPostion,
-        setXyPostion,
-        value,
-        signerObjId
-      );
+      const xyData = addInitialData(xyPostion, setXyPostion, value, userId);
      setXyPostion(xyData);
    } else {
      const getPageNumer = getPlaceHolder.filter(
@@ -146,7 +139,7 @@ export const onChangeInput = (
        const newUpdateSigner = xyPostion.map((obj, ind) => {
          if (obj.Role === "prefill") {
            return { ...obj, placeHolder: newUpdateSignPos };
-          } else if (obj.signerObjId === signerObjId) {
+          } else if (obj.Id === userId) {
            return { ...obj, placeHolder: newUpdateSignPos };
          }
          return obj;
@@ -386,12 +379,12 @@ export const defaultWidthHeight = (type) => {
        height: 30
      };
      return obj;
-      // case "label":
-      //   obj = {
-      //     width: 150,
-      //     height: 25
-      //   };
-      return obj;
+    // case "label":
+    //   obj = {
+    //     width: 150,
+    //     height: 25
+    //   };
+    // return obj;
    default:
      obj = {
        width: 150,
@@ -946,6 +939,16 @@ export const multiSignEmbed = async (
        imgData.type === "initials" ||
        imgData.type === "image"
      ) {
+        console.log(images[id]);
+        if (
+          (imgData.ImageType && imgData.ImageType === "image/png") ||
+          imgData.ImageType === "image/jpeg"
+        ) {
+          img = await pdfDoc.embedJpg(images[id]);
+        } else {
+          img = await pdfDoc.embedPng(images[id]);
+        }
+      } else if (!imgData.type) {
        if (
          (imgData.ImageType && imgData.ImageType === "image/png") ||
          imgData.ImageType === "image/jpeg"
@@ -1079,22 +1082,6 @@ export const multiSignEmbed = async (
        });
        dropdown.enableReadOnly();
      } else if (imgData.type === "radio") {
-        // page.drawText("first", {
-        //   x: xPos(imgData) + 50,
-        //   y: yPos(imgData),
-        //   size: 18
-        // });
-        // page.drawText("second", {
-        //   x: xPos(imgData) + 50,
-        //   y: yPos(imgData) - 18,
-        //   size: 18
-        // });
-        // page.drawText("third", {
-        //   x: xPos(imgData) + 50,
-        //   y: yPos(imgData) - 34,
-        //   size: 18
-        // });
-
        const radioGroup = form.createRadioGroup(randomboxId);
        let addYPosition = 18;