From 55d18138b78b291a159a55551877f60408caea95 Mon Sep 17 00:00:00 2001
From: Ben Miller <ben.p.miller@gmail.com>
Date: Mon, 29 Dec 2025 00:21:02 -0700
Subject: [PATCH] feat: handle missing SKU in Media Manager

- Added UI and logic to handle cases where the Media Manager is opened for a row without a SKU.
- Displays a user-friendly error message with a Close button.
- Fixed an issue where the Gallery card was not properly hidden in the error state.
---
 src/MediaManager.html | 38 ++++++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/MediaManager.html b/src/MediaManager.html
index 0b5ac1a..c3d9e55 100644
--- a/src/MediaManager.html
+++ b/src/MediaManager.html
@@ -403,7 +403,6 @@
       </a>
       <div id="photos-session-status" style="font-size:11px; color:#64748b; text-align:center;">Initializing...</div>
     </div>
-    </div>
 
   <div class="card" style="padding-bottom: 0;">
     <div class="header" style="margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
@@ -447,6 +446,17 @@
     <div style="margin-top:16px; color: var(--text-secondary); font-weight: 500;">Connecting...</div>
   </div>
 
+  <!-- Error UI -->
+  <div id="error-ui"
+    style="display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top: 80px;">
+    <div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
+    <h3 style="margin: 0 0 8px 0; color: var(--text);">No SKU Found</h3>
+    <p style="color: var(--text-secondary); max-width: 300px; margin-bottom: 24px; line-height: 1.5;">
+      This row does not appear to have a valid SKU. Please ensure the product is set up correctly before managing media.
+    </p>
+    <button onclick="google.script.host.close()" class="btn" style="width: auto;">Close</button>
+  </div>
+
   <!-- Preview Modal -->
   <div id="preview-modal" class="modal-overlay" onclick="ui.closeModal(event)">
     <div class="modal-content">
@@ -881,11 +891,16 @@
                     // Info is now { sku, title } or null
                     const sku = info ? info.sku : null;
 
-                  if (sku && sku !== state.sku) {
-                    state.setSku(info); // Pass whole object
-                    this.loadMedia();
-                  }
-              })
+                    if (sku && sku !== state.sku) {
+                      state.setSku(info); // Pass whole object
+                      this.loadMedia();
+                    } else if (!sku && !state.sku) {
+                      // If we don't have a SKU and haven't shown error yet
+                      if (document.getElementById('error-ui').style.display !== 'flex') {
+                        this.loadMedia();
+                      }
+                    }
+                  })
                   .getSelectedProductInfo();
                 },
 
@@ -897,7 +912,18 @@
                   if (!sku) {
                     const domSku = document.getElementById('current-sku').innerText;
                     if (domSku && domSku !== '...') sku = domSku;
+                  }
 
+                  // CHECK FOR MISSING SKU
+                  if (!sku || sku === '...') {
+                    console.warn("No SKU found. Showing error.");
+                    document.getElementById('loading-ui').style.display = 'none';
+                    document.getElementById('main-ui').style.display = 'none';
+                    document.getElementById('error-ui').style.display = 'flex';
+                    return;
+                  }
+
+                  if (!title) {
                     const domTitle = document.getElementById('current-title').innerText;
                     if (domTitle && domTitle !== 'Loading...') title = domTitle;
                   }