Refactor Review2024 components: remove Review2024LevelFive and Review…

…2024QuizQuestions, introduce Review2024QuizWrapper for improved quiz handling and styling

frontend/components/review-2024/Review2024Page/index.tsx

@@ -3,13 +3,12 @@
 /* * */
 
 import { Review2024Intro } from '@/components/review-2024/Review2024Intro';
-import { Review2024LevelFive } from '@/components/review-2024/Review2024LevelFive';
 import { Review2024LevelFour } from '@/components/review-2024/Review2024LevelFour';
 import { Review2024LevelOne } from '@/components/review-2024/Review2024LevelOne';
 import { Review2024LevelSix } from '@/components/review-2024/Review2024LevelSix';
 import { Review2024LevelThree } from '@/components/review-2024/Review2024LevelThree';
 import { Review2024LevelTwo } from '@/components/review-2024/Review2024LevelTwo';
-import { Review2024QuizQuestions } from '@/components/review-2024/Review2024QuizQuestions';
+import { Review2024QuizWrapper } from '@/components/review-2024/Review2024QuizWrapper';
 import { Review2024TabSelector } from '@/components/review-2024/Review2024TabSelector';
 import { useState } from 'react';
 
@@ -50,8 +49,7 @@ export function Review2024Page() {
 			)}
 
 			{selectedTab === 'quiz' && (
-				<Review2024LevelFive
-				// <Review2024QuizQuestions
+				<Review2024QuizWrapper
 					points={quizPoints}
 					progress={quizProgress}
 					setPoints={setQuizPoints}

frontend/components/review-2024/Review2024QuizWrapper/index.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+/* * */
+
+import { Grid } from '@/components/layout/Grid';
+import { Section } from '@/components/layout/Section';
+import { Surface } from '@/components/layout/Surface';
+import { allQuizData, type Review2024QuizAnswerSchema } from '@/components/review-2024/_data/quiz';
+import { Review2024QuizPoints } from '@/components/review-2024/Review2024QuizPoints';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+import { Review2024QuizFinalResult } from '../Review2024QuizFinalResult';
+import { Review2024QuizQuestion } from '../Review2024QuizQuestion';
+import styles from './styles.module.css';
+
+/* * */
+
+interface Props {
+	points: number
+	progress: number
+	setPoints: (value: number) => void
+	setProgress: (value: number) => void
+}
+
+/* * */
+
+export function Review2024QuizWrapper({ points, progress, setPoints, setProgress }: Props) {
+	//
+
+	//
+	// A. Setup variables
+
+	const t = useTranslations('review-2024.Review2024QuizWrapper');
+
+	const [answerStatus, setAnswerStatus] = useState<'correct' | 'wrong' | null>(null);
+
+	//
+	// B. Handle actions
+
+	const handleClickAnswerOption = (answerData: Review2024QuizAnswerSchema) => {
+		if (answerStatus === null) {
+			if (answerData.is_correct) {
+				setAnswerStatus('correct');
+				setPoints(points + 542);
+			}
+			else {
+				setAnswerStatus('wrong');
+			}
+		}
+	};
+
+	const handleAdvanceQuestion = () => {
+		setAnswerStatus(null);
+		setProgress(progress + 1);
+	};
+
+	//
+	// C. Render components
+
+	if (progress >= allQuizData.length) {
+		return (
+			<div className={styles.container}>
+				<Review2024QuizFinalResult points={points} />
+			</div>
+		);
+	}
+
+	return (
+		<Surface forceOverflow>
+			<Grid columns="ab">
+
+				<Section withPadding="desktop" withGap>
+					<div className={styles.headingWrapper}>
+						<h2 className={styles.heading}>{t('digital.heading')}</h2>
+						<h5 className={styles.subheading}>{t('digital.subheading')}</h5>
+					</div>
+					<Review2024QuizPoints points={points} />
+				</Section>
+
+				<Section withPadding="desktop" withGap>
+					<div className={styles.container}>
+						<Review2024QuizQuestion
+							answerStatus={answerStatus}
+							onAnswer={handleClickAnswerOption}
+							onClickNext={handleAdvanceQuestion}
+							quizData={allQuizData[progress]}
+						/>
+					</div>
+				</Section>
+
+			</Grid>
+		</Surface>
+	);
+
+	//
+}

frontend/components/review-2024/Review2024LevelFive/styles.module.css → frontend/components/review-2024/Review2024QuizWrapper/styles.module.css

@@ -1,3 +1,19 @@
+/* * */
+/* CONTAINER */
+
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	align-items: flex-start;
+	justify-content: flex-start;
+	width: 100%;
+
+	/* max-width: 400px; */
+	margin: auto;
+}
+
+
 /* * */
 /* HEADINGS */
 

frontend/i18n/translations/en.json

@@ -1154,7 +1154,7 @@
 		}
 	},
 	"review-2024": {
-		"Review2024LevelFive": {
+		"Review2024QuizWrapper": {
 			"digital": {
 				"heading": "Paragens Importantes",
 				"subheading": "Tudo sobre os passageiros da CMetropolitana ao longo de 2024."

frontend/i18n/translations/pt.json

@@ -1154,7 +1154,7 @@
 		}
 	},
 	"review-2024": {
-		"Review2024LevelFive": {
+		"Review2024QuizWrapper": {
 			"digital": {
 				"heading": "Paragens Importantes",
 				"subheading": "Tudo sobre os passageiros da CMetropolitana ao longo de 2024."