feat/205-drep-roles-info-page

CHANGELOG.md

@@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+- Create DRep registration page about roles [Issue 205](https://github.com/IntersectMBO/govtool/issues/205)
 - Create Checkbox component. Improve Field and ControlledField [Issue 177](https://github.com/IntersectMBO/govtool/pull/177)
 - Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81)
 - i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80)

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

@@ -0,0 +1,106 @@
+import { useCallback, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { Box } from "@mui/material";
+
+import { Button, LoadingButton } from "@atoms";
+import { PATHS } from "@consts";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { theme } from "@/theme";
+
+import { BgCardProps } from "./types";
+
+export const BgCard = ({
+  actionButtonLabel,
+  backButtonLabel,
+  children,
+  isLoadingActionButton,
+  onClickBackButton,
+  onClickActionButton,
+  sx,
+}: BgCardProps) => {
+  const {
+    palette: { boxShadow2 },
+  } = theme;
+  const { isMobile, screenWidth } = useScreenDimension();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const navigateToDashboard = useCallback(
+    () => navigate(PATHS.dashboard),
+    [navigate]
+  );
+
+  const renderBackButton = useMemo(() => {
+    return (
+      <Button
+        data-testid="back-button"
+        onClick={onClickBackButton ?? navigateToDashboard}
+        size="extraLarge"
+        sx={{
+          px: 6,
+        }}
+        variant="outlined"
+      >
+        {backButtonLabel ?? t("back")}
+      </Button>
+    );
+  }, [isMobile]);
+
+  const renderContinueButton = useMemo(() => {
+    return (
+      <LoadingButton
+        data-testid="retire-button"
+        onClick={onClickActionButton}
+        size="extraLarge"
+        isLoading={isLoadingActionButton}
+        sx={{
+          px: 6,
+        }}
+        variant="contained"
+      >
+        {actionButtonLabel}
+      </LoadingButton>
+    );
+  }, [isLoadingActionButton, isMobile]);
+
+  return (
+    <Box
+      height={isMobile ? "100%" : "auto"}
+      sx={{
+        alignItems: screenWidth >= 768 ? "center" : "inherit",
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        marginTop: isMobile ? "97px" : "137px",
+      }}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        flex={isMobile ? 1 : undefined}
+        borderRadius="20px"
+        boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
+        height="auto"
+        maxWidth={screenWidth > 768 ? 600 : undefined}
+        mb={isMobile ? undefined : 3}
+        pb={isMobile ? undefined : 10}
+        pt={isMobile ? 6 : 10}
+        px={isMobile ? 2 : 18.75}
+        sx={sx}
+      >
+        <Box display="flex" flex={1} flexDirection="column">
+          {children}
+        </Box>
+        <Box
+          display="flex"
+          flexDirection={isMobile ? "column-reverse" : "row"}
+          gap={isMobile ? 3 : 0}
+          justifyContent="space-between"
+        >
+          {renderBackButton}
+          {renderContinueButton}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,139 +1,67 @@
-import { Dispatch, SetStateAction, useMemo } from "react";
-import { useNavigate } from "react-router-dom";
-import { Box, Link } from "@mui/material";
+import { Dispatch, SetStateAction, useCallback } from "react";
+import { Trans } from "react-i18next";
+import { Link } from "@mui/material";
 
-import { Button, Spacer, Typography } from "@atoms";
-import { PATHS } from "@consts";
+import { Typography } from "@atoms";
+import { useScreenDimension, useTranslation } from "@hooks";
 import {
-  useScreenDimension,
-  useRegisterAsdRepFormContext,
-  useTranslation,
-} from "@hooks";
-import { theme } from "@/theme";
-import { openInNewTab } from "@utils";
+  correctAdaFormat,
+  getItemFromLocalStorage,
+  openInNewTab,
+  PROTOCOL_PARAMS_KEY,
+} from "@utils";
 
-import { ControlledField } from ".";
+import { BgCard } from ".";
 
-interface Props {
+export const RegisterAsdRepStepOne = ({
+  setStep,
+}: {
   setStep: Dispatch<SetStateAction<number>>;
-}
-
-export const RegisterAsdRepStepOne = ({ setStep }: Props) => {
-  const navigate = useNavigate();
+}) => {
   const { t } = useTranslation();
-  const {
-    palette: { boxShadow2 },
-  } = theme;
-  const { isMobile, pagePadding, screenWidth } = useScreenDimension();
-  const { control, errors, isValid, showSubmitButton } =
-    useRegisterAsdRepFormContext();
+  const { isMobile } = useScreenDimension();
 
-  const renderCancelButton = useMemo(() => {
-    return (
-      <Button
-        data-testid={"cancel-button"}
-        onClick={() => navigate(PATHS.dashboard)}
-        size="extraLarge"
-        sx={{
-          px: 6,
-          width: isMobile ? "100%" : "auto",
-        }}
-        variant="outlined"
-      >
-        {t("cancel")}
-      </Button>
-    );
-  }, [isMobile]);
+  const deposit = getItemFromLocalStorage(PROTOCOL_PARAMS_KEY);
 
-  const renderConfirmButton = useMemo(() => {
-    return (
-      <Button
-        data-testid={
-          showSubmitButton && isValid ? "confirm-button" : "skip-button"
-        }
-        disabled={!isValid}
-        onClick={() => setStep(2)}
-        size="extraLarge"
-        sx={{
-          px: 6,
-          width: isMobile ? "100%" : "154px",
-        }}
-        variant="contained"
-      >
-        {showSubmitButton ? t("confirm") : t("skip")}
-      </Button>
-    );
-  }, [isMobile, isValid, showSubmitButton]);
+  const onClickContinue = useCallback(() => setStep(2), []);
+
+  const openLearMoreAboutDrep = useCallback(
+    () => openInNewTab("https://sancho.network/roles/drep"),
+    []
+  );
 
   return (
-    <Box
-      width={screenWidth < 768 ? "auto" : screenWidth < 1024 ? "60vw" : "45vw"}
-      boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
-      px={pagePadding}
-      py={isMobile ? 4 : 8}
-      borderRadius={"20px"}
-      mb={isMobile ? 0 : 6}
-      height={"100%"}
+    <BgCard
+      actionButtonLabel={t("continue")}
+      backButtonLabel={t("cancel")}
+      onClickActionButton={onClickContinue}
+      sx={{ paddingBottom: isMobile ? undefined : 3 }}
     >
-      <Box display="flex" flexDirection="column" alignItems="center">
-        <Typography
-          color="accentOrange"
-          sx={{ letterSpacing: 1.5, textAlign: "center" }}
-          variant="body1"
-        >
-          {t("registration.optional")}
-        </Typography>
-        <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
-          {t("registration.headingStepOne")}
-        </Typography>
-        <Typography
-          fontWeight={400}
-          sx={{ mb: 7, mt: 3, textAlign: "center" }}
-          variant="body1"
-        >
-          {t("registration.descriptionStepOne")}
-        </Typography>
-        <ControlledField.Input
-          {...{ control, errors }}
-          dataTestId="url-input"
-          layoutStyles={{ width: isMobile ? "100%" : "70%" }}
-          name="url"
-          placeholder={t("forms.urlWithInfoPlaceholder")}
-        />
-        <Spacer y={6} />
-        <ControlledField.Input
-          {...{ control, errors }}
-          dataTestId="hash-input"
-          layoutStyles={{ width: isMobile ? "100%" : "70%" }}
-          name="hash"
-          placeholder={t("forms.hashPlaceholder")}
-        />
-        <Link
-          data-testid={"how-to-create-link"}
-          onClick={() =>
-            openInNewTab(
-              "https://docs.sanchogov.tools/faqs/how-to-create-a-metadata-anchor"
-            )
-          }
-          alignSelf={"center"}
-          mt={5}
-          sx={{ cursor: "pointer" }}
-        >
-          <Typography fontWeight={500} color="primary" variant="body1">
-            {t("forms.howCreateUrlAndHash")}
-          </Typography>
-        </Link>
-      </Box>
-      <Box
-        display={"flex"}
-        flexDirection={isMobile ? "column" : "row"}
-        justifyContent={"space-between"}
-        mt={6}
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("registration.rolesAndResponsibilitiesTitle")}
+      </Typography>
+      <Typography
+        fontWeight={400}
+        sx={{
+          pb: isMobile ? 6 : 4,
+          pt: 4,
+          textAlign: "center",
+          whiteSpace: "pre-line",
+        }}
+        variant="body1"
       >
-        {isMobile ? renderConfirmButton : renderCancelButton}
-        <Box px={2} py={isMobile ? 1.5 : 0} />
-        {isMobile ? renderCancelButton : renderConfirmButton}
-      </Box>
-    </Box>
+        <Trans
+          components={[
+            <Link
+              key="1"
+              onClick={openLearMoreAboutDrep}
+              sx={{ cursor: "pointer" }}
+            />,
+          ]}
+          i18nKey={"registration.rolesAndResponsibilitiesDescription"}
+          values={{ deposit: correctAdaFormat(deposit.drep_deposit) }}
+        />
+      </Typography>
+    </BgCard>
   );
 };

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

@@ -0,0 +1,50 @@
+import { Dispatch, SetStateAction, useCallback } from "react";
+import { Box } from "@mui/material";
+
+import { Typography } from "@atoms";
+import {
+  useRegisterAsdRepFormContext,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
+
+import { BgCard } from ".";
+
+interface Props {
+  setStep: Dispatch<SetStateAction<number>>;
+}
+
+export const RegisterAsdRepStepThree = ({ setStep }: Props) => {
+  const { isLoading, submitForm } = useRegisterAsdRepFormContext();
+  const { isMobile } = useScreenDimension();
+  const { t } = useTranslation();
+
+  const onClickBackButton = useCallback(() => setStep(2), []);
+
+  return (
+    <BgCard
+      actionButtonLabel={t("registration.register")}
+      isLoadingActionButton={isLoading}
+      onClickActionButton={submitForm}
+      onClickBackButton={onClickBackButton}
+    >
+      <Box display="flex" flexDirection="column">
+        <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
+          {t("registration.headingStepTwo")}
+        </Typography>
+        <Typography
+          fontWeight={400}
+          sx={{
+            mb: 7,
+            mt: isMobile ? 4 : 10,
+            textAlign: "center",
+            whiteSpace: "pre-line",
+          }}
+          variant="body1"
+        >
+          {t("registration.descriptionStepTwo")}
+        </Typography>
+      </Box>
+    </BgCard>
+  );
+};