From b99d8e6d6eaad9369528b554005bb1d6eb0797fc Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 14 Mar 2024 16:50:46 +0530
Subject: [PATCH] feat: add show/hide label in checkbox and radio widget

---
 .../components/pdf/DropdownWidgetOption.js    |  55 ++++---
 .../src/components/pdf/Placeholder.js         |  29 ++--
 .../src/components/pdf/PlaceholderBorder.js   |  27 +++-
 .../src/components/pdf/PlaceholderType.js     | 134 ++++++++++--------
 apps/OpenSign/src/constant/Utils.js           |  28 +++-
 apps/OpenSign/src/pages/Form.js               |   2 +-
 apps/OpenSign/src/pages/PdfRequestFiles.js    |   1 -
 apps/OpenSign/src/pages/PlaceHolderSign.js    |   9 +-
 apps/OpenSign/src/pages/SignyourselfPdf.js    |   8 +-
 .../OpenSign/src/pages/TemplatePlaceholder.js |  13 +-
 apps/OpenSign/src/styles/signature.css        |   2 +
 11 files changed, 194 insertions(+), 114 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 1d9b2f415..b4d3b1dd6 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -11,6 +11,7 @@ function DropdownWidgetOption(props) {
   const [maxCount, setMaxCount] = useState(0);
   const [dropdownName, setDropdownName] = useState(props.type);
   const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isHideLabel, setIsHideLabel] = useState(false);
   const [status, setStatus] = useState("required");
   const [defaultValue, setDefaultValue] = useState("");
   const statusArr = ["required", "optional"];
@@ -20,6 +21,7 @@ function DropdownWidgetOption(props) {
     setDropdownOptionList(["option-1", "option-2"]);
     setDropdownName(props.type);
     setIsReadOnly(false);
+    setIsHideLabel(false);
     setMinCount(0);
     setMaxCount(0);
     setDefaultCheckbox([]);
@@ -40,6 +42,7 @@ function DropdownWidgetOption(props) {
         props.currWidgetsDetails?.options?.validation?.maxRequiredCount
       );
       setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
+      setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
       setStatus(props.currWidgetsDetails?.options?.status || "required");
       setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
       setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
@@ -107,13 +110,15 @@ function DropdownWidgetOption(props) {
       null,
       null,
       status,
-      defaultData
+      defaultData,
+      isHideLabel
     );
     //  props.setShowDropdown(false);
     setDropdownOptionList(["option-1", "option-2"]);
     setDropdownName(props.type);
     //  props.setCurrWidgetsDetails({});
     setIsReadOnly(false);
+    setIsHideLabel(false);
     setMinCount(0);
     setMaxCount(0);
     setDefaultCheckbox([]);
@@ -154,20 +159,6 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div className="dropdownContainer">
-            {["checkbox", radioButtonWidget].includes(props.type) &&
-              !props.isSignYourself && (
-                <div>
-                  <input
-                    type="checkbox"
-                    checked={isReadOnly}
-                    onChange={(e) => {
-                      setIsReadOnly(e.target.checked);
-                    }}
-                  />
-
-                  <label style={{ marginLeft: "10px" }}>Is read only</label>
-                </div>
-              )}
             <label style={{ fontSize: "13px", fontWeight: "600" }}>
               Name<span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
@@ -358,8 +349,40 @@ function DropdownWidgetOption(props) {
                 </div>
               </>
             )}
