(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 (
-
-
+
- {/* Animated Success Icon */}
-
-
-
-
- {/* Success Message */}
-
- {t("form-submitted-successfully")}
-
-
-
- {t("ticket-payment", { count: tickets })}
-
-
- {/* Tickets Display */}
- {tickets > 0 && (
-
-
-
- )}
-
- {/* Order ID Display */}
- {orderId && (
-
-
- {t("entry-id")}
-
-
-
- )}
-
- {/* Return button */}
-
-
-
-
- {/* Additional Info */}
-
-
- {t("thank-you")}
-
-
-
- {/* Decorative Elements */}
-
-
-
+
+ {/* Animated success icon */}
+
+
+
+
+ {/* Headline */}
+
+
+ {t("form-submitted-successfully")}
+
+
+
+ {/* Subtitle */}
+
+
+ {t("ticket-payment", { count: tickets })}
+
+
+
+ {/* Tickets chip */}
+ {tickets > 0 && (
+
+
+ {tickets} {tickets === 1 ? t("ticket") : t("tickets")}
+
+
+ )}
+
+ {/* Order ID chip */}
+ {orderId && (
+
+
+ {t("entry-id")}
+
+
+ #{orderId}
+
+
+ )}
+
+ {/* Return button with countdown */}
+
+
+
+
+ {/* Thank-you note */}
+
+
+ {t("thank-you")}
+
+
+
+
);
};
diff --git a/frontend/src/utils/i18n/locales/de/de.json b/frontend/src/utils/i18n/locales/de/de.json
index 6033c4b..cdaf863 100644
--- a/frontend/src/utils/i18n/locales/de/de.json
+++ b/frontend/src/utils/i18n/locales/de/de.json
@@ -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",
@@ -24,5 +25,6 @@
"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.",
"select-payment-method": "Zahlungsmethode auswählen",
- "return-to-homepage": "Zurück"
+ "return-to-homepage": "Zurück",
+ "qr-text": "PayPal QR-Code der Claudius Akademie"
}
\ No newline at end of file
diff --git a/frontend/src/utils/i18n/locales/en/en.json b/frontend/src/utils/i18n/locales/en/en.json
index e52ae2a..4bde327 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/frontend/src/utils/i18n/locales/en/en.json
@@ -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",
@@ -25,5 +26,6 @@
"entry-id": "Entry ID",
"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",
- "return-to-homepage": "Return"
+ "return-to-homepage": "Return",
+ "qr-text": "PayPal QR-Code from the Claudius Akademie"
}
\ No newline at end of file
diff --git a/frontend/src/utils/sender.ts b/frontend/src/utils/sender.ts
index b61319c..724447d 100644
--- a/frontend/src/utils/sender.ts
+++ b/frontend/src/utils/sender.ts
@@ -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}`,
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
deleted file mode 100644
index 53b659f..0000000
--- a/frontend/tailwind.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
- content: [
- "./index.html",
- "./src/**/*.{js,jsx,ts,tsx}",
- // add other paths if needed
- ],
- theme: {
- extend: {},
- },
- plugins: [],
-};
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index a9b5a59..7f42e5f 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,10 +1,9 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
- "target": "ES2022",
- "useDefineForClassFields": true,
- "lib": ["ES2022", "DOM", "DOM.Iterable"],
- "module": "ESNext",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
"types": ["vite/client"],
"skipLibCheck": true,
@@ -17,12 +16,10 @@
"jsx": "react-jsx",
/* Linting */
- "strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
- "noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
+ "noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index 8a67f62..d3c52ea 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -1,9 +1,9 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
- "target": "ES2023",
+ "target": "es2023",
"lib": ["ES2023"],
- "module": "ESNext",
+ "module": "esnext",
"types": ["node"],
"skipLibCheck": true,
@@ -15,12 +15,10 @@
"noEmit": true,
/* Linting */
- "strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
- "noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
+ "noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 8b0f57b..011a9d8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
-// https://vite.dev/config/
export default defineConfig({
- plugins: [react()],
-})
+ plugins: [tailwindcss()],
+});