@fayz-ai/plugin-shop 0.8.3 → 0.8.4

package/package.json

@@ -3,7 +3,7 @@
   "fayz": {
     "status": "preview"
   },
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "[experimental] Fayz SDK — plugin-shop plugin",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -29,10 +29,10 @@
     "@tanstack/react-table": "^8.20.0",
     "lucide-react": "^0.400.0",
     "zustand": "^4.5.0",
-    "@fayz-ai/core": "^0.8.3",
-    "@fayz-ai/saas": "^0.8.3",
-    "@fayz-ai/shop": "^0.8.3",
-    "@fayz-ai/ui": "^0.8.3"
+    "@fayz-ai/core": "^0.8.4",
+    "@fayz-ai/saas": "^0.8.4",
+    "@fayz-ai/ui": "^0.8.4",
+    "@fayz-ai/shop": "^0.8.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/ShopPage.tsx

@@ -191,7 +191,7 @@ function OrdersTab({ provider }: ShopPageProps) {
             personId={id}
             name={label}
             lookup={shopCustomerLookup(() => resolveShopProvider(provider))}
-            profileHref={`#/shop/customers/${id}`}
+            profileHref={`#/customers/${id}`}
           />
         )
       },

package/src/index.ts

@@ -12,6 +12,7 @@ import { createShopDiscountDataProvider } from './data/discountDataProvider'
 import { createShopShippingZoneDataProvider } from './data/shippingZoneDataProvider'
 import type { ShopProviderResolver } from './ShopPage'
 import { ShopSettings } from './components/ShopSettings'
+import { ChannelsPage } from './views/ChannelsPage'
 
 const ShopPage = React.lazy(() => import('./ShopPage').then((m) => ({ default: m.ShopPage })))
 
@@ -45,7 +46,8 @@ export function createShopPlugin(options?: ShopPluginOptions): PluginManifest {
   // Teach the shared person-path registry where a SHOP customer lives. The
   // built-in map ships veterinary defaults (customer → /registry/tutors), so
   // without this PersonLink would resolve a shop customer to the wrong module.
-  registerEntityPath('shop_customer', '/shop/customers')
+  // Clientes now lives at the top level (/customers), out of the Loja accordion.
+  registerEntityPath('shop_customer', '/customers')
 
   type ShopSection = 'products' | 'orders' | 'customers' | 'discounts' | 'shipping'
 
@@ -102,14 +104,25 @@ export function createShopPlugin(options?: ShopPluginOptions): PluginManifest {
     shipping: ShippingZonesCrudPage as React.ComponentType<unknown>,
   }
 
+  // "Clientes" is intentionally NOT here: it moved out of the Loja accordion to
+  // a top-level nav item (/customers), registered separately below. The shell
+  // nests by route prefix, so a route under /shop is what put it inside "Loja".
   const SECTIONS: Array<{ id: ShopSection; label: string; icon: string }> = [
     { id: 'products',  label: options?.sectionLabels?.products  ?? 'Produtos',  icon: 'Package' },
     { id: 'orders',    label: options?.sectionLabels?.orders    ?? 'Pedidos',   icon: 'ShoppingCart' },
-    { id: 'customers', label: options?.sectionLabels?.customers ?? 'Clientes',  icon: 'Users' },
     { id: 'discounts', label: options?.sectionLabels?.discounts ?? 'Descontos', icon: 'Tag' },
     { id: 'shipping',  label: options?.sectionLabels?.shipping  ?? 'Entrega',   icon: 'Truck' },
   ]
 
+  // Standalone Customers page — same CRUD component, now at /customers so it
+  // reads as its own top-level destination instead of a Loja sub-tab.
+  const CustomersNavLabel = options?.sectionLabels?.customers ?? 'Clientes'
+
+  // Canais de venda — wraps the ChannelsPage with the app's shop provider.
+  const ChannelsPageWrapped: React.ComponentType<unknown> = () =>
+    React.createElement(ChannelsPage, { resolveProvider: options?.provider })
+  ChannelsPageWrapped.displayName = 'ChannelsPage'
+
   const navSection = options?.navSection ?? 'main'
   const navPosition = options?.navPosition ?? 6
 
@@ -144,6 +157,26 @@ export function createShopPlugin(options?: ShopPluginOptions): PluginManifest {
         icon: s.icon,
         permission: { feature: 'shop', action: 'read' as const },
       })),
