Add visible feedback and error handling to commission requests

2026-01-01 11:53:13 +01:00
parent 84470aa2e2
commit af5e2dd590
3 changed files with 223 additions and 161 deletions
--- a/src/actions/commissions/submitCommissionRequest.ts
+++ b/src/actions/commissions/submitCommissionRequest.ts
@ -67,21 +67,31 @@ export async function submitCommissionRequest(input: {
  );

  if (!res.ok) {
-    const text = await res.text().catch(() => "");
-    let parsed: any = null;
+  const raw = await res.text().catch(() => "");
+  const statusLine = `${res.status} ${res.statusText || ""}`.trim();
+
+  // Show something useful even if raw is empty
+  let message = `Admin API error: ${statusLine}`;
+
+  if (raw) {
    try {
-      parsed = text ? JSON.parse(text) : null;
+      const parsed = JSON.parse(raw);
+      message =
+        parsed?.error
+          ? `Admin API error: ${statusLine} — ${parsed.error}`
+          : parsed?.message
+            ? `Admin API error: ${statusLine} — ${parsed.message}`
+            : `Admin API error: ${statusLine} — ${raw}`;
    } catch {
-      // ignore
+      message = `Admin API error: ${statusLine} — ${raw}`;
+    }
  }

-    const message =
-      parsed?.error ??
-      parsed?.message ??
-      (text ? text.slice(0, 300) : `Request failed (${res.status})`);
+  // Log full body server-side for debugging (safe; this is server-only)
+  console.error("[submitCommissionRequest] upstream error", { statusLine, raw });

  throw new Error(message);
-  }
+}

  // Expected response: { id: string; createdAt: string }
  return (await res.json()) as { id: string; createdAt: string };
--- a/src/components/commissions/CommissionOrderForm.tsx
+++ b/src/components/commissions/CommissionOrderForm.tsx
@ -1,7 +1,7 @@
-"use client"
+"use client";

-import { submitCommissionRequest } from "@/actions/commissions/submitCommissionRequest"
-import { Button } from "@/components/ui/button"
+import { submitCommissionRequest } from "@/actions/commissions/submitCommissionRequest";
+import { Button } from "@/components/ui/button";
 import {
  Form,
  FormControl,
@ -9,29 +9,37 @@ import {
  FormItem,
  FormLabel,
  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { CommissionCustomInput, CommissionExtra, CommissionOption, CommissionType, CommissionTypeCustomInput, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma/client"
-import { commissionOrderSchema } from "@/schemas/commissionOrder"
-import { calculatePriceRange } from "@/utils/calculatePrice"
-import { zodResolver } from "@hookform/resolvers/zod"
-import "dotenv/config"
-import Link from "next/link"
-import { useMemo, useState } from "react"
-import { useForm, useWatch } from "react-hook-form"
-import * as z from "zod/v4"
-import { FileDropzone } from "./FileDropzone"
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  CommissionCustomInput,
+  CommissionExtra,
+  CommissionOption,
+  CommissionType,
+  CommissionTypeCustomInput,
+  CommissionTypeExtra,
+  CommissionTypeOption,
+} from "@/generated/prisma/client";
+import { commissionOrderSchema } from "@/schemas/commissionOrder";
+import { calculatePriceRange } from "@/utils/calculatePrice";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod/v4";
+import { FileDropzone } from "./FileDropzone";

 type CommissionTypeWithRelations = CommissionType & {
-  options: (CommissionTypeOption & { option: CommissionOption })[]
-  extras: (CommissionTypeExtra & { extra: CommissionExtra })[]
-  customInputs: (CommissionTypeCustomInput & { customInput: CommissionCustomInput })[]
-}
+  options: (CommissionTypeOption & { option: CommissionOption })[];
+  extras: (CommissionTypeExtra & { extra: CommissionExtra })[];
+  customInputs: (CommissionTypeCustomInput & { customInput: CommissionCustomInput })[];
+};

 type Props = {
-  types: CommissionTypeWithRelations[]
-}
+  types: CommissionTypeWithRelations[];
+};

 export function CommissionOrderForm({ types }: Props) {
  const form = useForm<z.infer<typeof commissionOrderSchema>>({
@ -45,50 +53,71 @@ export function CommissionOrderForm({ types }: Props) {
      customerSocials: "",
      message: "",
    },
-  })
+  });

