fix: date format issue in placeholder flow

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -111,6 +111,10 @@ function SignYourSelf() {
       text: "signature"
     },
     canDrag: isdraggingEnable,
+    // options: {
+    //   // Set the delay for touch dragging
+    //   delay: { touch: 500 }, // Set the delay in milliseconds
+    // },
 
     collect: (monitor) => ({
       isDragSign: !!monitor.isDragging()
@@ -124,7 +128,6 @@ function SignYourSelf() {
       text: "stamp"
     },
     canDrag: isdraggingEnable,
-
     collect: (monitor) => ({
       isDragStamp: !!monitor.isDragging()
     })
@@ -139,12 +142,16 @@ function SignYourSelf() {
       text: "drag me"
     },
     canDrag: isdraggingEnable,
+    // options: {
+    //   // Set the delay for touch dragging
+    //   delay: { touch: 500 }, // Set the delay in milliseconds
+    // },
     collect: (monitor) => ({
       isDragSignatureSS: !!monitor.isDragging()
     })
   });
 
-  const [{ isDragStampSS }, dragStampSS] = useDrag({
+  const [, dragStampSS] = useDrag({
     type: "BOX",
     item: {
       type: "BOX",
@@ -161,6 +168,7 @@ function SignYourSelf() {
     return object.pageNumber === pageNumber;
   });
   //   rowlevel={JSON.parse(localStorage.getItem("rowlevel"))}
+
   const rowLevel =
     localStorage.getItem("rowlevel") &&
     JSON.parse(localStorage.getItem("rowlevel"));
@@ -534,7 +542,6 @@ function SignYourSelf() {
         flag,
         containerWH
       );
-      // console.log(("pdf",pdfBytes))
 
       //function for call to embed signature in pdf and get digital signature pdf
       signPdfFun(pdfBytes, documentId);

microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js

@@ -7,6 +7,9 @@ function AllWidgets(props) {
   const touchStartTimestamp = useRef(0);
   const [selectWidgetType, setSelectWidgetType] = useState("");
 
+  const touchTimeoutRef = useRef(null);
+  const [isTouchHold, setIsTouchHold] = useState(false);
+
   const handleTouchStart = (type) => {
     // Set a timeout for the long press event
     touchStartTimestamp.current = Date.now();
@@ -15,6 +18,9 @@ function AllWidgets(props) {
     timeoutRef.current = setTimeout(() => {
       // Check if the touch is still ongoing after the long press duration
       if (Date.now() - touchStartTimestamp.current >= 1000) {
+        setTimeout(() => {
+          props.setIsDraggingEnable(true);
+        }, 1000);
         setBackgroundColor("lightblue"); // Change the color after the long press
         setSelectWidgetType(type);
         props.setIsDraggingEnable(true);
@@ -28,7 +34,7 @@ function AllWidgets(props) {
 
   const handleTouchMove = () => {
     // If the touch moves (indicating a drag), cancel the long press effect
-    clearTimeout(timeoutRef.current);
+    // clearTimeout(timeoutRef.current);
   };
 
   const handleTouchEnd = () => {
@@ -41,6 +47,38 @@ function AllWidgets(props) {
 
     clearTimeout(timeoutRef.current);
   };
+
+  // const handleTouchStart = () => {
+  //   touchTimeoutRef.current = setTimeout(() => {
+  //     setIsTouchHold(true);
+  //     setBackgroundColor("lightblue"); // Change the color after the long press
+  //           // setSelectWidgetType(type);
+  //           props.setIsDraggingEnable(true);
+  //           if ("vibrate" in navigator) {
+  //             // Vibrate for 200 milliseconds
+  //             navigator.vibrate(200);
+  //           }
+  //     // Start drag operation when touch-and-hold is detected
+  //     // props.dragSignature();
+  //     // props.dragSignatureSS();
+
+  //     console.log('go here');
+  //   }, 1000); // Adjust the duration for touch-and-hold
+  // };
+
+  // const handleTouchEnd = () => {
+  //   clearTimeout(touchTimeoutRef.current);
+  //   setIsTouchHold(false);
+  //    props.setIsDraggingEnable(false);
+  //     setBackgroundColor(""); // Change the color after the long press
+  //     setSelectWidgetType("");
+  // };
+  // const handleTouchMove = () => {
+  //   if (touchTimeoutRef.current) {
+  //     clearTimeout(touchTimeoutRef.current);
+  //     touchTimeoutRef.current = null;
+  //   }
+  // };
   return props.updateWidgets.map((item, ind) => {
     return (
       <div key={ind} style={{ marginBottom: "10px" }}>
@@ -59,7 +97,12 @@ function AllWidgets(props) {
               }
             }
             // }
+            // props.dragSignature(element);
+            // props.dragSignatureSS(element)
+            // element && element.addEventListener("touchstart", handleTouchStart);
+            // element && element.addEventListener("touchend", handleTouchEnd);
           }}
+          // handleTouchMove={handleTouchMove}
           onMouseMove={props?.handleDivClick}
           onMouseDown={() => {
             props?.handleMouseLeave();

microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js

@@ -7,7 +7,7 @@ function DropdownWidgetOption(props) {
     "option-2"
   ]);
 
-  const [dropdownName, setDropdownName] = useState("Dropdown-1");
+  const [dropdownName, setDropdownName] = useState("Field-1");
   const [error, setError] = useState("");
   const handleInputChange = (index, value) => {
     setDropdownOptionList((prevInputs) => {
@@ -39,7 +39,7 @@ function DropdownWidgetOption(props) {
       props.handleSaveDropdownOptions(dropdownName, dropdownOptionList);
       props.setShowDropdown(false);
       setDropdownOptionList(["option-1", "option-2"]);
-      setDropdownName("Dropdown-1");
+      setDropdownName("Field-1");
     }
   };
 

microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js

@@ -48,6 +48,7 @@ function Placeholder(props) {
     }
   };
 
+  //function for add selected date and format in selectFormat
   const changeDateFormat = () => {
     const updateDate = [];
     dateFormatArr.map((data) => {
@@ -63,6 +64,7 @@ function Placeholder(props) {
     setDateFormat(updateDate);
   };
   useEffect(() => {
+    //set default current date and default format MM/dd/yyyy
     if (props.isPlaceholder || props.isSignYourself) {
       const date = new Date();
       const milliseconds = date.getTime();
@@ -211,7 +213,7 @@ function Placeholder(props) {
                       props.pos.type === "name" ||
                       props.pos.type === "company" ||
                       props.pos.type === "job title"
-                        ? "-20px"
+                        ? "-17px"
                         : "-35px"
                   }}
                 ></i>
@@ -232,8 +234,14 @@ function Placeholder(props) {
                 }}
                 style={{
                   color: "#188ae2",
-                  right: props.pos.type === "checkbox" ? "6px" : "32px",
-                  top: props.pos.type === "checkbox" ? "-35px" : "-18px"
+                  right:
+                    props.pos.type === "checkbox" || props.pos.type === "radio"
+                      ? "6px"
+                      : "32px",
+                  top:
+                    props.pos.type === "checkbox" || props.pos.type === "radio"
+                      ? "-35px"
+                      : "-18px"
                 }}
               ></i>
             </>
@@ -243,8 +251,8 @@ function Placeholder(props) {
               id="menu-container"
               style={{
                 zIndex: "99",
-                top: "-19px",
-                left: props.isPlaceholder ? "-5px" : "9px"
+                top: "-27px",
+                left: props.isPlaceholder ? "-12px" : "5px"
               }}
               className={isShowDateFormat ? "dropdown show" : "dropdown"}
               onClick={(e) => {
@@ -252,21 +260,19 @@ function Placeholder(props) {
                 e.stopPropagation();
                 props.setSignKey(props.pos.key);
               }}
-              // onTouchEnd={(e) => {
-              //   e.stopPropagation();
-              //   setIsShowDateFormat(!isShowDateFormat);
-              //   props.setSignKey(props.pos.key);
-              // }}
+              onTouchEnd={(e) => {
+                e.stopPropagation();
+                setIsShowDateFormat(!isShowDateFormat);
+                props.setSignKey(props.pos.key);
+              }}
             >
-              <div className=" sort  " data-toggle="dropdown">
-                <i
-                  class="fa-solid fa-gear settingIcon"
-                  style={{
-                    color: "#188ae2",
-                    fontSize: "14px"
-                  }}
-                ></i>
-              </div>
+              <i
+                class="fa-solid fa-gear settingIcon"
+                style={{
+                  color: "#188ae2",
+                  fontSize: "14px"
+                }}
+              ></i>
               <div
                 className={
                   isShowDateFormat ? "dropdown-menu show" : "dropdown-menu"
@@ -278,6 +284,11 @@ function Placeholder(props) {
                   return (
                     <span
                       key={ind}
+                      onTouchEnd={(e) => {
+                        e.stopPropagation();
+                        setIsShowDateFormat(!isShowDateFormat);
+                        setSelectDate(data);
+                      }}
                       onClick={() => {
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
@@ -329,11 +340,13 @@ function Placeholder(props) {
             style={{
               color: "#188ae2",
               right:
-                props.pos.type === "checkbox" && props.isPlaceholder
+                (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+                props.isPlaceholder
                   ? "-11px"
                   : "12px",
               top:
-                props.pos.type === "checkbox" && props.isPlaceholder
+                (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+                props.isPlaceholder
                   ? "-35px"
                   : "-18px"
             }}
@@ -362,11 +375,13 @@ function Placeholder(props) {
             style={{
               color: "#188ae2",
               right:
-                props.pos.type === "checkbox" && props.isPlaceholder
+                (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+                props.isPlaceholder
                   ? "-30px"
                   : "-8px",
               top:
-                props.pos.type === "checkbox" && props.isPlaceholder
+                (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+                props.isPlaceholder
                   ? "-35px"
                   : "-18px"
             }}
@@ -404,6 +419,9 @@ function Placeholder(props) {
       bounds="parent"
       className="signYourselfBlock"
       style={{
+        // borderRadius:"50%",
+        // display:"flex",
+        // alignItem:"center",
         border: "1px solid #007bff",
         borderRadius: "2px",
         textAlign:
@@ -438,7 +456,7 @@ function Placeholder(props) {
       disableDragging={
         props.isNeedSign
           ? true
-          : props.isPlaceholder
+          : props.isPlaceholder && props.pos.type !== "date"
             ? false
             : !isDraggingEnabled
       }
@@ -473,9 +491,17 @@ function Placeholder(props) {
       {props.isShowBorder ? (
         <BorderResize
           right={
-            props.pos.type === "checkbox" && props.isPlaceholder ? -28 : -12
+            (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+            props.isPlaceholder
+              ? -28
+              : -12
+          }
+          top={
+            (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+            props.isPlaceholder
+              ? -28
+              : -11
           }
-          top={props.pos.type === "checkbox" && props.isPlaceholder ? -28 : -11}
         />
       ) : props.data && props.isNeedSign ? (
         props.data?.signerObjId === props.signerObjId ? (

microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js

@@ -4,11 +4,13 @@ import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils";
 function PlaceholderBorder(props) {
   const getResizeBorderExtraWidth = resizeBorderExtraWidth();
   const defaultWidth =
-    props.pos.type === "checkbox" && props.isPlaceholder
+    (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+    props.isPlaceholder
       ? 50
       : defaultWidthHeight(props.pos.type).width;
   const defaultHeight =
-    props.pos.type === "checkbox" && props.isPlaceholder
+    (props.pos.type === "checkbox" || props.pos.type === "radio") &&
+    props.isPlaceholder
       ? 50
       : defaultWidthHeight(props.pos.type).height;
 

microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useState, forwardRef, useMemo, useRef } from "react";
-
+import React, { useEffect, useState, forwardRef, useRef } from "react";
 import { onChangeInput } from "../../utils/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -12,10 +11,6 @@ function PlaceholderType(props) {
   const [validatePlaceholder, setValidatePlaceholder] = useState("");
   const inputRef = useRef(null);
   const [inputValue, setInputValue] = useState("");
-  const memoizedCount = useMemo(
-    () => props.saveDateFormat,
-    [props.saveDateFormat]
-  );
 
   const validateExpression = (regexValidation) => {
     let isValidate = regexValidation.test(inputValue);
@@ -66,10 +61,25 @@ function PlaceholderType(props) {
   }, []);
 
   useEffect(() => {
-    if (props.selectDate) {
-      const updateDate = new Date(props.selectDate?.date);
+    if (props.isNeedSign) {
+      const updateDate = new Date(props.pos.widgetValue);
       setStartDate(updateDate);
     }
+  }, []);
+  useEffect(() => {
+    if (props.selectDate) {
+      const updateDate = new Date(props.saveDateFormat);
+      setStartDate(updateDate);
+      const dateObj = {
+        date: props.saveDateFormat,
+        format: props.selectDate
+          ? props.selectDate?.format
+          : props.pos?.dateFormat
+            ? props.pos?.dateFormat
+            : "MM/dd/YYYY"
+      };
+      props.setSelectDate(dateObj);
+    }
 
     onChangeInput(
       props.saveDateFormat,
@@ -85,7 +95,7 @@ function PlaceholderType(props) {
           ? props.pos?.dateFormat
           : "MM/dd/YYYY"
     );
-  }, [memoizedCount]);
+  }, [props.saveDateFormat]);
 
   const dateValue = (value) => {
     props.setSaveDateFormat(value);
@@ -414,6 +424,9 @@ function PlaceholderType(props) {
             }}
           /> */}
           <DatePicker
+            disabled={
+              props.isNeedSign && props.data?.signerObjId !== props.signerObjId
+            }
             // disabled={props.isPlaceholder ? true : false}
             onBlur={handleInputBlur}
             closeOnScroll={true}
@@ -423,33 +436,23 @@ function PlaceholderType(props) {
               // props.pos?.widgetValue ? props.pos.widgetValue :
               startDate
                 ? startDate
-                : props.pos?.widgetValue
-                  ? props.pos?.widgetValue
-                  : new Date(props.pos.widgetValue)
+                : props.pos?.widgetValue && new Date(props.pos.widgetValue)
             }
             onChange={(date) => {
               setStartDate(date);
-              const dateObj = {
-                date: props.saveDateFormat,
-                format: props.pos?.dateFormat
-                  ? props.pos?.dateFormat
-                  : props.selectDate
-                    ? props.selectDate?.format
-                    : "MM/dd/YYYY"
-              };
-              props.setSelectDate(dateObj);
-              onChangeInput(
-                props.saveDateFormat,
-                props.pos.key,
-                props.xyPostion,
-                props.index,
-                props.setXyPostion,
-                props.data && props.data.signerObjId,
-                false,
-                props.selectDate?.format
-                  ? props.selectDate.format
-                  : "MM/dd/YYYY"
-              );
+
+              // onChangeInput(
+              //   props.saveDateFormat,
+              //   props.pos.key,
+              //   props.xyPostion,
+              //   props.index,
+              //   props.setXyPostion,
+              //   props.data && props.data.signerObjId,
+              //   false,
+              //   props.selectDate?.format
+              //     ? props.selectDate.format
+              //     : "MM/dd/YYYY"
+              // );
             }}
             popperPlacement="top-end"
             customInput={<ExampleCustomInput />}
@@ -522,6 +525,19 @@ function PlaceholderType(props) {
           <span>{props.pos.type}</span>
         </div>
       );
+    case "radio":
+      return (
+        <label
+          style={{ borderRadius: "50%", textAlign: "center" }}
+          className="inputPlaceholder"
+        >
+          <input
+            type="radio"
+            // checked={checked}
+            // onChange={onChange}
+          />
+        </label>
+      );
 
     default:
       return props.pos.SignUrl ? (

microfrontends/SignDocuments/src/Component/component/fieldsComponent.js

@@ -42,129 +42,140 @@ function FieldsComponent({
   setIsDraggingEnable,
   isdraggingEnable
 }) {
-  const temp = ["1", "2", "3", "4", "5", "6", "7", "8", "0", "23"];
   const [isSignersModal, setIsSignersModal] = useState(false);
-  const [initialTouchX, setInitialTouchX] = useState(0);
-  const [{ isDragDropdown }, dropdown] = useDrag({
+
+  const [, dropdown] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 5,
       text: "dropdown"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragDropdown: !!monitor.isDragging()
     })
   });
-  const [{ isDragCheck }, checkbox] = useDrag({
+  const [, checkbox] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 6,
       text: "checkbox"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragCheck: !!monitor.isDragging()
     })
   });
-  const [{ isDragText }, text] = useDrag({
+  const [, text] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 7,
       text: "text"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragText: !!monitor.isDragging()
     })
   });
-  const [{ isDragInitial }, initials] = useDrag({
+  const [, initials] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 8,
       text: "initials"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragInitial: !!monitor.isDragging()
     })
   });
-  const [{ isDragName }, name] = useDrag({
+  const [, name] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 9,
       text: "name"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragName: !!monitor.isDragging()
     })
   });
-  const [{ isDragCompany }, company] = useDrag({
+  const [, company] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 10,
       text: "company"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragCompany: !!monitor.isDragging()
     })
   });
-  const [{ isDragJobtitle }, jobTitle] = useDrag({
+  const [, jobTitle] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 11,
       text: "job title"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragJobtitle: !!monitor.isDragging()
     })
   });
-  const [{ isDragDate }, date] = useDrag({
+  const [, date] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 12,
       text: "date"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragDate: !!monitor.isDragging()
     })
   });
-  const [{ isDragImage }, image] = useDrag({
+  const [, image] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 13,
       text: "image"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragImage: !!monitor.isDragging()
     })
   });
-  const [{ isDragEmail }, email] = useDrag({
+  const [, email] = useDrag({
     type: "BOX",
-    canDrag: isdraggingEnable,
     item: {
       type: "BOX",
       id: 14,
       text: "email"
     },
+    canDrag: isdraggingEnable,
     collect: (monitor) => ({
       isDragEmail: !!monitor.isDragging()
     })
   });
+  // const [, radio] = useDrag({
+  //   type: "BOX",
+
+  //   item: {
+  //     type: "BOX",
+  //     id: 14,
+  //     text: "radio"
+  //   },
+  //   collect: (monitor) => ({
+  //     isDragRadio: !!monitor.isDragging()
+  //   })
+  // });
   const isMobile = window.innerWidth < 767;
   const scrollContainerRef = useRef(null);
   const [widget, setWidget] = useState([]);
@@ -201,6 +212,7 @@ function FieldsComponent({
       date,
       image,
       email
+      // radio
     ];
     const getWidgetArray = widgets;
     const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -210,7 +222,10 @@ function FieldsComponent({
     setWidget(newUpdateSigner);
   }, []);
 
-  const filterWidgets = widget.filter((data) => data.type !== "dropdown");
+  const filterWidgets = widget.filter(
+    (data) => data.type !== "dropdown"
+    // && data.type !== "radio"
+  );
   const updateWidgets = isSignYourself ? filterWidgets : widget;
 
   return (
@@ -344,6 +359,8 @@ function FieldsComponent({
                     setIsDraggingEnable={setIsDraggingEnable}
                     isMobile={isMobile}
                     isdraggingEnable={isdraggingEnable}
+                    dragSignature={dragSignature}
+                    dragSignatureSS={dragSignatureSS}
                   />
                 </div>
               </Scrollbar>

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -9,6 +9,7 @@ import { useDrag, useDrop } from "react-dnd";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
 import FieldsComponent from "./component/fieldsComponent";
 import Tour from "reactour";
+import loader from "../assests/loader2.gif";
 import { useLocation, useParams } from "react-router-dom";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -92,6 +93,9 @@ function PlaceHolderSign() {
   const [textValidate, setTextValidate] = useState("");
   const [validateError, setValidateError] = useState("");
   const [widgetType, setWidgetType] = useState("");
+  const [isUiLoading, setIsUiLoading] = useState(false);
+  const [isRadio, setIsRadio] = useState(false);
+  const [radioFieldName, setRadioFieldName] = useState({});
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -690,11 +694,7 @@ function PlaceHolderSign() {
     }
   };
   const sendEmailToSigners = async () => {
-    const loadObj = {
-      isLoad: true,
-      message: "This might take some time"
-    };
-    setIsLoading(loadObj);
+    setIsUiLoading(true);
     setIsSendAlert({});
 
     let sendMail;
@@ -820,10 +820,7 @@ function PlaceHolderSign() {
           .then((result) => {
             setIsSend(true);
             setIsMailSend(true);
-            const loadObj = {
-              isLoad: false
-            };
-            setIsLoading(loadObj);
+            setIsUiLoading(false);
           })
           .catch((err) => {
             console.log("axois err ", err);
@@ -987,7 +984,6 @@ function PlaceHolderSign() {
     navigate(`${hostUrl}recipientSignPdf/${documentId}/${currentId}`);
   };
 
-  console.log("signerpos", signerPos);
   const handleLinkUser = (id) => {
     setIsAddUser({ [id]: true });
   };
@@ -1004,7 +1000,6 @@ function PlaceHolderSign() {
         }
         return { ...x };
       });
-      // console.log("updatePlaceHolder ", updatePlaceHolder);
       setSignerPos(updatePlaceHolder);
 
       const updateSigner = signersdata.map((x) => {
@@ -1063,7 +1058,14 @@ function PlaceHolderSign() {
                   widgetStatus: selectRequiredType
                 };
               }
-            } else {
+            } else if (widgetType === "radio") {
+              return {
+                ...position
+                // widgetName: dropdownName,
+                // widgetOption: dropdownOptions
+              };
+            }
+            {
               return {
                 ...position,
                 validation: regularExpression
@@ -1120,6 +1122,31 @@ function PlaceHolderSign() {
           <Nodata />
         ) : (
           <div className="signatureContainer" ref={divRef}>
+            {isUiLoading && (
+              <div
+                style={{
+                  position: "absolute",
+                  height: "100vh",
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  zIndex: "20",
+                  backgroundColor: "#e6f2f2",
+                  opacity: 0.8
+                }}
+              >
+                <img
+                  alt="no img"
+                  src={loader}
+                  style={{ width: "100px", height: "100px" }}
+                />
+                <span style={{ fontSize: "13px", fontWeight: "bold" }}>
+                  This might take some time
+                </span>
+              </div>
+            )}
             {/* this component used for UI interaction and show their functionality */}
             {!checkTourStatus && (
               //this tour component used in your html component where you want to put
@@ -1413,6 +1440,70 @@ function PlaceHolderSign() {
                   </button>
                 </div>
               </ModalUi>
+              <ModalUi
+                //isValidate
+                isOpen={false}
+                title={"Radio group"}
+              >
+                <div style={{ height: "100%", padding: 20 }}>
+                  <div className="radioGroup">
+                    <label
+                      style={{
+                        marginRight: "5px",
+                        fontSize: "14px",
+                        fontWeight: "500"
+                      }}
+                    >
+                      Field name:
+                    </label>
+
+                    <input
+                      placeholder="Enter field name"
+                      className="drodown-input radioGroupInput"
+                      // onChange={(e) => setTextValidate(e.target.value)}
+                    />
+
+                    <label
+                      style={{
+                        marginRight: "5px",
+                        fontSize: "14px",
+                        fontWeight: "500"
+                      }}
+                    >
+                      Data label:
+                    </label>
+
+                    <input
+                      placeholder="Enter data"
+                      className="drodown-input radioGroupInput"
+                      // onChange={(e) => setTextValidate(e.target.value)}
+                    />
+                  </div>
+
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
+                  <button
+                    onClick={() => {
+                      handleValidateInput();
+                    }}
+                    style={{
+                      background: themeColor()
+                    }}
+                    type="button"
+                    // disabled={!selectCopyType}
+                    className="finishBtn"
+                  >
+                    Apply
+                  </button>
+                </div>
+              </ModalUi>
               <PlaceholderCopy
                 isPageCopy={isPageCopy}
                 setIsPageCopy={setIsPageCopy}

microfrontends/SignDocuments/src/css/signature.css

@@ -50,7 +50,16 @@
   border-radius: 2px;
 
 }
-
+.radioButton{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  font-size: 12px;
+  border: 1px solid #007bff;
+  border-radius: 50px;
+}
 .inputPlaceholder:focus {
   outline: none;
   border: 1px solid #188ae2;
@@ -615,6 +624,7 @@
 .uploadImgLogo {
   font-size: 50px;
 }
+
 .DropdownMenuContent,
 .DropdownMenuSubContent {
   min-width: 130px;
@@ -827,8 +837,14 @@ option {
   width: 60%;
 }
 
-
-
+.radioGroupInput{
+  width: 100%;
+}
+.radioGroup{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
 @media screen and (max-width:766px) {
 
   .validateInputText {
@@ -838,6 +854,7 @@ option {
   .validateText {
     display: flex;
     flex-direction: column;
+    justify-content: flex-start;
   }
 
   .showPages {

microfrontends/SignDocuments/src/utils/Utils.js

@@ -232,6 +232,11 @@ export const widgets = [
     icon: "fa-solid fa-envelope",
     iconSize: "20px"
   }
+  // {
+  //   type: "radio",
+  //   icon: "fa-regular fa-circle-dot",
+  //   iconSize: "20px"
+  // }
 ];
 
 export const getWidgetType = (
@@ -375,7 +380,12 @@ export const defaultWidthHeight = (type) => {
         width: 50,
         height: 20
       };
-      return obj;
+    // case "radio":
+    //   obj = {
+    //     width: 15,
+    //     height: 15
+    //   };
+    //   return obj;
     default:
       obj = {
         width: 150,