From 56e31b4fae18fb0d8512642a1f3f07eb1b0bf219 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sun, 19 Jul 2026 11:53:51 +0100
Subject: [PATCH] Fix: Show Remove and Modify print area buttons for existing
 images

- Update PhotoPrintAreaField to accept existingImageUrl prop
- Display Remove and Modify print area buttons on edit page for existing images
- Users can now easily modify print area or remove existing images without
  uploading a new file

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/admin/products/[id]/edit/page.tsx |  4 ++--
 src/components/PhotoPrintAreaField.tsx    | 20 ++++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/admin/products/[id]/edit/page.tsx b/src/app/admin/products/[id]/edit/page.tsx
index 0e3327b..098b06e 100644
--- a/src/app/admin/products/[id]/edit/page.tsx
+++ b/src/app/admin/products/[id]/edit/page.tsx
@@ -266,7 +266,7 @@ export default async function EditProductPage({ params }: { params: { id: string
               <p className="text-xs text-muted">Current photo. Upload a new one below to replace it.</p>
             </div>
           )}
-          <PhotoPrintAreaField />
+          <PhotoPrintAreaField existingImageUrl={product.imageUrl} />
         </div>
 
         <div>
@@ -281,7 +281,7 @@ export default async function EditProductPage({ params }: { params: { id: string
               <p className="text-xs text-muted">Current back photo and print area. Upload a new one below to replace both.</p>
             </div>
           )}
-          <PhotoPrintAreaField variant="back" />
+          <PhotoPrintAreaField variant="back" existingImageUrl={product.imageUrlBack} />
         </div>
 
         <div>
diff --git a/src/components/PhotoPrintAreaField.tsx b/src/components/PhotoPrintAreaField.tsx
index 71c9c10..b355eae 100644
--- a/src/components/PhotoPrintAreaField.tsx
+++ b/src/components/PhotoPrintAreaField.tsx
@@ -7,7 +7,13 @@ type Box = { xPct: number; yPct: number; wPct: number; hPct: number }; // 0-100
 const DEFAULT_BOX: Box = { xPct: 30, yPct: 25, wPct: 40, hPct: 35 };
 const MIN_SIZE = 6; // percent
 
-export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: 'front' | 'back' }) {
+export default function PhotoPrintAreaField({
+  variant = 'front',
+  existingImageUrl,
+}: {
+  variant?: 'front' | 'back';
+  existingImageUrl?: string;
+}) {
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [box, setBox] = useState<Box>(DEFAULT_BOX);
   const [showPrintAreaEditor, setShowPrintAreaEditor] = useState(false);
@@ -47,6 +53,8 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
     setShowPrintAreaEditor(false);
   };
 
+  const currentImageUrl = previewUrl || existingImageUrl;
+
   const onBoxMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     dragState.current = { mode: 'move', startX: e.clientX, startY: e.clientY, startBox: box };
@@ -89,7 +97,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
 
   return (
     <div>
-      {!previewUrl || !showPrintAreaEditor ? (
+      {!currentImageUrl || !showPrintAreaEditor ? (
         <>
           <input
             ref={fileInputRef}
@@ -114,7 +122,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
             </p>
           )}
 
-          {previewUrl && !showPrintAreaEditor && (
+          {currentImageUrl && !showPrintAreaEditor && (
             <div className="mt-3 flex gap-2">
               <button
                 type="button"
@@ -135,7 +143,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
         </>
       ) : null}
 
-      {previewUrl && showPrintAreaEditor && (
+      {currentImageUrl && showPrintAreaEditor && (
         <div className="mt-4">
           <div className="flex items-center justify-between mb-2">
             <p className="tag-label">Drag the box to mark the print area</p>
@@ -158,7 +166,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
-              src={previewUrl}
+              src={currentImageUrl}
               alt="Product preview"
               className="absolute inset-0 h-full w-full object-cover"
               draggable={false}
@@ -184,7 +192,7 @@ export default function PhotoPrintAreaField({ variant = 'front' }: { variant?: '
         </div>
       )}
 
-      <input type="hidden" name={`hasCustomPrintArea${suffix}`} value={previewUrl ? '1' : ''} />
+      <input type="hidden" name={`hasCustomPrintArea${suffix}`} value={currentImageUrl ? '1' : ''} />
       <input type="hidden" name={`printX${suffix}`} value={box.xPct / 100} />
       <input type="hidden" name={`printY${suffix}`} value={box.yPct / 100} />
       <input type="hidden" name={`printW${suffix}`} value={box.wPct / 100} />