[#364] add information storage screens

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

@@ -18,6 +18,7 @@ export const LinkWithIcon = ({
         alignItems: "center",
         cursor: "pointer",
         display: "flex",
+        width: "fit-content",
         ...sx,
       }}
       onClick={onClick}

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

@@ -0,0 +1,58 @@
+import { Box } from "@mui/material";
+
+import { Typography } from "@atoms";
+import { theme } from "@/theme";
+
+import { StepProps } from "./types";
+
+export const Step = ({
+  component,
+  label,
+  layoutStyles,
+  stepNumber,
+}: StepProps) => {
+  const {
+    palette: { boxShadow2 },
+  } = theme;
+
+  return (
+    <Box
+      sx={{
+        flexDirection: "row",
+        display: "flex",
+        width: "100%",
+        ...layoutStyles,
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: "center",
+          borderRadius: "100%",
+          boxShadow: `2px 2px 20px 0px ${boxShadow2}`,
+          display: "flex",
+          height: 54,
+          justifyContent: "center",
+          width: 54,
+        }}
+      >
+        <Typography color="primary" fontWeight={400} variant="title2">
+          {stepNumber}
+        </Typography>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          flex: 1,
+          flexDirection: "column",
+          ml: 3,
+        }}
+      >
+        <Typography fontWeight={500} sx={{ mb: 1.5 }} variant="body1">
+          {label}
+        </Typography>
+        {component}
+      </Box>
+    </Box>
+  );
+};

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

@@ -12,6 +12,7 @@ export * from "./GovernanceActionsSorting";
 export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
+export * from "./Step";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";
 export * from "./WalletInfoCard";

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

@@ -6,3 +6,10 @@ export type LinkWithIconProps = {
   icon?: JSX.Element;
   sx?: SxProps;
 };
+
+export type StepProps = {
+  component: JSX.Element;
+  label: string;
+  layoutStyles?: SxProps;
+  stepNumber: number | string;
+};

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx

@@ -0,0 +1,120 @@
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import { Box } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+
+import { Button, Spacer, Typography } from "@atoms";
+import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
+import { Step } from "@molecules";
+import { BgCard, ControlledField } from "@organisms";
+import { downloadJson, openInNewTab } from "@utils";
+
+export const StorageInformation = ({
+  setStep,
+}: {
+  setStep: Dispatch<SetStateAction<number>>;
+}) => {
+  const { t } = useTranslation();
+  const {
+    control,
+    errors,
+    createGovernanceAction,
+    generateJsonBody,
+    getValues,
+    watch,
+  } = useCreateGovernanceActionForm();
+  const [isJsonDownloaded, setIsJsonDownloaded] = useState<boolean>(false);
+  // TODO: change on correct file name
+  const fileName = getValues("governance_action_type");
+
+  // TODO: Change link to correct
+  const openGuideAboutStoringInformation = useCallback(
+    () => openInNewTab("https://sancho.network/"),
+    []
+  );
+
+  const isActionButtonDisabled = !watch("storingURL") || !isJsonDownloaded;
+
+  const onClickBack = useCallback(() => setStep(5), []);
+
+  const onClickDowloadJson = () => {
+    const data = getValues();
+    const jsonBody = generateJsonBody(data);
+    downloadJson(jsonBody, fileName);
+    setIsJsonDownloaded(true);
+  };
+
+  return (
+    <BgCard
+      actionButtonLabel={t("continue")}
+      backButtonLabel={t("back")}
+      isActionButtonDisabled={isActionButtonDisabled}
+      onClickActionButton={createGovernanceAction}
+      onClickBackButton={onClickBack}
+    >
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.storingInformationTitle")}
+      </Typography>
+      <Typography
+        fontWeight={400}
+        sx={{ mt: 1, textAlign: "center" }}
+        variant="body1"
+      >
+        {t("createGovernanceAction.storingInformationDescription")}
+      </Typography>
+      <Box sx={{ my: 4 }}>
+        <Step
+          // TODO: add onClick action when available
+          component={
+            <Button
+              onClick={onClickDowloadJson}
+              size="extraLarge"
+              sx={{ width: "fit-content" }}
+            >
+              {`${fileName}.jsonld`}
+            </Button>
+          }
+          label={t("createGovernanceAction.storingInformationStep1Label")}
+          stepNumber={1}
+        />
+        <Spacer y={6} />
+        <Step
+          component={
+            <Button
+              endIcon={
+                <OpenInNewIcon
+                  sx={{
+                    color: "primary",
+                    height: 17,
+                    width: 17,
+                  }}
+                />
+              }
+              onClick={openGuideAboutStoringInformation}
+              size="extraLarge"
+              sx={{ width: "fit-content" }}
+              variant="text"
+            >
+              {t("createGovernanceAction.storingInformationStep2Link")}
+            </Button>
+          }
+          label={t("createGovernanceAction.storingInformationStep2Label")}
+          stepNumber={2}
+        />
+        <Spacer y={6} />
+        <Step
+          component={
+            <ControlledField.Input
+              {...{ control, errors }}
+              name="storingURL"
+              placeholder={t(
+                "createGovernanceAction.storingInformationURLPlaceholder"
+              )}
+            />
+          }
+          label={t("createGovernanceAction.storingInformationStep3Label")}
+          stepNumber={3}
+        />
+      </Box>
+    </BgCard>
+  );
+};

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx

