feat(web): notify-to-pass-phase-in-case-maintenance-button

Author: Harman-singh-waraich

web/src/pages/Cases/CaseDetails/MaintenanceButtons/DrawButton.tsx

@@ -17,11 +17,13 @@ import { isUndefined } from "src/utils";
 import { Phases } from "components/Phase";
 
 import { IBaseMaintenanceButton } from ".";
+import { Link } from "react-router-dom";
 
 const StyledButton = styled(Button)`
   width: 100%;
 `;
 
+const StyledLabel = styled.label``;
 interface IDrawButton extends IBaseMaintenanceButton {
   numberOfVotes?: string;
   period?: string;
@@ -40,6 +42,11 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, perio
     [maintenanceData, isDrawn, phase, period]
   );
 
+  const needToPassPhase = useMemo(
+    () => !isUndefined(maintenanceData) && !isDrawn && period === Period.Evidence && phase !== Phases.drawing,
+    [maintenanceData, isDrawn, phase, period]
+  );
+
   const {
     data: drawConfig,
     isLoading: isLoadingConfig,
@@ -68,7 +75,17 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, perio
       setIsOpen(false);
     });
   };
-  return <StyledButton text="Draw" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />;
+  return (
+    <>
+      {needToPassPhase ? (
+        <StyledLabel>
+          Jurors can be drawn in <small>drawing</small> phase.
+          <br /> Pass phase <Link to="/courts/1/purpose/#maintenance">here</Link>.
+        </StyledLabel>
+      ) : null}
+      <StyledButton text="Draw" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />
+    </>
+  );
 };
 
 export default DrawButton;

web/src/pages/Courts/StakeMaintenanceButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import DottedMenuButton from "components/DottedMenuButton";
@@ -47,6 +47,11 @@ interface IStakeMaintenanceButtons {
 const StakeMaintenanceButtons: React.FC<IStakeMaintenanceButtons> = ({ className }) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    const openDefault = location.hash.includes("#maintenance");
+    if (openDefault) setIsOpen(true);
+  }, []);
+
   const toggle = () => setIsOpen((prevValue) => !prevValue);
   return (
     <Container {...{ className }}>