Merge pull request #310 from OpenSignLabs/staging

fix: resolve issue of signer can change position of other signer's widget if allow modification true

apps/OpenSign/public/locales/de/translation.json

@@ -833,5 +833,6 @@
   "variables-use": "Zu verwendende Variablen",
   "send-to-sign": "hat Sie gebeten zu unterschreiben",
   "use-template": "Vorlage verwenden",
-  "contact-already-exists": "Der Kontakt existiert bereits."
+  "contact-already-exists": "Der Kontakt existiert bereits.",
+  "agreement-note": "Hinweis: Durch Ihre Zustimmung unterzeichnen Sie das Dokument nicht sofort. Sie können das Dokument nur elektronisch einsehen. Sie haben die Möglichkeit, es vollständig zu lesen und anschließend zu entscheiden, ob Sie es unterzeichnen möchten."
 }

apps/OpenSign/public/locales/en/translation.json

@@ -834,5 +834,6 @@
   "variables-use": "Variables to use",
   "send-to-sign": "has requested you to sign",
   "use-template": "Use Template",
-  "contact-already-exists": "contact already exists."
+  "contact-already-exists": "contact already exists.",
+  "agreement-note": "Note:  Agreeing to this does not mean you are signing the document immediately. This only allows you to review the document electronically. You will have the opportunity to read it in full and decide whether to sign it afterward."
 }

apps/OpenSign/public/locales/es/translation.json

@@ -834,5 +834,6 @@
   "variables-use": "Variables para usar",
   "send-to-sign": "le ha solicitado que firme",
   "use-template": "Usar plantilla",
-  "contact-already-exists": "El contacto ya existe."
+  "contact-already-exists": "El contacto ya existe.",
+  "agreement-note": "Nota: Aceptar esto no significa que esté firmando el documento de inmediato. Esto solo le permite revisar el documento electrónicamente. Tendrá la oportunidad de leerlo en su totalidad y decidir si desea firmarlo después."
 }

apps/OpenSign/public/locales/fr/translation.json

@@ -833,5 +833,7 @@
   "variables-use": "Variables à utiliser",
   "send-to-sign": "vous a demandé de signer",
   "use-template": "Utiliser le modèle",
-  "contact-already-exists": "Le contact existe déjà."
+  "contact-already-exists": "Le contact existe déjà.",
+  "agreement-note": "Remarque : Accepter cela ne signifie pas que vous signez immédiatement le document. Cela vous permet uniquement de consulter le document électroniquement. Vous aurez l'opportunité de le lire entièrement et de décider ensuite si vous souhaitez le signer."
+
 }

apps/OpenSign/public/locales/it/translation.json

@@ -833,5 +833,6 @@
   "variables-use": "Variabili da utilizzare",
   "send-to-sign": "ha richiesto la tua firma",
   "use-template": "Usa modello",
-  "contact-already-exists": "Il contatto esiste già."
+  "contact-already-exists": "Il contatto esiste già.",
+  "agreement-note": "Nota: Accettare questo non significa che stai firmando immediatamente il documento. Questo ti consente solo di esaminare il documento elettronicamente. Avrai l'opportunità di leggerlo per intero e decidere successivamente se firmarlo."
 }

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

