fix: unexpected modal issue when the settings icon is clicked on text input widgets.

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

@@ -317,7 +317,9 @@ function Placeholder(props) {
       props?.setShowDropdown(true);
     } else if (props.pos.type === "checkbox") {
       props?.setIsCheckbox(true);
-    } else if (
+    }
+    //condition to handle setting icon for signyour-self flow for all type text widgets
+    else if (
       [
         textInputWidget,
         textWidget,
@@ -325,13 +327,15 @@ function Placeholder(props) {
         "company",
         "job title",
         "email"
-      ].includes(props.pos.type)
+      ].includes(props.pos.type) &&
+      props.isSignYourself
     ) {
       props.handleTextSettingModal(true);
     } else {
       props?.handleNameModal && props?.handleNameModal(true);
     }
 
+    //condition for only placeholder and template flow
     if (props.data && props?.pos?.type !== textWidget) {
       props.setSignerObjId(props?.data?.signerObjId);
       props.setUniqueId(props?.data?.Id);
@@ -340,13 +344,15 @@ function Placeholder(props) {
       );
 
       props.setIsSelectId(checkIndex || 0);
-    } else if (props.data && props.pos.type === textWidget) {
+    }
+    //condition to handle in placeholder and template flow for text widget signerId for text widgets i have to set uniqueId in tempSignerId because
+    //it does not have any signer user and any signerobjId
+    else if (props.data && props.pos.type === textWidget) {
       props.setTempSignerId(props.uniqueId);
       props.setUniqueId(props?.data?.Id);
       const checkIndex = props.xyPostion.findIndex(
         (data) => data.Id === props.data.Id
       );
-
       props.setIsSelectId(checkIndex || 0);
     }
     props.setSignKey(props.pos.key);
