[#152] change step 3 components

IntersectMBO · Feb 28, 2024 · 1293672 · 1293672
1 parent d2cd92f
commit 1293672
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+- Change step 3 components [Issue 152](https://github.com/intersectMBO/govtool/issues/152)
 - Add possibility to vote on behalf of myself - Sole Voter [Issue 119](https://github.com/IntersectMBO/govtool/issues/119)
 - 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)

diff --git a/govtool/frontend/src/components/organisms/BgCard.tsx b/govtool/frontend/src/components/organisms/BgCard.tsx
@@ -14,6 +14,7 @@ export const BgCard = ({
   backButtonLabel,
   children,
   isLoadingActionButton,
+  isActionButtonDisabled,
   onClickBackButton,
   onClickActionButton,
   sx,
@@ -50,9 +51,10 @@ export const BgCard = ({
     return (
       <LoadingButton
         data-testid="retire-button"
+        disabled={isActionButtonDisabled}
+        isLoading={isLoadingActionButton}
         onClick={onClickActionButton}
         size="extraLarge"
-        isLoading={isLoadingActionButton}
         sx={{
           px: 6,
         }}
@@ -61,7 +63,12 @@ export const BgCard = ({
         {actionButtonLabel}
       </LoadingButton>
     );
-  }, [isLoadingActionButton, isMobile, actionButtonLabel]);
+  }, [
+    actionButtonLabel,
+    isActionButtonDisabled,
+    isLoadingActionButton,
+    isMobile,
+  ]);
 
   return (
     <Box

diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx
@@ -1,50 +1,65 @@
-import { Dispatch, SetStateAction, useCallback } from "react";
-import { Box } from "@mui/material";
+import { Dispatch, SetStateAction } from "react";
+import { Box, Link } from "@mui/material";
 
-import { Typography } from "@atoms";
+import { Spacer, Typography } from "@atoms";
 import {
   useRegisterAsdRepFormContext,
   useScreenDimension,
   useTranslation,
 } from "@hooks";
+import { openInNewTab } from "@utils";
 
-import { BgCard } from ".";
+import { BgCard, ControlledField } from ".";
 
-interface Props {
+export const RegisterAsdRepStepThree = ({
+  setStep,
+}: {
   setStep: Dispatch<SetStateAction<number>>;
-}
-
-export const RegisterAsdRepStepThree = ({ setStep }: Props) => {
-  const { isLoading, submitForm } = useRegisterAsdRepFormContext();
-  const { isMobile } = useScreenDimension();
+}) => {
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+  const { control, errors, submitForm, isRegistrationAsDRepLoading, watch } =
+    useRegisterAsdRepFormContext();
+
+  const onClickBackButton = () => setStep(2);
+
+  const isContinueDisabled = !watch("storeData");
 
-  const onClickBackButton = useCallback(() => setStep(2), []);
+  // TODO: Add link about store data when available
+  const openLink = () => openInNewTab("https://sancho.network/get-started");
 
   return (
     <BgCard
-      actionButtonLabel={t("registration.register")}
-      isLoadingActionButton={isLoading}
+      actionButtonLabel={t("continue")}
+      isActionButtonDisabled={isContinueDisabled}
+      isLoadingActionButton={isRegistrationAsDRepLoading}
       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>
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("registration.storeDataTitle")}
+      </Typography>
+      <Link
+        onClick={openLink}
+        sx={{
+          cursor: "pointer",
+          fontSize: 16,
+          fontWeight: 500,
+          fontFamily: "Poppins",
+          my: 4,
+          textAlign: "center",
+          textDecoration: "none",
+        }}
+      >
+        {t("registration.storeDataLink")}
+      </Link>
+      <ControlledField.Checkbox
+        {...{ control, errors }}
+        name="storeData"
+        label={t("registration.storeDataCheckboxLabel")}
+      />
+      <Spacer y={isMobile ? 4 : 12.5} />
+      <Box display="flex" flex={1} />
     </BgCard>
   );
 };
diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx
@@ -18,15 +18,15 @@ interface Props {
 export const RegisterAsdRepStepTwo = ({ setStep }: Props) => {
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
-  const { showSubmitButton, control, errors } = useRegisterAsdRepFormContext();
+  const { control, errors } = useRegisterAsdRepFormContext();
 
   const onClickContinue = useCallback(() => setStep(3), []);
 
   const onClickBackButton = useCallback(() => setStep(1), []);
 
   return (
     <BgCard
-      actionButtonLabel={showSubmitButton ? t("continue") : t("skip")}
+      actionButtonLabel={t("continue")}
       onClickActionButton={onClickContinue}
       onClickBackButton={onClickBackButton}
     >

diff --git a/govtool/frontend/src/components/organisms/types.ts b/govtool/frontend/src/components/organisms/types.ts
@@ -5,6 +5,7 @@ export type BgCardProps = {
   backButtonLabel?: string;
   children: React.ReactNode;
   isLoadingActionButton?: boolean;
+  isActionButtonDisabled?:boolean;
   onClickBackButton?: () => void;
   onClickActionButton: () => void;
   sx?: SxProps;

diff --git a/govtool/frontend/src/hooks/forms/useRegisterAsdRepFormContext.tsx b/govtool/frontend/src/hooks/forms/useRegisterAsdRepFormContext.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useFormContext, useWatch } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 
 import { PATHS } from "@consts";
 import { useCardano, useModal } from "@context";
@@ -22,16 +22,9 @@ export const useRegisterAsdRepFormContext = () => {
     control,
     handleSubmit,
     formState: { errors, isValid },
+    watch,
   } = useFormContext<UrlAndHashFormValues>();
 
-  const watch = useWatch({
-    control,
-  });
-
-  const isUrlNullOrFilledIn = watch.url !== "" && watch.url !== null;
-  const isHashNullOrFilledIn = watch.hash !== "" && watch.hash !== null;
-  const showSubmitButton = isUrlNullOrFilledIn || isHashNullOrFilledIn;
-
   const onSubmit = useCallback(
     async (values: UrlAndHashFormValues) => {
       const { url, hash } = values;
@@ -95,11 +88,11 @@ export const useRegisterAsdRepFormContext = () => {
   );
 
   return {
-    isLoading,
+    isRegistrationAsDRepLoading: isLoading,
     control,
     errors,
     isValid,
-    showSubmitButton,
+    watch,
     submitForm: handleSubmit(onSubmit),
   };
 };
diff --git a/govtool/frontend/src/hooks/forms/useUrlAndHashFormController.tsx b/govtool/frontend/src/hooks/forms/useUrlAndHashFormController.tsx
@@ -6,8 +6,9 @@ import { HASH_REGEX, URL_REGEX } from "@utils";
 import { useTranslation } from "@hooks";
 
 export interface UrlAndHashFormValues {
-  url?: string;
   hash?: string;
+  storeData?: boolean;
+  url?: string;
 }
 
 export const useUrlAndHashFormController = () => {
@@ -42,12 +43,13 @@ export const useUrlAndHashFormController = () => {
               return !value || HASH_REGEX.test(value);
             }
           ),
+        storeData: Yup.boolean(),
       }),
     []
   );
 
   return useForm<UrlAndHashFormValues>({
-    defaultValues: { url: "", hash: "" },
+    defaultValues: { url: "", hash: "", storeData: false },
     mode: "onChange",
     resolver: yupResolver<UrlAndHashFormValues>(validationSchema),
   });

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -327,6 +327,10 @@ export const en = {
       rolesAndResponsibilitiesDescription:
         "DReps are fundamental users that govern the Cardano network. This is an important role which requires work and dedication to fulfil.\n\nA DRep is expected to actively participate in governance and act as a representative of other Cardano members in  governance matters. Therefore, DReps will be expected to keep abreast of Governance Actions so they can make informed and wise decisions.\n<0>Learn More</0> about DRep.\n\nPlease register as a DRep if you have time to dedicate to making Cardano a better and more well-governed place.\n\nBecoming a DRep will require a refundable deposit of ₳<strong>{{deposit}}</strong>.\n\nYou will be refunded your deposit when you retire.",
       rolesAndResponsibilitiesTitle: "Roles & Responsibilities",
+      storeDataCheckboxLabel:
+        "I agree to store correctly this information and to maintain them over the years",
+      storeDataLink: "Learn more about storing information",
+      storeDataTitle: "Store and maintain the data yourself",
     },
     slider: {
       showAll: "Show all",