Add design approval workflow infrastructure: PATCH endpoint, email notifications, and message types

- Add PATCH method to /api/designs/[id]/route.ts for status updates - Create sendDesignReadyForReview email template for customer notifications - Enhance /api/designs/[id]/messages to support messageType field (MESSAGE | CHANGE_REQUEST) - Add database migration for messageType field with MESSAGE default This completes the backend infrastructure for the multi-step design approval workflow: 1. Admin edits and sends design to customer for review 2. Customer approves design or requests changes 3. Admin receives notifications for change requests Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-18 17:11:10 +01:00
parent 4d124b1550
commit ac27cc554b
10 changed files with 431 additions and 42 deletions
@@ -0,0 +1,100 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+
+interface DesignApproval {
+  id: string;
+  customerEmail: string;
+  customerName: string | null;
+  productId: string;
+  product: {
+    id: string;
+    name: string;
+    basePrice: number;
+    personalisedPrice: number;
+    onSale: boolean;
+    effectivePrice: number;
+    colors: string[];
+    sizes: string[];
+    showOnPersonalised: boolean;
+    imageUrl: string | null;
+    imageUrlBack: string | null;
+    photoRecolorable: boolean;
+    colorPhotos: Record<string, string>;
+    colorPhotosBack: Record<string, string>;
+    printArea: string;
+    printAreaBack: string | null;
+    mockup: string;
+    referenceWidthCm: number | null;
+    referenceHeightCm: number | null;
+  };
+  designJson: string;
+  color: string;
+  size: string | null;
+  status: string;
+}
+
+const DesignCanvas = dynamic(() => import('@/components/DesignCanvas'), { ssr: false });
+
+export default function EditDesignPage({ params }: { params: { id: string } }) {
+  const router = useRouter();
+  const [design, setDesign] = useState<DesignApproval | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    fetch(`/api/designs/${params.id}`)
+      .then((r) => r.json())
+      .then(setDesign)
+      .finally(() => setLoading(false));
+  }, [params.id]);
+
+  const handleSendToCustomer = async () => {
+    setSending(true);
+    try {
+      const res = await fetch(`/api/designs/${params.id}/send-to-customer`, {
+        method: 'POST',
+      });
+      if (res.ok) {
+        router.push(`/admin/designs/${params.id}`);
+      } else {
+        alert('Failed to send to customer');
+      }
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (loading) return <div className="p-6">Loading...</div>;
+  if (!design) return <div className="p-6 text-sm text-muted">Design not found.</div>;
+
+  return (
+    <div className="min-h-screen bg-paper">
+      <div className="mx-auto max-w-7xl px-6 py-8">
+        <Link href={`/admin/designs/${params.id}`} className="text-sm text-clay hover:text-clay-dark mb-4 inline-block">
+          ← Back to design approval
+        </Link>
+
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <h1 className="font-display text-3xl mb-2">{design.product.name}</h1>
+            <p className="text-sm text-muted">Editing design for {design.customerName || design.customerEmail}</p>
+          </div>
+          <button
+            onClick={handleSendToCustomer}
+            disabled={sending}
+            className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark disabled:opacity-60"
+          >
+            {sending ? 'Sending…' : 'Send to Customer for Review'}
+          </button>
+        </div>
+
+        {/* Full Design Canvas */}
+        <DesignCanvas product={design.product} />
+      </div>
+    </div>
+  );
+}