feat: add bannières page to manage Shopify homepage slideshow

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

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

@@ -0,0 +1,275 @@
+'use client'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Header } from '@/components/layout/Header'
+import type { SlideshowSection, Slide } from '@/lib/shopifyTheme'
+import { randomUUID } from 'crypto'
+
+// Convertit "shopify://shop_images/foo.jpg" → URL CDN prévisualisable via proxy
+function shopifyRefToProxyUrl(ref: string): string {
+  if (!ref) return ''
+  const filename = ref.replace('shopify://shop_images/', '')
+  return `/api/images/proxy?url=${encodeURIComponent(`https://cdn.shopify.com/s/files/1/0897/7373/6263/files/${filename}`)}`
+}
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve((reader.result as string).split(',')[1])
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+
+interface SlideCardProps {
+  slide: Slide
+  index: number
+  total: number
+  onMoveUp: () => void
+  onMoveDown: () => void
+  onRemove: () => void
+  onChangeImage: (shopifyRef: string) => void
+  onChangeLink: (link: string) => void
+}
+
+function SlideCard({ slide, index, total, onMoveUp, onMoveDown, onRemove, onChangeImage, onChangeLink }: SlideCardProps) {
+  const fileRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setUploading(true)
+    setError(null)
+    try {
+      const base64 = await blobToBase64(file)
+      const res = await fetch('/api/theme/upload-file', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ imageBase64: base64, filename: file.name }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error)
+      onChangeImage(data.shopifyRef)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setUploading(false)
+      e.target.value = ''
+    }
+  }
+
+  const previewUrl = shopifyRefToProxyUrl(slide.settings.image)
+
+  return (
+    <div className="bg-slate-800 border border-slate-700 rounded-xl overflow-hidden">
+      {/* Image preview */}
+      <div className="relative h-44 bg-slate-900">
+        {previewUrl ? (
+          <img src={previewUrl} alt={`Slide ${index + 1}`} className="w-full h-full object-cover" />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-slate-600 text-sm">
+            Aucune image
+          </div>
+        )}
+        <div className="absolute top-2 left-2 bg-black/60 text-white text-xs px-2 py-0.5 rounded-full">
+          {index + 1} / {total}
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="p-3 space-y-2">
+        {/* Link */}
+        <div>
+          <label className="block text-xs text-slate-400 mb-1">Lien (optionnel)</label>
+          <input
+            type="text"
+            value={slide.settings.link ?? ''}
+            onChange={e => onChangeLink(e.target.value)}
+            placeholder="https://…"
+            className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          />
+        </div>
+
+        {error && <p className="text-xs text-red-400">{error}</p>}
+
+        {/* Actions */}
+        <div className="flex gap-1.5 flex-wrap">
+          <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"
+          >
+            {uploading ? '⬆️ Upload…' : '🖼️ Changer l\'image'}
+          </button>
+          <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleFile} />
+          <button
+            onClick={onMoveUp}
+            disabled={index === 0}
+            className="py-1.5 px-2 text-xs bg-slate-700 hover:bg-slate-600 text-slate-300 rounded disabled:opacity-30"
+            title="Monter"
+          >↑</button>
+          <button
+            onClick={onMoveDown}
+            disabled={index === total - 1}
+            className="py-1.5 px-2 text-xs bg-slate-700 hover:bg-slate-600 text-slate-300 rounded disabled:opacity-30"
+            title="Descendre"
+          >↓</button>
+          <button
+            onClick={onRemove}
+            className="py-1.5 px-2 text-xs bg-slate-700 hover:bg-red-900 text-slate-400 hover:text-red-300 rounded"
+            title="Supprimer"
+          >✕</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function BannièresPage() {
+  const [slideshow, setSlideshow] = useState<SlideshowSection | null>(null)
+  const [themeId, setThemeId] = useState<string>('')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch('/api/theme/slideshow')
+      .then(r => r.json())
+      .then(d => {
+        if (d.error) throw new Error(d.error)
+        setSlideshow(d.slideshow)
+        setThemeId(d.themeId)
+      })
+      .catch(e => setError(e.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const update = useCallback((fn: (s: SlideshowSection) => SlideshowSection) => {
+    setSlideshow(prev => prev ? fn(prev) : prev)
+    setSaved(false)
+  }, [])
+
+  const moveSlide = (index: number, dir: -1 | 1) => {
+    update(s => {
+      const slides = [...s.slides]
+      const tmp = slides[index]
+      slides[index] = slides[index + dir]
+      slides[index + dir] = tmp
+      return { ...s, slides }
+    })
+  }
+
+  const removeSlide = (index: number) => {
+    update(s => ({ ...s, slides: s.slides.filter((_, i) => i !== index) }))
+  }
+
+  const addSlide = () => {
+    update(s => ({
+      ...s,
+      slides: [...s.slides, {
+        blockId: `slide_${Math.random().toString(36).slice(2, 8)}`,
+        settings: { image: '', link: '' },
+      }],
+    }))
+  }
+
+  const changeImage = (index: number, shopifyRef: string) => {
+    update(s => {
+      const slides = s.slides.map((sl, i) =>
+        i === index ? { ...sl, settings: { ...sl.settings, image: shopifyRef } } : sl
+      )
+      return { ...s, slides }
+    })
+  }
+
+  const changeLink = (index: number, link: string) => {
+    update(s => {
+      const slides = s.slides.map((sl, i) =>
+        i === index ? { ...sl, settings: { ...sl.settings, link } } : sl
+      )
+      return { ...s, slides }
+    })
+  }
+
+  const save = async () => {
+    if (!slideshow) return
+    setSaving(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/theme/slideshow', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ slideshow, themeId }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error)
+      setSaved(true)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <>
+      <Header
+        title="Bannières homepage"
+        actions={
+          <div className="flex items-center gap-3">
+            {saved && <span className="text-xs text-green-400">✓ Publié sur Shopify</span>}
+            {error && <span className="text-xs text-red-400">{error}</span>}
+            <button
+              onClick={addSlide}
+              disabled={!slideshow}
+              className="px-3 py-1.5 text-xs bg-slate-700 hover:bg-slate-600 text-white rounded font-medium disabled:opacity-40"
+            >
+              + Ajouter une slide
+            </button>
+            <button
+              onClick={save}
+              disabled={!slideshow || saving}
+              className="px-4 py-1.5 text-xs bg-green-700 hover:bg-green-600 text-white rounded font-medium disabled:opacity-40"
+            >
+              {saving ? 'Publication…' : '🚀 Publier sur Shopify'}
+            </button>
+          </div>
+        }
+      />
+      <div className="p-6">
+        {loading && (
+          <div className="text-center py-12 text-slate-500 text-sm">Chargement du thème…</div>
+        )}
+        {!loading && !slideshow && (
+          <div className="text-center py-12 text-red-400 text-sm">
+            Section slideshow-custom introuvable dans le thème actif.
+          </div>
+        )}
+        {slideshow && (
+          <div className="space-y-4">
+            <p className="text-xs text-slate-500">
+              {slideshow.slides.length} slide{slideshow.slides.length > 1 ? 's' : ''} · Thème actif (Meka)
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {slideshow.slides.map((slide, i) => (
+                <SlideCard
+                  key={slide.blockId}
+                  slide={slide}
+                  index={i}
+                  total={slideshow.slides.length}
+                  onMoveUp={() => moveSlide(i, -1)}
+                  onMoveDown={() => moveSlide(i, 1)}
+                  onRemove={() => removeSlide(i)}
+                  onChangeImage={ref => changeImage(i, ref)}
+                  onChangeLink={link => changeLink(i, link)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

src/app/api/theme/slideshow/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server'
+import {
+  getActiveThemeId,
+  getHomepageTemplate,
+  extractSlideshow,
+  applySlideshow,
+  saveHomepageTemplate,
+} from '@/lib/shopifyTheme'
+import type { SlideshowSection } from '@/lib/shopifyTheme'
+
+export async function GET() {
+  try {
+    const themeId = await getActiveThemeId()
+    const template = await getHomepageTemplate(themeId)
+    const slideshow = extractSlideshow(template)
+    if (!slideshow) return NextResponse.json({ error: 'Section slideshow-custom introuvable' }, { status: 404 })
+    return NextResponse.json({ slideshow, themeId })
+  } catch (err) {
+    return NextResponse.json({ error: (err as Error).message }, { status: 500 })
+  }
+}
+
+export async function PUT(req: NextRequest) {
+  try {
+    const body = await req.json() as { slideshow: SlideshowSection; themeId: string }
+    const template = await getHomepageTemplate(body.themeId)
+    const updated = applySlideshow(template, body.slideshow)
+    await saveHomepageTemplate(body.themeId, updated)
+    return NextResponse.json({ ok: true })
+  } catch (err) {
+    return NextResponse.json({ error: (err as Error).message }, { status: 500 })
+  }
+}

src/app/api/theme/upload-file/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { uploadFileToShopify } from '@/lib/shopifyTheme'
+
+export async function POST(req: NextRequest) {
+  try {
+    const { imageBase64, filename } = await req.json() as { imageBase64: string; filename: string }
+    if (!imageBase64 || !filename) {
+      return NextResponse.json({ error: 'imageBase64 et filename requis' }, { status: 400 })
+    }
+    const shopifyRef = await uploadFileToShopify(imageBase64, filename)
+    return NextResponse.json({ shopifyRef })
+  } catch (err) {
+    return NextResponse.json({ error: (err as Error).message }, { status: 500 })
+  }
+}

src/components/layout/Sidebar.tsx

@@ -17,6 +17,7 @@ const NAV_ITEMS: NavItem[] = [
   { href: '/sync',       label: 'Sync Sheets',  icon: '🔄' },
   { href: '/creation',   label: 'Création',     icon: '✨' },
   { href: '/mockup',     label: 'Mockups',      icon: '🖼️' },
+  { href: '/bannieres',  label: 'Bannières',    icon: '🎨' },
   { href: '/parametres', label: 'Paramètres',   icon: '⚙️', adminOnly: true },
 ]
 

src/lib/shopifyTheme.ts

@@ -0,0 +1,211 @@
+const API_VERSION = '2024-01'
+
+function getConfig() {
+  const domain = process.env.SHOPIFY_STORE_DOMAIN
+  const token = process.env.SHOPIFY_ADMIN_API_TOKEN
+  if (!domain || !token) throw new Error('SHOPIFY_STORE_DOMAIN et SHOPIFY_ADMIN_API_TOKEN requis')
+  return {
+    baseUrl: `https://${domain}/admin/api/${API_VERSION}`,
+    graphqlUrl: `https://${domain}/admin/api/${API_VERSION}/graphql.json`,
+    headers: { 'X-Shopify-Access-Token': token, 'Content-Type': 'application/json' },
+  }
+}
+
+export interface SlideSettings {
+  image: string  // "shopify://shop_images/filename.jpg"
+  link?: string
+}
+
+export interface Slide {
+  blockId: string
+  settings: SlideSettings
+}
+
+export interface SlideshowSection {
+  sectionId: string
+  slides: Slide[]
+  blockOrder: string[]
+  sectionSettings: Record<string, unknown>
+}
+
+// ── Trouver le thème actif ────────────────────────────────────────────────────
+
+export async function getActiveThemeId(): Promise<string> {
+  const { baseUrl, headers } = getConfig()
+  const res = await fetch(`${baseUrl}/themes.json`, { headers })
+  const data = await res.json()
+  const main = (data.themes as Array<{ id: number; role: string }>).find(t => t.role === 'main')
+  if (!main) throw new Error('Aucun thème actif trouvé')
+  return String(main.id)
+}
+
+// ── Lire le template homepage ─────────────────────────────────────────────────
+
+export async function getHomepageTemplate(themeId: string): Promise<Record<string, unknown>> {
+  const { baseUrl, headers } = getConfig()
+  const url = `${baseUrl}/themes/${themeId}/assets.json?asset%5Bkey%5D=templates%2Findex.json`
+  const res = await fetch(url, { headers })
+  const data = await res.json()
+  const value = (data.asset as { value: string }).value
+  return JSON.parse(value)
+}
+
+// ── Écrire le template homepage ───────────────────────────────────────────────
+
+export async function saveHomepageTemplate(
+  themeId: string,
+  template: Record<string, unknown>,
+): Promise<void> {
+  const { baseUrl, headers } = getConfig()
+  const res = await fetch(`${baseUrl}/themes/${themeId}/assets.json`, {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify({ asset: { key: 'templates/index.json', value: JSON.stringify(template, null, 2) } }),
+  })
+  if (!res.ok) {
+    const body = await res.text()
+    throw new Error(`Shopify theme write error: ${res.status} — ${body}`)
+  }
+}
+
+// ── Extraire le slideshow depuis le template ──────────────────────────────────
+
+export function extractSlideshow(template: Record<string, unknown>): SlideshowSection | null {
+  const sections = template.sections as Record<string, unknown>
+  if (!sections) return null
+
+  const entry = Object.entries(sections).find(([, v]) => {
+    const sec = v as Record<string, unknown>
+    return typeof sec.type === 'string' && sec.type.includes('slideshow-custom')
+  })
+  if (!entry) return null
+
+  const [sectionId, sec] = entry
+  const section = sec as Record<string, unknown>
+  const blocks = section.blocks as Record<string, { type: string; settings: SlideSettings }>
+  const blockOrder = section.block_order as string[]
+
+  const slides: Slide[] = (blockOrder ?? [])
+    .filter(id => blocks[id]?.type === 'slide')
+    .map(id => ({ blockId: id, settings: blocks[id].settings }))
+
+  return {
+    sectionId,
+    slides,
+    blockOrder: blockOrder ?? [],
+    sectionSettings: (section.settings as Record<string, unknown>) ?? {},
+  }
+}
+
+// ── Mettre à jour les slides dans le template ─────────────────────────────────
+
+export function applySlideshow(
+  template: Record<string, unknown>,
+  slideshow: SlideshowSection,
+): Record<string, unknown> {
+  const sections = { ...(template.sections as Record<string, unknown>) }
+  const existing = sections[slideshow.sectionId] as Record<string, unknown>
+
+  const blocks: Record<string, unknown> = {}
+  for (const slide of slideshow.slides) {
+    blocks[slide.blockId] = { type: 'slide', settings: slide.settings }
+  }
+
+  sections[slideshow.sectionId] = {
+    ...existing,
+    blocks,
+    block_order: slideshow.slides.map(s => s.blockId),
+    settings: slideshow.sectionSettings,
+  }
+
+  return { ...template, sections }
+}
+
+// ── Uploader une image dans Shopify Files et retourner la ref shopify:// ──────
+
+export async function uploadFileToShopify(
+  imageBase64: string,
+  filename: string,
+): Promise<string> {
+  const { graphqlUrl, headers } = getConfig()
+
+  // 1. Créer un staged upload
+  const stageRes = await fetch(graphqlUrl, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      query: `mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
+        stagedUploadsCreate(input: $input) {
+          stagedTargets {
+            url
+            resourceUrl
+            parameters { name value }
+          }
+          userErrors { field message }
+        }
+      }`,
+      variables: {
+        input: [{
+          filename,
+          mimeType: 'image/jpeg',
+          resource: 'FILE',
+          fileSize: String(Math.ceil(imageBase64.length * 0.75)),
+          httpMethod: 'POST',
+        }],
+      },
+    }),
+  })
+  const stageData = await stageRes.json()
+  const target = stageData?.data?.stagedUploadsCreate?.stagedTargets?.[0]
+  if (!target) throw new Error('Staged upload échoué')
+
+  // 2. Uploader le fichier vers l'URL staging
+  const binaryStr = atob(imageBase64)
+  const bytes = new Uint8Array(binaryStr.length)
+  for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
+  const blob = new Blob([bytes], { type: 'image/jpeg' })
+
+  const form = new FormData()
+  for (const { name, value } of target.parameters as Array<{ name: string; value: string }>) {
+    form.append(name, value)
+  }
+  form.append('file', blob, filename)
+
+  const uploadRes = await fetch(target.url, { method: 'POST', body: form })
+  if (!uploadRes.ok) throw new Error(`Upload staging échoué: ${uploadRes.status}`)
+
+  // 3. Enregistrer le fichier dans Shopify Files
+  const createRes = await fetch(graphqlUrl, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      query: `mutation fileCreate($files: [FileCreateInput!]!) {
+        fileCreate(files: $files) {
+          files {
+            ... on MediaImage {
+              id
+              image { url }
+            }
+          }
+          userErrors { field message }
+        }
+      }`,
+      variables: {
+        files: [{ originalSource: target.resourceUrl, contentType: 'IMAGE' }],
+      },
+    }),
+  })
+  const createData = await createRes.json()
+  const fileUrl = createData?.data?.fileCreate?.files?.[0]?.image?.url as string | undefined
+
+  if (!fileUrl) {
+    // Fallback: construire la ref depuis le resourceUrl
+    const resourceUrl = target.resourceUrl as string
+    const fname = resourceUrl.split('/').pop()?.split('?')[0] ?? filename
+    return `shopify://shop_images/${fname}`
+  }
+
+  // Extraire le nom de fichier depuis l'URL CDN
+  const cdnFilename = fileUrl.split('/files/')[1]?.split('?')[0] ?? filename
+  return `shopify://shop_images/${cdnFilename}`
+}