feat/update-drep-registration-data

govtool/frontend/src/App.tsx

@@ -25,7 +25,7 @@ import {
   RegisterAsSoleVoter,
   RetireAsDrep,
   RetireAsSoleVoter,
-  UpdatedRepMetadata,
+  EditDRepMetadata,
 } from "@pages";
 import { SetupInterceptors } from "@services";
 import {
@@ -118,7 +118,7 @@ export default () => {
         />
         <Route path={PATHS.retireAsSoleVoter} element={<RetireAsSoleVoter />} />
         <Route path={PATHS.stakeKeys} element={<ChooseStakeKey />} />
-        <Route path={PATHS.updateMetadata} element={<UpdatedRepMetadata />} />
+        <Route path={PATHS.editDrepMetadata} element={<EditDRepMetadata />} />
         <Route path="*" element={<ErrorPage />} />
         <Route path={PATHS.error} element={<ErrorPage />} />
       </Routes>

govtool/frontend/src/components/organisms/DashboardCards/DRepDashboardCard.tsx

@@ -70,7 +70,7 @@ export const DRepDashboardCard = ({
           {
             children: t("dashboard.registration.changeMetadata"),
             dataTestId: "change-metadata-button",
-            onClick: () => navigate(PATHS.updateMetadata),
+            onClick: () => navigate(PATHS.editDrepMetadata),
             variant: "text",
           },
         ],
@@ -84,7 +84,11 @@ export const DRepDashboardCard = ({
     const wasRegisteredOrNotRegisteredButtons: DashboardActionCardProps["buttons"] =
       [
         {
-          children: t("dashboard.registration.register"),
+          children: t(
+            voter.wasRegisteredAsDRep
+              ? "dashboard.registration.reRegister"
+              : "dashboard.registration.register",
+          ),
           dataTestId: "register-button",
           onClick: () => navigate(PATHS.registerAsdRep),
           variant: "contained",
@@ -94,7 +98,7 @@ export const DRepDashboardCard = ({
           dataTestId: "register-learn-more-button",
           onClick: () =>
             openInNewTab(
-              "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
+              "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep",
             ),
         },
       ];

govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx

@@ -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>
+  );
+};

govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepStorageInformation.tsx

@@ -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>
+  );
+};

govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepStoreDataInfo.tsx

@@ -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>
+  );
+};