sync branch

.env.local_dev

@@ -20,7 +20,7 @@ appName=open_sign_server
 # A 12 character long random secret key that allows access to all the data. It is used in Parse dashboard config to view all the data in the database.
 MASTER_KEY=XnAadwKxxByMr
 # Mongodb URI to connect to
-MONGODB_URI=mongodb://localhost:27017/OpenSignDB
+MONGODB_URI=mongodb://mongo:27017/OpenSignDB
 # Path on which APIs should be mounted. Do not change this. This variable shall be removed & value hardcoded in the source code in coming versions.
 PARSE_MOUNT=/app
 # Set it to the URL from where APIs will be accessible to the NodeJS functions, for local development it should be localhost:3000/api/app (use your local port number instead)

Makefile

@@ -1,6 +1,6 @@
 build:
 	cp .env.local_dev .env
-	cd apps/OpenSign && npm install && npm run build
+	cd apps/OpenSign && cp ../../.env.local_dev .env && npm install && npm run build
 	docker compose up --build --force-recreate
 
 run:

apps/OpenSign/Dockerfile

@@ -21,5 +21,5 @@ EXPOSE 3000
 # ENV NODE_ENV production
 
 # Run the application
-ENTRYPOINT npm run start-dev
+ENTRYPOINT npm run start
 

apps/OpenSign/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.1",
     "@radix-ui/themes": "^2.0.3",
     "@react-pdf/renderer": "^3.4.0",
     "@reduxjs/toolkit": "^2.2.1",

apps/OpenSign/src/components/dashboard/DashboardCard.js

@@ -4,6 +4,7 @@ import Parse from "parse";
 import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
 import "../../styles/loader.css";
 import { useNavigate } from "react-router-dom";
+import Tooltip from "../../primitives/Tooltip";
 
 const DashboardCard = (props) => {
   const navigate = useNavigate();
@@ -335,7 +336,7 @@ const DashboardCard = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden`}
+      } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`}
     >
       <div className="flex items-center justify-start gap-5">
         <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
@@ -352,6 +353,9 @@ const DashboardCard = (props) => {
           </div>
         </div>
       </div>
+      <div className="text-xs absolute top-1 right-1">
+        <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
+      </div>
     </div>
   );
 };

apps/OpenSign/src/components/dashboard/GetDashboard.js