+      // Clientes — top-level (route not under /shop, so it leaves the accordion).
+      // Fractional position keeps it right below "Loja", above other plugins.
+      {
+        section: navSection,
+        position: navPosition + 0.5,
+        label: CustomersNavLabel,
+        route: '/customers',
+        icon: 'Users',
+        permission: { feature: 'shop', action: 'read' as const },
+      },
+      // Canais de venda — inside the "Loja" group (route under /shop nests it in
+      // the accordion). The store's points of sale (Loja Online, WhatsApp, …).
+      {
+        section: navSection,
+        position: navPosition + SECTIONS.length + 1,
+        label: 'Canais de venda',
+        route: '/shop/channels',
+        icon: 'Radio',
+        permission: { feature: 'shop', action: 'read' as const },
+      },
     ],
     routes: [
       {
@@ -157,6 +190,18 @@ export function createShopPlugin(options?: ShopPluginOptions): PluginManifest {
         component: CRUD_PAGES[s.id] ?? pageFor(s.id),
         permission: { feature: 'shop', action: 'read' as const },
       })),
+      // Clientes at the top level, same CRUD page as before.
+      {
+        path: '/customers',
+        component: CustomersCrudPage as React.ComponentType<unknown>,
+        permission: { feature: 'shop', action: 'read' as const },
+      },
+      // Canais de venda management page (under the Loja group).
+      {
+        path: '/shop/channels',
+        component: ChannelsPageWrapped,
+        permission: { feature: 'shop', action: 'read' as const },
+      },
     ],
     widgets: [],
     aiTools: [

package/src/views/ChannelsPage.tsx

@@ -0,0 +1,274 @@
+import React from 'react'
+import { Globe, MessageCircle, Camera, Music, ShoppingBag, MapPin, Link2, Plus, ExternalLink, Trash2, Check, X } from 'lucide-react'
+import { Button, Input } from '@fayz-ai/ui'
+import type { ShopProvider, SalesChannel, SalesChannelKind } from '@fayz-ai/shop'
+import { getShopProvider } from '@fayz-ai/shop'
+import type { ShopProviderResolver } from '../ShopPage'
+
+// ---------------------------------------------------------------------------
+// Canais de venda — the store's points of sale, Shopify-style. The online_store
+// channel points at the merchant's fayz storefront; the rest are external links
+// the merchant maintains (WhatsApp, Instagram, TikTok Shop…). Every enabled
+// channel with a URL also surfaces as an external link in the left menu (see
+// the "Canais de venda" nav group), so this page is where they are configured.
+// ---------------------------------------------------------------------------
+
+interface KindMeta {
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  hint: string
+  placeholder: string
+}
+
+const KIND_META: Record<SalesChannelKind, KindMeta> = {
+  online_store: { label: 'Loja Online', icon: Globe, hint: 'Seu storefront fayz — a vitrine pública da loja.', placeholder: 'https://minhaloja.com.br/' },
+  whatsapp:     { label: 'WhatsApp',    icon: MessageCircle, hint: 'Link direto para o WhatsApp Business.', placeholder: 'https://wa.me/5521999999999' },
+  instagram:    { label: 'Instagram',  icon: Camera, hint: 'Perfil ou loja no Instagram.', placeholder: 'https://instagram.com/sualoja' },
+  tiktok_shop:  { label: 'TikTok Shop', icon: Music, hint: 'Sua vitrine no TikTok Shop.', placeholder: 'https://shop.tiktok.com/@sualoja' },
+  marketplace:  { label: 'Marketplace', icon: ShoppingBag, hint: 'Mercado Livre, Amazon, Shopee…', placeholder: 'https://…' },
+  physical:     { label: 'Loja Física', icon: MapPin, hint: 'Endereço ou ponto de venda físico.', placeholder: 'https://maps.google.com/…' },
+  custom:       { label: 'Outro canal', icon: Link2, hint: 'Qualquer outro ponto de venda com um link.', placeholder: 'https://…' },
+}
+
+const ADDABLE_KINDS: SalesChannelKind[] = ['whatsapp', 'instagram', 'tiktok_shop', 'marketplace', 'physical', 'custom']
+
+function resolve(resolver?: ShopProviderResolver): ShopProvider {
+  return typeof resolver === 'function' ? resolver() : resolver ?? getShopProvider()
+}
+
+// Let any runtime nav contributor (e.g. the app's ChannelsNav) refresh the
+// sidebar the moment channels change here, without coupling the two.
+function notifyChannelsChanged() {
+  if (typeof window !== 'undefined') window.dispatchEvent(new Event('fayz:channels-changed'))
+}
+
+export interface ChannelsPageProps {
+  resolveProvider?: ShopProviderResolver
+}
+
+export function ChannelsPage({ resolveProvider }: ChannelsPageProps) {
+  const provider = React.useMemo(() => resolve(resolveProvider), [resolveProvider])
+  const supported = typeof provider.listSalesChannels === 'function'
+
+  const [channels, setChannels] = React.useState<SalesChannel[]>([])
+  const [loading, setLoading] = React.useState(true)
+  const [adding, setAdding] = React.useState<SalesChannelKind | null>(null)
+
+  const reload = React.useCallback(async () => {
+    if (!provider.listSalesChannels) { setLoading(false); return }
+    setLoading(true)
+    try {
+      const rows = await provider.listSalesChannels()
+      // Guarantee a Loja Online row exists so the storefront link is always
+      // configurable — seed one on first visit if the store has none.
+      if (!rows.some((c) => c.kind === 'online_store') && provider.createSalesChannel) {
+        await provider.createSalesChannel({ kind: 'online_store', label: 'Loja Online', enabled: true, position: 0 })
+        setChannels(await provider.listSalesChannels())
+      } else {
+        setChannels(rows)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [provider])
+
+  React.useEffect(() => { void reload() }, [reload])
+
+  const patch = async (id: string, input: Parameters<NonNullable<ShopProvider['updateSalesChannel']>>[1]) => {
+    if (!provider.updateSalesChannel) return
+    const updated = await provider.updateSalesChannel(id, input)
+    setChannels((prev) => prev.map((c) => (c.id === id ? updated : c)))
+    notifyChannelsChanged()
+  }
+
+  const remove = async (id: string) => {
+    if (!provider.deleteSalesChannel) return
+    await provider.deleteSalesChannel(id)
+    setChannels((prev) => prev.filter((c) => c.id !== id))
+    notifyChannelsChanged()
+  }
+
+  const add = async (kind: SalesChannelKind, label: string, url: string) => {
+    if (!provider.createSalesChannel) return
+    const created = await provider.createSalesChannel({ kind, label: label || KIND_META[kind].label, url: url || null, enabled: true, position: channels.length })
+    setChannels((prev) => [...prev, created])
+    setAdding(null)
+    notifyChannelsChanged()
+  }
+
+  if (!supported) {
+    return (
+      <div className="mx-auto max-w-4xl p-6">
+        <h1 className="text-xl font-semibold text-foreground">Canais de venda</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Este provedor de loja ainda não expõe canais de venda.
+        </p>
+      </div>
+    )
+  }
+
+  const online = channels.find((c) => c.kind === 'online_store')
+  const others = channels.filter((c) => c.kind !== 'online_store')
+
+  return (
+    <div className="mx-auto max-w-4xl p-6">
+      <div className="mb-6">
+        <h1 className="text-xl font-semibold text-foreground">Canais de venda</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Onde sua loja vende. A Loja Online é o seu storefront fayz; os demais são links que aparecem no menu lateral.
+        </p>
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Carregando…</p>
+      ) : (
+        <div className="space-y-6">
+          {online && <OnlineStoreCard channel={online} onSave={(url) => patch(online.id, { url })} onToggle={(enabled) => patch(online.id, { enabled })} />}
+
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <h2 className="text-sm font-semibold text-foreground">Outros canais</h2>
+            </div>
+            <div className="space-y-2">
+              {others.map((c) => (
+                <ChannelRow key={c.id} channel={c} onSave={(url) => patch(c.id, { url })} onToggle={(enabled) => patch(c.id, { enabled })} onRemove={() => remove(c.id)} />
+              ))}
+              {others.length === 0 && (
+                <p className="rounded-card border border-dashed border-border p-4 text-sm text-muted-foreground">
+                  Nenhum canal adicional ainda. Adicione WhatsApp, Instagram, TikTok Shop e outros pontos de venda.
+                </p>
+              )}
+            </div>
+
+            {adding ? (
+              <AddChannelForm kind={adding} onCancel={() => setAdding(null)} onAdd={(label, url) => add(adding, label, url)} onKind={setAdding} />
+            ) : (
+              <div className="mt-3 flex flex-wrap gap-2">
+                {ADDABLE_KINDS.map((k) => {
+                  const Icon = KIND_META[k].icon
+                  return (
+                    <Button key={k} variant="outline" size="sm" onClick={() => setAdding(k)}>
+                      <Icon className="mr-1.5 h-3.5 w-3.5" /> {KIND_META[k].label}
+                    </Button>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function OnlineStoreCard({ channel, onSave, onToggle }: { channel: SalesChannel; onSave: (url: string | null) => void; onToggle: (enabled: boolean) => void }) {
+  const [url, setUrl] = React.useState(channel.url ?? '')
+  const dirty = (channel.url ?? '') !== url
+  const meta = KIND_META.online_store
+  return (
+    <div className="rounded-card border border-border bg-card p-5">
+      <div className="flex items-start gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
+          <meta.icon className="h-5 w-5 text-primary" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="font-semibold text-foreground">Loja Online</span>
+            <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${channel.enabled ? 'bg-emerald-100 text-emerald-800' : 'bg-muted text-muted-foreground'}`}>
+              {channel.enabled ? 'Ativa' : 'Inativa'}
+            </span>
+          </div>
+          <p className="mt-0.5 text-sm text-muted-foreground">{meta.hint}</p>
+
+          <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center">
+            <Input value={url} placeholder={meta.placeholder} onChange={(e) => setUrl(e.target.value)} className="flex-1" />
+            <div className="flex gap-2">
+              <Button size="sm" disabled={!dirty} onClick={() => onSave(url.trim() || null)}>Salvar</Button>
+              <Button size="sm" variant="outline" disabled={!channel.url} onClick={() => channel.url && window.open(channel.url, '_blank', 'noopener,noreferrer')}>
+                <ExternalLink className="mr-1.5 h-3.5 w-3.5" /> Ver loja
+              </Button>
+            </div>
+          </div>
+          <div className="mt-3">
+            <button type="button" onClick={() => onToggle(!channel.enabled)} className="text-xs font-medium text-muted-foreground hover:text-foreground">
+              {channel.enabled ? 'Desativar canal' : 'Ativar canal'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ChannelRow({ channel, onSave, onToggle, onRemove }: { channel: SalesChannel; onSave: (url: string | null) => void; onToggle: (enabled: boolean) => void; onRemove: () => void }) {
+  const [url, setUrl] = React.useState(channel.url ?? '')
+  const [editing, setEditing] = React.useState(false)
+  const meta = KIND_META[channel.kind] ?? KIND_META.custom
+  const Icon = meta.icon
+  return (
+    <div className="rounded-card border border-border bg-card p-3">
+      <div className="flex items-center gap-3">
+        <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${channel.enabled ? 'bg-primary/10' : 'bg-muted'}`}>
+          <Icon className={`h-4 w-4 ${channel.enabled ? 'text-primary' : 'text-muted-foreground'}`} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-foreground">{channel.label}</p>
+          {editing ? (
+            <Input value={url} placeholder={meta.placeholder} onChange={(e) => setUrl(e.target.value)} className="mt-1 h-8" />
+          ) : (
+            <p className="truncate text-xs text-muted-foreground">{channel.url || 'Sem link configurado'}</p>
+          )}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {editing ? (
+            <>
+              <Button size="sm" variant="ghost" onClick={() => { onSave(url.trim() || null); setEditing(false) }}><Check className="h-4 w-4" /></Button>
+              <Button size="sm" variant="ghost" onClick={() => { setUrl(channel.url ?? ''); setEditing(false) }}><X className="h-4 w-4" /></Button>
+            </>
+          ) : (
+            <>
+              {channel.url && (
+                <Button size="sm" variant="ghost" onClick={() => window.open(channel.url!, '_blank', 'noopener,noreferrer')}><ExternalLink className="h-4 w-4" /></Button>
+              )}
+              <button type="button" onClick={() => onToggle(!channel.enabled)} title={channel.enabled ? 'Desativar' : 'Ativar'} className={`rounded-full px-2 py-0.5 text-xs font-medium ${channel.enabled ? 'bg-emerald-100 text-emerald-800' : 'bg-muted text-muted-foreground'}`}>
+                {channel.enabled ? 'Ativo' : 'Inativo'}
+              </button>
+              <Button size="sm" variant="ghost" onClick={() => setEditing(true)}>Editar</Button>
+              <Button size="sm" variant="ghost" onClick={onRemove}><Trash2 className="h-4 w-4 text-red-500" /></Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function AddChannelForm({ kind, onKind, onCancel, onAdd }: { kind: SalesChannelKind; onKind: (k: SalesChannelKind) => void; onCancel: () => void; onAdd: (label: string, url: string) => void }) {
+  const meta = KIND_META[kind]
+  const [label, setLabel] = React.useState(meta.label)
+  const [url, setUrl] = React.useState('')
+  React.useEffect(() => { setLabel(KIND_META[kind].label) }, [kind])
+  return (
+    <div className="mt-3 rounded-card border border-border bg-card p-4">
+      <div className="mb-3 flex flex-wrap gap-2">
+        {ADDABLE_KINDS.map((k) => {
+          const Icon = KIND_META[k].icon
+          return (
+            <button key={k} type="button" onClick={() => onKind(k)} className={`flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium ${k === kind ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:text-foreground'}`}>
+              <Icon className="h-3.5 w-3.5" /> {KIND_META[k].label}
+            </button>
+          )
+        })}
+      </div>
+      <p className="mb-2 text-xs text-muted-foreground">{meta.hint}</p>
+      <div className="flex flex-col gap-2 sm:flex-row">
+        <Input value={label} placeholder="Nome do canal" onChange={(e) => setLabel(e.target.value)} className="sm:w-48" />
+        <Input value={url} placeholder={meta.placeholder} onChange={(e) => setUrl(e.target.value)} className="flex-1" />
+      </div>
+      <div className="mt-3 flex gap-2">
+        <Button size="sm" onClick={() => onAdd(label, url)}><Plus className="mr-1.5 h-3.5 w-3.5" /> Adicionar</Button>
+        <Button size="sm" variant="outline" onClick={onCancel}>Cancelar</Button>
+      </div>
+    </div>
+  )
+}