diff --git a/packages/ballot-verifier/src/screens/ConfirmationScreen.tsx b/packages/ballot-verifier/src/screens/ConfirmationScreen.tsx index 4bdc88ba90c..063692ba122 100644 --- a/packages/ballot-verifier/src/screens/ConfirmationScreen.tsx +++ b/packages/ballot-verifier/src/screens/ConfirmationScreen.tsx @@ -28,6 +28,7 @@ import { StyledButton, PlaintextVoteContest, } from "@sequentech/ui-essentials" +import {sortContestList} from "@sequentech/ui-core" import {keyBy} from "lodash" import {useElectionClassName} from "./hooks/useElectionClassName" import {SettingsContext} from "../providers/SettingsContextProvider" @@ -249,6 +250,26 @@ const VerifySelectionsSection: React.FC = ({ const [verifySelectionsHelp, setVerifySelectionsHelp] = useState(false) const plaintextVoteQuestions = confirmationBallot?.decoded_questions || [] const questionsMap = keyBy(confirmationBallot?.election_config.contests || [], "id") + const contestsOrderType = confirmationBallot?.election_config.election_presentation?.contests_order + const sortedPlaintextVoteQuestions = useMemo(() => { + if (!plaintextVoteQuestions.length) { + return [] + } + + const sortedContests = sortContestList( + confirmationBallot?.election_config.contests || [], + contestsOrderType + ) + const contestIndexMap = new Map( + sortedContests.map((contest, index) => [contest.id, index] as const) + ) + + return [...plaintextVoteQuestions].sort((a, b) => { + const firstIndex = contestIndexMap.get(a.contest_id) ?? Number.MAX_SAFE_INTEGER + const secondIndex = contestIndexMap.get(b.contest_id) ?? Number.MAX_SAFE_INTEGER + return firstIndex - secondIndex + }) + }, [confirmationBallot?.election_config.contests, contestsOrderType, plaintextVoteQuestions]) const {globalSettings} = useContext(SettingsContext) return ( @@ -304,7 +325,7 @@ const VerifySelectionsSection: React.FC = ({ ) : ( <> - {plaintextVoteQuestions.map((voteQuestion) => ( + {sortedPlaintextVoteQuestions.map((voteQuestion) => (