@@ -433,6 +439,9 @@ function Placeholder(props) {
         <>
           {(props.isPlaceholder || props.isSignYourself) && (
             <>
+              {/* condition to add setting icon for signyour-self flow for particular text widgets
+            and also it have diffrent position 
+            */}
               {[
                 "checkbox",
                 textInputWidget,
@@ -459,6 +468,7 @@ function Placeholder(props) {
                   }}
                 ></i>
               ) : (
+                /* condition to add setting icon for placeholder & template flow for all widgets except signature and date */
                 ((!props?.pos?.type && props.pos.isStamp) ||
                   (props?.pos?.type &&
                     !["date", "signature"].includes(props.pos.type) &&
@@ -481,7 +491,7 @@ function Placeholder(props) {
                   ></i>
                 )
               )}
-
+              {/* condition for usericon for all widgets except text widgets and signyour-self flow */}
               {props.pos.type !== textWidget && !props.isSignYourself && (
                 <i
                   data-tut="assignSigner"
@@ -509,6 +519,7 @@ function Placeholder(props) {
               )}
             </>
           )}
+          {/* setting icon only for date widgets */}
           {props.pos.type === "date" && selectDate && (
             <div
               id="menu-container"
@@ -581,29 +592,37 @@ function Placeholder(props) {
               </div>
             </div>
           )}
+          {/* copy icon for all widgets */}
           <i
             className="fa-light fa-copy icon"
             onClick={(e) => handleCopyPlaceholder(e)}
             onTouchEnd={(e) => handleCopyPlaceholder(e)}
             style={{ color: "#188ae2", right: "12px", top: "-18px" }}
           ></i>
+          {/* delete icon for all widgets */}
           <i
             className="fa-light fa-circle-xmark icon"
             onClick={(e) => {
               e.stopPropagation();
-
+              //condition for template and placeholder flow
               if (props.data) {
                 props.handleDeleteSign(props.pos.key, props.data.Id);
-              } else {
+              }
+              //condition for signyour-self flow
+              else {
                 props.handleDeleteSign(props.pos.key);
                 props.setIsStamp(false);
               }
             }}
+            //for mobile and tablet touch event
             onTouchEnd={(e) => {
               e.stopPropagation();
+              //condition for template and placeholder flow
               if (props.data) {
                 props.handleDeleteSign(props.pos.key, props.data?.Id);
-              } else {
+              }
+              //condition for signyour-self flow
+              else {
                 props.handleDeleteSign(props.pos.key);
                 props.setIsStamp(false);
               }
@@ -689,7 +708,6 @@ function Placeholder(props) {
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
       key={props.pos.key}
       lockAspectRatio={
-        // props.pos.type !== textWidget
         ![
           textWidget,
           "email",
@@ -832,7 +850,6 @@ function Placeholder(props) {
       )}
       {isTabAndMobile ? (
         <div
-          // className="sm:inline-block md:inline-block lg:hidden "
           className="flex items-stretch"
           style={{
             left: xPos(props.pos, props.isSignYourself),

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

@@ -51,8 +51,8 @@ function PlaceholderBorder(props) {
       style={{
         borderColor: themeColor,
         borderStyle: "dashed",
-        minWidth: handleMinWidth(),
+        minWidth: handleMinWidth() || "",
-        minHeight: handleMinHeight(),
+        minHeight: handleMinHeight() || "",
         borderWidth: "0.2px",
         overflow: "hidden"
       }}

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

@@ -423,8 +423,10 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            color: "black",
+            fontSize: props.pos.options?.fontSize
-            fontSize: "12px"
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
           }}
         >
           <span>{type}</span>
@@ -522,8 +524,10 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            color: "black",
+            fontSize: props.pos.options?.fontSize
-            fontSize: "12px"
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
           }}
         >
           <span>{type}</span>
@@ -562,8 +566,10 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            color: "black",
+            fontSize: props.pos.options?.fontSize
-            fontSize: "12px"
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
           }}
         >
           <span>{type}</span>
@@ -602,8 +608,10 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            color: "black",
+            fontSize: props.pos.options?.fontSize
-            fontSize: "12px"
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
           }}
         >
           <span>{type}</span>
@@ -720,8 +728,10 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            color: "black",
+            fontSize: props.pos.options?.fontSize
-            fontSize: "12px"
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
           }}
         >
           <span>{type}</span>

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

@@ -2,11 +2,12 @@ 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";
+import { textInputWidget, textWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 import Upgrade from "../../primitives/Upgrade";
 import { isEnableSubscription } from "../../constant/const";
 import Tooltip from "../../primitives/Tooltip";
+import { fontColorArr, fontsizeArr } from "../../constant/Utils";
 
 const WidgetNameModal = (props) => {
   const [formdata, setFormdata] = useState({
@@ -266,6 +267,65 @@ const WidgetNameModal = (props) => {
             />
           </div>
         )}
+        {[
+          textInputWidget,
+          textWidget,
+          "name",
+          "company",
+          "job title",
+          "email"
+        ].includes(props.defaultdata?.type || props?.widgetName) && (
+          <div className="flex items-center mb-[0.75rem]">
+            <span>Font size:</span>
+            <select
+              className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              value={
+                props.fontSize ||
+                props.currWidgetsDetails?.options?.fontSize ||
+                "12"
+              }
+              onChange={(e) => props.setFontSize(e.target.value)}
+            >
+              {fontsizeArr.map((size, ind) => {
+                return (
+                  <option className="text-[13px]" value={size} key={ind}>
+                    {size}
+                  </option>
+                );
+              })}
+            </select>
+            <div className="flex flex-row gap-1 items-center ml-4">
+              <span>color: </span>
+              <select
+                value={
+                  props.fontColor ||
+                  props.currWidgetsDetails?.options?.fontColor ||
+                  "black"
+                }
+                onChange={(e) => props.setFontColor(e.target.value)}
+                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              >
+                {fontColorArr.map((color, ind) => {
+                  return (
+                    <option value={color} key={ind}>
+                      {color}
+                    </option>
+                  );
+                })}
+              </select>
+              <span
+                style={{
+                  background:
+                    props.fontColor ||
+                    props.currWidgetsDetails?.options?.fontColor ||
+                    "black"
+                }}
+                className="w-5 h-[19px] ml-1"
+              ></span>
+            </div>
+          </div>
+        )}
+
         <div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
         <button type="submit" className="op-btn op-btn-primary">
           Save

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -50,7 +50,6 @@ import Upgrade from "../primitives/Upgrade";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
 import { useSelector } from "react-redux";
-import TextFontSetting from "../components/pdf/TextFontSetting";
 import PdfZoom from "../components/pdf/PdfZoom";
 import LottieWithLoader from "../primitives/DotLottieReact";
 
@@ -1485,7 +1484,13 @@ function PlaceHolderSign() {
                           pattern:
                             inputype === "regex" ? defaultdata.textvalidate : ""
                         }
-                      : {}
+                      : {},
+                  fontSize:
+                    fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                  fontColor:
+                    fontColor ||
+                    currWidgetsDetails?.options?.fontColor ||
+                    "black"
                 }
               };
             } else {
@@ -1495,7 +1500,13 @@ function PlaceHolderSign() {
                   ...position.options,
                   name: defaultdata.name,
                   status: defaultdata.status,
-                  defaultValue: defaultdata.defaultValue
+                  defaultValue: defaultdata.defaultValue,
+                  fontSize:
+                    fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                  fontColor:
+                    fontColor ||
+                    currWidgetsDetails?.options?.fontColor ||
+                    "black"
                 }
               };
             }
@@ -1520,6 +1531,15 @@ function PlaceHolderSign() {
     }
     setCurrWidgetsDetails({});
     handleNameModal();
+    setFontSize();
+    setFontColor();
+    //condition for text widget type after set all values for text widget
+    //change setUniqueId which is set in tempsignerId
+    //because textwidget do not have signer user so for selected signers we have to do
+    if (currWidgetsDetails.type === textWidget) {
+      setUniqueId(tempSignerId);
+      setTempSignerId("");
+    }
   };
 
   const handleNameModal = () => {
@@ -1679,62 +1699,6 @@ function PlaceHolderSign() {
     setSignerPos(updatePlaceholderUser);
     setIsMailSend(false);
   };
-
-  const handleSaveFontSize = () => {
-    const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
-    if (filterSignerPos.length > 0) {
-      const getPlaceHolder = filterSignerPos[0].placeHolder;
-
-      const getPageNumer = getPlaceHolder.filter(
-        (data) => data.pageNumber === pageNumber
-      );
-
-      if (getPageNumer.length > 0) {
-        const getXYdata = getPageNumer[0].pos;
-        const getPosData = getXYdata;
-        const addSignPos = getPosData.map((position) => {
-          if (position.key === signKey) {
-            return {
-              ...position,
-              options: {
-                ...position.options,
-                fontSize:
-                  fontSize || currWidgetsDetails?.options?.fontSize || "12",
-                fontColor:
-                  fontColor || currWidgetsDetails?.options?.fontColor || "black"
-              }
-            };
-          }
-          return position;
-        });
-
-        const newUpdateSignPos = getPlaceHolder.map((obj) => {
-          if (obj.pageNumber === pageNumber) {
-            return { ...obj, pos: addSignPos };
-          }
-          return obj;
-        });
-        const newUpdateSigner = signerPos.map((obj) => {
-          if (obj.Id === uniqueId) {
-            return { ...obj, placeHolder: newUpdateSignPos };
-          }
-          return obj;
-        });
-        setSignerPos(newUpdateSigner);
-      }
-    }
-    setFontSize();
-    setFontColor();
-    if (currWidgetsDetails.type === textWidget) {
-      setUniqueId(tempSignerId);
-      setTempSignerId("");
-    }
-
-    handleTextSettingModal(false);
-  };
-  const handleTextSettingModal = (value) => {
-    setIsTextSetting(value);
-  };
   return (
     <>
       <Title title={state?.title ? state.title : "New Document"} />
@@ -2095,7 +2059,6 @@ function PlaceHolderSign() {
                         handleNameModal={setIsNameModal}
                         setTempSignerId={setTempSignerId}
                         uniqueId={uniqueId}
-                        handleTextSettingModal={handleTextSettingModal}
                         pdfOriginalWH={pdfOriginalWH}
                         setScale={setScale}
                         scale={scale}
@@ -2215,17 +2178,6 @@ function PlaceHolderSign() {
             </button>
           </div>
         </ModalUi>
-        <TextFontSetting
-          isTextSetting={isTextSetting}
-          setIsTextSetting={setIsTextSetting}
-          fontSize={fontSize}
-          setFontSize={setFontSize}
-          fontColor={fontColor}
-          setFontColor={setFontColor}
-          handleSaveFontSize={handleSaveFontSize}
-          currWidgetsDetails={currWidgetsDetails}
-        />
-
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}
@@ -2246,6 +2198,12 @@ function PlaceHolderSign() {
           handleClose={handleNameModal}
           handleData={handleWidgetdefaultdata}
           isSubscribe={isSubscribe}
+          isTextSetting={isTextSetting}
+          setIsTextSetting={setIsTextSetting}
+          fontSize={fontSize}
+          setFontSize={setFontSize}
+          fontColor={fontColor}
+          setFontColor={setFontColor}
         />
       </DndProvider>
     </>

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -38,7 +38,6 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
 import Parse from "parse";
 import { useSelector } from "react-redux";
-import TextFontSetting from "../components/pdf/TextFontSetting";
 import PdfZoom from "../components/pdf/PdfZoom";
 const TemplatePlaceholder = () => {
   const navigate = useNavigate();
@@ -1204,7 +1203,13 @@ const TemplatePlaceholder = () => {
                           pattern:
                             inputype === "regex" ? defaultdata.textvalidate : ""
                         }
-                      : {}
+                      : {},
+                  fontSize:
+                    fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                  fontColor:
+                    fontColor ||
+                    currWidgetsDetails?.options?.fontColor ||
+                    "black"
                 }
               };
             } else {
@@ -1214,7 +1219,13 @@ const TemplatePlaceholder = () => {
                   ...position.options,
                   name: defaultdata.name,
                   status: defaultdata.status,
-                  defaultValue: defaultdata.defaultValue
+                  defaultValue: defaultdata.defaultValue,
+                  fontSize:
+                    fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                  fontColor:
+                    fontColor ||
+                    currWidgetsDetails?.options?.fontColor ||
+                    "black"
                 }
               };
             }
@@ -1237,6 +1248,8 @@ const TemplatePlaceholder = () => {
         setSignerPos(newUpdateSigner);
       }
     }
+    setFontSize();
+    setFontColor();
     setCurrWidgetsDetails({});
     handleNameModal();
   };
