From 0e1d8e5af49448ba76b452641227a4cce52e25e8 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 18 Jun 2026 13:04:24 -0400
Subject: [PATCH] BouquetPicker: show category slugs in empty state for
 debugging

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 estore/src/components/BouquetPicker.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/estore/src/components/BouquetPicker.tsx b/estore/src/components/BouquetPicker.tsx
index 3edb7d9..5202f19 100644
--- a/estore/src/components/BouquetPicker.tsx
+++ b/estore/src/components/BouquetPicker.tsx
@@ -25,6 +25,7 @@ export default function BouquetPicker({ product, onClose }: Props) {
   const [buildItems, setBuildItems]     = useState<CatalogItem[]>([])
   const [loading, setLoading]           = useState(true)
   const [colorFamilies, setColorFamilies] = useState<ColorFamily[]>([])
+  const [debugSlugs, setDebugSlugs]     = useState<string[]>([])
 
   // mylar: itemId → { variationId, quantity }
   const [mylarState, setMylarState] = useState<Record<string, { variationId: string; quantity: number }>>({})
@@ -66,8 +67,9 @@ export default function BouquetPicker({ product, onClose }: Props) {
       fetch(BASE + '/colors.json').then((r) => r.ok ? r.json() : []),
     ]).then(([{ items }, families]: [{ items: CatalogItem[] }, ColorFamily[]]) => {
       // Log all unique category slugs so we can verify "build" is present
-      const allSlugs = Array.from(new Set((items as CatalogItem[]).flatMap((i) => i.categories ?? [i.category])))
-      console.log('[BouquetPicker] category slugs in catalog:', allSlugs.sort())
+      const allSlugs = Array.from(new Set((items as CatalogItem[]).flatMap((i) => i.categories ?? [i.category]))).sort()
+      console.log('[BouquetPicker] category slugs in catalog:', allSlugs)
+      setDebugSlugs(allSlugs)
 
       const inBuild = (item: CatalogItem) =>
         (item.categories ?? []).includes('build') || item.category === 'build'
@@ -197,10 +199,16 @@ export default function BouquetPicker({ product, onClose }: Props) {
           {loading ? (
             <p className="has-text-grey has-text-centered" style={{ padding: '2rem' }}>Loading…</p>
           ) : buildItems.length === 0 ? (
-            <p className="has-text-grey has-text-centered" style={{ padding: '2rem' }}>
-              No items are set up for the bouquet builder yet.<br />
-              Add a &ldquo;Build&rdquo; category to items in Square to make them available here.
-            </p>
+            <div style={{ padding: '1.5rem', fontSize: '0.82rem', color: '#555' }}>
+              <p style={{ marginBottom: '0.5rem' }}>No items found with category slug <code>build</code>.</p>
+              <p style={{ marginBottom: '0.5rem' }}>Category slugs currently in your catalog:</p>
+              <p style={{ fontFamily: 'monospace', background: '#f5f5f5', padding: '0.5rem', borderRadius: 4, wordBreak: 'break-all' }}>
+                {debugSlugs.join(', ') || '(none — catalog may be empty or still loading)'}
+              </p>
+              <p style={{ marginTop: '0.5rem', color: '#888' }}>
+                The filter looks for <code>build</code>. If your Square category produces a different slug, share this list and it will be fixed.
+              </p>
+            </div>
           ) : (
             <>
               {/* ── Mylar section ── */}