Website: Display contributions dynamically on selections page (instea…

…d of hardcoding in shared/locales) (#1001) * Display contributions dynamically instead of hardcoding in shared/locales * Debug ill-functioning of currency-redirect.tsx, revert changes in shared locales * Experiment adding "../" to Draws path * Use process.cwd to get the current nextjs folder * Remove extra "/transparency" route in currency * Clean TODOs and ready for review * Move currency-redirect.tsx to (components) directory in transparency folder --------- Co-authored-by: Sandino Scheidegger <[email protected]>
socialincome-san · Jan 13, 2025 · 2d28b07 · 2d28b07
1 parent be8179c
commit 2d28b07
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 30 deletions.
diff --git a/shared/locales/de/website-selection.json b/shared/locales/de/website-selection.json
@@ -42,7 +42,6 @@
 				"text": "die die Unterstützung am meisten benötigen.”"
 			}
 		],
-		"amount": "USD 300,000+",
 		"amount-context": "Spenden erhalten ↗",
 		"scope": "Mehr ",
 		"continue-1": "Auswahlverfahren"

diff --git a/shared/locales/en/website-selection.json b/shared/locales/en/website-selection.json
@@ -39,7 +39,6 @@
 				"text": "who need Social Income the most."
 			}
 		],
-		"amount": "USD 300,000+",
 		"amount-context": "raised to date ↗",
 		"scope": "visit our ",
 		"continue-1": "Selection Process"

diff --git a/shared/locales/fr/website-selection.json b/shared/locales/fr/website-selection.json
@@ -39,7 +39,6 @@
 				"text": "sur les personnes qui ont le plus besoin de Social Income."
 			}
 		],
-		"amount": "USD 300,000+",
 		"amount-context": "reçus à ce jour ↗",
 		"scope": "Plus de ",
 		"continue-1": "Processus de sélection"

diff --git a/shared/locales/it/website-selection.json b/shared/locales/it/website-selection.json
@@ -39,7 +39,6 @@
 				"text": "che hanno più bisogno di Social Income."
 			}
 		],
-		"amount": "USD 300,000+",
 		"amount-context": "raccolti fino a oggi ↗",
 		"scope": "Più ",
 		"continue-1": "Processo di selezione"

diff --git a/...finances/[currency]/currency-redirect.tsx → ...arency/(components)/currency-redirect.tsx b/...finances/[currency]/currency-redirect.tsx → ...arency/(components)/currency-redirect.tsx
diff --git a/website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/page.tsx b/website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/page.tsx
@@ -1,5 +1,5 @@
 import { DefaultPageProps, DefaultParams } from '@/app/[lang]/[region]';
-import { CurrencyRedirect } from '@/app/[lang]/[region]/(website)/transparency/finances/[currency]/currency-redirect';
+import { CurrencyRedirect } from '@/app/[lang]/[region]/(website)/transparency/(components)/currency-redirect';
 import { firestoreAdmin } from '@/firebase-admin';
 import { WebsiteCurrency, WebsiteLanguage, WebsiteRegion, websiteCurrencies } from '@/i18n';
 import { Currency } from '@socialincome/shared/src/types/currency';

diff --git a/...cy/recipient-selection/(assets)/globe.svg → ...t-selection/[currency]/(assets)/globe.svg b/...cy/recipient-selection/(assets)/globe.svg → ...t-selection/[currency]/(assets)/globe.svg
diff --git a/...pient-selection/(assets)/transparency.svg → ...tion/[currency]/(assets)/transparency.svg b/...pient-selection/(assets)/transparency.svg → ...tion/[currency]/(assets)/transparency.svg
diff --git a/...ient-selection/(components)/draw-card.tsx → ...ion/[currency]/(components)/draw-card.tsx b/...ient-selection/(components)/draw-card.tsx → ...ion/[currency]/(components)/draw-card.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { CompletedDraw } from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/(sections)/state';
 import { WebsiteLanguage } from '@/i18n';
 import { Card, Collapsible, CollapsibleContent, CollapsibleTrigger, Typography } from '@socialincome/ui';
 import { DateTime } from 'luxon';
 import Link from 'next/link';
+import { CompletedDraw } from '../(sections)/state';
 
 type DrawCardProps = {
 	lang: WebsiteLanguage;

diff --git a/...ection/(components)/scroll-to-chevron.tsx → ...rency]/(components)/scroll-to-chevron.tsx b/...ection/(components)/scroll-to-chevron.tsx → ...rency]/(components)/scroll-to-chevron.tsx
diff --git a/...cy/recipient-selection/(sections)/faq.tsx → ...t-selection/[currency]/(sections)/faq.tsx b/...cy/recipient-selection/(sections)/faq.tsx → ...t-selection/[currency]/(sections)/faq.tsx
diff --git a/...ent-selection/(sections)/hero-section.tsx → ...on/[currency]/(sections)/hero-section.tsx b/...ent-selection/(sections)/hero-section.tsx → ...on/[currency]/(sections)/hero-section.tsx
@@ -1,10 +1,10 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import ScrollToChevron from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/(components)/scroll-to-chevron';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Image from 'next/image';
 import globeRotating from '../(assets)/globe.svg';
