From 9b2f2bcbc0fa800ab527de45747fdef6aec7a04e 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 6a81c409b..6303146a2 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 94c7b9ee8..638acd9cb 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 2e6acdebb..2ef784b41 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 4c66d325a..0eaad74af 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 28cc2a557..92e43b3e5 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 062f8b566..74f9de0fc 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 967863ecf..d18c1b4b8 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",