Merge pull request #1607 from kleros/feat(web)/Extra-path-to-the-open-Notifications-and-Onboarding-miniguide

Feat(web)/extra path to the open notifications and onboarding miniguide

Author: alcercu

web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx

@@ -1,6 +1,7 @@
-import React, { Dispatch, SetStateAction, useRef } from "react";
+import React, { Dispatch, SetStateAction, useCallback, useRef } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 import BookOpenIcon from "svgs/icons/book-open.svg";
 
@@ -164,9 +165,16 @@ const Template: React.FC<ITemplate> = ({
   isVisible,
 }) => {
   const containerRef = useRef(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const removeOnboardingHashPath = useCallback(() => {
+    if (isOnboarding && location.hash.includes("#onboarding")) navigate("#", { replace: true });
+  }, [location.hash, navigate, isOnboarding]);
+
   useClickAway(containerRef, () => {
     if (canClose) {
       onClose();
+      removeOnboardingHashPath();
     }
   });
 
@@ -196,7 +204,14 @@ const Template: React.FC<ITemplate> = ({
           />
         </LeftContainer>
         <RightContainer>
-          <Close onClick={onClose}>Close</Close>
+          <Close
+            onClick={() => {
+              onClose();
+              removeOnboardingHashPath();
+            }}
+          >
+            Close
+          </Close>
           {RightContent}
         </RightContainer>
       </Container>

web/src/layout/Header/DesktopHeader.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
@@ -13,6 +14,7 @@ import { responsiveSize } from "styles/responsiveSize";
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
+import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Logo from "./Logo";
 import DappList from "./navbar/DappList";
@@ -86,10 +88,25 @@ const PopupContainer = styled.div`
   z-index: 30;
 `;
 
-const DesktopHeader = () => {
+const DesktopHeader: React.FC = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
+  const [initialTab, setInitialTab] = useState<number>(0);
+  const location = useLocation();
+
+  const initializeFragmentURL = useCallback(() => {
+    const hash = location.hash;
+    const hasOnboardingPath = hash.includes("#onboarding");
+    const hasNotificationsPath = hash.includes("#notifications");
+    toggleIsOnboardingMiniGuidesOpen(hasOnboardingPath);
+    toggleIsSettingsOpen(hasNotificationsPath);
+    setInitialTab(hasNotificationsPath ? 1 : 0);
+  }, [location.hash, toggleIsSettingsOpen, toggleIsOnboardingMiniGuidesOpen]);
+
+  useEffect(initializeFragmentURL, [initializeFragmentURL]);
+
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
@@ -124,9 +141,10 @@ const DesktopHeader = () => {
           <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
+          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
+      {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
     </>
   );
 };

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 
 import { Tabs } from "@kleros/ui-components-library";
@@ -73,10 +74,15 @@ 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());
+  const location = useLocation();
+  const navigate = useNavigate();
+  useClickAway(containerRef, () => {
+    toggleIsSettingsOpen();
+    if (location.hash.includes("#notifications")) navigate("#", { replace: true });
+  });
 
   return (
     <>

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 {