User Tickets

src/components/Tickets/TicketPopup.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { addNotification } from "#components/Notifications/shared";
+	import { client } from "src/trpc";
+	import { getClose } from "svelte-dialogs";
+
+	const close = getClose();
+
+	async function createTicket(e: SubmitEvent) {
+		e.preventDefault();
+		try {
+			await client.v1.tickets.erstellen.mutate({
+				beschreibung: description,
+				email: email,
+				metadata: {
+					category: category,
+					phone: phone,
+				},
+				titel: title,
+			})
+			// Ticket wurde erfolgreich erstellt
+			close(true)
+		} catch (e) {
+			// Beim erstellen des Tickets ist ein Fehler aufgetreten, das ist ja mal ironisch...
+			close(false)
+		}
+	}
+
+	let category = "";
+	let title = "";
+	let description = "";
+	let email = "";
+	let phone = "";
+</script>
+
+<form class="max-w-lg" on:submit={createTicket}>
+	<h1 class="text-2xl font-semibold mb-6">Ticket erstellen</h1>
+	<p class="mb-6">
+		Vielen Dank, dass sie sich die Zeit nehmen ein Support Ticket zu
+		erstellen. Wir werden uns schnellstmöglich um ihre Angelegenheit
+		kümmern. Hier können sie alle Details eintragen und uns ihr Problem
+		schildern.
+	</p>
+	<div class="flex flex-col gap-4">
+		<div>
+			<h4>Kategorie *</h4>
+			<select class="select select-bordered" bind:value={category}>
+				<option value="" disabled selected>Bitte Auswählen</option>
+				<option value="Verständnisproblem">Verständnisproblem</option>
+				<option value="Technischer Fehler">Technischer Fehler</option>
+				<option value="Feature anfordern">Feature anfordern</option>
+				<option value="Fehlende Funktionalität"
+					>Fehlende Funktionalität</option
+				>
+			</select>
+		</div>
+		<div>
+			<h4>Überschrift *</h4>
+			<input
+				class="input input-bordered"
+				type="text"
+				placeholder="Überschrift in einem Satz"
+				name="title"
+				bind:value={title}
+				required
+			/>
+		</div>
+		<div>
+			<h4>Beschreibung *</h4>
+			<textarea
+				cols="10"
+				rows="5"
+				class="textarea textarea-bordered"
+				placeholder="Schildern sie hier ihre Erfahrung"
+				bind:value={description}
+				required
+			></textarea>
+		</div>
+		<div class="flex flex-row gap-4">
+			<div class="w-full">
+				<h4>Email Adresse *</h4>
+				<input
+					class="input input-bordered"
+					type="email"
+					placeholder="Ihre Email Adresse"
+					name="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+			<div class="w-full">
+				<h4>Telefonnummer</h4>
+				<input
+					class="input input-bordered"
+					type="tel"
+					placeholder="Ihre Telefonnumer"
+					name="phone"
+					bind:value={phone}
+					required
+				/>
+			</div>
+		</div>
+		<button class="btn btn-primary" type="submit">Abschicken</button>
+	</div>
+</form>