chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BouquetPicker: show category slugs in empty state for debugging

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-06-18 13:04:24 -04:00
parent 9779198d46
commit 0e1d8e5af4
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
estore/src/components/BouquetPicker.tsx
View File

@ -25,6 +25,7 @@ export default function BouquetPicker({ product, onClose }: Props) {
const [buildItems, setBuildItems] = useState<CatalogItem[]>([]) const [buildItems, setBuildItems] = useState<CatalogItem[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [colorFamilies, setColorFamilies] = useState<ColorFamily[]>([]) const [colorFamilies, setColorFamilies] = useState<ColorFamily[]>([])
const [debugSlugs, setDebugSlugs] = useState<string[]>([])
// mylar: itemId → { variationId, quantity } // mylar: itemId → { variationId, quantity }
const [mylarState, setMylarState] = useState<Record<string, { variationId: string; quantity: number }>>({}) 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() : []), fetch(BASE + '/colors.json').then((r) => r.ok ? r.json() : []),
]).then(([{ items }, families]: [{ items: CatalogItem[] }, ColorFamily[]]) => { ]).then(([{ items }, families]: [{ items: CatalogItem[] }, ColorFamily[]]) => {
// Log all unique category slugs so we can verify "build" is present // 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]))) const allSlugs = Array.from(new Set((items as CatalogItem[]).flatMap((i) => i.categories ?? [i.category]))).sort()
console.log('[BouquetPicker] category slugs in catalog:', allSlugs.sort()) console.log('[BouquetPicker] category slugs in catalog:', allSlugs)
setDebugSlugs(allSlugs)
const inBuild = (item: CatalogItem) => const inBuild = (item: CatalogItem) =>
(item.categories ?? []).includes('build') || item.category === 'build' (item.categories ?? []).includes('build') || item.category === 'build'
@ -197,10 +199,16 @@ export default function BouquetPicker({ product, onClose }: Props) {
{loading ? ( {loading ? (
<p className="has-text-grey has-text-centered" style={{ padding: '2rem' }}>Loading…</p> <p className="has-text-grey has-text-centered" style={{ padding: '2rem' }}>Loading…</p>
) : buildItems.length === 0 ? ( ) : buildItems.length === 0 ? (
<p className="has-text-grey has-text-centered" style={{ padding: '2rem' }}> <div style={{ padding: '1.5rem', fontSize: '0.82rem', color: '#555' }}>
No items are set up for the bouquet builder yet.<br /> <p style={{ marginBottom: '0.5rem' }}>No items found with category slug <code>build</code>.</p>
Add a &ldquo;Build&rdquo; category to items in Square to make them available here. <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>
<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 ── */} {/* ── Mylar section ── */}