Merge pull request #316 from OpenSignLabs/fix_emailresetdate

fix: Adapter prototype don't match expected prototype
2026-08-17 21:25:54 +02:00 · 2025-02-19 19:22:54 +00:00
parent 38f8561d18
commit c1be197346
16 changed files with 602 additions and 385 deletions
@@ -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."
 }
@@ -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."
 }
@@ -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."
 }
@@ -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."
+
 }
@@ -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."
 }
@@ -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 && (
@@ -125,10 +125,7 @@ function Placeholder(props) {
  const [clickonWidget, setClickonWidget] = useState({});
  const [startDate, setStartDate] = useState(
    props.pos.type === "date" &&
-      getDefaultdate(
-        props?.pos?.options?.response,
-        props.pos?.options?.validation?.format
-      )
+      getDefaultdate(new Date(), 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
-        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"
-              ? "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"
+      {/*  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. */}
+      {props.pos?.options?.response &&
+      props.pos.key !== props.selectWidgetId &&
+      props.pos.type === textWidget ? (
+        <span
+          onClick={() => {
+            props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
+          }}
          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),
-            zIndex: "10"
+                : props.posHeight(props.pos, props.isSignYourself)
          }}
-          onTouchEnd={() => handleTouchEnd()}
-          onClick={() => handleOnClickPlaceholder()}
-          onTouchStart={() => handleTouchStart()}
+          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 && <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>
+          {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={{
+              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">
@@ -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={
-            props?.startDate
-              ? props?.startDate
-              : props.pos.options?.response &&
-                new Date(props.pos.options.response)
-          }
+          selected={props?.startDate}
          onChange={(date) => handleOnDateChange(date)}
          popperPlacement="top-end"
          customInput={<ExampleCustomInput />}
@@ -14,53 +14,53 @@ function TextFontSetting(props) {
      handleClose={() => props.setIsTextSetting(false)}
    >
      <div className="h-full p-[20px]">
-        <div className="flex items-center">
-          <span>{t("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(parseInt(e.target.value));
-            }}
-          >
-            {fontsizeArr.map((size, ind) => {
-              return (
-                <option className="text-[13px]" value={size} key={ind}>
+        <div className="flex flex-col md:flex-row md:items-center gap-3">
+          {/* Font Size Selector */}
+          <div className="flex items-center gap-2">
+            <span className="whitespace-nowrap">{t("font-size")}:</span>
+            <select
+              className="ml-[7px] w-[60%] 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(parseInt(e.target.value))}
+            >
+              {fontsizeArr.map((size, ind) => (
+                <option key={ind} className="text-[13px]" value={size}>
                  {size}
                </option>
-              );
-            })}
-          </select>
-          <div className="flex flex-row gap-1 items-center ml-4">
-            <span>{t("color")}: </span>
+              ))}
+            </select>
+          </div>
+          {/* Font Color Selector */}
+          <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) => {
-                return (
-                  <option value={color} key={ind}>
-                    {t(`color-type.${color}`)}
-                  </option>
-                );
-              })}
+              {fontColorArr.map((color, ind) => (
+                <option key={ind} value={color}>
+                  {t(`color-type.${color}`)}
+                </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>
@@ -293,24 +293,26 @@ const WidgetNameModal = (props) => {
          "job title",
          "email"
        ].includes(props.defaultdata?.type) && (
-          <div className="flex items-center mb-[0.75rem]">
-            <span>{t("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.defaultdata?.options?.fontSize || 12
-              }
-              onChange={(e) => props.setFontSize(parseInt(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">
+          <div className="flex flex-col md:flex-row md:items-center gap-3 mb-3">
+            <div className="flex items-center gap-2 ">
+              <span>{t("font-size")}:</span>
+              <select
+                className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                value={
+                  props.fontSize || props.defaultdata?.options?.fontSize || 12
+                }
+                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+              >
+                {fontsizeArr.map((size, ind) => {
+                  return (
+                    <option className="text-[13px]" value={size} key={ind}>
+                      {size}
+                    </option>
+                  );
+                })}
+              </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 (
@@ -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) {
@@ -453,35 +453,9 @@ function PdfRequestFiles(
          setRequestSignTour(true);
        } else {
          const isEnableOTP = documentData?.[0]?.IsEnableOTP || false;
-          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);
-            }
-          } else {
-            //else condition to check current user exist in contracts_Users class and check tour message status
+          const sessionToken = localStorage.getItem("accesstoken");
+          if (sessionToken) {
+            //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);
@@ -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
@@ -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) =>
-            x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
-          );
+          let updatesignerPos;
+          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
-          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 condition when widget type is prefill label text widget
+          if (dragTypeValue === textWidget) {
+            //check text widgets data (prefill) already exist then and want to add text widget on new page
+            //create new page entry with old data and update placeholder
+            if (filterSignerPos) {
+              const addPrefillData =
+                filterSignerPos && filterSignerPos?.placeHolder;
+              addPrefillData.push(placeHolder);
+              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(
-          (data) => data.Id === signId
-        );
+        let filterSignerPos;
+        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) {
-                return { ...obj, placeHolder: newUpdateSignPos };
+              if (signId) {
+                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 convertBase64ToFile(
-            pdfName,
-            pdfBase64Url,
-            "",
-          );
+          pdfUrl = await embedPrefilllData();
+          setUpdatedPdfUrl(pdfUrl);
        } 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;
-    if (pdfBase64Url) {
-      try {
-        const pdfName = generatePdfName(16);
-        pdfUrl = await convertBase64ToFile(
-          pdfName,
-          pdfBase64Url,
-          "",
-        );
-      } catch (e) {
-        console.log("error to convertBase64ToFile in placeholder flow", e);
-      }
-    }
+    const removePrefill = signerPos.filter((x) => x.Role !== "prefill");
    // 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
-                onRequestClose={() => setIsSendAlert(false)}
-                steps={signatureWidgetTour}
-                isOpen={isSendAlert}
-                rounded={5}
-                closeWithMask={false}
-              />
+              {isSendAlert && (
+                <Tour
+                  onRequestClose={() => setIsSendAlert(false)}
+                  steps={signatureWidgetTour}
+                  isOpen={true}
+                  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>
              ) : (
@@ -105,20 +105,29 @@ export const updateMailCount = async (extUserId, plan, monthchange) => {
  try {
    const contractUser = await query.first({ useMasterKey: true });
    if (contractUser) {
+      const _extRes = JSON.parse(JSON.stringify(contractUser));
+      let updateDate = new Date();
+      if (_extRes?.LastEmailCountReset?.iso) {
+        updateDate = new Date(_extRes?.LastEmailCountReset?.iso);
+        const newDate = new Date();
+        // Update the month while keeping the same day and year
+        updateDate.setMonth(newDate.getMonth());
+        updateDate.setFullYear(newDate.getFullYear());
+      }
      contractUser.increment('EmailCount', 1);
      if (plan === 'freeplan') {
        if (monthchange) {
-          contractUser.set('LastEmailCountReset', new Date());
+          contractUser.set('LastEmailCountReset', updateDate);
          contractUser.set('MonthlyFreeEmails', 1);
        } else {
          if (contractUser?.get('MonthlyFreeEmails')) {
            contractUser.increment('MonthlyFreeEmails', 1);
            if (contractUser?.get('LastEmailCountReset')) {
-              contractUser.set('LastEmailCountReset', new Date());
+              contractUser.set('LastEmailCountReset', updateDate);
            }
          } else {
            contractUser.set('MonthlyFreeEmails', 1);
-            contractUser.set('LastEmailCountReset', new Date());
+            contractUser.set('LastEmailCountReset', updateDate);
          }
        }
      }
@@ -148,6 +148,8 @@ export const config = {
    : {}),
  filesAdapter: fsAdapter,
  auth: { google: { enabled: true }, sso: SSOAuth },
+  // for fix Adapter prototype don't match expected prototype
+  push: { queueOptions: { disablePushWorker: true } },
 };
 // Client-keys like the javascript key or the .NET key are not necessary with parse-server
 // If you wish you require them, you can set them as options in the initialization above: