Fix CartDrawer build error: move grouping logic out of JSX

The IIFE with an inline type declaration inside a JSX ternary didn't
compile. Pulled renderEntry and cartGroups into plain variables above
the cartBody const so the JSX stays clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

estore/src/components/CartDrawer.tsx

@@ -405,28 +405,6 @@ export default function CartDrawer() {
 
   // ── Step content ───────────────────────────────────────────────────────────
 
-  const cartBody = (
-    <>
-      {entries.length === 0 ? (
-        <p className="has-text-grey has-text-centered" style={{ marginTop: '3rem' }}>
-          Your order is empty.<br />Pick something from the shop!
-        </p>
-      ) : (() => {
-          // Build render groups: bouquet entries grouped, regular entries standalone
-          type RenderGroup =
-            | { kind: 'single'; entry: CartEntry }
-            | { kind: 'bouquet'; groupId: string; items: CartEntry[] }
-          const groups: RenderGroup[] = []
-          const seen = new Set<string>()
-          entries.forEach((e) => {
-            if (!e.bouquetGroupId) {
-              groups.push({ kind: 'single', entry: e })
-            } else if (!seen.has(e.bouquetGroupId)) {
-              seen.add(e.bouquetGroupId)
-              groups.push({ kind: 'bouquet', groupId: e.bouquetGroupId, items: entries.filter((x) => x.bouquetGroupId === e.bouquetGroupId) })
-            }
-          })
-
   const renderEntry = (entry: CartEntry, inBouquet = false) => (
     <div key={entry.cartId} style={inBouquet ? { paddingBottom: '0.5rem', marginBottom: '0.5rem', borderBottom: '1px dashed #e0d8cc' } : { borderBottom: '1px solid #e6dfc8', paddingBottom: '0.75rem', marginBottom: '0.75rem' }}>
       <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
@@ -499,9 +477,29 @@ export default function CartDrawer() {
     </div>
   )
 
-          return groups.map((group) => {
+  const cartGroups: Array<
-            if (group.kind === 'single') return renderEntry(group.entry)
+    | { kind: 'single'; entry: CartEntry }
+    | { kind: 'bouquet'; groupId: string; items: CartEntry[] }
+  > = []
+  const seenGroups = new Set<string>()
+  entries.forEach((e) => {
+    if (!e.bouquetGroupId) {
+      cartGroups.push({ kind: 'single', entry: e })
+    } else if (!seenGroups.has(e.bouquetGroupId)) {
+      seenGroups.add(e.bouquetGroupId)
+      cartGroups.push({ kind: 'bouquet', groupId: e.bouquetGroupId, items: entries.filter((x) => x.bouquetGroupId === e.bouquetGroupId) })
+    }
+  })
 
+  const cartBody = (
+    <>
+      {entries.length === 0 ? (
+        <p className="has-text-grey has-text-centered" style={{ marginTop: '3rem' }}>
+          Your order is empty.<br />Pick something from the shop!
+        </p>
+      ) : (
+        cartGroups.map((group) => {
+          if (group.kind === 'single') return renderEntry(group.entry)
           const bouquetTotal = group.items.reduce((sum, e) => sum + entryUnitPrice(e) * e.quantity, 0)
           return (
             <div key={group.groupId} style={{ border: '1px solid #b2e0e4', borderRadius: 10, padding: '0.75rem', marginBottom: '0.75rem', background: '#f7fdfd' }}>
@@ -519,7 +517,6 @@ export default function CartDrawer() {
             </div>
           )
         })
-        })()
       )}
     </>
   )