-  const [files, setFiles] = useState<File[]>([])
+  const [files, setFiles] = useState<File[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);

-  const typeId = useWatch({ control: form.control, name: "typeId" })
-  const optionId = useWatch({ control: form.control, name: "optionId" })
-  const extraIds = useWatch({ control: form.control, name: "extraIds" })
+  const typeId = useWatch({ control: form.control, name: "typeId" });
+  const optionId = useWatch({ control: form.control, name: "optionId" });
+  const extraIds = useWatch({ control: form.control, name: "extraIds" });

-  const selectedType = useMemo(
-    () => types.find((t) => t.id === typeId),
-    [types, typeId]
-  )
+  const selectedType = useMemo(() => types.find((t) => t.id === typeId), [types, typeId]);

  const selectedOption = useMemo(
    () => selectedType?.options.find((o) => o.optionId === optionId),
    [selectedType, optionId]
-  )
+  );

  const selectedExtras = useMemo(
    () => selectedType?.extras.filter((e) => extraIds?.includes(e.extraId)) ?? [],
    [selectedType, extraIds]
-  )
+  );

  const [minPrice, maxPrice] = useMemo(() => {
-    return calculatePriceRange(selectedOption, selectedExtras)
-  }, [selectedOption, selectedExtras])
+    return calculatePriceRange(selectedOption, selectedExtras);
+  }, [selectedOption, selectedExtras]);

  async function onSubmit(values: z.infer<typeof commissionOrderSchema>) {
+    setIsSubmitting(true);
+
+    try {
      const payload = {
        typeId: values.typeId || null,
        optionId: values.optionId || null,
+        extraIds: values.extraIds ?? [],
        customerName: values.customerName,
        customerEmail: values.customerEmail,
        customerSocials: values.customerSocials ?? null,
        message: values.message,
-      extraIds: values.extraIds ?? [], // <-- normalize
      };

-    const res = await submitCommissionRequest({
-      payload,
-      files,
+      await submitCommissionRequest({ payload, files });
+
+      toast.success("Request submitted", {
+        description: "Thanks! I’ll get back to you as soon as possible.",
      });

-    console.log("Created request:", res);
+      form.reset({
+        typeId: "",
+        optionId: "",
+        extraIds: [],
+        customerName: "",
+        customerEmail: "",
+        customerSocials: "",
+        message: "",
+      });
+
+      setFiles([]);
+      form.clearErrors();
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Submission failed. Please try again.";
+
+      toast.error("Submission failed", { description: message });
+    } finally {
+      setIsSubmitting(false);
+    }
  }

  return (
@ -108,6 +137,7 @@ export function CommissionOrderForm({ types }: Props) {
                      type="button"
                      variant={field.value === type.id ? "default" : "outline"}
                      onClick={() => field.onChange(type.id)}
+                      disabled={isSubmitting}
                    >
                      {type.name}
                    </Button>
@ -136,6 +166,7 @@ export function CommissionOrderForm({ types }: Props) {
                            checked={field.value === opt.optionId}
                            value={opt.optionId}
                            onChange={() => field.onChange(opt.optionId)}
+                            disabled={isSubmitting}
                          />
                          {opt.option.name}
                        </label>
@ -155,21 +186,19 @@ export function CommissionOrderForm({ types }: Props) {
                  <FormLabel>Extras</FormLabel>
                  <FormControl>
                    <div className="space-y-1">
-                      {selectedType?.extras.map((ext) => (
+                      {selectedType.extras.map((ext) => (
                        <label key={ext.id} className="flex items-center gap-2">
                          <input
                            type="checkbox"
                            checked={field.value?.includes(ext.extraId) ?? false}
                            value={ext.extraId}
+                            disabled={isSubmitting}
                            onChange={(e) => {
-                              const checked = e.target.checked
-                              const newSet = new Set(field.value ?? [])
-                              if (checked) {
-                                newSet.add(ext.extraId)
-                              } else {
-                                newSet.delete(ext.extraId)
-                              }
-                              field.onChange(Array.from(newSet))
+                              const checked = e.target.checked;
+                              const newSet = new Set(field.value ?? []);
+                              if (checked) newSet.add(ext.extraId);
+                              else newSet.delete(ext.extraId);
+                              field.onChange(Array.from(newSet));
                            }}
                          />
                          {ext.extra.name}
@ -184,8 +213,6 @@ export function CommissionOrderForm({ types }: Props) {
          </>
        )}

-
-
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FormField
            control={form.control}
@ -194,12 +221,13 @@ export function CommissionOrderForm({ types }: Props) {
              <FormItem>
                <FormLabel>Your Name</FormLabel>
                <FormControl>
-                  <Input placeholder="Jane Doe" {...field} />
+                  <Input placeholder="Jane Doe" {...field} disabled={isSubmitting} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
+
          <FormField
            control={form.control}
            name="customerEmail"
@ -207,12 +235,17 @@ export function CommissionOrderForm({ types }: Props) {
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
-                  <Input placeholder="E-Mail address for invoice and/or contact" {...field} />
+                  <Input
+                    placeholder="E-Mail address for invoice and/or contact"
+                    {...field}
+                    disabled={isSubmitting}
+                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
+
          <FormField
            control={form.control}
            name="customerSocials"
@ -220,7 +253,11 @@ export function CommissionOrderForm({ types }: Props) {
              <FormItem>
                <FormLabel>Socials</FormLabel>
                <FormControl>
-                  <Input placeholder="Alternative for contact (telegram, bsky, fediverse/mastodon)" {...field} />
+                  <Input
+                    placeholder="Alternative for contact (telegram, bsky, fediverse/mastodon)"
+                    {...field}
+                    disabled={isSubmitting}
+                  />
                </FormControl>
                <FormMessage />
              </FormItem>
@ -239,6 +276,7 @@ export function CommissionOrderForm({ types }: Props) {
                  placeholder="Describe what you’d like drawn..."
                  rows={4}
                  {...field}
+                  disabled={isSubmitting}
                />
              </FormControl>
              <FormMessage />
@ -246,65 +284,32 @@ export function CommissionOrderForm({ types }: Props) {
          )}
        />

-        {selectedType && selectedType.customInputs.length > 0 && (
-          <div className="space-y-4">
-            {selectedType.customInputs.map((input) => {
-              const name = `customFields.${input.customInput.name}`
-              return (
-                <FormField
-                  key={input.id}
-                  control={form.control}
-                  name={name as `customFields.${string}`}
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{input.label}</FormLabel>
-                      <FormControl>
-                        {input.inputType === "textarea" ? (
-                          <Textarea {...field} rows={3} />
-                        ) : input.inputType === "number" ? (
-                          <Input type="number" {...field} />
-                        ) : input.inputType === "checkbox" ? (
-                          <input
-                            type="checkbox"
-                            checked={field.value ?? false}
-                            onChange={(e) => field.onChange(e.target.checked)}
-                          />
-                        ) : input.inputType === "date" ? (
-                          <Input type="date" {...field} />
-                        ) : input.inputType === "select" ? (
-                          // Placeholder select – populate with options if needed
-                          <select
-                            {...field}
-                            className="border rounded px-2 py-1 w-full"
-                          >
-                            <option value="">Please select</option>
-                            <option value="example1">Example 1</option>
-                            <option value="example2">Example 2</option>
-                          </select>
-                        ) : (
-                          <Input {...field} />
-                        )}
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )
-            })}
-          </div>
-        )}
-
        <FormItem>
          <FormLabel>Reference Images</FormLabel>
          <FormControl>
            <div className="space-y-2">
-              <FileDropzone onFilesSelected={setFiles} />
+              <FileDropzone files={files} onFilesSelected={setFiles} />
+
              {files.length > 0 && (
+                <div className="space-y-2">
                  <ul className="list-disc pl-4 text-sm text-muted-foreground">
                    {files.map((file, i) => (
-                    <li key={i}>{file.name}</li>
+                      <li key={`${file.name}-${file.size}-${file.lastModified}-${i}`}>
+                        {file.name}
+                      </li>
                    ))}
                  </ul>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="h-9"
+                    disabled={isSubmitting}
+                    onClick={() => setFiles([])}
+                  >
+                    Clear files
+                  </Button>
+                </div>
              )}
            </div>
          </FormControl>
@ -325,10 +330,10 @@ export function CommissionOrderForm({ types }: Props) {
          .
        </div>

-        <Button type="submit" disabled={!form.formState.isValid}>
-          Submit Request
+        <Button type="submit" disabled={!form.formState.isValid || isSubmitting}>
+          {isSubmitting ? "Submitting…" : "Submit Request"}
        </Button>
      </form>
    </Form>
-  )
+  );
 }
--- a/src/components/commissions/FileDropzone.tsx
+++ b/src/components/commissions/FileDropzone.tsx
@ -1,47 +1,87 @@
-"use client"
+"use client";

-import { cn } from "@/lib/utils"
-import { useCallback, useRef, useState } from "react"
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+type Props = {
+  /** Current selected files (controlled) */
+  files: File[];
+  /** Called with the full next list of files */
+  onFilesSelected: (files: File[]) => void;
+  /** If true, newly added files are appended to existing files */
+  append?: boolean;
+  /** Optional limits */
+  accept?: string;
+  maxFiles?: number;
+};
+
+function defaultFileKey(f: File) {
+  // Good-enough de-dupe key for user selections
+  return `${f.name}__${f.size}__${f.lastModified}`;
+}

 export function FileDropzone({
+  files,
  onFilesSelected,
-}: {
-  onFilesSelected: (files: File[]) => void
-}) {
-  const [isDragging, setIsDragging] = useState(false)
-  const inputRef = useRef<HTMLInputElement | null>(null)
+  append = true,
+  accept = "image/*",
+  maxFiles = 10,
+}: Props) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);

-  const handleFiles = (files: FileList | null) => {
-    if (files) {
-      onFilesSelected(Array.from(files))
-    }
-  }
+  const mergeFiles = React.useCallback(
+    (incoming: File[]) => {
+      const next = append ? [...files, ...incoming] : [...incoming];
+
+      // de-dupe (same name/size/lastModified)
+      const map = new Map<string, File>();
+      for (const f of next) map.set(defaultFileKey(f), f);
+
+      const deduped = Array.from(map.values()).slice(0, maxFiles);
+      onFilesSelected(deduped);
+
+      // Allow selecting the same file again later (if user removes and re-adds)
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [append, files, maxFiles, onFilesSelected]
+  );
+
+  const handleFiles = React.useCallback(
+    (list: FileList | null) => {
+      if (!list) return;
+      const incoming = Array.from(list);
+      if (incoming.length === 0) return;
+      mergeFiles(incoming);
+    },
+    [mergeFiles]
+  );

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragging(false)
-    handleFiles(e.dataTransfer.files)
-  }
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragging(true)
-  }
+    e.preventDefault();
+    setIsDragging(true);
+  };

-  const handleDragLeave = () => {
-    setIsDragging(false)
-  }
+  const handleDragLeave = () => setIsDragging(false);

-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      handleFiles(e.target.files)
-    },
-    [onFilesSelected]
-  )
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleFiles(e.target.files);
+  };

  return (
    <div
+      role="button"
+      tabIndex={0}
      onClick={() => inputRef.current?.click()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      }}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
@ -54,12 +94,19 @@ export function FileDropzone({
        ref={inputRef}
        type="file"
        multiple
+        accept={accept}
        onChange={handleChange}
        className="hidden"
      />
      <p className="text-sm text-muted-foreground">
        Drag & drop images here or click to upload
      </p>
+
+      {files.length > 0 ? (
+        <p className="mt-2 text-xs text-muted-foreground">
+          Selected: {files.length} / {maxFiles}
+        </p>
+      ) : null}
    </div>
-  )
+  );
 }