Fix vote modals

src/components/Process/Chained.tsx

@@ -15,9 +15,9 @@ import { Trans } from 'react-i18next'
 import { VoteButton } from '~components/Process/Aside'
 import BlindCSPConnect from '~components/Process/BlindCSPConnect'
 import { ConfirmVoteModal } from '~components/Process/ConfirmVoteModal'
-import { SuccessVoteModal } from '~components/Process/SuccessVoteModal'
-import VotingVoteModal from '~components/Process/VotingVoteModal'
-import { ChainedProvider, useChainedProcesses } from './ChainedContext'
+import { MultiElectionSuccessVoteModal, SuccessVoteModal } from '~components/Process/SuccessVoteModal'
+import VotingVoteModal, { MultiElectionVotingVoteModal } from '~components/Process/VotingVoteModal'
+import { ChainedProvider, useChainedProcesses } from '~components/Process/ChainedContext'
 
 type ChainedProcessesInnerProps = {
   connected: boolean
@@ -111,6 +111,8 @@ const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
         <VoteButtonContainer>
           <VoteButton />
         </VoteButtonContainer>
+        <MultiElectionVotingVoteModal />
+        <MultiElectionSuccessVoteModal />
       </QuestionsFormProvider>
     )
   }
@@ -123,6 +125,8 @@ const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
       <VoteButtonContainer>
         <VoteButton />
       </VoteButtonContainer>
+      <VotingVoteModal />
+      <SuccessVoteModal />
     </>
   )
 }
@@ -183,8 +187,6 @@ const ChainedProcessesWrapper = () => {
     <Box className='md-sizes' mb='100px' pt='25px'>
       <ElectionProvider key={current} election={processes[current]} ConnectButton={ConnectButton} fetchCensus>
         <ChainedProcessesInner connected={connected} />
-        <VotingVoteModal />
-        <SuccessVoteModal />
       </ElectionProvider>
       <VoteButtonContainer>
         {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}

src/components/Process/SuccessVoteModal.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  Flex,
   Link,
   ListItem,
   Modal,
@@ -14,10 +15,10 @@ import {
   UnorderedList,
   useDisclosure,
 } from '@chakra-ui/react'
-import { environment } from '@vocdoni/chakra-components'
+import { environment, useQuestionsForm } from '@vocdoni/chakra-components'
 import { useClient, useElection } from '@vocdoni/react-providers'
 import { InvalidElection } from '@vocdoni/sdk'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { FacebookShare, RedditShare, TelegramShare, TwitterShare } from '~components/Share'
 import successImg from '/assets/spreadsheet-success-modal.jpg'
@@ -90,3 +91,99 @@ export const SuccessVoteModal = () => {
     </Modal>
   )
 }
