From c3396be029aaa1b585c940fc32432a5044d2c135 Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Fri, 19 Dec 2025 06:16:07 -0600
Subject: [PATCH] Fix download button in proof detail view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The download button was only logging to console instead of
downloading the proof file. Added handleDownload function that
supports both data URLs and remote URLs with proper CORS handling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/Campaigns.tsx | 37 ++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Campaigns.tsx b/frontend/components/Campaigns.tsx
index 26d9935..c018733 100755
--- a/frontend/components/Campaigns.tsx
+++ b/frontend/components/Campaigns.tsx
@@ -1097,6 +1097,41 @@ const ProofDetailView: React.FC<{
         });
     };
 
+    const handleDownload = async () => {
+        const url = selectedVersion.proofPreviewUrl;
+        const fileName = `${proof.proofName}_V${selectedVersion.version}`;
+
+        try {
+            if (url.startsWith('data:')) {
+                // Data URL - extract mime type and download directly
+                const link = document.createElement('a');
+                link.href = url;
+                const mimeMatch = url.match(/data:([^;]+)/);
+                const ext = mimeMatch ? mimeMatch[1].split('/')[1] : 'png';
+                link.download = `${fileName}.${ext}`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } else {
+                // Remote URL - fetch as blob to handle CORS and ensure download
+                const response = await fetch(url);
+                const blob = await response.blob();
+                const blobUrl = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = blobUrl;
+                const ext = url.split('.').pop()?.split('?')[0] || 'png';
+                link.download = `${fileName}.${ext}`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(blobUrl);
+            }
+        } catch (error) {
+            console.error('Failed to download file:', error);
+            alert('Sorry, there was an error downloading the file. Please try again.');
+        }
+    };
+
     if (!selectedVersion) {
         return (
             <div className="p-8">
@@ -1156,7 +1191,7 @@ const ProofDetailView: React.FC<{
                                 </h3>
                                 <div className="flex items-center gap-2">
                                     <button
-                                        onClick={() => console.log('Download version clicked')}
+                                        onClick={handleDownload}
                                         className="flex items-center gap-2 text-sm bg-brand-accent text-white font-semibold py-1.5 px-3 rounded-lg border border-transparent hover:bg-brand-dark-blue transition-colors duration-200"
                                         title={`Download Version ${selectedVersion.version}`}
                                     >