[#362] add review submission page

CHANGELOG.md

@@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+- Create GA review subbmision page [Issue 362](https://github.com/IntersectMBO/govtool/issues/362)
 - Create GA creation form [Issue 360](https://github.com/IntersectMBO/govtool/issues/360)
 - Create TextArea [Issue 110](https://github.com/IntersectMBO/govtool/issues/110)
 - Abandoning registration as DRep [Issue 151](https://github.com/IntersectMBO/govtool/issues/151)

govtool/frontend/src/components/molecules/LinkWithIcon.tsx

@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+
+import { Typography } from "@atoms";
+
+import { LinkWithIconProps } from "./types";
+
+export const LinkWithIcon = ({
+  label,
+  onClick,
+  icon,
+  sx,
+}: LinkWithIconProps) => {
+  return (
+    <Box
+      data-testid={`${label.split(" ").join("-")}-link`}
+      sx={{
+        alignItems: "center",
+        cursor: "pointer",
+        display: "flex",
+        ...sx,
+      }}
+      onClick={onClick}
+    >
+      {icon ? icon : <ArrowBackIosIcon color="primary" sx={{ fontSize: 14 }} />}
+      <Typography
+        color="primary"
+        fontWeight={400}
+        sx={{ ml: 0.5 }}
+        variant="body2"
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+};

govtool/frontend/src/components/molecules/index.ts

@@ -1,5 +1,4 @@
 export * from "./ActionCard";
-export * from "./BackToButton";
 export * from "./CenteredBoxBottomButtons";
 export * from "./CenteredBoxPageWrapper";
 export * from "./DashboardActionCard";
@@ -11,6 +10,7 @@ export * from "./GovernanceActionCard";
 export * from "./GovernanceActionsFilters";
 export * from "./GovernanceActionsSorting";
 export * from "./GovernanceVotedOnCard";
+export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";

govtool/frontend/src/components/molecules/types.ts

@@ -1,7 +1,8 @@
 import { SxProps } from "@mui/material";
 
-export type BackToLinkProps = {
+export type LinkWithIconProps = {
   label: string;
   onClick: () => void;
+  icon?: JSX.Element;
   sx?: SxProps;
 };

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

@@ -23,7 +23,7 @@ export const ChooseGovernanceActionType = ({
   const { isMobile } = useScreenDimension();
   const { getValues, setValue, watch } = useCreateGovernanceActionForm();
 
-  const isContinueButtonDisabled = !watch("type");
+  const isContinueButtonDisabled = !watch("governance_action_type");
 
   const onClickContinue = () => {
     setStep(3);
@@ -32,7 +32,7 @@ export const ChooseGovernanceActionType = ({
   // TODO: Add tooltips when they will be available
   const renderGovernanceActionTypes = () => {
     return GOVERNANCE_ACTION_TYPES.map((type, index) => {
-      const isChecked = getValues("type") === type;
+      const isChecked = getValues("governance_action_type") === type;
       return (
         <div key={type}>
           <ActionRadio
@@ -48,7 +48,7 @@ export const ChooseGovernanceActionType = ({
   };
 
   const onChangeType = (value: string) => {
-    setValue("type", value);
+    setValue("governance_action_type", value);
   };
 
   return (

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

@@ -32,7 +32,7 @@ export const CreateGovernanceActionForm = ({
     name: "links",
   });
 
-  const governanceActionType = getValues("type");
+  const governanceActionType = getValues("governance_action_type");
   const fields =
     GOVERNANCE_ACTIONS_FIELDS.find(
       (field) => field.name === governanceActionType

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

@@ -0,0 +1,112 @@
+import { Dispatch, SetStateAction } from "react";
+import { Box } from "@mui/material";
+import DriveFileRenameOutlineOutlinedIcon from "@mui/icons-material/DriveFileRenameOutlineOutlined";
+
+import { Button, Spacer, Typography } from "@atoms";
+import { ICONS } from "@consts";
+import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
+import { LinkWithIcon } from "@molecules";
+import { openInNewTab } from "@utils";
+
+import { BgCard } from "./BgCard";
+
+type ReviewCreatedGovernanceActionProps = {
+  setStep: Dispatch<SetStateAction<number>>;
+};
+
+export const ReviewCreatedGovernanceAction = ({
+  setStep,
+}: ReviewCreatedGovernanceActionProps) => {
+  const { t } = useTranslation();
+  const { getValues } = useCreateGovernanceActionForm();
+  const values = getValues();
+
+  const onClickContinue = () => {
+    setStep(5);
+  };
+
+  const onClickBackButton = () => {
+    setStep(3);
+  };
+
+  const onClickEditSubmission = () => {
+    setStep(3);
+  };
+
+  const onClickLink = (link: string) => {
+    openInNewTab(link);
+  };
+
+  const renderReviewFields = () => {
+    return Object.entries(values)
+      .filter(([key]) => key !== "links")
+      .map(([key, value]) => {
+        const label =
+          key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
+
+        return (
+          <Box sx={{ mb: 5 }}>
+            <Typography color="neutralGray" fontWeight={400} variant="body2">
+              {label}
+            </Typography>
+            <Typography sx={{ mt: 0.5 }} variant="body2">
+              {value as string}
+            </Typography>
+          </Box>
+        );
+      });
+  };
+
+  const renderLinks = () => {
+    const links = values["links"]?.map((item) => item.link) ?? [];
+
+    return links.map((link: string) => {
+      return (
+        <LinkWithIcon
+          icon={<img src={ICONS.link} />}
+          label={link}
+          onClick={() => onClickLink(link)}
+          sx={{ mb: 1.75 }}
+        />
+      );
+    });
+  };
+
+  return (
+    <BgCard
+      actionButtonLabel={t("continue")}
+      onClickActionButton={onClickContinue}
+      onClickBackButton={onClickBackButton}
+    >
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.reviewSubmission")}
+      </Typography>
+      <Spacer y={4.25} />
+      <Button
+        startIcon={
+          <DriveFileRenameOutlineOutlinedIcon
+            color="primary"
+            fontSize="large"
+          />
+        }
+        onClick={onClickEditSubmission}
+        sx={{ alignSelf: "center", width: "180px" }}
+        variant="outlined"
+      >
+        {t("createGovernanceAction.editSubmission")}
+      </Button>
+      <Spacer y={6} />
+      {renderReviewFields()}
+      <Typography
+        color="neutralGray"
+        fontWeight={400}
+        sx={{ mb: 0.5 }}
+        variant="body2"
+      >
+        {t("createGovernanceAction.supportingLinks")}
+      </Typography>
+      {renderLinks()}
+      <Spacer y={6} />
+    </BgCard>
+  );
+};

govtool/frontend/src/components/organisms/index.ts

@@ -2,8 +2,8 @@ export * from "./BgCard";
 export * from "./ChooseGovernanceActionType";
 export * from "./ChooseStakeKeyPanel";
 export * from "./ChooseWalletModal";
-export * from "./CreateGovernanceActionForm";
 export * from "./ControlledField";
+export * from "./CreateGovernanceActionForm";
 export * from "./DashboardCards";
 export * from "./DashboardCards";
 export * from "./DashboardDrawerMobile";
@@ -21,15 +21,16 @@ export * from "./GovernanceActionDetailsCard";
 export * from "./GovernanceActionsToVote";
 export * from "./Hero";
 export * from "./HomeCards";
-export * from "./WhatGovernanceActionIsAbout";
-export * from "./RegisterAsSoleVoterBox";
-export * from "./RegisterAsSoleVoterBoxContent";
 export * from "./RegisterAsdRepStepOne";
 export * from "./RegisterAsdRepStepThree";
 export * from "./RegisterAsdRepStepTwo";
+export * from "./RegisterAsSoleVoterBox";
+export * from "./RegisterAsSoleVoterBoxContent";
 export * from "./RetireAsSoleVoterBox";
 export * from "./RetireAsSoleVoterBoxContent";
+export * from "./ReviewCreatedGovernanceAction";
 export * from "./Slider";
 export * from "./StatusModal";
 export * from "./TopNav";
 export * from "./VotingPowerModal";
+export * from "./WhatGovernanceActionIsAbout";

govtool/frontend/src/consts/governanceActionTypes.ts

@@ -44,7 +44,7 @@ export const GOVERNANCE_ACTIONS_FIELDS = [
         placeholder: "Problem this GA will solve",
         tip: "How will this solve a problem",
       },
-      Rationale: {
+      rationale: {
         component: "textarea",
         placeholder: "Content of Governance Action",
         tip: "Put all the content of the GA here",

govtool/frontend/src/consts/icons.ts

@@ -1,8 +1,8 @@
 export const ICONS = {
   appLogoIcon: "/icons/AppLogo.svg",
   arrowDownIcon: "/icons/ArrowDown.svg",
-  arrowRightIcon: "/icons/ArrowRight.svg",
   arrowLeftThinIcon: "/icons/ArrowLeftThin.svg",
+  arrowRightIcon: "/icons/ArrowRight.svg",
   checkCircleIcon: "/icons/CheckCircle.svg",
   closeDrawerIcon: "/icons/CloseIcon.svg",
   closeIcon: "/icons/Close.svg",
@@ -23,6 +23,7 @@ export const ICONS = {
   guidesActiveIcon: "/icons/GuidesActive.svg",
   guidesIcon: "/icons/Guides.svg",
   helpIcon: "/icons/Help.svg",
+  link: "/icons/Link.svg",
   sortActiveIcon: "/icons/SortActive.svg",
   sortIcon: "/icons/Sort.svg",
   sortWhiteIcon: "/icons/SortWhite.svg",

govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts

@@ -2,13 +2,13 @@ import { useCallback, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 type createGovernanceActionValues = {
-  type: string;
+  governance_action_type: string;
   links?: { link: string }[];
 };
 
 export const defaulCreateGovernanceActionValues: createGovernanceActionValues =
   {
-    type: "",
+    governance_action_type: "",
     links: [{ link: "" }],
   };
 

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

@@ -130,13 +130,16 @@ export const en = {
     },
     createGovernanceAction: {
       chooseGATypeTitle: "Choose a Governance Action type",
-      formTitle: "Governance Action details",
-      references: "References and Supporting Information",
-      title: "Create a Governance Action",
       creatingAGovernanceAction:
         "Creating a Governance Action: What you need to know",
       creatingAGovernanceActionDescription:
         "To create a Governance Action, you will need to:\n\n• Fill out a form with the relevant data\n• Pay a refundable deposit of <strong>₳{{deposit}}</strong>\n• Store the metadata of your Governance Action at your own expense.\n\nYour deposit will be refunded to your wallet when the Governance Action is either enacted or expired.\n\nThe deposit will not affect your Voting Power.",
+      editSubmission: "Edit submission",
+      formTitle: "Governance Action details",
+      references: "References and Supporting Information",
+      reviewSubmission: "Review your submission",
+      supportingLinks: "Supporting links",
+      title: "Create a Governance Action",
     },
     delegation: {
       description:

govtool/frontend/src/pages/CreateGovernanceAction.tsx

@@ -11,12 +11,13 @@ import {
   useScreenDimension,
   useTranslation,
 } from "@hooks";
-import { BackToButton } from "@molecules";
+import { LinkWithIcon } from "@molecules";
 import {
   ChooseGovernanceActionType,
   CreateGovernanceActionForm,
   DashboardTopNav,
   Footer,
+  ReviewCreatedGovernanceAction,
   WhatGovernanceActionIsAbout,
 } from "@organisms";
 import { checkIsWalletConnected } from "@utils";
@@ -63,7 +64,7 @@ export const CreateGovernanceAction = () => {
         sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
       >
         <DashboardTopNav title={t("createGovernanceAction.title")} />
-        <BackToButton
+        <LinkWithIcon
           label={t("backToDashboard")}
           onClick={onClickBackToDashboard}
           sx={{
@@ -86,6 +87,7 @@ export const CreateGovernanceAction = () => {
             />
           )}
           {step === 3 && <CreateGovernanceActionForm setStep={setStep} />}
+          {step === 4 && <ReviewCreatedGovernanceAction setStep={setStep} />}
         </FormProvider>
         {isMobile && <Footer />}
       </Box>

govtool/frontend/src/pages/RegisterAsdRep.tsx

@@ -11,7 +11,7 @@ import {
   useUrlAndHashFormController as useRegisterAsdRepFormController,
   useTranslation,
 } from "@hooks";
-import { BackToButton } from "@molecules";
+import { LinkWithIcon } from "@molecules";
 import {
   DashboardTopNav,
   Footer,
@@ -60,7 +60,7 @@ export const RegisterAsdRep = () => {
         sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
       >
         <DashboardTopNav title={t("registration.becomeADRep")} />
-        <BackToButton
+        <LinkWithIcon
           label={t("backToDashboard")}
           onClick={onClickBackToDashboard}
           sx={{