From 3980247a7fabd87a8476a996ff3bd835e40c346b Mon Sep 17 00:00:00 2001
From: Rico Wong <hochiw@oursky.com>
Date: Thu, 30 Jun 2022 02:34:48 +0800
Subject: [PATCH] react-app: Handle remind to vote button for proposal vote
 list

refs #128
---
 .../ProposalVotesPanel.tsx                    | 36 ++++++++++++++++++-
 react-app/src/i18n/translations/en.json       |  1 +
 react-app/src/i18n/translations/zh.json       |  1 +
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx b/react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx
index 54ab07445..de62740b3 100644
--- a/react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx
+++ b/react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx
@@ -4,7 +4,7 @@ import { useOutletContext, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import TallyResultIndicator from "../TallyResultIndicator/TallyResultIndicator";
 import * as SectionedTable from "../SectionedTable/SectionedTable";
-import { VoteOption } from "../../models/cosmos/gov";
+import { ProposalStatus, VoteOption } from "../../models/cosmos/gov";
 import LocalizedText from "../common/Localized/LocalizedText";
 import {
   isRequestStateError,
@@ -12,6 +12,7 @@ import {
 } from "../../models/RequestState";
 import PageContoller from "../common/PageController/PageController";
 import { useLocale } from "../../providers/AppLocaleProvider";
+import AppButton from "../common/Buttons/AppButton";
 import {
   Proposal,
   ProposalVote,
@@ -147,6 +148,33 @@ const ProposalVoteOption: React.FC<{ option: VoteOption | null }> = ({
   }
 };
 
+const RemindToVoteButton: React.FC<{
+  proposal: Proposal;
+  vote: ProposalVote;
+}> = ({ proposal, vote }) => {
+  if (
+    vote.option != null ||
+    vote.voter.__typename !== "Validator" ||
+    vote.voter.securityContact == null ||
+    proposal.status !== ProposalStatus.VotingPeriod
+  ) {
+    return null;
+  }
+
+  const email: string = vote.voter.securityContact;
+
+  return (
+    <AppButton
+      type="anchor"
+      theme="secondary"
+      size="regular"
+      className={cn("border", "border-likecoin-grey")}
+      messageID="ProposalDetail.votes.remindToVote"
+      href={`mailto:${email}`}
+    />
+  );
+};
+
 const ProposalVotesPanel: React.FC = () => {
   const proposal = useOutletContext<Proposal>();
   const { translate } = useLocale();
@@ -266,6 +294,12 @@ const ProposalVotesPanel: React.FC = () => {
         >
           {(item) => <ProposalVoteOption option={item.option ?? null} />}
         </SectionedTable.Column>
+        <SectionedTable.Column<ProposalVote>
+          id="action"
+          className={cn("text-right")}
+        >
+          {(item) => <RemindToVoteButton proposal={proposal} vote={item} />}
+        </SectionedTable.Column>
       </SectionedTable.Table>
       <PageContoller
         offsetBased={true}
diff --git a/react-app/src/i18n/translations/en.json b/react-app/src/i18n/translations/en.json
index 23840d2f4..4d5c3e9d1 100644
--- a/react-app/src/i18n/translations/en.json
+++ b/react-app/src/i18n/translations/en.json
@@ -65,6 +65,7 @@
   "ProposalDetail.votes.option": "Option",
   "ProposalDetail.votes.option.notVoted": "Not Voted Yet",
   "ProposalDetail.votes.others": "Others",
+  "ProposalDetail.votes.remindToVote": "Remind to vote",
   "ProposalDetail.votes.requestState.error": "Failed to fetch proposal votes, please try again later.",
   "ProposalDetail.votes.voter": "Voter",
   "ProposalDetail.votes.voter.validator": "Validator",
diff --git a/react-app/src/i18n/translations/zh.json b/react-app/src/i18n/translations/zh.json
index d8e3075b7..1158c0236 100644
--- a/react-app/src/i18n/translations/zh.json
+++ b/react-app/src/i18n/translations/zh.json
@@ -65,6 +65,7 @@
   "ProposalDetail.votes.option": "Option",
   "ProposalDetail.votes.option.notVoted": "Not Voted Yet",
   "ProposalDetail.votes.others": "Others",
+  "ProposalDetail.votes.remindToVote": "Remind to vote",
   "ProposalDetail.votes.requestState.error": "Failed to fetch proposal votes, please try again later.",
   "ProposalDetail.votes.voter": "Voter",
   "ProposalDetail.votes.voter.validator": "Validator",