@@ -0,0 +1,70 @@
+import { Dispatch, SetStateAction } from "react";
+import { Box, Link } from "@mui/material";
+
+import { Spacer, Typography } from "@atoms";
+import {
+  useCreateGovernanceActionForm,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
+import { BgCard, ControlledField } from "@organisms";
+import { openInNewTab } from "@utils";
+
+export const StoreDataInfo = ({
+  setStep,
+}: {
+  setStep: Dispatch<SetStateAction<number>>;
+}) => {
+  const { t } = useTranslation();
+  const { control, errors, watch } = useCreateGovernanceActionForm();
+  const { isMobile } = useScreenDimension();
+
+  // TODO: change link when available
+  const openLink = () => {
+    openInNewTab("https://www.google.com");
+  };
+
+  const isContinueDisabled = !watch("storeData");
+
+  const onClickContinue = () => {
+    setStep(6);
+  };
+
+  const onClickBack = () => {
+    setStep(4);
+  };
+
+  return (
+    <BgCard
+      actionButtonLabel={t("continue")}
+      isActionButtonDisabled={isContinueDisabled}
+      onClickActionButton={onClickContinue}
+      onClickBackButton={onClickBack}
+    >
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.storeDataTitle")}
+      </Typography>
+      <Link
+        onClick={openLink}
+        sx={{
+          cursor: "pointer",
+          fontSize: 16,
+          fontWeight: 500,
+          fontFamily: "Poppins",
+          my: 4,
+          textAlign: "center",
+          textDecoration: "none",
+        }}
+      >
+        {t("createGovernanceAction.storeDataLink")}
+      </Link>
+      <ControlledField.Checkbox
+        {...{ control, errors }}
+        name="storeData"
+        label={t("createGovernanceAction.storeDataCheckboxLabel")}
+      />
+      <Spacer y={isMobile ? 4 : 12.5} />
+      <Box display="flex" flex={1} />
+    </BgCard>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./StorageInformation";
+export * from "./StoreDataInfo";

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

@@ -4,7 +4,11 @@ import DriveFileRenameOutlineOutlinedIcon from "@mui/icons-material/DriveFileRen
 
 import { Button, Spacer, Typography } from "@atoms";
 import { ICONS } from "@consts";
-import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
+import {
+  defaulCreateGovernanceActionValues,
+  useCreateGovernanceActionForm,
+  useTranslation,
+} from "@hooks";
 import { LinkWithIcon } from "@molecules";
 import { openInNewTab } from "@utils";
 
@@ -39,7 +43,11 @@ export const ReviewCreatedGovernanceAction = ({
 
   const renderReviewFields = () => {
     return Object.entries(values)
-      .filter(([key]) => key !== "links")
+      .filter(
+        ([key]) =>
+          !Object.keys(defaulCreateGovernanceActionValues).includes(key) ||
+          key === "governance_action_type"
+      )
       .map(([key, value]) => {
         const label =
           key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");

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

@@ -4,6 +4,7 @@ export * from "./ChooseStakeKeyPanel";
 export * from "./ChooseWalletModal";
 export * from "./ControlledField";
 export * from "./CreateGovernanceActionForm";
+export * from "./CreateGovernanceActionSteps";
 export * from "./DashboardCards";
 export * from "./DashboardCards";
 export * from "./DashboardDrawerMobile";

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

@@ -4,12 +4,16 @@ import { useFormContext } from "react-hook-form";
 type createGovernanceActionValues = {
   governance_action_type: string;
   links?: { link: string }[];
+  storeData?: boolean;
+  storingURL: string;
 };
 
 export const defaulCreateGovernanceActionValues: createGovernanceActionValues =
   {
     governance_action_type: "",
     links: [{ link: "" }],
+    storeData: false,
+    storingURL: "",
   };
 
 export const useCreateGovernanceActionForm = () => {
@@ -26,9 +30,28 @@ export const useCreateGovernanceActionForm = () => {
     reset,
   } = useFormContext<createGovernanceActionValues>();
 
-  const onSubmit = useCallback(async () => {
-    setIsLoading(true);
+  const generateJsonBody = (data: createGovernanceActionValues) => {
+    const filteredData = Object.entries(data).filter(
+      ([key]) => !Object.keys(defaulCreateGovernanceActionValues).includes(key)
+    );
+    const references = data.links
+      ?.filter((link) => link.link)
+      .map((link) => {
+        // TODO: Label isnt available and harcoded Other for type
+        return { type: "Other", label: "Testlabel", uri: link.link };
+      });
+    const body = { ...Object.fromEntries(filteredData), references };
+
+    const jsonStr = JSON.stringify(body);
+    return jsonStr;
+  };
+
+  const onSubmit = useCallback(async (data: createGovernanceActionValues) => {
     try {
+      setIsLoading(true);
+      const jsonBody = generateJsonBody(data);
+
+      return jsonBody;
     } catch (e: any) {
     } finally {
       setIsLoading(false);
@@ -42,9 +65,10 @@ export const useCreateGovernanceActionForm = () => {
     isLoading,
     isValid,
     setValue,
-    submitForm: handleSubmit(onSubmit),
+    createGovernanceAction: handleSubmit(onSubmit),
     watch,
     register,
     reset,
+    generateJsonBody,
   };
 };

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

@@ -138,6 +138,19 @@ export const en = {
       formTitle: "Governance Action details",
       references: "References and Supporting Information",
       reviewSubmission: "Review your submission",
+      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",
+      storingInformationDescription:
+        "Download your file, save it to your chosen location, and enter the URL of that location in step 3",
+      storingInformationStep1Label: "Download this file",
+      storingInformationStep2Label:
+        "Save this file in a location that provides a public URL (ex. github)",
+      storingInformationStep2Link: "Read full guide",
+      storingInformationStep3Label: "Paste the URL here",
+      storingInformationTitle: "Information Storage Steps",
+      storingInformationURLPlaceholder: "URL",
       supportingLinks: "Supporting links",
       title: "Create a Governance Action",
     },