@fayz-ai/plugin-shop 0.2.5 → 0.8.1

package/src/views/ProductImagesTab.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useRef, useState } from 'react'
+import type { Product, ProductImage, ShopProvider } from '@fayz-ai/shop'
+
+/**
+ * The product's whole gallery, not just its cover.
+ *
+ * plg_shop_product_images has always been a collection — sort_order, is_primary
+ * — but the admin only ever exposed the single `EntityImageConfig` slot on the
+ * form, so a merchant could set one photo and no more, and the storefront had
+ * nothing to build a carousel from. This is the missing half.
+ *
+ * Deliberately not drag-and-drop: ordering is done with arrows because a
+ * keyboard and a screen reader can use them, and because reordering four
+ * photos of a rib is not worth a drag library.
+ */
+export function ProductImagesTab({ item, getProvider }: {
+  item: unknown
+  getProvider: () => ShopProvider
+}) {
+  const product = item as Product
+  const [images, setImages] = useState<ProductImage[]>([])
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  async function reload() {
+    const fresh = await getProvider().getProduct(product.id)
+    setImages(sortImages(fresh?.images ?? []))
+  }
+
+  useEffect(() => { void reload().catch(() => {}) }, [product.id])
+
+  async function run(action: () => Promise<unknown>) {
+    setBusy(true)
+    setError(null)
+    try {
+      await action()
+      await reload()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function upload(files: FileList | null) {
+    if (!files?.length) return
+    // Sequential, not Promise.all: each upload reads the current max sort_order
+    // to place itself last, and running them together makes them all read the
+    // same value and land on the same position.
+    await run(async () => {
+      for (const file of Array.from(files)) {
+        await getProvider().uploadProductImage(product.id, file)
+      }
+      if (fileRef.current) fileRef.current.value = ''
+    })
+  }
+
+  function move(index: number, delta: number) {
+    const target = index + delta
+    if (target < 0 || target >= images.length) return
+    const a = images[index]!
+    const b = images[target]!
+    // Swap the two positions rather than renumbering the list: fewer writes, and
+    // a failure halfway leaves an order that is still coherent.
+    void run(async () => {
+      const update = getProvider().updateProductImage
+      if (!update) throw new Error('Este provider não suporta reordenar imagens.')
+      await update(a.id, { sortOrder: b.sortOrder ?? target })
+      await update(b.id, { sortOrder: a.sortOrder ?? index })
+    })
+  }
+
+  const update = getProvider().updateProductImage
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-semibold">Fotos do produto</h3>
+          <p className="text-xs text-muted-foreground">
+            A primeira foto é a capa — aparece no catálogo, no carrinho e no pedido.
+            As demais viram o carrossel na página do produto.
+          </p>
+        </div>
+        <label className="inline-flex cursor-pointer items-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition hover:opacity-90">
+          {busy ? 'Enviando…' : 'Adicionar fotos'}
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*"
+            multiple
+            disabled={busy}
+            className="hidden"
+            onChange={(event) => void upload(event.target.files)}
+          />
+        </label>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">{error}</p>
+      )}
+
+      {images.length === 0 ? (
+        <p className="rounded-lg border border-dashed px-4 py-10 text-center text-sm text-muted-foreground">
+          Nenhuma foto ainda. Produtos com mais de uma foto vendem melhor — mostre a
+          embalagem, o produto pronto e uma referência de tamanho.
+        </p>
+      ) : (
+        <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+          {images.map((image, index) => (
+            <li key={image.id} className="overflow-hidden rounded-lg border">
+              <div className="relative aspect-square bg-muted">
+                <img src={image.url} alt={image.altText ?? ''} className="h-full w-full object-cover" />
+                {image.isPrimary && (
+                  <span className="absolute left-2 top-2 rounded-full bg-primary px-2 py-0.5 text-[11px] font-bold text-primary-foreground">
+                    Capa
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center justify-between gap-1 px-2 py-1.5">
+                <div className="flex gap-1">
+                  <IconButton label="Mover para trás" disabled={busy || index === 0}
+                    onClick={() => move(index, -1)}>←</IconButton>
+                  <IconButton label="Mover para frente" disabled={busy || index === images.length - 1}
+                    onClick={() => move(index, 1)}>→</IconButton>
+                </div>
+                <div className="flex gap-1">
+                  {!image.isPrimary && update && (
+                    <button
+                      type="button"
+                      disabled={busy}
+                      onClick={() => void run(() => update(image.id, { isPrimary: true }))}
+                      className="rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
+                    >
+                      Usar como capa
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    disabled={busy}
+                    onClick={() => void run(() => getProvider().deleteProductImage(image.id))}
+                    className="rounded px-1.5 py-0.5 text-xs text-red-600 hover:bg-red-50 disabled:opacity-50"
+                  >
+                    Excluir
+                  </button>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+function IconButton({ label, disabled, onClick, children }: {
+  label: string
+  disabled?: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+      className="rounded border px-1.5 py-0.5 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground disabled:opacity-40"
+    >
+      {children}
+    </button>
+  )
+}
+
+/** Cover first, then the merchant's order — the same rule the storefront uses. */
+function sortImages(images: ProductImage[]): ProductImage[] {
+  return [...images].sort((a, b) => {
+    if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1
+    return (a.sortOrder ?? 0) - (b.sortOrder ?? 0)
+  })
+}

package/src/views/customerEntity.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import type { EntityDef, FieldDef } from '@fayz-ai/core'
+import type { ShopCustomer } from '@fayz-ai/shop'
+import { ClientOrdersTab, createClientOrdersProvider, adminNavigateTo } from '@fayz-ai/saas'
+import type { ClientDocument } from '@fayz-ai/saas'
+
+// ---------------------------------------------------------------------------
+// Shop customer — same declarative contract as the product entity, so the list
+// and the form both come from createCrudPage instead of a hand-rolled table.
+//
+// ordersCount / totalSpent are read-only: they are maintained server-side by the
+// shop_refresh_customer_stats trigger on every order insert/update/delete, so
+// putting them in the form would offer an edit the database would overwrite.
+// ---------------------------------------------------------------------------
+
+function money(value: unknown) {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return 'R$ 0,00'
+  return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(n)
+}
+
+export function buildShopCustomerEntity(): EntityDef<ShopCustomer> {
+  const fields: FieldDef[] = [
+    // — Contato —
+    {
+      key: 'firstName', label: 'Nome', type: 'text', required: true,
+      group: 'contact', placeholder: 'Maria', searchable: true,
+      showInTable: true, sortable: true,
+      renderCell: (_v, row: any) => (
+        <div className="min-w-0">
+          <p className="truncate font-medium">{[row.firstName, row.lastName].filter(Boolean).join(' ')}</p>
+          {row.email && <p className="truncate text-xs text-muted-foreground">{row.email}</p>}
+        </div>
+      ),
+    },
+    { key: 'lastName', label: 'Sobrenome', type: 'text', group: 'contact', placeholder: 'Silva', searchable: true, showInTable: false },
+    {
+      key: 'email', label: 'E-mail', type: 'text', group: 'contact',
+      placeholder: 'maria@exemplo.com', searchable: true,
+      hint: 'É por ele que o pedido é vinculado ao cliente no checkout.',
+      showInTable: false,
+    },
+    {
+      key: 'phone', label: 'Telefone', type: 'text', group: 'contact',
+      placeholder: '(21) 99999-0000', searchable: true,
+      showInTable: true, sortable: false,
+      renderCell: (v) => <span className="text-muted-foreground">{(v as string) || '—'}</span>,
+    },
+
+    // — Histórico (somente leitura) —
+    {
+      key: 'ordersCount', label: 'Pedidos', type: 'number',
+      showInForm: false, showInTable: true, sortable: true,
+      renderCell: (v) => <span className="block text-right">{Number(v) || 0}</span>,
+    },
+    {
+      key: 'totalSpent', label: 'Total gasto', type: 'number',
+      showInForm: false, showInTable: true, sortable: true,
+      renderCell: (v) => <span className="block text-right font-medium">{money(v)}</span>,
+    },
+
+    // — Interno —
+    {
+      key: 'notes', label: 'Observações', type: 'textarea', group: 'internal', span: 2,
+      placeholder: 'Preferências, restrições, combinados de entrega…',
+      hint: 'Visível só no admin. O cliente nunca vê.',
+      showInTable: false,
+    },
+  ]
+
+  return {
+    name: 'Cliente',
+    namePlural: 'Clientes',
+    icon: 'Users',
+    displayField: 'firstName',
+    // `person` layout brings the shared archetype tabs — including Endereços,
+    // which reads the core addresses table and therefore works in every app.
+    layout: 'person',
+    // Without archetypeKind the shell shows every person tab, including the
+    // staff-only Agenda (its visibleFor filter only runs when a kind is set).
+    data: { table: 'plg_shop_customers', archetypeKind: 'customer' },
+    fields,
+    // The SAME tab and the SAME provider beauty-saas uses. Since the shop's
+    // orders now live in public.orders with party_id set, the canonical provider
+    // already returns them — a shop-specific adapter would be a second
+    // implementation of "list this person's orders", which is how two apps end
+    // up with two different answers to the same question.
+    detailTabs: [{
+      id: 'orders',
+      label: 'Pedidos',
+      icon: 'ShoppingBag',
+      aliases: ['appointments', 'quotes'],
+      component: ClientOrdersTab as never,
+      props: {
+        provider: createClientOrdersProvider(),
+        currency: { code: 'BRL', locale: 'pt-BR' },
+        // The one part that legitimately differs per app: where a document
+        // leads. Beauty sends a booking to the agenda and an invoice to
+        // receivables; a shop order goes to the order screen.
+        navigator: {
+          onNavigate: (doc: ClientDocument) => adminNavigateTo(`/shop/orders/${doc.id}`),
+        },
+      },
+    }],
+    fieldGroups: [
+      { id: 'contact', label: 'Contato', columns: 2 },
+      { id: 'internal', label: 'Notas internas', columns: 1 },
+    ],
+  } as EntityDef<ShopCustomer>
+}

package/src/views/customerLookup.ts

@@ -0,0 +1,31 @@
+import type { ShopProvider } from '@fayz-ai/shop'
+
+/**
+ * Feeds the shared PersonLink popover from the shop's own customer table.
+ * The default lookup reads the `person` archetype (`people`), where a shop
+ * customer does not exist — so without this the card would come up empty.
+ */
+export function shopCustomerLookup(provider: () => ShopProvider) {
+  return {
+    async getById(id: string) {
+      const c = await provider().getCustomer(id)
+      if (!c) return null
+      const name = [c.firstName, c.lastName].filter(Boolean).join(' ')
+      return {
+        id: c.id,
+        label: name || c.email || 'Cliente',
+        subtitle: c.email ?? undefined,
+        group: 'shop_customer',
+        // PersonLink reads contact fields off `data`, so the keys must match the
+        // shape it expects (email/phone), not our camelCase type.
+        data: {
+          email: c.email ?? undefined,
+          phone: c.phone ?? undefined,
+          kind: 'shop_customer',
+          orders_count: c.ordersCount,
+          total_spent: c.totalSpent,
+        },
+      }
+    },
+  }
+}

package/src/views/discountEntity.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import type { EntityDef, FieldDef } from '@fayz-ai/core'
+import type { Discount } from '@fayz-ai/shop'
+
+// ---------------------------------------------------------------------------
+// Discount — declarative CRUD, same contract as products and customers.
+//
+// `timesUsed` is read-only: shop_place_order increments it inside the same
+// transaction that validates the coupon, so the admin must never write it.
+//
+// `buy_x_get_y` is deliberately absent from the type options: the enum value
+// exists in the database but shop_place_order records the code and applies no
+// monetary effect (0003:116), so offering it would create coupons that silently
+// do nothing.
+// ---------------------------------------------------------------------------
+
+const STATUS_TONE: Record<string, string> = {
+  active: 'bg-emerald-100 text-emerald-800',
+  draft: 'bg-gray-100 text-gray-700',
+  expired: 'bg-orange-100 text-orange-700',
+  disabled: 'bg-red-100 text-red-700',
+}
+
+export function buildShopDiscountEntity(): EntityDef<Discount> {
+  const fields: FieldDef[] = [
+    // — Cupom —
+    {
+      key: 'title', label: 'Nome interno', type: 'text', required: true,
+      group: 'coupon', placeholder: 'Bem-vindo 10%',
+      hint: 'Só o admin vê. Serve para você identificar a campanha.',
+      searchable: true, showInTable: true, sortable: true,
+      renderCell: (_v, row: any) => (
+        <div className="min-w-0">
+          <p className="truncate font-medium">{row.title}</p>
+          {row.code && <p className="font-mono text-xs text-muted-foreground">{row.code}</p>}
+        </div>
+      ),
+    },
+    {
+      key: 'code', label: 'Código', type: 'text', group: 'coupon',
+      placeholder: 'ARTORIUS10',
+      hint: 'O que o cliente digita no carrinho. Maiúsculas e minúsculas não importam.',
+      searchable: true, showInTable: false,
+    },
+
+    // — Regra —
+    {
+      key: 'type', label: 'Tipo', type: 'segmented', required: true, group: 'rule', span: 2,
+      options: [
+        { label: 'Percentual', value: 'percentage', description: 'Desconta uma % do subtotal.' },
+        { label: 'Valor fixo', value: 'fixed_amount', description: 'Desconta um valor em reais.' },
+        { label: 'Frete grátis', value: 'free_shipping', description: 'Zera o frete do pedido.' },
+      ],
+      showInTable: true, sortable: false,
+      renderCell: (v) => {
+        const labels: Record<string, string> = {
+          percentage: 'Percentual', fixed_amount: 'Valor fixo', free_shipping: 'Frete grátis', buy_x_get_y: 'Leve X pague Y',
+        }
+        return <span className="text-muted-foreground">{labels[String(v)] ?? String(v)}</span>
+      },
+    },
+    {
+      key: 'value', label: 'Valor', type: 'number', group: 'rule', min: 0,
+      placeholder: '10',
+      hint: 'Percentual: 10 = 10%. Valor fixo: 10 = R$ 10,00. Frete grátis ignora este campo.',
+      showInTable: true, sortable: true,
+      renderCell: (_v, row: any) => (
+        <span className="block text-right font-medium">
+          {row.type === 'percentage'
+            ? `${row.value}%`
+            : row.type === 'free_shipping'
+              ? '—'
+              : new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(row.value) || 0)}
+        </span>
+      ),
+    },
+
+    // — Limites —
+    {
+      key: 'usageLimit', label: 'Limite de usos', type: 'number', group: 'limits', min: 0,
+      placeholder: 'sem limite', hint: 'Deixe vazio para uso ilimitado.', showInTable: false,
+    },
+    {
+      key: 'oncePerCustomer', label: 'Uma vez por cliente', type: 'boolean', group: 'limits',
+      hint: 'Só vale para quem se identifica no checkout — compra como visitante não é rastreada.',
+      showInTable: false,
+    },
+    {
+      key: 'timesUsed', label: 'Usos', type: 'number',
+      showInForm: false, showInTable: true, sortable: true,
+      renderCell: (_v, row: any) => (
+        <span className="block text-right text-muted-foreground">
+          {row.timesUsed}{row.usageLimit ? ` / ${row.usageLimit}` : ''}
+        </span>
+      ),
+    },
+
+    // — Vigência —
+    { key: 'startsAt', label: 'Início', type: 'date', group: 'schedule', showInTable: false },
+    {
+      key: 'endsAt', label: 'Fim', type: 'date', group: 'schedule',
+      hint: 'Vazio = sem data de expiração.', showInTable: false,
+    },
+    {
+      key: 'status', label: 'Status', type: 'segmented', required: true, group: 'schedule', span: 2,
+      options: [
+        { label: 'Rascunho', value: 'draft', description: 'Não aceito no carrinho.' },
+        { label: 'Ativo', value: 'active', description: 'Valendo agora.' },
+        { label: 'Desativado', value: 'disabled', description: 'Suspenso sem apagar o histórico.' },
+      ],
+      showInTable: true, sortable: false,
+      renderCell: (v) => {
+        const s = String(v ?? 'draft')
+        return (
+          <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${STATUS_TONE[s] ?? STATUS_TONE.draft}`}>
+            {s}
+          </span>
+        )
+      },
+    },
+  ]
+
+  return {
+    name: 'Desconto',
+    namePlural: 'Descontos',
+    icon: 'Tag',
+    displayField: 'title',
+    fields,
+    fieldGroups: [
+      { id: 'coupon', label: 'Cupom', columns: 2 },
+      { id: 'rule', label: 'Regra', description: 'O desconto é recalculado no servidor a cada pedido.', columns: 2 },
+      { id: 'limits', label: 'Limites de uso', columns: 2 },
+      { id: 'schedule', label: 'Vigência', columns: 2 },
+    ],
+    facets: [{ field: 'status', allLabel: 'Todos' }],
+  } as EntityDef<Discount>
+}