From 308b21ae6cb3f2b8849150738371e3f3c098e6df Mon Sep 17 00:00:00 2001
From: Theis <theis.gaedigk@icloud.com>
Date: Wed, 21 Jan 2026 15:51:38 +0100
Subject: [PATCH] improved choosing payment method

---
 frontend/src/pages/MainForm.tsx            | 64 ++++++++++++++++++++--
 frontend/src/utils/i18n/locales/de/de.json |  5 +-
 frontend/src/utils/i18n/locales/en/en.json |  5 +-
 3 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/MainForm.tsx b/frontend/src/pages/MainForm.tsx
index e6f5ddd..e597a63 100644
--- a/frontend/src/pages/MainForm.tsx
+++ b/frontend/src/pages/MainForm.tsx
@@ -9,11 +9,14 @@ import {
   Chip,
   Box,
   Paper,
+  Menu,
+  MenuItem,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
 import { submitFormData } from "../utils/sender";
 import Cookies from "js-cookie";
+import * as React from "react";
 
 interface Message {
   type: "error" | "info" | "success" | "warning";
@@ -45,6 +48,16 @@ export const MainForm = () => {
   const [users, setUsers] = useState<string[]>([]);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
 
+  // Payment Methods Menu States
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   useEffect(() => {
     // Fetch user data or any other data needed for the form
     try {
@@ -317,13 +330,52 @@ export const MainForm = () => {
               />
             </Box>
           )}
-
           {/* Payment Methods */}
-          <Box className="flex justify-center gap-4 pt-2">
-            <FormControlLabel control={<Checkbox />} label={t("cash")} />
-            <FormControlLabel control={<Checkbox />} label={t("paypal")} />
-            <FormControlLabel control={<Checkbox />} label={t("transfer")} />
-          </Box>
+          <Button
+            id="basic-button"
+            aria-controls={open ? "basic-menu" : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? "true" : undefined}
+            onClick={handleClick}
+          >
+            {formData.paymentMethod || t("select-payment-method")}
+          </Button>
+          <Menu
+            id="basic-menu"
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+            slotProps={{
+              list: {
+                "aria-labelledby": "basic-button",
+              },
+            }}
+          >
+            <MenuItem
+              onClick={() => {
+                setFormData({ ...formData, paymentMethod: "bar" });
+                handleClose();
+              }}
+            >
+              {t("cash")}
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                setFormData({ ...formData, paymentMethod: "paypal" });
+                handleClose();
+              }}
+            >
+              {t("paypal")}
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                setFormData({ ...formData, paymentMethod: "andere" });
+                handleClose();
+              }}
+            >
+              {t("transfer")}
+            </MenuItem>
+          </Menu>
 
           {/* Submit Button */}
           <Button
diff --git a/frontend/src/utils/i18n/locales/de/de.json b/frontend/src/utils/i18n/locales/de/de.json
index 1e4a8df..e97852d 100644
--- a/frontend/src/utils/i18n/locales/de/de.json
+++ b/frontend/src/utils/i18n/locales/de/de.json
@@ -18,8 +18,9 @@
     "error": "Fehler",
     "cash": "Bar",
     "paypal": "PayPal",
-    "transfer": "Überweisung",
+    "transfer": "Andere (notieren)",
     "ticket-payment": "Sie haben erflogreich {count} {count, plural, one {Los} other {Lose}} gekauft.",
     "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"
 }
\ 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 eded0df..198ade1 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/frontend/src/utils/i18n/locales/en/en.json
@@ -17,11 +17,12 @@
     "error": "Error",
     "cash": "Cash",
     "paypal": "PayPal",
-    "transfer": "Bank Transfer",
+    "transfer": "Other (note down)",
     "ticket-payment_one": "You have successfully purchased {{count}} ticket.",
     "ticket-payment_other": "You have successfully purchased {{count}} tickets.",
     "ticket": "ticket",
     "tickets": "tickets",
     "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"
 }
\ No newline at end of file