@fayz-ai/plugin-shop 0.9.0 → 0.9.1

package/src/data/shared.ts

@@ -1,42 +0,0 @@
-import type { CrudQuery, CrudResult } from '@fayz-ai/core'
-import type { ShopProvider } from '@fayz-ai/shop'
-
-export type ShopProviderResolver = ShopProvider | (() => ShopProvider)
-
-export const resolve = (p: ShopProviderResolver): ShopProvider => (typeof p === 'function' ? p() : p)
-
-/**
- * Paging, sorting and facet filtering applied client-side: the shop provider's
- * list methods take a search term but no offset, sort or filter parameters.
- * Fine at storefront catalogue sizes; revisit if a tenant grows past a few
- * thousand rows, where it should move into the query.
- */
-export function applyQuery<T>(
-  rows: T[],
-  query: CrudQuery,
-  facetKey?: keyof T & string,
-): CrudResult<T> {
-  const prop = (row: T, key: string): unknown => (row as Record<string, unknown>)[key]
-  let data = rows
-
-  if (facetKey) {
-    const wanted = query.filters?.[facetKey]
-    if (wanted && wanted !== 'all') data = data.filter((row) => prop(row, facetKey) === wanted)
-  }
-
-  if (query.sortBy) {
-    const dir = query.sortDir === 'desc' ? -1 : 1
-    const key = query.sortBy
-    data = [...data].sort((a, b) => {
-      const av = prop(a, key)
-      const bv = prop(b, key)
-      if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir
-      return String(av ?? '').localeCompare(String(bv ?? ''), 'pt-BR') * dir
-    })
-  }
-
-  const total = data.length
-  const page = query.page ?? 1
-  const size = query.pageSize ?? total
-  return { data: data.slice((page - 1) * size, page * size), total }
-}

package/src/data/shippingZoneDataProvider.ts

@@ -1,49 +0,0 @@
-import type { CrudQuery, CrudResult, DataProvider } from '@fayz-ai/core'
-import type { CreateShippingZoneInput, ShippingZone, UpdateShippingZoneInput } from '@fayz-ai/shop'
-import { applyQuery, resolve, type ShopProviderResolver } from './shared'
-
-/**
- * Delivery zones CRUD.
- *
- * The form takes CEPs however the merchant types them ('22.041-001', '22041001')
- * and the provider normalises to the 8 bare digits shipping_zones compares on —
- * asking a shop owner to strip punctuation is how a range silently stops
- * matching and a whole city stops being served.
- */
-export function createShopShippingZoneDataProvider(
-  provider: ShopProviderResolver,
-): DataProvider<ShippingZone> {
-  const shop = () => {
-    const p = resolve(provider)
-    if (!p.listShippingZones) {
-      throw new Error('Este provider de loja não suporta zonas de entrega.')
-    }
-    return p
-  }
-
-  return {
-    async list(query: CrudQuery): Promise<CrudResult<ShippingZone>> {
-      const rows = await shop().listShippingZones!()
-      const term = query.search?.trim().toLowerCase()
-      const filtered = term
-        ? rows.filter((z) =>
-            z.name.toLowerCase().includes(term) || (z.carrier ?? '').toLowerCase().includes(term))
-        : rows
-      return applyQuery(filtered, query)
-    },
-
-    async create(data): Promise<ShippingZone> {
-      return shop().createShippingZone!(data as unknown as CreateShippingZoneInput)
-    },
-
-    async update(id: string, data: Partial<ShippingZone>): Promise<ShippingZone> {
-      // tenantId is set from the session on the server side; never from the form.
-      const { id: _id, tenantId: _tenant, ...patch } = data
-      return shop().updateShippingZone!(id, patch as UpdateShippingZoneInput)
-    },
-
-    async remove(id: string): Promise<void> {
-      await shop().deleteShippingZone!(id)
-    },
-  }
-}

package/src/index.ts

