implemented tanstack form
This commit is contained in:
Generated
+119
-6
@@ -16,6 +16,7 @@
|
||||
"@mui/joy": "^5.0.0-beta.52",
|
||||
"@mui/material": "^9.0.1",
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"@tanstack/react-form": "^1.32.0",
|
||||
"@tanstack/react-query": "^5.100.10",
|
||||
"i18next": "^26.0.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
@@ -25,7 +26,9 @@
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-i18next": "^17.0.7",
|
||||
"react-router-dom": "^7.15.0",
|
||||
"tailwindcss": "^4.3.0"
|
||||
"tailwindcss": "^4.3.0",
|
||||
"validator": "^13.15.35",
|
||||
"zod": "^4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
@@ -33,6 +36,7 @@
|
||||
"@types/node": "^24.12.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/validator": "^13.15.10",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^10.2.1",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
@@ -1768,6 +1772,50 @@
|
||||
"vite": "^5.2.0 || ^6 || ^7 || ^8"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/devtools-event-client": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.4.3.tgz",
|
||||
"integrity": "sha512-OZI6QyULw0FI0wjgmeYzCIfbgPsOEzwJtCpa69XrfLMtNXLGnz3d/dIabk7frg0TmHo+Ah49w5I4KC7Tufwsvw==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"intent": "bin/intent.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/form-core": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/form-core/-/form-core-1.32.0.tgz",
|
||||
"integrity": "sha512-Tn5VRDSjyqjmaet2tJMuEWDRFyrCaon03vxXPlSSaiSs6C/N7lCIwGCXJbZXEUq1kTj8jYN9qyXHbsz4LQHcow==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/devtools-event-client": "^0.4.1",
|
||||
"@tanstack/pacer-lite": "^0.1.1",
|
||||
"@tanstack/store": "^0.9.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/pacer-lite": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/pacer-lite/-/pacer-lite-0.1.1.tgz",
|
||||
"integrity": "sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-core": {
|
||||
"version": "5.100.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.10.tgz",
|
||||
@@ -1778,6 +1826,28 @@
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-form": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-form/-/react-form-1.32.0.tgz",
|
||||
"integrity": "sha512-6WP5SQTA6/H9crCpvpq3ZppYWqtrdE5NjOy6ebABi6uAQPqhfTzrdjS9t40mCZCFtGI5585OhJV6zBP/KN2zcw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/form-core": "1.32.0",
|
||||
"@tanstack/react-store": "^0.9.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tanstack/react-start": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.100.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.10.tgz",
|
||||
@@ -1794,6 +1864,34 @@
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-store": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.9.3.tgz",
|
||||
"integrity": "sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/store": "0.9.3",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/store": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.9.3.tgz",
|
||||
"integrity": "sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tybys/wasm-util": {
|
||||
"version": "0.10.2",
|
||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
|
||||
@@ -1882,6 +1980,13 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/validator": {
|
||||
"version": "13.15.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
|
||||
"integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.59.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.2.tgz",
|
||||
@@ -3004,12 +3109,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.7.tgz",
|
||||
"integrity": "sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
@@ -4093,6 +4198,15 @@
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/validator": {
|
||||
"version": "13.15.35",
|
||||
"resolved": "https://registry.npmjs.org/validator/-/validator-13.15.35.tgz",
|
||||
"integrity": "sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "8.0.11",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.0.11.tgz",
|
||||
@@ -4229,7 +4343,6 @@
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
|
||||
"integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"@mui/joy": "^5.0.0-beta.52",
|
||||
"@mui/material": "^9.0.1",
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"@tanstack/react-form": "^1.32.0",
|
||||
"@tanstack/react-query": "^5.100.10",
|
||||
"i18next": "^26.0.10",
|
||||
"js-cookie": "^3.0.5",
|
||||
@@ -27,7 +28,9 @@
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-i18next": "^17.0.7",
|
||||
"react-router-dom": "^7.15.0",
|
||||
"tailwindcss": "^4.3.0"
|
||||
"tailwindcss": "^4.3.0",
|
||||
"validator": "^13.15.35",
|
||||
"zod": "^4.4.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
@@ -39,6 +42,7 @@
|
||||
"@types/node": "^24.12.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/validator": "^13.15.10",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^10.2.1",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import z from "zod";
|
||||
import validator from "validator";
|
||||
|
||||
export interface FormData {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
@@ -19,3 +22,35 @@ export interface Message {
|
||||
headline: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const createFormSchema = (
|
||||
t: (key: string) => string,
|
||||
invoice: boolean,
|
||||
) =>
|
||||
z.object({
|
||||
firstName: z.string().min(1, t("name-error")),
|
||||
lastName: z.string().min(1, t("name-error")),
|
||||
email: z.email(t("email-error")),
|
||||
phoneNumber: z.string(t("phone-error")).refine(validator.isMobilePhone),
|
||||
tickets: z.number(t("ticket-error")).min(1),
|
||||
companyName: invoice
|
||||
? z.string().min(1, t("name-error"))
|
||||
: z.string().optional(),
|
||||
cmpFirstName: invoice
|
||||
? z.string().min(1, t("name-error"))
|
||||
: z.string().optional(),
|
||||
cpmLastName: invoice
|
||||
? z.string().min(1, t("name-error"))
|
||||
: z.string().optional(),
|
||||
cpmEmail: invoice ? z.email(t("email-error")) : z.string().optional(),
|
||||
cpmPhoneNumber: invoice
|
||||
? z.string(t("phone-error")).refine(validator.isMobilePhone)
|
||||
: z.string().optional(),
|
||||
street: invoice
|
||||
? z.string().min(1, t("name-error"))
|
||||
: z.string().optional(),
|
||||
postalCode: invoice
|
||||
? z.string().min(1, t("name-error"))
|
||||
: z.string().optional(),
|
||||
paymentMethod: z.string().min(1, t("name-error")),
|
||||
});
|
||||
|
||||
+378
-123
@@ -1,6 +1,5 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState, useEffect } from "react";
|
||||
import * as React from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import {
|
||||
Sheet,
|
||||
@@ -25,6 +24,10 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { confirmUser, fetchUsers } from "../utils/api/users";
|
||||
import { QRcodeModal } from "../components/modals/QR-CodeModal";
|
||||
import { SelectUserModal } from "../components/modals/SelectUserModal";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { changeTranslation } from "../utils/uxFncs";
|
||||
import { createFormSchema } from "../config/interfaces.config";
|
||||
import type { ZodObject, ZodRawShape } from "zod";
|
||||
|
||||
const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
|
||||
const PAYMENT_LABELS: Record<string, string> = {
|
||||
@@ -33,7 +36,60 @@ const PAYMENT_LABELS: Record<string, string> = {
|
||||
andere: "Transfer",
|
||||
};
|
||||
|
||||
const DEFAULT_FORM: FormData = {
|
||||
/**
|
||||
* Validates a single field against the full Zod schema.
|
||||
* Returns the first error message for that field, or undefined if valid.
|
||||
*/
|
||||
function validateFieldWithZod(
|
||||
schema: ZodObject<ZodRawShape>,
|
||||
fieldName: string,
|
||||
allValues: Record<string, unknown>,
|
||||
): string | undefined {
|
||||
const result = schema.safeParse(allValues);
|
||||
if (result.success) return undefined;
|
||||
const issue = result.error.issues.find(
|
||||
(i) => i.path.length === 1 && i.path[0] === fieldName,
|
||||
);
|
||||
return issue?.message;
|
||||
}
|
||||
|
||||
export const MainForm = () => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [invoice, setInvoice] = useState(false);
|
||||
const [msg, setMsg] = useState<Message | null>(null);
|
||||
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
||||
const [showSelectUser, setShowSelectUser] = useState(false);
|
||||
const [QRmodal, setQRmodal] = useState(false);
|
||||
|
||||
const formSchema = createFormSchema(t, invoice);
|
||||
|
||||
const makeFieldValidator = (fieldName: string) => ({
|
||||
onSubmit: ({
|
||||
value,
|
||||
fieldApi,
|
||||
}: {
|
||||
value: unknown;
|
||||
fieldApi: { form: { state: { values: Record<string, unknown> } } };
|
||||
}) => {
|
||||
const allValues = fieldApi.form.state.values;
|
||||
return validateFieldWithZod(formSchema, fieldName, allValues);
|
||||
},
|
||||
onBlur: ({
|
||||
value,
|
||||
fieldApi,
|
||||
}: {
|
||||
value: unknown;
|
||||
fieldApi: { form: { state: { values: Record<string, unknown> } } };
|
||||
}) => {
|
||||
const allValues = fieldApi.form.state.values;
|
||||
return validateFieldWithZod(formSchema, fieldName, allValues);
|
||||
},
|
||||
});
|
||||
|
||||
const { Field, Subscribe, handleSubmit, setFieldValue } = useForm({
|
||||
defaultValues: {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
@@ -47,51 +103,26 @@ const DEFAULT_FORM: FormData = {
|
||||
street: "",
|
||||
postalCode: "",
|
||||
paymentMethod: "",
|
||||
};
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
const result = formSchema.safeParse(value);
|
||||
if (!result.success) return;
|
||||
mutateForm(value as FormData);
|
||||
},
|
||||
});
|
||||
|
||||
// ─── 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>
|
||||
);
|
||||
const getErrors = (field: {
|
||||
state: { meta: { errorMap: Record<string, unknown> } };
|
||||
}) => {
|
||||
const normalizeErrors = (value: unknown) => {
|
||||
if (Array.isArray(value)) return value as string[];
|
||||
if (typeof value === "string" && value.length > 0) return [value];
|
||||
return [] as string[];
|
||||
};
|
||||
|
||||
export const MainForm = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [invoice, setInvoice] = useState(false);
|
||||
const [msg, setMsg] = useState<Message | null>(null);
|
||||
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
|
||||
const [showSelectUser, setShowSelectUser] = useState(false);
|
||||
const [QRmodal, setQRmodal] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
const blurErrors = normalizeErrors(field.state.meta.errorMap["onBlur"]);
|
||||
const submitErrors = normalizeErrors(field.state.meta.errorMap["onSubmit"]);
|
||||
return [...blurErrors, ...submitErrors].filter(Boolean);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -119,10 +150,10 @@ export const MainForm = () => {
|
||||
});
|
||||
|
||||
const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
|
||||
mutationFn: () => submitFormData(formData, selectedUser),
|
||||
onSuccess: () => {
|
||||
mutationFn: (values: FormData) => submitFormData(values, selectedUser),
|
||||
onSuccess: (_, values) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
|
||||
document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
|
||||
document.location.href = `/success?id=${nextID}&tickets=${values.tickets}`;
|
||||
},
|
||||
onError: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
|
||||
@@ -134,38 +165,15 @@ export const MainForm = () => {
|
||||
},
|
||||
});
|
||||
|
||||
// Setting the nextID after a user is selected
|
||||
const nextID = userData?.nextID ?? "N/A";
|
||||
|
||||
const handleUserSelection = (username: string | null) => {
|
||||
if (username == null || username == "") {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedUser(username);
|
||||
};
|
||||
|
||||
const changeTranslation = () => {
|
||||
const clientLng = i18n.language;
|
||||
|
||||
if (clientLng === "en") {
|
||||
i18n.changeLanguage("de");
|
||||
Cookies.set("language", "de");
|
||||
} else if (clientLng === "de") {
|
||||
i18n.changeLanguage("en");
|
||||
Cookies.set("language", "en");
|
||||
} else {
|
||||
setMsg({
|
||||
type: "danger",
|
||||
headline: "Error",
|
||||
text: "Cannot change langugage.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Shorthand so we don't repeat formData + onChange on every Field usage
|
||||
const fieldProps = { formData, onChange: handleChange };
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectUserModal
|
||||
@@ -205,7 +213,6 @@ export const MainForm = () => {
|
||||
<IconButton onClick={() => setQRmodal(true)}>
|
||||
<QrCodeIcon />
|
||||
</IconButton>
|
||||
{/* Language toggle */}
|
||||
<IconButton onClick={changeTranslation}>
|
||||
<TranslateIcon />
|
||||
</IconButton>
|
||||
@@ -225,11 +232,10 @@ export const MainForm = () => {
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
mutateForm();
|
||||
handleSubmit();
|
||||
}}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
{/* Next ID badge */}
|
||||
<Chip
|
||||
size="lg"
|
||||
variant="solid"
|
||||
@@ -246,41 +252,155 @@ export const MainForm = () => {
|
||||
|
||||
{/* 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} />
|
||||
<FormLabel>{t("first-name")}</FormLabel>
|
||||
<Field
|
||||
name="firstName"
|
||||
validators={makeFieldValidator("firstName")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<FormLabel>{t("last-name")}</FormLabel>
|
||||
<Field
|
||||
name="lastName"
|
||||
validators={makeFieldValidator("lastName")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
label={t("email")}
|
||||
name="email"
|
||||
<FormLabel>{t("email")}</FormLabel>
|
||||
<Field name="email" validators={makeFieldValidator("email")}>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
type="email"
|
||||
{...fieldProps}
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">{errors[0]}</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<FormLabel>{t("phone-number")}</FormLabel>
|
||||
<Field
|
||||
label={t("phone-number")}
|
||||
name="phoneNumber"
|
||||
validators={makeFieldValidator("phoneNumber")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
type="tel"
|
||||
{...fieldProps}
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">{errors[0]}</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
{/* Tickets + Invoice toggle */}
|
||||
<div className="grid grid-cols-2 gap-3 items-end">
|
||||
<FormControl required>
|
||||
<FormLabel>{t("tickets")}</FormLabel>
|
||||
<Input
|
||||
<Field
|
||||
name="tickets"
|
||||
validators={makeFieldValidator("tickets")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.tickets}
|
||||
onChange={handleChange}
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) =>
|
||||
field.handleChange(Number(e.target.value))
|
||||
}
|
||||
slotProps={{ input: { min: 1 } }}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</FormControl>
|
||||
<div className="flex items-center pb-2">
|
||||
<Checkbox
|
||||
checked={invoice}
|
||||
onChange={(e) => setInvoice(e.target.checked)}
|
||||
onChange={(e) => {
|
||||
const checked = e.target.checked;
|
||||
setInvoice(checked);
|
||||
if (!checked) {
|
||||
setFieldValue("companyName", "");
|
||||
setFieldValue("cmpFirstName", "");
|
||||
setFieldValue("cpmLastName", "");
|
||||
setFieldValue("cpmEmail", "");
|
||||
setFieldValue("cpmPhoneNumber", "");
|
||||
setFieldValue("street", "");
|
||||
setFieldValue("postalCode", "");
|
||||
}
|
||||
}}
|
||||
label={t("invoice")}
|
||||
variant="outlined"
|
||||
/>
|
||||
@@ -293,60 +413,205 @@ export const MainForm = () => {
|
||||
<Typography level="title-sm" color="primary">
|
||||
{t("invoice-details")}
|
||||
</Typography>
|
||||
|
||||
<FormLabel>{t("company-name")}</FormLabel>
|
||||
<Field
|
||||
label={t("company-name")}
|
||||
name="companyName"
|
||||
{...fieldProps}
|
||||
validators={makeFieldValidator("companyName")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<FormLabel>{t("first-name")}</FormLabel>
|
||||
<Field
|
||||
label={t("first-name")}
|
||||
name="cmpFirstName"
|
||||
{...fieldProps}
|
||||
validators={makeFieldValidator("cmpFirstName")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<FormLabel>{t("last-name")}</FormLabel>
|
||||
<Field
|
||||
label={t("last-name")}
|
||||
name="cpmLastName"
|
||||
{...fieldProps}
|
||||
validators={makeFieldValidator("cpmLastName")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</div>
|
||||
<Field label={t("street")} name="street" {...fieldProps} />
|
||||
|
||||
<FormLabel>{t("street")}</FormLabel>
|
||||
<Field name="street" validators={makeFieldValidator("street")}>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<FormLabel>{t("postal-code")}</FormLabel>
|
||||
<Field
|
||||
label={t("postal-code")}
|
||||
name="postalCode"
|
||||
{...fieldProps}
|
||||
validators={makeFieldValidator("postalCode")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<FormLabel>{t("phone-number")}</FormLabel>
|
||||
<Field
|
||||
label={t("phone-number")}
|
||||
name="cpmPhoneNumber"
|
||||
validators={makeFieldValidator("cpmPhoneNumber")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
type="tel"
|
||||
{...fieldProps}
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<FormLabel>{t("email")}</FormLabel>
|
||||
<Field
|
||||
label={t("email")}
|
||||
name="cpmEmail"
|
||||
validators={makeFieldValidator("cpmEmail")}
|
||||
>
|
||||
{(field) => {
|
||||
const errors = getErrors(field);
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
value={field.state.value ?? ""}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
variant="soft"
|
||||
type="email"
|
||||
{...fieldProps}
|
||||
sx={{ borderRadius: "10px" }}
|
||||
/>
|
||||
{errors.length > 0 && (
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors[0]}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment method selection */}
|
||||
<FormControl required>
|
||||
<FormLabel>{t("select-payment-method")}</FormLabel>
|
||||
<Subscribe selector={(state) => state.values.paymentMethod}>
|
||||
{(paymentMethod) => (
|
||||
<div className="flex gap-2 flex-wrap mt-1">
|
||||
{PAYMENT_METHODS.map((method) => (
|
||||
<Button
|
||||
key={method}
|
||||
variant={
|
||||
formData.paymentMethod === method ? "solid" : "soft"
|
||||
}
|
||||
variant={paymentMethod === method ? "solid" : "soft"}
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
paymentMethod: method,
|
||||
}));
|
||||
setFieldValue("paymentMethod", method);
|
||||
if (method === "paypal") {
|
||||
setQRmodal(true);
|
||||
}
|
||||
@@ -357,28 +622,15 @@ export const MainForm = () => {
|
||||
borderRadius: "12px",
|
||||
py: 1.5,
|
||||
textTransform: "none",
|
||||
fontWeight: formData.paymentMethod === method ? 700 : 400,
|
||||
fontWeight: paymentMethod === method ? 700 : 400,
|
||||
}}
|
||||
>
|
||||
{PAYMENT_LABELS[method]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{/* Hidden required input to enforce payment selection on submit */}
|
||||
{!formData.paymentMethod && (
|
||||
<input
|
||||
tabIndex={-1}
|
||||
required
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
style={{
|
||||
opacity: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
position: "absolute",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Subscribe>
|
||||
</FormControl>
|
||||
|
||||
{mutateFormIsPending ? (
|
||||
@@ -386,9 +638,11 @@ export const MainForm = () => {
|
||||
<CircularProgress />
|
||||
</div>
|
||||
) : (
|
||||
<Subscribe selector={(state) => state.values.paymentMethod}>
|
||||
{(paymentMethod) => (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!formData.paymentMethod}
|
||||
disabled={!paymentMethod}
|
||||
size="lg"
|
||||
sx={{
|
||||
mt: 2,
|
||||
@@ -404,8 +658,9 @@ export const MainForm = () => {
|
||||
{t("submit")}
|
||||
</Button>
|
||||
)}
|
||||
</Subscribe>
|
||||
)}
|
||||
|
||||
{/* Message */}
|
||||
{msg && (
|
||||
<Alert
|
||||
color={msg.type}
|
||||
|
||||
@@ -30,5 +30,8 @@
|
||||
"loading": "Lädt...",
|
||||
"greeting": "Hallo,",
|
||||
"set-username-headline": "Keinen Benutzer ausgewählt",
|
||||
"set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen."
|
||||
"set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen.",
|
||||
"name-error": "Sie müssen einen Namen eingeben!",
|
||||
"email-error": "Sie müssen eine gültige E-Mail Adresse eingeben!",
|
||||
"phone-error": "Sie müssen eine gültige Telefonnummer eingeben!"
|
||||
}
|
||||
@@ -31,5 +31,8 @@
|
||||
"loading": "Loading...",
|
||||
"greeting": "Hello,",
|
||||
"set-username-headline": "No user selected",
|
||||
"set-username-text": "To start the ticket sale, you must select a user first from the top left."
|
||||
"set-username-text": "To start the ticket sale, you must select a user first from the top left.",
|
||||
"name-error": "You have to enter a name!",
|
||||
"email-error": "You have to enter a valid e-mail Adress!",
|
||||
"phone-error": "You have to enter a vaild phone number!"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import i18n from "./i18n";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
export const changeTranslation = () => {
|
||||
const clientLng = i18n.language;
|
||||
|
||||
if (clientLng === "en") {
|
||||
i18n.changeLanguage("de");
|
||||
Cookies.set("language", "de");
|
||||
} else if (clientLng === "de") {
|
||||
i18n.changeLanguage("en");
|
||||
Cookies.set("language", "en");
|
||||
} else {
|
||||
alert("Cannot change language.");
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user