From 987a4bd04c9d8c5fb30ad1c89835feb35acc97e7 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Thu, 15 Feb 2024 19:55:30 +0530
Subject: [PATCH] feat: remove widgets border on click pdf

---
 .../src/Component/SignYourselfPdf.js          |  4 +++
 .../src/Component/TemplatePlaceholder.js      |  5 +++-
 .../Component/WidgetComponent/placeholder.js  | 28 ++++++++++++++-----
 .../WidgetComponent/placeholderType.js        | 12 +++++++-
 .../src/Component/component/renderPdf.js      | 22 ++++++++++++---
 .../src/Component/placeHolderSign.js          |  5 ++++
 6 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index f7950d488..0279cfd1b 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -81,6 +81,7 @@ function SignYourSelf() {
   const [contractName, setContractName] = useState("");
   const [containerWH, setContainerWH] = useState({});
   const [isPageCopy, setIsPageCopy] = useState(false);
+  const [selectWidgetId, setSelectWidgetId] = useState("");
   const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
     status: false
   });
@@ -469,6 +470,7 @@ function SignYourSelf() {
       setIsInitial(true);
     }
     setWidgetType(dragTypeValue);
+    setSelectWidgetId(key);
   };
 
   //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
@@ -1017,6 +1019,8 @@ function SignYourSelf() {
                   setIsPageCopy={setIsPageCopy}
                   setIsInitial={setIsInitial}
                   setWidgetType={setWidgetType}
+                  setSelectWidgetId={setSelectWidgetId}
+                  selectWidgetId={selectWidgetId}
                 />
               )}
             </div>
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
index d43454c70..c525d23cb 100644
--- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
@@ -81,7 +81,7 @@ const TemplatePlaceholder = () => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [widgetType, setWidgetType] = useState("");
   const [isRadio, setIsRadio] = useState(false);
