Added progress bar for the Infisical Guide

frontend/components/basic/Layout.tsx

@@ -21,6 +21,7 @@ import addUserToWorkspace from "~/pages/api/workspace/addUserToWorkspace";
 import createWorkspace from "~/pages/api/workspace/createWorkspace";
 import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
 import uploadKeys from "~/pages/api/workspace/uploadKeys";
+import checkUserAction from "~/pages/api/userActions/checkUserAction";
 
 import NavBarDashboard from "../navigation/NavBarDashboard";
 import { tempLocalStorage } from "../utilities/checks/tempLocalStorage";
@@ -45,6 +46,11 @@ export default function Layout({ children }: LayoutProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
+  const [hasUserClickedSlack, setHasUserClickedSlack] = useState(false);
+  const [hasUserClickedIntro, setHasUserClickedIntro] = useState(false);
+  const [hasUserStarred, setHasUserStarred] = useState(false);
+  const [usersInOrg, setUsersInOrg] = useState(false);
+  const [totalOnboardingActionsDone, setTotalOnboardingActionsDone] = useState(0);
 
   function closeModal() {
     setIsOpen(false);
@@ -211,6 +217,46 @@ export default function Layout({ children }: LayoutProps) {
       }
     };
     putUserInWorkSpace();
+
+    const checkUserActionsFunction = async () => {
+      let countActions = 0;
+      const userActionSlack = await checkUserAction({
+        action: "slack_cta_clicked",
+      });
+      setHasUserClickedSlack(userActionSlack ? true : false);
+      if (userActionSlack) {
+        countActions = countActions + 1;
+      }
+
+      const userActionIntro = await checkUserAction({
+        action: "intro_cta_clicked",
+      });
+      setHasUserClickedIntro(userActionIntro ? true : false);
+      if (userActionIntro) {
+        countActions = countActions + 1;
+      }
+
+      const userActionStar = await checkUserAction({
+        action: "star_cta_clicked",
+      });
+      setHasUserStarred(userActionStar ? true : false);
+      if (userActionStar) {
+        countActions = countActions + 1;
+      }
+
+      const orgId = localStorage.getItem("orgData.id");
+      const orgUsers = await getOrganizationUsers({
+        orgId: orgId ? orgId : "",
+      });
+      setUsersInOrg(orgUsers.length > 1)
+      if (orgUsers.length > 1) {
+        countActions = countActions + 1;
+      }
+      console.log(123, countActions)
+      setTotalOnboardingActionsDone(countActions);
+    };
+    console.log(`images/progress-${totalOnboardingActionsDone == 0 ? "0" : ""}${totalOnboardingActionsDone == 1 ? "14" : ""}${totalOnboardingActionsDone == 1 ? "28" : ""}${totalOnboardingActionsDone == 3 ? "43" : ""}${totalOnboardingActionsDone == 4 ? "57" : ""}.svg`)
+    checkUserActionsFunction();
   }, []);
 
   useEffect(() => {
@@ -240,6 +286,7 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <>
       <div className="fixed w-full hidden md:block flex flex-col h-screen">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer></script>
         <NavBarDashboard />
         <div className="flex flex-col md:flex-row flex-1">
           <aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
@@ -323,18 +370,32 @@ export default function Layout({ children }: LayoutProps) {
                       <FontAwesomeIcon icon={faBookOpen} />
                     </p>
                     Infisical Guide
+                    <img
+                      src={`/images/progress-${totalOnboardingActionsDone == 0 ? "0" : ""}${totalOnboardingActionsDone == 1 ? "14" : ""}${totalOnboardingActionsDone == 1 ? "28" : ""}${totalOnboardingActionsDone == 3 ? "43" : ""}${totalOnboardingActionsDone == 4 ? "57" : ""}.svg`}
+                      height={58}
+                      width={58}
+                      alt="progress bar"
+                      className="absolute right-2 -top-2"
+                    ></img>
                   </div>
                 ) : (
                   <Link
                     href={`/home/` + workspaceMapping[workspaceSelected as any]}
                   >
                     <div
-                      className={`flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5 mt-max border border-dashed border-bunker-400`}
+                      className={`relative flex p-2.5 overflow-visible text-white h-10 text-sm rounded cursor-pointer bg-white/10 hover:bg-primary-50/[0.15] mt-max`}
                     >
                       <p className="w-10 flex items-center justify-center text-lg">
                         <FontAwesomeIcon icon={faBookOpen} />
                       </p>
                       Infisical Guide
+                      <img
+                        src="/images/progress-75.svg"
+                        height={58}
+                        width={58}
+                        alt="progress bar"
+                        className="absolute right-2 -top-2"
+                      ></img>
                     </div>
                   </Link>
                 )}