improved choosing payment method

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">
+          <Button
-            <FormControlLabel control={<Checkbox />} label={t("cash")} />
+            id="basic-button"
-            <FormControlLabel control={<Checkbox />} label={t("paypal")} />
+            aria-controls={open ? "basic-menu" : undefined}
-            <FormControlLabel control={<Checkbox />} label={t("transfer")} />
+            aria-haspopup="true"
-          </Box>
+            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

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"
 }

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"
 }