-  const [validateError, setValidateError] = useState("");
+  const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isValidate, setIsValidate] = useState(false);
   const [textValidate, setTextValidate] = useState("");
   const [pdfLoadFail, setPdfLoadFail] = useState({
@@ -500,6 +500,7 @@ const TemplatePlaceholder = () => {
         setCurrWidgetsDetails("");
         setWidgetType(dragTypeValue);
         setSignKey(key);
+        setSelectWidgetId(key);
 
         setIsMailSend(false);
       } else {
@@ -1405,6 +1406,8 @@ const TemplatePlaceholder = () => {
                     setIsRadio={setIsRadio}
                     setIsCheckboxRequired={setIsCheckboxRequired}
                     setIsValidate={setIsValidate}
+                    setSelectWidgetId={setSelectWidgetId}
+                    selectWidgetId={selectWidgetId}
                   />
                 )}
               </div>
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
index f0dde8d12..e11ae1423 100644
--- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
@@ -99,6 +99,7 @@ function Placeholder(props) {
 
   //onclick placeholder function to open signature pad
   const handlePlaceholderClick = () => {
+    props.setSelectWidgetId(props.pos.key);
     const widgetTypeExist = [
       "text",
       "checkbox",
@@ -133,6 +134,13 @@ function Placeholder(props) {
         props.setSignKey(props.pos.key);
         props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false);
       }
+    } else if (
+      props.isPlaceholder &&
+      !props.isDragging &&
+      props.pos.type !== "label"
+    ) {
+      props.handleLinkUser(props.data.Id);
+      props.setUniqueId(props.data.Id);
     } else if (!props.pos.type) {
       if (
         !props.pos.type &&
@@ -380,7 +388,7 @@ function Placeholder(props) {
 
   return (
     <Rnd
-      //   ref={nodeRef}
+      //ref={nodeRef}
       key={props.pos.key}
       lockAspectRatio={
         props.pos.Width
@@ -401,7 +409,9 @@ function Placeholder(props) {
               props.pos.type !== "radio"
               ? true
               : false
-            : props.pos.type !== "radio" && true,
+            : props.pos.type !== "radio" &&
+              props.pos.key === props.selectWidgetId &&
+              true,
         bottomLeft: false,
         topLeft: false
       }}
@@ -480,7 +490,9 @@ function Placeholder(props) {
             : props.isSignYourself && handlePlaceholderClick();
       }}
     >
-      {props.isShowBorder && props.pos.type !== "radio" ? (
+      {props.isShowBorder &&
+      props.pos.type !== "radio" &&
+      props.pos.key === props.selectWidgetId ? (
         <BorderResize
           right={
             (props.pos.type === "checkbox" || props.pos.type === "radio") &&
@@ -503,10 +515,11 @@ function Placeholder(props) {
           <></>
         )
       ) : (
-        props.pos.type !== "radio" && <BorderResize />
+        props.pos.type !== "radio" &&
+        props.pos.key === props.selectWidgetId && <BorderResize />
       )}
 
-      {props.isShowBorder && (
+      {props.isShowBorder && props.pos.key === props.selectWidgetId && (
         <PlaceholderBorder
           setDraggingEnabled={setDraggingEnabled}
           pos={props.pos}
@@ -531,7 +544,8 @@ function Placeholder(props) {
                 : props.isSignYourself && handlePlaceholderClick();
           }}
         >
-          <PlaceholderIcon />
+          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+
           <PlaceholderType
             pos={props.pos}
             xyPostion={props.xyPostion}
@@ -556,7 +570,7 @@ function Placeholder(props) {
         </div>
       ) : (
         <>
-          <PlaceholderIcon />
+          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
 
           <PlaceholderType
             pos={props.pos}
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
index 1543ed554..27dd78b5d 100644
--- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
@@ -254,7 +254,8 @@ function PlaceholderType(props) {
         />
       );
     case "text":
-      return (
+      return props.isSignYourself ||
+        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
         <input
           className="inputPlaceholder"
           ref={inputRef}
@@ -287,6 +288,15 @@ function PlaceholderType(props) {
             );
           }}
         />
+      ) : (
+        <div
+          style={{
+            color: "black",
+            fontSize: calculateFontSize()
+          }}
+        >
+          <span>{props.pos.type}</span>
+        </div>
       );
     case "dropdown":
       return props.data?.signerObjId === props.signerObjId ? (
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index 18a40bbf1..bd1dba0f9 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -21,7 +21,7 @@ function RenderPdf({
   drop,
   signerPos,
   successEmail,
-  nodeRef,
+
   handleTabDrag,
   handleStop,
   isDragging,
@@ -31,7 +31,7 @@ function RenderPdf({
   setSignKey,
   pdfDetails,
   xyPostion,
-  pdfRef,
+
   pdfUrl,
   numPages,
   pageDetails,
@@ -47,7 +47,7 @@ function RenderPdf({
   index,
   containerWH,
   setIsResize,
-  setZIndex,
+
   handleLinkUser,
   setUniqueId,
   signersdata,
@@ -60,7 +60,9 @@ function RenderPdf({
   setWidgetType,
   setValidateAlert,
   setIsRadio,
-  setCurrWidgetsDetails
+  setCurrWidgetsDetails,
+  setSelectWidgetId,
+  selectWidgetId
 }) {
   const isMobile = window.innerWidth < 767;
   const newWidth = containerWH.width;
@@ -369,6 +371,8 @@ function RenderPdf({
                                         setCurrWidgetsDetails={
                                           setCurrWidgetsDetails
                                         }
+                                        setSelectWidgetId={setSelectWidgetId}
+                                        selectWidgetId={selectWidgetId}
                                       />
                                     </React.Fragment>
                                   );
@@ -413,6 +417,8 @@ function RenderPdf({
                                   isDragging={isDragging}
                                   setIsInitial={setIsInitial}
                                   setWidgetType={setWidgetType}
+                                  setSelectWidgetId={setSelectWidgetId}
+                                  selectWidgetId={selectWidgetId}
                                 />
                               )
                             );
@@ -539,6 +545,8 @@ function RenderPdf({
                                           setCurrWidgetsDetails={
                                             setCurrWidgetsDetails
                                           }
+                                          setSelectWidgetId={setSelectWidgetId}
+                                          selectWidgetId={selectWidgetId}
                                         />
                                       </React.Fragment>
                                     );
@@ -586,6 +594,8 @@ function RenderPdf({
                                       isDragging={isDragging}
                                       setIsInitial={setIsInitial}
                                       setWidgetType={setWidgetType}
+                                      setSelectWidgetId={setSelectWidgetId}
+                                      selectWidgetId={selectWidgetId}
                                     />
                                   </React.Fragment>
                                 )
@@ -606,6 +616,10 @@ function RenderPdf({
               }}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
+              onClick={() => {
+                console.log("click on pdf");
+                setSelectWidgetId("");
+              }}
               // ref={pdfRef}
               file={
                 pdfUrl
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 0cefd6172..7f77b71d1 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -101,6 +101,7 @@ function PlaceHolderSign() {
   const [isUiLoading, setIsUiLoading] = useState(false);
   const [isRadio, setIsRadio] = useState(false);
   const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
+  const [selectWidgetId, setSelectWidgetId] = useState("");
 
   const color = [
     "#93a3db",
@@ -427,6 +428,7 @@ function PlaceHolderSign() {
       }
 
       if (signer && dragTypeValue !== "label") {
+        setSelectWidgetId(key);
         let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
 
         const { blockColor, Role } = signer;
@@ -499,6 +501,7 @@ function PlaceHolderSign() {
         setWidgetType(dragTypeValue);
         setSignKey(key);
       } else {
+        setSelectWidgetId(key);
         let filterSignerPos = signerPos.filter(
           (data) => data.Role === "prefill"
         );
@@ -1552,6 +1555,8 @@ function PlaceHolderSign() {
                     setWidgetType={setWidgetType}
                     setIsRadio={setIsRadio}
                     setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    setSelectWidgetId={setSelectWidgetId}
+                    selectWidgetId={selectWidgetId}
                   />
                 )}
               </div>