[#216] add Automated Voting Options component

CHANGELOG.md

@@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+- Create Automated Voting Options component [Issue 216](https://github.com/IntersectMBO/govtool/issues/216)
 - Change step 3 components [Issue 152](https://github.com/intersectMBO/govtool/issues/152)
 - Add possibility to vote on behalf of myself - Sole Voter [Issue 119](https://github.com/IntersectMBO/govtool/issues/119)
 - Create DRep registration page about roles [Issue 205](https://github.com/IntersectMBO/govtool/issues/205)

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

@@ -0,0 +1,100 @@
+import { Box, Divider } from "@mui/material";
+
+import { AutomatedVotingCardProps } from "./types";
+import { Button, Spacer, Typography } from "@atoms";
+import { useScreenDimension, useTranslation } from "@hooks";
+
+export const AutomatedVotingCard = ({
+  description,
+  onClickDelegate,
+  onClickInfo,
+  title,
+  votingPower,
+}: AutomatedVotingCardProps) => {
+  const { isMobile, screenWidth } = useScreenDimension();
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      sx={{
+        alignItems: "center",
+        bgcolor: "#FFFFFF4D",
+        borderRadius: 4,
+        boxShadow: `0px 4px 15px 0px #DDE3F5`,
+        display: "flex",
+        flex: 1,
+        flexDirection: screenWidth < 1440 ? "column" : "row",
+        justifyContent: "space-between",
+        padding: "18px 24px",
+      }}
+    >
+      <Box
+        sx={{
+          flex: 1,
+          mb: screenWidth < 1440 ? 1.5 : 0,
+          width: screenWidth < 1440 ? "100%" : "auto",
+        }}
+      >
+        <Typography>{title}</Typography>
+        <Typography fontWeight={400} sx={{ mt: 0.5 }} variant="body2">
+          {description}
+        </Typography>
+      </Box>
+      <Divider
+        flexItem
+        orientation={screenWidth < 1440 ? "horizontal" : "vertical"}
+        sx={{ ml: screenWidth < 1440 ? 0 : 1 }}
+        variant={screenWidth < 1440 ? "fullWidth" : "middle"}
+      />
+      <Box
+        sx={{
+          alignContent: "flex-start",
+          display: "flex",
+          flexDirection: "column",
+          px: screenWidth < 1440 ? 0 : 4.25,
+          py: screenWidth < 1440 ? 1 : 0,
+          width: screenWidth < 1440 ? "100%" : "auto",
+        }}
+      >
+        <Typography color="neutralGray" fontWeight={500} variant="caption">
+          {t("dRepDirectory.votingPower")}
+        </Typography>
+        <Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
+          <Typography fontWeight={400}>₳</Typography>
+          {votingPower}
+        </Typography>
+      </Box>
+      <Divider
+        flexItem
+        orientation={screenWidth < 1440 ? "horizontal" : "vertical"}
+        sx={{ mr: screenWidth < 1440 ? 0 : 1 }}
+        variant={screenWidth < 1440 ? "fullWidth" : "middle"}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          mt: screenWidth < 1440 ? 3 : 0,
+          width: screenWidth < 1440 ? "100%" : "auto",
+        }}
+      >
+        <Button
+          onClick={onClickInfo}
+          size={isMobile ? "medium" : "large"}
+          sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+          variant="outlined"
+        >
+          {t("info")}
+        </Button>
+        <Spacer x={2.5} />
+        <Button
+          onClick={onClickDelegate}
+          size={isMobile ? "medium" : "large"}
+          sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+        >
+          {t("delegate")}
+        </Button>
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,4 +1,5 @@
 export * from "./ActionCard";
+export * from "./AutomatedVotingCard";
 export * from "./CenteredBoxBottomButtons";
 export * from "./CenteredBoxPageWrapper";
 export * from "./DashboardActionCard";

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

@@ -0,0 +1,7 @@
+export type AutomatedVotingCardProps = {
+  description: string;
+  onClickDelegate: () => void;
+  onClickInfo: () => void;
+  title: string;
+  votingPower: string | number;
+};

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

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { Box } from "@mui/material";
+
+import { Spacer, Typography } from "@atoms";
+import { ICONS } from "@consts";
+import { useTranslation } from "@hooks";
+import { AutomatedVotingCard } from "@molecules";
+
+export const AutomatedVotingOptions = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
+
+  const handleOpen = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: "#D6E2FF80",
+        border: "1px solid #F7F9FB",
+        borderRadius: 3,
+        boxShadow: `2px 2px 15px 0px #2F62DC47`,
+        display: "flex",
+        flexDirection: "column",
+        padding: "12px 24px",
+      }}
+    >
+      <Box
+        onClick={handleOpen}
+        sx={{
+          alignItems: "center",
+          cursor: "pointer",
+          display: "flex",
+          flex: 1,
+          justifyContent: "space-between",
+        }}
+      >
+        <Typography>{t("dRepDirectory.automatedVotingOptions")}</Typography>
+        <img
+          alt="arrow"
+          src={ICONS.arrowDownIcon}
+          style={{
+            transform: `rotate(${isOpen ? "180deg" : "0"})`,
+          }}
+        />
+      </Box>
+      {isOpen ? (
+        <>
+          <Spacer y={2} />
+          <AutomatedVotingCard
+            description={t("dRepDirectory.abstainCardDescription")}
+            onClickDelegate={() => {}}
+            onClickInfo={() => {}}
+            title={t("dRepDirectory.abstainCardTitle")}
+            votingPower={"99,111,111"}
+          />
+          <Spacer y={2} />
+          <AutomatedVotingCard
+            description={t("dRepDirectory.noConfidenceDescription")}
+            onClickDelegate={() => {}}
+            onClickInfo={() => {}}
+            title={t("dRepDirectory.noConfidenceTitle")}
+            votingPower={"99,111,111"}
+          />
+        </>
+      ) : null}
+    </Box>
+  );
+};

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

@@ -1,3 +1,4 @@
+export * from "./AutomatedVotingOptions";
 export * from "./BgCard";
 export * from "./ChooseStakeKeyPanel";
 export * from "./ChooseWalletModal";

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

@@ -149,6 +149,15 @@ export const en = {
         title: "Delegate to myself",
       },
     },
+    dRepDirectory: {
+      abstainCardDescription: "Select this to vote ABSTAIN to every vote.",
+      abstainCardTitle: "Abstain from Every Vote",
+      automatedVotingOptions: "Automated Voting Options",
+      noConfidenceDescription:
+        "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals",
+      noConfidenceTitle: "Signal No Confidence on Every Vote",
+      votingPower: "Voting Power",
+    },
     errorPage: {
       backToDashboard: "Back to dashboard",
       backToHomepage: "Back to homepage",
@@ -426,7 +435,8 @@ export const en = {
     continue: "Continue",
     delegate: "Delegate",
     here: "here",
-    inProgress: "In Progress",
+    info: "Info",
+    inProgress: "In progress",
     learnMore: "Learn more",
     loading: "Loading...",
     myDRepId: "My DRep ID:",