Merge pull request #348 from IntersectMBO/develop

test: #152
IntersectMBO · Feb 29, 2024 · 9ae8d87 · 9ae8d87
2 parents 79c618e + 63fc880
commit 9ae8d87
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 50 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/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
@@ -84,7 +84,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
           }}
         >
           <Typography color={"orangeDark"} variant="body2">
-            {t("inProgress").toLocaleUpperCase()}
+            {t("inProgress")}
           </Typography>
         </Box>
       )}
@@ -113,7 +113,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
         ) : null}
         {inProgress && !isLoading ? (
           <Typography variant="title2" fontWeight={700}>
-            In Progress
+            {t("inProgress")}
           </Typography>
         ) : null}
         {description ? (

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,74 @@
-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,
+    isRegistrationAsDRepLoading,
+    resetField,
+    submitForm,
+    watch,
+  } = useRegisterAsdRepFormContext();
+
+  const onClickBackButton = () => {
+    setStep(2);
+    resetField("storeData");
+  };
+
+  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("register")}
+      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,16 +18,18 @@ interface Props {
 export const RegisterAsdRepStepTwo = ({ setStep }: Props) => {
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
-  const { showSubmitButton, control, errors } = useRegisterAsdRepFormContext();
+  const { control, errors, isContinueButtonDisabled, isSkipButton } =
+    useRegisterAsdRepFormContext();
 
   const onClickContinue = useCallback(() => setStep(3), []);
 
   const onClickBackButton = useCallback(() => setStep(1), []);
 
   return (
     <BgCard
-      actionButtonLabel={showSubmitButton ? t("continue") : t("skip")}
+      actionButtonLabel={isSkipButton ? t("skip") : t("continue")}
       onClickActionButton={onClickContinue}
+      isActionButtonDisabled={isContinueButtonDisabled}
       onClickBackButton={onClickBackButton}
     >
       <Typography

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,15 +22,13 @@ export const useRegisterAsdRepFormContext = () => {
     control,
     handleSubmit,
     formState: { errors, isValid },
+    resetField,
+    watch,
   } = useFormContext<UrlAndHashFormValues>();
 
-  const watch = useWatch({
-    control,
-  });
+  const isSkipButton = !watch("hash")?.trim() && !watch("url")?.trim();
 
-  const isUrlNullOrFilledIn = watch.url !== "" && watch.url !== null;
-  const isHashNullOrFilledIn = watch.hash !== "" && watch.hash !== null;
-  const showSubmitButton = isUrlNullOrFilledIn || isHashNullOrFilledIn;
+  const isContinueButtonDisabled = !!Object.keys(errors).length;
 
   const onSubmit = useCallback(
     async (values: UrlAndHashFormValues) => {
@@ -95,11 +93,14 @@ export const useRegisterAsdRepFormContext = () => {
   );
 
   return {
-    isLoading,
     control,
     errors,
+    isContinueButtonDisabled,
+    isRegistrationAsDRepLoading: isLoading,
+    isSkipButton,
     isValid,
-    showSubmitButton,
+    resetField,
     submitForm: handleSubmit(onSubmit),
+    watch,
   };
 };
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",
@@ -422,18 +426,19 @@ export const en = {
     continue: "Continue",
     delegate: "Delegate",
     here: "here",
-    inProgress: "In progress",
+    inProgress: "In Progress",
     learnMore: "Learn more",
     loading: "Loading...",
     myDRepId: "My DRep ID:",
     nextStep: "Next step",
     no: "No",
     ok: "Ok",
-    select: "Select",
+    register:"Register",
     seeTransaction: "See transaction",
-    submit: "Submit",
+    select: "Select",
     skip: "Skip",
     sortBy: "Sort by",
+    submit: "Submit",
     thisLink: "this link",
     votingPower: "Voting power:",
     yes: "Yes",