-          </div>
+            {["checkbox", radioButtonWidget].includes(props.type) && (
+              <div className="flex flex-row gap-5 mt-2 items-center text-center">
+                {!props.isSignYourself && (
+                  <div>
+                    <input
+                      id="isreadonly"
+                      type="checkbox"
+                      checked={isReadOnly}
+                      onChange={(e) => {
+                        setIsReadOnly(e.target.checked);
+                      }}
+                    />
+                    <label className="ml-1" htmlFor="isreadonly">
+                      Is read only
+                    </label>
+                  </div>
+                )}
+                <div>
+                  <input
+                    id="ishidelabel"
+                    type="checkbox"
+                    checked={isHideLabel}
+                    onChange={(e) => {
+                      setIsHideLabel(e.target.checked);
+                    }}
+                  />
 
+                  <label className="ml-1" htmlFor="ishidelabel">
+                    Hide label
+                  </label>
+                </div>
+              </div>
+            )}
+          </div>
           <div
             style={{
               height: "1px",
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index ff0f199e4..81a645067 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -125,8 +125,6 @@ function Placeholder(props) {
     "DD MMM, YYYY",
     "DD MMMM, YYYY"
   ];
-
-  useEffect(() => {}, []);
   //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
@@ -463,12 +461,8 @@ function Placeholder(props) {
           )}
           <i
             className="fa-regular fa-copy signCopy"
-            onClick={(e) => {
-              handleCopyPlaceholder(e);
-            }}
-            onTouchEnd={(e) => {
-              handleCopyPlaceholder(e);
-            }}
+            onClick={(e) => handleCopyPlaceholder(e)}
+            onTouchEnd={(e) => handleCopyPlaceholder(e)}
             style={{
               color: "#188ae2",
               right:
@@ -526,7 +520,6 @@ function Placeholder(props) {
   return (
     <Rnd
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
-      //ref={nodeRef}
       key={props.pos.key}
       lockAspectRatio={
         props.pos.type !== textWidget &&
@@ -558,8 +551,8 @@ function Placeholder(props) {
       bounds="parent"
       className="signYourselfBlock"
       style={{
-        border: props.pos.type !== "checkbox" && "1px solid #007bff",
-        borderRadius: props.pos.type !== "checkbox" && "2px",
+        border: "1px solid #007bff",
+        borderRadius: "2px",
         textAlign:
           props.pos.type !== "name" &&
           props.pos.type !== "company" &&
@@ -579,17 +572,21 @@ function Placeholder(props) {
             : props?.pos?.zIndex
               ? props.pos.zIndex
               : "5",
-        background: props.data
-          ? props.data.blockColor
-          : props.pos.type !== "checkbox" && "rgb(203 233 237)"
+        background: props.data ? props.data.blockColor : "rgb(203 233 237)"
       }}
       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)
+        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)
       }}
       onResizeStart={() => {
         setDraggingEnabled(true);
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
index 996d1332a..22907f296 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
@@ -13,6 +13,24 @@ function PlaceholderBorder(props) {
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
   const defaultHeight = defaultWidthHeight(props.pos.type).height;
 
+  const handleMinWidth = () => {
+    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
+      return "120%";
+    } else {
+      return props.pos.Width
+        ? props.pos.Width + getResizeBorderExtraWidth
+        : defaultWidth + getResizeBorderExtraWidth;
+    }
+  };
+  const handleMinHeight = () => {
+    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
+      return "120%";
+    } else {
+      return props.pos.Height
+        ? props.pos.Height + getResizeBorderExtraWidth
+        : defaultHeight + getResizeBorderExtraWidth;
+    }
+  };
   return (
     <div
       onMouseEnter={props?.setDraggingEnabled(true)}
@@ -20,13 +38,8 @@ function PlaceholderBorder(props) {
       style={{
         borderColor: themeColor,
         borderStyle: "dashed",
-
-        width: props.pos.Width
-          ? props.pos.Width + getResizeBorderExtraWidth
-          : defaultWidth + getResizeBorderExtraWidth,
-        height: props.pos.Height
-          ? props.pos.Height + getResizeBorderExtraWidth
-          : defaultHeight + getResizeBorderExtraWidth,
+        minWidth: handleMinWidth(),
+        minHeight: handleMinHeight(),
         borderWidth: "0.2px",
         overflow: "hidden"
       }}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 7d10c3ef4..71614bd8b 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -135,9 +135,6 @@ function PlaceholderType(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.pos]);
 
-  const dateValue = (value) => {
-    return <span>{value}</span>;
-  };
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
       className="inputPlaceholder"
@@ -145,7 +142,7 @@ function PlaceholderType(props) {
       onClick={onClick}
       ref={ref}
     >
-      {dateValue(value)}
+      {value}
       <i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
     </div>
   ));
@@ -277,7 +274,6 @@ function PlaceholderType(props) {
       isRadio
     );
   };
-
   //function to set onchange date
   const handleOnDateChange = (date) => {
     props.setStartDate(date);
@@ -336,46 +332,54 @@ function PlaceholderType(props) {
         <div style={{ zIndex: props.isSignYourself && "99" }}>
           {props.pos.options?.values?.map((data, ind) => {
             return (
-              <input
-                key={ind}
-                style={{
-                  width: props.pos.Width,
-                  display: "flex",
-                  justifyContent: "center",
-                  marginBottom: "6px",
-                  marginTop: "5px"
-                }}
-                onBlur={handleInputBlur}
-                disabled={
-                  props.isNeedSign &&
-                  (props.pos.options?.isReadOnly ||
-                    props.data?.signerObjId !== props.signerObjId)
-                }
-                type="checkbox"
-                checked={selectCheckbox(ind)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    if (!props.isPlaceholder) {
-                      const maxRequired =
-                        props.pos.options?.validation?.maxRequiredCount;
-                      const maxCountInt = maxRequired && parseInt(maxRequired);
+              <div key={ind} className="flex items-center gap-1 min-w-max">
+                <input
+                  id={data}
+                  style={{
+                    width: props.pos.Width,
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: "6px",
+                    marginTop: "5px"
+                  }}
+                  onBlur={handleInputBlur}
+                  disabled={
+                    props.isNeedSign &&
+                    (props.pos.options?.isReadOnly ||
+                      props.data?.signerObjId !== props.signerObjId)
+                  }
+                  type="checkbox"
+                  checked={selectCheckbox(ind)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      if (!props.isPlaceholder) {
+                        const maxRequired =
+                          props.pos.options?.validation?.maxRequiredCount;
+                        const maxCountInt =
+                          maxRequired && parseInt(maxRequired);
 
-                      if (maxCountInt > 0) {
-                        if (
-                          selectedCheckbox &&
-                          selectedCheckbox?.length <= maxCountInt - 1
-                        ) {
+                        if (maxCountInt > 0) {
+                          if (
+                            selectedCheckbox &&
+                            selectedCheckbox?.length <= maxCountInt - 1
+                          ) {
+                            handleCheckboxValue(e.target.checked, ind);
+                          }
+                        } else {
                           handleCheckboxValue(e.target.checked, ind);
                         }
-                      } else {
-                        handleCheckboxValue(e.target.checked, ind);
                       }
+                    } else {
+                      handleCheckboxValue(e.target.checked, ind);
                     }
-                  } else {
-                    handleCheckboxValue(e.target.checked, ind);
-                  }
-                }}
-              />
+                  }}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <label htmlFor={data} className="text-xs">
+                    {data}
+                  </label>
+                )}
+              </div>
             );
           })}
         </div>
@@ -706,28 +710,38 @@ function PlaceholderType(props) {
         <div>
           {props.pos.options?.values.map((data, ind) => {
             return (
-              <input
+              <div
                 key={ind}
-                style={{
-                  width: props.pos.Width,
-                  display: "flex",
-                  justifyContent: "center",
-                  marginBottom: "6px",
-                  marginTop: "5px"
-                }}
-                type="radio"
-                disabled={
-                  props.isNeedSign &&
-                  (props.pos.options?.isReadOnly ||
-                    props.data?.signerObjId !== props.signerObjId)
-                }
-                checked={handleRadioCheck(data)}
-                onChange={(e) => {
-                  if (!props.isPlaceholder) {
-                    handleCheckRadio(e.target.checked, data);
+                className="flex flex-row items-center gap-1 min-w-max"
+              >
+                <input
+                  id={data}
+                  style={{
+                    width: props.pos.Width,
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: "6px",
+                    marginTop: "5px"
+                  }}
+                  type="radio"
+                  disabled={
+                    props.isNeedSign &&
+                    (props.pos.options?.isReadOnly ||
+                      props.data?.signerObjId !== props.signerObjId)
                   }
-                }}
-              />
+                  checked={handleRadioCheck(data)}
+                  onChange={(e) => {
+                    if (!props.isPlaceholder) {
+                      handleCheckRadio(e.target.checked, data);
+                    }
+                  }}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <label htmlFor={data} className="text-xs">
+                    {data}
+                  </label>
+                )}
+              </div>
             );
           })}
         </div>
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 7e26226c2..ee89a2666 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -238,7 +238,7 @@ export const addWidgetOptions = (type) => {
     case "stamp":
       return defaultOpt;
     case "checkbox":
-      return defaultOpt;
+      return { defaultOpt, options: { isReadOnly: false, isHideLabel: false } };
     case textInputWidget:
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "initials":
@@ -262,7 +262,12 @@ export const addWidgetOptions = (type) => {
     case "dropdown":
       return defaultOpt;
     case radioButtonWidget:
-      return { ...defaultOpt, values: [] };
+      return {
+        ...defaultOpt,
+        values: [],
+        isReadOnly: false,
+        isHideLabel: false
+      };
     case textWidget:
       return defaultOpt;
     default:
@@ -1176,6 +1181,14 @@ export const multiSignEmbed = async (
               yPosition = yPos(position, ind);
               addYPosition = height + 8;
             }
+            if (!position?.options?.isHideLabel) {
+              // below line of code is used to embed label with radio button in pdf
+              page.drawText(item, {
+                x: xPos(position) + 15,
+                y: yPosition + 2,
+                size: height
+              });
+            }
             checkbox.addToPage(page, {
               x: xPos(position),
               y: yPosition,
@@ -1270,7 +1283,8 @@ export const multiSignEmbed = async (
           x: xPos(position),
           y: yPos(position),
           width: scaleWidth,
-          height: scaleHeight
+          height: scaleHeight,
+          borderWidth: 0
         });
         dropdown.enableReadOnly();
       } else if (position.type === radioButtonWidget) {
@@ -1287,6 +1301,14 @@ export const multiSignEmbed = async (
             yPosition = yPos(position);
           }
 
+          if (!position?.options?.isHideLabel) {
+            // below line of code is used to embed label with radio button in pdf
+            page.drawText(data, {
+              x: xPos(position) + 15,
+              y: yPosition + 2,
+              size: 11
+            });
+          }
           radioGroup.addOptionToPage(data, page, {
             x: xPos(position),
             y: yPosition,
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index bd081ef12..4aa442bda 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -413,7 +413,7 @@ const Forms = (props) => {
               type="submit"
               disabled={isSubmit}
             >
-              Submit
+              Next
             </button>
             <div
               className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 1025bdfc1..bdb017394 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -647,7 +647,6 @@ function PdfRequestFiles() {
       });
     }
   }
-  console.log("signer", signerPos);
   //function for update TourStatus
   const closeTour = async () => {
     setWidgetsTour(false);
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 7fe365374..35351be3e 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -1055,7 +1055,8 @@ function PlaceHolderSign() {
     addOption,
     deleteOption,
     status,
-    defaultValue
+    defaultValue,
+    isHideLabel
   ) => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -1093,7 +1094,8 @@ function PlaceHolderSign() {
                     ...position.options,
                     name: dropdownName,
                     values: dropdownOptions,
-                    isReadOnly: isReadOnly,
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false,
                     defaultValue: defaultValue
                   }
                 };
@@ -1125,7 +1127,8 @@ function PlaceHolderSign() {
                       maxRequiredCount: maxCount
                     },
                     defaultValue: defaultValue,
-                    isReadOnly: isReadOnly
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 2dd3ec38b..1d4803e9f 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -870,7 +870,10 @@ function SignYourSelf() {
     maxCount,
     isReadOnly,
     addOption,
-    deleteOption
+    deleteOption,
+    status,
+    defaultValue,
+    isHideLabel
   ) => {
     const getPageNumer = xyPostion.filter(
       (data) => data.pageNumber === pageNumber
@@ -902,7 +905,8 @@ function SignYourSelf() {
                 ...position.options,
                 name: dropdownName,
                 values: dropdownOptions,
-                isReadOnly: isReadOnly
+                isReadOnly: isReadOnly,
+                isHideLabel: isHideLabel || false
               }
             };
           }
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index 76b5ef7ac..dc71aaa9c 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -976,7 +976,8 @@ const TemplatePlaceholder = () => {
     addOption,
     deleteOption,
     status,
-    defaultValue
+    defaultValue,
+    isHideLabel
   ) => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -996,7 +997,6 @@ const TemplatePlaceholder = () => {
               if (addOption) {
                 return {
                   ...position,
-
                   Height: position.Height
                     ? position.Height + 15
                     : defaultWidthHeight(widgetType).height + 15
@@ -1016,7 +1016,9 @@ const TemplatePlaceholder = () => {
                     name: dropdownName,
                     values: dropdownOptions,
                     status: status,
-                    defaultValue: defaultValue
+                    defaultValue: defaultValue,
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1046,8 +1048,9 @@ const TemplatePlaceholder = () => {
                       minRequiredCount: minCount,
                       maxRequiredCount: maxCount
                     },
-                    isReadOnly: isReadOnly,
-                    defaultValue: defaultValue
+                    isReadOnly: isReadOnly || false,
+                    defaultValue: defaultValue,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index 8229cdb05..47c3d9e73 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -339,6 +339,8 @@
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
+  min-width:max-content;
+  min-height: max-content;
 }
 
 .finishBtn {