From 129367223f391a448d7ab3d2a90d963276960140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= Date: Wed, 28 Feb 2024 16:30:38 +0100 Subject: [PATCH] [#152] change step 3 components --- CHANGELOG.md | 1 + .../src/components/organisms/BgCard.tsx | 11 ++- .../organisms/RegisterAsdRepStepThree.tsx | 75 +++++++++++-------- .../organisms/RegisterAsdRepStepTwo.tsx | 4 +- .../src/components/organisms/types.ts | 1 + .../forms/useRegisterAsdRepFormContext.tsx | 15 +--- .../forms/useUrlAndHashFormController.tsx | 6 +- govtool/frontend/src/i18n/locales/en.ts | 4 + 8 files changed, 70 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a81c409..6303146a 100644 --- 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 index 94c7b9ee..638acd9c 100644 --- 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 ( ); - }, [isLoadingActionButton, isMobile, actionButtonLabel]); + }, [ + actionButtonLabel, + isActionButtonDisabled, + isLoadingActionButton, + isMobile, + ]); return ( >; -} - -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 ( - - - {t("registration.headingStepTwo")} - - - {t("registration.descriptionStepTwo")} - - + + {t("registration.storeDataTitle")} + + + {t("registration.storeDataLink")} + + + + ); }; diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx index 2e6acdeb..2ef784b4 100644 --- a/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx +++ b/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx @@ -18,7 +18,7 @@ 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), []); @@ -26,7 +26,7 @@ export const RegisterAsdRepStepTwo = ({ setStep }: Props) => { return ( diff --git a/govtool/frontend/src/components/organisms/types.ts b/govtool/frontend/src/components/organisms/types.ts index 4c66d325..0eaad74a 100644 --- 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 index 28cc2a55..92e43b3e 100644 --- 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(); - 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 index 062f8b56..74f9de0f 100644 --- 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({ - defaultValues: { url: "", hash: "" }, + defaultValues: { url: "", hash: "", storeData: false }, mode: "onChange", resolver: yupResolver(validationSchema), }); diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 967863ec..d18c1b4b 100644 --- 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 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 ₳{{deposit}}.\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",