From 33f582faff4661307f7ec897f03de776180ac9bf Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Thu, 17 Oct 2024 06:23:36 -0500
Subject: [PATCH] Add VotingVoteModal (#12)

* Add VotingVoteModal

* Add translations
---
 src/components/Process/View.tsx            |  3 ++-
 src/components/Process/VotingVoteModal.tsx | 26 ++++++++++++++++++++++
 src/i18n/locales/ca.json                   |  3 ++-
 src/i18n/locales/es.json                   |  3 ++-
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Process/VotingVoteModal.tsx

diff --git a/src/components/Process/View.tsx b/src/components/Process/View.tsx
index 1be5977..b00e36e 100644
--- a/src/components/Process/View.tsx
+++ b/src/components/Process/View.tsx
@@ -8,6 +8,7 @@ import ProcessAside, { VoteButton } from './Aside'
 import { ChainedProcesses, ChainedResults } from './Chained'
 import Header from './Header'
 import { SuccessVoteModal } from './SuccessVoteModal'
+import VotingVoteModal from '~components/Process/VotingVoteModal'
 
 export const ProcessView = () => {
   const { t } = useTranslation()
@@ -146,7 +147,7 @@ export const ProcessView = () => {
       >
         <VoteButton />
       </Box>
-
+      <VotingVoteModal />
       <SuccessVoteModal />
     </Box>
   )
diff --git a/src/components/Process/VotingVoteModal.tsx b/src/components/Process/VotingVoteModal.tsx
new file mode 100644
index 0000000..38283f5
--- /dev/null
+++ b/src/components/Process/VotingVoteModal.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next'
+import { useElection } from '@vocdoni/react-providers'
+import { Modal, ModalBody, ModalContent, ModalOverlay, Spinner, Text, VStack } from '@chakra-ui/react'
+
+const VotingVoteModal = () => {
+  const { t } = useTranslation()
+  const {
+    loading: { voting },
+  } = useElection()
+
+  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
index 110e46c..7278887 100644
--- a/src/i18n/locales/ca.json
+++ b/src/i18n/locales/ca.json
@@ -187,7 +187,8 @@
     },
     "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.",
-    "voters": "Votants"
+    "voters": "Votants",
+    "voting": "Estem processant el teu vot. Aquest procés trigarà uns segons. Si us plau, no tanquis ni actualitzis aquesta pàgina."
   },
   "process_actions": {
     "cancel": "Cancel·la",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 1e0b42c..f5f5157 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -187,7 +187,8 @@
     },
     "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.",
-    "voters": "Votantes"
+    "voters": "Votantes",
+    "voting": "Estamos procesando tu voto. Este proceso tardará unos segundos. Por favor, no cierres ni actualices esta página."
   },
   "process_actions": {
     "cancel": "Cancelar proceso",