feat: add banner builder with product search and canvas rendering

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

src/app/(dashboard)/bannieres/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Header } from '@/components/layout/Header'
+import { BannerBuilder } from '@/components/bannieres/BannerBuilder'
 import type { SlideshowSection, Slide } from '@/lib/shopifyTheme'
 
 // Convertit "shopify://shop_images/foo.jpg" → URL CDN prévisualisable via proxy
@@ -28,9 +29,10 @@ interface SlideCardProps {
   onRemove: () => void
   onChangeImage: (shopifyRef: string) => void
   onChangeLink: (link: string) => void
+  onOpenBuilder: () => void
 }
 
-function SlideCard({ slide, index, total, onMoveUp, onMoveDown, onRemove, onChangeImage, onChangeLink }: SlideCardProps) {
+function SlideCard({ slide, index, total, onMoveUp, onMoveDown, onRemove, onChangeImage, onChangeLink, onOpenBuilder }: SlideCardProps) {
   const fileRef = useRef<HTMLInputElement>(null)
   const [uploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -94,12 +96,19 @@ function SlideCard({ slide, index, total, onMoveUp, onMoveDown, onRemove, onChan
 
         {/* Actions */}
         <div className="flex gap-1.5 flex-wrap">
+          <button
+            onClick={onOpenBuilder}
+            className="flex-1 py-1.5 text-xs bg-purple-700 hover:bg-purple-600 text-white rounded font-medium"
+          >
+            🎨 Créer une bannière
+          </button>
           <button
             onClick={() => fileRef.current?.click()}
             disabled={uploading}
-            className="flex-1 py-1.5 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded font-medium disabled:opacity-50"
+            className="py-1.5 px-2 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded font-medium disabled:opacity-50"
+            title="Uploader une image"
           >
-            {uploading ? '⬆️ Upload…' : '🖼️ Changer l\'image'}
+            {uploading ? '…' : '🖼️'}
           </button>
           <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleFile} />
           <button
@@ -132,6 +141,8 @@ export default function BannièresPage() {
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  // Index de la slide cible du builder (-1 = nouvelle slide)
+  const [builderTargetIndex, setBuilderTargetIndex] = useState<number | null>(null)
 
   useEffect(() => {
     fetch('/api/theme/slideshow')
@@ -263,12 +274,24 @@ export default function BannièresPage() {
                   onRemove={() => removeSlide(i)}
                   onChangeImage={ref => changeImage(i, ref)}
                   onChangeLink={link => changeLink(i, link)}
+                  onOpenBuilder={() => setBuilderTargetIndex(i)}
                 />
               ))}
             </div>
           </div>
         )}
       </div>
+
+      {builderTargetIndex !== null && (
+        <BannerBuilder
+          onApply={shopifyRef => {
+            if (builderTargetIndex !== null) changeImage(builderTargetIndex, shopifyRef)
+            setBuilderTargetIndex(null)
+            setSaved(false)
+          }}
+          onClose={() => setBuilderTargetIndex(null)}
+        />
+      )}
     </>
   )
 }

src/app/api/theme/product-banner-data/route.ts

@@ -0,0 +1,86 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const API_VERSION = '2024-01'
+
+function getShopifyConfig() {
+  const domain = process.env.SHOPIFY_STORE_DOMAIN
+  const token = process.env.SHOPIFY_ADMIN_API_TOKEN
+  if (!domain || !token) throw new Error('Config Shopify manquante')
+  return {
+    baseUrl: `https://${domain}/admin/api/${API_VERSION}`,
+    headers: { 'X-Shopify-Access-Token': token, 'Content-Type': 'application/json' },
+  }
+}
+
+export interface BannerProductData {
+  id: string
+  title: string
+  price: string
+  compareAtPrice: string | null
+  sku: string
+  imageUrl: string | null
+  allImages: string[]
+}
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url)
+  const ref = searchParams.get('ref')
+  const id = searchParams.get('id')
+
+  try {
+    const { baseUrl, headers } = getShopifyConfig()
+
+    let product: Record<string, unknown> | null = null
+
+    if (id) {
+      const res = await fetch(`${baseUrl}/products/${id}.json?fields=id,title,variants,images`, { headers })
+      if (res.ok) {
+        const data = await res.json()
+        product = data.product
+      }
+    } else if (ref) {
+      // Recherche par SKU via GraphQL
+      const graphqlUrl = baseUrl.replace('/admin/api/', '/admin/api/').replace('products', '').replace(/\/$/, '') + '/../graphql.json'
+      const domain = process.env.SHOPIFY_STORE_DOMAIN
+      const gqlRes = await fetch(`https://${domain}/admin/api/${API_VERSION}/graphql.json`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+          query: `{ productVariants(first: 5, query: "sku:${ref.replace(/"/g, '')}") {
+            edges { node { sku product { id legacyResourceId title } } }
+          } }`,
+        }),
+      })
+      const gqlData = await gqlRes.json()
+      const edges = gqlData?.data?.productVariants?.edges ?? []
+      const match = edges.find((e: { node: { sku: string } }) =>
+        e.node.sku.toLowerCase() === ref.toLowerCase()
+      )
+      if (match) {
+        const legacyId = match.node.product.legacyResourceId
+        const res = await fetch(`${baseUrl}/products/${legacyId}.json?fields=id,title,variants,images`, { headers })
+        if (res.ok) product = (await res.json()).product
+      }
+    }
+
+    if (!product) return NextResponse.json({ error: 'Produit introuvable' }, { status: 404 })
+
+    const variants = product.variants as Array<{ price: string; compare_at_price: string | null; sku: string }>
+    const images = product.images as Array<{ src: string }>
+    const variant = variants[0]
+
+    const result: BannerProductData = {
+      id: String(product.id),
+      title: product.title as string,
+      price: variant?.price ?? '',
+      compareAtPrice: variant?.compare_at_price ?? null,
+      sku: variant?.sku ?? '',
+      imageUrl: images[0]?.src ?? null,
+      allImages: images.map(i => i.src),
+    }
+
+    return NextResponse.json(result)
+  } catch (err) {
+    return NextResponse.json({ error: (err as Error).message }, { status: 500 })
+  }
+}