Enhance Review2024 quiz final result: calculate total points, define …

…point tiers, and update translations for feedback messages. Adjust points prop in Review2024QuizWrapper for testing.

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

@@ -3,9 +3,9 @@
 /* * */
 
 import { LottiePlayer } from '@/components/common/LottiePlayer';
-import { allQuizData } from '@/components/review-2024/_data/quiz';
 import { useTranslations } from 'next-intl';
 
+import { allQuizData } from '../_data/quiz';
 import styles from './styles.module.css';
 
 /* * */
@@ -24,6 +24,22 @@ export function Review2024QuizFinalResult({ points }: Props) {
 
 	const t = useTranslations('review-2024.Review2024QuizFinalResult');
 
+	//
+	// B. Transform data
+
+	const totalPoints = allQuizData.reduce((acc, quiz) => acc + quiz._points, 0);
+
+	const pointTiers = [
+		{ _id: 'terrible', value: totalPoints * 0.2 },
+		{ _id: 'bad', value: totalPoints * 0.4 },
+		{ _id: 'acceptable', value: totalPoints * 0.6 },
+		{ _id: 'very_good', value: totalPoints * 0.8 },
+		{ _id: 'incredible', value: totalPoints - 1 },
+		{ _id: 'perfect', value: totalPoints },
+	];
+
+	const pointTier = pointTiers.find(tier => tier.value >= points) || pointTiers[0];
+
 	//
 	// C. Render components
 
@@ -34,9 +50,9 @@ export function Review2024QuizFinalResult({ points }: Props) {
 				<LottiePlayer path="/assets/review-2024/animations/digital/website_daily.json" loop play />
 			</div>
 
-			<p className={styles.title}>Parabéns!</p>
+			<p className={styles.title}>{t(`${pointTier._id}.title`)}</p>
 
-			<p className={styles.subtitle}>{t('points', { points: points, total: allQuizData.length })}</p>
+			<p className={styles.subtitle}>{t(`${pointTier._id}.subtitle`, { points: points })}</p>
 
 		</div>
 	);

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

@@ -61,7 +61,7 @@ export function Review2024QuizWrapper({ answerStatus, points, progress, setAnswe
 		return (
 			<Surface variant="persistent" forceOverflow>
 				<Section withPadding="desktop" withGap>
-					<Review2024QuizFinalResult points={points} />
+					<Review2024QuizFinalResult points={15} />
 				</Section>
 			</Surface>
 		);

frontend/components/review-2024/_data/quiz.ts

@@ -8,7 +8,7 @@ export interface Review2024QuizAnswerSchema {
 
 export interface Review2024QuizSchema {
 	_id: string
-	_points?: number
+	_points: number
 	answers: Review2024QuizAnswerSchema[]
 	colors: {
 		border?: string

frontend/i18n/translations/pt.json

@@ -1203,7 +1203,30 @@
 			}
 		},
 		"Review2024QuizFinalResult": {
-			"points": "Já tens {points, plural, =1 {# ponto} other {# pontos}}!"
+			"acceptable": {
+				"subtitle": "{points, plural, =1 {Ganhaste só # ponto...} other {Ganhaste só # pontos...}}!",
+				"title": "Aceitável"
+			},
+			"bad": {
+				"subtitle": "{points, plural, =1 {Ganhaste só # ponto...} other {Ganhaste só # pontos...}}!",
+				"title": "Não muito bom..."
+			},
+			"incredible": {
+				"subtitle": "{points, plural, =1 {Ganhaste só # ponto...} other {Ganhaste só # pontos...}}!",
+				"title": "Incrível!"
+			},
+			"perfect": {
+				"subtitle": "{points, plural, =1 {Ganhaste só # ponto...} other {Ganhaste só # pontos...}}!",
+				"title": "Uau. Perfeito. Sem falhas."
+			},
+			"terrible": {
+				"subtitle": "{points, plural, =1 {Ganhaste só # ponto...} other {Ganhaste só # pontos...}}!",
+				"title": "Terrível..."
+			},
+			"very_good": {
+				"subtitle": "{points, plural, =1 {Ganhaste só # ponto...} other {Ganhaste só # pontos...}}!",
+				"title": "Boa!"
+			}
 		},
 		"Review2024QuizPoints": {
 			"points": "{points, plural, =0 {Joga para ganhar pontos!} =1 {Já tens # ponto} other {Já tens # pontos}}"