+import ScrollToChevron from '../(components)/scroll-to-chevron';
 
 export async function HeroSection({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({

diff --git a/...ient-selection/(sections)/past-rounds.tsx → ...ion/[currency]/(sections)/past-rounds.tsx b/...ient-selection/(sections)/past-rounds.tsx → ...ion/[currency]/(sections)/past-rounds.tsx
@@ -1,9 +1,9 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import { DrawCard } from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/(components)/draw-card';
-import { loadPastDraws } from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/(sections)/state';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
+import { DrawCard } from '../(components)/draw-card';
+import { loadPastDraws } from './state';
 
 export const revalidate = 3600 * 24; // update once a day
 

diff --git a/...ipient-selection/(sections)/resources.tsx → ...ction/[currency]/(sections)/resources.tsx b/...ipient-selection/(sections)/resources.tsx → ...ction/[currency]/(sections)/resources.tsx
@@ -1,17 +1,32 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import ScrollToChevron from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/(components)/scroll-to-chevron';
+import { firestoreAdmin } from '@/firebase-admin';
+import { WebsiteCurrency } from '@/i18n';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { ContributionStatsCalculator } from '@socialincome/shared/src/utils/stats/ContributionStatsCalculator';
 import { Button, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Image from 'next/image';
 import transparency from '../(assets)/transparency.svg';
+import ScrollToChevron from '../(components)/scroll-to-chevron';
 
-export async function Resources({ lang }: DefaultParams) {
+type ResourcePageProps = {
+	currency: string;
+} & DefaultParams;
+
+const roundAmount = (amount: number) => (amount ? Math.round(amount / 10) * 10 : 0);
+
+export async function Resources({ lang, currency }: ResourcePageProps) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['website-selection'],
 	});
 
+	const contributionCalculator = await ContributionStatsCalculator.build(
+		firestoreAdmin,
+		currency.toUpperCase() as WebsiteCurrency,
+	);
+	const totalContributionsAmount = contributionCalculator.totalContributionsAmount();
+
 	return (
 		<div id="resources-section" className="flex h-[calc(100svh)] min-h-[600px] flex-col">
 			<div className="mt-[80px] flex flex-grow flex-col items-center justify-center p-6 text-center">
@@ -39,9 +54,10 @@ export async function Resources({ lang }: DefaultParams) {
 					<div className="mx-auto my-4 max-w-4xl text-center sm:text-left">
 						<div>
 							<Button variant="link">
-								<a href="../transparency/finances" target="_blank" rel="noopener noreferrer">
+								<a href="../finances" target="_blank" rel="noopener noreferrer">
 									<Typography as="span" className="text-xl sm:text-2xl">
-										{translator.t('section-2.amount')} {translator.t('section-2.amount-context')}
+										{currency.toUpperCase()} {roundAmount(totalContributionsAmount)}{' '}
+										{translator.t('section-2.amount-context')}
 									</Typography>
 								</a>
 							</Button>

diff --git a/...election/(sections)/selection-process.tsx → ...urrency]/(sections)/selection-process.tsx b/...election/(sections)/selection-process.tsx → ...urrency]/(sections)/selection-process.tsx
diff --git a/...y/recipient-selection/(sections)/state.ts → ...-selection/[currency]/(sections)/state.ts b/...y/recipient-selection/(sections)/state.ts → ...-selection/[currency]/(sections)/state.ts
@@ -1,7 +1,7 @@
 import { readFileSync } from 'fs';
 import * as fs from 'fs/promises';
 
-const DRAWS_PATH = '../recipients_selection/draws';
+const DRAWS_PATH = process.cwd() + '/../recipients_selection/draws';
 
 export type Draw = {
 	name: string;

diff --git a/...te/src/app/[lang]/[region]/(website)/transparency/recipient-selection/[currency]/page.tsx b/...te/src/app/[lang]/[region]/(website)/transparency/recipient-selection/[currency]/page.tsx
@@ -0,0 +1,27 @@
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { CurrencyRedirect } from '@/app/[lang]/[region]/(website)/transparency/(components)/currency-redirect';
+import { WebsiteCurrency } from '@/i18n';
+import { SelectionFaq } from './(sections)/faq';
+import { HeroSection } from './(sections)/hero-section';
+import { PastRounds } from './(sections)/past-rounds';
+import { Resources } from './(sections)/resources';
+import { SelectionProcess } from './(sections)/selection-process';
+
+type RecipientSelectionPageProps = {
+	params: {
+		currency: string;
+	} & DefaultParams;
+};
+
+export default async function Page({ params: { lang, region, currency } }: RecipientSelectionPageProps) {
+	return (
+		<div className="-mt-24 md:-mt-36">
+			<CurrencyRedirect currency={currency.toUpperCase() as WebsiteCurrency} />
+			<HeroSection lang={lang} region={region} />
+			<Resources lang={lang} region={region} currency={currency} />
+			<SelectionProcess lang={lang} region={region} />
+			<PastRounds lang={lang} region={region} />
+			<SelectionFaq lang={lang} region={region} />
+		</div>
+	);
+}
diff --git a/website/src/app/[lang]/[region]/(website)/transparency/recipient-selection/page.tsx b/website/src/app/[lang]/[region]/(website)/transparency/recipient-selection/page.tsx
@@ -1,18 +1,13 @@
-import { DefaultPageProps } from '@/app/[lang]/[region]';
-import { SelectionFaq } from './(sections)/faq';
-import { HeroSection } from './(sections)/hero-section';
-import { PastRounds } from './(sections)/past-rounds';
-import { Resources } from './(sections)/resources';
-import { SelectionProcess } from './(sections)/selection-process';
+'use client';
 
-export default async function Page({ params: { lang, region } }: DefaultPageProps) {
-	return (
-		<div className="-mt-24 md:-mt-36">
-			<HeroSection lang={lang} region={region} />
-			<Resources lang={lang} region={region} />
-			<SelectionProcess lang={lang} region={region} />
-			<PastRounds lang={lang} region={region} />
-			<SelectionFaq lang={lang} region={region} />
-		</div>
-	);
+import { useI18n } from '@/components/providers/context-providers';
+import { redirect } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Page() {
+	const { currency } = useI18n();
+
+	useEffect(() => {
+		redirect('./recipient-selection/' + currency?.toLowerCase());
+	}, [currency]);
 }