fix:template report tour messsage

Author: raktima-opensignlabs

apps/OpenSign/src/json/ReportJson.js

@@ -320,7 +320,10 @@ export default function reportJson(id) {
             textColor: "white",
             btnIcon: "fa fa-plus",
             redirectUrl: "placeHolderSign",
-            action: "redirect"
+            action: "redirect",
+            selector: "reactourSecond",
+            message:
+              "Click the 'Use' button to create a new document from an existing template."
           },
           {
             btnId: "2234",
@@ -329,6 +332,9 @@ export default function reportJson(id) {
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
+            selector: "reactourThird",
+            message:
+              "Onclick option button you can see options such as Edit & Delete. Use the 'Edit' button to add signer roles, modify fields, and update your template. Changes will apply to all future documents created from this template but won’t affect existing documents.Use the Delete button you can delete template",
             subaction: [
               {
                 btnId: "2434",

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -8,6 +8,8 @@ import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
 import Alert from "./Alert";
 import Tooltip from "./Tooltip";
 import { RWebShare } from "react-web-share";
+import Tour from "reactour";
+import Parse from "parse";
 
 const ReportTable = (props) => {
   const navigate = useNavigate();
@@ -23,6 +25,8 @@ const ReportTable = (props) => {
   const [copied, setCopied] = useState(false);
   const [isOption, setIsOption] = useState({});
   const [alertMsg, setAlertMsg] = useState({ type: "success", message: "" });
+  const [isTour, setIsTour] = useState(false);
+  const [tourStatusArr, setTourStatusArr] = useState([]);
   const startIndex = (currentPage - 1) * props.docPerPage;
   const { isMoreDocs, setIsNextRecord } = props;
   // For loop is used to calculate page numbers visible below table
@@ -36,6 +40,7 @@ const ReportTable = (props) => {
   }, [props.List, props.docPerPage]);
   //  below useEffect reset currenpage to 1 if user change route
   useEffect(() => {
+    checkTourStatus();
     return () => setCurrentPage(1);
   }, []);
 
@@ -346,6 +351,75 @@ const ReportTable = (props) => {
         setActLoader({});
       });
   };
+
+  async function checkTourStatus() {
+    const currentUser = Parse.User.current();
+    const cloudRes = await Parse.Cloud.run("getUserDetails", {
+      email: currentUser.get("email")
+    });
+    const res = { data: cloudRes.toJSON() };
+    if (res.data && res.data.TourStatus && res.data.TourStatus.length > 0) {
+      const tourStatus = res.data.TourStatus;
+      // console.log("res ", res.data.TourStatus);
+      setTourStatusArr(tourStatus);
+      const filteredtourStatus = tourStatus.filter(
+        (obj) => obj["templateTour"]
+      );
+      if (filteredtourStatus.length > 0) {
+        const templateTour = filteredtourStatus[0]["templateTour"];
+
+        if (templateTour) {
+          setIsTour(false);
+        } else {
+          setIsTour(true);
+        }
+      } else {
+        setIsTour(true);
+      }
+    } else {
+      setIsTour(true);
+    }
+  }
+
+  const closeTour = async () => {
+    // console.log("closeTour");
+    setIsTour(false);
+    if (props.isDontShow) {
+      const serverUrl = localStorage.getItem("baseUrl");
+      const appId = localStorage.getItem("parseAppId");
+      const extUserClass = localStorage.getItem("extended_class");
+      const json = JSON.parse(localStorage.getItem("Extand_Class"));
+      const extUserId = json && json.length > 0 && json[0].objectId;
+      // console.log("extUserId ", extUserId)
+
+      let updatedTourStatus = [];
+      if (tourStatusArr.length > 0) {
+        updatedTourStatus = [...tourStatusArr];
+        const templateTourIndex = tourStatusArr.findIndex(
+          (obj) => obj["templateTour"] === false || obj["templateTour"] === true
+        );
+        if (templateTourIndex !== -1) {
+          updatedTourStatus[templateTourIndex] = { templateTour: true };
+        } else {
+          updatedTourStatus.push({ templateTour: true });
+        }
+      } else {
+        updatedTourStatus = [{ templateTour: true }];
+      }
+
+      await axios.put(
+        serverUrl + "classes/" + extUserClass + "/" + extUserId,
+        {
+          TourStatus: updatedTourStatus
+        },
+        {
+          headers: {
+            "X-Parse-Application-Id": appId
+          }
+        }
+      );
+    }
+  };
   return (
     <div className="relative">
       {Object.keys(actLoader)?.length > 0 && (
@@ -358,6 +432,15 @@ const ReportTable = (props) => {
       )}
       <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
         {isAlert && <Alert type={alertMsg.type}>{alertMsg.message}</Alert>}
+        {props.tourData && props.ReportName === "Templates" && (
+          <Tour
+            onRequestClose={closeTour}
+            steps={props.tourData}
+            isOpen={isTour}
+            // rounded={5}
+            closeWithMask={false}
+          />
+        )}
         <div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
           <div className="font-light">
             {props.ReportName}{" "}
@@ -369,6 +452,7 @@ const ReportTable = (props) => {
           </div>
           {props.ReportName === "Templates" && (
             <i
+              data-tut="reactourFirst"
               onClick={() => navigate("/form/template")}
               className="fa-solid fa-square-plus text-sky-400 text-[25px]"
             ></i>
@@ -500,6 +584,7 @@ const ReportTable = (props) => {
                         {props.actions?.length > 0 &&
                           props.actions.map((act, index) => (
                             <button
+                              data-tut={act?.selector}
                               key={index}
                               onClick={() => handleActionBtn(act, item)}
                               className={`${