Add custom commission types

2026-02-01 16:21:20 +01:00
parent e869f19142
commit 2015ea6f2e
19 changed files with 1180 additions and 1 deletions
--- a/src/components/commissions/customCards/NewCustomCardForm.tsx
+++ b/src/components/commissions/customCards/NewCustomCardForm.tsx
@ -0,0 +1,147 @@
+"use client";
+
+import { createCommissionCustomCard } from "@/actions/commissions/customCards/newCard";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import type { CommissionExtra, CommissionOption } from "@/generated/prisma/client";
+import {
+  commissionCustomCardSchema,
+  type CommissionCustomCardValues,
+} from "@/schemas/commissionCustomCard";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { CommissionExtraField } from "../types/form/CommissionExtraField";
+import { CommissionOptionField } from "../types/form/CommissionOptionField";
+import { CustomCardImagePicker } from "./CustomCardImagePicker";
+import type { CommissionCustomCardImageItem } from "@/actions/commissions/customCards/images";
+
+type Props = {
+  options: CommissionOption[];
+  extras: CommissionExtra[];
+  images: CommissionCustomCardImageItem[];
+};
+
+export default function NewCustomCardForm({ options, extras, images }: Props) {
+  const router = useRouter();
+  const form = useForm<CommissionCustomCardValues>({
+    resolver: zodResolver(commissionCustomCardSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      isVisible: true,
+      isSpecialOffer: false,
+      referenceImageUrl: null,
+      options: [],
+      extras: [],
+    },
+  });
+
+  async function onSubmit(values: CommissionCustomCardValues) {
+    try {
+      const created = await createCommissionCustomCard(values);
+      console.log("Commission custom card created:", created);
+      toast("Custom commission card created.");
+      router.push("/commissions/custom-cards");
+    } catch (err) {
+      console.error(err);
+      toast("Failed to create custom commission card.");
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormDescription>The name of the custom commission card.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormDescription>Optional description.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="isVisible"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>Visible on app</FormLabel>
+                  <FormDescription>Controls whether the card is shown.</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="isSpecialOffer"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>Special offer</FormLabel>
+                  <FormDescription>Adds a special offer badge on the app.</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="referenceImageUrl"
+            render={() => <CustomCardImagePicker form={form} initialImages={images} />}
+          />
+
+          <CommissionOptionField options={options} />
+          <CommissionExtraField extras={extras} />
+
+          <div className="flex flex-col gap-4">
+            <Button type="submit">Submit</Button>
+            <Button type="reset" variant="secondary" onClick={() => router.back()}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}