feat(web): setup extra path to the notifications and onboarding miniguide

Author: nikhilverma360

web/src/app.tsx

@@ -35,6 +35,8 @@ const App: React.FC = () => {
                 <SentryRoutes>
                   <Route path="/" element={<Layout />}>
                     <Route index element={<Home />} />
+                    <Route path="onboarding" element={<Home />} />
+                    <Route path="notifications" element={<Home />} />
                     <Route path="cases/*" element={<Cases />} />
                     <Route path="courts/*" element={<Courts />} />
                     <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />

web/src/layout/Header/DesktopHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 
 import { useToggle } from "react-use";
@@ -90,6 +90,18 @@ const DesktopHeader = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const [initialTab, setInitialTab] = useState<number>(0);
+
+  const initializeNotifications = () => {
+    const hasNotifications = window.location.hash.includes("#notifications");
+    toggleIsSettingsOpen(hasNotifications);
+    setInitialTab(hasNotifications ? 1 : 0);
+  };
+
+  useEffect(() => {
+    initializeNotifications();
+  }, []);
+
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
@@ -124,7 +136,7 @@ const DesktopHeader = () => {
           <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
+          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
     </>

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -73,8 +73,8 @@ const TABS = [
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
-  const [currentTab, setCurrentTab] = useState<number>(0);
+const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
+  const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsSettingsOpen());
 

web/src/layout/Header/navbar/index.tsx

@@ -82,6 +82,7 @@ const PopupContainer = styled.div`
 
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
+  initialTab?: number;
 }
 
 export interface IHelp {

web/src/pages/Home/index.tsx

@@ -1,13 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
+import { useToggle } from "react-use";
+
 import { HomePageProvider } from "hooks/useHomePageContext";
 import { getOneYearAgoTimestamp } from "utils/date";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import HeroImage from "components/HeroImage";
 import LatestCases from "components/LatestCases";
+import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Community from "./Community";
 import CourtOverview from "./CourtOverview";
@@ -22,8 +25,14 @@ const Container = styled.div`
 `;
 
 const Home: React.FC = () => {
+  const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
+  useEffect(() => {
+    toggleIsOnboardingMiniGuidesOpen(window.location.hash.includes("#onboarding"));
+  }, []);
+
   return (
     <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+      {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
       <HeroImage />
       <Container>
         <CourtOverview />