Merge pull request #485 from OpenSignLabs/update_tour

apps/OpenSign/package-lock.json

@@ -43,6 +43,7 @@
         "react-scrollbars-custom": "^4.1.1",
         "react-select": "^5.8.0",
         "react-signature-canvas": "^1.0.6",
+        "react-tooltip": "^5.26.3",
         "reactour": "^1.19.2",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
@@ -20145,6 +20146,19 @@
         }
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "5.26.3",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.26.3.tgz",
+      "integrity": "sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

apps/OpenSign/package.json

@@ -38,6 +38,7 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
+    "react-tooltip": "^5.26.3",
     "reactour": "^1.19.2",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",

apps/OpenSign/src/components/shared/fields/CreateFolder.js

@@ -11,6 +11,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const [name, setName] = useState("");
   const [folderList, setFolderList] = useState([]);
   const [isAlert, setIsAlert] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
   const [selectedParent, setSelectedParent] = useState();
   const [alert, setAlert] = useState({ type: "info", message: "" });
   useEffect(() => {
@@ -42,6 +43,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   };
   const handleCreateFolder = async (event) => {
     event.preventDefault();
+    handleLoader(true);
     if (name) {
       const currentUser = Parse.User.current();
       const exsitQuery = new Parse.Query(folderCls);
@@ -52,7 +54,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       }
       const templExist = await exsitQuery.first();
       if (templExist) {
-        setAlert({ type: "dange", message: "Folder already exist!" });
+        setAlert({ type: "danger", message: "Folder already exist!" });
         setIsAlert(true);
         setTimeout(() => {
           setIsAlert(false);
@@ -74,6 +76,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
         const res = await template.save();
         if (res) {
+          handleLoader(false);
           setAlert({
             type: "success",
             message: "Folder created successfully!"
@@ -88,6 +91,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         }
       }
     } else {
+      handleLoader(false);
       setAlert({ type: "info", message: "Please fill folder name" });
       setIsAlert(true);
       setTimeout(() => {
@@ -98,10 +102,21 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const handleOptions = (e) => {
     setSelectedParent(e.target.value);
   };
+  const handleLoader = (status) => {
+    setIsLoader(status);
+  };
   return (
     <div>
       {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
-      <div id="createFolder">
+      <div id="createFolder" className="relative">
+        {isLoader && (
+          <div className="absolute h-full w-full flex justify-center items-center ">
+            <div
+              style={{ fontSize: "45px", color: "#3dd3e0" }}
+              className="loader-37"
+            ></div>
+          </div>
+        )}
         <h1 className="text-base font-semibold">Create Folder</h1>
         <div className="text-xs mt-2">
           <label className="block">
@@ -133,6 +148,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         <div>
           <button
             onClick={handleCreateFolder}
+            disabled={isLoader}
             className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
           >
             <i className="fa-solid fa-plus mr-1"></i>

apps/OpenSign/src/components/shared/fields/SelectFolder.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import CreateFolder from "./CreateFolder";
 import ModalUi from "../../../primitives/ModalUi";
+import Tooltip from "../../../primitives/Tooltip";
 
 const SelectFolder = ({ required, onSuccess, folderCls }) => {
   const [isOpen, SetIsOpen] = useState(false);
@@ -145,7 +146,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
           {required && <span className="text-red-500 text-[13px]">*</span>}
         </label>
       </div>
-      <div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
+      <div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
         <div>
           <i
             className="far fa-folder-open text-[40px] text-[#33bbff]"
@@ -170,6 +171,13 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
           </p>
         </div>
+        <div className="absolute top-1 right-1 cursor-pointer">
+          <Tooltip
+            message={
+              "If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."
+            }
+          />
+        </div>
       </div>
       <ModalUi
         title={"Select Folder"}
@@ -201,23 +209,25 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             <hr />
           </div>
           <div className="mt-2 mb-3">
-            {!isAdd &&
-              folderList.length > 0 &&
-              folderList.map((folder) => (
-                <div
-                  key={folder.Name}
-                  className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
-                  onClick={() => handleSelect(folder)}
-                >
-                  <div className="flex items-center gap-2">
-                    <i
-                      className="fa fa-folder text-[#33bbff] text-[1.4rem]"
-                      aria-hidden="true"
-                    ></i>
-                    <span className="font-semibold">{folder.Name}</span>
+            <div className="max-h-[210px] overflow-auto">
+              {!isAdd &&
+                folderList.length > 0 &&
+                folderList.map((folder) => (
+                  <div
+                    key={folder.Name}
+                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
+                    onClick={() => handleSelect(folder)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <i
+                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                        aria-hidden="true"
+                      ></i>
+                      <span className="font-semibold">{folder.Name}</span>
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
+            </div>
             {isAdd && (
               <CreateFolder
                 parentFolderId={clickFolder && clickFolder.ObjectId}

apps/OpenSign/src/layout/HomeLayout.js

@@ -97,7 +97,7 @@ const HomeLayout = () => {
         ...resArr,
         {
           selector: '[data-tut="reactourLast"]',
-          content: `You are good to go`,
+          content: `You are ready to start using OpenSign! If you need support feel free to contact us.`,
           position: "top"
           // style: { backgroundColor: "#abd4d2" },
         }

apps/OpenSign/src/primitives/Tooltip.js

@@ -0,0 +1,18 @@
+import React from "react";
+// import * as HoverCard from "@radix-ui/react-hover-card";
+// import "../styles/opensigndrive.css";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+const Tooltip = ({ children, message }) => (
+  <>
+    <a data-tooltip-id="my-tooltip" data-tooltip-content={message}>
+      {children ? (
+        children
+      ) : (
+        <i className="fa-solid fa-question  border-[1.5px] px-1.5 py-0.5 rounded-full border-[#33bbff] text-xs text-[#33bbff]"></i>
+      )}
+    </a>
+    <ReactTooltip id="my-tooltip" className="max-w-[200px]" />
+  </>
+);
+
+export default Tooltip;

apps/OpenSignServer/databases/migrations/20240313095456-update_tour_dashboard.cjs

@@ -0,0 +1,219 @@
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.up = async Parse => {
+  // TODO: set className here
+  const className = 'w_dashboard';
+  const dashboard = new Parse.Query(className);
+  const updatedashboard = await dashboard.get('35KBoSgoAK');
+  updatedashboard.set('rows', [
+    {
+      columns: [
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-signature',
+            bgColor: '#f0058e',
+            label: 'Need your Signature',
+            description: null,
+            data: {
+              id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '4Hhwbp482K',
+              tourSection: 'tourcard1',
+              tourMessage:
+                'Clicking on this card will take you to the list of documents awaiting your review.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-sign-out-alt',
+            bgColor: '#g0058e',
+            label: 'Out for signatures',
+            description: null,
+            data: {
+              id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '1MwEuxLEkF',
+              tourSection: 'tourcard2',
+              tourMessage:
+                'Clicking on this card will take you to a list of documents awaiting signature.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: '5Go51Q7T8r',
+            data: {
+              tourSection: 'tourreport1',
+              tourMessage: 'This is a list of documents that are waiting for your signature.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: 'd9k3UfYHBc',
+            data: {
+              tourSection: 'tourreport2',
+              tourMessage:
+                "This is a list of documents you've sent to other parties for signature.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '12',
+          collg: '12',
+          widget: {
+            type: 'report',
+            reportId: 'kC5mfynCi4',
+            data: {
+              tourSection: 'tourreport3',
+              tourMessage:
+                'This are documents you have started but have not finalized for sending.',
+            },
+          },
+        },
+      ],
+    },
+  ]);
+
+  return updatedashboard.save();
+};
+
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.down = async Parse => {
+  const className = 'w_dashboard';
+  const dashboard = new Parse.Query(className);
+  const revertdashboard = await dashboard.get('35KBoSgoAK');
+  revertdashboard.set('rows', [
+    {
+      columns: [
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-signature',
+            bgColor: '#f0058e',
+            label: 'Need your Signature',
+            description: null,
+            data: {
+              id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '4Hhwbp482K',
+              tourSection: 'tourcard1',
+              tourMessage:
+                'This card shows the aggregate count of documents that are awaiting your signature. Clicking on this card will seamlessly take you to the detailed list of such documents for your review and action.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-sign-out-alt',
+            bgColor: '#g0058e',
+            label: 'Out for signatures',
+            description: null,
+            data: {
+              id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '1MwEuxLEkF',
+              tourSection: 'tourcard2',
+              tourMessage:
+                "This card indicates the total number of documents you've sent out for signatures. A single click on this card will navigate you to a comprehensive list of these documents, allowing you to monitor their status.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: '5Go51Q7T8r',
+            data: {
+              tourSection: 'tourreport1',
+              tourMessage:
+                'Here lies a curated list of documents that are pending your signature. These are requests from other users that require your immediate attention for completion.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: 'd9k3UfYHBc',
+            data: {
+              tourSection: 'tourreport2',
+              tourMessage:
+                "This area displays all the documents you've dispatched for signatures from other parties. It serves as a real-time tracker for documents pending external approval.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '12',
+          collg: '12',
+          widget: {
+            type: 'report',
+            reportId: 'kC5mfynCi4',
+            data: {
+              tourSection: 'tourreport3',
+              tourMessage:
+                "In this section, you'll find your draft documents awaiting completion. These are the documents you've initiated but haven't yet finalized for sending.",
+            },
+          },
+        },
+      ],
+    },
+  ]);
+
+  return revertdashboard.save();
+};