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 1/4] [#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", From 554222ecb18d290be94018f6e7f111dba43e6b56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= Date: Wed, 28 Feb 2024 17:03:59 +0100 Subject: [PATCH 2/4] [#152] improve form --- .../src/components/organisms/RegisterAsdRepStepTwo.tsx | 5 +++-- .../src/hooks/forms/useRegisterAsdRepFormContext.tsx | 6 ++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx index 2ef784b41..40a673b9b 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 { control, errors } = useRegisterAsdRepFormContext(); + const { control, errors,isContinueButtonDisabled, isSkipButton } = useRegisterAsdRepFormContext(); const onClickContinue = useCallback(() => setStep(3), []); @@ -26,8 +26,9 @@ export const RegisterAsdRepStepTwo = ({ setStep }: Props) => { return ( { watch, } = useFormContext(); + const isSkipButton = !watch('hash')?.trim() && !watch("url")?.trim() + + const isContinueButtonDisabled = !!Object.keys(errors).length + const onSubmit = useCallback( async (values: UrlAndHashFormValues) => { const { url, hash } = values; @@ -92,6 +96,8 @@ export const useRegisterAsdRepFormContext = () => { control, errors, isValid, + isContinueButtonDisabled, + isSkipButton, watch, submitForm: handleSubmit(onSubmit), }; From fc27fbddf58d900f02fc7d263ceb01bc9cc083db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= Date: Wed, 28 Feb 2024 17:52:42 +0100 Subject: [PATCH 3/4] [#152] fix inprogress copy --- .../frontend/src/components/molecules/DashboardActionCard.tsx | 4 ++-- govtool/frontend/src/i18n/locales/en.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx index d394c12a4..b654d61a3 100644 --- a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx +++ b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx @@ -84,7 +84,7 @@ export const DashboardActionCard: FC = ({ }} > - {t("inProgress").toLocaleUpperCase()} + {t("inProgress")} )} @@ -113,7 +113,7 @@ export const DashboardActionCard: FC = ({ ) : null} {inProgress && !isLoading ? ( - In Progress + {t("inProgress")} ) : null} {description ? ( diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index d18c1b4b8..b6a35cbb6 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -426,7 +426,7 @@ export const en = { continue: "Continue", delegate: "Delegate", here: "here", - inProgress: "In progress", + inProgress: "In Progress", learnMore: "Learn more", loading: "Loading...", myDRepId: "My DRep ID:", From 63fc880f235cee432dd4360495150497166ae7f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= Date: Wed, 28 Feb 2024 18:29:49 +0100 Subject: [PATCH 4/4] [#152] change continue on register/ reset store data agreement when back to previous step --- .../organisms/RegisterAsdRepStepThree.tsx | 17 +++++++++++++---- .../organisms/RegisterAsdRepStepTwo.tsx | 3 ++- .../forms/useRegisterAsdRepFormContext.tsx | 12 +++++++----- govtool/frontend/src/i18n/locales/en.ts | 5 +++-- 4 files changed, 25 insertions(+), 12 deletions(-) diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx index 5fd57ad08..6b5a3df4d 100644 --- a/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx +++ b/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx @@ -18,10 +18,19 @@ export const RegisterAsdRepStepThree = ({ }) => { const { t } = useTranslation(); const { isMobile } = useScreenDimension(); - const { control, errors, submitForm, isRegistrationAsDRepLoading, watch } = - useRegisterAsdRepFormContext(); + const { + control, + errors, + isRegistrationAsDRepLoading, + resetField, + submitForm, + watch, + } = useRegisterAsdRepFormContext(); - const onClickBackButton = () => setStep(2); + const onClickBackButton = () => { + setStep(2); + resetField("storeData"); + }; const isContinueDisabled = !watch("storeData"); @@ -30,7 +39,7 @@ export const RegisterAsdRepStepThree = ({ return ( { const { t } = useTranslation(); const { isMobile } = useScreenDimension(); - const { control, errors,isContinueButtonDisabled, isSkipButton } = useRegisterAsdRepFormContext(); + const { control, errors, isContinueButtonDisabled, isSkipButton } = + useRegisterAsdRepFormContext(); const onClickContinue = useCallback(() => setStep(3), []); diff --git a/govtool/frontend/src/hooks/forms/useRegisterAsdRepFormContext.tsx b/govtool/frontend/src/hooks/forms/useRegisterAsdRepFormContext.tsx index 575e4ce6a..504680a0e 100644 --- a/govtool/frontend/src/hooks/forms/useRegisterAsdRepFormContext.tsx +++ b/govtool/frontend/src/hooks/forms/useRegisterAsdRepFormContext.tsx @@ -22,12 +22,13 @@ export const useRegisterAsdRepFormContext = () => { control, handleSubmit, formState: { errors, isValid }, + resetField, watch, } = useFormContext(); - const isSkipButton = !watch('hash')?.trim() && !watch("url")?.trim() + const isSkipButton = !watch("hash")?.trim() && !watch("url")?.trim(); - const isContinueButtonDisabled = !!Object.keys(errors).length + const isContinueButtonDisabled = !!Object.keys(errors).length; const onSubmit = useCallback( async (values: UrlAndHashFormValues) => { @@ -92,13 +93,14 @@ export const useRegisterAsdRepFormContext = () => { ); return { - isRegistrationAsDRepLoading: isLoading, control, errors, - isValid, isContinueButtonDisabled, + isRegistrationAsDRepLoading: isLoading, isSkipButton, - watch, + isValid, + resetField, submitForm: handleSubmit(onSubmit), + watch, }; }; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index b6a35cbb6..f205ffcca 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -433,11 +433,12 @@ export const en = { 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",