From cc14e60ac0296c85bf086a9c236e6a278b86bc7e Mon Sep 17 00:00:00 2001
From: Joanna Dyczka <joanna.dyczka@binarapps.com>
Date: Fri, 9 Aug 2024 04:28:11 +0200
Subject: [PATCH] [#1183] Add checks for registration and retirement routes

---
 .../molecules/CenteredBoxPageWrapper.tsx      | 14 ++-
 .../components/organisms/WrongRouteInfo.tsx   | 98 +++++++++++++++++++
 .../src/components/organisms/index.ts         |  1 +
 govtool/frontend/src/i18n/locales/en.ts       | 17 ++++
 .../frontend/src/pages/EditDRepMetadata.tsx   | 14 +--
 .../src/pages/RegisterAsDirectVoter.tsx       | 24 ++++-
 govtool/frontend/src/pages/RegisterAsdRep.tsx | 35 ++++---
 .../src/pages/RetireAsDirectVoter.tsx         | 27 ++++-
 govtool/frontend/src/pages/RetireAsDrep.tsx   | 29 ++++--
 9 files changed, 218 insertions(+), 41 deletions(-)
 create mode 100644 govtool/frontend/src/components/organisms/WrongRouteInfo.tsx

diff --git a/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx b/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx
index 6740a5576..2d33bd15f 100644
--- a/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx
+++ b/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"
             >
diff --git a/govtool/frontend/src/components/organisms/WrongRouteInfo.tsx b/govtool/frontend/src/components/organisms/WrongRouteInfo.tsx
new file mode 100644
index 000000000..9c09909fa
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts
index 98ee17173..3bdcb82df 100644
--- a/govtool/frontend/src/components/organisms/index.ts
+++ b/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";
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index f1bd79714..5070a997e 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/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",
diff --git a/govtool/frontend/src/pages/EditDRepMetadata.tsx b/govtool/frontend/src/pages/EditDRepMetadata.tsx
index 61f0a3a37..cc5d488e9 100644
--- a/govtool/frontend/src/pages/EditDRepMetadata.tsx
+++ b/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 && (
diff --git a/govtool/frontend/src/pages/RegisterAsDirectVoter.tsx b/govtool/frontend/src/pages/RegisterAsDirectVoter.tsx
index 9d48f38f5..2d6128771 100644
--- a/govtool/frontend/src/pages/RegisterAsDirectVoter.tsx
+++ b/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>
diff --git a/govtool/frontend/src/pages/RegisterAsdRep.tsx b/govtool/frontend/src/pages/RegisterAsdRep.tsx
index a23a91da1..430b3fb6a 100644
--- a/govtool/frontend/src/pages/RegisterAsdRep.tsx
+++ b/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>
     );
 
diff --git a/govtool/frontend/src/pages/RetireAsDirectVoter.tsx b/govtool/frontend/src/pages/RetireAsDirectVoter.tsx
index c49dd03c6..1b0742044 100644
--- a/govtool/frontend/src/pages/RetireAsDirectVoter.tsx
+++ b/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>
diff --git a/govtool/frontend/src/pages/RetireAsDrep.tsx b/govtool/frontend/src/pages/RetireAsDrep.tsx
index 79757f833..b1068cd8f 100644
--- a/govtool/frontend/src/pages/RetireAsDrep.tsx
+++ b/govtool/frontend/src/pages/RetireAsDrep.tsx
@@ -2,14 +2,16 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { PATHS } from "@consts";
-import { WhatRetirementMeans } from "@organisms";
-import { useTranslation } from "@hooks";
+import { WhatRetirementMeans, WrongRouteInfo } from "@organisms";
+import { useGetVoterInfo, useTranslation } from "@hooks";
 import { CenteredBoxPageWrapper } from "@molecules";
 import { checkIsWalletConnected } from "@utils";
+import { CircularProgress } from "@mui/material";
 
 export const RetireAsDrep = () => {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { voter } = useGetVoterInfo();
 
   useEffect(() => {
     if (!checkIsWalletConnected()) {
@@ -19,12 +21,25 @@ export const RetireAsDrep = () => {
 
   const onClickBackToDashboard = () => navigate(PATHS.dashboard);
 
+  const pageTitle = t("retirement.retireAsDrep");
+
+  if (!voter)
+    return (
+      <CenteredBoxPageWrapper pageTitle={pageTitle} hideBox>
+        <CircularProgress />
+      </CenteredBoxPageWrapper>
+    );
+
   return (
-    <CenteredBoxPageWrapper
-      pageTitle={t("retirement.retireAsDrep")}
-      onClickBackToDashboard={onClickBackToDashboard}
-    >
-      <WhatRetirementMeans onClickCancel={onClickBackToDashboard} />
+    <CenteredBoxPageWrapper pageTitle={pageTitle}>
+      {!voter.isRegisteredAsDRep ? (
+        <WrongRouteInfo
+          title={t("retirement.notADRep.title")}
+          description={t("retirement.notADRep.description")}
+        />
+      ) : (
+        <WhatRetirementMeans onClickCancel={onClickBackToDashboard} />
+      )}
     </CenteredBoxPageWrapper>
   );
 };