Merge branch 'f/implement-multiprocess' into d/erc-paritary

vocdoni · Nov 11, 2024 · a13f9ea · a13f9ea · github-actions · Nov 11, 2024
2 parents fd06924 + d1f324e
commit a13f9ea
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 26 deletions.
diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx
@@ -226,6 +226,7 @@ export const VoteButton = (props: VoteButtonProps) => {
     return null
   }
 
+  const isWeighted = Number(election?.census.weight) !== election?.census.size
   const isBlindCsp = census?.type === 'csp' && election?.meta.csp?.service === 'vocdoni-blind-csp'
 
   return (

diff --git a/src/components/Process/Chained.tsx b/src/components/Process/Chained.tsx
@@ -13,11 +13,11 @@ import { PropsWithChildren, useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { VoteButton } from '~components/Process/Aside'
 import BlindCSPConnect from '~components/Process/BlindCSPConnect'
-import { ChainedProvider, useChainedProcesses } from './ChainedContext'
-import { ParitaryErcQuestionsForm, useFormValidation } from '~components/Process/ParitaryErc'
-import { SuccessVoteModal } from '~components/Process/SuccessVoteModal'
-import VotingVoteModal from '~components/Process/VotingVoteModal'
 import { ConfirmVoteModal } from '~components/Process/ConfirmVoteModal'
+import { MultiElectionSuccessVoteModal, SuccessVoteModal } from '~components/Process/SuccessVoteModal'
+import VotingVoteModal, { MultiElectionVotingVoteModal } from '~components/Process/VotingVoteModal'
+import { ChainedProvider, useChainedProcesses } from './ChainedContext'
+import { ParitaryErcQuestionsForm } from '~components/Process/ParitaryErc'
 
 type ChainedProcessesInnerProps = {
   connected: boolean
@@ -113,6 +113,8 @@ const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
             <VoteButton />
           </VoteButtonContainer>
         </Flex>
+        <MultiElectionVotingVoteModal />
+        <MultiElectionSuccessVoteModal />
       </QuestionsFormProvider>
     )
   }
@@ -125,6 +127,8 @@ const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
       <VoteButtonContainer>
         <VoteButton />
       </VoteButtonContainer>
+      <VotingVoteModal />
+      <SuccessVoteModal />
     </>
   )
 }
@@ -185,8 +189,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 />}

diff --git a/src/components/Process/SuccessVoteModal.tsx b/src/components/Process/SuccessVoteModal.tsx
@@ -1,7 +1,7 @@
-import successImg from '/assets/spreadsheet-confirm-modal.png'
 import {
   Box,
   Button,
+  Flex,
   Link,
   Modal,
   ModalBody,
@@ -11,13 +11,18 @@ import {
   ModalHeader,
   ModalOverlay,
   Text,
+  UnorderedList,
+  ListItem,
   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, PropsWithChildren } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { FacebookShare, RedditShare, TelegramShare, TwitterShare } from '~components/Share'
+import successImg from '/assets/spreadsheet-confirm-modal.png'
+import { ShareButtonProps } from '~components/Share/ShareButton'
 
 export const SuccessVoteModal = () => {
   const { t } = useTranslation()
@@ -45,6 +50,92 @@ export const SuccessVoteModal = () => {
   const url = encodeURIComponent(document.location.href)
   const caption = t('process.share_caption', { title: election?.title.default })
 
+  return (
+    <ModalComponent isOpen={isOpen} onClose={onClose} url={url} caption={caption}>
+      <Trans
+        i18nKey='process.success_modal.text'
+        components={{
+          verify: <Link href={verify} target='_blank' />,
+          p: <Text mb={2} />,
+        }}
+      />
+    </ModalComponent>
+  )
+}
+
+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 (
+    <ModalComponent isOpen={isOpen} onClose={onClose} url={url} caption={caption}>
+      <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} />,*/}
+      {/*  }}*/}
+      {/*/>*/}
+    </ModalComponent>
+  )
+}
+
+const ModalComponent = ({
+  isOpen,
+  onClose,
+  children,
+  ...shareBtnProps
+}: { isOpen: boolean; onClose: () => void; url: string; caption: string } & ShareButtonProps & PropsWithChildren) => {
+  const { t } = useTranslation()
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
@@ -55,29 +146,19 @@ export const SuccessVoteModal = () => {
           <Box bgImage={successImg} minH='210px' />
         </ModalHeader>
         <ModalBody>
-          <Trans
-            i18nKey='process.success_modal.text'
-            components={{
-              verify: (
-                <Link href={verify} target='_blank'>
-                  {verify}
-                </Link>
-              ),
-              p: <Text mb={2} />,
-            }}
-          />
+          {children}
           {/*<UnorderedList listStyleType='none' display='flex' justifyContent='center' gap={6} mt={6} mb={2} ml={0}>*/}
           {/*  <ListItem>*/}
-          {/*    <TwitterShare url={url} caption={caption} />*/}
+          {/*    <TwitterShare {...shareBtnProps} />*/}
           {/*  </ListItem>*/}
           {/*  <ListItem>*/}
-          {/*    <FacebookShare url={url} caption={caption} />*/}
+          {/*    <FacebookShare {...shareBtnProps} />*/}
           {/*  </ListItem>*/}
           {/*  <ListItem>*/}
-          {/*    <TelegramShare url={url} caption={caption} />*/}
+          {/*    <TelegramShare {...shareBtnProps} />*/}
           {/*  </ListItem>*/}
           {/*  <ListItem>*/}
-          {/*    <RedditShare url={url} caption={caption} />*/}
+          {/*    <RedditShare {...shareBtnProps} />*/}
           {/*  </ListItem>*/}
           {/*</UnorderedList>*/}
         </ModalBody>

diff --git a/src/components/Process/VotingVoteModal.tsx b/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
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
@@ -194,7 +194,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>",
-      "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.",

diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -194,7 +194,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.",