@@ -1247,57 +1260,7 @@ const TemplatePlaceholder = () => {
     setIsRadio(false);
     setIsCheckbox(false);
   };
-  const handleSaveFontSize = () => {
-    const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
-    if (filterSignerPos.length > 0) {
-      const getPlaceHolder = filterSignerPos[0].placeHolder;
 
-      const getPageNumer = getPlaceHolder.filter(
-        (data) => data.pageNumber === pageNumber
-      );
-
-      if (getPageNumer.length > 0) {
-        const getXYdata = getPageNumer[0].pos;
-        const getPosData = getXYdata;
-        const addSignPos = getPosData.map((position) => {
-          if (position.key === signKey) {
-            return {
-              ...position,
-              options: {
-                ...position.options,
-                fontSize:
-                  fontSize || currWidgetsDetails?.options?.fontSize || "12",
-                fontColor:
-                  fontColor || currWidgetsDetails?.options?.fontColor || "black"
-              }
-            };
-          }
-          return position;
-        });
-
-        const newUpdateSignPos = getPlaceHolder.map((obj) => {
-          if (obj.pageNumber === pageNumber) {
-            return { ...obj, pos: addSignPos };
-          }
-          return obj;
-        });
-        const newUpdateSigner = signerPos.map((obj) => {
-          if (obj.Id === uniqueId) {
-            return { ...obj, placeHolder: newUpdateSignPos };
-          }
-          return obj;
-        });
-        setSignerPos(newUpdateSigner);
-      }
-    }
-    setFontSize();
-    setFontColor();
-
-    handleTextSettingModal(false);
-  };
-  const handleTextSettingModal = (value) => {
-    setIsTextSetting(value);
-  };
   return (
     <>
       <Title title={"Template"} />
@@ -1533,7 +1496,6 @@ const TemplatePlaceholder = () => {
                         selectWidgetId={selectWidgetId}
                         setIsCheckbox={setIsCheckbox}
                         handleNameModal={setIsNameModal}
-                        handleTextSettingModal={handleTextSettingModal}
                         pdfOriginalWH={pdfOriginalWH}
                         setScale={setScale}
                         scale={scale}
@@ -1673,16 +1635,12 @@ const TemplatePlaceholder = () => {
           handleClose={handleNameModal}
           handleData={handleWidgetdefaultdata}
           isSubscribe={isSubscribe}
-        />
-        <TextFontSetting
           isTextSetting={isTextSetting}
           setIsTextSetting={setIsTextSetting}
           fontSize={fontSize}
           setFontSize={setFontSize}
           fontColor={fontColor}
           setFontColor={setFontColor}
-          handleSaveFontSize={handleSaveFontSize}
-          currWidgetsDetails={currWidgetsDetails}
         />
       </DndProvider>
     </>