fix: only add widget on first pageand it show unnecessary on all pages, unable to select widgets in tablet view

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

@@ -5,7 +5,7 @@ import { Rnd } from "react-rnd";
 import {
   defaultWidthHeight,
   handleCopyNextToWidget,
-  isMobile,
+  isTabAndMobile,
   onChangeInput,
   radioButtonWidget,
   textInputWidget,
@@ -764,7 +764,7 @@ function Placeholder(props) {
           placeholderBorder={placeholderBorder}
         />
       )}
-      {isMobile ? (
+      {isTabAndMobile ? (
         <div
           // className="sm:inline-block md:inline-block lg:hidden "
           style={{
@@ -783,6 +783,7 @@ function Placeholder(props) {
             zIndex: "10"
           }}
           onTouchEnd={() => handleOnClickPlaceholder()}
+          onClick={() => handleOnClickPlaceholder()}
         >
           {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
 

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

@@ -27,7 +27,6 @@ function RenderPdf({
   numPages,
   pageDetails,
   pdfRequest,
-  setCurrentSigner,
   signerObjectId,
   signedSigners,
   setPdfLoadFail,
@@ -122,7 +121,7 @@ function RenderPdf({
   };
 
   //function for render placeholder block over pdf document
-  const checkSignedSignes = (data) => {
+  const checkSignedSigners = (data) => {
     let checkSign = [];
     //condition to handle quick send flow and using normal request sign flow
     checkSign = signedSigners
@@ -131,9 +130,6 @@ function RenderPdf({
             sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
         )
       : [];
-    if (data.signerObjId === signerObjectId) {
-      setCurrentSigner(true);
-    }
     const handleAllUserName = (Id, Role, type) => {
       return (
         <React.Fragment>
@@ -260,7 +256,7 @@ function RenderPdf({
               ? signerPos.map((data, key) => {
                   return (
                     <React.Fragment key={key}>
-                      {checkSignedSignes(data)}
+                      {checkSignedSigners(data)}
                     </React.Fragment>
                   );
                 })
@@ -441,15 +437,15 @@ function RenderPdf({
             {isLoadPdf &&
               containerWH?.width &&
               pdfOriginalWH?.width &&
-              (pdfRequest
+              (pdfRequest //pdf request sign flow
                 ? signerPos?.map((data, key) => {
                     return (
                       <React.Fragment key={key}>
-                        {checkSignedSignes(data)}
+                        {checkSignedSigners(data)}
                       </React.Fragment>
                     );
                   })
-                : placeholder
+                : placeholder //placeholder and template flow
                   ? signerPos.map((data, ind) => {
                       return (
                         <React.Fragment key={ind}>
@@ -516,52 +512,56 @@ function RenderPdf({
                       );
                     })
                   : xyPostion.map((data, ind) => {
+                      // signyourself flow
                       return (
                         <React.Fragment key={ind}>
-                          {data.pos.map((pos) => {
-                            return (
-                              <React.Fragment key={pos.key}>
-                                <Placeholder
-                                  pos={pos}
-                                  setIsPageCopy={setIsPageCopy}
-                                  setSignKey={setSignKey}
-                                  handleDeleteSign={handleDeleteSign}
-                                  setIsStamp={setIsStamp}
-                                  handleTabDrag={handleTabDrag}
-                                  handleStop={(event, dragElement) =>
-                                    handleStop(event, dragElement, pos.type)
-                                  }
-                                  handleSignYourselfImageResize={
-                                    handleSignYourselfImageResize
-                                  }
-                                  index={index}
-                                  xyPostion={xyPostion}
-                                  setXyPostion={setXyPostion}
-                                  setIsSignPad={setIsSignPad}
-                                  isShowBorder={true}
-                                  isSignYourself={true}
-                                  posWidth={posWidth}
-                                  posHeight={posHeight}
-                                  pdfDetails={pdfDetails[0]}
-                                  isDragging={isDragging}
-                                  setIsInitial={setIsInitial}
-                                  setWidgetType={setWidgetType}
-                                  setSelectWidgetId={setSelectWidgetId}
-                                  selectWidgetId={selectWidgetId}
-                                  handleUserName={handleUserName}
-                                  setIsCheckbox={setIsCheckbox}
-                                  setValidateAlert={setValidateAlert}
-                                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                                  handleTextSettingModal={
-                                    handleTextSettingModal
-                                  }
-                                  scale={scale}
-                                  containerWH={containerWH}
-                                  pdfOriginalWH={pdfOriginalWH}
-                                />
-                              </React.Fragment>
-                            );
-                          })}
+                          {data.pageNumber === pageNumber &&
+                            data.pos.map((pos) => {
+                              return (
+                                <React.Fragment key={pos.key}>
+                                  <Placeholder
+                                    pos={pos}
+                                    setIsPageCopy={setIsPageCopy}
+                                    setSignKey={setSignKey}
+                                    handleDeleteSign={handleDeleteSign}
+                                    setIsStamp={setIsStamp}
+                                    handleTabDrag={handleTabDrag}
+                                    handleStop={(event, dragElement) =>
+                                      handleStop(event, dragElement, pos.type)
+                                    }
+                                    handleSignYourselfImageResize={
+                                      handleSignYourselfImageResize
+                                    }
+                                    index={index}
+                                    xyPostion={xyPostion}
+                                    setXyPostion={setXyPostion}
+                                    setIsSignPad={setIsSignPad}
+                                    isShowBorder={true}
+                                    isSignYourself={true}
+                                    posWidth={posWidth}
+                                    posHeight={posHeight}
+                                    pdfDetails={pdfDetails[0]}
+                                    isDragging={isDragging}
+                                    setIsInitial={setIsInitial}
+                                    setWidgetType={setWidgetType}
+                                    setSelectWidgetId={setSelectWidgetId}
+                                    selectWidgetId={selectWidgetId}
+                                    handleUserName={handleUserName}
+                                    setIsCheckbox={setIsCheckbox}
+                                    setValidateAlert={setValidateAlert}
+                                    setCurrWidgetsDetails={
+                                      setCurrWidgetsDetails
+                                    }
+                                    handleTextSettingModal={
+                                      handleTextSettingModal
+                                    }
+                                    scale={scale}
+                                    containerWH={containerWH}
+                                    pdfOriginalWH={pdfOriginalWH}
+                                  />
+                                </React.Fragment>
+                              );
+                            })}
                         </React.Fragment>
                       );
                     }))}

apps/OpenSign/src/constant/Utils.js

@@ -11,6 +11,7 @@ import printModule from "print-js";
 export const fontsizeArr = [7, 8, 9, 10, 11, 12, 13, 14, 15, 18];
 export const fontColorArr = ["red", "black", "blue", "yellow"];
 export const isMobile = window.innerWidth < 767;
+export const isTabAndMobile = window.innerWidth < 1023;
 export const textInputWidget = "text input";
 export const textWidget = "text";
 export const radioButtonWidget = "radio button";

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -332,6 +332,13 @@ function PdfRequestFiles() {
           message:
             "You have successfully signed the document. You can download or print a copy of the partially signed document. A copy of the digitally signed document will be sent to the owner over email once it is signed by all signers."
         });
+      } else {
+        const checkCurrentUser = documentData[0].Placeholders.find(
+          (data) => data.signerObjId === currUserId
+        );
+        if (checkCurrentUser) {
+          setCurrentSigner(true);
+        }
       }
 
       const isGuestSign = location.pathname.includes("/load/");
@@ -1728,7 +1735,6 @@ function PdfRequestFiles() {
                           pdfRequest={true}
                           signerObjectId={signerObjectId}
                           signedSigners={signedSigners}
-                          setCurrentSigner={setCurrentSigner}
                           setPdfLoadFail={setPdfLoadFail}
                           pdfLoadFail={pdfLoadFail}
                           setSignerPos={setSignerPos}

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -923,7 +923,6 @@ function SignYourSelf() {
     const divRect = e.currentTarget.getBoundingClientRect();
     const mouseX = e.clientX - divRect.left;
     const mouseY = e.clientY - divRect.top;
-
     const xyPosition = {
       xPos: mouseX,
       yPos: mouseY