[#1183] Add checks for registration and retirement routes

govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx

@@ -48,17 +48,27 @@ export const CenteredBoxPageWrapper: FC<PropsWithChildren<Props>> = ({
             }
           />
           {hideBox ? (
-            <Box flex={1}>{children}</Box>
+            <Box
+              flex={1}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              justifyContent="center"
+            >
+              {children}
+            </Box>
           ) : (
             <Box
               alignSelf="center"
               borderRadius="20px"
               boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
+              boxSizing="border-box"
               mb={isMobile ? 2 : 1.5}
               px={isMobile ? 2 : 18.75}
               py={isMobile ? 6 : 8}
               height="auto"
-              maxWidth={isMobile ? "none" : 600}
+              width="100%"
+              maxWidth={isMobile ? "none" : 900}
               display="flex"
               flexDirection="column"
             >

govtool/frontend/src/components/organisms/WrongRouteInfo.tsx

@@ -0,0 +1,98 @@
+import { Box } from "@mui/material";
+
+import { Button, Typography } from "@atoms";
+import { useScreenDimension, useTranslation } from "@hooks";
+
+import { useNavigate } from "react-router-dom";
+import { PATHS } from "@/consts";
+
+type Props = {
+  title?: string;
+  description?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  onPrimaryButton?: () => void;
+  onSecondaryButton?: () => void;
+  hideSecondaryButton?: boolean;
+};
+
+export const WrongRouteInfo = ({
+  title,
+  description,
+  primaryButtonText,
+  secondaryButtonText,
+  hideSecondaryButton,
+  onPrimaryButton,
+  onSecondaryButton,
+}: Props) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+  const navigate = useNavigate();
+
+  const primaryButtonProps = {
+    children: primaryButtonText ?? t("backToDashboard"),
+    onClick: onPrimaryButton ?? (() => navigate(PATHS.dashboard)),
+  };
+
+  const secondaryButtonProps =
+    primaryButtonText || onPrimaryButton
+      ? {
+          children: secondaryButtonText ?? t("backToDashboard"),
+          onClick: onSecondaryButton ?? (() => navigate(PATHS.dashboard)),
+        }
+      : undefined;
+
+  return (
+    <>
+      {title && (
+        <Typography sx={{ textAlign: "center" }} variant="headline4">
+          {title}
+        </Typography>
+      )}
+      {description && (
+        <Typography
+          fontWeight={400}
+          sx={{
+            pb: isMobile ? 4 : 6,
+            pt: 4,
+            textAlign: "center",
+            whiteSpace: "pre-line",
+          }}
+          variant="body1"
+        >
+          {description}
+        </Typography>
+      )}
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: isMobile ? "column-reverse" : "row",
+          gap: 3,
+          justifyContent: secondaryButtonProps ? "space-between" : "center",
+        }}
+      >
+        {!hideSecondaryButton && secondaryButtonProps && (
+          <Button
+            data-testid="secondary-button"
+            size="extraLarge"
+            sx={{
+              px: 6,
+            }}
+            variant="outlined"
+            {...secondaryButtonProps}
+          />
+        )}
+        <Button
+          data-testid={"primary-button"}
+          size="extraLarge"
+          sx={{
+            px: 6,
+          }}
+          variant="contained"
+          {...primaryButtonProps}
+        />
+      </Box>
+    </>
+  );
+};

govtool/frontend/src/components/organisms/index.ts

@@ -26,3 +26,4 @@ export * from "./RegisterAsDirectVoterBoxContent";
 export * from "./Slider";
 export * from "./TopNav";
 export * from "./VoteContext";
+export * from "./WrongRouteInfo";

govtool/frontend/src/i18n/locales/en.ts

@@ -653,6 +653,11 @@ export const en = {
       addInformationDescription:
         "You can include extra information about yourself by adding a URL and its hash.",
       addInformationTitle: "Add Information",
+      alreadyRegistered: {
+        title: "You already are a DRep",
+        description: "Looks like you have already successfully completed your registration and you currently are a DRep.\n\nYou can view your details in the DRep Directory.",
+        viewDetails: "View your DRep details",
+      },
       becomeADRep: "Become a DRep",
       descriptionStepTwo:
         "By clicking register you create your DRep ID within your wallet and become a DRep.\n\nOnce the registration has completed your DRep ID will be shown on your dashboard. You will be able to share your DRep ID so that other ada holders can delegate their voting power to you.",
@@ -692,6 +697,10 @@ export const en = {
       },
     },
     retirement: {
+      notADRep: {
+        title: "You are not a DRep",
+        description: "Looks like you cannot retire, because currently you are not a DRep.",
+      },
       continue: "Continue to Retirement",
       retireAsDrep: "Retire as a Drep",
       whatRetirementMeansTitle: "What Retirement Means",
@@ -703,7 +712,15 @@ export const en = {
       viewAll: "View all",
     },
     directVoter: {
+      alreadyRegistered: {
+        title: "You already are a Direct Voter",
+        description: "Looks like you have already successfully completed your registration and you currently are a Direct Voter.",
+      },
       becomeDirectVoter: "Become a Direct Voter",
+      notDirectVoter: {
+        title: "You are not a Direct Voter",
+        description: "Looks like you cannot retire, because currently you are not a Direct Voter.",
+      },
       registerDescription:
         "A Direct Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of ADA in their connected wallet. <0>Learn More</0> about Direct Voter.\n\nBecoming a Direct Voter will require a refundable deposit of <strong>₳{{deposit}}</strong>.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)",
       registerHeading: "What this Means",

govtool/frontend/src/pages/EditDRepMetadata.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { FormProvider, useForm } from "react-hook-form";
-import { Box, CircularProgress } from "@mui/material";
+import { CircularProgress } from "@mui/material";
 
 import { PATHS } from "@consts";
 import { useModal } from "@context";
@@ -65,17 +65,7 @@ export const EditDRepMetadata = () => {
       showVotingPower
     >
       {!voter || !voter.isRegisteredAsDRep ? (
-        <Box
-          sx={{
-            display: "flex",
-            flex: 1,
-            height: "100%",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <CircularProgress />
-        </Box>
+        <CircularProgress />
       ) : (
         <FormProvider {...methods}>
           {step === 1 && (

govtool/frontend/src/pages/RegisterAsDirectVoter.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
-import { Link } from "@mui/material";
+import { CircularProgress, Link } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { PATHS } from "@consts";
@@ -20,6 +20,7 @@ import {
   getItemFromLocalStorage,
   openInNewTab,
 } from "@utils";
+import { WrongRouteInfo } from "@organisms";
 
 export const RegisterAsDirectVoter = () => {
   const { cExplorerBaseUrl } = useAppContext();
@@ -94,8 +95,27 @@ export const RegisterAsDirectVoter = () => {
     }
   }, []);
 
+  const pageTitle = t("directVoter.becomeDirectVoter");
+
+  if (!voter)
+    return (
+      <CenteredBoxPageWrapper pageTitle={pageTitle} hideBox>
+        <CircularProgress />
+      </CenteredBoxPageWrapper>
+    );
+
+  if (voter?.isRegisteredAsSoleVoter)
+    return (
+      <CenteredBoxPageWrapper pageTitle={pageTitle}>
+        <WrongRouteInfo
+          title={t(`directVoter.alreadyRegistered.title`)}
+          description={t(`directVoter.alreadyRegistered.description`)}
+        />
+      </CenteredBoxPageWrapper>
+    );
+
   return (
-    <CenteredBoxPageWrapper pageTitle={t("directVoter.becomeDirectVoter")}>
+    <CenteredBoxPageWrapper pageTitle={pageTitle}>
       <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
         {t("directVoter.registerHeading")}
       </Typography>

govtool/frontend/src/pages/RegisterAsdRep.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { FormProvider, useForm } from "react-hook-form";
-import { Box, CircularProgress } from "@mui/material";
+import { CircularProgress } from "@mui/material";
 
 import { PATHS } from "@consts";
-import { useModal } from "@context";
+import { useCardano, useModal } from "@context";
 import {
   useTranslation,
   defaultRegisterAsDRepValues,
@@ -16,6 +16,7 @@ import {
   DRepStoreDataInfo,
   RegisterAsDRepForm,
   RolesAndResponsibilities,
+  WrongRouteInfo,
 } from "@organisms";
 import { checkIsWalletConnected } from "@utils";
 
@@ -25,6 +26,7 @@ export const RegisterAsdRep = () => {
   const { t } = useTranslation();
   const { closeModal, openModal } = useModal();
   const { voter } = useGetVoterInfo();
+  const { dRepIDBech32 } = useCardano();
 
   const methods = useForm({
     mode: "onChange",
@@ -64,17 +66,24 @@ export const RegisterAsdRep = () => {
   if (!voter)
     return (
       <CenteredBoxPageWrapper pageTitle={pageTitle} hideBox>
-        <Box
-          sx={{
-            alignItems: "center",
-            display: "flex",
-            flex: 1,
-            height: "100vh",
-            justifyContent: "center",
-          }}
-        >
-          <CircularProgress />
-        </Box>
+        <CircularProgress />
+      </CenteredBoxPageWrapper>
+    );
+
+  if (voter.isRegisteredAsDRep)
+    return (
+      <CenteredBoxPageWrapper pageTitle={pageTitle}>
+        <WrongRouteInfo
+          title={t(`registration.alreadyRegistered.title`)}
+          description={t(`registration.alreadyRegistered.description`)}
+          primaryButtonText={t("registration.alreadyRegistered.viewDetails")}
+          onPrimaryButton={() =>
+            navigate(
+              PATHS.dashboardDRepDirectoryDRep.replace(":dRepId", dRepIDBech32),
+              { state: { enteredFromWithinApp: true } },
+            )
+          }
+        />
       </CenteredBoxPageWrapper>
     );
 

govtool/frontend/src/pages/RetireAsDirectVoter.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
-import { Link } from "@mui/material";
+import { CircularProgress, Link } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { PATHS } from "@consts";
@@ -14,6 +14,7 @@ import {
 } from "@hooks";
 import { CenteredBoxBottomButtons, CenteredBoxPageWrapper } from "@molecules";
 import { checkIsWalletConnected, correctAdaFormat, openInNewTab } from "@utils";
+import { WrongRouteInfo } from "@organisms";
 
 export const RetireAsDirectVoter = () => {
   const { cExplorerBaseUrl } = useAppContext();
@@ -81,11 +82,27 @@ export const RetireAsDirectVoter = () => {
     }
   }, []);
 
+  const pageTitle = t("directVoter.retireDirectVoter");
+
+  if (!voter)
+    return (
+      <CenteredBoxPageWrapper pageTitle={pageTitle} showVotingPower hideBox>
+        <CircularProgress />
+      </CenteredBoxPageWrapper>
+    );
+
+  if (!voter.isRegisteredAsSoleVoter)
+    return (
+      <CenteredBoxPageWrapper pageTitle={pageTitle} showVotingPower>
+        <WrongRouteInfo
+          title={t("directVoter.notDirectVoter.title")}
+          description={t("directVoter.notDirectVoter.description")}
+        />
+      </CenteredBoxPageWrapper>
+    );
+
   return (
-    <CenteredBoxPageWrapper
-      pageTitle={t("directVoter.retireDirectVoter")}
-      showVotingPower
-    >
+    <CenteredBoxPageWrapper pageTitle={pageTitle} showVotingPower>
       <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
         {t("directVoter.retirementHeading")}
       </Typography>