@@ -54,6 +54,9 @@ function AgreementSign(props) {
               {t("agrre-button")}
             </button>
           </div>
+          <div className="mt-2">
+            <span className="text-[11px]">{t("agreement-note")}</span>
+          </div>
         </div>
       </div>
       {isShowAgreeTerms && (

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

@@ -125,10 +125,7 @@ function Placeholder(props) {
   const [clickonWidget, setClickonWidget] = useState({});
   const [startDate, setStartDate] = useState(
     props.pos.type === "date" &&
-      getDefaultdate(
+      getDefaultdate(new Date(), props.pos?.options?.validation?.format)
-        props?.pos?.options?.response,
-        props.pos?.options?.validation?.format
-      )
   );
   const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
     width: null,
@@ -785,7 +782,8 @@ function Placeholder(props) {
       //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
       if (
         props.isAlllowModify &&
-        props?.assignedWidgetId.includes(props.pos.key)
+        props?.assignedWidgetId.includes(props.pos.key) &&
+        props.data?.signerObjId === props.signerObjId
       ) {
         //if 'isTouchDevice' then handle dragging functionality conditionaly
         if (isTouchDevice) {
@@ -797,7 +795,8 @@ function Placeholder(props) {
       } else if (
         //condition when 'isAlllowModify' is true and user add new widgets then handle dragging functionality like signyourself flow
         props.isAlllowModify &&
-        !props?.assignedWidgetId.includes(props.pos.key)
+        !props?.assignedWidgetId.includes(props.pos.key) &&
+        props.data?.signerObjId === props.signerObjId
       ) {
         return !isDraggingEnabled;
       } else {
@@ -808,8 +807,10 @@ function Placeholder(props) {
     else if (props.isPlaceholder && ![textWidget].includes(props.pos.type)) {
       return false;
     } //dragging depend on 'isDraggingEnabled' variable in self sign and signyourself flow
-    else {
+    else if (isTouchDevice) {
       return !isDraggingEnabled;
+    } else {
+      return false;
     }
   };
   //function to handle widget background color
@@ -868,183 +869,93 @@ function Placeholder(props) {
       }
     }, 1000); // Hold for 1 second before vibrating
   };
+  const fontSize = calculateFont(props.pos.options?.fontSize);
+  const fontColor = props.pos.options?.fontColor || "black";
   return (
     <>
-      <Rnd
+      {/*  Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
-        id={props.pos.key}
+      {props.pos?.options?.response &&
-        data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
+      props.pos.key !== props.selectWidgetId &&
-        key={props.pos.key}
+      props.pos.type === textWidget ? (
-        lockAspectRatio={
+        <span
-          !props.isFreeResize &&
+          onClick={() => {
-          ![
+            props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
-            textWidget,
+          }}
-            "email",
-            "name",
-            "company",
-            "job title",
-            textInputWidget
-          ].includes(props.pos.type) &&
-          (props.pos.Width
-            ? props.pos.Width / props.pos.Height
-            : defaultWidthHeight(props.pos.type).width /
-              defaultWidthHeight(props.pos.type).height)
-        }
-        enableResizing={{
-          top: false,
-          right: false,
-          bottom: false,
-          left: false,
-          topRight: false,
-          bottomRight:
-            props.data && props.isNeedSign
-              ? props.data?.signerObjId === props.signerObjId &&
-                props.pos.type !== "checkbox" &&
-                props.pos.type !== radioButtonWidget
-                ? true
-                : false
-              : props.pos.type !== radioButtonWidget &&
-                props.pos.type !== "checkbox" &&
-                props.pos.key === props.selectWidgetId &&
-                true,
-          bottomLeft: false,
-          topLeft: false
-        }}
-        bounds="parent"
-        className="signYourselfBlock"
-        style={{
-          border: "1px solid #007bff",
-          borderRadius: "2px",
-          cursor: getCursor(),
-          zIndex:
-            props.pos.type === "date"
-              ? props.pos.key === props.selectWidgetId
-                ? 99 + 1
-                : 99
-              : props?.pos?.zIndex
-                ? props.pos.zIndex
-                : "5",
-          opacity:
-            props.isNeedSign && props.data?.Id !== props?.uniqueId && "0.4",
-          background: handleBackground()
-        }}
-        onDrag={() => {
-          setDraggingEnabled(true);
-          props.handleTabDrag && props.handleTabDrag(props.pos.key);
-        }}
-        size={{
-          width:
-            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)
-        }}
-        minHeight={calculateFont(props.pos.options?.fontSize, true)}
-        maxHeight="auto"
-        onResizeStart={() => {
-          setDraggingEnabled(true);
-          props.setIsResize && props.setIsResize(true);
-        }}
-        onResizeStop={(e, direction, ref) => {
-          setTimeout(() => {
-            props.setIsResize && props.setIsResize(false);
-          }, 50);
-          props.handleSignYourselfImageResize &&
-            props.handleSignYourselfImageResize(
-              ref,
-              props.pos.key,
-              props.xyPosition,
-              props.setXyPosition,
-              props.index,
-              containerScale,
-              props.scale,
-              props.data && props.data.Id,
-              props.isResize
-            );
-        }}
-        disableDragging={handleDragging()}
-        onDragStop={(event, dragElement) => {
-          setIsDisableDragging(true);
-          props.handleStop &&
-            props.handleStop(
-              event,
-              dragElement,
-              props.data?.Id,
-              props.pos?.key
-            );
-        }}
-        position={{
-          x: xPos(props.pos, props.isSignYourself),
-          y: yPos(props.pos, props.isSignYourself)
-        }}
-        onResize={(e, direction, ref) => {
-          setPlaceholderBorder({
-            w: ref.offsetWidth / (props.scale * containerScale),
-            h: ref.offsetHeight / (props.scale * containerScale)
-          });
-        }}
-        // onClick={() =>
-        //   !props.isResize && !isMobile && handleOnClickPlaceholder()
-        // }
-      >
-        {props.pos.key === props.selectWidgetId &&
-        ((props.isShowBorder &&
-          ![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
-          (props?.isAlllowModify &&
-            !props?.assignedWidgetId.includes(props.pos.key))) ? (
-          <BorderResize
-            right={-12}
-            top={-11}
-            pos={props.pos}
-            posHeight={props.posHeight}
-            isSignYourself={props.isSignYourself || props.isSelfSign}
-          />
-        ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
-          props.data?.signerObjId === props.signerObjId &&
-          ![radioButtonWidget, "checkbox"].includes(props.pos.type) ? (
-            <BorderResize
-              posHeight={props.posHeight}
-              isSignYourself={props.isSignYourself || props.isSelfSign}
-              pos={props.pos}
-            />
-          ) : (
-            <></>
-          )
-        ) : (
-          ![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
-          props.pos.key === props.selectWidgetId && <BorderResize />
-        )}
-
-        {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
-            2- If props.isShowBorder is true, display borders for all widgets. 
-            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
-               1- When isAlllowModify is true, show borders.
-               2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
-    */}
-        {props.pos.key === props.selectWidgetId &&
-          (props.isShowBorder ||
-            !isDisableDragging ||
-            (props?.isAlllowModify &&
-              !props?.assignedWidgetId.includes(props.pos.key))) && (
-            <PlaceholderBorder
-              setDraggingEnabled={setDraggingEnabled}
-              pos={props.pos}
-              isPlaceholder={props.isPlaceholder}
-              getCheckboxRenderWidth={getCheckboxRenderWidth}
-              scale={props.scale}
-              containerScale={containerScale}
-              placeholderBorder={placeholderBorder}
-            />
-          )}
-        <div
-          className="flex items-stretch justify-center"
           style={{
+            fontFamily: "Arial, sans-serif",
+            position: "absolute",
             left: xPos(props.pos, props.isSignYourself),
             top: yPos(props.pos, props.isSignYourself),
+            fontSize: fontSize,
+            color: fontColor,
+            zIndex: 99
+          }}
+        >
+          {props.pos?.options?.response}
+        </span>
+      ) : (
+        <Rnd
+          id={props.pos.key}
+          data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
+          key={props.pos.key}
+          lockAspectRatio={
+            !props.isFreeResize &&
+            ![
+              textWidget,
+              "email",
+              "name",
+              "company",
+              "job title",
+              textInputWidget
+            ].includes(props.pos.type) &&
+            (props.pos.Width
+              ? props.pos.Width / props.pos.Height
+              : defaultWidthHeight(props.pos.type).width /
+                defaultWidthHeight(props.pos.type).height)
+          }
+          enableResizing={{
+            top: false,
+            right: false,
+            bottom: false,
+            left: false,
+            topRight: false,
+            bottomRight:
+              props.data && props.isNeedSign
+                ? props.data?.signerObjId === props.signerObjId &&
+                  props.pos.type !== "checkbox" &&
+                  props.pos.type !== radioButtonWidget
+                  ? true
+                  : false
+                : props.pos.type !== radioButtonWidget &&
+                  props.pos.type !== "checkbox" &&
+                  props.pos.key === props.selectWidgetId &&
+                  true,
+            bottomLeft: false,
+            topLeft: false
+          }}
+          bounds="parent"
+          className="signYourselfBlock"
+          style={{
+            border: "1px solid #007bff",
+            borderRadius: "2px",
+            cursor: getCursor(),
+            zIndex:
+              props.pos.type === "date"
+                ? props.pos.key === props.selectWidgetId
+                  ? 99 + 1
+                  : 99
+                : props?.pos?.zIndex
+                  ? props.pos.zIndex
+                  : "5",
+            opacity:
+              props.isNeedSign && props.data?.Id !== props?.uniqueId && "0.4",
+            background: handleBackground()
+          }}
+          onDrag={() => {
+            setDraggingEnabled(true);
+            props.handleTabDrag && props.handleTabDrag(props.pos.key);
+          }}
+          size={{
             width:
               props.pos.type === radioButtonWidget ||
               props.pos.type === "checkbox"
@@ -1054,40 +965,157 @@ function Placeholder(props) {
               props.pos.type === radioButtonWidget ||
               props.pos.type === "checkbox"
                 ? "auto"
-                : props.posHeight(props.pos, props.isSignYourself),
+                : props.posHeight(props.pos, props.isSignYourself)
-            zIndex: "10"
           }}
-          onTouchEnd={() => handleTouchEnd()}
+          minHeight={calculateFont(props.pos.options?.fontSize, true)}
-          onClick={() => handleOnClickPlaceholder()}
+          maxHeight="auto"
-          onTouchStart={() => handleTouchStart()}
+          onResizeStart={() => {
+            setDraggingEnabled(true);
+            props.setIsResize && props.setIsResize(true);
+          }}
+          onResizeStop={(e, direction, ref) => {
+            setTimeout(() => {
+              props.setIsResize && props.setIsResize(false);
+            }, 50);
+            props.handleSignYourselfImageResize &&
+              props.handleSignYourselfImageResize(
+                ref,
+                props.pos.key,
+                props.xyPosition,
+                props.setXyPosition,
+                props.index,
+                containerScale,
+                props.scale,
+                props.data && props.data.Id,
+                props.isResize
+              );
+          }}
+          disableDragging={handleDragging()}
+          onDragStop={(event, dragElement) => {
+            setIsDisableDragging(true);
+            props.handleStop &&
+              props.handleStop(
+                event,
+                dragElement,
+                props.data?.Id,
+                props.pos?.key
+              );
+          }}
+          position={{
+            x: xPos(props.pos, props.isSignYourself),
+            y: yPos(props.pos, props.isSignYourself)
+          }}
+          onResize={(e, direction, ref) => {
+            setPlaceholderBorder({
+              w: ref.offsetWidth / (props.scale * containerScale),
+              h: ref.offsetHeight / (props.scale * containerScale)
+            });
+          }}
+          // onClick={() =>
+          //   !props.isResize && !isMobile && handleOnClickPlaceholder()
+          // }
         >
-          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+          {props.pos.key === props.selectWidgetId &&
-          <PlaceholderType
+          ((props.isShowBorder &&
-            pos={props.pos}
+            ![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
-            xyPosition={props.xyPosition}
+            (props?.isAlllowModify &&
-            index={props.index}
+              !props?.assignedWidgetId.includes(props.pos.key))) ? (
-            setXyPosition={props.setXyPosition}
+            <BorderResize
-            data={props.data}
+              right={-12}
-            setSignKey={props.setSignKey}
+              top={-11}
-            isShowDropdown={props?.isShowDropdown}
+              pos={props.pos}
-            isPlaceholder={props.isPlaceholder}
+              posHeight={props.posHeight}
-            isSignYourself={props.isSignYourself}
+              isSignYourself={props.isSignYourself || props.isSelfSign}
-            isSelfSign={props.isSelfSign}
+            />
-            signerObjId={props.signerObjId}
+          ) : props.data &&
-            handleUserName={props.handleUserName}
+            props.isNeedSign &&
-            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
+            props.pos.type !== "checkbox" ? (
-            isNeedSign={props.isNeedSign}
+            props.data?.signerObjId === props.signerObjId &&
-            setSelectDate={setSelectDate}
+            ![radioButtonWidget, "checkbox"].includes(props.pos.type) ? (
-            selectDate={selectDate}
+              <BorderResize
-            setValidateAlert={props.setValidateAlert}
+                posHeight={props.posHeight}
-            setStartDate={setStartDate}
+                isSignYourself={props.isSignYourself || props.isSelfSign}
-            startDate={startDate}
+                pos={props.pos}
-            handleSaveDate={handleSaveDate}
+              />
-            xPos={props.xPos}
+            ) : (
-            calculateFont={calculateFont}
+              <></>
-          />
+            )
-        </div>
+          ) : (
-      </Rnd>
+            ![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
+            props.pos.key === props.selectWidgetId && <BorderResize />
+          )}
+
+          {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
+            2- If props.isShowBorder is true, display borders for all widgets. 
+            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
+               1- When isAlllowModify is true, show borders.
+               2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
+    */}
+          {props.pos.key === props.selectWidgetId &&
+            (props.isShowBorder ||
+              !isDisableDragging ||
+              (props?.isAlllowModify &&
+                !props?.assignedWidgetId.includes(props.pos.key))) && (
+              <PlaceholderBorder
+                setDraggingEnabled={setDraggingEnabled}
+                pos={props.pos}
+                isPlaceholder={props.isPlaceholder}
+                getCheckboxRenderWidth={getCheckboxRenderWidth}
+                scale={props.scale}
+                containerScale={containerScale}
+                placeholderBorder={placeholderBorder}
+              />
+            )}
+          <div
+            className="flex items-stretch justify-center"
+            style={{
+              left: xPos(props.pos, props.isSignYourself),
+              top: yPos(props.pos, props.isSignYourself),
+              width:
+                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),
+              zIndex: "10"
+            }}
+            onTouchEnd={() => handleTouchEnd()}
+            onClick={() => handleOnClickPlaceholder()}
+            onTouchStart={() => handleTouchStart()}
+          >
+            {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+            <PlaceholderType
+              pos={props.pos}
+              xyPosition={props.xyPosition}
+              index={props.index}
+              setXyPosition={props.setXyPosition}
+              data={props.data}
+              setSignKey={props.setSignKey}
+              isShowDropdown={props?.isShowDropdown}
+              isPlaceholder={props.isPlaceholder}
+              isSignYourself={props.isSignYourself}
+              isSelfSign={props.isSelfSign}
+              signerObjId={props.signerObjId}
+              handleUserName={props.handleUserName}
+              pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
+              isNeedSign={props.isNeedSign}
+              setSelectDate={setSelectDate}
+              selectDate={selectDate}
+              setValidateAlert={props.setValidateAlert}
+              setStartDate={setStartDate}
+              startDate={startDate}
+              handleSaveDate={handleSaveDate}
+              xPos={props.xPos}
+              calculateFont={calculateFont}
+            />
+          </div>
+        </Rnd>
+      )}
+
       <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
         <div className="h-[100%] p-[20px]">
           <div className="flex flex-row items-center">

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

@@ -513,10 +513,14 @@ function PlaceholderType(props) {
           })}
         </select>
       ) : (
-        <div style={textWidgetStyle} className="select-none-cls">
+        <div
+          style={textWidgetStyle}
+          className="select-none-cls flex justify-between items-center"
+        >
           {props.pos?.options?.name
             ? props.pos.options.name
             : widgetTypeTraslation}
+          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
         </div>
       );
     case "initials":
@@ -672,12 +676,7 @@ function PlaceholderType(props) {
           onBlur={handleInputBlur}
           closeOnScroll={true}
           className={`${selectWidgetCls} outline-[#007bff]`}
-          selected={
+          selected={props?.startDate}
-            props?.startDate
-              ? props?.startDate
-              : props.pos.options?.response &&
-                new Date(props.pos.options.response)
-          }
           onChange={(date) => handleOnDateChange(date)}
           popperPlacement="top-end"
           customInput={<ExampleCustomInput />}

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

@@ -14,53 +14,53 @@ function TextFontSetting(props) {
       handleClose={() => props.setIsTextSetting(false)}
     >
       <div className="h-full p-[20px]">
-        <div className="flex items-center">
+        <div className="flex flex-col md:flex-row md:items-center gap-3">
-          <span>{t("font-size")} :</span>
+          {/* Font Size Selector */}
-          <select
+          <div className="flex items-center gap-2">
-            className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+            <span className="whitespace-nowrap">{t("font-size")}:</span>
-            value={
+            <select
-              props.fontSize ||
+              className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-              props.currWidgetsDetails?.options?.fontSize ||
+              value={
-              12
+                props.fontSize ||
-            }
+                props.currWidgetsDetails?.options?.fontSize ||
-            onChange={(e) => {
+                12
-              props.setFontSize(parseInt(e.target.value));
+              }
-            }}
+              onChange={(e) => props.setFontSize(parseInt(e.target.value))}
-          >
+            >
-            {fontsizeArr.map((size, ind) => {
+              {fontsizeArr.map((size, ind) => (
-              return (
+                <option key={ind} className="text-[13px]" value={size}>
-                <option className="text-[13px]" value={size} key={ind}>
                   {size}
                 </option>
-              );
+              ))}
-            })}
+            </select>
-          </select>
+          </div>
-          <div className="flex flex-row gap-1 items-center ml-4">
+          {/* Font Color Selector */}
-            <span>{t("color")}: </span>
+          <div className="flex items-center">
+            <span className="whitespace-nowrap">{t("color")}:</span>
             <select
+              className="ml-[33px] md:ml-4 w-[65%] md:w-[full] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
               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) => {
+              {fontColorArr.map((color, ind) => (
-                return (
+                <option key={ind} value={color}>
-                  <option value={color} key={ind}>
+                  {t(`color-type.${color}`)}
-                    {t(`color-type.${color}`)}
+                </option>
-                  </option>
+              ))}
-                );
-              })}
             </select>
+            {/* Color Preview Box */}
             <span
+              className="w-5 h-5 ml-2 rounded border border-gray-300"
               style={{
-                background:
+                backgroundColor:
                   props.fontColor ||
-                  props.currWidgetsDetails?.options?.fontColor
+                  props.currWidgetsDetails?.options?.fontColor ||
+                  "black"
               }}
-              className="w-5 h-[19px] ml-1"
             ></span>
           </div>
         </div>

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

@@ -293,24 +293,26 @@ const WidgetNameModal = (props) => {
           "job title",
           "email"
         ].includes(props.defaultdata?.type) && (
-          <div className="flex items-center mb-[0.75rem]">
+          <div className="flex flex-col md:flex-row md:items-center gap-3 mb-3">
-            <span>{t("font-size")}:</span>
+            <div className="flex items-center gap-2 ">
-            <select
+              <span>{t("font-size")}:</span>
-              className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              <select
-              value={
+                className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-                props.fontSize || props.defaultdata?.options?.fontSize || 12
+                value={
-              }
+                  props.fontSize || props.defaultdata?.options?.fontSize || 12
-              onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+                }
-            >
+                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
-              {fontsizeArr.map((size, ind) => {
+              >
-                return (
+                {fontsizeArr.map((size, ind) => {
-                  <option className="text-[13px]" value={size} key={ind}>
+                  return (
-                    {size}
+                    <option className="text-[13px]" value={size} key={ind}>
-                  </option>
+                      {size}
-                );
+                    </option>
-              })}
+                  );
-            </select>
+                })}
-            <div className="flex flex-row gap-1 items-center ml-4">
+              </select>
+            </div>
+            <div className="flex items-center">
               <span>{t("color")}: </span>
               <select
                 value={
@@ -319,7 +321,7 @@ const WidgetNameModal = (props) => {
                   "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"
+                className="ml-[33px] md:ml-4 w-[65%] md:w-[full] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
               >
                 {fontColorArr.map((color, ind) => {
                   return (

apps/OpenSign/src/pages/Form.js

@@ -448,11 +448,6 @@ const Forms = (props) => {
           });
           setFileUpload("");
           setpercentage(0);
-          setIsAlert((obj) => ({
-            ...obj,
-            type: "success",
-            message: `${props.msgVar} created successfully!`
-          }));
           navigate(`/${props?.redirectRoute}/${res.id}`);
         }
       } catch (err) {

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -453,35 +453,9 @@ function PdfRequestFiles(
           setRequestSignTour(true);
         } else {
           const isEnableOTP = documentData?.[0]?.IsEnableOTP || false;
-          if (!isEnableOTP) {
+          const sessionToken = localStorage.getItem("accesstoken");
-            try {
+          if (sessionToken) {
-              const resContact = await axios.post(
+            //condition to check current user exist in contracts_Users class and check tour message status
-                `${localStorage.getItem("baseUrl")}functions/getcontact`,
-                { contactId: currUserId },
-                {
-                  headers: {
-                    "Content-Type": "application/json",
-                    "X-Parse-Application-Id": localStorage.getItem("parseAppId")
-                  }
-                }
-              );
-              const contact = resContact?.data?.result;
-              setContractName("_Contactbook");
-              setSignerUserId(contact?.objectId);
-              const tourData = contact?.TourStatus && contact?.TourStatus;
-              if (tourData && tourData.length > 0) {
-                const checkTourRequest =
-                  tourData?.some((data) => data?.requestSign) || false;
-                setTourStatus(tourData);
-                setRequestSignTour(checkTourRequest);
-              } else {
-                setRequestSignTour(false);
-              }
-            } catch (err) {
-              console.log("err while getting tourstatus", err);
-            }
-          } else {
-            //else condition to check current user exist in contracts_Users class and check tour message status
             //if not then check user exist in contracts_Contactbook class and check tour message status
             const res = await contractUsers();
             if (res === "Error: Something went wrong!") {
@@ -538,6 +512,33 @@ function PdfRequestFiles(
                 setHandleError(t("user-not-exist"));
               }
             }
+          } else if (!isEnableOTP) {
+            try {
+              const resContact = await axios.post(
+                `${localStorage.getItem("baseUrl")}functions/getcontact`,
+                { contactId: currUserId },
+                {
+                  headers: {
+                    "Content-Type": "application/json",
+                    "X-Parse-Application-Id": localStorage.getItem("parseAppId")
+                  }
+                }
+              );
+              const contact = resContact?.data?.result;
+              setContractName("_Contactbook");
+              setSignerUserId(contact?.objectId);
+              const tourData = contact?.TourStatus && contact?.TourStatus;
+              if (tourData && tourData.length > 0) {
+                const checkTourRequest =
+                  tourData?.some((data) => data?.requestSign) || false;
+                setTourStatus(tourData);
+                setRequestSignTour(checkTourRequest);
+              } else {
+                setRequestSignTour(false);
+              }
+            } catch (err) {
+              console.log("err while getting tourstatus", err);
+            }
           }
         }
         setIsUiLoading(false);

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -246,12 +246,15 @@ function PlaceHolderSign() {
     if (documentData && documentData.length > 0) {
       if (documentData[0]?.Placeholders?.length > 0) {
         const signerNotExist = documentData[0]?.Placeholders.some(
-          (data) => !data.signerObjId
+          (data) => !data.signerObjId && data.Role !== "prefill"
         );
         //condition to check any role does not attach signer
         if (signerNotExist) {
+          const filterPrefill = documentData[0]?.Placeholders?.filter(
+            (x) => x.Role !== "prefill"
+          );
           let users = [];
-          documentData[0]?.Placeholders?.forEach((element) => {
+          filterPrefill?.forEach((element) => {
             let label = "";
             const signerData = documentData[0]?.Signers.find(
               (x) => element.signerObjId && element.signerObjId === x.objectId
@@ -272,6 +275,7 @@ function PlaceHolderSign() {
           setForms(users);
         }
       }
+
       const url = documentData[0] && documentData[0]?.URL;
       //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
       const arrayBuffer = await convertPdfArrayBuffer(url);
@@ -1927,7 +1931,9 @@ function PlaceHolderSign() {
     }
   };
   const handleDisable = () => {
-    const isAllSigner = signerPos.some((x) => !x.signerObjId);
+    const isAllSigner = signerPos.some(
+      (x) => !x.signerObjId && x.Role !== "prefill"
+    );
     return isAllSigner;
   };
   const handleCloseAttachSigner = () => {
@@ -2126,7 +2132,7 @@ function PlaceHolderSign() {
                           {pdfDetails[0].SendinOrder ? (
                             <p>
                               {t("placeholder-mail-alert", {
-                                name: pdfDetails[0]?.Signers[0]?.Name
+                                name: signersdata[0]?.Name
                               })}
                             </p>
                           ) : (
@@ -2210,7 +2216,7 @@ function PlaceHolderSign() {
                         <>
                           {/* grid grid-cols-1 md:grid-cols-2 */}
                           <div className="min-h-max max-h-[250px] overflow-y-auto">
-                            <div className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content flex flex-col gap-2 relative">
+                            <div className="py-3 px-[10px] op-card border-[1px] border-gray-400 mt-3 md:mx-3  mb-4 bg-base-200 text-base-content flex flex-col gap-2 relative">
                               {forms?.map((field, id) => {
                                 return (
                                   <div
@@ -2218,7 +2224,7 @@ function PlaceHolderSign() {
                                     key={field?.value}
                                   >
                                     <label>{field?.role}</label>
-                                    <div className="flex justify-between items-center gap-2">
+                                    <div className="flex justify-between items-center gap-1">
                                       <div className="flex-1">
                                         <AsyncSelect
                                           cacheOptions

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -11,6 +11,8 @@ import Tour from "reactour";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
+import { PDFDocument } from "pdf-lib";
+import { SaveFileSize } from "../constant/saveFileSize";
 import {
   pdfNewWidthFun,
   contractUsers,
@@ -34,7 +36,9 @@ import {
   handleSignatureType,
   getBase64FromUrl,
   convertPdfArrayBuffer,
-  generatePdfName
+  generatePdfName,
+  textWidget,
+  multiSignEmbed
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -132,6 +136,9 @@ const TemplatePlaceholder = () => {
   const [scale, setScale] = useState(1);
   const [signatureType, setSignatureType] = useState([]);
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
+  const [updatedPdfUrl, setUpdatedPdfUrl] = useState("");
+  const [tempSignerId, setTempSignerId] = useState("");
+  const [unSignedWidgetId, setUnSignedWidgetId] = useState("");
   useEffect(() => {
     fetchTemplate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -238,9 +245,22 @@ const TemplatePlaceholder = () => {
             documentData[0].Placeholders &&
             documentData[0].Placeholders.length > 0
           ) {
-            setSignerPos(documentData[0].Placeholders);
+            const placeholder = documentData[0]?.Placeholders.filter(
+              (data) => data.Role !== "prefill"
+            );
+            setSignerPos(placeholder);
+            signersdata.forEach((x) => {
+              if (x.objectId) {
+                const obj = {
+                  __type: "Pointer",
+                  className: "contracts_Contactbook",
+                  objectId: x.objectId
+                };
+                signers.push(obj);
+              }
+            });
             let signers = [...documentData[0].Signers];
-            let updatedSigners = documentData[0].Placeholders.map((x) => {
+            let updatedSigners = placeholder.map((x) => {
               let matchingSigner = signers.find(
                 (y) => x.signerObjId && x.signerObjId === y.objectId
               );
@@ -275,10 +295,13 @@ const TemplatePlaceholder = () => {
             documentData[0].Placeholders &&
             documentData[0].Placeholders.length > 0
           ) {
-            let updatedSigners = documentData[0].Placeholders.map((x) => {
+            const placeholder = documentData[0]?.Placeholders.filter(
+              (data) => data.Role !== "prefill"
+            );
+            let updatedSigners = placeholder.map((x) => {
               return { Role: x.Role, Id: x.Id, blockColor: x.blockColor };
             });
-            setSignerPos(documentData[0].Placeholders);
+            setSignerPos(placeholder);
             setUniqueId(updatedSigners[0].Id);
             setSignersData(updatedSigners);
             setIsSelectId(0);
@@ -353,7 +376,8 @@ const TemplatePlaceholder = () => {
         const widgetHeight =
           defaultWidthHeight(dragTypeValue).height * containerScale;
         let dropData = [],
-          currentPagePosition;
+          currentPagePosition,
+          filterSignerPos;
         let placeHolder;
         if (item === "onclick") {
           // `getBoundingClientRect()` is used to get accurate measurement height of the div
@@ -406,7 +430,11 @@ const TemplatePlaceholder = () => {
           dropData.push(dropObj);
           placeHolder = { pageNumber: pageNumber, pos: dropData };
         }
-        let filterSignerPos = signerPos.find((data) => data.Id === uniqueId);
+        if (dragTypeValue === textWidget) {
+          filterSignerPos = signerPos.find((data) => data.Role === "prefill");
+        } else {
+          filterSignerPos = signerPos.find((data) => data.Id === uniqueId);
+        }
         const getPlaceHolder = filterSignerPos?.placeHolder;
         if (getPlaceHolder) {
           //checking exist placeholder on same page
@@ -423,20 +451,53 @@ const TemplatePlaceholder = () => {
           const newSignPos = getPos.concat(dropData);
           let xyPos = { pageNumber: pageNumber, pos: newSignPos };
           updatePlace.push(xyPos);
-          const updatesignerPos = signerPos.map((x) =>
+          let updatesignerPos;
-            x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
+          if (dragTypeValue === textWidget) {
-          );
+            updatesignerPos = signerPos.map((x) =>
+              x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
+            );
+          } else {
+            updatesignerPos = signerPos.map((x) =>
+              x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
+            );
+          }
           setSignerPos(updatesignerPos);
         } else {
-          //else condition to add placeholder widgets on multiple page first time
+          //if condition when widget type is prefill label text widget
-          const updatesignerPos = signerPos.map((x) =>
+          if (dragTypeValue === textWidget) {
-            x.Id === uniqueId && x?.placeHolder
+            //check text widgets data (prefill) already exist then and want to add text widget on new page
-              ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
+            //create new page entry with old data and update placeholder
-              : x.Id === uniqueId
+            if (filterSignerPos) {
-                ? { ...x, placeHolder: [placeHolder] }
+              const addPrefillData =
-                : x
+                filterSignerPos && filterSignerPos?.placeHolder;
-          );
+              addPrefillData.push(placeHolder);
-          setSignerPos(updatesignerPos);
+              const updatePrefillPos = signerPos.map((x) =>
+                x.Role === "prefill" ? { ...x, placeHolder: addPrefillData } : x
+              );
+              setSignerPos(updatePrefillPos);
+            } //else condition if user do not have any text widget data
+            else {
+              const prefillTextWidget = {
+                signerPtr: {},
+                signerObjId: "",
+                blockColor: "#f58f8c",
+                placeHolder: [placeHolder],
+                Role: "prefill",
+                Id: key
+              };
+              setSignerPos((prev) => [...prev, prefillTextWidget]);
+            }
+          } else {
+            //else condition to add placeholder widgets on multiple page first time
+            const updatesignerPos = signerPos.map((x) =>
+              x.Id === uniqueId && x?.placeHolder
+                ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
+                : x.Id === uniqueId
+                  ? { ...x, placeHolder: [placeHolder] }
+                  : x
+            );
+            setSignerPos(updatesignerPos);
+          }
         }
 
         if (dragTypeValue === "dropdown") {
@@ -446,9 +507,14 @@ const TemplatePlaceholder = () => {
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
         } else if (
-          [textInputWidget, "name", "company", "job title", "email"].includes(
+          [
-            dragTypeValue
+            textInputWidget,
-          )
+            textWidget,
+            "name",
+            "company",
+            "job title",
+            "email"
+          ].includes(dragTypeValue)
         ) {
           setFontSize(12);
           setFontColor("black");
@@ -509,20 +575,22 @@ const TemplatePlaceholder = () => {
         containerWH
       );
       if (keyValue >= 0) {
-        const filterSignerPos = updateSignPos.filter(
+        let filterSignerPos;
-          (data) => data.Id === signId
+        if (signId) {
-        );
+          filterSignerPos = updateSignPos.filter((data) => data.Id === signId);
+        } else {
+          filterSignerPos = updateSignPos.filter(
+            (data) => data.Role === "prefill"
+          );
+        }
 
         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((url) => {
               if (url.key === keyValue) {
@@ -542,12 +610,17 @@ const TemplatePlaceholder = () => {
               return obj;
             });
             const newUpdateSigner = updateSignPos.map((obj) => {
-              if (obj.Id === signId) {
+              if (signId) {
-                return { ...obj, placeHolder: newUpdateSignPos };
+                if (obj.Id === signId) {
+                  return { ...obj, placeHolder: newUpdateSignPos };
+                }
+              } else {
+                if (obj.Role === "prefill") {
+                  return { ...obj, placeHolder: newUpdateSignPos };
+                }
               }
               return obj;
             });
-
             setSignerPos(newUpdateSigner);
           }
         }
@@ -654,10 +727,34 @@ const TemplatePlaceholder = () => {
   };
   const alertSendEmail = async () => {
     const isPlaceholderExist = signerPos.every((data) => data.placeHolder);
-    if (isPlaceholderExist) {
+    const getPrefill = signerPos?.find((data) => data.Role === "prefill");
+    const prefillPlaceholder = getPrefill?.placeHolder;
+    let isLabel = false;
+    let unfilledTextWidgetId = "";
+    //condition is used to check text widget data is empty or have response
+    if (getPrefill) {
+      if (prefillPlaceholder) {
+        prefillPlaceholder.map((data) => {
+          if (!isLabel) {
+            const unfilledTextWidgets = data.pos.find(
+              (position) => !position.options.response
+            );
+            if (unfilledTextWidgets) {
+              isLabel = true;
+              unfilledTextWidgetId = unfilledTextWidgets.key;
+            }
+          }
+        });
+      }
+    }
+    if (getPrefill && isLabel) {
+      setUnSignedWidgetId(unfilledTextWidgetId);
+    } else if (isPlaceholderExist) {
       handleSaveTemplate();
     } else {
-      const signerList = signerPos.filter((data) => !data.placeHolder);
+      const signerList = signerPos.filter(
+        (data) => !data.placeHolder && data.Role !== "prefill"
+      );
       const getSigner = signerList.map((x) => {
         return signersdata.find((y) => y.Id === x.Id).Role;
       });
@@ -673,7 +770,7 @@ const TemplatePlaceholder = () => {
     }, 2000);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signerPos, signatureType, pdfBase64Url]);
+  }, [signerPos, signersdata, signatureType, pdfBase64Url]);
 
   // `autosavedetails` is used to save template details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers
   const autosavedetails = async () => {
@@ -703,7 +800,10 @@ const TemplatePlaceholder = () => {
       const templateCls = new Parse.Object("contracts_Template");
       templateCls.id = templateId;
       if (signerPos?.length > 0) {
-        templateCls.set("Placeholders", signerPos);
+        const removePrefill = signerPos.filter((x) => x.Role !== "prefill");
+        if (removePrefill.length > 0) {
+          templateCls.set("Placeholders", removePrefill);
+        }
       }
       templateCls.set("Signers", signers);
       templateCls.set("SignatureType", signatureType);
@@ -731,11 +831,60 @@ const TemplatePlaceholder = () => {
     }
   };
 
+  //embed prefill label widget data
+  const embedPrefilllData = async () => {
+    const prefillExist = signerPos.filter((data) => data.Role === "prefill");
+    if (prefillExist && prefillExist.length > 0) {
+      const placeholder = prefillExist[0].placeHolder;
+      const existingPdfBytes = pdfArrayBuffer;
+      const pdfDoc = await PDFDocument.load(existingPdfBytes, {
+        ignoreEncryption: true
+      });
+      const isSignYourSelfFlow = false;
+      try {
+        const pdfBase64 = await multiSignEmbed(
+          placeholder,
+          pdfDoc,
+          isSignYourSelfFlow,
+          scale
+        );
+        const pdfName = generatePdfName(16);
+        const pdfUrl = await convertBase64ToFile(
+          pdfName,
+          pdfBase64,
+          "",
+        );
+        const tenantId = localStorage.getItem("TenantId");
+        const buffer = atob(pdfBase64);
+        SaveFileSize(buffer.length, pdfUrl, tenantId);
+        return pdfUrl;
+      } catch (err) {
+        console.log("error to convertBase64ToFile in placeholder flow", err);
+        alert(err?.message);
+      }
+    } else if (pdfBase64Url) {
+      try {
+        const pdfName = generatePdfName(16);
+        const pdfUrl = await convertBase64ToFile(
+          pdfName,
+          pdfBase64Url,
+          "",
+        );
+        return pdfUrl;
+      } catch (err) {
+        console.log("error to convertBase64ToFile in placeholder flow", err);
+        alert(err?.message);
+      }
+    } else {
+      return pdfDetails[0].URL;
+    }
+  };
   const handleSaveTemplate = async () => {
     if (signersdata?.length) {
       setIsLoading({ isLoad: true, message: t("loading-mssg") });
       setIsSendAlert(false);
-      let signers = [];
+      let signers = [],
+        pdfUrl;
       if (signersdata?.length > 0) {
         signersdata.forEach((x) => {
           if (x.objectId) {
@@ -748,15 +897,10 @@ const TemplatePlaceholder = () => {
           }
         });
       }
-      let pdfUrl = pdfDetails[0]?.URL;
       if (pdfBase64Url) {
         try {
-          const pdfName = generatePdfName(16);
+          pdfUrl = await embedPrefilllData();
-          pdfUrl = await convertBase64ToFile(
+          setUpdatedPdfUrl(pdfUrl);
-            pdfName,
-            pdfBase64Url,
-            "",
-          );
         } catch (e) {
           console.log("error to convertBase64ToFile in placeholder flow", e);
         }
@@ -774,8 +918,9 @@ const TemplatePlaceholder = () => {
         const RedirectUrl = pdfDetails[0]?.RedirectUrl
           ? { RedirectUrl: pdfDetails[0]?.RedirectUrl }
           : {};
+        const removePrefill = signerPos.filter((x) => x?.Role !== "prefill");
         const data = {
-          Placeholders: signerPos,
+          Placeholders: removePrefill,
           Signers: signers,
           Name: pdfDetails[0]?.Name || "",
           Note: pdfDetails[0]?.Note || "",
@@ -927,25 +1072,13 @@ const TemplatePlaceholder = () => {
   const handleCreateDocModal = async () => {
     setIsCreateDocModal(false);
     setIsCreateDoc(true);
-    let pdfUrl = pdfDetails[0]?.URL;
+    const removePrefill = signerPos.filter((x) => x.Role !== "prefill");
-    if (pdfBase64Url) {
-      try {
-        const pdfName = generatePdfName(16);
-        pdfUrl = await convertBase64ToFile(
-          pdfName,
-          pdfBase64Url,
-          "",
-        );
-      } catch (e) {
-        console.log("error to convertBase64ToFile in placeholder flow", e);
-      }
-    }
     // handle create document
     const res = await createDocument(
       pdfDetails,
-      signerPos,
+      removePrefill,
       signersdata,
-      pdfUrl
+      updatedPdfUrl
     );
     if (res.status === "success") {
       navigate(`/placeHolderSign/${res.id}`, {
@@ -1386,6 +1519,13 @@ const TemplatePlaceholder = () => {
     setShowDropdown(false);
     setIsRadio(false);
     setIsCheckbox(false);
+    //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 clickOnZoomIn = () => {
@@ -1433,7 +1573,14 @@ const TemplatePlaceholder = () => {
       style: { fontSize: "13px" }
     }
   ];
-
+  const textFieldTour = [
+    {
+      selector: '[data-tut="IsSigned"]',
+      content: t("text-field-tour"),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
   return (
     <>
       <Title title={"Template"} />
@@ -1468,13 +1615,25 @@ const TemplatePlaceholder = () => {
                   closeWithMask={false}
                 />
               )}
-              <Tour
+              {isSendAlert && (
-                onRequestClose={() => setIsSendAlert(false)}
+                <Tour
-                steps={signatureWidgetTour}
+                  onRequestClose={() => setIsSendAlert(false)}
-                isOpen={isSendAlert}
+                  steps={signatureWidgetTour}
-                rounded={5}
+                  isOpen={true}
-                closeWithMask={false}
+                  rounded={5}
-              />
+                  closeWithMask={false}
+                /> // this is the tour for add signature widget for all role
+              )}
+              {unSignedWidgetId && (
+                <Tour
+                  onRequestClose={() => setUnSignedWidgetId("")}
+                  steps={textFieldTour}
+                  isOpen={true}
+                  rounded={5}
+                  closeWithMask={false}
+                />
+              )}
+
               {/* this component used to render all pdf pages in left side */}
               <RenderAllPdfPage
                 allPages={allPages}
@@ -1614,6 +1773,10 @@ const TemplatePlaceholder = () => {
                     pageNumber={pageNumber}
                     signKey={signKey}
                     Id={uniqueId}
+                    widgetType={widgetType}
+                    setUniqueId={setUniqueId}
+                    tempSignerId={tempSignerId}
+                    setTempSignerId={setTempSignerId}
                   />
                   {/* pdf header which contain funish back button */}
                   <Header
@@ -1691,6 +1854,9 @@ const TemplatePlaceholder = () => {
                         setFontColor={setFontColor}
                         isResize={isResize}
                         divRef={divRef}
+                        setTempSignerId={setTempSignerId}
+                        uniqueId={uniqueId}
+                        unSignedWidgetId={unSignedWidgetId}
                       />
                     )}
                   </div>
@@ -1721,7 +1887,6 @@ const TemplatePlaceholder = () => {
                     handleOnBlur={handleOnBlur}
                     title={t("roles")}
                     initial={true}
-                    isTemplateFlow={true}
                     sendInOrder={pdfDetails[0].SendinOrder}
                     setSignersData={setSignersData}
                     blockColor={blockColor}
@@ -1729,6 +1894,7 @@ const TemplatePlaceholder = () => {
                     setSignerPos={setSignerPos}
                     uniqueId={uniqueId}
                     setSelectWidgetId={setSelectWidgetId}
+                    isTemplateFlow={true}
                   />
                 </div>
               ) : (