Merge pull request #9 from Llorente29/hubrise-fase2-connect-button

HubRise Fase 2: cablear boton "Conectar a delivery" en la carta

Author: Llorente29

src/modules/kitchen/pages/KitchenMenuPage.tsx

@@ -14,7 +14,7 @@
 // Patrón: useApp() + useActiveAccount() + useIsMobile(), igual que KitchenItemsPage.
 
 import { useEffect, useMemo, useState } from 'react'
-import { Search, ChevronDown, ChevronRight, CircleDashed, CheckCircle2, AlertTriangle, UtensilsCrossed, Package, Link2Off, Plus, FolderPlus, ArrowRightLeft, X, Undo2, Info, ArrowUp, ArrowDown, Trash2, UploadCloud, Loader2, Sparkles, PackagePlus } from 'lucide-react'
+import { Search, ChevronDown, ChevronRight, CircleDashed, CheckCircle2, AlertTriangle, UtensilsCrossed, Package, Link2Off, Link2, Plus, FolderPlus, ArrowRightLeft, X, Undo2, Info, ArrowUp, ArrowDown, Trash2, UploadCloud, Loader2, Sparkles, PackagePlus } from 'lucide-react'
 import { useActiveAccount } from '@/modules/multitenancy/hooks/useActiveAccount'
 import {
   listBrandsWithCatalog,
@@ -34,6 +34,7 @@ import NewCategoryModal from '@/modules/kitchen/components/NewCategoryModal'
 import type { MenuItemEconomics } from '@/types/kitchen'
 import { publishBrandCatalog, type PublishResult } from '@/modules/kitchen/services/catalogPublishService'
 import PublishStatusChip from '@/modules/kitchen/components/PublishStatusChip'
+import { connectBrandToDelivery, type ConnectResult } from '@/modules/kitchen/services/hubriseBrandConnectService'
 
 function formatEur(value: number | null): string {
   if (value === null || value === undefined) return '—'
@@ -80,6 +81,8 @@ export default function KitchenMenuPage() {
   const [publishing, setPublishing] = useState(false)
   const [publishResult, setPublishResult] = useState<PublishResult | null>(null)
   const [publishStatusKey, setPublishStatusKey] = useState(0)
+  const [connecting, setConnecting] = useState(false)
+  const [connectResult, setConnectResult] = useState<ConnectResult | null>(null)
 
   // Cargar marcas con catálogo
   useEffect(() => {
@@ -242,6 +245,24 @@ export default function KitchenMenuPage() {
     }
   }
 
+  // ── Conectar la marca a delivery (Fase 2, self-service) ───────────────────
+  // Crea/reusa el catálogo HubRise por local (sin bridge) y publica la carta.
+  async function handleConnect() {
+    if (!selectedBrand || connecting) return
+    setConnecting(true)
+    setConnectResult(null)
+    setError(null)
+    try {
+      const res = await connectBrandToDelivery(selectedBrand.id)
+      setConnectResult(res)
+      setPublishStatusKey((k) => k + 1)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setConnecting(false)
+    }
+  }
+
   // ── Capa 1: organizar la carta (mover/recategorizar) ──────────────────────
 
   // Categoría actual de cada producto (para poder deshacer un movimiento).
@@ -508,6 +529,17 @@ export default function KitchenMenuPage() {
             {selectedBrand.catalogSource === 'folvy' && activeAccountId && (
               <PublishStatusChip accountId={activeAccountId} brandId={selectedBrand.id} refreshKey={publishStatusKey} />
             )}
+            {selectedBrand.catalogSource === 'folvy' && (
+              <button
+                onClick={handleConnect}
+                disabled={connecting}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+                title="Crear/reusar el catálogo de esta marca en HubRise y publicar la carta (sin bridge)"
+              >
+                {connecting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Link2 className="w-4 h-4" />}
+                {connecting ? 'Conectando…' : 'Conectar a delivery'}
+              </button>
+            )}
             {selectedBrand.catalogSource === 'folvy' && (
               <button
                 onClick={handlePublish}
@@ -888,6 +920,68 @@ export default function KitchenMenuPage() {
         </div>
       )}
 
+      {connectResult && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => setConnectResult(null)}>
+          <div className="bg-white rounded-xl shadow-lg w-full max-w-lg border border-gray-200" onClick={(e) => e.stopPropagation()}>
+            <div className="px-5 py-3.5 border-b border-gray-200 flex items-center gap-2">
+              {connectResult.ok
+                ? <CheckCircle2 className="w-5 h-5 text-green-600" />
+                : <AlertTriangle className="w-5 h-5 text-red-600" />}
+              <h3 className="text-base font-medium text-gray-900">
+                {connectResult.ok ? 'Marca conectada a delivery' : 'No se pudo conectar'}
+              </h3>
+            </div>
+            <div className="px-5 py-4 text-sm text-gray-700 space-y-3 max-h-[60vh] overflow-auto">
+              {connectResult.error && <p className="text-red-700">{connectResult.error}</p>}
+              {connectResult.locations.length > 0 && (
+                <div>
+                  <div className="text-xs font-medium text-gray-500 mb-1">Por local</div>
+                  <ul className="space-y-1">
+                    {connectResult.locations.map((l, i) => (
+                      <li key={i} className="flex items-start gap-2">
+                        {l.status === 'error'
+                          ? <AlertTriangle className="w-4 h-4 text-red-600 mt-0.5 shrink-0" />
+                          : <CheckCircle2 className="w-4 h-4 text-green-600 mt-0.5 shrink-0" />}
+                        <span>
+                          <span className="font-medium">{l.location_name}</span>
+                          {' · '}
+                          {l.status === 'ya_conectada' && 'ya conectada'}
+                          {l.status === 'creada' && 'catálogo creado'}
+                          {l.status === 'reusada_por_nombre' && 'catálogo reusado'}
+                          {l.status === 'error' && 'error'}
+                          {l.external_catalog_id && (
+                            <span className="text-gray-400"> ({l.external_catalog_id})</span>
+                          )}
+                          {l.status === 'error' && l.error && (
+                            <span className="block text-xs text-red-600">{l.error}</span>
+                          )}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              {connectResult.publish && (
+                <div>
+                  <div className="text-xs font-medium text-gray-500 mb-1">Publicación de la carta</div>
+                  {connectResult.publish.ok ? (
+                    <p className="text-gray-600">
+                      {connectResult.publish.products ?? 0} producto{(connectResult.publish.products ?? 0) === 1 ? '' : 's'} · {connectResult.publish.deals ?? 0} combo{(connectResult.publish.deals ?? 0) === 1 ? '' : 's'}
+                    </p>
+                  ) : (
+                    <p className="text-red-700">{connectResult.publish.error ?? 'No se pudo publicar la carta.'}</p>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-gray-200 bg-gray-50 rounded-b-xl">
+              <button onClick={() => setConnectResult(null)}
+                className="px-3.5 py-1.5 text-sm rounded-lg font-medium bg-accent text-text-on-accent hover:opacity-90">Entendido</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showNewCategory && activeAccountId && selectedBrand && (
         <NewCategoryModal
           accountId={activeAccountId}

src/modules/kitchen/services/hubriseBrandConnectService.ts

@@ -0,0 +1,61 @@
+// src/modules/kitchen/services/hubriseBrandConnectService.ts
+//
+// Servicio del ASISTENTE "Conectar a delivery" (front -> Edge
+// hubrise-brand-connect). El Edge hace el trabajo (crear/reusar catálogo por
+// local con el token escritor, guardar brand_hubrise_catalog, publicar la
+// carta reusando hubrise-catalog-publish). Aquí solo invocamos y normalizamos
+// el resultado. La sesión del usuario viaja sola en functions.invoke (su JWT).
+//
+// El Edge devuelve 200 también en fallos de negocio (sin token escritor, sin
+// locales HubRise), con { ok:false, error }, para que la UI los muestre sin
+// tratarlos como errores de red.
+
+import { supabase, isSupabaseEnabled } from '../../../lib/supabase'
+import type { PublishResult } from './catalogPublishService'
+
+export interface ConnectLocationResult {
+  location_id: string
+  external_location_id: string
+  location_name: string
+  status: 'ya_conectada' | 'reusada_por_nombre' | 'creada' | 'error'
+  external_catalog_id?: string
+  error?: string
+}
+
+export interface ConnectResult {
+  ok: boolean
+  error?: string
+  locations: ConnectLocationResult[]
+  publish: Partial<PublishResult> | null
+}
+
+export async function connectBrandToDelivery(brandId: string): Promise<ConnectResult> {
+  if (!isSupabaseEnabled || !supabase) {
+    throw new Error('Supabase no está configurado.')
+  }
+
+  const { data, error } = await supabase.functions.invoke('hubrise-brand-connect', {
+    body: { brand_id: brandId },
+  })
+
+  // Error de transporte / no-2xx (auth, crash). Intentamos leer el cuerpo si lo hay.
+  if (error) {
+    let msg = error.message ?? 'Error conectando la marca a delivery.'
+    try {
+      const ctx = (error as unknown as { context?: Response }).context
+      if (ctx && typeof ctx.json === 'function') {
+        const j = await ctx.json()
+        if (j?.error) msg = j.error
+      }
+    } catch { /* ignore */ }
+    return { ok: false, error: msg, locations: [], publish: null }
+  }
+
+  const d = (data ?? {}) as Partial<ConnectResult>
+  return {
+    ok: d.ok === true,
+    error: d.error,
+    locations: d.locations ?? [],
+    publish: d.publish ?? null,
+  }
+}