85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import {
|
|
Field,
|
|
Textarea,
|
|
Button,
|
|
Alert,
|
|
Container,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useState } from "react";
|
|
import { API_BASE } from "@/config/api.config";
|
|
import Cookies from "js-cookie";
|
|
import { Header } from "@/components/Header";
|
|
|
|
interface Alert {
|
|
type: "info" | "warning" | "success" | "error" | "neutral";
|
|
headline: string;
|
|
text: string;
|
|
}
|
|
|
|
export const ContactPage = () => {
|
|
const { t } = useTranslation();
|
|
const [message, setMessage] = useState("");
|
|
const [alert, setAlert] = useState<Alert | null>(null);
|
|
|
|
const sendMessage = async () => {
|
|
// Logic to send the message
|
|
const result = await fetch(`${API_BASE}/api/users/contact`, {
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: `Bearer ${Cookies.get("token") || ""}`,
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify({ message }),
|
|
});
|
|
|
|
if (result.ok) {
|
|
setAlert({
|
|
type: "success",
|
|
headline: t("contactPage_successHeadline"),
|
|
text: t("contactPage_successText"),
|
|
});
|
|
setMessage("");
|
|
} else {
|
|
setAlert({
|
|
type: "error",
|
|
headline: t("contactPage_errorHeadline"),
|
|
text: t("contactPage_errorText"),
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container className="px-6 sm:px-8 pt-10">
|
|
<Header />
|
|
<Field.Root invalid={message === ""}>
|
|
<Field.Label>
|
|
<Text>{t("contactPage_messageDescription")}</Text>
|
|
<Field.RequiredIndicator />
|
|
</Field.Label>
|
|
<Textarea
|
|
placeholder={t("contactPage_messagePlaceholder")}
|
|
variant="subtle"
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
/>
|
|
{message === "" && (
|
|
<Field.ErrorText>{t("contactPage_messageErrorText")}</Field.ErrorText>
|
|
)}
|
|
</Field.Root>
|
|
{alert && (
|
|
<Alert.Root status={alert.type}>
|
|
<Alert.Indicator />
|
|
<Alert.Content>
|
|
<Alert.Title>{alert.headline}</Alert.Title>
|
|
<Alert.Description>{alert.text}</Alert.Description>
|
|
</Alert.Content>
|
|
</Alert.Root>
|
|
)}
|
|
<Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
|
|
</Container>
|
|
);
|
|
};
|