Implement simple vote package component

src/components/Envelope/Detail.tsx

@@ -7,6 +7,8 @@ import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { CopyButton } from '~components/Layout/CopyButton'
 import ShowRawButton from '~components/Layout/ShowRawButton'
 import { RoutePath } from '~constants'
+import { ElectionProvider } from '@vocdoni/react-providers'
+import { VoteSelectedChoices } from '~components/Envelope/VoteSelectedChoices'
 
 const EnvelopeDetail = (envelope: IVoteInfoResponse) => {
   const { t } = useTranslation()
@@ -87,6 +89,10 @@ const EnvelopeDetail = (envelope: IVoteInfoResponse) => {
           />
         </Text>
       </Flex>
+
+      <ElectionProvider id={envelope.electionID}>
+        <VoteSelectedChoices {...envelope.package} />
+      </ElectionProvider>
       <ShowRawButton obj={envelope} />
     </Flex>
   )

src/components/Envelope/VoteSelectedChoices.tsx

@@ -0,0 +1,85 @@
+import { useElection } from '@vocdoni/react-providers'
+import {
+  ElectionResultsTypeNames,
+  IChoice,
+  InvalidElection as InvalidElectionType,
+  IQuestion,
+  IVoteEncryptedPackage,
+  IVotePackage,
+  PublishedElection,
+} from '@vocdoni/sdk'
+import InvalidElection from '~components/Process/InvalidElection'
+import { Box, Text } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+
+export const VoteSelectedChoices = (votePackage: IVotePackage | IVoteEncryptedPackage) => {
+  const { election } = useElection()
+  if (!election || 'encrypted' in votePackage) return null
+  if (election instanceof InvalidElectionType) {
+    return <InvalidElection />
+  }
+  return (
+    <>
+      {election.questions.map((q, i) => {
+        return (
+          <Box key={i}>
+            <Text>{q.title.default}</Text>
+            <ChoosedOptions question={q} questionIndex={i} votes={votePackage.votes} election={election} />
+          </Box>
+        )
+      })}
+    </>
+  )
+}
+
+const ChoosedOptions = ({
+  election,
+  question,
+  questionIndex,
+  votes,
+}: {
+  election: PublishedElection
+  question: IQuestion
+  questionIndex: number
+  votes: number[]
+}) => {
+  const { t } = useTranslation()
+  const selectedOptions: IChoice[] = []
+  switch (election.resultsType.name) {
+    case ElectionResultsTypeNames.MULTIPLE_CHOICE:
+      const abstainValues = election.resultsType?.properties?.abstainValues ?? []
+      let abstainCount = 0
+      votes.map((v) => {
+        if (abstainValues.includes(v.toString())) {
+          abstainCount++
+          return
+        }
+        selectedOptions.push(question.choices[v])
+      })
+      if (abstainCount > 0) {
+        selectedOptions.push({
+          title: {
+            default: t('vote.abstain', { defaultValue: 'Abstained times {{count}}', count: abstainCount }),
+          },
+          results: abstainCount.toString(),
+          value: -1,
+        } as IChoice)
+      }
+      break
+    case ElectionResultsTypeNames.APPROVAL:
+      votes.map((v, i) => {
+        if (v > 0) selectedOptions.push(question.choices[i])
+      })
+      break
+    case ElectionResultsTypeNames.SINGLE_CHOICE_MULTIQUESTION:
+      selectedOptions.push(question.choices[votes[questionIndex]])
+      break
+    default:
+      selectedOptions.push(question.choices[votes[0]])
+  }
+  return selectedOptions.map((c, i) => (
+    <Box key={i}>
+      <Text>{c.title.default}</Text>
+    </Box>
+  ))
+}