Matthias-Claudius-Schule/ca-lose
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update SuccessPage with countdown and return button; localize return button text

Browse Source
This commit is contained in:
Theis Gaedigk
2026-01-21 16:27:32 +01:00
parent 9445f5d417
commit e3e1037a85
4 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title> <title>Lose verkaufen</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

38
frontend/src/pages/SuccessPage.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Paper, Typography, Chip } from "@mui/material"; import { Box, Paper, Typography, Chip, Button } from "@mui/material";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { CircleCheck } from "lucide-react"; import { CircleCheck } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ export const SuccessPage = () => {
const [tickets, setNumberOfTickets] = useState<number>(0); const [tickets, setNumberOfTickets] = useState<number>(0);
const [animate, setAnimate] = useState(false); const [animate, setAnimate] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const [seconds, setSeconds] = useState(30);
useEffect(() => { useEffect(() => {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
@@ -20,6 +21,17 @@ export const SuccessPage = () => {
setTimeout(() => setAnimate(true), 100); setTimeout(() => setAnimate(true), 100);
}, []); }, []);
useEffect(() => {
if (seconds === 0) {
window.location.href = "/";
return;
}
const timer = setTimeout(() => setSeconds(seconds - 1), 1000);
return () => clearTimeout(timer);
}, [seconds]);
return ( return (
<Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4"> <Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4">
<Paper <Paper
@@ -132,6 +144,30 @@ export const SuccessPage = () => {
</Box> </Box>
)} )}
{/* Return button */}
<Box
sx={{
mb: 3,
transition: "all 0.5s ease-in-out 0.4s",
transform: animate ? "translateY(0)" : "translateY(20px)",
opacity: animate ? 1 : 0,
}}
>
<Button
href="/"
variant="contained"
color="primary"
sx={{
fontWeight: "bold",
fontSize: "1.25rem",
py: 3,
px: 2,
}}
>
{seconds + " " + t("return-to-homepage")}
</Button>
</Box>
{/* Additional Info */} {/* Additional Info */}
<Box <Box
sx={{ sx={{

6
frontend/src/utils/i18n/locales/de/de.json
View File

@@ -19,8 +19,10 @@
"cash": "Bar", "cash": "Bar",
"paypal": "PayPal", "paypal": "PayPal",
"transfer": "Andere (notieren)", "transfer": "Andere (notieren)",
"ticket-payment": "Sie haben erflogreich {count} {count, plural, one {Los} other {Lose}} gekauft.", "ticket-payment_one": "Sie haben erfolgreich {{count}} Los gekauft.",
"ticket-payment_other": "Sie haben erfolgreich {{count}} Lose gekauft.",
"entry-id": "Eintrags-ID", "entry-id": "Eintrags-ID",
"thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.", "thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
"select-payment-method": "Zahlungsmethode auswählen" "select-payment-method": "Zahlungsmethode auswählen",
"return-to-homepage": "Zurück"
} }

3
frontend/src/utils/i18n/locales/en/en.json
View File

@@ -24,5 +24,6 @@
"tickets": "Tickets", "tickets": "Tickets",
"entry-id": "Entry ID", "entry-id": "Entry ID",
"thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.", "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
"select-payment-method": "Select Payment Method" "select-payment-method": "Select Payment Method",
"return-to-homepage": "Return"
} }