Register as drep step 2

govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx

@@ -1,100 +1,139 @@
-import { Dispatch, SetStateAction, useMemo } from "react";
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
 import { Box } from "@mui/material";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 
-import { LoadingButton, Button, Typography } from "@atoms";
-import { theme } from "@/theme";
+import { Button, InfoText, Spacer, Typography } from "@atoms";
 import {
-  useRegisterAsdRepFormContext,
+  useRegisterAsdRepForm,
   useScreenDimension,
   useTranslation,
 } from "@hooks";
 
-interface Props {
-  setStep: Dispatch<SetStateAction<number>>;
-}
+import { BgCard, ControlledField } from ".";
 
-export const RegisterAsdRepStepTwo = ({ setStep }: Props) => {
-  const {
-    palette: { boxShadow2 },
-  } = theme;
-  const { isLoading, submitForm } = useRegisterAsdRepFormContext();
-  const { isMobile, pagePadding, screenWidth } = useScreenDimension();
+export const RegisterAsdRepStepTwo = ({
+  setStep,
+}: {
+  setStep: Dispatch<SetStateAction<number>>;
+}) => {
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+  const { control, errors } = useRegisterAsdRepForm();
+  const [links, setLinks] = useState<any>([""]);
 
-  const renderBackButton = useMemo(() => {
-    return (
-      <Button
-        data-testid={"back-button"}
-        onClick={() => setStep(1)}
-        size="extraLarge"
-        sx={{
-          px: 6,
-          width: isMobile ? "100%" : "auto",
-        }}
-        variant="outlined"
-      >
-        {t("back")}
-      </Button>
-    );
-  }, [isMobile]);
+  const onClickBackButton = useCallback(() => setStep(1), []);
 
-  const renderRegisterButton = useMemo(() => {
-    return (
-      <LoadingButton
-        data-testid={"register-button"}
-        isLoading={isLoading}
-        onClick={submitForm}
-        sx={{
-          borderRadius: 50,
-          textTransform: "none",
-          px: 6,
-          width: isMobile ? "100%" : "auto",
-          height: 48,
-        }}
-        variant="contained"
-      >
-        {t("registration.register")}
-      </LoadingButton>
-    );
-  }, [isLoading, isMobile, submitForm]);
+  const onClickContinue = useCallback(() => setStep(3), [setStep]);
+
+  const addLink = useCallback(
+    () =>
+      links.length === 7 ? {} : setLinks((prev: string[]) => [...prev, ""]),
+    [links]
+  );
+
+  const removeLink = useCallback(
+    (clickedIndex: number) => {
+      setLinks((prev: string[]) =>
+        prev.filter((_, index) => clickedIndex !== index)
+      );
+    },
+    [links]
+  );
+
+  const renderLinks = useCallback(() => {
+    return links.map((_: any, index: number) => (
+      <>
+        <ControlledField.Input
+          {...{ control, errors }}
+          label={t("forms.link") + ` ${index + 1}`}
+          name={"link" + (index + 1)}
+          endAdornment={
+            <DeleteOutlineIcon
+              color="primary"
+              sx={{ cursor: "pointer", height: 24, with: 24 }}
+              onClick={() => removeLink(index)}
+            />
+          }
+          placeholder={t("forms.linkPlaceholder")}
+        />
+        <Spacer y={3} />
+      </>
+    ));
+  }, [control, errors, links]);
 
   return (
-    <Box
-      width={screenWidth < 768 ? "auto" : screenWidth < 1024 ? "60vw" : "45vw"}
-      boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
-      px={pagePadding}
-      py={isMobile ? 4 : 8}
-      borderRadius={"20px"}
-      mb={isMobile ? 0 : 6}
-      height="100%"
+    <BgCard
+      actionButtonLabel={t("continue")}
+      onClickActionButton={onClickContinue}
+      onClickBackButton={onClickBackButton}
+      title={t("registration.becomeADRep")}
+      sx={{ paddingBottom: isMobile ? 0.5 : 10 }}
     >
-      <Box display="flex" flexDirection="column">
-        <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
-          {t("registration.headingStepTwo")}
+      <Box textAlign="center">
+        <InfoText>{t("registration.required")}</InfoText>
+        <Typography sx={{ mt: 0.5, mb: isMobile ? 3 : 4 }} variant="headline4">
+          {t("registration.dRepName")}
         </Typography>
-        <Typography
-          fontWeight={400}
-          sx={{
-            mb: 7,
-            mt: isMobile ? 4 : 10,
-            textAlign: "center",
-            whiteSpace: "pre-line",
-          }}
-          variant="body1"
-        >
-          {t("registration.descriptionStepTwo")}
+        <Typography fontWeight={400} sx={{ mb: 4 }} variant="body1">
+          {t("registration.dRepNameDescription")}
         </Typography>
       </Box>
-      <Box
-        display="flex"
-        flexDirection={isMobile ? "column" : "row"}
-        justifyContent="space-between"
-        mt={6}
-      >
-        {isMobile ? renderRegisterButton : renderBackButton}
-        <Box px={2} py={isMobile ? 1.5 : 0} />
-        {isMobile ? renderBackButton : renderRegisterButton}
+      <ControlledField.Input
+        {...{ control, errors }}
+        helpfulText={t("forms.dRepNameHelpfulText")}
+        label={t("forms.dRepName")}
+        name="dRepName"
+        placeholder={t("forms.dRepNamePlaceholder")}
+      />
+      <Spacer y={isMobile ? 5 : 6} />
+      <Box textAlign="center">
+        <InfoText>{t("registration.optional")}</InfoText>
+        <Typography sx={{ mt: 0.5, mb: isMobile ? 3 : 4 }} variant="headline4">
+          {t("registration.aboutYou")}
+        </Typography>
+        <Typography fontWeight={400} sx={{ mb: 4 }} variant="body1">
+          {t("registration.aboutYouDescription")}
+        </Typography>
       </Box>
-    </Box>
+      <ControlledField.Input
+        {...{ control, errors }}
+        label={t("forms.email")}
+        name="email"
+        placeholder={t("forms.emailPlaceholder")}
+      />
+      <Spacer y={3} />
+      <ControlledField.TextArea
+        {...{ control, errors }}
+        label={t("forms.bio")}
+        name="bio"
+        placeholder={t("forms.bioPlaceholder")}
+        helpfulText={t("forms.bioHelpfulText")}
+      />
+      <Spacer y={4} />
+      <p
+        style={{
+          fontFamily: "Poppins",
+          fontSize: 16,
+          fontWeight: 600,
+          textAlign: "center",
+          margin: 0,
+        }}
+      >
+        {t("registration.linksDescription")}
+        <span style={{ fontSize: 16, fontWeight: 400 }}>
+          {t("registration.maximumLinks")}
+        </span>
+      </p>
+      <Spacer y={3} />
+      {renderLinks()}
+      <Button
+        onClick={addLink}
+        size="extraLarge"
+        sx={{ mb: isMobile ? 5 : 6 }}
+        variant="text"
+      >
+        + Add link
+      </Button>
+    </BgCard>
   );
 };

govtool/frontend/src/i18n/locales/en.ts

@@ -156,8 +156,19 @@ export const en = {
       privacyPolicy: "Privacy policy",
     },
     forms: {
+      bio: "Bio",
+      bioHelpfulText: "Some sentence about yourself",
+      bioPlaceholder: "Enter your Bio ...",
+      dRepName: "DRep Name",
+      dRepNameHelpfulText:
+        "This is name that will be shown on your DRep profile",
+      dRepNamePlaceholder: "ex. JohnDRep",
+      email: "Email",
+      emailPlaceholder: "[email protected]",
       hashPlaceholder: "The hash of metadata at URL",
       howCreateUrlAndHash: "How to create URL and hash?",
+      link: "Link",
+      linkPlaceholder: "https://www.website.com/",
       urlWithContextPlaceholder: "Your URL with with your context",
       urlWithInfoPlaceholder: "Your URL with extra info about you",
       errors: {
@@ -269,15 +280,24 @@ export const en = {
       },
     },
     registration: {
-      rolesAndResponsibilitiesTitle: "Roles & Responsibilities",
-      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</0> 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 ₳<strong>{{deposit}}</strong>.\n\nYou will be refunded your deposit when you retire.",
+      aboutYou: "About You",
+      aboutYouDescription:
+        "Some extra info about you to provide context to delegators.",
+      becomeADRep: "Become a DRep",
       descriptionStepTwo:
         "By clicking register you create your DRep ID within your wallet and become a DRep.\n\nOnce the registration has completed your DRep ID will be shown on your dashboard. You will be able to share your DRep ID so that other ada holders can delegate their voting power to you.",
+      dRepName: "DRep Name",
+      dRepNameDescription:
+        "This is the name that will be displayed in the DRep Directory and it will be used also by delegators to find your profile.",
       headingStepTwo: "Confirm DRep registration",
-      optional: "OPTIONAL",
+      maximumLinks: "(maximum of 7 entries)",
+      linksDescription: "Links to extra content or social media contacts ",
+      optional: "optional",
       register: "Register",
-      becomeADRep: "Become a DRep",
+      required: "required",
+      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</0> 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 ₳<strong>{{deposit}}</strong>.\n\nYou will be refunded your deposit when you retire.",
+      rolesAndResponsibilitiesTitle: "Roles & Responsibilities",
     },
     slider: {
       showAll: "Show all",