fix: document list sorting issue on scroll down in opensign-drive issue, disable recipient's list and field after send request

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

@@ -116,7 +116,13 @@ const RecipientList = (props) => {
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
-              className={props.sendInOrder && "dragCursor"}
+              className={
+                props.sendInOrder
+                  ? props.isMailSend
+                    ? "disabled"
+                    : "dragCursor"
+                  : props.isMailSend && "disabled"
+              }
               style={
                 (!isMobile && isHover === ind) || props.isSelectListId === ind
                   ? onHoverStyle(ind, obj?.blockColor)

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

@@ -23,6 +23,10 @@ function SignerListPlace(props) {
           data-tut="reactourAddbtn"
           className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
           onClick={() => props.handleAddSigner()}
+          style={{
+            opacity: props.isMailSend && "0.5",
+            pointerEvents: props.isMailSend && "none"
+          }}
         >
           <i className="fa-solid fa-plus"></i>
           <span style={{ marginLeft: 2 }}>Add role</span>

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

@@ -364,7 +364,12 @@ function WidgetComponent({
           </div>
         )
       ) : (
-        <div data-tut={dataTut} className="signerComponent">
+        <div
+          data-tut={dataTut}
+          className={
+            isMailSend ? "disabled signerComponent " : "signerComponent"
+          }
+        >
           <div
             style={{
               background: themeColor,

apps/OpenSign/src/pages/Opensigndrive.js

@@ -35,7 +35,7 @@ function Opensigndrive() {
   const scrollRef = useRef(null);
   const [isList, setIsList] = useState(false);
   const [selectedSort, setSelectedSort] = useState("Date");
-  const [sortingOrder, setSortingOrder] = useState("Decending");
+  const [sortingOrder, setSortingOrder] = useState("Descending");
   const [pdfData, setPdfData] = useState([]);
   const [isFolder, setIsFolder] = useState(false);
   const [newFolderName, setNewFolderName] = useState();
@@ -54,6 +54,14 @@ function Opensigndrive() {
   const [skip, setSkip] = useState(0);
   const limit = 100;
   const [loading, setLoading] = useState(false);
+  const sortOrder = ["Ascending", "Descending"];
+  const sortingValue = ["Name", "Date"];
+  const orderName = {
+    Ascending: "Ascending",
+    Descending: "Descending",
+    Name: "Name",
+    Date: "Date"
+  };
   const currentUser =
     localStorage.getItem(
       `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -80,7 +88,7 @@ function Opensigndrive() {
         setHandleError("Error: Something went wrong!");
       } else if (driveDetails && driveDetails.length > 0) {
         setSkip((prevSkip) => prevSkip + limit);
-        sortApps("Date", "Decending", driveDetails, true);
+        sortApps(orderName.Date, orderName.Descending, driveDetails, true);
       }
       if (!docId) {
         setFolderName([{ name: "OpenSign™ Drive", objectId: "" }]);
@@ -211,34 +219,40 @@ function Opensigndrive() {
   };
 
   const sortingApp = (appInfo, type, order) => {
-    if (type === "Name") {
-      if (order === "Accending") {
+    if (type === orderName.Name) {
+      if (order === orderName.Ascending) {
         return appInfo.sort((a, b) => (a.Name > b.Name ? 1 : -1));
-      } else if (order === "Decending") {
+      } else if (order === orderName.Descending) {
         return appInfo.sort((a, b) => (a.Name > b.Name ? -1 : 1));
       }
-    } else if (type === "Date") {
-      if (order === "Accending") {
+    } else if (type === orderName.Date) {
+      if (order === orderName.Ascending) {
         return appInfo.sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1));
-      } else if (order === "Decending") {
+      } else if (order === orderName.Descending) {
         return appInfo.sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1));
       }
     }
   };
 
   const sortApps = (type, order, driveDetails, isInitial) => {
-    const selectedSortType = type ? type : selectedSort ? selectedSort : "Date";
-    const sortOrder = order ? order : sortingOrder ? sortingOrder : "Decending";
-    if (selectedSortType === "Name") {
-      sortingApp(driveDetails, "Name", sortOrder);
-    } else if (selectedSortType === "Date") {
-      sortingApp(driveDetails, "Date", sortOrder);
-    }
-    if (isInitial) {
-      setPdfData([...pdfData, ...driveDetails]);
-    } else {
-      setPdfData(driveDetails);
+    const selectedSortType = type
+      ? type
+      : selectedSort
+        ? selectedSort
+        : orderName.Date;
+    const sortOrder = order
+      ? order
+      : sortingOrder
+        ? sortingOrder
+        : orderName.Descending;
+    const allPdfData = isInitial ? [...pdfData, ...driveDetails] : driveDetails;
+    if (selectedSortType === orderName.Name) {
+      sortingApp(driveDetails, orderName.Name, sortOrder);
+    } else if (selectedSortType === orderName.Date) {
+      sortingApp(allPdfData, orderName.Date, sortOrder);
     }
+
+    setPdfData(allPdfData);
   };
 
   //function for handle auto scroll on folder path
@@ -611,95 +625,56 @@ function Opensigndrive() {
                     aria-labelledby="dropdownMenuButton"
                     aria-expanded={isShowSort ? "true" : "false"}
                   >
-                    <span
-                      onClick={() => {
-                        setSelectedSort("Name");
-                        sortApps("Name", null, pdfData);
-                      }}
-                      className="dropdown-item itemColor"
-                    >
-                      {selectedSort !== "Name" ? (
-                        <i
-                          className="fa fa-arrow-up"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      ) : (
-                        <i
-                          className="fa fa-check"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      )}
-                      Name
-                    </span>
-                    <span
-                      onClick={() => {
-                        setSelectedSort("Date");
-                        sortApps("Date", null, pdfData);
-                      }}
-                      className="dropdown-item itemColor"
-                    >
-                      {selectedSort !== "Date" ? (
-                        <i
-                          className="fa fa-arrow-up"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      ) : (
-                        <i
-                          className="fa fa-check"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      )}
-                      Date
-                    </span>
+                    {sortingValue.map((value, ind) => {
+                      return (
+                        <span
+                          key={ind}
+                          onClick={() => {
+                            setSelectedSort(value);
+                            sortApps(value, null, pdfData);
+                          }}
+                          className="dropdown-item itemColor"
+                          style={{
+                            marginLeft: selectedSort !== value && "15px"
+                          }}
+                        >
+                          {selectedSort === value && (
+                            <i
+                              className="fa fa-check"
+                              aria-hidden="true"
+                              style={{ marginRight: "5px" }}
+                            ></i>
+                          )}
+                          {value}
+                        </span>
+                      );
+                    })}
+
                     <hr className="hrStyle" />
-                    <span
-                      onClick={() => {
-                        setSortingOrder("Accending");
-                        sortApps(null, "Accending", pdfData);
-                      }}
-                      className="dropdown-item itemColor"
-                    >
-                      {sortingOrder !== "Accending" ? (
-                        <i
-                          className="fa fa-arrow-up"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      ) : (
-                        <i
-                          className="fa fa-check"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      )}
-                      Accending
-                    </span>
-                    <span
-                      onClick={() => {
-                        setSortingOrder("Decending");
-                        sortApps(null, "Decending", pdfData);
-                      }}
-                      className="dropdown-item itemColor"
-                    >
-                      {sortingOrder !== "Decending" ? (
-                        <i
-                          className="fa fa-arrow-up"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      ) : (
-                        <i
-                          className="fa fa-check"
-                          aria-hidden="true"
-                          style={{ marginRight: "5px" }}
-                        ></i>
-                      )}
-                      Decending
-                    </span>
+                    {sortOrder.map((order, ind) => {
+                      return (
+                        <span
+                          key={ind}
+                          onClick={() => {
+                            setSortingOrder(order);
+                            sortApps(null, order, pdfData);
+                          }}
+                          className="dropdown-item itemColor"
+                          style={{
+                            marginLeft: sortingOrder !== order && "15px"
+                          }}
+                        >
+                          {sortingOrder === order && (
+                            <i
+                              className="fa fa-check"
+                              aria-hidden="true"
+                              style={{ marginRight: "5px" }}
+                            ></i>
+                          )}
+                          {order}
+                        </span>
+                      );
+                    })}
                   </div>
                 </div>
 

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -1450,7 +1450,7 @@ function PlaceHolderSign() {
                   {isSendAlert.mssg === "sure" ? (
                     <p>Please add field for all recipients.</p>
                   ) : isSendAlert.mssg === textWidget ? (
-                    <p>Please confirm that you have filled label widget.</p>
+                    <p>Please confirm that you have filled the text field.</p>
                   ) : (
                     isSendAlert.mssg === "confirm" && (
                       <p>
@@ -1716,9 +1716,11 @@ function PlaceHolderSign() {
               </div>
             ) : (
               <div>
-                <div className="signerComponent">
+                <div className="signerComponent" aria-disabled>
                   <div
-                    style={{ maxHeight: window.innerHeight - 70 + "px" }}
+                    style={{
+                      maxHeight: window.innerHeight - 70 + "px"
+                    }}
                     className="autoSignScroll"
                   >
                     <SignerListPlace
@@ -1734,11 +1736,12 @@ function PlaceHolderSign() {
                       setSignersData={setSignersData}
                       blockColor={blockColor}
                       setBlockColor={setBlockColor}
+                      isMailSend={isMailSend}
                       // handleAddSigner={handleAddSigner}
                     />
                     <div data-tut="reactourSecond">
                       <WidgetComponent
-                        pdfUrl={isMailSend}
+                        isMailSend={isMailSend}
                         dragSignature={dragSignature}
                         signRef={signRef}
                         handleDivClick={handleDivClick}

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -1464,6 +1464,7 @@ const TemplatePlaceholder = () => {
                     className="autoSignScroll"
                   >
                     <SignerListPlace
+                      isMailSend={isMailSend}
                       signerPos={signerPos}
                       signersdata={signersdata}
                       isSelectListId={isSelectListId}
@@ -1484,7 +1485,7 @@ const TemplatePlaceholder = () => {
                     />
                     <div data-tut="reactourSecond">
                       <WidgetComponent
-                        pdfUrl={isMailSend}
+                        isMailSend={isMailSend}
                         dragSignature={dragSignature}
                         signRef={signRef}
                         handleDivClick={handleDivClick}

apps/OpenSign/src/styles/signature.css

@@ -496,7 +496,11 @@
   overflow: hidden !important;
   text-overflow: ellipsis;
 }
-
+.disabled {
+  opacity: 0.5; /* Example: reduce opacity to visually indicate disabled state */
+  pointer-events: none; /* Prevents mouse clicks and other events */
+  /* background-color: #888; */
+}
 .useEmail {
   font-size: 10px;
   color: #424242;