From 548046d4bf260ac84d2ccf8934b064c1609fd2ff Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 19:26:34 +0100
Subject: [PATCH] Capture placement preview when sending design to customer

Also capture the design composited on the product photo, so customers
see both the design preview and how it looks on the actual product.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/DesignCanvas.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 6610e31..b2d4f38 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -1061,6 +1061,31 @@ export default function DesignCanvas({
         backGuides.forEach((g) => g.show());
       }
 
+      // Capture placement preview (design on product)
+      let frontPlacementUrl: string | null = null;
+      const getPhotoInfo = (v: 'front' | 'back') => {
+        const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
+        if (colorPhoto) return { url: colorPhoto, tint: false };
+        const activePhoto = v === 'front' ? product.imageUrl : product.imageUrlBack;
+        if (activePhoto && product.photoRecolorable) return { url: activePhoto, tint: true };
+        return activePhoto ? { url: activePhoto, tint: false } : null;
+      };
+      const photoInfo = getPhotoInfo('front');
+      const box = {
+        left: frontPrintArea.xPct * DISPLAY,
+        top: frontPrintArea.yPct * DISPLAY,
+        w: frontPrintArea.wPct * DISPLAY,
+        h: frontPrintArea.hPct * DISPLAY,
+      };
+      if (photoInfo) {
+        frontPlacementUrl = await composePlacementImage(
+          photoInfo.url,
+          photoInfo.tint ? { tint: true, color } : null,
+          frontStage,
+          box,
+        ).catch(() => null);
+      }
+
       // Send to API with the new preview images
       const res = await fetch(`/api/designs/${id}/send-to-customer`, {
         method: 'POST',
@@ -1068,6 +1093,7 @@ export default function DesignCanvas({
         body: JSON.stringify({
           designPreviewUrl: frontDataUrl,
           designPreviewUrlBack: backDataUrl,
+          placementPreviewUrl: frontPlacementUrl,
         }),
       });