feat: implement success page and update routing; add lucide icons and enhance form submission feedback

2026-01-21 10:26:39 +01:00
parent 4602f6a4f5
commit e2ed58499a
8 changed files with 210 additions and 445 deletions
@@ -0,0 +1,174 @@
+import { Box, Paper, Typography, Chip } from "@mui/material";
+import { useEffect, useState } from "react";
+import { CircleCheck } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export const SuccessPage = () => {
+  const [orderId, setOrderId] = useState<string | null>(null);
+  const [tickets, setNumberOfTickets] = useState<number>(0);
+  const [animate, setAnimate] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const id = params.get("id");
+    const numberOfTickets = params.get("tickets");
+
+    setOrderId(id);
+    setNumberOfTickets(numberOfTickets ? parseInt(numberOfTickets, 10) : 0);
+
+    setTimeout(() => setAnimate(true), 100);
+  }, []);
+
+  return (
+    <Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4">
+      <Paper
+        elevation={3}
+        className="w-full max-w-md p-8 rounded-lg"
+        sx={{
+          backgroundColor: "#fff",
+          textAlign: "center",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Animated Success Icon */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            mb: 3,
+            transition: "all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
+            transform: animate ? "scale(1)" : "scale(0)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          <CircleCheck size={80} className="text-green-500" strokeWidth={2.5} />
+        </Box>
+
+        {/* Success Message */}
+        <Typography
+          variant="h4"
+          component="h1"
+          gutterBottom
+          sx={{
+            fontWeight: "bold",
+            color: "#2e7d32",
+            mb: 2,
+            transition: "all 0.5s ease-in-out 0.2s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          {t("form-submitted-successfully")}
+        </Typography>
+
+        <Typography
+          variant="body1"
+          sx={{
+            color: "#666",
+            mb: 3,
+            transition: "all 0.5s ease-in-out 0.3s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          {t("ticket-payment", { count: tickets })}
+        </Typography>
+
+        {/* Tickets Display */}
+        {tickets > 0 && (
+          <Box
+            sx={{
+              mb: 2,
+              transition: "all 0.5s ease-in-out 0.35s",
+              transform: animate ? "translateY(0)" : "translateY(20px)",
+              opacity: animate ? 1 : 0,
+            }}
+          >
+            <Chip
+              label={`${tickets} ${tickets === 1 ? t("ticket") : t("tickets")}`}
+              color="secondary"
+              sx={{
+                fontWeight: "bold",
+                fontSize: "1rem",
+                py: 2.5,
+                px: 2,
+              }}
+            />
+          </Box>
+        )}
+
+        {/* Order ID Display */}
+        {orderId && (
+          <Box
+            sx={{
+              mb: 3,
+              transition: "all 0.5s ease-in-out 0.4s",
+              transform: animate ? "translateY(0)" : "translateY(20px)",
+              opacity: animate ? 1 : 0,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: "#888",
+                mb: 1,
+                fontSize: "0.875rem",
+              }}
+            >
+              {t("entry-id")}
+            </Typography>
+            <Chip
+              label={`#${orderId}`}
+              color="primary"
+              sx={{
+                fontWeight: "bold",
+                fontSize: "1.25rem",
+                py: 3,
+                px: 2,
+              }}
+            />
+          </Box>
+        )}
+
+        {/* Additional Info */}
+        <Box
+          sx={{
+            mt: 4,
+            pt: 3,
+            borderTop: "1px solid #e0e0e0",
+            transition: "all 0.5s ease-in-out 0.5s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              color: "#666",
+              lineHeight: 1.6,
+            }}
+          >
+            {t("thank-you")}
+          </Typography>
+        </Box>
+
+        {/* Decorative Elements */}
+        <Box
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "4px",
+            background: "linear-gradient(90deg, #4caf50 0%, #81c784 100%)",
+            transition: "all 0.8s ease-in-out 0.6s",
+            transform: animate ? "scaleX(1)" : "scaleX(0)",
+            transformOrigin: "left",
+          }}
+        />
+      </Paper>
+    </Box>
+  );
+};