Merge pull request #1804 from OpenSignLabs/updates-15754544632

fix: resolve issues

Author: prafull-opensignlabs

apps/OpenSign/src/components/pdf/BorderResize.jsx

@@ -12,12 +12,9 @@ function BorderResize(props) {
 
   return (
     <div
-      style={{
-        width: getHeight() || "14px",
-        height: getHeight() || "14px"
-      }}
+      style={{ width: getHeight() || "14px", height: getHeight() || "14px" }}
       className={`${props.right ? `-right-[12px]` : "-right-[2px]"} ${
-        props.top ? `-bottom-[12px]` : "-bottom-[2px] "
+        props.top ? `-bottom-[12px]` : "-bottom-[2px]"
       } absolute inline-block hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
     ></div>
   );

apps/OpenSign/src/components/pdf/CellsWidget.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 
 const Cell = ({
+  isEnabled,
   count,
   h,
   value,
@@ -15,10 +16,11 @@ const Cell = ({
   hint
 }) => (
   <div
-    className="flex items-center justify-center border border-gray-800 bg-white"
+    className={`${isEnabled ? "bg-white border-gray-400" : "select-none-cls pointer-events-none border-gray-500"} flex items-center justify-center border-[1px]`}
     style={{ flex: `0 0 ${100 / count}%`, height: h }}
   >
     <input
+      disabled={!isEnabled}
       maxLength={1}
       value={value}
       readOnly={!editable}
@@ -27,14 +29,15 @@ const Cell = ({
       onKeyDown={editable ? (e) => onKeyDown && onKeyDown(e, index) : undefined}
       // trigger validation when leaving a cell
       onBlur={editable ? (e) => onBlur && onBlur(e, index) : undefined}
-      className="w-full text-center focus:outline-none bg-transparent placeholder-gray-300"
+      className={`${isEnabled ? "placeholder-gray-300" : "placeholder-gray-500"} w-full text-center focus:outline-none bg-transparent`}
       placeholder={hint}
       style={{ fontFamily: "Arial, sans-serif", fontSize, color: fontColor }}
     />
   </div>
 );
 
 export default function CellsWidget({
+  isEnabled,
   count = 8,
   height = 40,
   value = "",
@@ -120,6 +123,7 @@ export default function CellsWidget({
       {cells.map((val, i) => (
         <Cell
           key={i}
+          isEnabled={isEnabled}
           count={cellCount}
           h={height}
           value={val}

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

@@ -740,7 +740,7 @@ function Placeholder(props) {
         return "not-allowed";
       }
     } else {
-      return "all-scroll";
+      return "move";
     }
   };
 
@@ -946,23 +946,24 @@ function Placeholder(props) {
             props.pos.key === props?.currWidgetsDetails?.key && <BorderResize />
           )}
 
-          {/* 1- Show a ouline if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
-            2- If props.isShowBorder is true, display ouline for all widgets. 
-            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show ouline:
-              3.1- When isAlllowModify is true, show ouline.
-              3.2- Do not display ouline for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true). 
+          {/* 1- Show a border if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
+              2- If props.isShowBorder is true, display border for all widgets. 
+              3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show border:
+                3.1- When isAlllowModify is true, show border.
+                3.2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true). 
             */}
+          {props.pos.key === props?.currWidgetsDetails?.key &&
+            (props.isShowBorder ||
+              (props?.isAlllowModify &&
+                !props?.assignedWidgetId.includes(props.pos.key))) && (
+              <div
+                style={{ borderColor: themeColor }}
+                className="w-[calc(100%+21px)] h-[calc(100%+21px)] cursor-move absolute inline-block border-[1px] border-dashed"
+              ></div>
+            )}
           <div
-            className={`${
-              props.pos.key === props?.currWidgetsDetails?.key &&
-              (props.isShowBorder ||
-                (props?.isAlllowModify &&
-                  !props?.assignedWidgetId.includes(props.pos.key)))
-                ? "outline-[0.3px] outline-dashed outline-offset-[10px]"
-                : ""
-            } flex items-stretch justify-center`}
+            className="flex items-stretch justify-center"
             style={{
-              outlineColor: themeColor,
               left: xPos(props.pos, props.isSignYourself),
               top: yPos(props.pos, props.isSignYourself),
               width: "100%",

apps/OpenSign/src/components/pdf/PlaceholderType.jsx

@@ -226,6 +226,7 @@ function PlaceholderType(props) {
         props.isPlaceholder || props.isSignYourself || props.isSelfSign;
       return (
         <CellsWidget
+          isEnabled={iswidgetEnable}
           count={count}
           height={height}
           value={cells.join("")}

apps/OpenSign/src/components/pdf/WidgetNameModal.jsx

@@ -123,6 +123,23 @@ const WidgetNameModal = (props) => {
     }
   };
 
+  const handleChangeValidateInput = (e) => {
+    if (e) {
+      if (e.target.value === "ssn") {
+        setFormdata({
+          ...formdata,
+          [e.target.name]: e.target.value,
+          hint: "xxx-xx-xxxx",
+          cellCount: 11
+        });
+      } else {
+        setFormdata({ ...formdata, [e.target.name]: e.target.value });
+      }
+    } else {
+      setFormdata({ ...formdata, textvalidate: "" });
+    }
+  };
+
   const handledefaultChange = (e) => {
     if (formdata.textvalidate) {
       const regexObject = RegexParser(handleValidation(formdata.textvalidate));
@@ -148,7 +165,7 @@ const WidgetNameModal = (props) => {
         //allow space in text regex
         return "/^[a-zA-Z ]+$/";
       case "ssn":
-        return "^\\d{3}-\\d{2}-\\d{4}$";
+        return "/^(?!000|666|9\\d{2})\\d{3}-(?!00)\\d{2}-(?!0000)\\d{4}$/";
       default:
         return type;
     }

apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx

@@ -1472,6 +1472,7 @@ function WidgetsValueModal(props) {
       case cellsWidget:
         return (
           <CellsWidget
+            isEnabled={true}
             count={cellsValue.length}
             height="100%"
             value={cellsValue.join("")}
@@ -1762,6 +1763,10 @@ function WidgetsValueModal(props) {
         regexValidation = /^[0-9\s]*$/;
         validateExpression(regexValidation);
         break;
+      case "ssn":
+        regexValidation = /^(?!000|666|9\d{2})\d{3}-(?!00)\d{2}-(?!0000)\d{4}$/;
+        validateExpression(regexValidation);
+        break;
       default:
         // Grab the current pattern (if it exists)
         const pattern = currWidgetsDetails?.options?.validation?.pattern;
@@ -1872,6 +1877,11 @@ function WidgetsValueModal(props) {
     }
   };
   const handleclose = () => {
+    // If validation is shown, clear the response and close the modal
+    if (isShowValidation) {
+      handleClear();
+      setIsShowValidation(false);
+    }
     dispatch(setIsShowModal({}));
     dispatch(setLastIndex(""));
     if (currWidgetsDetails?.type === textWidget && uniqueId) {
@@ -1936,7 +1946,7 @@ function WidgetsValueModal(props) {
     <>
       <ModalUi
         isOpen={true}
-        handleClose={() => !isShowValidation && handleclose()}
+        handleClose={() => handleclose()}
         position="bottom"
       >
         <div className="h-[100%] p-[18px]">

apps/OpenSign/src/pages/PlaceHolderSign.jsx

@@ -1608,13 +1608,7 @@ function PlaceHolderSign() {
                     parseInt(defaultdata?.cellCount || 5)
                   ),
                   validation:
-                    isSubscribe && inputype
-                      ? {
-                          type: inputype,
-                          pattern:
-                            inputype === "regex" ? defaultdata.textvalidate : ""
-                        }
-                      : {},
+                        {},
                   fontSize:
                     fontSize || currWidgetsDetails?.options?.fontSize || 12,
                   fontColor:
@@ -2636,7 +2630,7 @@ function PlaceHolderSign() {
           title={t("document-alert")}
           showClose={false}
         >
-          <div className="h-[100%] p-[20px]">
+          <div className="h-[100%] p-[20px] text-base-content">
             <p>{isAlreadyPlace.message}</p>
             <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
             <button