-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #577 from IntersectMBO/feat/update-drep-registrati…
…on-data feat/update-drep-registration-data
- Loading branch information
Showing
20 changed files
with
769 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
152 changes: 152 additions & 0 deletions
152
govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import { Dispatch, SetStateAction, useCallback } from "react"; | ||
| import { useFieldArray } from "react-hook-form"; | ||
| import { Box } from "@mui/material"; | ||
| import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; | ||
|
|
||
| import { Button, InfoText, Spacer, Typography } from "@atoms"; | ||
| import { Placeholders, Rules } from "@consts"; | ||
| import { | ||
| useEditDRepInfoForm, | ||
| useScreenDimension, | ||
| useTranslation, | ||
| } from "@hooks"; | ||
|
|
||
| import { BgCard, ControlledField } from ".."; | ||
|
|
||
| const MAX_NUMBER_OF_LINKS = 7; | ||
|
|
||
| export const EditDRepForm = ({ | ||
| onClickCancel, | ||
| setStep, | ||
| }: { | ||
| onClickCancel: () => void; | ||
| setStep: Dispatch<SetStateAction<number>>; | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
| const { isMobile } = useScreenDimension(); | ||
| const { control, errors, isError, register, watch } = useEditDRepInfoForm(); | ||
| const { | ||
| append, | ||
| fields: links, | ||
| remove, | ||
| } = useFieldArray({ | ||
| control, | ||
| name: "links", | ||
| }); | ||
|
|
||
| const onClickContinue = () => setStep(2); | ||
|
|
||
| const addLink = useCallback(() => append({ link: "" }), [append]); | ||
|
|
||
| const removeLink = useCallback((index: number) => remove(index), [remove]); | ||
|
|
||
| const isContinueButtonDisabled = !watch("dRepName") || isError; | ||
|
|
||
| const renderLinks = useCallback( | ||
| () => | ||
| links.map((field, index) => ( | ||
| <ControlledField.Input | ||
| {...register(`links.${index}.link`)} | ||
| errors={errors} | ||
| endAdornment={ | ||
| links.length > 1 ? ( | ||
| <DeleteOutlineIcon | ||
| color="primary" | ||
| sx={{ cursor: "pointer", height: 24, with: 24 }} | ||
| onClick={() => removeLink(index)} | ||
| /> | ||
| ) : null | ||
| } | ||
| key={field.id} | ||
| // prefer-template rule for that label makes no sense | ||
| // eslint-disable-next-line prefer-template | ||
| label={t("forms.link") + ` ${index + 1}`} | ||
| layoutStyles={{ mb: 3 }} | ||
| placeholder={Placeholders.LINK} | ||
| name={`links.${index}.link`} | ||
| rules={Rules.LINK} | ||
| /> | ||
| )), | ||
| [errors, links], | ||
| ); | ||
|
|
||
| return ( | ||
| <BgCard | ||
| actionButtonLabel={t("continue")} | ||
| backButtonLabel={t("cancel")} | ||
| onClickActionButton={onClickContinue} | ||
| onClickBackButton={onClickCancel} | ||
| isActionButtonDisabled={isContinueButtonDisabled} | ||
| sx={{ pb: isMobile ? undefined : 6, pt: isMobile ? 4 : 8 }} | ||
| > | ||
| <Box textAlign="center"> | ||
| <InfoText label={t("editMetadata.required")} /> | ||
| <Typography sx={{ mt: 0.5, mb: isMobile ? 3 : 4 }} variant="headline4"> | ||
| {t("editMetadata.dRepName")} | ||
| </Typography> | ||
| <Typography fontWeight={400} sx={{ mb: 4 }} variant="body1"> | ||
| {t("editMetadata.dRepNameDescription")} | ||
| </Typography> | ||
| </Box> | ||
| <ControlledField.Input | ||
| {...{ control, errors }} | ||
| helpfulText={t("forms.editMetadata.dRepNameHelpfulText")} | ||
| label={t("forms.editMetadata.dRepName")} | ||
| name="dRepName" | ||
| rules={Rules.DREP_NAME} | ||
| placeholder={t("forms.editMetadata.dRepNamePlaceholder")} | ||
| /> | ||
| <Spacer y={isMobile ? 5 : 6} /> | ||
| <Box textAlign="center"> | ||
| <InfoText label={t("editMetadata.optional")} /> | ||
| <Typography sx={{ mt: 0.5, mb: isMobile ? 3 : 4 }} variant="headline4"> | ||
| {t("editMetadata.aboutYou")} | ||
| </Typography> | ||
| <Typography fontWeight={400} sx={{ mb: 4 }} variant="body1"> | ||
| {t("editMetadata.aboutYouDescription")} | ||
| </Typography> | ||
| </Box> | ||
| <ControlledField.Input | ||
| {...{ control, errors }} | ||
| label={t("forms.editMetadata.email")} | ||
| name="email" | ||
| placeholder={t("forms.editMetadata.emailPlaceholder")} | ||
| rules={Rules.EMAIL} | ||
| /> | ||
| <Spacer y={3} /> | ||
| <ControlledField.TextArea | ||
| {...{ control, errors }} | ||
| label={t("forms.editMetadata.bio")} | ||
| name="bio" | ||
| placeholder={t("forms.editMetadata.bioPlaceholder")} | ||
| helpfulText={t("forms.editMetadata.bioHelpfulText")} | ||
| rules={Rules.BIO} | ||
| /> | ||
| <Spacer y={4} /> | ||
| <p | ||
| style={{ | ||
| fontFamily: "Poppins", | ||
| fontSize: 16, | ||
| fontWeight: 600, | ||
| textAlign: "center", | ||
| margin: 0, | ||
| }} | ||
| > | ||
| {t("editMetadata.linksDescription")} | ||
| <span style={{ fontSize: 16, fontWeight: 400 }}> | ||
| {t("editMetadata.maximumLinks", { | ||
| numberOfLinks: MAX_NUMBER_OF_LINKS, | ||
| })} | ||
| </span> | ||
| </p> | ||
| <Spacer y={3} /> | ||
| {renderLinks()} | ||
| {links?.length < MAX_NUMBER_OF_LINKS ? ( | ||
| <Button onClick={addLink} size="extraLarge" variant="text"> | ||
| {t("addLink")} | ||
| </Button> | ||
| ) : null} | ||
| <Spacer y={isMobile ? 4 : 6} /> | ||
| </BgCard> | ||
| ); | ||
| }; |
129 changes: 129 additions & 0 deletions
129
govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepStorageInformation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import { Dispatch, SetStateAction, useEffect } from "react"; | ||
| import { Box } from "@mui/material"; | ||
| import OpenInNewIcon from "@mui/icons-material/OpenInNew"; | ||
|
|
||
| import { Button, Spacer, Typography } from "@atoms"; | ||
| import { ICONS, Rules } from "@consts"; | ||
| import { | ||
| useEditDRepInfoForm, | ||
| useTranslation, | ||
| useScreenDimension, | ||
| } from "@hooks"; | ||
| import { Step } from "@molecules"; | ||
| import { BgCard, ControlledField } from "@organisms"; | ||
| import { openInNewTab } from "@utils"; | ||
|
|
||
| type StorageInformationProps = { | ||
| setStep: Dispatch<SetStateAction<number>>; | ||
| }; | ||
|
|
||
| export const EditDRepStorageInformation = ({ | ||
| setStep, | ||
| }: StorageInformationProps) => { | ||
| const { t } = useTranslation(); | ||
| const { | ||
| control, | ||
| errors, | ||
| generateMetadata, | ||
| getValues, | ||
| isEditDRepMetadataLoading, | ||
| onClickDownloadJson, | ||
| editDRepInfo, | ||
| watch, | ||
| } = useEditDRepInfoForm(); | ||
| const { screenWidth } = useScreenDimension(); | ||
|
|
||
| const fileName = getValues("dRepName"); | ||
|
|
||
| // TODO: Change link to correct | ||
| const openGuideAboutStoringInformation = () => | ||
| openInNewTab("https://sancho.network/"); | ||
|
|
||
| const isActionButtonDisabled = !watch("storingURL") || !!errors.storingURL; | ||
|
|
||
| const onClickBack = () => setStep(2); | ||
|
|
||
| useEffect(() => { | ||
| generateMetadata(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <BgCard | ||
| actionButtonLabel={t("submit")} | ||
| backButtonLabel={t("back")} | ||
| isActionButtonDisabled={isActionButtonDisabled} | ||
| onClickActionButton={editDRepInfo} | ||
| onClickBackButton={onClickBack} | ||
| isLoadingActionButton={isEditDRepMetadataLoading} | ||
| > | ||
| <Typography sx={{ textAlign: "center" }} variant="headline4"> | ||
| {t("editMetadata.storingInformationTitle")} | ||
| </Typography> | ||
| <Button | ||
| endIcon={ | ||
| <OpenInNewIcon | ||
| sx={{ | ||
| color: "primary", | ||
| height: 17, | ||
| width: 17, | ||
| }} | ||
| /> | ||
| } | ||
| onClick={openGuideAboutStoringInformation} | ||
| size="extraLarge" | ||
| sx={{ alignSelf: "center", width: "fit-content" }} | ||
| variant="text" | ||
| > | ||
| {t("editMetadata.storingInformationStep2Link")} | ||
| </Button> | ||
| <Typography fontWeight={400} sx={{ textAlign: "center" }} variant="body1"> | ||
| {t("editMetadata.storingInformationDescription")} | ||
| </Typography> | ||
| <Box sx={{ my: 4 }}> | ||
| <Step | ||
| component={ | ||
| <Button | ||
| onClick={onClickDownloadJson} | ||
| size="extraLarge" | ||
| startIcon={<img alt="download" src={ICONS.download} />} | ||
| sx={{ | ||
| width: "fit-content", | ||
| ml: screenWidth < 1024 ? 0 : 1.75, | ||
| mt: screenWidth < 1024 ? 1.5 : 0, | ||
| }} | ||
| variant="outlined" | ||
| > | ||
| {`${fileName}.jsonld`} | ||
| </Button> | ||
| } | ||
| label={t("editMetadata.storingInformationStep1Label")} | ||
| componentsLayoutStyles={{ | ||
| alignItems: screenWidth < 1024 ? undefined : "center", | ||
| flexDirection: screenWidth < 1024 ? "column" : "row", | ||
| }} | ||
| stepNumber={1} | ||
| /> | ||
| <Spacer y={6} /> | ||
| <Step | ||
| layoutStyles={{ alignItems: "center" }} | ||
| label={t("editMetadata.storingInformationStep2Label")} | ||
| stepNumber={2} | ||
| /> | ||
| <Spacer y={6} /> | ||
| <Step | ||
| component={ | ||
| <ControlledField.Input | ||
| {...{ control, errors }} | ||
| layoutStyles={{ mt: 1.5 }} | ||
| name="storingURL" | ||
| placeholder={t("editMetadata.storingInformationURLPlaceholder")} | ||
| rules={Rules.STORING_LINK} | ||
| /> | ||
| } | ||
| label={t("editMetadata.storingInformationStep3Label")} | ||
| stepNumber={3} | ||
| /> | ||
| </Box> | ||
| </BgCard> | ||
| ); | ||
| }; |
65 changes: 65 additions & 0 deletions
65
govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepStoreDataInfo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Dispatch, SetStateAction } from "react"; | ||
| import { Box, Link } from "@mui/material"; | ||
|
|
||
| import { Spacer, Typography } from "@atoms"; | ||
| import { | ||
| useScreenDimension, | ||
| useTranslation, | ||
| useEditDRepInfoForm, | ||
| } from "@hooks"; | ||
| import { openInNewTab } from "@utils"; | ||
|
|
||
| import { BgCard, ControlledField } from ".."; | ||
|
|
||
| export const EditDRepStoreDataInfo = ({ | ||
| setStep, | ||
| }: { | ||
| setStep: Dispatch<SetStateAction<number>>; | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
| const { isMobile } = useScreenDimension(); | ||
| const { control, errors, watch } = useEditDRepInfoForm(); | ||
|
|
||
| const onClickBackButton = () => setStep(1); | ||
|
|
||
| const onClickContinue = () => setStep(3); | ||
|
|
||
| const isContinueDisabled = !watch("storeData"); | ||
|
|
||
| // TODO: Add link about store data when available | ||
| const openLink = () => openInNewTab("https://sancho.network/get-started"); | ||
|
|
||
| return ( | ||
| <BgCard | ||
| actionButtonLabel={t("register")} | ||
| isActionButtonDisabled={isContinueDisabled} | ||
| onClickActionButton={onClickContinue} | ||
| onClickBackButton={onClickBackButton} | ||
| > | ||
| <Typography sx={{ textAlign: "center" }} variant="headline4"> | ||
| {t("editMetadata.storeDataTitle")} | ||
| </Typography> | ||
| <Link | ||
| onClick={openLink} | ||
| sx={{ | ||
| cursor: "pointer", | ||
| fontSize: 16, | ||
| fontWeight: 500, | ||
| fontFamily: "Poppins", | ||
| my: 4, | ||
| textAlign: "center", | ||
| textDecoration: "none", | ||
| }} | ||
| > | ||
| {t("editMetadata.storeDataLink")} | ||
| </Link> | ||
| <ControlledField.Checkbox | ||
| {...{ control, errors }} | ||
| name="storeData" | ||
| label={t("editMetadata.storeDataCheckboxLabel")} | ||
| /> | ||
| <Spacer y={isMobile ? 4 : 12.5} /> | ||
| <Box display="flex" flex={1} /> | ||
| </BgCard> | ||
| ); | ||
| }; |
Oops, something went wrong.