feat:implement new widgets- initial signature,name,company,job title & date in sign-yourself flow

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -1,8 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../css/./signature.css";
-import sign from "../assests/sign3.png";
-import stamp from "../assests/stamp2.png";
 import { themeColor } from "../utils/ThemeColor/backColor";
 import axios from "axios";
 import Loader from "./component/loader";
@@ -87,6 +85,7 @@ function SignYourSelf() {
   });
   const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const [isDontShow, setIsDontShow] = useState(false);
+  const [initial, setInitial] = useState("");
   const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [{ isOver }, drop] = useDrop({
@@ -171,17 +170,17 @@ function SignYourSelf() {
   const jsonSender = JSON.parse(senderUser);
 
   useEffect(() => {
-    // localStorage.setItem("accesstoken", "r:d70a32032557e982aab7aec1cae668fc");
-    // localStorage.setItem(
-    //   "baseUrl",
-    //   "https://staging-app.opensignlabs.com/api/app/"
-    // );
-    // localStorage.setItem("parseAppId", "opensignstgn");
-    // localStorage.setItem(
-    //   "Parse/opensignstgn/currentUser",
-    //   '{"name":"raktima","email":"raktimachaurasiya@gmail.com","phone":"9876567876","username":"raktimachaurasiya@gmail.com","createdAt":"2024-01-03T05:48:49.407Z","sessionToken":"r:d70a32032557e982aab7aec1cae668fc","updatedAt":"2024-01-03T05:48:49.407Z","emailVerified":false,"ACL":{"YHwDtLNto7":{"read":true,"write":true}},"__type":"Object","className":"_User","objectId":"YHwDtLNto7"}'
-    // );
-    // localStorage.setItem("_appName", "contracts");
+    localStorage.setItem("accesstoken", "r:17de3495dd207dc88677da7f9f9e4d6b");
+    localStorage.setItem(
+      "baseUrl",
+      "https://staging-app.opensignlabs.com/api/app/"
+    );
+    localStorage.setItem("parseAppId", "opensignstgn");
+    localStorage.setItem(
+      "Parse/opensignstgn/currentUser",
+      '{"name":"raktima","email":"raktimachaurasiya@gmail.com","phone":"5645676534","username":"raktimachaurasiya@gmail.com","emailVerified":false,"createdAt":"2024-01-10T14:40:59.326Z","updatedAt":"2024-01-10T14:40:59.326Z","ACL":{"9MUdPyX2ae":{"read":true,"write":true}},"sessionToken":"r:17de3495dd207dc88677da7f9f9e4d6b","__type":"Object","className":"_User","objectId":"9MUdPyX2ae"}'
+    );
+    localStorage.setItem("_appName", "contracts");
     if (documentId) {
       getDocumentDetails(true);
     }
@@ -255,9 +254,9 @@ function SignYourSelf() {
       .then((Listdata) => {
         const json = Listdata.data;
         const res = json.results;
-
         if (res[0] && res.length > 0) {
           setDefaultSignImg(res[0].ImageURL);
+          setInitial(res[0]?.Initials);
         }
       })
       .catch((err) => {
@@ -322,6 +321,28 @@ function SignYourSelf() {
     }
   };
 
+  //calculate width and height
+  const calculateWidthHeight = (type) => {
+    const intialText =
+      type === "name"
+        ? pdfDetails[0].ExtUserPtr.Name
+        : type === "company"
+          ? pdfDetails[0].ExtUserPtr.Company
+          : type === "job title" && pdfDetails[0].ExtUserPtr.JobTitle;
+    const span = document.createElement("span");
+    span.textContent = intialText;
+    span.style.font = `14px`; // here put your text size and font family
+    span.style.display = "hidden";
+    document.body.appendChild(span);
+    const width = span.offsetWidth;
+    const height = span.offsetHeight;
+
+    document.body.removeChild(span);
+    return {
+      getWidth: width,
+      getHeight: height
+    };
+  };
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
     const key = Math.floor(1000 + Math.random() * 9000);
@@ -330,6 +351,7 @@ function SignYourSelf() {
     let filterDropPos = xyPostion.filter(
       (data) => data.pageNumber === pageNumber
     );
+
     if (item === "onclick") {
       dropObj = {
         xPosition: window.innerWidth / 2 - 100,
@@ -338,7 +360,8 @@ function SignYourSelf() {
         key: key,
         isStamp: monitor,
         type: item.text,
-        yBottom: window.innerHeight / 2 - 60
+        yBottom: window.innerHeight / 2 - 60,
+        SignUrl: item.text === "initials" && initial
       };
 
       dropData.push(dropObj);
@@ -368,7 +391,28 @@ function SignYourSelf() {
         firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
         firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
         yBottom: ybottom,
-        type: item.text
+        type: item.text,
+        SignUrl: item.text === "initials" && initial,
+        widgetValue:
+          item.text === "name"
+            ? pdfDetails[0].ExtUserPtr.Name
+            : item.text === "company"
+              ? pdfDetails[0].ExtUserPtr.Company
+              : item.text === "job title"
+                ? pdfDetails[0].ExtUserPtr.JobTitle
+                : "",
+        Width:
+          item.text === "name" ||
+          item.text === "company" ||
+          item.text === "job title"
+            ? calculateWidthHeight(item.text).getWidth
+            : "",
+        Height:
+          item.text === "company" ||
+          item.text === "name" ||
+          item.text === "job title"
+            ? calculateWidthHeight(item.text).getHeight
+            : ""
       };
 
       dropData.push(dropObj);
@@ -468,7 +512,7 @@ function SignYourSelf() {
       containerWH
     );
 
-    console.log("pdf", pdfBytes);
+    // console.log("pdf", pdfBytes);
     //function for call to embed signature in pdf and get digital signature pdf
     signPdfFun(pdfBytes, documentId);
 
@@ -514,7 +558,7 @@ function SignYourSelf() {
   };
 
   //function for set and update x and y postion after drag and drop signature tab
-  const handleStop = (event, dragElement) => {
+  const handleStop = (event, dragElement, type) => {
     if (isDragging && dragElement) {
       event.preventDefault();
       const containerRect = document
@@ -533,13 +577,24 @@ function SignYourSelf() {
           const getPosData = getXYdata;
           const addSign = getPosData.map((url, ind) => {
             if (url.key === dragKey) {
-              return {
-                ...url,
-                xPosition: dragElement.x,
-                yPosition: dragElement.y,
-                isDrag: true,
-                yBottom: ybottom
-              };
+              if (type === "initials") {
+                return {
+                  ...url,
+                  xPosition: dragElement.x,
+                  yPosition: dragElement.y,
+                  isDrag: true,
+                  yBottom: ybottom,
+                  SignUrl: initial
+                };
+              } else {
+                return {
+                  ...url,
+                  xPosition: dragElement.x,
+                  yPosition: dragElement.y,
+                  isDrag: true,
+                  yBottom: ybottom
+                };
+              }
             }
             return url;
           });
@@ -954,8 +1009,6 @@ function SignYourSelf() {
               <FieldsComponent
                 dataTut="reactourFirst"
                 pdfUrl={pdfUrl}
-                sign={sign}
-                stamp={stamp}
                 dragSignature={dragSignature}
                 signRef={signRef}
                 handleDivClick={handleDivClick}
@@ -973,6 +1026,7 @@ function SignYourSelf() {
                 isSignYourself={true}
                 addPositionOfSignature={addPositionOfSignature}
                 isMailSend={false}
+                initial={initial}
               />
             </div>
           ) : (

microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js

@@ -3,8 +3,6 @@ import RenderAllPdfPage from "./component/renderAllPdfPage";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
 import "../css/./signature.css";
-import sign from "../assests/sign3.png";
-import stamp from "../assests/stamp2.png";
 import { themeColor } from "../utils/ThemeColor/backColor";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -637,7 +635,7 @@ const TemplatePlaceholder = () => {
     if (signerPos.length !== signersdata.length) {
       setIsSendAlert(true);
     } else {
-      handleSaveTemplate();
+      // handleSaveTemplate();
     }
   };
   const handleSaveTemplate = async () => {
@@ -1149,8 +1147,6 @@ const TemplatePlaceholder = () => {
                   dataTut="reactourFirst"
                   dataTut2="reactourSecond"
                   pdfUrl={isMailSend}
-                  sign={sign}
-                  stamp={stamp}
                   dragSignature={dragSignature}
                   signRef={signRef}
                   handleDivClick={handleDivClick}
@@ -1206,8 +1202,6 @@ const TemplatePlaceholder = () => {
                   <div data-tut="reactourSecond">
                     <FieldsComponent
                       pdfUrl={isMailSend}
-                      sign={sign}
-                      stamp={stamp}
                       dragSignature={dragSignature}
                       signRef={signRef}
                       handleDivClick={handleDivClick}

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

@@ -1,10 +1,7 @@
 import React from "react";
-import { themeColor } from "../../utils/ThemeColor/backColor";
 import { getWidgetType } from "../../utils/Utils";
 
 function AllWidgets(props) {
-  const signStyle = "signatureBtn";
-
   return props.updateWidgets.map((item, ind) => {
     return (
       <div
@@ -17,53 +14,10 @@ function AllWidgets(props) {
             }
           }
         }}
-        className={signStyle}
         onMouseMove={props?.handleDivClick}
         onMouseDown={props?.handleMouseLeave}
-        style={{
-          // opacity: isDragSign ? 0.5 : 1,
-          boxShadow:
-            "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
-          marginLeft: `${props?.marginLeft}px`
-        }}
       >
-        {/* <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            marginLeft: "5px"
-          }}
-        >
-          <i
-            class="fa-sharp fa-solid fa-grip-vertical"
-            style={{ color: "#908d8d", fontSize: "13px" }}
-          ></i>
-          <span
-            style={{
-              fontWeight: "400",
-              fontSize: "15px",
-              // padding: "3px 20px 0px 20px",
-              color: "black",
-              marginLeft: "5px"
-            }}
-          >
-            {item.type}
-          </span>
-        </div>
-        <div
-          style={{
-            backgroundColor: themeColor(),
-            padding: "0 5px",
-            display: "flex",
-            alignItems: "center"
-          }}
-        >
-          <i
-            style={{ color: "white", fontSize: item.iconSize }}
-            className={item.icon}
-          ></i>
-        </div> */}
-        {getWidgetType(item)}
+        {item.ref && getWidgetType(item, props?.marginLeft)}
       </div>
     );
   });

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import BorderResize from "../component/borderResize";
 import PlaceholderBorder from "./placeholderBorder";
 import { Rnd } from "react-rnd";
@@ -6,7 +6,13 @@ import { defaultWidthHeight } from "../../utils/Utils";
 import PlaceholderType from "./placeholderType";
 
 function Placeholder(props) {
+  const [isDraggingEnabled, setDraggingEnabled] = useState(true);
+
   const handlePlaceholderClick = () => {
+    if (props.pos.type === "text") {
+      setDraggingEnabled(false);
+    }
+
     if (!props.data && !props.isDragging) {
       if (props.pos.type) {
         if (props.pos.type === "signature" || props.pos.type === "stamp") {
@@ -79,6 +85,11 @@ function Placeholder(props) {
       style={{
         border: "1px solid #007bff",
         borderRadius: "2px",
+        textAlign:
+          props.pos.type !== "name" &&
+          props.pos.type !== "company" &&
+          props.pos.type !== "job title" &&
+          "center",
         cursor:
           props.data && props.isNeedSign
             ? props.data?.signerObjId === props.signerObjId
@@ -88,18 +99,23 @@ function Placeholder(props) {
         zIndex: "1",
         background: props.data ? props.data.blockColor : "rgb(203 233 237)"
       }}
-      onDrag={() => props.handleTabDrag && props.handleTabDrag(props.pos.key)}
+      onDrag={() => {
+        setDraggingEnabled(true);
+        props.handleTabDrag && props.handleTabDrag(props.pos.key);
+      }}
       size={{
         width: props.posWidth(props.pos, props.isSignYourself),
         height: props.posHeight(props.pos, props.isSignYourself)
       }}
       onResizeStart={() => {
+        setDraggingEnabled(true);
         props.setIsResize && props.setIsResize(true);
       }}
       onResizeStop={() => {
         props.setIsResize && props.setIsResize(false);
       }}
-      disableDragging={props.isNeedSign || (props.isRecipient && true)}
+      disableDragging={!isDraggingEnabled}
+      // disableDragging={props.isNeedSign || (props.isRecipient && true)}
       onDragStop={(event, dragElement) =>
         props.handleStop &&
         props.handleStop(event, dragElement, props.signerObjId, props.pos.key)
@@ -227,6 +243,8 @@ function Placeholder(props) {
           isPlaceholder={props.isPlaceholder}
           signerObjId={props.signerObjId}
           handleUserName={props.handleUserName}
+          setDraggingEnabled={setDraggingEnabled}
+          pdfDetails={props.pdfDetails}
         />
       </div>
     </Rnd>

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

@@ -4,20 +4,21 @@ import { onChangeInput } from "../../utils/Utils";
 function PlaceholderType(props) {
   const [selectOption, setSelectOption] = useState("");
 
+  const handleInputBlur = () => {
+    props.setDraggingEnabled(true);
+  };
   switch (props.pos.type) {
     case "signature":
       return props.pos.SignUrl ? (
-        <div style={{ pointerEvents: "none" }}>
-          <img
-            alt="signimg"
-            src={props.pos.SignUrl}
-            style={{
-              width: "99%",
-              height: "100%",
-              objectFit: "contain"
-            }}
-          />
-        </div>
+        <img
+          alt="signimg"
+          src={props.pos.SignUrl}
+          style={{
+            width: "99%",
+            height: "100%",
+            objectFit: "contain"
+          }}
+        />
       ) : (
         <div
           style={{
@@ -35,17 +36,15 @@ function PlaceholderType(props) {
 
     case "stamp":
       return props.pos.SignUrl ? (
-        <div style={{ pointerEvents: "none" }}>
-          <img
-            alt="signimg"
-            src={props.pos.SignUrl}
-            style={{
-              width: "99%",
-              height: "100%",
-              objectFit: "contain"
-            }}
-          />
-        </div>
+        <img
+          alt="signimg"
+          src={props.pos.SignUrl}
+          style={{
+            width: "99%",
+            height: "100%",
+            objectFit: "contain"
+          }}
+        />
       ) : (
         <div
           style={{
@@ -65,8 +64,10 @@ function PlaceholderType(props) {
       return (
         <input
           className="inputPlaceholder"
+          style={{ outlineColor: "#007bff" }}
           type="checkbox"
           disabled={props.isPlaceholder}
+          onBlur={handleInputBlur}
           onChange={(e) =>
             onChangeInput(
               e.target.checked,
@@ -85,7 +86,9 @@ function PlaceholderType(props) {
         <input
           className="inputPlaceholder"
           type="text"
+          tabIndex="0"
           disabled={props.isPlaceholder}
+          onBlur={handleInputBlur}
           onChange={(e) =>
             onChangeInput(
               e.target.value,
@@ -132,7 +135,72 @@ function PlaceholderType(props) {
           {props.pos.widgetName ? props.pos.widgetName : props.pos.type}
         </div>
       );
-
+    case "initials":
+      return (
+        <img
+          alt="signimg"
+          src={props.pos.SignUrl}
+          style={{
+            width: "99%",
+            height: "100%",
+            objectFit: "contain"
+          }}
+        />
+      );
+    case "name":
+      return (
+        <div
+          style={{
+            color: "black",
+            fontSize: "14px"
+          }}
+        >
+          <span>{props.pos.widgetValue}</span>
+        </div>
+      );
+    case "company":
+      return (
+        <div
+          style={{
+            fontSize: "14px",
+            color: "black"
+          }}
+        >
+          <div>{props.pos.widgetValue}</div>
+        </div>
+      );
+    case "job title":
+      return (
+        <div
+          style={{
+            fontSize: "14px",
+            color: "black"
+          }}
+        >
+          <div>{props.pos.widgetValue}</div>
+        </div>
+      );
+    case "date":
+      return (
+        <input
+          className="inputPlaceholder"
+          style={{ outlineColor: "#007bff" }}
+          type="date"
+          disabled={props.isPlaceholder}
+          onBlur={handleInputBlur}
+          onChange={(e) =>
+            onChangeInput(
+              e.target.value,
+              props.pos.key,
+              props.xyPostion,
+              props.index,
+              props.setXyPostion,
+              props.data && props.data.signerObjId,
+              false
+            )
+          }
+        />
+      );
     default:
       return props.pos.SignUrl ? (
         <div style={{ pointerEvents: "none" }}>

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

@@ -1,58 +1,13 @@
 import React from "react";
-import stamp from "../../assests/stamp2.png";
-import sign from "../../assests/sign3.png";
-import { themeColor } from "../../utils/ThemeColor/backColor";
+import { getWidgetType, widgets } from "../../utils/Utils";
 
-function DragElement({ type, id }) {
-  const selectedId = id;
-   
-  return (
-    <div>
-      {selectedId === 3 ? (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            userSelect: "none",
-          }}
-        >
-          <img
-            alt="sign img"
-            style={{
-              width: "25px",
-              height: "23px",
-              background: themeColor(),
-            }}
-            src={sign}
-          />
-          <span style={{ color: themeColor(), fontSize: "12px" }}>
-            Signature
-          </span>
-        </div>
-      ) : (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            userSelect: "none",
-          }}
-        >
-          <img
-            alt="stamp img"
-            style={{
-              width: "25px",
-              height: "23px",
-              background: themeColor(),
-            }}
-            src={stamp}
-          />
-          <span style={{ color: themeColor(), fontSize: "12px" }}>Stamp</span>
-        </div>
-      )}
-    </div>
+function DragElement(item) {
+  const getWidgets = widgets;
+  const filterWidgetPreview = getWidgets.filter(
+    (data) => data.type === item?.text
   );
+
+  return <div>{getWidgetType(filterWidgetPreview[0])}</div>;
 }
 
 export default DragElement;

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

@@ -7,8 +7,6 @@ import { widgets } from "../../utils/Utils";
 
 function FieldsComponent({
   pdfUrl,
-  sign,
-  stamp,
   dragSignature,
   signRef,
   handleDivClick,
@@ -39,7 +37,8 @@ function FieldsComponent({
   signerPos,
   handleRoleChange,
   handleOnBlur,
-  title
+  title,
+  initial
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -69,14 +68,69 @@ function FieldsComponent({
     type: "BOX",
     item: {
       type: "BOX",
-      id: 2,
+      id: 7,
       text: "text"
     },
     collect: (monitor) => ({
       isDragText: !!monitor.isDragging()
     })
   });
-  const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
+  const [{ isDragInitial }, initials] = useDrag({
+    type: "BOX",
+    item: {
+      type: "BOX",
+      id: 8,
+      text: "initials"
+    },
+    collect: (monitor) => ({
+      isDragInitial: !!monitor.isDragging()
+    })
+  });
+  const [{ isDragName }, name] = useDrag({
+    type: "BOX",
+    item: {
+      type: "BOX",
+      id: 9,
+      text: "name"
+    },
+    collect: (monitor) => ({
+      isDragName: !!monitor.isDragging()
+    })
+  });
+  const [{ isDragCompany }, company] = useDrag({
+    type: "BOX",
+    item: {
+      type: "BOX",
+      id: 10,
+      text: "company"
+    },
+    collect: (monitor) => ({
+      isDragCompany: !!monitor.isDragging()
+    })
+  });
+  const [{ isDragJobtitle }, jobTitle] = useDrag({
+    type: "BOX",
+    item: {
+      type: "BOX",
+      id: 11,
+      text: "job title"
+    },
+    collect: (monitor) => ({
+      isDragJobtitle: !!monitor.isDragging()
+    })
+  });
+  const [{ isDragDate }, date] = useDrag({
+    type: "BOX",
+    item: {
+      type: "BOX",
+      id: 11,
+      text: "date"
+    },
+    collect: (monitor) => ({
+      isDragDate: !!monitor.isDragging()
+    })
+  });
+
   const isMobile = window.innerWidth < 767;
   const scrollContainerRef = useRef(null);
   const [widget, setWidget] = useState([]);
@@ -100,12 +154,27 @@ function FieldsComponent({
   };
 
   useEffect(() => {
-    const widgetRef = [dragSignature, dragStamp, dropdown, checkbox, text];
+    const widgetRef = [
+      dragSignature,
+      dragStamp,
+      dropdown,
+      checkbox,
+      text,
+      initials,
+      name,
+      company,
+      jobTitle,
+      date
+    ];
     const getWidgetArray = widgets;
     const newUpdateSigner = getWidgetArray.map((obj, ind) => {
       return { ...obj, ref: widgetRef[ind] };
     });
-    setWidget(newUpdateSigner);
+    const removeInitial = newUpdateSigner.filter(
+      (widgetData) => widgetData.type !== "initials"
+    );
+
+    setWidget(initial ? newUpdateSigner : removeInitial);
   }, []);
 
   const filterWidgets = widget.filter((data) => data.type !== "dropdown");
@@ -294,7 +363,7 @@ function FieldsComponent({
                   color: "rgb(140 142 149)",
                   position: "fixed",
                   left: "1%",
-                  bottom: "6%",
+                  bottom: "3%",
                   fontSize: "23px"
                 }}
                 onClick={() => handleScroll(-100)}
@@ -372,8 +441,8 @@ function FieldsComponent({
                 style={{
                   color: "rgb(140 142 149)",
                   position: "fixed",
-                  left: "95%",
-                  bottom: "6%",
+                  left: "93%",
+                  bottom: "3%",
                   fontSize: "23px"
                 }}
                 onClick={() => handleScroll(100)}

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

@@ -104,7 +104,6 @@ function RenderPdf({
     }
   };
   const posHeight = (pos, signYourself) => {
-    // console.log("signyourself",pos)
     let height;
     const posHeight = pos.Height;
     const defaultHeight = defaultWidthHeight(pos.type).height;
@@ -964,6 +963,7 @@ function RenderPdf({
                                   yPos={yPos}
                                   posWidth={posWidth}
                                   posHeight={posHeight}
+                                  pdfDetails={pdfDetails[0]}
                                 />
                               )
                             );
@@ -1468,7 +1468,9 @@ function RenderPdf({
                                     handleDeleteSign={handleDeleteSign}
                                     setIsStamp={setIsStamp}
                                     handleTabDrag={handleTabDrag}
-                                    handleStop={handleStop}
+                                    handleStop={(event, dragElement) =>
+                                      handleStop(event, dragElement, pos.type)
+                                    }
                                     handleSignYourselfImageResize={
                                       handleSignYourselfImageResize
                                     }
@@ -1484,6 +1486,7 @@ function RenderPdf({
                                     yPos={yPos}
                                     posWidth={posWidth}
                                     posHeight={posHeight}
+                                    pdfDetails={pdfDetails[0]}
                                   />
                                 )
                               );

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -1,8 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import axios from "axios";
 import "../css/./signature.css";
-import sign from "../assests/sign3.png";
-import stamp from "../assests/stamp2.png";
 import { themeColor } from "../utils/ThemeColor/backColor";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -1273,8 +1271,6 @@ function PlaceHolderSign() {
                   dataTut="reactourFirst"
                   dataTut2="reactourSecond"
                   pdfUrl={isMailSend}
-                  sign={sign}
-                  stamp={stamp}
                   dragSignature={dragSignature}
                   signRef={signRef}
                   handleDivClick={handleDivClick}
@@ -1321,8 +1317,6 @@ function PlaceHolderSign() {
                   <div data-tut="reactourSecond">
                     <FieldsComponent
                       pdfUrl={isMailSend}
-                      sign={sign}
-                      stamp={stamp}
                       dragSignature={dragSignature}
                       signRef={signRef}
                       handleDivClick={handleDivClick}

microfrontends/SignDocuments/src/css/signature.css

@@ -36,6 +36,7 @@
   font-size: 12px;
   border: 1px solid #007bff;
   border-radius: 2px;
+   
 }
 
 .inputPlaceholder:focus {
@@ -298,7 +299,6 @@
 .signYourselfBlock {
   padding: 0px;
   display: flex !important;
-  text-align: center !important;
   justify-content: center !important;
   align-items: center !important;
 }

microfrontends/SignDocuments/src/utils/Utils.js

@@ -12,7 +12,7 @@ export const onChangeInput = (
   signerObjId
 ) => {
   const isSigners = xyPostion.some((data) => data.signerPtr);
-  console.log("isSigner", isSigners);
+
   if (isSigners) {
     const filterSignerPos = xyPostion.filter(
       (data) => data.signerObjId === signerObjId
@@ -76,8 +76,8 @@ export const onChangeInput = (
 export const widgets = [
   {
     type: "signature",
-    icon: "fa-solid fa-signature",
-    iconSize: "16px"
+    icon: "fa-solid fa-pen-nib",
+    iconSize: "20px"
   },
   {
     type: "stamp",
@@ -92,53 +92,88 @@ export const widgets = [
   {
     type: "checkbox",
     icon: "fa-solid fa-square-check",
-    iconSize: "21px"
+    iconSize: "22px"
   },
   {
     type: "text",
     icon: "fa-solid fa-font",
     iconSize: "21px"
+  },
+  {
+    type: "initials",
+    icon: "fa-solid fa-signature",
+    iconSize: "15px"
+  },
+  {
+    type: "name",
+    icon: "fa-solid fa-user",
+    iconSize: "21px"
+  },
+  {
+    type: "company",
+    icon: "fa-solid fa-building",
+    iconSize: "24px"
+  },
+  {
+    type: "job title",
+    icon: "fa-solid fa-address-card",
+    iconSize: "16px"
+  },
+  {
+    type: "date",
+    icon: "fa-solid fa-calendar-days",
+    iconSize: "19px"
   }
 ];
 
-export const getWidgetType = (item) => {
+export const getWidgetType = (item, marginLeft) => {
   return (
     <>
       <div
+        className="signatureBtn"
         style={{
-          display: "flex",
-          alignItems: "center",
-          marginLeft: "5px"
+          // opacity: isDragSign ? 0.5 : 1,
+          boxShadow:
+            "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+          marginLeft: marginLeft && `${marginLeft}px`
         }}
       >
-        <i
-          class="fa-sharp fa-solid fa-grip-vertical"
-          style={{ color: "#908d8d", fontSize: "13px" }}
-        ></i>
-        <span
+        <div
           style={{
-            fontWeight: "400",
-            fontSize: "15px",
-            // padding: "3px 20px 0px 20px",
-            color: "black",
+            display: "flex",
+            alignItems: "center",
             marginLeft: "5px"
           }}
         >
-          {item.type}
-        </span>
-      </div>
-      <div
-        style={{
-          backgroundColor: themeColor(),
-          padding: "0 5px",
-          display: "flex",
-          alignItems: "center"
-        }}
-      >
-        <i
-          style={{ color: "white", fontSize: item.iconSize }}
-          className={item.icon}
-        ></i>
+          <i
+            className="fa-sharp fa-solid fa-grip-vertical"
+            style={{ color: "#908d8d", fontSize: "13px" }}
+          ></i>
+          <span
+            style={{
+              fontWeight: "400",
+              fontSize: "15px",
+              // padding: "3px 20px 0px 20px",
+              color: "black",
+              marginLeft: "5px"
+            }}
+          >
+            {item.type}
+          </span>
+        </div>
+        <div
+          style={{
+            backgroundColor: themeColor(),
+            padding: "0 5px",
+            display: "flex",
+            alignItems: "center"
+          }}
+        >
+          <i
+            style={{ color: "white", fontSize: item.iconSize }}
+            className={item.icon}
+          ></i>
+        </div>
       </div>
     </>
   );
@@ -178,6 +213,37 @@ export const defaultWidthHeight = (type) => {
         height: 22
       };
       return obj;
+    case "initials":
+      obj = {
+        width: 150,
+        height: 60
+      };
+      return obj;
+    case "name":
+      obj = {
+        width: 150,
+        height: 25
+      };
+      return obj;
+
+    case "company":
+      obj = {
+        width: 150,
+        height: 25
+      };
+      return obj;
+    case "job title":
+      obj = {
+        width: 150,
+        height: 25
+      };
+      return obj;
+    case "date":
+      obj = {
+        width: 100,
+        height: 20
+      };
+      return obj;
     default:
       obj = {
         width: 150,
@@ -704,7 +770,11 @@ export const multiSignEmbed = async (
 
     imgUrlList.forEach(async (imgData, id) => {
       let img;
-      if (imgData.type === "signature" || imgData.type === "stamp") {
+      if (
+        imgData.type === "signature" ||
+        imgData.type === "stamp" ||
+        imgData.type === "initials"
+      ) {
         if (
           (imgData.ImageType && imgData.ImageType === "image/png") ||
           imgData.ImageType === "image/jpeg"
@@ -800,13 +870,19 @@ export const multiSignEmbed = async (
         });
         checkBox.check();
         checkBox.enableReadOnly();
-      } else if (imgData.type === "text") {
+      } else if (
+        imgData.type === "text" ||
+        imgData.type === "name" ||
+        imgData.type === "company" ||
+        imgData.type === "job title" ||
+        imgData.type === "date"
+      ) {
         const font = await pdfDoc.embedFont("Helvetica");
         const fontSize = 12;
         const textContent = imgData.widgetValue;
         page.drawText(textContent, {
           x: xPos(imgData),
-          y: yPos(imgData),
+          y: yPos(imgData) + 10,
           size: fontSize,
           font,
           color: rgb(0, 0, 0)