From 6004522d5cdba5efdeb24023abab08a6b7ab6793 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 13 Mar 2024 16:36:03 +0530
Subject: [PATCH] feat: change radio widgets name radio to radio button

---
 .../components/pdf/DropdownWidgetOption.js    |  9 ++--
 .../src/components/pdf/Placeholder.js         | 43 ++++++++++++-------
 .../src/components/pdf/PlaceholderBorder.js   |  3 +-
 .../src/components/pdf/PlaceholderType.js     |  3 +-
 .../src/components/pdf/WidgetComponent.js     | 17 +++++---
 apps/OpenSign/src/constant/Utils.js           | 11 ++---
 apps/OpenSign/src/pages/PdfRequestFiles.js    | 11 +++--
 apps/OpenSign/src/pages/PlaceHolderSign.js    |  9 ++--
 .../OpenSign/src/pages/TemplatePlaceholder.js |  9 ++--
 9 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 1d8a075cf..1d9b2f415 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
+import { radioButtonWidget } from "../../constant/Utils";
 function DropdownWidgetOption(props) {
   const [dropdownOptionList, setDropdownOptionList] = useState([
     "option-1",
@@ -143,7 +144,7 @@ function DropdownWidgetOption(props) {
       //   styleClass={"dropdownModal"}
       isOpen={props.showDropdown}
       title={props.title}
-      closeOff={true}
+      showClose={false}
     >
       <div style={{ height: "100%", padding: 20 }}>
         <form
@@ -153,7 +154,7 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div className="dropdownContainer">
-            {["checkbox", "radio"].includes(props.type) &&
+            {["checkbox", radioButtonWidget].includes(props.type) &&
               !props.isSignYourself && (
                 <div>
                   <input
@@ -285,7 +286,7 @@ function DropdownWidgetOption(props) {
                 </>
               )}
             </div>
-            {["dropdown", "radio"].includes(props.type) && (
+            {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
                 <label
                   style={{
@@ -320,7 +321,7 @@ function DropdownWidgetOption(props) {
                 </select>
               </>
             )}
-            {props.type !== "checkbox" && props.type !== "radio" && (
+            {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
                 <div
                   style={{
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index 9ab841933..719ed77a1 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -6,6 +6,7 @@ import {
   defaultWidthHeight,
   isMobile,
   onChangeInput,
+  radioButtonWidget,
   textInputWidget,
   textWidget
 } from "../../constant/Utils";
@@ -232,7 +233,7 @@ function Placeholder(props) {
 
   //function to set state value of onclick on widget's setting icon
   const handleWidgetsOnclick = () => {
-    if (props.pos.type === "radio") {
+    if (props.pos.type === radioButtonWidget) {
       props.setIsRadio(true);
     } else if (props.pos.type === "dropdown") {
       props?.setShowDropdown(true);
@@ -335,10 +336,14 @@ function Placeholder(props) {
                     className="fa-solid fa-gear settingIcon"
                     style={{
                       color: "#188ae2",
-                      right: ["checkbox", "radio"].includes(props.pos.type)
+                      right: ["checkbox", radioButtonWidget].includes(
+                        props.pos.type
+                      )
                         ? "24px"
                         : "47px",
-                      top: ["checkbox", "radio"].includes(props.pos.type)
+                      top: ["checkbox", radioButtonWidget].includes(
+                        props.pos.type
+                      )
                         ? "-28px"
                         : "-19px"
                     }}
@@ -364,12 +369,12 @@ function Placeholder(props) {
                     color: "#188ae2",
                     right:
                       props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
+                      props.pos.type === radioButtonWidget
                         ? "8px"
                         : "32px",
                     top:
                       props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
+                      props.pos.type === radioButtonWidget
                         ? "-28px"
                         : "-18px"
                   }}
@@ -457,11 +462,13 @@ function Placeholder(props) {
             style={{
               color: "#188ae2",
               right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-9px"
                   : "12px",
               top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-28px"
                   : "-18px"
             }}
@@ -490,11 +497,13 @@ function Placeholder(props) {
             style={{
               color: "#188ae2",
               right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-27px"
                   : "-8px",
               top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-28px"
                   : "-18px"
             }}
@@ -526,10 +535,10 @@ function Placeholder(props) {
           props.data && props.isNeedSign
             ? props.data?.signerObjId === props.signerObjId &&
               props.pos.type !== "checkbox" &&
-              props.pos.type !== "radio"
+              props.pos.type !== radioButtonWidget
               ? true
               : false
-            : props.pos.type !== "radio" &&
+            : props.pos.type !== radioButtonWidget &&
               props.pos.type !== "checkbox" &&
               props.pos.key === props.selectWidgetId &&
               true,
@@ -614,31 +623,33 @@ function Placeholder(props) {
       }}
     >
       {props.isShowBorder &&
-      props.pos.type !== "radio" &&
+      props.pos.type !== radioButtonWidget &&
       props.pos.type !== "checkbox" &&
       props.pos.key === props.selectWidgetId ? (
         <BorderResize
           right={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
+            props.pos.type === "checkbox" ||
+            props.pos.type === radioButtonWidget
               ? -21
               : -12
           }
           top={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
+            props.pos.type === "checkbox" ||
+            props.pos.type === radioButtonWidget
               ? -21
               : -11
           }
         />
       ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
         props.data?.signerObjId === props.signerObjId &&
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" ? (
           <BorderResize />
         ) : (
           <></>
         )
       ) : (
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
         props.pos.key === props.selectWidgetId && <BorderResize />
       )}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
index 543d17ac7..996d1332a 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
@@ -2,11 +2,12 @@ import React from "react";
 import { themeColor } from "../../constant/const";
 import {
   defaultWidthHeight,
+  radioButtonWidget,
   resizeBorderExtraWidth
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
   const getResizeBorderExtraWidth =
-    props.pos.type === "checkbox" || props.pos.type === "radio"
+    props.pos.type === "checkbox" || props.pos.type === radioButtonWidget
       ? 38
       : resizeBorderExtraWidth();
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 5151f794d..e61310f8f 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -3,6 +3,7 @@ import {
   getMonth,
   getYear,
   onChangeInput,
+  radioButtonWidget,
   range,
   textInputWidget,
   textWidget
@@ -700,7 +701,7 @@ function PlaceholderType(props) {
           <span>{type}</span>
         </div>
       );
-    case "radio":
+    case radioButtonWidget:
       return (
         <div>
           {props.pos.options?.values.map((data, ind) => {
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 1aa721c8a..101095648 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -3,7 +3,12 @@ import ModalUi from "../../primitives/ModalUi";
 import RecipientList from "./RecipientList";
 import { useDrag } from "react-dnd";
 import WidgetList from "./WidgetList";
-import { textInputWidget, textWidget, widgets } from "../../constant/Utils";
+import {
+  radioButtonWidget,
+  textInputWidget,
+  textWidget,
+  widgets
+} from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
@@ -152,16 +157,16 @@ function WidgetComponent({
       isDragEmail: !!monitor.isDragging()
     })
   });
-  const [, radio] = useDrag({
+  const [, radioButton] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 15,
-      text: "radio"
+      text: radioButtonWidget
     },
     collect: (monitor) => ({
-      isDragRadio: !!monitor.isDragging()
+      isDragRadiotton: !!monitor.isDragging()
     })
   });
   const [, text] = useDrag({
@@ -211,7 +216,7 @@ function WidgetComponent({
       textInput,
       checkbox,
       dropdown,
-      radio,
+      radioButton,
       image,
       email
     ];
@@ -227,7 +232,7 @@ function WidgetComponent({
   const filterWidgets = widget.filter(
     (data) =>
       data.type !== "dropdown" &&
-      data.type !== "radio" &&
+      data.type !== radioButtonWidget &&
       data.type !== textWidget
   );
   const textWidgetData = widget.filter((data) => data.type !== textWidget);
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index dad40145d..7e26226c2 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -7,6 +7,7 @@ import { rgb } from "pdf-lib";
 export const isMobile = window.innerWidth < 767;
 export const textInputWidget = "text input";
 export const textWidget = "text";
+export const radioButtonWidget = "radio button";
 export const openInNewTab = (url) => {
   window.open(url, "_blank", "noopener,noreferrer");
 };
@@ -204,7 +205,7 @@ export const widgets = [
     iconSize: "19px"
   },
   {
-    type: "radio",
+    type: radioButtonWidget,
     icon: "fa-regular fa-circle-dot",
     iconSize: "20px"
   },
@@ -260,7 +261,7 @@ export const addWidgetOptions = (type) => {
       return { ...defaultOpt, validation: { type: "email", pattern: "" } };
     case "dropdown":
       return defaultOpt;
-    case "radio":
+    case radioButtonWidget:
       return { ...defaultOpt, values: [] };
     case textWidget:
       return defaultOpt;
@@ -346,7 +347,7 @@ export const defaultWidthHeight = (type) => {
       return { width: 70, height: 70 };
     case "email":
       return { width: 150, height: 20 };
-    case "radio":
+    case radioButtonWidget:
       return { width: 15, height: 30 };
     case textWidget:
       return { width: 150, height: 17 };
@@ -1078,7 +1079,7 @@ export const multiSignEmbed = async (
           ? labelDefaultHeight
           : scaleHeight;
         const widgetHeight =
-          position.type === "radio"
+          position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
               ? 10
@@ -1272,7 +1273,7 @@ export const multiSignEmbed = async (
           height: scaleHeight
         });
         dropdown.enableReadOnly();
-      } else if (position.type === "radio") {
+      } else if (position.type === radioButtonWidget) {
         const radioRandomId = "radio" + randomId();
         const radioGroup = form.createRadioGroup(radioRandomId);
         let addYPosition = 18;
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 2c8c7e241..326d029b9 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -19,7 +19,8 @@ import {
   onImageSelect,
   onSaveSign,
   onSaveImage,
-  addDefaultSignatureImg
+  addDefaultSignatureImg,
+  radioButtonWidget
 } from "../constant/Utils";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -385,7 +386,8 @@ function PdfRequestFiles() {
           for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
             checkboxExist =
               checkUser[0].placeHolder[i].pos[j].type === "checkbox";
-            radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
+            radioExist =
+              checkUser[0].placeHolder[i].pos[j].type === radioButtonWidget;
             if (checkboxExist) {
               requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
@@ -434,7 +436,8 @@ function PdfRequestFiles() {
             } else if (radioExist) {
               requiredRadio = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
-                  !position.options?.isReadOnly && position.type === "radio"
+                  !position.options?.isReadOnly &&
+                  position.type === radioButtonWidget
               );
               if (requiredRadio && requiredRadio?.length > 0) {
                 let checkSigned;
@@ -457,7 +460,7 @@ function PdfRequestFiles() {
               const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
                   position.options?.status === "required" &&
-                  position.type !== "radio" &&
+                  position.type !== radioButtonWidget &&
                   position.type !== "checkbox"
               );
               if (requiredWidgets && requiredWidgets?.length > 0) {
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 13dc516ba..7fe365374 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -26,7 +26,8 @@ import {
   multiSignEmbed,
   addWidgetOptions,
   textInputWidget,
-  textWidget
+  textWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -484,7 +485,7 @@ function PlaceHolderSign() {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
         } else if (
           dragTypeValue !== textWidget &&
@@ -1070,7 +1071,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
@@ -1563,7 +1564,7 @@ function PlaceHolderSign() {
                 setTempSignerId={setTempSignerId}
               />
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index a9e06c29e..76b5ef7ac 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -23,7 +23,8 @@ import {
   defaultWidthHeight,
   addWidgetOptions,
   textInputWidget,
-  textWidget
+  textWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -444,7 +445,7 @@ const TemplatePlaceholder = () => {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
         } else if (
           dragTypeValue !== textWidget &&
@@ -991,7 +992,7 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
@@ -1310,7 +1311,7 @@ const TemplatePlaceholder = () => {
                 </div>
               </ModalUi>
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}