Merge pull request #490 from OpenSignLabs/feat_label

fix: date is not changable in signyourself flow of mobile

apps/OpenSign/package-lock.json

@@ -43,6 +43,7 @@
         "react-scrollbars-custom": "^4.1.1",
         "react-select": "^5.8.0",
         "react-signature-canvas": "^1.0.6",
+        "react-tooltip": "^5.26.3",
         "reactour": "^1.19.2",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
@@ -20145,6 +20146,19 @@
         }
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "5.26.3",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.26.3.tgz",
+      "integrity": "sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

apps/OpenSign/package.json

@@ -38,6 +38,7 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
+    "react-tooltip": "^5.26.3",
     "reactour": "^1.19.2",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
@@ -48,7 +49,7 @@
   },
   "scripts": {
     "start": "serve -s build",
-    "start-dev" :"react-scripts start",
+    "start-dev": "react-scripts start",
     "version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
     "version-win": "powershell -Command \"Invoke-RestMethod -Uri 'https://api.github.com/repos/opensignlabs/opensign/releases/latest' | Select-Object -ExpandProperty tag_name | Out-File -FilePath ./public/version.txt\"",
     "build": "npm run version && react-scripts build",

apps/OpenSign/src/components/pdf/DropdownWidgetOption.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
+import { radioButtonWidget } from "../../constant/Utils";
 function DropdownWidgetOption(props) {
   const [dropdownOptionList, setDropdownOptionList] = useState([
     "option-1",
@@ -10,6 +11,7 @@ function DropdownWidgetOption(props) {
   const [maxCount, setMaxCount] = useState(0);
   const [dropdownName, setDropdownName] = useState(props.type);
   const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isHideLabel, setIsHideLabel] = useState(false);
   const [status, setStatus] = useState("required");
   const [defaultValue, setDefaultValue] = useState("");
   const statusArr = ["required", "optional"];
@@ -19,6 +21,7 @@ function DropdownWidgetOption(props) {
     setDropdownOptionList(["option-1", "option-2"]);
     setDropdownName(props.type);
     setIsReadOnly(false);
+    setIsHideLabel(false);
     setMinCount(0);
     setMaxCount(0);
     setDefaultCheckbox([]);
@@ -39,6 +42,7 @@ function DropdownWidgetOption(props) {
         props.currWidgetsDetails?.options?.validation?.maxRequiredCount
       );
       setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
+      setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
       setStatus(props.currWidgetsDetails?.options?.status || "required");
       setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
       setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
@@ -106,13 +110,15 @@ function DropdownWidgetOption(props) {
       null,
       null,
       status,
-      defaultData
+      defaultData,
+      isHideLabel
     );
     //  props.setShowDropdown(false);
     setDropdownOptionList(["option-1", "option-2"]);
     setDropdownName(props.type);
     //  props.setCurrWidgetsDetails({});
     setIsReadOnly(false);
+    setIsHideLabel(false);
     setMinCount(0);
     setMaxCount(0);
     setDefaultCheckbox([]);
@@ -143,7 +149,7 @@ function DropdownWidgetOption(props) {
       //   styleClass={"dropdownModal"}
       isOpen={props.showDropdown}
       title={props.title}
-      closeOff={true}
+      showClose={false}
     >
       <div style={{ height: "100%", padding: 20 }}>
         <form
@@ -153,20 +159,6 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div className="dropdownContainer">
-            {["checkbox", "radio"].includes(props.type) &&
-              !props.isSignYourself && (
-                <div>
-                  <input
-                    type="checkbox"
-                    checked={isReadOnly}
-                    onChange={(e) => {
-                      setIsReadOnly(e.target.checked);
-                    }}
-                  />
-
-                  <label style={{ marginLeft: "10px" }}>Is read only</label>
-                </div>
-              )}
             <label style={{ fontSize: "13px", fontWeight: "600" }}>
               Name<span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
@@ -178,36 +170,6 @@ function DropdownWidgetOption(props) {
               className="drodown-input"
             />
 
-            {props.type === "checkbox" && !props.isSignYourself && (
-              <>
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Minimun check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={minCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMinCount(count);
-                  }}
-                  className="drodown-input"
-                />
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Maximum check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={maxCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMaxCount(count);
-                  }}
-                  className="drodown-input"
-                />
-              </>
-            )}
             <label
               style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
             >
@@ -274,7 +236,6 @@ function DropdownWidgetOption(props) {
                   ></i>
                 </div>
               ))}
-
               <i
                 onClick={handleAddInput}
                 style={{
@@ -285,8 +246,38 @@ function DropdownWidgetOption(props) {
                 }}
                 className="fa-solid fa-square-plus"
               ></i>
+              {props.type === "checkbox" && !props.isSignYourself && (
+                <>
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Minimun check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={minCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMinCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Maximum check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={maxCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMaxCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                </>
+              )}
             </div>
-            {["dropdown", "radio"].includes(props.type) && (
+            {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
                 <label
                   style={{
@@ -321,7 +312,7 @@ function DropdownWidgetOption(props) {
                 </select>
               </>
             )}
-            {props.type !== "checkbox" && props.type !== "radio" && (
+            {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
                 <div
                   style={{
@@ -358,8 +349,40 @@ function DropdownWidgetOption(props) {
                 </div>
               </>
             )}
-          </div>
+            {["checkbox", radioButtonWidget].includes(props.type) && (
+              <div className="flex flex-row gap-5 mt-2 items-center text-center">
+                {!props.isSignYourself && (
+                  <div>
+                    <input
+                      id="isreadonly"
+                      type="checkbox"
+                      checked={isReadOnly}
+                      onChange={(e) => {
+                        setIsReadOnly(e.target.checked);
+                      }}
+                    />
+                    <label className="ml-1" htmlFor="isreadonly">
+                      Is read only
+                    </label>
+                  </div>
+                )}
+                <div>
+                  <input
+                    id="ishidelabel"
+                    type="checkbox"
+                    checked={isHideLabel}
+                    onChange={(e) => {
+                      setIsHideLabel(e.target.checked);
+                    }}
+                  />
 
+                  <label className="ml-1" htmlFor="ishidelabel">
+                    Hide label
+                  </label>
+                </div>
+              </div>
+            )}
+          </div>
           <div
             style={{
               height: "1px",

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -2,17 +2,122 @@ import React, { useState, useEffect } from "react";
 import BorderResize from "./BorderResize";
 import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
-import { defaultWidthHeight, isMobile } from "../../constant/Utils";
+import {
+  defaultWidthHeight,
+  isMobile,
+  onChangeInput,
+  radioButtonWidget,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
 import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
 
+const selectFormat = (data) => {
+  switch (data) {
+    case "L":
+      return "MM/dd/yyyy";
+    case "DD-MM-YYYY":
+      return "dd-MM-yyyy";
+    case "DD/MM/YYYY":
+      return "dd/MM/yyyy";
+    case "LL":
+      return "MMMM dd, yyyy";
+    case "DD MMM, YYYY":
+      return "dd MMM, yyyy";
+    case "YYYY-MM-DD":
+      return "yyyy-MM-dd";
+    case "MM-DD-YYYY":
+      return "MM-dd-yyyy";
+    case "MM.DD.YYYY":
+      return "MM.dd.yyyy";
+    case "MMM DD, YYYY":
+      return "MMM dd, yyyy";
+    case "DD MMMM, YYYY":
+      return "dd MMMM, yyyy";
+    default:
+      return "MM/dd/yyyy";
+  }
+};
+
+const changeDateToMomentFormat = (format) => {
+  switch (format) {
+    case "MM/dd/yyyy":
+      return "L";
+    case "dd-MM-yyyy":
+      return "DD-MM-YYYY";
+    case "dd/MM/yyyy":
+      return "DD/MM/YYYY";
+    case "MMMM dd, yyyy":
+      return "LL";
+    case "dd MMM, yyyy":
+      return "DD MMM, YYYY";
+    case "yyyy-MM-dd":
+      return "YYYY-MM-DD";
+    case "MM-dd-yyyy":
+      return "MM-DD-YYYY";
+    case "MM.dd.yyyy":
+      return "MM.DD.YYYY";
+    case "MMM dd, yyyy":
+      return "MMM DD, YYYY";
+    case "dd MMMM, yyyy":
+      return "DD MMMM, YYYY";
+    default:
+      return "L";
+  }
+};
+
+//function to get default date
+const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
+  let date;
+  if (format && format === "dd-MM-yyyy") {
+    const newdate = selectedDate
+      ? selectedDate
+      : moment(new Date()).format(changeDateToMomentFormat(format));
+    const [day, month, year] = newdate.split("-");
+    date = new Date(`${year}-${month}-${day}`);
+  } else {
+    date = new Date(selectedDate);
+  }
+  const value = date;
+  return value;
+};
+//function to get default format
+const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
+
 function Placeholder(props) {
   const [isDraggingEnabled, setDraggingEnabled] = useState(true);
   const [isShowDateFormat, setIsShowDateFormat] = useState(false);
-  const [selectDate, setSelectDate] = useState();
+  const [selectDate, setSelectDate] = useState({
+    date:
+      props.pos.type === "date"
+        ? moment(
+            getDefaultdate(
+              props?.pos?.options?.response,
+              props.pos?.options?.validation?.format
+            ).getTime()
+          ).format(
+            changeDateToMomentFormat(props.pos?.options?.validation?.format)
+          )
+        : "",
+    format:
+      props.pos.type === "date"
+        ? getDefaultFormat(props.pos?.options?.validation?.format)
+        : ""
+  });
   const [dateFormat, setDateFormat] = useState([]);
-  const [saveDateFormat, setSaveDateFormat] = useState("");
+  const [startDate, setStartDate] = useState(
+    props.pos.type === "date" &&
+      getDefaultdate(
+        props?.pos?.options?.response,
+        props.pos?.options?.validation?.format
+      )
+  );
+  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
+    width: null,
+    height: null
+  });
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -25,70 +130,41 @@ function Placeholder(props) {
     "DD MMMM, YYYY"
   ];
 
-  const selectFormat = (data) => {
+  useEffect(() => {
-    switch (data) {
+    const updateWidth = () => {
-      case "L":
+      const rndElement = document.getElementById(props.pos.key);
-        return "MM/dd/yyyy";
+      if (rndElement) {
-      case "DD-MM-YYYY":
+        const { width, height } = rndElement.getBoundingClientRect();
-        return "dd-MM-yyyy";
+        setGetCheckboxRenderWidth({ width: width, height: height });
-      case "DD/MM/YYYY":
+      }
-        return "dd/MM/yyyy";
+    };
-      case "LL":
+
-        return "MMMM dd, yyyy";
+    // Delay to ensure rendering is complete
-      case "DD MMM, YYYY":
+    const timer = setTimeout(updateWidth, 0);
-        return "dd MMM, YYYY";
+
-      case "YYYY-MM-DD":
+    return () => clearTimeout(timer);
-        return "YYYY-MM-dd";
+  }, [props.pos]);
-      case "MM-DD-YYYY":
-        return "MM-dd-YYYY";
-      case "MM.DD.YYYY":
-        return "MM.dd.YYYY";
-      case "MMM DD, YYYY":
-        return "MMM dd, YYYY";
-      case "DD MMMM, YYYY":
-        return "dd MMMM, YYYY";
-      default:
-        return "dd/MM/yyyy";
-    }
-  };
 
   useEffect(() => {
-    //set default current date and default format MM/dd/yyyy
+    const closeMenuOnOutsideClick = (e) => {
-    if (props.isSignYourself) {
+      if (!isDraggingEnabled && !e.target.closest("#changeIsDragging")) {
-      const date = new Date();
+        setDraggingEnabled(true);
-      const milliseconds = date.getTime();
+      }
-      const newDate = moment(milliseconds).format("MM/DD/YYYY");
+    };
-      const dateObj = {
-        date: newDate,
-        format: "MM/dd/YYYY"
-      };
-      setSelectDate(dateObj);
-    } else {
-      const defaultRes = props?.pos?.options?.response;
-      const defaultFormat = props.pos?.options?.validation?.format;
-      const updateDate = defaultRes
-        ? new Date(props?.pos?.options?.response)
-        : new Date();
-      const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
-      const milliseconds = updateDate.getTime();
-      const newDate = moment(milliseconds).format(dateFormat);
-      const dateObj = {
-        date: newDate,
-        format: props.pos?.options?.validation?.format
-          ? props.pos?.options?.validation?.format
-          : "MM/dd/YYYY"
-      };
-      setSelectDate(dateObj);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
-  //function for add selected date and format in selectFormat
+    document.addEventListener("click", closeMenuOnOutsideClick);
+
+    return () => {
+      // Cleanup the event listener when the component unmounts
+      document.removeEventListener("click", closeMenuOnOutsideClick);
+    };
+  }, [isDraggingEnabled]);
+  //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
     dateFormatArr.map((data) => {
       let date;
-      if (selectDate.format === "dd-MM-yyyy") {
+      if (selectDate && selectDate.format === "dd-MM-yyyy") {
         const [day, month, year] = selectDate.date.split("-");
         date = new Date(`${year}-${month}-${day}`);
       } else {
@@ -104,13 +180,15 @@ function Placeholder(props) {
     });
     setDateFormat(updateDate);
   };
+
   useEffect(() => {
     if (props.isPlaceholder || props.isSignYourself) {
       selectDate && changeDateFormat();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectDate]);
-  //handle to close drop down menu onclick screen
+
+  //it detect outside click of date dropdown menu
   useEffect(() => {
     const closeMenuOnOutsideClick = (e) => {
       if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -124,14 +202,14 @@ function Placeholder(props) {
     };
   }, [isShowDateFormat]);
 
-  //onclick placeholder function to open signature pad
+  //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
-  const handlePlaceholderClick = () => {
+  const handleWidgetIdandPopup = () => {
     if (props.setSelectWidgetId) {
       props.setSelectWidgetId(props.pos.key);
     }
 
     const widgetTypeExist = [
-      "text",
+      textInputWidget,
       "checkbox",
       "name",
       "company",
@@ -167,7 +245,7 @@ function Placeholder(props) {
     } else if (
       props.isPlaceholder &&
       !props.isDragging &&
-      props.pos.type !== "label"
+      props.pos.type !== textWidget
     ) {
       if (props.pos.key === props.selectWidgetId) {
         props.handleLinkUser(props.data.Id);
@@ -194,9 +272,19 @@ function Placeholder(props) {
       }
     }
   };
-
+  const handleOnClickPlaceholder = () => {
-  const handleWidgetsOnclick = () => {
+    if (!props.isNeedSign) {
-    if (props.pos.type === "radio") {
+      props.setWidgetType(props.pos.type);
+    }
+    if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
+      handleWidgetIdandPopup();
+    } else if (props.isPlaceholder || props.isSignYourself) {
+      handleWidgetIdandPopup();
+    }
+  };
+  //`handleOnClickSettingIcon` is used set current widget details and open setting of it
+  const handleOnClickSettingIcon = () => {
+    if (props.pos.type === radioButtonWidget) {
       props.setIsRadio(true);
     } else if (props.pos.type === "dropdown") {
       props?.setShowDropdown(true);
@@ -206,13 +294,57 @@ function Placeholder(props) {
       props?.handleNameModal(true);
     }
 
-    if (props.isPlaceholder) {
+    if (props.isPlaceholder && props.type !== textWidget) {
       props.setUniqueId(props.data.Id);
     }
     props.setSignKey(props.pos.key);
     props.setWidgetType(props.pos.type);
     props.setCurrWidgetsDetails(props.pos);
   };
+  //function ro set state value of onclick on widget's copy icon
+  const handleCopyPlaceholder = (e) => {
+    if (props.data && props?.pos?.type !== textWidget) {
+      props.setSignerObjId(props?.data?.signerObjId);
+      props.setUniqueId(props?.data?.Id);
+    } else if (props.data && props.pos.type === textWidget) {
+      props.setTempSignerId(props.uniqueId);
+      props.setSignerObjId(props?.data?.signerObjId);
+      props.setUniqueId(props?.data?.Id);
+    }
+    e.stopPropagation();
+    props.setIsPageCopy(true);
+    props.setSignKey(props.pos.key);
+  };
+
+  //function to save date and format on local array onchange date and onclick format
+  const handleSaveDate = (data, isDateChange) => {
+    let updateDate = data.date;
+    //check if date change by user
+    if (isDateChange) {
+      //`changeDateToMomentFormat` is used to convert date as per required to moment package
+      updateDate = moment(data.date).format(
+        changeDateToMomentFormat(data.format)
+      );
+    }
+    //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+    //`getDefaultdate` is used to convert update date in new Date() format
+    const date = moment(
+      getDefaultdate(updateDate, data?.format).getTime()
+    ).format(changeDateToMomentFormat(data?.format));
+
+    //`onChangeInput` is used to save data related to date in a placeholder field
+    onChangeInput(
+      date,
+      props.pos.key,
+      props.xyPostion,
+      props.index,
+      props.setXyPostion,
+      props.data && props.data.Id,
+      false,
+      data?.format
+    );
+    setSelectDate({ date: date, format: data?.format });
+  };
   const PlaceholderIcon = () => {
     return (
       props.isShowBorder && (
@@ -223,48 +355,42 @@ function Placeholder(props) {
                 <i
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleWidgetsOnclick();
+                    handleOnClickSettingIcon();
                   }}
                   onTouchEnd={(e) => {
                     e.stopPropagation();
-                    handleWidgetsOnclick();
+                    handleOnClickSettingIcon();
                   }}
                   className="fa-solid fa-gear settingIcon"
                   style={{
                     color: "#188ae2",
-                    right: "9px",
+                    right: "29px",
-                    top: "-28px"
+                    top: "-19px"
                   }}
                 ></i>
               ) : (
-                props.pos.type !== "date" &&
+                ((!props?.pos?.type && props.pos.isStamp) ||
-                props.pos.type !== "label" &&
+                  (props?.pos?.type &&
-                props.pos.type !== "signature" &&
+                    !["date", textWidget, "signature"].includes(
-                !props.isSignYourself && (
+                      props.pos.type
+                    ) &&
+                    !props.isSignYourself)) && (
                   <i
                     onClick={(e) => {
                       e.stopPropagation();
-                      handleWidgetsOnclick();
+                      handleOnClickSettingIcon();
                     }}
                     onTouchEnd={(e) => {
                       e.stopPropagation();
-                      handleWidgetsOnclick();
+                      handleOnClickSettingIcon();
                     }}
                     className="fa-solid fa-gear settingIcon"
-                    style={{
+                    style={{ color: "#188ae2", right: "47px", top: "-19px" }}
-                      color: "#188ae2",
-                      right: ["checkbox", "radio"].includes(props.pos.type)
-                        ? "24px"
-                        : "47px",
-                      top: ["checkbox", "radio"].includes(props.pos.type)
-                        ? "-28px"
-                        : "-19px"
-                    }}
                   ></i>
                 )
               )}
 
-              {props.pos.type !== "label" && !props.isSignYourself && (
+              {props.pos.type !== textWidget && !props.isSignYourself && (
                 <i
                   data-tut="reactourLinkUser"
                   className="fa-regular fa-user signUserIcon"
@@ -278,19 +404,7 @@ function Placeholder(props) {
                     props.handleLinkUser(props.data.Id);
                     props.setUniqueId(props.data.Id);
                   }}
-                  style={{
+                  style={{ color: "#188ae2", right: "32px", top: "-18px" }}
-                    color: "#188ae2",
-                    right:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
-                        ? "8px"
-                        : "32px",
-                    top:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
-                        ? "-28px"
-                        : "-18px"
-                  }}
                 ></i>
               )}
             </>
@@ -347,10 +461,12 @@ function Placeholder(props) {
                         e.stopPropagation();
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
+                        handleSaveDate(data);
                       }}
                       onClick={() => {
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
+                        handleSaveDate(data);
                       }}
                       className="dropdown-item itemColor"
                       style={{ fontSize: "12px" }}
@@ -364,35 +480,9 @@ function Placeholder(props) {
           )}
           <i
             className="fa-regular fa-copy signCopy"
-            onClick={(e) => {
+            onClick={(e) => handleCopyPlaceholder(e)}
-              if (props.data) {
+            onTouchEnd={(e) => handleCopyPlaceholder(e)}
-                props.setSignerObjId(props.data.signerObjId);
+            style={{ color: "#188ae2", right: "12px", top: "-18px" }}
-                props.setUniqueId(props.data.Id);
-              }
-              e.stopPropagation();
-              props.setIsPageCopy(true);
-              props.setSignKey(props.pos.key);
-            }}
-            onTouchEnd={(e) => {
-              if (props.data) {
-                props.setSignerObjId(props.data.signerObjId);
-                props.setUniqueId(props.data.Id);
-              }
-              e.stopPropagation();
-              props.setIsPageCopy(true);
-              props.setSignKey(props.pos.key);
-            }}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-9px"
-                  : "12px",
-              top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-28px"
-                  : "-18px"
-            }}
           ></i>
           <i
             className="fa-regular fa-circle-xmark signCloseBtn"
@@ -415,17 +505,7 @@ function Placeholder(props) {
                 props.setIsStamp(false);
               }
             }}
-            style={{
+            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-27px"
-                  : "-8px",
-              top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-28px"
-                  : "-18px"
-            }}
           ></i>
         </>
       )
@@ -434,11 +514,11 @@ function Placeholder(props) {
 
   return (
     <Rnd
+      id={props.pos.key}
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
-      //ref={nodeRef}
       key={props.pos.key}
       lockAspectRatio={
-        props.pos.type !== "label" &&
+        props.pos.type !== textWidget &&
         (props.pos.Width
           ? props.pos.Width / props.pos.Height
           : defaultWidthHeight(props.pos.type).width /
@@ -454,10 +534,10 @@ function Placeholder(props) {
           props.data && props.isNeedSign
             ? props.data?.signerObjId === props.signerObjId &&
               props.pos.type !== "checkbox" &&
-              props.pos.type !== "radio"
+              props.pos.type !== radioButtonWidget
               ? true
               : false
-            : props.pos.type !== "radio" &&
+            : props.pos.type !== radioButtonWidget &&
               props.pos.type !== "checkbox" &&
               props.pos.key === props.selectWidgetId &&
               true,
@@ -467,8 +547,8 @@ function Placeholder(props) {
       bounds="parent"
       className="signYourselfBlock"
       style={{
-        border: props.pos.type !== "checkbox" && "1px solid #007bff",
+        border: "1px solid #007bff",
-        borderRadius: props.pos.type !== "checkbox" && "2px",
+        borderRadius: "2px",
         textAlign:
           props.pos.type !== "name" &&
           props.pos.type !== "company" &&
@@ -482,21 +562,27 @@ function Placeholder(props) {
             : "all-scroll",
         zIndex:
           props.pos.type === "date"
-            ? "99"
+            ? props.pos.key === props.selectWidgetId
+              ? 99 + 1
+              : 99
             : props?.pos?.zIndex
               ? props.pos.zIndex
               : "5",
-        background: props.data
+        background: props.data ? props.data.blockColor : "rgb(203 233 237)"
-          ? props.data.blockColor
-          : props.pos.type !== "checkbox" && "rgb(203 233 237)"
       }}
       onDrag={() => {
         setDraggingEnabled(true);
         props.handleTabDrag && props.handleTabDrag(props.pos.key);
       }}
       size={{
-        width: props.posWidth(props.pos, props.isSignYourself),
+        width:
-        height: props.posHeight(props.pos, props.isSignYourself)
+          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
+            ? "auto"
+            : props.posWidth(props.pos, props.isSignYourself),
+        height:
+          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
+            ? "auto"
+            : props.posHeight(props.pos, props.isSignYourself)
       }}
       onResizeStart={() => {
         setDraggingEnabled(true);
@@ -532,41 +618,23 @@ function Placeholder(props) {
             false
           );
       }}
-      onClick={() => {
+      onClick={() => handleOnClickPlaceholder()}
-        !props.isNeedSign && props.setWidgetType(props.pos.type);
-        props.isNeedSign && props.data?.signerObjId === props.signerObjId
-          ? handlePlaceholderClick()
-          : props.isPlaceholder
-            ? handlePlaceholderClick()
-            : props.isSignYourself && handlePlaceholderClick();
-      }}
     >
       {props.isShowBorder &&
-      props.pos.type !== "radio" &&
+      props.pos.type !== radioButtonWidget &&
       props.pos.type !== "checkbox" &&
       props.pos.key === props.selectWidgetId ? (
-        <BorderResize
+        <BorderResize right={-12} top={-11} />
-          right={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
-              ? -21
-              : -12
-          }
-          top={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
-              ? -21
-              : -11
-          }
-        />
       ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
         props.data?.signerObjId === props.signerObjId &&
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" ? (
           <BorderResize />
         ) : (
           <></>
         )
       ) : (
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
         props.pos.key === props.selectWidgetId && <BorderResize />
       )}
@@ -576,6 +644,7 @@ function Placeholder(props) {
           setDraggingEnabled={setDraggingEnabled}
           pos={props.pos}
           isPlaceholder={props.isPlaceholder}
+          getCheckboxRenderWidth={getCheckboxRenderWidth}
         />
       )}
       {isMobile ? (
@@ -583,18 +652,11 @@ function Placeholder(props) {
           style={{
             left: props.xPos(props.pos, props.isSignYourself),
             top: props.yPos(props.pos, props.isSignYourself),
-            width: props.posWidth(props.pos, props.isSignYourself),
+            width: "auto", //props.posWidth(props.pos, props.isSignYourself),
             // height: props.posHeight(props.pos, props.isSignYourself),
             zIndex: "10"
           }}
-          onTouchEnd={() => {
+          onTouchEnd={() => handleOnClickPlaceholder()}
-            !props.isNeedSign && props.setWidgetType(props.pos.type);
-            props.isNeedSign && props.data?.signerObjId === props.signerObjId
-              ? handlePlaceholderClick()
-              : props.isPlaceholder
-                ? handlePlaceholderClick()
-                : props.isSignYourself && handlePlaceholderClick();
-          }}
         >
           {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
 
@@ -615,9 +677,10 @@ function Placeholder(props) {
             isNeedSign={props.isNeedSign}
             setSelectDate={setSelectDate}
             selectDate={selectDate}
-            setSaveDateFormat={setSaveDateFormat}
-            saveDateFormat={saveDateFormat}
             setValidateAlert={props.setValidateAlert}
+            setStartDate={setStartDate}
+            startDate={startDate}
+            handleSaveDate={handleSaveDate}
           />
         </div>
       ) : (
@@ -640,9 +703,10 @@ function Placeholder(props) {
             isNeedSign={props.isNeedSign}
             setSelectDate={setSelectDate}
             selectDate={selectDate}
-            setSaveDateFormat={setSaveDateFormat}
-            saveDateFormat={saveDateFormat}
             setValidateAlert={props.setValidateAlert}
+            setStartDate={setStartDate}
+            startDate={startDate}
+            handleSaveDate={handleSaveDate}
           />
         </>
       )}

apps/OpenSign/src/components/pdf/PlaceholderBorder.js

@@ -2,30 +2,42 @@ import React from "react";
 import { themeColor } from "../../constant/const";
 import {
   defaultWidthHeight,
+  isMobile,
+  radioButtonWidget,
   resizeBorderExtraWidth
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
-  const getResizeBorderExtraWidth =
+  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
-    props.pos.type === "checkbox" || props.pos.type === "radio"
-      ? 38
-      : resizeBorderExtraWidth();
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
   const defaultHeight = defaultWidthHeight(props.pos.type).height;
 
+  const handleMinWidth = () => {
+    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
+      return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
+    } else {
+      return props.pos.Width
+        ? props.pos.Width + getResizeBorderExtraWidth
+        : defaultWidth + getResizeBorderExtraWidth;
+    }
+  };
+  const handleMinHeight = () => {
+    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
+      return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
+    } else {
+      return props.pos.Height
+        ? props.pos.Height + getResizeBorderExtraWidth
+        : defaultHeight + getResizeBorderExtraWidth;
+    }
+  };
   return (
     <div
-      onMouseEnter={props?.setDraggingEnabled(true)}
+      onMouseEnter={!isMobile && props?.setDraggingEnabled(true)}
       className="borderResize"
       style={{
         borderColor: themeColor,
         borderStyle: "dashed",
-
+        minWidth: handleMinWidth(),
-        width: props.pos.Width
+        minHeight: handleMinHeight(),
-          ? props.pos.Width + getResizeBorderExtraWidth
-          : defaultWidth + getResizeBorderExtraWidth,
-        height: props.pos.Height
-          ? props.pos.Height + getResizeBorderExtraWidth
-          : defaultHeight + getResizeBorderExtraWidth,
         borderWidth: "0.2px",
         overflow: "hidden"
       }}

apps/OpenSign/src/components/pdf/PlaceholderCopy.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
-import { randomId } from "../../constant/Utils";
+import { randomId, textWidget } from "../../constant/Utils";
 
 function PlaceholderCopy(props) {
   const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -180,7 +180,13 @@ function PlaceholderCopy(props) {
       copyPlaceholder("first");
     }
   };
-
+  const handleUniqueId = () => {
+    if (props.widgetType === textWidget) {
+      props.setUniqueId(props?.tempSignerId);
+      props.setTempSignerId("");
+    }
+    props.setIsPageCopy(false);
+  };
   return (
     <ModalUi
       isOpen={props.isPageCopy}
@@ -220,7 +226,7 @@ function PlaceholderCopy(props) {
         <button
           onClick={() => {
             handleApplyCopy();
-            props.setIsPageCopy(false);
+            handleUniqueId();
           }}
           style={{ background: themeColor }}
           type="button"
@@ -232,7 +238,9 @@ function PlaceholderCopy(props) {
         <button
           type="button"
           className="finishBtn cancelBtn"
-          onClick={() => props.setIsPageCopy(false)}
+          onClick={() => {
+            handleUniqueId();
+          }}
         >
           Cancel
         </button>

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -1,5 +1,13 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-import { getMonth, getYear, onChangeInput, range } from "../../constant/Utils";
+import {
+  getMonth,
+  getYear,
+  onChangeInput,
+  radioButtonWidget,
+  range,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
@@ -7,10 +15,7 @@ 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();
@@ -80,7 +85,7 @@ function PlaceholderType(props) {
       case "number":
         setValidatePlaceholder("12345");
         break;
-      case "text":
+      case textInputWidget:
         setValidatePlaceholder("enter text");
         break;
       default:
@@ -89,10 +94,7 @@ function PlaceholderType(props) {
   }
 
   useEffect(() => {
-    if (props.isNeedSign && type === "date") {
+    if (type && type === "checkbox" && props.isNeedSign) {
-      const updateDate = new Date();
-      setStartDate(updateDate);
-    } else if (type && type === "checkbox" && props.isNeedSign) {
       const isDefaultValue = props.pos.options?.defaultValue;
       if (isDefaultValue) {
         setSelectedCheckbox(isDefaultValue);
@@ -103,7 +105,18 @@ function PlaceholderType(props) {
       checkRegularExpress(props.pos?.options?.validation?.type);
     }
     setTextValue(
-      props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
+      props.pos?.options?.response
+        ? props.pos?.options?.response
+        : props.pos?.options?.defaultValue
+          ? props.pos?.options?.defaultValue
+          : ""
+    );
+    setSelectOption(
+      props.pos?.options?.response
+        ? props.pos?.options?.response
+        : props.pos?.options?.defaultValue
+          ? props.pos?.options?.defaultValue
+          : ""
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -120,54 +133,8 @@ function PlaceholderType(props) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos?.options?.defaultValue]);
+  }, [props.pos]);
 
-  useEffect(() => {
-    if (type && type === "date") {
-      if (props.selectDate) {
-        let updateDate;
-        if (props.selectDate.format === "dd-MM-yyyy") {
-          const [day, month, year] = props.saveDateFormat.split("-");
-          updateDate = new Date(`${year}-${month}-${day}`);
-        } else {
-          if (props?.saveDateFormat) {
-            updateDate = new Date(props.saveDateFormat);
-          }
-        }
-        // const updateDate = new Date(props.saveDateFormat);
-        setStartDate(updateDate);
-        const dateObj = {
-          date: props.saveDateFormat,
-          format: props.selectDate
-            ? props.selectDate?.format
-            : props.pos?.options?.validation?.format
-              ? props.pos?.options?.validation?.format
-              : "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?.options?.validation?.format
-              ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
-        );
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.saveDateFormat]);
-
-  const dateValue = (value) => {
-    props.setSaveDateFormat(value);
-    return <span>{value}</span>;
-  };
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
       className="inputPlaceholder"
@@ -175,7 +142,7 @@ function PlaceholderType(props) {
       onClick={onClick}
       ref={ref}
     >
-      {dateValue(value)}
+      {value}
       <i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
     </div>
   ));
@@ -307,7 +274,16 @@ function PlaceholderType(props) {
       isRadio
     );
   };
-
+  //function to set onchange date
+  const handleOnDateChange = (date) => {
+    props.setStartDate(date);
+    const isDateChange = true;
+    const dateObj = {
+      date: date,
+      format: props.selectDate.format
+    };
+    props.handleSaveDate(dateObj, isDateChange);
+  };
   switch (type) {
     case "signature":
       return props.pos.SignUrl ? (
@@ -356,51 +332,55 @@ function PlaceholderType(props) {
         <div style={{ zIndex: props.isSignYourself && "99" }}>
           {props.pos.options?.values?.map((data, ind) => {
             return (
-              <input
+              <div key={ind} className="flex items-center text-center gap-0.5">
-                key={ind}
+                <input
-                style={{
+                  style={{
-                  width: props.pos.Width,
+                    width: props.pos.Width,
-                  display: "flex",
+                    display: "flex",
-                  justifyContent: "center",
+                    justifyContent: "center",
-                  marginBottom: "6px",
+                    marginTop: ind === 0 ? 0 : "5px"
-                  marginTop: "5px"
+                  }}
-                }}
+                  onBlur={handleInputBlur}
-                onBlur={handleInputBlur}
+                  disabled={
-                disabled={
+                    props.isNeedSign &&
-                  props.isNeedSign &&
+                    (props.pos.options?.isReadOnly ||
-                  (props.pos.options?.isReadOnly ||
+                      props.data?.signerObjId !== props.signerObjId)
-                    props.data?.signerObjId !== props.signerObjId)
+                  }
-                }
+                  type="checkbox"
-                type="checkbox"
+                  checked={selectCheckbox(ind)}
-                checked={selectCheckbox(ind)}
+                  onChange={(e) => {
-                onChange={(e) => {
+                    if (e.target.checked) {
-                  if (e.target.checked) {
+                      if (!props.isPlaceholder) {
-                    if (!props.isPlaceholder) {
+                        const maxRequired =
-                      const maxRequired =
+                          props.pos.options?.validation?.maxRequiredCount;
-                        props.pos.options?.validation?.maxRequiredCount;
+                        const maxCountInt =
-                      const maxCountInt = maxRequired && parseInt(maxRequired);
+                          maxRequired && parseInt(maxRequired);
 
-                      if (maxCountInt > 0) {
+                        if (maxCountInt > 0) {
-                        if (
+                          if (
-                          selectedCheckbox &&
+                            selectedCheckbox &&
-                          selectedCheckbox?.length <= maxCountInt - 1
+                            selectedCheckbox?.length <= maxCountInt - 1
-                        ) {
+                          ) {
+                            handleCheckboxValue(e.target.checked, ind);
+                          }
+                        } else {
                           handleCheckboxValue(e.target.checked, ind);
                         }
-                      } else {
-                        handleCheckboxValue(e.target.checked, ind);
                       }
+                    } else {
+                      handleCheckboxValue(e.target.checked, ind);
                     }
-                  } else {
+                  }}
-                    handleCheckboxValue(e.target.checked, ind);
+                />
-                  }
+                {!props.pos.options?.isHideLabel && (
-                }}
+                  <label className="text-xs mb-0 text-center">{data}</label>
-              />
+                )}
+              </div>
             );
           })}
         </div>
       );
-    case "text":
+    case textInputWidget:
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
         <input
@@ -639,21 +619,21 @@ function PlaceholderType(props) {
               </div>
             )}
             disabled={
-              props.isNeedSign && props.data?.signerObjId !== props.signerObjId
+              props.isPlaceholder ||
+              (props.isNeedSign &&
+                props.data?.signerObjId !== props.signerObjId)
             }
             onBlur={handleInputBlur}
             closeOnScroll={true}
             className="inputPlaceholder"
             style={{ outlineColor: "#007bff" }}
             selected={
-              startDate
+              props?.startDate
-                ? startDate
+                ? props?.startDate
                 : props.pos.options?.response &&
                   new Date(props.pos.options.response)
             }
-            onChange={(date) => {
+            onChange={(date) => handleOnDateChange(date)}
-              setStartDate(date);
-            }}
             popperPlacement="top-end"
             customInput={<ExampleCustomInput />}
             dateFormat={
@@ -661,7 +641,7 @@ function PlaceholderType(props) {
                 ? props.selectDate?.format
                 : props.pos?.options?.validation?.format
                   ? props.pos?.options?.validation?.format
-                  : "MM/dd/YYYY"
+                  : "MM/dd/yyyy"
             }
           />
         </div>
@@ -721,43 +701,48 @@ function PlaceholderType(props) {
           <span>{type}</span>
         </div>
       );
-    case "radio":
+    case radioButtonWidget:
       return (
         <div>
           {props.pos.options?.values.map((data, ind) => {
             return (
-              <input
+              <div key={ind} className="flex items-center text-center gap-0.5">
-                key={ind}
+                <input
-                style={{
+                  style={{
-                  width: props.pos.Width,
+                    width: props.pos.Width,
-                  display: "flex",
+                    display: "flex",
-                  justifyContent: "center",
+                    justifyContent: "center",
-                  marginBottom: "6px",
+                    marginTop: ind === 0 ? 0 : "5px"
-                  marginTop: "5px"
+                  }}
-                }}
+                  type="radio"
-                type="radio"
+                  disabled={
-                disabled={
+                    props.isNeedSign &&
-                  props.isNeedSign &&
+                    (props.pos.options?.isReadOnly ||
-                  (props.pos.options?.isReadOnly ||
+                      props.data?.signerObjId !== props.signerObjId)
-                    props.data?.signerObjId !== props.signerObjId)
-                }
-                checked={handleRadioCheck(data)}
-                onChange={(e) => {
-                  if (!props.isPlaceholder) {
-                    handleCheckRadio(e.target.checked, data);
                   }
-                }}
+                  checked={handleRadioCheck(data)}
-              />
+                  onChange={(e) => {
+                    if (!props.isPlaceholder) {
+                      handleCheckRadio(e.target.checked, data);
+                    }
+                  }}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <label className="text-xs mb-0">{data}</label>
+                )}
+              </div>
             );
           })}
         </div>
       );
-    case "label":
+    case textWidget:
       return (
         <textarea
           placeholder="Enter label"
           rows={1}
+          value={textValue}
           onChange={(e) => {
+            setTextValue(e.target.value);
             onChangeInput(
               e.target.value,
               props.pos.key,

apps/OpenSign/src/components/pdf/RenderPdf.js

@@ -56,7 +56,9 @@ function RenderPdf({
   selectWidgetId,
   unSignedWidgetId,
   setIsCheckbox,
-  handleNameModal
+  handleNameModal,
+  setTempSignerId,
+  uniqueId
 }) {
   const isMobile = window.innerWidth < 767;
   const newWidth = containerWH.width;
@@ -268,6 +270,8 @@ function RenderPdf({
                         setIsInitial={setIsInitial}
                         setValidateAlert={setValidateAlert}
                         unSignedWidgetId={unSignedWidgetId}
+                        setSelectWidgetId={setSelectWidgetId}
+                        selectWidgetId={selectWidgetId}
                       />
                     </React.Fragment>
                   )
@@ -393,6 +397,8 @@ function RenderPdf({
                                         setSelectWidgetId={setSelectWidgetId}
                                         selectWidgetId={selectWidgetId}
                                         handleNameModal={handleNameModal}
+                                        setTempSignerId={setTempSignerId}
+                                        uniqueId={uniqueId}
                                       />
                                     </React.Fragment>
                                   );
@@ -574,6 +580,8 @@ function RenderPdf({
                                           setSelectWidgetId={setSelectWidgetId}
                                           selectWidgetId={selectWidgetId}
                                           handleNameModal={handleNameModal}
+                                          setTempSignerId={setTempSignerId}
+                                          uniqueId={uniqueId}
                                         />
                                       </React.Fragment>
                                     );

apps/OpenSign/src/components/pdf/WidgetComponent.js

@@ -3,7 +3,12 @@ import ModalUi from "../../primitives/ModalUi";
 import RecipientList from "./RecipientList";
 import { useDrag } from "react-dnd";
 import WidgetList from "./WidgetList";
-import { widgets } from "../../constant/Utils";
+import {
+  radioButtonWidget,
+  textInputWidget,
+  textWidget,
+  widgets
+} from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
@@ -58,16 +63,15 @@ function WidgetComponent({
       isDragCheck: !!monitor.isDragging()
     })
   });
-  const [, text] = useDrag({
+  const [, textInput] = useDrag({
     type: "BOX",
     item: {
       type: "BOX",
       id: 7,
-      text: "text"
+      text: textInputWidget
     },
-
     collect: (monitor) => ({
-      isDragText: !!monitor.isDragging()
+      isDragTextInput: !!monitor.isDragging()
     })
   });
   const [, initials] = useDrag({
@@ -153,28 +157,28 @@ function WidgetComponent({
       isDragEmail: !!monitor.isDragging()
     })
   });
-  const [, radio] = useDrag({
+  const [, radioButton] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 15,
-      text: "radio"
+      text: radioButtonWidget
     },
     collect: (monitor) => ({
-      isDragRadio: !!monitor.isDragging()
+      isDragRadiotton: !!monitor.isDragging()
     })
   });
-  const [, label] = useDrag({
+  const [, text] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 16,
-      text: "label"
+      text: textWidget
     },
     collect: (monitor) => ({
-      isDragLabel: !!monitor.isDragging()
+      isDragText: !!monitor.isDragging()
     })
   });
   const isMobile = window.innerWidth < 767;
@@ -204,17 +208,17 @@ function WidgetComponent({
       dragSignature,
       dragStamp,
       initials,
-      label,
+      name,
+      jobTitle,
+      company,
+      date,
       text,
+      textInput,
       checkbox,
       dropdown,
-      radio,
+      radioButton,
       image,
-      date,
+      email
-      name,
-      email,
-      company,
-      jobTitle
     ];
     const getWidgetArray = widgets;
     const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -227,13 +231,15 @@ function WidgetComponent({
 
   const filterWidgets = widget.filter(
     (data) =>
-      data.type !== "dropdown" && data.type !== "radio" && data.type !== "label"
+      data.type !== "dropdown" &&
+      data.type !== radioButtonWidget &&
+      data.type !== textWidget
   );
-  const labelWidget = widget.filter((data) => data.type !== "label");
+  const textWidgetData = widget.filter((data) => data.type !== textWidget);
   const updateWidgets = isSignYourself
     ? filterWidgets
     : isTemplateFlow
-      ? labelWidget
+      ? textWidgetData
       : widget;
 
   return (

apps/OpenSign/src/components/pdf/WidgetNameModal.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
 import "../../styles/AddUser.css";
 import RegexParser from "regex-parser";
+import { textInputWidget } from "../../constant/Utils";
 
 const WidgetNameModal = (props) => {
   const [formdata, setFormdata] = useState({
@@ -69,7 +70,7 @@ const WidgetNameModal = (props) => {
         return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
       case "number":
         return "/^\\d+$/";
-      case "text":
+      case textInputWidget:
         return "/^[a-zA-Zs]+$/";
       default:
         return type;
@@ -111,8 +112,8 @@ const WidgetNameModal = (props) => {
             required
           />
         </div>
-        {(props.defaultdata?.type === "text" ||
+        {(props.defaultdata?.type === textInputWidget ||
-          props.widgetName === "text") && (
+          props.widgetName === textInputWidget) && (
           <>
             <div className="form-section">
               <label htmlFor="textvalidate" style={{ fontSize: 13 }}>
@@ -243,8 +244,8 @@ const WidgetNameModal = (props) => {
             })}
           </div>
         </div>
-        {(props.defaultdata?.type === "text" ||
+        {(props.defaultdata?.type === textInputWidget ||
-          props?.widgetName === "text") && (
+          props?.widgetName === textInputWidget) && (
           <div className="form-section">
             <label htmlFor="hint" style={{ fontSize: 13 }}>
               Hint

apps/OpenSign/src/components/shared/fields/CreateFolder.js

@@ -11,6 +11,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const [name, setName] = useState("");
   const [folderList, setFolderList] = useState([]);
   const [isAlert, setIsAlert] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
   const [selectedParent, setSelectedParent] = useState();
   const [alert, setAlert] = useState({ type: "info", message: "" });
   useEffect(() => {
@@ -42,6 +43,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   };
   const handleCreateFolder = async (event) => {
     event.preventDefault();
+    handleLoader(true);
     if (name) {
       const currentUser = Parse.User.current();
       const exsitQuery = new Parse.Query(folderCls);
@@ -52,7 +54,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       }
       const templExist = await exsitQuery.first();
       if (templExist) {
-        setAlert({ type: "dange", message: "Folder already exist!" });
+        setAlert({ type: "danger", message: "Folder already exist!" });
         setIsAlert(true);
         setTimeout(() => {
           setIsAlert(false);
@@ -74,6 +76,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
         const res = await template.save();
         if (res) {
+          handleLoader(false);
           setAlert({
             type: "success",
             message: "Folder created successfully!"
@@ -88,6 +91,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         }
       }
     } else {
+      handleLoader(false);
       setAlert({ type: "info", message: "Please fill folder name" });
       setIsAlert(true);
       setTimeout(() => {
@@ -98,10 +102,21 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const handleOptions = (e) => {
     setSelectedParent(e.target.value);
   };
+  const handleLoader = (status) => {
+    setIsLoader(status);
+  };
   return (
     <div>
       {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
-      <div id="createFolder">
+      <div id="createFolder" className="relative">
+        {isLoader && (
+          <div className="absolute h-full w-full flex justify-center items-center ">
+            <div
+              style={{ fontSize: "45px", color: "#3dd3e0" }}
+              className="loader-37"
+            ></div>
+          </div>
+        )}
         <h1 className="text-base font-semibold">Create Folder</h1>
         <div className="text-xs mt-2">
           <label className="block">
@@ -133,6 +148,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         <div>
           <button
             onClick={handleCreateFolder}
+            disabled={isLoader}
             className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
           >
             <i className="fa-solid fa-plus mr-1"></i>

apps/OpenSign/src/components/shared/fields/SelectFolder.js

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import CreateFolder from "./CreateFolder";
 import ModalUi from "../../../primitives/ModalUi";
+import Tooltip from "../../../primitives/Tooltip";
 
-const SelectFolder = ({ required, onSuccess, folderCls }) => {
+const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
   const [isOpen, SetIsOpen] = useState(false);
   const [clickFolder, setClickFolder] = useState("");
   const [selectFolder, setSelectedFolder] = useState({});
@@ -22,6 +23,21 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
     // eslint-disable-next-line
   }, [isOpen]);
+  // below useEffect is used to reset folder selection if user pass isReset = true from parent component
+  useEffect(() => {
+    if (isReset == true) {
+      handleReset();
+    }
+  }, [isReset]);
+  const handleReset = () => {
+    setFolderPath({});
+    setSelectedFolder("");
+    setClickFolder("");
+    setIsAdd(false);
+    setFolderList([]);
+    setTabList([]);
+  };
+  // `fetchFolder` is used to fetch of folder list created by user on basis of folderPtr or without folderPtr
   const fetchFolder = async (folderPtr) => {
     setIsLoader(true);
     try {
@@ -47,6 +63,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       setIsLoader(false);
     }
   };
+
+  // `handleSelect` is used to save pointer of folder selected by user and it's path in state
   const handleSelect = (item) => {
     setFolderList([]);
     setClickFolder({ ObjectId: item.objectId, Name: item.Name });
@@ -73,6 +91,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
   };
 
+  // `handleSubmit` is used to pass folderPtr to parent component
   const handleSubmit = () => {
     let url = "Root";
     tabList.forEach((t) => {
@@ -85,6 +104,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
     SetIsOpen(false);
   };
+
+  // `handleCancel` is used to clear list of folder, close popup and folderUrl
   const handleCancel = () => {
     SetIsOpen(false);
     setClickFolder({});
@@ -92,6 +113,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     setTabList([]);
   };
 
+  // `handleCancel` is call when user click on folder name from path/tab in popup
   const removeTabListItem = async (e, i) => {
     e.preventDefault();
     // setEditable(false);
@@ -121,9 +143,11 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       fetchFolder(folderPtr);
     }
   };
+  // `handleCreate` is used to open folder creation form in popup
   const handleCreate = () => {
     setIsAdd(!isAdd);
   };
+  // `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
   const handleAddFolder = () => {
     setFolderList([]);
     if (clickFolder && clickFolder.ObjectId) {
@@ -145,7 +169,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
           {required && <span className="text-red-500 text-[13px]">*</span>}
         </label>
       </div>
-      <div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
+      <div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
         <div>
           <i
             className="far fa-folder-open text-[40px] text-[#33bbff]"
@@ -170,6 +194,13 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
           </p>
         </div>
+        <div className="absolute top-1 right-1 cursor-pointer">
+          <Tooltip
+            message={
+              "If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."
+            }
+          />
+        </div>
       </div>
       <ModalUi
         title={"Select Folder"}
@@ -201,23 +232,25 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             <hr />
           </div>
           <div className="mt-2 mb-3">
-            {!isAdd &&
+            <div className="max-h-[210px] overflow-auto">
-              folderList.length > 0 &&
+              {!isAdd &&
-              folderList.map((folder) => (
+                folderList.length > 0 &&
-                <div
+                folderList.map((folder) => (
-                  key={folder.Name}
+                  <div
-                  className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
+                    key={folder.Name}
-                  onClick={() => handleSelect(folder)}
+                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
-                >
+                    onClick={() => handleSelect(folder)}
-                  <div className="flex items-center gap-2">
+                  >
-                    <i
+                    <div className="flex items-center gap-2">
-                      className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                      <i
-                      aria-hidden="true"
+                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
-                    ></i>
+                        aria-hidden="true"
-                    <span className="font-semibold">{folder.Name}</span>
+                      ></i>
+                      <span className="font-semibold">{folder.Name}</span>
+                    </div>
                   </div>
-                </div>
+                ))}
-              ))}
+            </div>
             {isAdd && (
               <CreateFolder
                 parentFolderId={clickFolder && clickFolder.ObjectId}

apps/OpenSign/src/components/shared/fields/SignersInput.js

@@ -19,7 +19,7 @@ const SignersInput = (props) => {
   Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
-  const [selected, setSelected] = React.useState([]);
+  const [selected, setSelected] = useState([]);
   const [isModal, setIsModel] = useState(false);
   const onChange = (selectedOptions) => setSelected(selectedOptions);
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -63,6 +63,11 @@ const SignersInput = (props) => {
   useEffect(() => {
     GetSelectListData();
   }, []);
+  useEffect(() => {
+    if (props.isReset && props.isReset === true) {
+      setSelected([]);
+    }
+  }, [props.isReset]);
 
   useEffect(() => {
     if (selected && selected.length) {

apps/OpenSign/src/constant/Utils.js

@@ -5,6 +5,9 @@ import React from "react";
 import { rgb } from "pdf-lib";
 
 export const isMobile = window.innerWidth < 767;
+export const textInputWidget = "text input";
+export const textWidget = "text";
+export const radioButtonWidget = "radio button";
 export const openInNewTab = (url) => {
   window.open(url, "_blank", "noopener,noreferrer");
 };
@@ -162,12 +165,32 @@ export const widgets = [
     iconSize: "15px"
   },
   {
-    type: "label",
+    type: "name",
+    icon: "fa-solid fa-user",
+    iconSize: "21px"
+  },
+  {
+    type: "job title",
+    icon: "fa-solid fa-address-card",
+    iconSize: "17px"
+  },
+  {
+    type: "company",
+    icon: "fa-solid fa-building",
+    iconSize: "25px"
+  },
+  {
+    type: "date",
+    icon: "fa-solid fa-calendar-days",
+    iconSize: "20px"
+  },
+  {
+    type: textWidget,
     icon: "fa-solid fa-text-width",
     iconSize: "20px"
   },
   {
-    type: "text",
+    type: textInputWidget,
     icon: "fa-solid fa-font",
     iconSize: "21px"
   },
@@ -182,7 +205,7 @@ export const widgets = [
     iconSize: "19px"
   },
   {
-    type: "radio",
+    type: radioButtonWidget,
     icon: "fa-regular fa-circle-dot",
     iconSize: "20px"
   },
@@ -191,40 +214,19 @@ export const widgets = [
     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",
-    iconSize: "25px"
-  },
-  {
-    type: "job title",
-    icon: "fa-solid fa-address-card",
-    iconSize: "17px"
   }
 ];
 
-const getDate = () => {
+export const getDate = () => {
   const date = new Date();
   const milliseconds = date.getTime();
   const newDate = moment(milliseconds).format("MM/DD/YYYY");
   return newDate;
 };
-
 export const addWidgetOptions = (type) => {
   const defaultOpt = {
     name: "",
@@ -236,8 +238,11 @@ export const addWidgetOptions = (type) => {
     case "stamp":
       return defaultOpt;
     case "checkbox":
-      return defaultOpt;
+      return {
-    case "text":
+        ...defaultOpt,
+        options: { isReadOnly: false, isHideLabel: false }
+      };
+    case textInputWidget:
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "initials":
       return defaultOpt;
@@ -248,16 +253,25 @@ export const addWidgetOptions = (type) => {
     case "job title":
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "date":
-      return { ...defaultOpt, response: getDate() };
+      return {
+        ...defaultOpt,
+        response: getDate(),
+        validation: { format: "MM/dd/yyyy", type: "date-format" }
+      };
     case "image":
       return defaultOpt;
     case "email":
       return { ...defaultOpt, validation: { type: "email", pattern: "" } };
     case "dropdown":
       return defaultOpt;
-    case "radio":
+    case radioButtonWidget:
-      return { ...defaultOpt, values: [] };
+      return {
-    case "label":
+        ...defaultOpt,
+        values: [],
+        isReadOnly: false,
+        isHideLabel: false
+      };
+    case textWidget:
       return defaultOpt;
     default:
       return {};
@@ -323,7 +337,7 @@ export const defaultWidthHeight = (type) => {
       return { width: 150, height: 60 };
     case "checkbox":
       return { width: 15, height: 15 };
-    case "text":
+    case textInputWidget:
       return { width: 150, height: 25 };
     case "dropdown":
       return { width: 120, height: 22 };
@@ -341,9 +355,9 @@ export const defaultWidthHeight = (type) => {
       return { width: 70, height: 70 };
     case "email":
       return { width: 150, height: 20 };
-    case "radio":
+    case radioButtonWidget:
       return { width: 15, height: 30 };
-    case "label":
+    case textWidget:
       return { width: 150, height: 17 };
     default:
       return { width: 150, height: 60 };
@@ -692,13 +706,27 @@ export const onChangeInput = (
 
     const updatePosition = getXYdata.map((positionData) => {
       if (positionData.key === signKey) {
-        return {
+        if (dateFormat) {
-          ...positionData,
+          return {
-          options: {
+            ...positionData,
-            ...positionData.options,
+            options: {
-            response: value
+              ...positionData.options,
-          }
+              response: value,
-        };
+              validation: {
+                type: "date-format",
+                format: dateFormat // This indicates the required date format explicitly.
+              }
+            }
+          };
+        } else {
+          return {
+            ...positionData,
+            options: {
+              ...positionData.options,
+              response: value
+            }
+          };
+        }
       }
       return positionData;
     });
@@ -970,7 +998,6 @@ export const multiSignEmbed = async (
     } else {
       updateItem = item.pos;
     }
-
     const newWidth = containerWH.width;
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
     const pageNo = item.pageNumber;
@@ -1060,7 +1087,7 @@ export const multiSignEmbed = async (
           ? labelDefaultHeight
           : scaleHeight;
         const widgetHeight =
-          position.type === "radio"
+          position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
               ? 10
@@ -1125,7 +1152,7 @@ export const multiSignEmbed = async (
         }
       };
       const widgetTypeExist = [
-        "text",
+        textInputWidget,
         "name",
         "company",
         "job title",
@@ -1157,6 +1184,14 @@ export const multiSignEmbed = async (
               yPosition = yPos(position, ind);
               addYPosition = height + 8;
             }
+            if (!position?.options?.isHideLabel) {
+              // below line of code is used to embed label with radio button in pdf
+              page.drawText(item, {
+                x: xPos(position) + 15,
+                y: yPosition + 2,
+                size: height
+              });
+            }
             checkbox.addToPage(page, {
               x: xPos(position),
               y: yPosition,
@@ -1171,7 +1206,7 @@ export const multiSignEmbed = async (
             checkbox.enableReadOnly();
           });
         }
-      } else if (position.type === "label") {
+      } else if (position.type === textWidget) {
         const font = await pdfDoc.embedFont("Helvetica");
         const fontSize = 12;
         let textContent;
@@ -1251,10 +1286,11 @@ export const multiSignEmbed = async (
           x: xPos(position),
           y: yPos(position),
           width: scaleWidth,
-          height: scaleHeight
+          height: scaleHeight,
+          borderWidth: 0
         });
         dropdown.enableReadOnly();
-      } else if (position.type === "radio") {
+      } else if (position.type === radioButtonWidget) {
         const radioRandomId = "radio" + randomId();
         const radioGroup = form.createRadioGroup(radioRandomId);
         let addYPosition = 18;
@@ -1268,6 +1304,14 @@ export const multiSignEmbed = async (
             yPosition = yPos(position);
           }
 
+          if (!position?.options?.isHideLabel) {
+            // below line of code is used to embed label with radio button in pdf
+            page.drawText(data, {
+              x: xPos(position) + 15,
+              y: yPosition + 2,
+              size: 11
+            });
+          }
           radioGroup.addOptionToPage(data, page, {
             x: xPos(position),
             y: yPosition,

apps/OpenSign/src/layout/HomeLayout.js

@@ -97,7 +97,7 @@ const HomeLayout = () => {
         ...resArr,
         {
           selector: '[data-tut="reactourLast"]',
-          content: `You are good to go`,
+          content: `You are ready to start using OpenSign! If you need support feel free to contact us.`,
           position: "top"
           // style: { backgroundColor: "#abd4d2" },
         }

apps/OpenSign/src/pages/Form.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { formJson } from "../json/FormJson";
 import AddUser from "../components/AddUser";
@@ -11,6 +11,7 @@ import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 
+// `Form` render all type of Form on this basis of their provided in path
 function Form() {
   const { id } = useParams();
 
@@ -40,13 +41,16 @@ const Forms = (props) => {
   const [fileupload, setFileUpload] = useState([]);
   const [fileload, setfileload] = useState(false);
   const [percentage, setpercentage] = useState(0);
+  const [isReset, setIsReset] = useState(false);
   const [isAlert, setIsAlert] = useState(false);
   const [isSubmit, setIsSubmit] = useState(false);
   const [isErr, setIsErr] = useState("");
   const handleStrInput = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
-
+  useEffect(() => {
+    handleReset();
+  }, [props.title]);
   const handleFileInput = (e) => {
     setpercentage(0);
     try {
@@ -222,15 +226,19 @@ const Forms = (props) => {
   };
 
   const handleReset = () => {
+    setIsReset(true);
     setSigners([]);
     setFolder({ ObjectId: "", Name: "" });
     setFormData({
       Name: "",
       Description: "",
-      Note: ""
+      Note: "Please review and sign this document",
+      TimeToCompleteDays: 15,
+      SendinOrder: "false"
     });
     setFileUpload([]);
     setpercentage(0);
+    setTimeout(() => setIsReset(false), 50);
   };
   return (
     <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
@@ -334,7 +342,9 @@ const Forms = (props) => {
               onChange={(e) => handleStrInput(e)}
             />
           </div>
-          {props.signers && <SignersInput onChange={handleSigners} required />}
+          {props.signers && (
+            <SignersInput onChange={handleSigners} isReset={isReset} required />
+          )}
           <div className="text-xs mt-2">
             <label className="block">
               Note<span className="text-red-500 text-[13px]">*</span>
@@ -347,7 +357,11 @@ const Forms = (props) => {
               required
             />
           </div>
-          <SelectFolder onSuccess={handleFolder} folderCls={props.Cls} />
+          <SelectFolder
+            onSuccess={handleFolder}
+            folderCls={props.Cls}
+            isReset={isReset}
+          />
 
           {props.title === "Request Signatures" && (
             <div className="text-xs mt-2">
@@ -399,10 +413,10 @@ const Forms = (props) => {
               type="submit"
               disabled={isSubmit}
             >
-              Submit
+              Next
             </button>
             <div
-              className="bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+              className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
               onClick={() => handleReset()}
             >
               Reset

apps/OpenSign/src/pages/GuestLogin.js

@@ -4,6 +4,7 @@ import "../styles/loginPage.css";
 import loader from "../assets/images/loader2.gif";
 import axios from "axios";
 import { themeColor } from "../constant/const";
+import { contractUsers } from "../constant/Utils";
 
 function GuestLogin() {
   const { id, userMail, contactBookId, serverUrl } = useParams();
@@ -103,11 +104,19 @@ function GuestLogin() {
         } else {
           let _user = user.data.result;
           const parseId = localStorage.getItem("parseAppId");
+          const contractUserDetails = await contractUsers(_user.email);
           localStorage.setItem("UserInformation", JSON.stringify(_user));
           localStorage.setItem(
             `Parse/${parseId}/currentUser`,
             JSON.stringify(_user)
           );
+          if (contractUserDetails) {
+            localStorage.setItem(
+              "Extand_Class",
+              JSON.stringify(contractUserDetails)
+            );
+          }
+
           localStorage.setItem("username", _user.name);
           localStorage.setItem("accesstoken", _user.sessionToken);
           //save isGuestSigner true in local to handle login flow header in mobile view

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -19,7 +19,8 @@ import {
   onImageSelect,
   onSaveSign,
   onSaveImage,
-  addDefaultSignatureImg
+  addDefaultSignatureImg,
+  radioButtonWidget
 } from "../constant/Utils";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -48,6 +49,7 @@ function PdfRequestFiles() {
   const [imgWH, setImgWH] = useState({});
   const imageRef = useRef(null);
   const [handleError, setHandleError] = useState();
+  const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -385,7 +387,8 @@ function PdfRequestFiles() {
           for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
             checkboxExist =
               checkUser[0].placeHolder[i].pos[j].type === "checkbox";
-            radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
+            radioExist =
+              checkUser[0].placeHolder[i].pos[j].type === radioButtonWidget;
             if (checkboxExist) {
               requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
@@ -434,7 +437,8 @@ function PdfRequestFiles() {
             } else if (radioExist) {
               requiredRadio = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
-                  !position.options?.isReadOnly && position.type === "radio"
+                  !position.options?.isReadOnly &&
+                  position.type === radioButtonWidget
               );
               if (requiredRadio && requiredRadio?.length > 0) {
                 let checkSigned;
@@ -457,7 +461,7 @@ function PdfRequestFiles() {
               const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
                   position.options?.status === "required" &&
-                  position.type !== "radio" &&
+                  position.type !== radioButtonWidget &&
                   position.type !== "checkbox"
               );
               if (requiredWidgets && requiredWidgets?.length > 0) {
@@ -1173,6 +1177,8 @@ function PdfRequestFiles() {
                   setIsInitial={setIsInitial}
                   setValidateAlert={setValidateAlert}
                   unSignedWidgetId={unSignedWidgetId}
+                  setSelectWidgetId={setSelectWidgetId}
+                  selectWidgetId={selectWidgetId}
                 />
               )}
             </div>

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -24,7 +24,10 @@ import {
   randomId,
   defaultWidthHeight,
   multiSignEmbed,
-  addWidgetOptions
+  addWidgetOptions,
+  textInputWidget,
+  textWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -76,6 +79,7 @@ function PlaceHolderSign() {
   const [isResize, setIsResize] = useState(false);
   const [zIndex, setZIndex] = useState(1);
   const [signKey, setSignKey] = useState();
+  const [tempSignerId, setTempSignerId] = useState("");
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
@@ -380,18 +384,16 @@ function PlaceHolderSign() {
           pos: dropData
         };
       }
-
       setSelectWidgetId(key);
       if (signer) {
         let filterSignerPos;
-        if (dragTypeValue === "label") {
+        if (dragTypeValue === textWidget) {
           filterSignerPos = signerPos.filter((data) => data.Role === "prefill");
         } else {
           filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
         }
 
         const { blockColor, Role } = signer;
-
         //adding placholder in existing signer pos array (placaholder)
         if (filterSignerPos.length > 0) {
           const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -412,7 +414,7 @@ function PlaceHolderSign() {
             };
             updatePlace.push(xyPos);
             let updatesignerPos;
-            if (dragTypeValue === "label") {
+            if (dragTypeValue === textWidget) {
               updatesignerPos = signerPos.map((x) =>
                 x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
               );
@@ -425,7 +427,7 @@ function PlaceHolderSign() {
             setSignerPos(updatesignerPos);
           } else {
             let updatesignerPos;
-            if (dragTypeValue === "label") {
+            if (dragTypeValue === textWidget) {
               updatesignerPos = signerPos.map((x) =>
                 x.Role === "prefill"
                   ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
@@ -442,9 +444,8 @@ function PlaceHolderSign() {
           }
         } else {
           //adding new placeholder for selected signer in pos array (placeholder)
-          // const signerData = signerPos;
           let placeHolderPos;
-          if (dragTypeValue === "label") {
+          if (dragTypeValue === textWidget) {
             placeHolderPos = {
               signerPtr: {},
               signerObjId: "",
@@ -484,9 +485,12 @@ function PlaceHolderSign() {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
+        } else if (
+          dragTypeValue !== textWidget &&
+          dragTypeValue !== "signature"
+        ) {
           setIsNameModal(true);
         }
         setWidgetType(dragTypeValue);
@@ -736,7 +740,7 @@ function PlaceHolderSign() {
 
     if (getPrefill && isLabel) {
       const alert = {
-        mssg: "label",
+        mssg: textWidget,
         alert: true
       };
       setIsSendAlert(alert);
@@ -1051,7 +1055,8 @@ function PlaceHolderSign() {
     addOption,
     deleteOption,
     status,
-    defaultValue
+    defaultValue,
+    isHideLabel
   ) => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -1067,7 +1072,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
@@ -1089,7 +1094,8 @@ function PlaceHolderSign() {
                     ...position.options,
                     name: dropdownName,
                     values: dropdownOptions,
-                    isReadOnly: isReadOnly,
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false,
                     defaultValue: defaultValue
                   }
                 };
@@ -1121,7 +1127,8 @@ function PlaceHolderSign() {
                       maxRequiredCount: maxCount
                     },
                     defaultValue: defaultValue,
-                    isReadOnly: isReadOnly
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1186,7 +1193,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (position.type === "text") {
+            if (position.type === textInputWidget) {
               return {
                 ...position,
                 options: {
@@ -1406,13 +1413,13 @@ function PlaceHolderSign() {
 
               <ModalUi
                 headerColor={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
                     ? "#dc3545"
                     : isSendAlert.mssg === "confirm" && themeColor
                 }
                 isOpen={isSendAlert.alert}
                 title={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
                     ? "Fields required"
                     : isSendAlert.mssg === "confirm" && "Send Mail"
                 }
@@ -1421,7 +1428,7 @@ function PlaceHolderSign() {
                 <div style={{ height: "100%", padding: 20 }}>
                   {isSendAlert.mssg === "sure" ? (
                     <p>Please add field for all recipients.</p>
-                  ) : isSendAlert.mssg === "label" ? (
+                  ) : isSendAlert.mssg === textWidget ? (
                     <p>Please confirm that you have filled label widget.</p>
                   ) : (
                     isSendAlert.mssg === "confirm" && (
@@ -1553,11 +1560,14 @@ function PlaceHolderSign() {
                 allPages={allPages}
                 pageNumber={pageNumber}
                 signKey={signKey}
-                // signerObjId={signerObjId}
                 Id={uniqueId}
+                widgetType={widgetType}
+                setUniqueId={setUniqueId}
+                tempSignerId={tempSignerId}
+                setTempSignerId={setTempSignerId}
               />
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}
@@ -1639,6 +1649,8 @@ function PlaceHolderSign() {
                     setSelectWidgetId={setSelectWidgetId}
                     selectWidgetId={selectWidgetId}
                     handleNameModal={setIsNameModal}
+                    setTempSignerId={setTempSignerId}
+                    uniqueId={uniqueId}
                   />
                 )}
               </div>

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -3,7 +3,6 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import { themeColor } from "../constant/const";
 import axios from "axios";
-import moment from "moment";
 import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
@@ -25,7 +24,9 @@ import {
   onSaveSign,
   contractUsers,
   contactBook,
-  randomId
+  randomId,
+  getDate,
+  textInputWidget
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -308,13 +309,6 @@ function SignYourSelf() {
       setIsLoading(loadObj);
     }
   };
-
-  const getDate = () => {
-    const date = new Date();
-    const milliseconds = date.getTime();
-    const newDate = moment(milliseconds).format("MM/DD/YYYY");
-    return newDate;
-  };
   const getWidgetValue = (type) => {
     switch (type) {
       case "name":
@@ -333,6 +327,7 @@ function SignYourSelf() {
         return "";
     }
   };
+
   const addWidgetOptions = (type) => {
     switch (type) {
       case "signature":
@@ -348,7 +343,7 @@ function SignYourSelf() {
           name: "checkbox"
         };
 
-      case "text":
+      case textInputWidget:
         return {
           name: "text"
         };
@@ -386,7 +381,8 @@ function SignYourSelf() {
       case "date":
         return {
           name: "date",
-          defaultValue: getDate()
+          response: getDate(),
+          validation: { format: "MM/dd/yyyy", type: "date-format" }
         };
       case "image":
         return {
@@ -596,7 +592,6 @@ function SignYourSelf() {
       await signPdfFun(pdfBytes, documentId);
     }
   }
-
   //function for get digital signature
   const signPdfFun = async (base64Url, documentId) => {
     let singleSign = {
@@ -875,7 +870,10 @@ function SignYourSelf() {
     maxCount,
     isReadOnly,
     addOption,
-    deleteOption
+    deleteOption,
+    status,
+    defaultValue,
+    isHideLabel
   ) => {
     const getPageNumer = xyPostion.filter(
       (data) => data.pageNumber === pageNumber
@@ -907,7 +905,8 @@ function SignYourSelf() {
                 ...position.options,
                 name: dropdownName,
                 values: dropdownOptions,
-                isReadOnly: isReadOnly
+                isReadOnly: isReadOnly,
+                isHideLabel: isHideLabel || false
               }
             };
           }

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -21,7 +21,10 @@ import {
   addZIndex,
   createDocument,
   defaultWidthHeight,
-  addWidgetOptions
+  addWidgetOptions,
+  textInputWidget,
+  textWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -442,9 +445,12 @@ const TemplatePlaceholder = () => {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
+        } else if (
+          dragTypeValue !== textWidget &&
+          dragTypeValue !== "signature"
+        ) {
           setIsNameModal(true);
         }
         setCurrWidgetsDetails({});
@@ -970,7 +976,8 @@ const TemplatePlaceholder = () => {
     addOption,
     deleteOption,
     status,
-    defaultValue
+    defaultValue,
+    isHideLabel
   ) => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -986,11 +993,10 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
-
                   Height: position.Height
                     ? position.Height + 15
                     : defaultWidthHeight(widgetType).height + 15
@@ -1010,7 +1016,9 @@ const TemplatePlaceholder = () => {
                     name: dropdownName,
                     values: dropdownOptions,
                     status: status,
-                    defaultValue: defaultValue
+                    defaultValue: defaultValue,
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1040,8 +1048,9 @@ const TemplatePlaceholder = () => {
                       minRequiredCount: minCount,
                       maxRequiredCount: maxCount
                     },
-                    isReadOnly: isReadOnly,
+                    isReadOnly: isReadOnly || false,
-                    defaultValue: defaultValue
+                    defaultValue: defaultValue,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1106,7 +1115,7 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (position.type === "text") {
+            if (position.type === textInputWidget) {
               return {
                 ...position,
                 options: {
@@ -1305,7 +1314,7 @@ const TemplatePlaceholder = () => {
                 </div>
               </ModalUi>
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}

apps/OpenSign/src/primitives/Tooltip.js

@@ -0,0 +1,18 @@
+import React from "react";
+// import * as HoverCard from "@radix-ui/react-hover-card";
+// import "../styles/opensigndrive.css";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+const Tooltip = ({ children, message }) => (
+  <>
+    <a data-tooltip-id="my-tooltip" data-tooltip-content={message}>
+      {children ? (
+        children
+      ) : (
+        <i className="fa-solid fa-question  border-[1.5px] px-1.5 py-0.5 rounded-full border-[#33bbff] text-xs text-[#33bbff]"></i>
+      )}
+    </a>
+    <ReactTooltip id="my-tooltip" className="max-w-[200px]" />
+  </>
+);
+
+export default Tooltip;

apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js

@@ -1,7 +1,8 @@
 import SignPDF from './SignPDF.min.cjs';
 import fs from 'node:fs';
 import axios from 'axios';
-import { plainAddPlaceholder } from 'node-signpdf/dist/helpers/index.js';
+import { pdflibAddPlaceholder } from './customSignPdf/pdflibplaceholder.min.js';
+import { PDFDocument } from 'pdf-lib';
 const serverUrl = process.env.SERVER_URL,
   APPID = process.env.APP_ID,
   masterKEY = process.env.MASTER_KEY;
@@ -15,20 +16,20 @@ async function uploadFile(e, a) {
     console.log('Err ', e), fs.unlinkSync(a);
   }
 }
-async function updateDoc(t, s, r, i, n, o) {
+async function updateDoc(t, s, r, i, o, n) {
   try {
     var d = {
-      UserPtr: { __type: 'Pointer', className: o, objectId: r },
+      UserPtr: { __type: 'Pointer', className: n, objectId: r },
       SignedUrl: s,
       Activity: 'Signed',
       ipAddress: i,
     };
     let e;
-    var l = (e = n.AuditTrail && 0 < n.AuditTrail.length ? [...n.AuditTrail, d] : [d]).filter(
+    var l = (e = o.AuditTrail && 0 < o.AuditTrail.length ? [...o.AuditTrail, d] : [d]).filter(
       e => 'Signed' === e.Activity
     );
     let a = !1;
-    !((n.Signers && 0 < n.Signers.length && l.length !== n.Signers.length) || !(a = !0));
+    !((o.Signers && 0 < o.Signers.length && l.length !== o.Signers.length) || !(a = !0));
     var c = { SignedUrl: s, AuditTrail: e, IsCompleted: a };
     await axios.put(serverUrl + '/classes/contracts_Document/' + t, c, {
       headers: {
@@ -150,9 +151,8 @@ async function sendDoctoWebhook(t, e, a, s) {
           }
         }));
 }
-async function PDF(i, n) {
+async function PDF(i) {
   try {
-    i.params.sign;
     var e = i.params.docId,
       a = i.params.userId,
       o = await axios.get(
@@ -173,125 +173,136 @@ async function PDF(i, n) {
       });
     if (!t.data || !t.data.objectId) return { status: 'error', message: 'this user not allowed!' };
     {
-      var d,
+      var n,
+        d,
         l,
-        c,
+        c = JSON.stringify({ objectId: a });
-        p = JSON.stringify({ objectId: a });
       let s, r;
       r = a
-        ? (d = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + p, {
+        ? (n = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + c, {
             headers: {
               'X-Parse-Application-Id': APPID,
               'X-Parse-Session-Token': i.headers.sessiontoken,
             },
-          })).data && 0 < d.data.results.length
+          })).data && 0 < n.data.results.length
-          ? ((s = d), 'contracts_Contactbook')
+          ? ((s = n), 'contracts_Contactbook')
-          : ((s = await axios.get(serverUrl + '/classes/contracts_Users?where=' + p, {
+          : ((s = await axios.get(serverUrl + '/classes/contracts_Users?where=' + c, {
               headers: { 'X-Parse-Application-Id': APPID, 'X-Parse-Master-Key': masterKEY },
             })),
             'contracts_Users')
-        : ((l = JSON.stringify({
+        : ((d = JSON.stringify({
             UserId: { __type: 'Pointer', className: '_User', objectId: t.data.objectId },
           })),
-          (c = await axios.get(serverUrl + '/classes/contracts_Users?where=' + l, {
+          (l = await axios.get(serverUrl + '/classes/contracts_Users?where=' + d, {
             headers: { 'X-Parse-Application-Id': APPID, 'X-Parse-Master-Key': masterKEY },
-          })).data && 0 < c.data.results.length
+          })).data && 0 < l.data.results.length
-            ? ((s = c), 'contracts_Users')
+            ? ((s = l), 'contracts_Users')
-            : ((s = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + l, {
+            : ((s = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + d, {
                 headers: {
                   'X-Parse-Application-Id': APPID,
                   'X-Parse-Session-Token': i.headers.sessiontoken,
                 },
               })),
               'contracts_Contactbook'));
-      var m = s.data.results[0].Name,
+      var p = s.data.results[0].Name,
-        g = s.data.results[0].Email;
+        m = s.data.results[0].Email;
       if (!i.params.pdfFile) return { status: 'error', message: 'pdf file not present!' };
       {
         let e = Buffer.from(i.params.pdfFile, 'base64');
-        var h = process.env.PFX_BASE64,
+        var g = process.env.PFX_BASE64,
-          u = Buffer.from(h, 'base64'),
+          h = Buffer.from(g, 'base64'),
-          f = {
+          u = {
             UserPtr: { __type: 'Pointer', className: r, objectId: s.data.results[0].objectId },
             SignedUrl: '',
             Activity: 'Signed',
             ipAddress: i.headers['x-real-ip'],
           };
         let a;
-        var y = (a =
+        var f = (a =
           o.data.AuditTrail && 0 < o.data.AuditTrail.length
-            ? [...o.data.AuditTrail, f]
+            ? [...o.data.AuditTrail, u]
-            : [f]).filter(e => 'Signed' === e.Activity);
+            : [u]).filter(e => 'Signed' === e.Activity);
         let t = !1;
         !(
-          (o.data.Signers && 0 < o.data.Signers.length && y.length !== o.data.Signers.length) ||
+          (o.data.Signers && 0 < o.data.Signers.length && f.length !== o.data.Signers.length) ||
           !(t = !0)
         );
-        var v,
+        var y,
           P,
-          b = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`,
+          v,
-          x = './exports/' + b,
+          b,
-          U =
+          x,
+          w,
+          U,
+          I,
+          S,
+          A = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`,
+          D = './exports/' + A,
+          E =
             (t
-              ? ((v = o.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')),
+              ? ((y = o.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')),
                 (e =
-                  v && 0 < v.length
+                  y && 0 < y.length
-                    ? plainAddPlaceholder({
+                    ? ((P = await PDFDocument.load(e)),
-                        pdfBuffer: e,
+                      pdflibAddPlaceholder({
-                        reason: 'Digitally signed by OpenSign for ' + v?.join(', '),
+                        pdfDoc: P,
+                        reason: 'Digitally signed by OpenSign for ' + y?.join(', '),
                         location: 'location',
-                        signatureLength: 1e4,
+                        signatureLength: 15e3,
-                      })
+                      }),
-                    : plainAddPlaceholder({
+                      (v = await P.save()),
-                        pdfBuffer: e,
+                      Buffer.from(v))
-                        reason: 'Digitally signed by OpenSign for ' + m + ' <' + g + '>',
+                    : ((b = await PDFDocument.load(e)),
+                      pdflibAddPlaceholder({
+                        pdfDoc: b,
+                        reason: 'Digitally signed by OpenSign for ' + p + ' <' + m + '>',
                         location: 'location',
-                        signatureLength: 1e4,
+                        signatureLength: 15e3,
-                      })),
+                      }),
-                (P = await new SignPDF(e, u).signPDF()),
+                      (x = await b.save()),
-                fs.writeFileSync(x, P))
+                      Buffer.from(x))),
-              : fs.writeFileSync(x, e),
+                (w = await new SignPDF(e, h).signPDF()),
-            await uploadFile(b, x));
+                fs.writeFileSync(D, w))
-        if (U && U.imageUrl) {
+              : fs.writeFileSync(D, e),
-          const n = await updateDoc(
+            await uploadFile(A, D));
-            i.params.docId,
+        if (E && E.imageUrl)
-            U.imageUrl,
+          return (
-            s.data.results[0].objectId,
+            (U = await updateDoc(
-            i.headers['x-real-ip'],
+              i.params.docId,
-            o.data,
+              E.imageUrl,
-            r
+              s.data.results[0].objectId,
-          );
+              i.headers['x-real-ip'],
-          var I,
+              o.data,
-            w = {
+              r
-              url: U.imageUrl,
+            )),
+            (I = {
+              url: E.imageUrl,
               sender: { Mail: o.data.ExtUserPtr.Email, Name: o.data.ExtUserPtr.Name },
               pdfName: o.data.Name,
-              receiver: g,
+              receiver: m,
-            };
+            }),
-          return (
             o.data.IsSendMail && !1 === o.data.IsSendMail
               ? console.log("don't send mail")
-              : sendMail(w),
+              : sendMail(I),
-            sendDoctoWebhook(o, U.imageUrl, 'signed', s?.data.results?.[0]),
+            sendDoctoWebhook(o, E.imageUrl, 'signed', s?.data.results?.[0]),
-            n &&
+            U &&
-              n.isCompleted &&
+              U.isCompleted &&
-              ((I = {
+              ((S = {
-                url: U.imageUrl,
+                url: E.imageUrl,
                 sender: { Mail: o.data.ExtUserPtr.Email, Name: 'OpenSign™' },
                 pdfName: o.data.Name,
                 receiver: o.data.ExtUserPtr.Email,
               }),
               o.data.IsSendMail && !1 === o.data.IsSendMail
                 ? console.log("don't send mail")
-                : sendCompletedMail(I),
+                : sendCompletedMail(S),
-              sendDoctoWebhook(o, U.imageUrl, 'completed')),
+              sendDoctoWebhook(o, E.imageUrl, 'completed')),
-            fs.unlinkSync(x),
+            fs.unlinkSync(D),
-            console.log('New Signed PDF created called: ' + x),
+            console.log('New Signed PDF created called: ' + D),
-            'success' === n.message
+            'success' === U.message
-              ? { status: 'success', data: U.imageUrl }
+              ? { status: 'success', data: E.imageUrl }
               : { status: 'error', message: 'please provide required parameters!' }
           );
-        }
       }
     }
   } catch (e) {

apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/SignPdfError.min.js

@@ -1 +1,20 @@
-const ERROR_TYPE_UNKNOWN=1,ERROR_TYPE_INPUT=2,ERROR_TYPE_PARSE=3,ERROR_VERIFY_SIGNATURE=4;class SignPdfError extends Error{constructor(R,E=ERROR_TYPE_UNKNOWN){super(R),this.type=E}}SignPdfError.TYPE_UNKNOWN=ERROR_TYPE_UNKNOWN,SignPdfError.TYPE_INPUT=ERROR_TYPE_INPUT,SignPdfError.TYPE_PARSE=ERROR_TYPE_PARSE,SignPdfError.VERIFY_SIGNATURE=ERROR_VERIFY_SIGNATURE;export default SignPdfError;export{ERROR_TYPE_UNKNOWN,ERROR_TYPE_INPUT,ERROR_TYPE_PARSE,ERROR_VERIFY_SIGNATURE};
+const ERROR_TYPE_UNKNOWN = 1,
+  ERROR_TYPE_INPUT = 2,
+  ERROR_TYPE_PARSE = 3,
+  ERROR_VERIFY_SIGNATURE = 4;
+class SignPdfError extends Error {
+  constructor(R, E = ERROR_TYPE_UNKNOWN) {
+    super(R), (this.type = E);
+  }
+}
+(SignPdfError.TYPE_UNKNOWN = ERROR_TYPE_UNKNOWN),
+  (SignPdfError.TYPE_INPUT = ERROR_TYPE_INPUT),
+  (SignPdfError.TYPE_PARSE = ERROR_TYPE_PARSE),
+  (SignPdfError.VERIFY_SIGNATURE = ERROR_VERIFY_SIGNATURE);
+export {
+  ERROR_TYPE_UNKNOWN,
+  ERROR_TYPE_INPUT,
+  ERROR_TYPE_PARSE,
+  ERROR_VERIFY_SIGNATURE,
+  SignPdfError,
+};

apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdflibplaceholder.min.js

@@ -0,0 +1,87 @@
+import {
+  DEFAULT_BYTE_RANGE_PLACEHOLDER,
+  DEFAULT_SIGNATURE_LENGTH,
+  SUBFILTER_ADOBE_PKCS7_DETACHED,
+} from './const.min.js';
+import { SignPdfError } from './SignPdfError.min.js';
+import {
+  PDFArray,
+  PDFDict,
+  PDFHexString,
+  PDFName,
+  PDFNumber,
+  PDFInvalidObject,
+  PDFString,
+} from 'pdf-lib';
+const pdflibAddPlaceholder = ({
+  pdfDoc: e = void 0,
+  pdfPage: o = void 0,
+  reason: t,
+  contactInfo: r = 'emailfromp1289@gmail.com',
+  name: i = 'Name from p12',
+  location: n,
+  signingTime: a = void 0,
+  signatureLength: P = DEFAULT_SIGNATURE_LENGTH,
+  byteRangePlaceholder: F = DEFAULT_BYTE_RANGE_PLACEHOLDER,
+  subFilter: D = SUBFILTER_ADOBE_PKCS7_DETACHED,
+  widgetRect: f = [0, 0, 0, 0],
+  appName: g = void 0,
+}) => {
+  if (void 0 === e && void 0 === o)
+    throw new SignPdfError('PDFDoc or PDFPage must be set.', SignPdfError.TYPE_INPUT);
+  var e = e ?? o.doc,
+    o = o ?? e.getPages()[0],
+    m = PDFArray.withContext(e.context),
+    F =
+      (m.push(PDFNumber.of(0)),
+      m.push(PDFName.of(F)),
+      m.push(PDFName.of(F)),
+      m.push(PDFName.of(F)),
+      PDFHexString.of(String.fromCharCode(0).repeat(P))),
+    P = g ? { App: { Name: g } } : {},
+    g = e.context.obj({
+      Type: 'Sig',
+      Filter: 'Adobe.PPKLite',
+      SubFilter: D,
+      ByteRange: m,
+      Contents: F,
+      Reason: PDFString.of(t),
+      M: PDFString.fromDate(a ?? new Date()),
+      ContactInfo: PDFString.of(r),
+      Name: PDFString.of(i),
+      Location: PDFString.of(n),
+      Prop_Build: { Filter: { Name: 'Adobe.PPKLite' }, ...P },
+    }),
+    D = new Uint8Array(g.sizeInBytes()),
+    m = (g.copyBytesInto(D, 0), PDFInvalidObject.of(D)),
+    F = e.context.register(m);
+  const s = PDFArray.withContext(e.context);
+  f.forEach(e => s.push(PDFNumber.of(e)));
+  (t = e.context.formXObject([], { BBox: f, Resources: {} })),
+    (a = e.context.obj({
+      Type: 'Annot',
+      Subtype: 'Widget',
+      FT: 'Sig',
+      Rect: s,
+      V: F,
+      T: PDFString.of('Signature1'),
+      F: 4,
+      P: o.ref,
+      AP: { N: e.context.register(t) },
+    })),
+    (r = e.context.register(a));
+  let c = o.node.lookupMaybe(PDFName.of('Annots'), PDFArray),
+    d =
+      ((c = void 0 === c ? e.context.obj([]) : c).push(r),
+      o.node.set(PDFName.of('Annots'), c),
+      e.catalog.lookupMaybe(PDFName.of('AcroForm'), PDFDict));
+  void 0 === d &&
+    ((d = e.context.obj({ Fields: [] })),
+    (i = e.context.register(d)),
+    e.catalog.set(PDFName.of('AcroForm'), i));
+  let N;
+  N = d.has(PDFName.of('SigFlags')) ? d.get(PDFName.of('SigFlags')) : PDFNumber.of(0);
+  n = PDFNumber.of(3 | N.asNumber());
+  d.set(PDFName.of('SigFlags'), n), d.get(PDFName.of('Fields')).push(r);
+};
+export { pdflibAddPlaceholder };

apps/OpenSignServer/databases/migrations/20240313095456-update_tour_dashboard.cjs

@@ -0,0 +1,219 @@
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.up = async Parse => {
+  // TODO: set className here
+  const className = 'w_dashboard';
+  const dashboard = new Parse.Query(className);
+  const updatedashboard = await dashboard.get('35KBoSgoAK');
+  updatedashboard.set('rows', [
+    {
+      columns: [
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-signature',
+            bgColor: '#f0058e',
+            label: 'Need your Signature',
+            description: null,
+            data: {
+              id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '4Hhwbp482K',
+              tourSection: 'tourcard1',
+              tourMessage:
+                'Clicking on this card will take you to the list of documents awaiting your review.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-sign-out-alt',
+            bgColor: '#g0058e',
+            label: 'Out for signatures',
+            description: null,
+            data: {
+              id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '1MwEuxLEkF',
+              tourSection: 'tourcard2',
+              tourMessage:
+                'Clicking on this card will take you to a list of documents awaiting signature.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: '5Go51Q7T8r',
+            data: {
+              tourSection: 'tourreport1',
+              tourMessage: 'This is a list of documents that are waiting for your signature.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: 'd9k3UfYHBc',
+            data: {
+              tourSection: 'tourreport2',
+              tourMessage:
+                "This is a list of documents you've sent to other parties for signature.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '12',
+          collg: '12',
+          widget: {
+            type: 'report',
+            reportId: 'kC5mfynCi4',
+            data: {
+              tourSection: 'tourreport3',
+              tourMessage:
+                'This are documents you have started but have not finalized for sending.',
+            },
+          },
+        },
+      ],
+    },
+  ]);
+
+  return updatedashboard.save();
+};
+
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.down = async Parse => {
+  const className = 'w_dashboard';
+  const dashboard = new Parse.Query(className);
+  const revertdashboard = await dashboard.get('35KBoSgoAK');
+  revertdashboard.set('rows', [
+    {
+      columns: [
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-signature',
+            bgColor: '#f0058e',
+            label: 'Need your Signature',
+            description: null,
+            data: {
+              id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '4Hhwbp482K',
+              tourSection: 'tourcard1',
+              tourMessage:
+                'This card shows the aggregate count of documents that are awaiting your signature. Clicking on this card will seamlessly take you to the detailed list of such documents for your review and action.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-sign-out-alt',
+            bgColor: '#g0058e',
+            label: 'Out for signatures',
+            description: null,
+            data: {
+              id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '1MwEuxLEkF',
+              tourSection: 'tourcard2',
+              tourMessage:
+                "This card indicates the total number of documents you've sent out for signatures. A single click on this card will navigate you to a comprehensive list of these documents, allowing you to monitor their status.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: '5Go51Q7T8r',
+            data: {
+              tourSection: 'tourreport1',
+              tourMessage:
+                'Here lies a curated list of documents that are pending your signature. These are requests from other users that require your immediate attention for completion.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: 'd9k3UfYHBc',
+            data: {
+              tourSection: 'tourreport2',
+              tourMessage:
+                "This area displays all the documents you've dispatched for signatures from other parties. It serves as a real-time tracker for documents pending external approval.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '12',
+          collg: '12',
+          widget: {
+            type: 'report',
+            reportId: 'kC5mfynCi4',
+            data: {
+              tourSection: 'tourreport3',
+              tourMessage:
+                "In this section, you'll find your draft documents awaiting completion. These are the documents you've initiated but haven't yet finalized for sending.",
+            },
+          },
+        },
+      ],
+    },
+  ]);
+
+  return revertdashboard.save();
+};

apps/OpenSignServer/package-lock.json

@@ -32,7 +32,7 @@
         "parse-server-api-mail-adapter": "^3.1.1",
         "parse-server-fs-adapter": "1.0.1",
         "parse-server-s3-adapter": "^1.2.0",
-        "pdf-lib": "^1.16.0",
+        "pdf-lib": "^1.17.1",
         "pdfkit": "^0.13.0",
         "posthog-node": "^3.6.2",
         "razorpay": "^2.8.6",
@@ -7025,9 +7025,9 @@
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
     "node_modules/pdf-lib": {
-      "version": "1.16.0",
+      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
-      "integrity": "sha512-P/1SSmElOBKrPlbc+Sn7UxikRQbzVA64+4Dh6/uczPscvq/NatP9eryoOguyBTpTnzICNiG8EnMH4Ziqp2TnFA==",
+      "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
       "dependencies": {
         "@pdf-lib/standard-fonts": "^1.0.0",
         "@pdf-lib/upng": "^1.0.1",

apps/OpenSignServer/package.json

@@ -41,7 +41,7 @@
     "parse-server-api-mail-adapter": "^3.1.1",
     "parse-server-fs-adapter": "1.0.1",
     "parse-server-s3-adapter": "^1.2.0",
-    "pdf-lib": "^1.16.0",
+    "pdf-lib": "^1.17.1",
     "pdfkit": "^0.13.0",
     "posthog-node": "^3.6.2",
     "razorpay": "^2.8.6",