fix : added guide and help popovrs for new users [123]

src/packages/@app/pages/Auth/login-page/login-page.ts

@@ -73,10 +73,13 @@ export async function handleLoginV2(url: string) {
       Success: true,
     });
     notifications.success("Login successful!");
-    if(event === "register"){
-    navigate("/app/collections?first=true");}
-    else {
-    navigate("/app/collections?first=false");}
+    if (event === "register") {
+      navigate("/app/collections?first=true");
+      localStorage.setItem("event", "true");
+    } else {
+      navigate("/app/collections?first=false");
+      localStorage.setItem("event", "false");
+    }
     _activeSidebarTabViewModel.addActiveTab("collections");
     await resizeWindowOnLogin();
   } else {

src/packages/@app/styles/style.scss

@@ -93,6 +93,7 @@ $theme-grey-ffffff: #FFFFFF;
 $theme-grey-e5e5e5: #e5e5e5;
 $theme-grey-C4CBDA: #C4CBDA;
 $theme-grey-8A9299: #8A9299;
+$theme-grey-CCCCCC : #CCCCCC;
 $theme-grey-999999: #999999;
 $theme-grey-83899F: #83899F;
 $theme-grey-636566: #636566;
@@ -249,6 +250,7 @@ $theme-red-230408: #230408;
   --text-secondary-900 : #{$theme-grey-000000};
 
   --text-tertiary-100 : #{$theme-violet-676A80};
+  --text-tertiary-200 : #{$theme-violet-323548};
   --text-tertiary-300 : #{$theme-violet-2A2C3C};
   --text-tertiary-400 : #{$theme-violet-22232E};
   --text-tertiary-500 : #{$theme-violet-272831};
@@ -292,6 +294,7 @@ $theme-red-230408: #230408;
   --bg-secondary-700 : #{$theme-grey-161617};
   --bg-secondary-800 : #{$theme-grey-151515};
   --bg-secondary-900 : #{$theme-grey-000000};
+  --bg-secondary-1000 : #{$theme-grey-CCCCCC};
 
   --bg-tertiary-100 : #{$theme-violet-676A80};
   --bg-tertiary-300 : #{$theme-violet-2A2C3C};

src/packages/@environments/features/environment-explorer/layout/EnvironmentExplorer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { HelpIcon, SaveIcon } from "$lib/assets/app.asset";
+  import { onMount } from "svelte";
   import type { EnvValuePair } from "$lib/utils/interfaces/request.interface";
   import { QuickHelp } from "../components";
   import { hasWorkpaceLevelPermission } from "$lib/utils/helpers";
@@ -12,9 +13,7 @@
   import { TabularInput } from "@environments/common/components";
   import { WithButton } from "@environments/common/hoc";
   import { Input } from "@library/forms";
-  import { platform } from "@tauri-apps/plugin-os";
-    import { Popover } from "@library/ui";
-
+  import { Carousel, Modal, Popover } from "@library/ui";
 
   /**
    * selected environmet to be shown on API
@@ -32,12 +31,11 @@
    * saves the environment
    */
   export let onSaveEnvironment;
+  let showContainer = false;
 
-  let showContainer = true;
   let quickHelp: boolean = false;
   let search = "";
   let environmentName = "";
-
   $: {
     if ($currentEnvironment) {
       environmentName = $currentEnvironment?.name;
@@ -53,6 +51,16 @@
   ) => {
     onUpdateVariable(pairs);
   };
+  let isGuidePopup = false;
+
+  onMount(() => {
+    const event = localStorage.getItem("event");
+    if (event === "true") {
+      showContainer = true;
+    } else {
+      showContainer = false;
+    }
+  });
 </script>
 
 {#if $currentEnvironment?.environmentId}
@@ -68,6 +76,11 @@
             style="position: absolute; left:150px;  top:18px; border:none; z-index:5; curser:pointer;"
             on:click={() => {
               showContainer = !showContainer;
+              if (showContainer === true) {
+                localStorage.setItem("event", "true");
+              } else {
+                localStorage.setItem("event", "false");
+              }
             }}
           >
             <HelpIcon height={"12.67px"} width={"12.67px"} />
@@ -145,15 +158,28 @@
       <div>
         {#if showContainer}
           <Popover
-          heading={`Welcome to Environments!`}
-            text={` Environments allow you to manage different sets of confirguration variables
-            for various stages of your application (e.g., Development, Staging,
-            Production). This helps in organizing and isolating settings, making testing
-            and deployment easier and more efficient.`}
+            heading={`Welcome to Environments!`}
+            text={` `}
             onClose={() => {
               showContainer = false;
+              localStorage.setItem("event", "false");
             }}
-          />
+            ><p>
+              Environments allow you to manage different sets of confirguration
+              variables for various stages of your application (e.g.,
+              Development, Staging, Production). This helps in organizing and
+              isolating settings, making testing and deployment easier and more
+              efficient.
+              <span
+                on:click={() => {
+                  isGuidePopup = true;
+                }}
+                class="link btn p-0 border-0"
+                style="font-size: 12px;"
+                >See how it works.
+              </span>
+            </p></Popover
+          >
         {/if}
       </div>
       <section class={`var-value-container`}>
@@ -176,6 +202,44 @@
     {/if}
   </div>
 {/if}
+<Modal
+  title={""}
+  type={"dark"}
+  width={"474px"}
+  zIndex={10000}
+  isOpen={isGuidePopup}
+  handleModalState={(flag = false) => {
+    isGuidePopup = flag;
+  }}
+>
+  <div style="position: relative;">
+    <Carousel
+      handleClosePopup={(flag = false) => {
+        isGuidePopup = flag;
+      }}
+      data={[
+        {
+          id: 1,
+          heading: "Step  1: Introduction to Environment",
+          subheading:
+            "Environments allow you to manage configuration variables for different stages of your application, such as development, staging, and production.",
+        },
+        {
+          id: 2,
+          heading: "Step  2: Creating a New Environment",
+          subheading:
+            "Creating a new environment is simple. Follow these steps to set up an environment tailored to your needs.",
+        },
+        {
+          id: 3,
+          heading: "Step 3: Search and apply Environment Variables",
+          subheading:
+            "Easily search and apply variables from global or selected environment in the REST API tool, to streamline your API testing process.",
+        },
+      ]}
+    />
+  </div>
+</Modal>
 
 <style lang="scss">
   .env-panel {
@@ -248,11 +312,14 @@
   .env-parent {
     padding: 10px;
   }
-
   .quick-help-active {
     width: calc(100% - 280px) !important;
   }
   .env-help-btn:active {
     background-color: var(--selected-active-sidebar);
   }
+  .link {
+    color: var(  --bg-primary-300);
+    text-decoration: underline;
+  }
 </style>

src/packages/@library/icons/Ellipse.svelte

@@ -1,3 +1,12 @@
-<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="5.5" cy="5.5" r="5.5" fill="#3670F7"/>
+<script lang="ts">
+    export let width = "10px";
+    export let height = "10px";
+    export let color = "grey";
+  </script>
+<!-- <script>
+    let color = "#3670F7"
+</script> -->
+
+<svg {width} {height} viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5.5" cy="5.5" r="5.5" fill={color}/>
 </svg>

src/packages/@library/ui/modal/Modal.svelte

@@ -74,7 +74,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: var(--bg-tertiary-400);
-    border-radius: 10px;
+    border-radius: 6px;
   }
   .sparrow-modal-heading {
     font-size: 20px;

src/packages/@library/ui/popover/Carousel.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import Ellipse from "@library/icons/Ellipse.svelte";
+  export let data = [];
+  let stepData = data[0];
+  let currentStep = 0;
+  let n = data.length;
+  export let handleClosePopup: (flag: boolean) => void;
+
+  function nextStep() {
+    if (currentStep < n - 1) {
+      currentStep = currentStep + 1;
+      stepData = data[currentStep];
+    }
+  }
+
+  function previousStep() {
+    if (currentStep > 0) {
+      currentStep = currentStep - 1;
+      stepData = data[currentStep];
+    }
+  }
+
+  function close() {
+    alert("hello");
+  }
+</script>
+
+<div>
+  <div class="d-flex flex-column" style="gap:19.72px;">
+    <div style="height: 276px; padding:auto;">Video</div>
+    <div class="d-flex flex-column" style=" gap:19.72px;">
+      <div class="d-flex flex-row justify-content-center" style="gap:5.48px;">
+        {#each data as element, index}
+          <Ellipse
+            color={index === currentStep
+              ? "var(--text-primary-300)"
+              : "var(--text-tertiary-200)"}
+          />
+        {/each}
+      </div>
+      <div style="height:137px; padding-left: 12.88px; padding-right: 12.88px;">
+        <h4 style="font-size: 15.75px; font-weight:600;">
+          {stepData?.heading}
+        </h4>
+        <p style="font-size: 13.1px; color:var(--bg-secondary-1000); font-weight:500; ">
+          {stepData?.subheading}
+        </p>
+      </div>
+      <header
+        class="d-flex"
+        style=" height:auto; 	justify-content: space-between;"
+      >
+        <div>
+          {#if currentStep > 0}
+            <button
+              class="border-0"
+              style=" background-color: var(--bg-primary-300) ; padding:3px 19px 3px 20px; border-radius:4.78px; outline:none; "
+              on:click={previousStep}>Previous</button
+            >
+          {/if}
+        </div>
+        {#if currentStep === n - 1}
+          <button
+            class="border-0"
+            style="background-color: var(--bg-primary-300); padding:3px 19px 3px 20px; border-radius:4.78px; outline:none;"
+            on:click={() => {
+              handleClosePopup(false);
+            }}
+          >
+            Close
+          </button>
+        {:else}
+          <button
+            class="border-0"
+            style="background-color: var(--bg-primary-300); padding:3px 19px 3px 20px; border-radius:4.78px; outline:none;"
+            on:click={nextStep}
+          >
+            Next
+          </button>
+        {/if}
+      </header>
+    </div>
+  </div>
+</div>

src/packages/@library/ui/popover/Popover.svelte

@@ -1,28 +1,11 @@
 <script lang="ts">
   import Crossicon from "$lib/assets/crossicon.svelte";
-  import { Route, Router } from "svelte-navigator";
-  import Ellipse from "@library/icons/Ellipse.svelte";
-  import Modal from "../modal/Modal.svelte";
-  import Step1 from "./Step1.svelte";
-  import Step2 from "./Step2.svelte";
-  import { writable } from "svelte/store";
-  import Step3 from "./Step3.svelte";
-    import Header from "./Header.svelte";
   export { handleClose };
   export let onClose;
   export let text = " ";
   export let heading = " ";
   let isGuidePopup = false;
 
-  const currentStep = writable(1);
-  function nextStep() {
-    currentStep.update(n => (n < 3 ? n + 1 : n));
-  }
-
-  function previousStep() {
-    currentStep.update(n => (n > 1 ? n - 1 : n));
-  }
-
   function handleClose() {
     onClose();
   }
@@ -41,38 +24,8 @@
   </button>
   <div class="heading">{heading}</div>
   <p class="description">
-    {text}
-    <span
-      on:click={() => {
-        isGuidePopup = true;
-      }}
-      class="link btn p-0 border-0"
-      style="font-size: 12px;">See how it works.</span
-    >
+    <slot />
   </p>
-  <div style="position: relative;">
-    <Modal
-      title={""}
-      type={"dark"}
-      width={"474px"}
-      zIndex={10000}
-      isOpen={isGuidePopup}
-      handleModalState={(flag = false) => {
-        isGuidePopup = flag;
-      }}
-    >
-    <div>
-      <Header {nextStep} {previousStep} />
-      {#if $currentStep === 1}
-        <Step1 />
-      {:else if $currentStep === 2}
-        <Step2 />
-      {:else if $currentStep === 3}
-        <Step3 />
-      {/if}
-    </div>
-  </Modal>
-  </div>
 </div>
 
 <style>
@@ -91,8 +44,5 @@
     font-size: 12px;
     line-height: 18px;
   }
-  .link {
-    color: #3670f7;
-    text-decoration: underline;
-  }
+
 </style>