588 lines
19 KiB
TypeScript
588 lines
19 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { useState, useEffect } from "react";
|
|
import Cookies from "js-cookie";
|
|
import {
|
|
Sheet,
|
|
Input,
|
|
Button,
|
|
Checkbox,
|
|
Chip,
|
|
IconButton,
|
|
Alert,
|
|
Typography,
|
|
FormControl,
|
|
FormLabel,
|
|
ButtonGroup,
|
|
CircularProgress,
|
|
} from "@mui/joy";
|
|
import { submitFormData } from "../utils/api/form";
|
|
import type { FormData, Message } from "../config/interfaces.config";
|
|
import PersonIcon from "@mui/icons-material/Person";
|
|
import QrCodeIcon from "@mui/icons-material/QrCode";
|
|
import TranslateIcon from "@mui/icons-material/Translate";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { confirmUser, fetchInfo } 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 { validateFieldWithZod } from "../utils/uxFncs";
|
|
import { TextField } from "../components/TextField";
|
|
import { PAYMENT_METHODS, PAYMENT_LABELS } from "../utils/uxFncs";
|
|
|
|
export const MainForm = () => {
|
|
const { t } = useTranslation();
|
|
const queryClient = useQueryClient();
|
|
|
|
// States
|
|
const [invoice, setInvoice] = useState(false);
|
|
const [msg, setMsg] = useState<Message | null>(null);
|
|
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
|
const [selectedDraw, setSelectedDraw] = useState<string | null>(null);
|
|
const [showSelectUser, setShowSelectUser] = useState(false);
|
|
const [QRmodal, setQRmodal] = useState(false);
|
|
|
|
const formSchema = createFormSchema(t, invoice);
|
|
|
|
// Validates the fields and makes sure that the form is maching the zod schema
|
|
const makeFieldValidator = (fieldName: string) => ({
|
|
onSubmit: ({
|
|
fieldApi,
|
|
}: {
|
|
fieldApi: { form: { state: { values: Record<string, unknown> } } };
|
|
}) => {
|
|
const allValues = fieldApi.form.state.values;
|
|
return validateFieldWithZod(formSchema, fieldName, allValues);
|
|
},
|
|
onBlur: ({
|
|
fieldApi,
|
|
}: {
|
|
fieldApi: { form: { state: { values: Record<string, unknown> } } };
|
|
}) => {
|
|
const allValues = fieldApi.form.state.values;
|
|
return validateFieldWithZod(formSchema, fieldName, allValues);
|
|
},
|
|
});
|
|
|
|
// Creates a form with tanstack form
|
|
const { Field, Subscribe, handleSubmit, setFieldValue } = useForm({
|
|
defaultValues: {
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phoneNumber: "",
|
|
tickets: 0,
|
|
chocolates: false,
|
|
companyName: "",
|
|
cmpFirstName: "",
|
|
cpmLastName: "",
|
|
cpmEmail: "",
|
|
cpmPhoneNumber: "",
|
|
street: "",
|
|
postalCode: "",
|
|
paymentMethod: "",
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
const result = formSchema.safeParse(value);
|
|
if (!result.success) return;
|
|
mutateForm(value as FormData);
|
|
},
|
|
});
|
|
|
|
// This function returns the errors for one field
|
|
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[];
|
|
};
|
|
|
|
const blurErrors = normalizeErrors(field.state.meta.errorMap["onBlur"]);
|
|
const submitErrors = normalizeErrors(field.state.meta.errorMap["onSubmit"]);
|
|
return [...blurErrors, ...submitErrors].filter(Boolean);
|
|
};
|
|
|
|
// useEffect that only executes on mount and is checking if there is a user selcted in the cookies
|
|
useEffect(() => {
|
|
const savedUser = Cookies.get("selectedUser");
|
|
const savedDraw = Cookies.get("selectedDraw");
|
|
if (savedDraw) {
|
|
setSelectedDraw(savedDraw);
|
|
}
|
|
|
|
if (savedUser) {
|
|
setSelectedUser(savedUser);
|
|
} else {
|
|
setMsg({
|
|
type: "warning",
|
|
headline: t("set-username-headline"),
|
|
text: t("set-username-text"),
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
// Fetch users tanstack query
|
|
const { data: info, isLoading: infoIsLoading } = useQuery({
|
|
queryKey: ["info"],
|
|
queryFn: fetchInfo,
|
|
});
|
|
|
|
// Query for validating selcted user
|
|
const { data: userData } = useQuery({
|
|
queryKey: ["user", selectedUser],
|
|
enabled: !!selectedUser,
|
|
queryFn: () => confirmUser(selectedUser),
|
|
});
|
|
|
|
// Tanstack query (mutate) for sending the form
|
|
const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
|
|
mutationFn: (values: FormData) => submitFormData(values, selectedUser),
|
|
onSuccess: (_, values) => {
|
|
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
|
|
document.location.href = `/success?id=${nextID}&tickets=${values.tickets}`;
|
|
},
|
|
onError: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
|
|
setMsg({
|
|
type: "danger",
|
|
headline: t("error"),
|
|
text: t("form-submission-failed"),
|
|
});
|
|
},
|
|
});
|
|
|
|
const nextID = userData?.nextID ?? "N/A";
|
|
|
|
// function for selecting user
|
|
const handleUserSelection = (username: string | null) => {
|
|
if (username == null || username == "") {
|
|
return;
|
|
}
|
|
setSelectedUser(username);
|
|
};
|
|
|
|
// function for selecting draw
|
|
const handleDrawSelection = (draw: string | null) => {
|
|
if (draw == null || draw == "") {
|
|
return;
|
|
}
|
|
setSelectedDraw(draw);
|
|
Cookies.set("selectedDraw", draw);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<SelectUserModal
|
|
showSelectUser={showSelectUser}
|
|
setShowSelectUser={setShowSelectUser}
|
|
info={info}
|
|
infoIsLoading={infoIsLoading}
|
|
selectedUser={selectedUser}
|
|
selectedDraw={selectedDraw}
|
|
handleUserSelection={handleUserSelection}
|
|
handleDrawSelection={handleDrawSelection}
|
|
/>
|
|
|
|
<QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
|
|
|
|
<div className="flex-1 w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
|
|
<Sheet
|
|
variant="plain"
|
|
className="w-full"
|
|
sx={{
|
|
position: "relative",
|
|
maxWidth: 460,
|
|
borderRadius: "24px",
|
|
p: { xs: "1.5rem", sm: "2rem" },
|
|
boxShadow: "0 24px 64px -12px rgba(0,0,0,0.18)",
|
|
background: "#fff",
|
|
}}
|
|
>
|
|
<ButtonGroup
|
|
color="primary"
|
|
disabled={false}
|
|
size="lg"
|
|
spacing={1}
|
|
variant="soft"
|
|
>
|
|
<IconButton onClick={() => setShowSelectUser(true)}>
|
|
<PersonIcon />
|
|
</IconButton>
|
|
<IconButton onClick={() => setQRmodal(true)}>
|
|
<QrCodeIcon />
|
|
</IconButton>
|
|
<IconButton onClick={changeTranslation}>
|
|
<TranslateIcon />
|
|
</IconButton>
|
|
<Typography
|
|
level="title-sm"
|
|
textColor="var(--joy-palette-success-plainColor)"
|
|
sx={{
|
|
fontFamily: "monospace",
|
|
opacity: "100%",
|
|
alignSelf: "center",
|
|
}}
|
|
>
|
|
{`${t("greeting")} ${userData?.fullname ?? t("loading")}`}
|
|
</Typography>
|
|
</ButtonGroup>
|
|
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
handleSubmit();
|
|
}}
|
|
className="flex flex-col gap-4"
|
|
>
|
|
<Chip
|
|
size="lg"
|
|
variant="solid"
|
|
color="neutral"
|
|
sx={{
|
|
alignSelf: "flex-start",
|
|
borderRadius: "999px",
|
|
fontWeight: 600,
|
|
marginTop: 1,
|
|
}}
|
|
>
|
|
#{nextID ?? "N/A"}
|
|
</Chip>
|
|
|
|
{/* Name row */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Field
|
|
name="firstName"
|
|
validators={makeFieldValidator("firstName")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("first-name")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field
|
|
name="lastName"
|
|
validators={makeFieldValidator("lastName")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("last-name")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
</div>
|
|
|
|
<Field name="email" validators={makeFieldValidator("email")}>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("email")}
|
|
type="email"
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field
|
|
name="phoneNumber"
|
|
validators={makeFieldValidator("phoneNumber")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("phone-number")}
|
|
type="tel"
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
{/* Tickets + Invoice + Chocolate toggle */}
|
|
<div className="grid grid-cols-2 gap-3 items-end">
|
|
<FormControl required>
|
|
<FormLabel>{t("tickets")}</FormLabel>
|
|
<Field
|
|
name="tickets"
|
|
validators={makeFieldValidator("tickets")}
|
|
>
|
|
{(field) => {
|
|
const errors = getErrors(field);
|
|
return (
|
|
<>
|
|
<Input
|
|
type="number"
|
|
value={
|
|
field.state.value === 0 ? "" : field.state.value
|
|
}
|
|
onBlur={field.handleBlur}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
field.handleChange(val === "" ? 0 : Number(val));
|
|
}}
|
|
variant="soft"
|
|
sx={{ borderRadius: "10px" }}
|
|
/>
|
|
{errors.length > 0 && (
|
|
<span className="text-red-500 text-sm">
|
|
{errors[0]}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
}}
|
|
</Field>
|
|
</FormControl>
|
|
<div className="flex flex-col gap-2 pb-2">
|
|
<Checkbox
|
|
checked={invoice}
|
|
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"
|
|
/>
|
|
<Field name="chocolates">
|
|
{(field) => (
|
|
<Checkbox
|
|
checked={!!field.state.value}
|
|
onChange={(e) => field.handleChange(e.target.checked)}
|
|
label={t("chocolates")}
|
|
variant="outlined"
|
|
/>
|
|
)}
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invoice details (conditional) */}
|
|
{invoice && (
|
|
<div className="flex flex-col gap-3 pt-4 border-t border-blue-200">
|
|
<Typography level="title-sm" color="primary">
|
|
{t("invoice-details")}
|
|
</Typography>
|
|
|
|
<Field
|
|
name="companyName"
|
|
validators={makeFieldValidator("companyName")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("company-name")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Field
|
|
name="cmpFirstName"
|
|
validators={makeFieldValidator("cmpFirstName")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("first-name")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field
|
|
name="cpmLastName"
|
|
validators={makeFieldValidator("cpmLastName")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("last-name")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
</div>
|
|
|
|
<Field name="street" validators={makeFieldValidator("street")}>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("street")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field
|
|
name="postalCode"
|
|
validators={makeFieldValidator("postalCode")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("postal-code")}
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field
|
|
name="cpmPhoneNumber"
|
|
validators={makeFieldValidator("cpmPhoneNumber")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("phone-number")}
|
|
type="tel"
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</Field>
|
|
|
|
<Field
|
|
name="cpmEmail"
|
|
validators={makeFieldValidator("cpmEmail")}
|
|
>
|
|
{(field) => (
|
|
<TextField
|
|
label={t("email")}
|
|
type="email"
|
|
required
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onChange={field.handleChange}
|
|
errors={getErrors(field)}
|
|
/>
|
|
)}
|
|
</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={paymentMethod === method ? "solid" : "soft"}
|
|
color="primary"
|
|
onClick={() => {
|
|
setFieldValue("paymentMethod", method);
|
|
if (method === "paypal") {
|
|
setQRmodal(true);
|
|
}
|
|
}}
|
|
sx={{
|
|
flex: 1,
|
|
minWidth: "90px",
|
|
borderRadius: "12px",
|
|
py: 1.5,
|
|
textTransform: "none",
|
|
fontWeight: paymentMethod === method ? 700 : 400,
|
|
}}
|
|
>
|
|
{PAYMENT_LABELS[method]}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Subscribe>
|
|
</FormControl>
|
|
|
|
{mutateFormIsPending ? (
|
|
<div className="flex items-center justify-center">
|
|
<CircularProgress />
|
|
</div>
|
|
) : (
|
|
<Subscribe selector={(state) => state.values.paymentMethod}>
|
|
{(paymentMethod) => (
|
|
<Button
|
|
type="submit"
|
|
disabled={!paymentMethod}
|
|
size="lg"
|
|
sx={{
|
|
mt: 2,
|
|
borderRadius: "14px",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.05em",
|
|
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
|
|
},
|
|
}}
|
|
>
|
|
{t("submit")}
|
|
</Button>
|
|
)}
|
|
</Subscribe>
|
|
)}
|
|
|
|
{msg && (
|
|
<Alert
|
|
color={msg.type}
|
|
sx={{ flexDirection: "column", alignItems: "flex-start" }}
|
|
>
|
|
<Typography level="title-lg" sx={{ mb: 0.5 }}>
|
|
{msg.headline}
|
|
</Typography>
|
|
<Typography level="body-sm">{msg.text}</Typography>
|
|
</Alert>
|
|
)}
|
|
</form>
|
|
</Sheet>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|