@@ -1,270 +0,0 @@
-import React from 'react'
-import type { PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core'
-import { setShopTenantResolver, getShopProvider } from '@fayz-ai/shop'
-import { useOrganizationStore, createCrudPage, registerEntityPath } from '@fayz-ai/saas'
-import { buildShopProductEntity } from './views/productEntity'
-import { buildShopCustomerEntity } from './views/customerEntity'
-import { buildShopDiscountEntity } from './views/discountEntity'
-import { buildShopShippingZoneEntity } from './views/shippingZoneEntity'
-import { createShopProductDataProvider } from './data/productDataProvider'
-import { createShopCustomerDataProvider } from './data/customerDataProvider'
-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 })))
-
-// ---------------------------------------------------------------------------
-// Options
-// ---------------------------------------------------------------------------
-
-export interface ShopPluginOptions {
-  navPosition?: number
-  navSection?: 'main' | 'secondary' | 'settings'
-  navLabel?: string
-  /** Override the accordion child labels (Produtos / Pedidos / Clientes / Descontos). */
-  sectionLabels?: Partial<Record<'products' | 'orders' | 'customers' | 'discounts' | 'shipping', string>>
-  scope?: PluginScope
-  verticalId?: VerticalId
-  currency?: { code?: string; locale?: string; symbol?: string }
-  provider?: ShopProviderResolver
-}
-
-// ---------------------------------------------------------------------------
-// Factory
-// ---------------------------------------------------------------------------
-
-export function createShopPlugin(options?: ShopPluginOptions): PluginManifest {
-  const curr = { code: 'BRL', locale: 'pt-BR', symbol: 'R$', ...options?.currency }
-
-  // Scope fallback shop queries to the active organization. Apps can inject a
-  // provider when they want SDK-owned data access instead of the global runtime.
-  setShopTenantResolver(() => useOrganizationStore.getState().currentOrg?.id)
-
-  // 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.
-  // Clientes now lives at the top level (/customers), out of the Loja accordion.
-  registerEntityPath('shop_customer', '/customers')
-
-  type ShopSection = 'products' | 'orders' | 'customers' | 'discounts' | 'shipping'
-
-  // One component per section so each gets its own route. The shell nests any
-  // entry whose route is a sub-path of another (same rule the courses modules
-  // use), so /shop/products … /shop/discounts render as an accordion under
-  // "Loja" instead of one link with everything hidden behind tabs.
-  const pageFor = (section?: ShopSection): React.ComponentType<unknown> => {
-    const Wrapped: React.ComponentType<unknown> = () =>
-      React.createElement(React.Suspense, { fallback: null },
-        React.createElement(
-          ShopPage as React.ComponentType<{ provider?: ShopProviderResolver; section?: ShopSection }>,
-          { provider: options?.provider, section },
-        )
-      )
-    Wrapped.displayName = section ? `ShopPage:${section}` : 'ShopPageWrapper'
-    return Wrapped
-  }
-
-  // Products, customers and discounts all get the full generic CRUD (list +
-  // form + detail + delete) from their EntityDef, rather than three bespoke
-  // read-only tables. Orders stay on the custom page: an order is not a CRUD
-  // record — it needs fulfilment, refunds and a line-item view, which is its
-  // own screen.
-  const resolveProvider = () =>
-    typeof options?.provider === 'function'
-      ? options.provider()
-      : options?.provider ?? getShopProvider()
-
-  const ProductsCrudPage = createCrudPage(buildShopProductEntity(curr.code, resolveProvider), {
-    dataProvider: createShopProductDataProvider(resolveProvider),
-    feature: 'shop',
-  })
-
-  const CustomersCrudPage = createCrudPage(buildShopCustomerEntity(), {
-    dataProvider: createShopCustomerDataProvider(resolveProvider),
-    feature: 'shop',
-  })
-
-  const DiscountsCrudPage = createCrudPage(buildShopDiscountEntity(), {
-    dataProvider: createShopDiscountDataProvider(resolveProvider),
-    feature: 'shop',
-  })
-
-  const ShippingZonesCrudPage = createCrudPage(buildShopShippingZoneEntity(curr.code), {
-    dataProvider: createShopShippingZoneDataProvider(resolveProvider),
-    feature: 'shop',
-  })
-
-  const CRUD_PAGES: Partial<Record<ShopSection, React.ComponentType<unknown>>> = {
-    products: ProductsCrudPage as React.ComponentType<unknown>,
-    customers: CustomersCrudPage as React.ComponentType<unknown>,
-    discounts: DiscountsCrudPage as React.ComponentType<unknown>,
-    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: '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
-
-  return {
-    id: 'shop',
-    name: options?.navLabel ?? 'Shop',
-    icon: 'ShoppingBag',
-    version: '1.0.0',
-    scope: options?.scope ?? 'vertical',
-    verticalId: options?.verticalId,
-    // Storefront/commerce-operator-console surface — targets the ecommerce
-    // Panel world, not a saas admin app.
-    scaffolds: ['ecommerce'],
-    defaultEnabled: true,
-    dependencies: [],
-    navigation: [
-      {
-        section: navSection,
-        position: navPosition,
-        label: options?.navLabel ?? 'Shop',
-        route: '/shop',
-        icon: 'ShoppingBag',
-        permission: { feature: 'shop', action: 'read' as const },
-        // "Loja" and "Produtos" are the same screen — don't list both.
-        indexChild: false,
-      },
-      ...SECTIONS.map((s, i) => ({
-        section: navSection,
-        position: navPosition + i + 1,
-        label: s.label,
-        route: `/shop/${s.id}`,
-        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: [
-      {
-        // Kept so existing links to /shop still resolve; renders the tabbed page.
-        path: '/shop',
-        component: pageFor(),
-        permission: { feature: 'shop', action: 'read' as const },
-      },
-      ...SECTIONS.map((s) => ({
-        path: `/shop/${s.id}`,
-        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: [
-      {
-        id: 'shop.list-products',
-        name: 'listProducts',
-        description: 'Lists products in the shop catalog.',
-        icon: 'Package',
-        mode: 'read' as const,
-        category: 'Shop',
-        parameters: {
-          type: 'object' as const,
-          properties: {
-            search: { type: 'string' as const, description: 'Filter by name' },
-            status: { type: 'string' as const, enum: ['draft', 'active', 'archived'] },
-          },
-        },
-        suggestions: [
-          { label: 'What products are available?' },
-          { label: 'Which products are out of stock?' },
-        ],
-      },
-      {
-        id: 'shop.list-orders',
-        name: 'listOrders',
-        description: 'Lists recent shop orders.',
-        icon: 'ShoppingCart',
-        mode: 'read' as const,
-        category: 'Shop',
-        parameters: {
-          type: 'object' as const,
-          properties: {
-            financialStatus: { type: 'string' as const, enum: ['pending', 'paid', 'refunded', 'voided'] },
-            fulfillmentStatus: { type: 'string' as const, enum: ['unfulfilled', 'partially_fulfilled', 'fulfilled'] },
-          },
-        },
-        suggestions: [
-          { label: 'Show me pending orders' },
-          { label: 'How many orders were paid today?' },
-        ],
-      },
-    ],
-    settings: [
-      {
-        id: 'shop',
-        label: 'Shop',
-        icon: 'ShoppingBag',
-        component: (() => {
-          const ShopSettingsTab: React.ComponentType<unknown> = () =>
-            React.createElement(ShopSettings, { currency: curr })
-          ShopSettingsTab.displayName = 'ShopSettingsTab'
-          return ShopSettingsTab
-        })(),
-        order: 30,
-        permission: { feature: 'shop', action: 'read' as const },
-      },
-    ],
-  }
-}
-
-// Re-export shop types so consumer apps only need @fayz-ai/plugin-shop
-export type {
-  Product, Order, ShopCustomer, Discount, Category,
-  CreateProductInput, UpdateProductInput, ListProductsOptions,
-  CreateOrderInput, UpdateOrderInput, ListOrdersOptions,
-} from '@fayz-ai/shop'

package/src/views/ChannelsPage.tsx

@@ -1,274 +0,0 @@
-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>
-  )
-}