add lucide-react dependency and update form handling in MainForm
- Added lucide-react to package dependencies - Refactored MainForm to improve form handling and user selection - Removed SuccessPage component and related logic - Updated localization files to include new keys for invoice details - Created interfaces for form data and messages
This commit is contained in:
Generated
+10
@@ -16,6 +16,7 @@
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"i18next": "^26.0.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lucide-react": "^1.14.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-i18next": "^17.0.7",
|
||||
@@ -3105,6 +3106,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "1.14.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.14.0.tgz",
|
||||
"integrity": "sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"i18next": "^26.0.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lucide-react": "^1.14.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-i18next": "^17.0.7",
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
export interface FormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phoneNumber: string;
|
||||
tickets: number;
|
||||
companyName: string;
|
||||
cmpFirstName: string;
|
||||
cpmLastName: string;
|
||||
cpmEmail: string;
|
||||
cpmPhoneNumber: string;
|
||||
street: string;
|
||||
postalCode: string;
|
||||
paymentMethod: string;
|
||||
}
|
||||
|
||||
export interface Message {
|
||||
type: "primary" | "neutral" | "danger" | "success" | "warning";
|
||||
headline: string;
|
||||
text: string;
|
||||
}
|
||||
+237
-380
@@ -1,38 +1,33 @@
|
||||
import {
|
||||
TextField,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
Button,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Autocomplete,
|
||||
Chip,
|
||||
Box,
|
||||
Paper,
|
||||
Typography,
|
||||
IconButton,
|
||||
} from "@mui/material";
|
||||
import { useTranslation } from "../../node_modules/react-i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState, useEffect } from "react";
|
||||
import { submitFormData } from "../utils/sender";
|
||||
import Cookies from "../../node_modules/@types/js-cookie";
|
||||
import * as React from "react";
|
||||
import TranslateIcon from "@mui/icons-material/Translate";
|
||||
import Cookies from "js-cookie";
|
||||
import { Languages } from "lucide-react";
|
||||
import {
|
||||
Sheet,
|
||||
Input,
|
||||
Button,
|
||||
Checkbox,
|
||||
Chip,
|
||||
IconButton,
|
||||
Alert,
|
||||
Typography,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Autocomplete,
|
||||
} from "@mui/joy";
|
||||
import { submitFormData } from "../utils/sender";
|
||||
import { API_BASE } from "../config/api.config";
|
||||
import type { FormData, Message } from "../config/interfaces.config";
|
||||
|
||||
interface Message {
|
||||
type: "error" | "info" | "success" | "warning";
|
||||
headline: string;
|
||||
text: string;
|
||||
}
|
||||
const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
|
||||
const PAYMENT_LABELS: Record<string, string> = {
|
||||
bar: "Cash",
|
||||
paypal: "PayPal",
|
||||
andere: "Transfer",
|
||||
};
|
||||
|
||||
export const MainForm = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [invoice, setInvoice] = useState(false);
|
||||
const [msg, setMsg] = useState<Message | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [nextID, setNextID] = useState<number | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
const DEFAULT_FORM: FormData = {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
@@ -46,75 +41,98 @@ export const MainForm = () => {
|
||||
street: "",
|
||||
postalCode: "",
|
||||
paymentMethod: "",
|
||||
});
|
||||
};
|
||||
|
||||
// ─── Field component lives OUTSIDE MainForm so React doesn't treat it as a
|
||||
// new component type on every render, which would cause inputs to lose focus.
|
||||
const Field = ({
|
||||
label,
|
||||
name,
|
||||
type = "text",
|
||||
required = true,
|
||||
formData,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
name: keyof FormData;
|
||||
type?: string;
|
||||
required?: boolean;
|
||||
formData: FormData;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}) => (
|
||||
<FormControl required={required}>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<Input
|
||||
name={name}
|
||||
type={type}
|
||||
value={formData[name] as string}
|
||||
onChange={onChange}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
|
||||
export const MainForm = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const [invoice, setInvoice] = useState(false);
|
||||
const [msg, setMsg] = useState<Message | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [nextID, setNextID] = useState<number | null>(null);
|
||||
const [users, setUsers] = useState<string[]>([]);
|
||||
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
||||
|
||||
const changeTranslation = () => {
|
||||
const clientLng = i18n.language;
|
||||
|
||||
if (clientLng === "en") {
|
||||
i18n.changeLanguage("de");
|
||||
} else if (clientLng === "de") {
|
||||
i18n.changeLanguage("en");
|
||||
} else {
|
||||
setMsg({
|
||||
type: "error",
|
||||
headline: "Error",
|
||||
text: "Cannot change langugage.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch user data or any other data needed for the form
|
||||
try {
|
||||
const fetchUsers = async () => {
|
||||
const response = await fetch(`${API_BASE}/default/users`);
|
||||
const data = await response.json();
|
||||
setUsers(data.users);
|
||||
};
|
||||
fetchUsers();
|
||||
console.log(users);
|
||||
} catch (error) {
|
||||
setMsg({
|
||||
type: "error",
|
||||
headline: t("error"),
|
||||
text: t("failed-to-load-users"),
|
||||
});
|
||||
console.error("Error fetching users:", error);
|
||||
}
|
||||
|
||||
if (Cookies.get("selectedUser")) {
|
||||
const cookieUser = Cookies.get("selectedUser")!;
|
||||
setSelectedUser(cookieUser);
|
||||
confirmUser(cookieUser);
|
||||
}
|
||||
}, [isLoading]);
|
||||
const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const confirmUser = async (selectedUser: string) => {
|
||||
const confirmUser = async (username: string) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/default/confirm-user?username=${selectedUser}`,
|
||||
const res = await fetch(
|
||||
`${API_BASE}/default/confirm-user?username=${username}`,
|
||||
);
|
||||
const data = await response.json();
|
||||
const data = await res.json();
|
||||
setNextID(data.nextID);
|
||||
} catch (error) {
|
||||
console.error("Error confirming user:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserSelection = (selectedUser: string | null) => {
|
||||
if (!selectedUser) return;
|
||||
setSelectedUser(selectedUser);
|
||||
confirmUser(selectedUser);
|
||||
Cookies.set("selectedUser", selectedUser);
|
||||
const handleUserSelection = (username: string | null) => {
|
||||
if (!username) return;
|
||||
setSelectedUser(username);
|
||||
confirmUser(username);
|
||||
Cookies.set("selectedUser", username);
|
||||
};
|
||||
|
||||
const toggleLanguage = () => {
|
||||
i18n.changeLanguage(i18n.language === "en" ? "de" : "en");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/default/users`);
|
||||
const data = await res.json();
|
||||
setUsers(data.users);
|
||||
} catch {
|
||||
setMsg({
|
||||
type: "danger",
|
||||
headline: t("error"),
|
||||
text: t("failed-to-load-users"),
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
const cookieUser = Cookies.get("selectedUser");
|
||||
if (cookieUser) {
|
||||
setSelectedUser(cookieUser);
|
||||
confirmUser(cookieUser);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
@@ -123,7 +141,7 @@ export const MainForm = () => {
|
||||
document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
|
||||
} else {
|
||||
setMsg({
|
||||
type: "error",
|
||||
type: "danger",
|
||||
headline: t("error"),
|
||||
text: result.error || t("form-submission-failed"),
|
||||
});
|
||||
@@ -133,44 +151,35 @@ export const MainForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Shorthand so we don't repeat formData + onChange on every Field usage
|
||||
const fieldProps = { formData, onChange: handleChange };
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="bg-gray-100 py-10 px-4"
|
||||
sx={{
|
||||
minHeight: "100vh",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={6}
|
||||
className="w-full rounded-2xl"
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-100 to-blue-50 p-4">
|
||||
<Sheet
|
||||
variant="plain"
|
||||
className="w-full"
|
||||
sx={{
|
||||
position: "relative",
|
||||
backgroundColor: "#fff",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
||||
width: "100%",
|
||||
maxWidth: {
|
||||
xs: 360, // kompakte Handy-Ansicht
|
||||
sm: 420, // kleine Tablets / große Phones
|
||||
md: 480, // Desktop, bleibt angenehm schmal
|
||||
},
|
||||
padding: {
|
||||
xs: "1.5rem",
|
||||
sm: "2rem",
|
||||
},
|
||||
maxWidth: 460,
|
||||
borderRadius: "24px",
|
||||
p: { xs: "1.5rem", sm: "2rem" },
|
||||
boxShadow: "0 24px 64px -12px rgba(0,0,0,0.18)",
|
||||
background: "#fff",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: "absolute", top: 12, right: 12 }}>
|
||||
{/* Language toggle */}
|
||||
<IconButton
|
||||
onClick={() => changeTranslation()}
|
||||
aria-label="translate"
|
||||
onClick={toggleLanguage}
|
||||
size="sm"
|
||||
variant="plain"
|
||||
color="neutral"
|
||||
aria-label="toggle language"
|
||||
sx={{ position: "absolute", top: 12, right: 12 }}
|
||||
>
|
||||
<TranslateIcon />
|
||||
<Languages size={18} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
@@ -178,337 +187,185 @@ export const MainForm = () => {
|
||||
}}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
{/* User Selection */}
|
||||
{/* User selection */}
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
options={users}
|
||||
value={selectedUser}
|
||||
fullWidth
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t("user")} variant="filled" />
|
||||
)}
|
||||
onChange={(_event, value) => handleUserSelection(value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.defaultMuiPrevented = true;
|
||||
}
|
||||
onChange={(_, value) => handleUserSelection(value)}
|
||||
placeholder={t("user")}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") e.preventDefault();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Next ID Chip */}
|
||||
{/* Next ID badge */}
|
||||
<Chip
|
||||
label={`#${nextID ?? "N/A"}`}
|
||||
size="md"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
sx={{
|
||||
alignSelf: "flex-start",
|
||||
fontWeight: 500,
|
||||
fontSize: "0.9rem",
|
||||
mt: 0.5,
|
||||
mb: 0.5,
|
||||
py: 0.5,
|
||||
px: 1.25,
|
||||
borderRadius: "999px",
|
||||
background: "linear-gradient(135deg, #1976d2 0%, #1565c0 100%)",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
#{nextID ?? "N/A"}
|
||||
</Chip>
|
||||
|
||||
{/* Name Fields - Two Columns */}
|
||||
<Box className="grid grid-cols-2 gap-3">
|
||||
<TextField
|
||||
required
|
||||
id="first-name"
|
||||
label={t("first-name")}
|
||||
variant="filled"
|
||||
value={formData.firstName}
|
||||
onChange={handleChange}
|
||||
name="firstName"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
required
|
||||
id="last-name"
|
||||
label={t("last-name")}
|
||||
variant="filled"
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
name="lastName"
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
{/* Name row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label={t("first-name")} name="firstName" {...fieldProps} />
|
||||
<Field label={t("last-name")} name="lastName" {...fieldProps} />
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<TextField
|
||||
required
|
||||
id="email"
|
||||
label={t("email")}
|
||||
variant="filled"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
name="email"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
{/* Phone Number */}
|
||||
<TextField
|
||||
required
|
||||
id="phone-number"
|
||||
<Field label={t("email")} name="email" type="email" {...fieldProps} />
|
||||
<Field
|
||||
label={t("phone-number")}
|
||||
variant="filled"
|
||||
type="tel"
|
||||
value={formData.phoneNumber}
|
||||
onChange={handleChange}
|
||||
name="phoneNumber"
|
||||
fullWidth
|
||||
type="tel"
|
||||
{...fieldProps}
|
||||
/>
|
||||
|
||||
{/* Tickets and Invoice Checkbox */}
|
||||
<Box className="grid grid-cols-2 gap-3 items-center">
|
||||
<TextField
|
||||
required
|
||||
id="tickets"
|
||||
{/* Tickets + Invoice toggle */}
|
||||
<div className="grid grid-cols-2 gap-3 items-end">
|
||||
<FormControl required>
|
||||
<FormLabel>{t("tickets")}</FormLabel>
|
||||
<Input
|
||||
name="tickets"
|
||||
type="number"
|
||||
label={t("tickets")}
|
||||
variant="filled"
|
||||
value={formData.tickets}
|
||||
onChange={handleChange}
|
||||
name="tickets"
|
||||
fullWidth
|
||||
inputProps={{ min: 1 }}
|
||||
slotProps={{ input: { min: 1 } }}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
</FormControl>
|
||||
<div className="flex items-center pb-2">
|
||||
<Checkbox
|
||||
checked={invoice}
|
||||
onChange={(e) => setInvoice(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={t("invoice")}
|
||||
className="justify-end"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice Fields */}
|
||||
{/* Invoice details (conditional) */}
|
||||
{invoice && (
|
||||
<Box
|
||||
className="flex flex-col gap-2 pt-3 mt-2"
|
||||
sx={{
|
||||
borderTop: "2px solid",
|
||||
borderColor: "primary.light",
|
||||
borderRadius: "0",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
id="company-name"
|
||||
label={t("company-name")}
|
||||
variant="filled"
|
||||
value={formData.companyName}
|
||||
onChange={handleChange}
|
||||
name="companyName"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
{/* Invoice Name Fields - Two Columns */}
|
||||
<Box className="grid grid-cols-2 gap-3">
|
||||
<TextField
|
||||
required
|
||||
id="first-name_invoice"
|
||||
label={t("first-name")}
|
||||
variant="filled"
|
||||
value={formData.cmpFirstName}
|
||||
onChange={handleChange}
|
||||
name="cmpFirstName"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
required
|
||||
id="last-name_invoice"
|
||||
label={t("last-name")}
|
||||
variant="filled"
|
||||
value={formData.cpmLastName}
|
||||
onChange={handleChange}
|
||||
name="cpmLastName"
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
required
|
||||
id="street"
|
||||
label={t("street")}
|
||||
variant="filled"
|
||||
value={formData.street}
|
||||
onChange={handleChange}
|
||||
name="street"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextField
|
||||
required
|
||||
id="postal-code"
|
||||
label={t("postal-code")}
|
||||
variant="filled"
|
||||
value={formData.postalCode}
|
||||
onChange={handleChange}
|
||||
name="postalCode"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextField
|
||||
required
|
||||
id="phone-number_invoice"
|
||||
label={t("phone-number")}
|
||||
variant="filled"
|
||||
type="tel"
|
||||
value={formData.cpmPhoneNumber}
|
||||
onChange={handleChange}
|
||||
name="cpmPhoneNumber"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextField
|
||||
required
|
||||
id="email_invoice"
|
||||
label={t("email")}
|
||||
variant="filled"
|
||||
type="email"
|
||||
value={formData.cpmEmail}
|
||||
onChange={handleChange}
|
||||
name="cpmEmail"
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{/* Payment Methods */}
|
||||
<Box className="flex flex-col gap-2 mt-2">
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 500,
|
||||
color: "text.secondary",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 0.5,
|
||||
}}
|
||||
>
|
||||
{t("select-payment-method")} *
|
||||
<div className="flex flex-col gap-3 pt-4 border-t border-blue-200">
|
||||
<Typography level="title-sm" color="primary">
|
||||
{t("invoice-details")}
|
||||
</Typography>
|
||||
<Box className="flex gap-2 flex-wrap">
|
||||
<Field
|
||||
label={t("company-name")}
|
||||
name="companyName"
|
||||
{...fieldProps}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field
|
||||
label={t("first-name")}
|
||||
name="cmpFirstName"
|
||||
{...fieldProps}
|
||||
/>
|
||||
<Field
|
||||
label={t("last-name")}
|
||||
name="cpmLastName"
|
||||
{...fieldProps}
|
||||
/>
|
||||
</div>
|
||||
<Field label={t("street")} name="street" {...fieldProps} />
|
||||
<Field
|
||||
label={t("postal-code")}
|
||||
name="postalCode"
|
||||
{...fieldProps}
|
||||
/>
|
||||
<Field
|
||||
label={t("phone-number")}
|
||||
name="cpmPhoneNumber"
|
||||
type="tel"
|
||||
{...fieldProps}
|
||||
/>
|
||||
<Field
|
||||
label={t("email")}
|
||||
name="cpmEmail"
|
||||
type="email"
|
||||
{...fieldProps}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment method selection */}
|
||||
<FormControl required>
|
||||
<FormLabel>{t("select-payment-method")} *</FormLabel>
|
||||
<div className="flex gap-2 flex-wrap mt-1">
|
||||
{PAYMENT_METHODS.map((method) => (
|
||||
<Button
|
||||
variant={
|
||||
formData.paymentMethod === "bar" ? "contained" : "outlined"
|
||||
}
|
||||
key={method}
|
||||
variant={formData.paymentMethod === method ? "solid" : "soft"}
|
||||
color="primary"
|
||||
onClick={() =>
|
||||
setFormData({ ...formData, paymentMethod: "bar" })
|
||||
setFormData((prev) => ({ ...prev, paymentMethod: method }))
|
||||
}
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: "100px",
|
||||
py: 1.5,
|
||||
minWidth: "90px",
|
||||
borderRadius: "12px",
|
||||
py: 1.5,
|
||||
textTransform: "none",
|
||||
fontWeight: formData.paymentMethod === "bar" ? 600 : 400,
|
||||
fontWeight: formData.paymentMethod === method ? 700 : 400,
|
||||
}}
|
||||
>
|
||||
{t("cash")}
|
||||
{PAYMENT_LABELS[method]}
|
||||
</Button>
|
||||
<Button
|
||||
variant={
|
||||
formData.paymentMethod === "paypal" ? "contained" : "outlined"
|
||||
}
|
||||
onClick={() =>
|
||||
setFormData({ ...formData, paymentMethod: "paypal" })
|
||||
}
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: "100px",
|
||||
py: 1.5,
|
||||
borderRadius: "12px",
|
||||
textTransform: "none",
|
||||
fontWeight: formData.paymentMethod === "paypal" ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{t("paypal")}
|
||||
</Button>
|
||||
<Button
|
||||
variant={
|
||||
formData.paymentMethod === "andere" ? "contained" : "outlined"
|
||||
}
|
||||
onClick={() =>
|
||||
setFormData({ ...formData, paymentMethod: "andere" })
|
||||
}
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: "100px",
|
||||
py: 1.5,
|
||||
borderRadius: "12px",
|
||||
textTransform: "none",
|
||||
fontWeight: formData.paymentMethod === "andere" ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{t("transfer")}
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
{/* Hidden required input to enforce payment selection on submit */}
|
||||
{!formData.paymentMethod && (
|
||||
<input
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
required
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
style={{
|
||||
opacity: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
position: "absolute",
|
||||
}}
|
||||
required
|
||||
value={formData.paymentMethod}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</FormControl>
|
||||
|
||||
{/* Submit Button */}
|
||||
{/* Submit button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
disabled={isLoading || !formData.paymentMethod}
|
||||
fullWidth
|
||||
size="large"
|
||||
loading={isLoading}
|
||||
disabled={!formData.paymentMethod}
|
||||
size="lg"
|
||||
sx={{
|
||||
mt: 3,
|
||||
py: 2,
|
||||
textTransform: "uppercase",
|
||||
fontWeight: "bold",
|
||||
borderRadius: "12px",
|
||||
fontSize: "1rem",
|
||||
background: "linear-gradient(135deg, #1976d2 0%, #1565c0 100%)",
|
||||
boxShadow: "0 4px 14px 0 rgba(25, 118, 210, 0.39)",
|
||||
mt: 2,
|
||||
borderRadius: "14px",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.05em",
|
||||
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
||||
"&:hover": {
|
||||
background: "linear-gradient(135deg, #1565c0 0%, #0d47a1 100%)",
|
||||
boxShadow: "0 6px 20px 0 rgba(25, 118, 210, 0.5)",
|
||||
},
|
||||
"&:disabled": {
|
||||
background: "#e0e0e0",
|
||||
boxShadow: "none",
|
||||
background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<CircularProgress size={24} color="inherit" />
|
||||
) : (
|
||||
t("submit")
|
||||
)}
|
||||
{t("submit")}
|
||||
</Button>
|
||||
|
||||
{/* Alert Message */}
|
||||
{/* Alert message */}
|
||||
{msg && (
|
||||
<Alert severity={msg.type} sx={{ mt: 2 }}>
|
||||
{msg.headline}: {msg.text}
|
||||
<Alert color={msg.type} sx={{ borderRadius: "12px" }}>
|
||||
<strong>{msg.headline}:</strong> {msg.text}
|
||||
</Alert>
|
||||
)}
|
||||
</form>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Sheet>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+123
-173
@@ -1,23 +1,20 @@
|
||||
import { Box, Paper, Typography, Chip, Button } from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
import { CircleCheck } from "lucide-react";
|
||||
import { useTranslation } from "../../node_modules/react-i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Sheet, Typography, Chip, Button } from "@mui/joy";
|
||||
|
||||
export const SuccessPage = () => {
|
||||
const [orderId, setOrderId] = useState<string | null>(null);
|
||||
const [tickets, setNumberOfTickets] = useState<number>(0);
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
const [orderId, setOrderId] = useState<string | null>(null);
|
||||
const [tickets, setTickets] = useState<number>(0);
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const [seconds, setSeconds] = useState(30);
|
||||
|
||||
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);
|
||||
|
||||
setOrderId(params.get("id"));
|
||||
setTickets(parseInt(params.get("tickets") ?? "0", 10));
|
||||
// Small delay so the CSS transition actually plays
|
||||
setTimeout(() => setAnimate(true), 100);
|
||||
}, []);
|
||||
|
||||
@@ -26,185 +23,138 @@ export const SuccessPage = () => {
|
||||
window.location.href = "/";
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => setSeconds(seconds - 1), 1000);
|
||||
|
||||
const timer = setTimeout(() => setSeconds((s) => s - 1), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [seconds]);
|
||||
|
||||
// Returns a style object that slides the element up + fades it in.
|
||||
// Each section gets a slightly later delay for a staggered entrance.
|
||||
const fadeUp = (delay: string): React.CSSProperties => ({
|
||||
transition: `opacity 0.5s ease-in-out ${delay}, transform 0.5s ease-in-out ${delay}`,
|
||||
transform: animate ? "translateY(0)" : "translateY(20px)",
|
||||
opacity: animate ? 1 : 0,
|
||||
});
|
||||
|
||||
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"
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900 p-4">
|
||||
<Sheet
|
||||
variant="plain"
|
||||
sx={{
|
||||
backgroundColor: "#fff",
|
||||
textAlign: "center",
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
maxWidth: 440,
|
||||
borderRadius: "24px",
|
||||
p: { xs: "2rem", sm: "2.5rem" },
|
||||
boxShadow: "0 24px 64px -12px rgba(0,0,0,0.4)",
|
||||
background: "#fff",
|
||||
textAlign: "center",
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 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 */}
|
||||
<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={{
|
||||
{/* Green accent bar at the top */}
|
||||
<div
|
||||
style={{
|
||||
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",
|
||||
background: "linear-gradient(90deg, #22c55e, #86efac)",
|
||||
transition: "transform 0.8s ease-in-out 0.6s",
|
||||
transform: animate ? "scaleX(1)" : "scaleX(0)",
|
||||
transformOrigin: "left",
|
||||
}}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
{/* Animated success icon */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "1.5rem",
|
||||
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} color="#22c55e" strokeWidth={2.5} />
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<div style={fadeUp("0.2s")}>
|
||||
<Typography level="h3" sx={{ fontWeight: 700, color: "#15803d", mb: 1 }}>
|
||||
{t("form-submitted-successfully")}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div style={fadeUp("0.3s")}>
|
||||
<Typography level="body-md" sx={{ color: "#6b7280", mb: 3 }}>
|
||||
{t("ticket-payment", { count: tickets })}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{/* Tickets chip */}
|
||||
{tickets > 0 && (
|
||||
<div style={fadeUp("0.35s")} className="flex justify-center mb-3">
|
||||
<Chip
|
||||
size="lg"
|
||||
variant="soft"
|
||||
color="success"
|
||||
sx={{ fontWeight: 700, fontSize: "1rem", px: 2, py: 1 }}
|
||||
>
|
||||
{tickets} {tickets === 1 ? t("ticket") : t("tickets")}
|
||||
</Chip>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Order ID chip */}
|
||||
{orderId && (
|
||||
<div style={fadeUp("0.4s")} className="flex flex-col items-center gap-1 mb-4">
|
||||
<Typography level="body-xs" sx={{ color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.08em" }}>
|
||||
{t("entry-id")}
|
||||
</Typography>
|
||||
<Chip
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
sx={{ fontWeight: 700, fontSize: "1.25rem", px: 3, py: 1.5 }}
|
||||
>
|
||||
#{orderId}
|
||||
</Chip>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Return button with countdown */}
|
||||
<div style={fadeUp("0.45s")} className="mb-4">
|
||||
<Button
|
||||
component="a"
|
||||
href="/"
|
||||
size="lg"
|
||||
color="primary"
|
||||
variant="solid"
|
||||
fullWidth
|
||||
sx={{
|
||||
borderRadius: "12px",
|
||||
fontWeight: 700,
|
||||
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
||||
"&:hover": { background: "linear-gradient(135deg, #1d4ed8, #1e40af)" },
|
||||
}}
|
||||
>
|
||||
{seconds}s — {t("return-to-homepage")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Thank-you note */}
|
||||
<div
|
||||
style={fadeUp("0.5s")}
|
||||
className="pt-4 border-t border-slate-100"
|
||||
>
|
||||
<Typography level="body-sm" sx={{ color: "#9ca3af", lineHeight: 1.6 }}>
|
||||
{t("thank-you")}
|
||||
</Typography>
|
||||
</div>
|
||||
</Sheet>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
"phone-number": "Telefonnummer",
|
||||
"tickets": "Lose",
|
||||
"invoice": "Rechnung",
|
||||
"invoice-details": "Rechnungsdetails",
|
||||
"company-name": "Firmenname",
|
||||
"street": "Straße + Haus Nr.",
|
||||
"postal-code": "Plz + Stadt",
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"last-name": "Last Name",
|
||||
"phone-number": "Phone Number",
|
||||
"invoice": "Invoice",
|
||||
"invoice-details": "Invoice Details",
|
||||
"company-name": "Company Name",
|
||||
"street": "Street + House No.",
|
||||
"postal-code": "Postal Code + City",
|
||||
|
||||
@@ -1,23 +1,14 @@
|
||||
import { API_BASE } from "../config/api.config";
|
||||
import type { FormData } from "../config/interfaces.config";
|
||||
|
||||
interface FormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phoneNumber: string;
|
||||
tickets: number;
|
||||
companyName: string;
|
||||
cmpFirstName: string;
|
||||
cpmLastName: string;
|
||||
cpmEmail: string;
|
||||
cpmPhoneNumber: string;
|
||||
street: string;
|
||||
postalCode: string;
|
||||
paymentMethod: string;
|
||||
}
|
||||
export const submitFormData = async (
|
||||
data: FormData,
|
||||
username: string | null,
|
||||
) => {
|
||||
if (username == null) {
|
||||
return { success: false, errorCode: "x001" };
|
||||
}
|
||||
|
||||
export const submitFormData = async (data: FormData, username: string) => {
|
||||
console.log(data);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/default/new-entry?username=${username}`,
|
||||
|
||||
Reference in New Issue
Block a user