+
+export const MultiElectionSuccessVoteModal = () => {
+  const { t } = useTranslation()
+  const [votes, setVotes] = useState<string[]>([])
+
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { election } = useElection()
+  const { env } = useClient()
+  const { voted, elections, loaded, isAbleToVote } = useQuestionsForm()
+
+  useEffect(() => {
+    const _votes = Object.values(elections)
+      .filter(({ voted }) => voted)
+      .map(({ voted }) => voted)
+    if (!isAbleToVote && votes.length) {
+      setVotes([])
+    }
+    if (!votes && loaded) {
+      setVotes(_votes)
+    }
+    if (isAbleToVote && _votes?.length > votes.length) {
+      setVotes(_votes)
+      onOpen()
+    }
+  }, [elections, loaded, votes, isAbleToVote])
+
+  if (!loaded || !voted || !elections || election instanceof InvalidElection) return null
+
+  const verifiers = Object.values(elections)
+    ?.filter(({ voted }) => voted)
+    .map(({ voted, election }) => {
+      return {
+        verify: environment.verifyVote(env, voted),
+        text: election.title.default,
+      }
+    })
+
+  const url = encodeURIComponent(document.location.href)
+  const caption = t('process.share_caption', { title: election?.title.default })
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Text>{t('process.success_modal.title')}</Text>
+          <Box bgImage={successImg} />
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Trans
+            i18nKey='process.success_modal.multi_election_text'
+            components={{
+              p: <Text mb={2} />,
+            }}
+          />
+          <Flex direction={'column'} mb={2}>
+            {verifiers.map(({ verify, text }) => (
+              <UnorderedList>
+                <Link href={verify} target='_blank'>
+                  {text}
+                </Link>
+              </UnorderedList>
+            ))}
+          </Flex>
+          <Trans
+            i18nKey='process.success_modal.multi_election_share'
+            components={{
+              p: <Text mb={2} />,
+            }}
+          />
+          <UnorderedList listStyleType='none' display='flex' justifyContent='center' gap={6} mt={6} mb={2} ml={0}>
+            <ListItem>
+              <TwitterShare url={url} caption={caption} />
+            </ListItem>
+            <ListItem>
+              <FacebookShare url={url} caption={caption} />
+            </ListItem>
+            <ListItem>
+              <TelegramShare url={url} caption={caption} />
+            </ListItem>
+            <ListItem>
+              <RedditShare url={url} caption={caption} />
+            </ListItem>
+          </UnorderedList>
+        </ModalBody>
+
+        <ModalFooter mt={4}>
+          <Button onClick={onClose} variant='primary'>
+            {t('process.success_modal.btn')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

src/components/Process/VotingVoteModal.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useElection } from '@vocdoni/react-providers'
 import { Modal, ModalBody, ModalContent, ModalOverlay, Spinner, Text, VStack } from '@chakra-ui/react'
+import { useQuestionsForm } from '@vocdoni/chakra-components'
 
 const VotingVoteModal = () => {
   const { t } = useTranslation()
@@ -23,4 +24,23 @@ const VotingVoteModal = () => {
   )
 }
 
+export const MultiElectionVotingVoteModal = () => {
+  const { t } = useTranslation()
+  const { voting } = useQuestionsForm()
+
+  return (
+    <Modal isOpen={voting} onClose={() => {}}>
+      <ModalOverlay />
+      <ModalContent p='30px !important'>
+        <ModalBody>
+          <VStack>
+            <Spinner color='process.spinner' mb={5} w={10} h={10} />
+          </VStack>
+          <Text textAlign='center'>{t('process.voting')}</Text>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
 export default VotingVoteModal

src/i18n/locales/ca.json

@@ -185,7 +185,9 @@
     "success_modal": {
       "btn": "Finalitzar",
       "text": "<p>El teu vot ha estat emès i emmagatzemat de forma segura a la cadena de blocs de Vocdoni. <verify>Pots comprovar-ho aquí</verify>.</p><p>La democràcia és important, la pots compartir amb la teva comunitat i amics:</p>",
-      "title": "Vot emès correctament!"
+      "title": "Vot emès correctament!",
+      "multi_election_text": "<p>El teu vot ha estat emès i emmagatzemat de forma segura a la cadena de blocs de Vocdoni. Comprovants de vot:</p>",
+      "multi_election_share": "<p>La democràcia és important, la pots compartir amb la teva comunitat i amics:</p>"
     },
     "total_census_size": "{{maxCensusSize}} electors permesos de {{censusSize}} totals en el cens",
     "total_census_size_tooltip": "El nombre màxim d'electors permesos està limitat a {{maxCensusSize}} d'un cens de {{censusSize}} ({{percent}}% del total). Només els primers {{maxCensusSize}} electors poden votar.",

src/i18n/locales/es.json

@@ -185,7 +185,9 @@
     "success_modal": {
       "btn": "Finalizar",
       "text": "<p>Tu voto ha sido emitido y almacenado de forma segura en la cadena de bloques de Vocdoni. <verify>Puedes comprobarlo aquí</verify>.</p><p>La democracia es importante, puedes compartirla con tu comunidad y amigos:</p>",
-      "title": "Voto emitido correctamente!"
+      "title": "Voto emitido correctamente!",
+      "multi_election_text": "<p>Tu voto ha sido emitido y almacenado de forma segura en la cadena de bloques de Vocdoni. Comprobantes de voto:</p>",
+      "multi_election_share": "<p>La democracia es importante, puedes compartirla con tu comunidad y amigos:</p>"
     },
     "total_census_size": "{{maxCensusSize}} votantes permitidos de {{censusSize}} totales en el censo",
     "total_census_size_tooltip": "El número máximo de votantes permitidos está limitado a {{maxCensusSize}} de un censo de {{censusSize}} ({{percent}}% del total). Solo los primeros {{maxCensusSize}} votantes pueden votar.",