@@ -6,16 +6,18 @@ const buttonList = [
   {
     label: "Sign yourself",
     redirectId: "sHAnZphf69",
-    redirectType: "Form"
+    redirectType: "Form",
+    icon: "fas fa-pen-nib"
   },
   {
     label: "Request signature",
     redirectId: "8mZzFxbG1z",
-    redirectType: "Form"
+    redirectType: "Form",
+    icon: "fa-solid fa-paper-plane"
   }
 ];
 const GetDashboard = (props) => {
-  const Button = ({ label, redirectId, redirectType }) => (
+  const Button = ({ label, redirectId, redirectType, icon }) => (
     <div className={"bg-white rounded-md shadow  w-full"}>
       <Suspense
         fallback={
@@ -33,7 +35,7 @@ const GetDashboard = (props) => {
         }
       >
         <DashboardButton
-          Icon={"fa-solid fa-plus"}
+          Icon={icon}
           Label={label}
           Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
         />
@@ -136,6 +138,7 @@ const GetDashboard = (props) => {
               label={btn.label}
               redirectType={btn.redirectType}
               redirectId={btn.redirectId}
+              icon={btn.icon}
             />
           ))}
         </div>

apps/OpenSign/src/components/opensigndrive/DriveBody.js

@@ -8,19 +8,11 @@ import { saveAs } from "file-saver";
 import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
-import SelectFolder from "../shared/fields/SelectFolder"; //check this one
 import ModalUi from "../../primitives/ModalUi";
 import { themeColor } from "../../constant/const";
+import FolderModal from "../shared/fields/FolderModal";
 
-function DriveBody({
-  pdfData,
-  setFolderName,
-  setDocId,
-  setIsLoading,
-  setPdfData,
-  isList,
-  setIsAlert
-}) {
+function DriveBody(props) {
   const [rename, setRename] = useState("");
   const [renameValue, setRenameValue] = useState("");
   const inputRef = useRef(null);
@@ -50,28 +42,25 @@ function DriveBody({
       name: data.Name,
       objectId: data.objectId
     };
-    setFolderName((prev) => [...prev, folderData]);
-    const loadObj = {
+    props.setFolderName((prev) => [...prev, folderData]);
+    props.setIsLoading({
       isLoad: true,
       message: "This might take some time"
-    };
-
-    setIsLoading(loadObj);
-    setDocId(data.objectId);
+    });
+    props.setDocId(data.objectId);
+    props.setPdfData([]);
+    props.setSkip(0);
   };
   //function for change doc name and update doc name in  _document class
   const handledRenameDoc = async (data) => {
     setRename("");
     const trimmedValue = renameValue.trim();
-
     if (trimmedValue.length > 0) {
       const updateName = {
         Name: renameValue
       };
       const docId = data.objectId;
-
-      const docData = pdfData;
-
+      const docData = props.pdfData;
       const updatedData = docData.map((item) => {
         if (item.objectId === docId) {
           // If the item's ID matches the target ID, update the name
@@ -80,8 +69,7 @@ function DriveBody({
         // If the item's ID doesn't match, keep it unchanged
         return item;
       });
-
-      setPdfData(updatedData);
+      props.setPdfData(updatedData);
       await axios
         .put(
           `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -102,7 +90,7 @@ function DriveBody({
         })
         .catch((err) => {
           console.log("Err ", err);
-          setIsAlert({
+          props.setIsAlert({
             isShow: true,
             alertMessage: "something went wrong"
           });
@@ -199,13 +187,13 @@ function DriveBody({
       .then((result) => {
         const res = result.data;
         if (res) {
-          const updatedData = pdfData.filter((x) => x.objectId !== docId);
-          setPdfData(updatedData);
+          const updatedData = props.pdfData.filter((x) => x.objectId !== docId);
+          props.setPdfData(updatedData);
         }
       })
       .catch((err) => {
         console.log("Err ", err);
-        setIsAlert({
+        props.setIsAlert({
           isShow: true,
           alertMessage: "something went wrong"
         });
@@ -226,8 +214,8 @@ function DriveBody({
         ? true
         : false
       : selecFolderId
-        ? false
-        : true;
+      ? false
+      : true;
     if (!checkExist) {
       if (moveFolderId) {
         updateData = {
@@ -262,10 +250,10 @@ function DriveBody({
           // console.log("Listdata ", Listdata);
           const res = Listdata.data;
           if (res) {
-            const updatedData = pdfData.filter(
+            const updatedData = props.pdfData.filter(
               (x) => x.objectId !== updateDocId
             );
-            setPdfData(updatedData);
+            props.setPdfData(updatedData);
           }
         })
         .catch((err) => {
@@ -292,14 +280,13 @@ function DriveBody({
 
   //component to handle type of document and render according to type
   const handleFolderData = (data, ind, listType) => {
-    let createddate, status, isDecline, signerExist, isComplete, isPlaceholder;
+    let createddate, status, isDecline, signerExist, isComplete;
     if (data.Type !== "Folder") {
       const expireDate = data.ExpiryDate && data.ExpiryDate.iso;
       const createdDate = data.createdAt && data.createdAt;
       createddate = new Date(createdDate).toLocaleDateString();
       isComplete = data.IsCompleted && data.IsCompleted ? true : false;
       isDecline = data.IsDeclined && data.IsDeclined;
-      isPlaceholder = data.Placeholders && data.Placeholders;
       signerExist = data.Signers && data.Signers;
       const signedUrl = data.SignedUrl;
 
@@ -314,18 +301,7 @@ function DriveBody({
         status = "Completed";
       } else if (isDecline) {
         status = "Declined";
-      } else if (!signerExist || signerExist?.length === 0) {
-        status = "Draft";
-      } else if (
-        signerExist?.length > 0 &&
-        (!isPlaceholder || isPlaceholder?.length === 0)
-      ) {
-        status = "Draft";
-      } else if (
-        signerExist?.length > 0 &&
-        isPlaceholder?.length > 0 &&
-        !signedUrl
-      ) {
+      } else if (!signedUrl) {
         status = "Draft";
       } else if (isExpire) {
         status = "Expired";
@@ -584,7 +560,7 @@ function DriveBody({
   //component to handle type of document and render according to type
   return (
     <>
-      {isList ? (
+      {props.isList ? (
         <div className="container" style={{ overflowX: "auto" }}>
           <Table striped bordered hover>
             <thead>
@@ -597,7 +573,7 @@ function DriveBody({
               </tr>
             </thead>
             <tbody>
-              {pdfData.map((data, ind) => {
+              {props.pdfData.map((data, ind) => {
                 return (
                   <React.Fragment key={ind}>
                     {handleFolderData(data, ind, "table")}
@@ -609,7 +585,7 @@ function DriveBody({
         </div>
       ) : (
         <div className="pdfContainer">
-          {pdfData.map((data, ind) => {
+          {props.pdfData.map((data, ind) => {
             return (
               <div className="box" key={ind}>
                 {handleFolderData(data, ind, "list")}
@@ -618,13 +594,14 @@ function DriveBody({
           })}
         </div>
       )}
+
       {isOpenMoveModal && (
-        <SelectFolder
+        <FolderModal
           onSuccess={handleMoveFolder}
           isOpenModal={isOpenMoveModal}
           folderCls={"contracts_Document"}
           setIsOpenMoveModal={setIsOpenMoveModal}
-          setPdfData={setPdfData}
+          setPdfData={props.setPdfData}
         />
       )}
       <ModalUi

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
+import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 function DropdownWidgetOption(props) {
   const [dropdownOptionList, setDropdownOptionList] = useState([
     "option-1",
@@ -144,21 +145,15 @@ function DropdownWidgetOption(props) {
   };
 
   return (
-    //props.showDropdown
-    <ModalUi
-      //   styleClass={"dropdownModal"}
-      isOpen={props.showDropdown}
-      title={props.title}
-      showClose={false}
-    >
-      <div style={{ height: "100%", padding: 20 }}>
+    <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
+      <div className="h-full p-[15px]">
         <form
           onSubmit={(e) => {
             e.preventDefault();
             handleSaveOption();
           }}
         >
-          <div className="dropdownContainer">
+          <div>
             <label style={{ fontSize: "13px", fontWeight: "600" }}>
               Name<span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
@@ -383,17 +378,22 @@ function DropdownWidgetOption(props) {
               </div>
             )}
           </div>
+          {props.type === "checkbox" && !props.isSignYourself && (
+            <PremiumAlertHeader
+              message={
+                "Field validations are free in beta, this feature will incur a fee later."
+              }
+            />
+          )}
           <div
-            style={{
-              height: "1px",
-              backgroundColor: "#9f9f9f",
-              width: "100%",
-              marginTop: "15px",
-              marginBottom: "15px"
-            }}
+            className={`${
+              props.type === "checkbox" && !props.isSignYourself
+                ? "mb-[15px]"
+                : "my-[15px]"
+            } w-full h-[1px] bg-[#9f9f9f]`}
           ></div>
+
           <button
-            // onClick={() => handleSaveOption()}
             disabled={dropdownOptionList.length === 0 && true}
             style={{
               background: themeColor,