Fix #160

Add InvalidElection badge

components/pages/elections/components/ElectionCard.tsx

@@ -1,11 +1,15 @@
 import { ProcessTimeLeft } from '@components/blocks/process_time_left';
 import { getPath } from '@components/pages/app/components/get-links';
 import { CustomElectionStatusBadge } from '@components/pages/elections/components/ElectionStatusBadge';
-import { AnonVoteBadge, ArchivedBadge } from '@components/pages/elections/components/ElectionTypeBadge';
+import {
+  AnonVoteBadge,
+  ArchivedBadge,
+  InvalidElectionBadge,
+} from '@components/pages/elections/components/ElectionTypeBadge';
 import { PROCESS_DETAILS } from '@const/routes';
 import useExtendedElection from '@hooks/use-extended-election';
 import { ElectionProvider, OrganizationProvider } from '@vocdoni/react-providers';
-import { IElectionSummary, PublishedElection } from '@vocdoni/sdk';
+import { IElectionSummary, InvalidElection, PublishedElection } from '@vocdoni/sdk';
 import styled from 'styled-components';
 import {
   BodyWrapper,
@@ -40,13 +44,17 @@ const InnerCard = ({ electionId, electionSummary, hideEntity, ...rest }: Process
   const title = election?.title?.default ?? electionId;
   const organizationId = election?.organizationId ?? electionSummary?.organizationId ?? null;
   const status = election?.status ?? PublishedElection.getStatus(electionSummary?.status, startDate) ?? null;
+  const isInvalid = election instanceof InvalidElection;
 
   const loading = electionLoading && !electionSummary;
 
   const Top = () => (
     <TopWrapper>
+      {isInvalid && <InvalidElectionBadge />}
       {election?.fromArchive ? <ArchivedBadge /> : <CustomElectionStatusBadge status={status} />}
-      {!election?.fromArchive && <ProcessTimeLeft status={status} endDate={endDate} startDate={startDate} />}
+      {!isInvalid && !election?.fromArchive && (
+        <ProcessTimeLeft status={status} endDate={endDate} startDate={startDate} />
+      )}
       {anonymous && <AnonVoteBadge />}
     </TopWrapper>
   );

components/pages/elections/components/ElectionTypeBadge.tsx

@@ -33,3 +33,12 @@ export const ArchivedBadge = () => {
   const { i18n } = useTranslation();
   return <CustomTag bg={'#68672e'}>{i18n.t('vote.badge.archived')}</CustomTag>;
 };
+
+export const InvalidElectionBadge = () => {
+  const { i18n } = useTranslation();
+  return (
+    <CustomTag bg={'#c9eaf8'} color={'#f17c7c'}>
+      {i18n.t('vote.badge.invalid')}
+    </CustomTag>
+  );
+};

components/pages/elections/details/index.tsx

@@ -13,21 +13,22 @@ import useExtendedElection from '@hooks/use-extended-election';
 import { DateDiffType, localizedDateDiff, localizedStartEndDateDiff } from '@lib/date';
 import { colors } from '@theme/colors';
 import { ElectionDescription } from '@vocdoni/chakra-components';
-import { CensusTypeEnum, ElectionStatus } from '@vocdoni/sdk';
+import { CensusTypeEnum, ElectionStatus, InvalidElection } from '@vocdoni/sdk';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { CensusOriginBadge } from '../components/ElectionCensusOrigin-badge';
 import { EnvelopeExplorer } from '../components/ElectionEnvelopeExplorer';
 import { EncryptionKeys } from '../components/ElectionKeys';
 import { ProcessModeBadge } from '../components/ElectionProcessmodeBadge';
-import { AnonVoteBadge, ElectionTypeBadge, ArchivedBadge } from '../components/ElectionTypeBadge';
+import { AnonVoteBadge, ArchivedBadge, ElectionTypeBadge, InvalidElectionBadge } from '../components/ElectionTypeBadge';
 import { ResultsCard } from '../components/ResultsCard';
 
 const ProcessesDetailPage = () => {
   const { election, electionRaw } = useExtendedElection();
   const dateDiffStr = resolveLocalizedDateDiff(election.startDate, election.endDate, election.status);
   const id = election.id;
   const organizationId = election.organizationId;
+  const isInvalid = election instanceof InvalidElection;
 
   const { i18n } = useTranslation();
 
@@ -53,9 +54,11 @@ const ProcessesDetailPage = () => {
         </Typography>
         <CustomElectionStatusBadge status={election.status} />
       </FlexRowWrapper>
-      <Typography variant={TypographyVariant.Small} color={colors.lightText}>
-        {dateDiffStr}
-      </Typography>
+      {!isInvalid && (
+        <Typography variant={TypographyVariant.Small} color={colors.lightText}>
+          {dateDiffStr}
+        </Typography>
+      )}
       <Typography variant={TypographyVariant.Small} color={colors.lightText}>
         <span>{i18n.t('processes.details.created_on')} </span>
         <span>{localizedDateDiff(election.startDate)}</span>
@@ -64,6 +67,7 @@ const ProcessesDetailPage = () => {
       {/* Labels and badges */}
       <Grid>
         <BadgeColumn>
+          {isInvalid && <InvalidElectionBadge />}
           {election.fromArchive && <ArchivedBadge />}
           <CensusOriginBadge censusOrigin={CensusTypeEnum[electionRaw.census.censusOrigin as string]} />
           <ProcessModeBadge autostart={electionRaw.electionMode.autoStart} />

i18n/locales/ca.json

@@ -339,7 +339,8 @@
     "vote": {
         "badge": {
             "anonymous": "Anònim",
-            "archived": "Arxivat"
+            "archived": "Arxivat",
+            "invalid": "Invalida"
         },
         "loading_results": "Carregant resultats",
         "no_questions_yet": "Encara no hi ha preguntes",

i18n/locales/en.json

@@ -339,7 +339,8 @@
     "vote": {
         "badge": {
             "anonymous": "Anonymous",
-            "archived": "Archived"
+            "archived": "Archived",
+            "invalid": "Invalid"
         },
         "loading_results": "Loading results",
         "no_questions_yet": "No questions yet",

i18n/locales/es.json

@@ -339,7 +339,8 @@
     "vote": {
         "badge": {
             "anonymous": "Anónimo",
-            "archived": "Archivada"
+            "archived": "Archivada",
+            "invalid": "Invalida"
         },
         "loading_results": "Cargando resultados",
         "no_questions_yet": "No hay preguntas aún",