@fayz-ai/plugin-shop 0.8.1 → 0.8.4

package/dist/index.js

@@ -1,7 +1,9 @@
-import React2, { useState, useRef, useEffect } from 'react';
+import React3, { useState, useRef, useEffect } from 'react';
 import { setShopTenantResolver, getShopProvider } from '@fayz-ai/shop';
 import { useOrganizationStore, registerEntityPath, createCrudPage, ClientOrdersTab, adminNavigateTo, createClientOrdersProvider, SettingsGroup, SelectRow, ToggleRow } from '@fayz-ai/saas';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Link2, MapPin, ShoppingBag, Music, Camera, MessageCircle, Globe, ExternalLink, Check, X, Trash2, Plus } from 'lucide-react';
+import { Button, Input } from '@fayz-ai/ui';
 
 // src/index.ts
 function ProductImagesTab({ item, getProvider }) {
@@ -559,6 +561,19 @@ function buildShopDiscountEntity() {
       renderCell: (_v, row) => /* @__PURE__ */ jsx("span", { className: "block text-right font-medium", children: row.type === "percentage" ? `${row.value}%` : row.type === "free_shipping" ? "\u2014" : new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(Number(row.value) || 0) })
     },
     // — Limites —
+    {
+      key: "minSubtotal",
+      label: "Pedido m\xEDnimo",
+      type: "currency",
+      group: "limits",
+      min: 0,
+      currency: "BRL",
+      currencySymbol: "R$",
+      currencyLocale: "pt-BR",
+      placeholder: "sem m\xEDnimo",
+      hint: "Valor m\xEDnimo do pedido para o cupom valer. Deixe vazio para n\xE3o exigir m\xEDnimo.",
+      showInTable: false
+    },
     {
       key: "usageLimit",
       label: "Limite de usos",
@@ -920,15 +935,15 @@ var LOCALES = [
   { value: "es-ES", label: "Espa\xF1ol" }
 ];
 function ShopSettings({ currency }) {
-  const [code, setCode] = React2.useState(currency?.code ?? "BRL");
-  const [locale, setLocale] = React2.useState(currency?.locale ?? "pt-BR");
-  const [showOutOfStock, setShowOutOfStock] = React2.useState(true);
-  const [trackInventory, setTrackInventory] = React2.useState(true);
-  const [requireSku, setRequireSku] = React2.useState(false);
-  const [guestCheckout, setGuestCheckout] = React2.useState(true);
-  const [enableDiscounts, setEnableDiscounts] = React2.useState(true);
-  const [orderEmails, setOrderEmails] = React2.useState(true);
-  const [lowStockAlerts, setLowStockAlerts] = React2.useState(false);
+  const [code, setCode] = React3.useState(currency?.code ?? "BRL");
+  const [locale, setLocale] = React3.useState(currency?.locale ?? "pt-BR");
+  const [showOutOfStock, setShowOutOfStock] = React3.useState(true);
+  const [trackInventory, setTrackInventory] = React3.useState(true);
+  const [requireSku, setRequireSku] = React3.useState(false);
+  const [guestCheckout, setGuestCheckout] = React3.useState(true);
+  const [enableDiscounts, setEnableDiscounts] = React3.useState(true);
+  const [orderEmails, setOrderEmails] = React3.useState(true);
+  const [lowStockAlerts, setLowStockAlerts] = React3.useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs(SettingsGroup, { title: "Loja", description: "Moeda e formata\xE7\xE3o da vitrine.", children: [
       /* @__PURE__ */ jsx(
@@ -1023,18 +1038,197 @@ function ShopSettings({ currency }) {
     ] })
   ] });
 }
+var KIND_META = {
+  online_store: { label: "Loja Online", icon: Globe, hint: "Seu storefront fayz \u2014 a vitrine p\xFAblica 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\u2026", placeholder: "https://\u2026" },
+  physical: { label: "Loja F\xEDsica", icon: MapPin, hint: "Endere\xE7o ou ponto de venda f\xEDsico.", placeholder: "https://maps.google.com/\u2026" },
+  custom: { label: "Outro canal", icon: Link2, hint: "Qualquer outro ponto de venda com um link.", placeholder: "https://\u2026" }
+};
+var ADDABLE_KINDS = ["whatsapp", "instagram", "tiktok_shop", "marketplace", "physical", "custom"];
+function resolve2(resolver) {
+  return typeof resolver === "function" ? resolver() : resolver ?? getShopProvider();
+}
+function notifyChannelsChanged() {
+  if (typeof window !== "undefined") window.dispatchEvent(new Event("fayz:channels-changed"));
+}
+function ChannelsPage({ resolveProvider }) {
+  const provider = React3.useMemo(() => resolve2(resolveProvider), [resolveProvider]);
+  const supported = typeof provider.listSalesChannels === "function";
+  const [channels, setChannels] = React3.useState([]);
+  const [loading, setLoading] = React3.useState(true);
+  const [adding, setAdding] = React3.useState(null);
+  const reload = React3.useCallback(async () => {
+    if (!provider.listSalesChannels) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const rows = await provider.listSalesChannels();
+      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]);
+  React3.useEffect(() => {
+    void reload();
+  }, [reload]);
+  const patch = async (id, input) => {
+    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) => {
+    if (!provider.deleteSalesChannel) return;
+    await provider.deleteSalesChannel(id);
+    setChannels((prev) => prev.filter((c) => c.id !== id));
+    notifyChannelsChanged();
+  };
+  const add = async (kind, label, url) => {
+    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 /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl p-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground", children: "Canais de venda" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Este provedor de loja ainda n\xE3o exp\xF5e canais de venda." })
+    ] });
+  }
+  const online = channels.find((c) => c.kind === "online_store");
+  const others = channels.filter((c) => c.kind !== "online_store");
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl p-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground", children: "Canais de venda" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Onde sua loja vende. A Loja Online \xE9 o seu storefront fayz; os demais s\xE3o links que aparecem no menu lateral." })
+    ] }),
+    loading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Carregando\u2026" }) : /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      online && /* @__PURE__ */ jsx(OnlineStoreCard, { channel: online, onSave: (url) => patch(online.id, { url }), onToggle: (enabled) => patch(online.id, { enabled }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Outros canais" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          others.map((c) => /* @__PURE__ */ jsx(ChannelRow, { channel: c, onSave: (url) => patch(c.id, { url }), onToggle: (enabled) => patch(c.id, { enabled }), onRemove: () => remove(c.id) }, c.id)),
+          others.length === 0 && /* @__PURE__ */ jsx("p", { className: "rounded-card border border-dashed border-border p-4 text-sm text-muted-foreground", children: "Nenhum canal adicional ainda. Adicione WhatsApp, Instagram, TikTok Shop e outros pontos de venda." })
+        ] }),
+        adding ? /* @__PURE__ */ jsx(AddChannelForm, { kind: adding, onCancel: () => setAdding(null), onAdd: (label, url) => add(adding, label, url), onKind: setAdding }) : /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: ADDABLE_KINDS.map((k) => {
+          const Icon = KIND_META[k].icon;
+          return /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAdding(k), children: [
+            /* @__PURE__ */ jsx(Icon, { className: "mr-1.5 h-3.5 w-3.5" }),
+            " ",
+            KIND_META[k].label
+          ] }, k);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+function OnlineStoreCard({ channel, onSave, onToggle }) {
+  const [url, setUrl] = React3.useState(channel.url ?? "");
+  const dirty = (channel.url ?? "") !== url;
+  const meta = KIND_META.online_store;
+  return /* @__PURE__ */ jsx("div", { className: "rounded-card border border-border bg-card p-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(meta.icon, { className: "h-5 w-5 text-primary" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Loja Online" }),
+        /* @__PURE__ */ jsx("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"}`, children: channel.enabled ? "Ativa" : "Inativa" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: meta.hint }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-2 sm:flex-row sm:items-center", children: [
+        /* @__PURE__ */ jsx(Input, { value: url, placeholder: meta.placeholder, onChange: (e) => setUrl(e.target.value), className: "flex-1" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", disabled: !dirty, onClick: () => onSave(url.trim() || null), children: "Salvar" }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", disabled: !channel.url, onClick: () => channel.url && window.open(channel.url, "_blank", "noopener,noreferrer"), children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }),
+            " Ver loja"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onToggle(!channel.enabled), className: "text-xs font-medium text-muted-foreground hover:text-foreground", children: channel.enabled ? "Desativar canal" : "Ativar canal" }) })
+    ] })
+  ] }) });
+}
+function ChannelRow({ channel, onSave, onToggle, onRemove }) {
+  const [url, setUrl] = React3.useState(channel.url ?? "");
+  const [editing, setEditing] = React3.useState(false);
+  const meta = KIND_META[channel.kind] ?? KIND_META.custom;
+  const Icon = meta.icon;
+  return /* @__PURE__ */ jsx("div", { className: "rounded-card border border-border bg-card p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${channel.enabled ? "bg-primary/10" : "bg-muted"}`, children: /* @__PURE__ */ jsx(Icon, { className: `h-4 w-4 ${channel.enabled ? "text-primary" : "text-muted-foreground"}` }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: channel.label }),
+      editing ? /* @__PURE__ */ jsx(Input, { value: url, placeholder: meta.placeholder, onChange: (e) => setUrl(e.target.value), className: "mt-1 h-8" }) : /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: channel.url || "Sem link configurado" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+        onSave(url.trim() || null);
+        setEditing(false);
+      }, children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+        setUrl(channel.url ?? "");
+        setEditing(false);
+      }, children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      channel.url && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => window.open(channel.url, "_blank", "noopener,noreferrer"), children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx("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"}`, children: channel.enabled ? "Ativo" : "Inativo" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setEditing(true), children: "Editar" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onRemove, children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-red-500" }) })
+    ] }) })
+  ] }) });
+}
+function AddChannelForm({ kind, onKind, onCancel, onAdd }) {
+  const meta = KIND_META[kind];
+  const [label, setLabel] = React3.useState(meta.label);
+  const [url, setUrl] = React3.useState("");
+  React3.useEffect(() => {
+    setLabel(KIND_META[kind].label);
+  }, [kind]);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-card border border-border bg-card p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: ADDABLE_KINDS.map((k) => {
+      const Icon = KIND_META[k].icon;
+      return /* @__PURE__ */ jsxs("button", { 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"}`, children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+        " ",
+        KIND_META[k].label
+      ] }, k);
+    }) }),
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: meta.hint }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+      /* @__PURE__ */ jsx(Input, { value: label, placeholder: "Nome do canal", onChange: (e) => setLabel(e.target.value), className: "sm:w-48" }),
+      /* @__PURE__ */ jsx(Input, { value: url, placeholder: meta.placeholder, onChange: (e) => setUrl(e.target.value), className: "flex-1" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: () => onAdd(label, url), children: [
+        /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 h-3.5 w-3.5" }),
+        " Adicionar"
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onCancel, children: "Cancelar" })
+    ] })
+  ] });
+}
 
 // src/index.ts
-var ShopPage = React2.lazy(() => import('./ShopPage-HCLXMN7Q.js').then((m) => ({ default: m.ShopPage })));
+var ShopPage = React3.lazy(() => import('./ShopPage-JP27MZS2.js').then((m) => ({ default: m.ShopPage })));
 function createShopPlugin(options) {
   const curr = { code: "BRL", locale: "pt-BR", symbol: "R$", ...options?.currency };
   setShopTenantResolver(() => useOrganizationStore.getState().currentOrg?.id);
-  registerEntityPath("shop_customer", "/shop/customers");
+  registerEntityPath("shop_customer", "/customers");
   const pageFor = (section) => {
-    const Wrapped = () => React2.createElement(
-      React2.Suspense,
+    const Wrapped = () => React3.createElement(
+      React3.Suspense,
       { fallback: null },
-      React2.createElement(
+      React3.createElement(
         ShopPage,
         { provider: options?.provider, section }
       )
@@ -1068,10 +1262,12 @@ function createShopPlugin(options) {
   const SECTIONS = [
     { 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" }
   ];
+  const CustomersNavLabel = options?.sectionLabels?.customers ?? "Clientes";
+  const ChannelsPageWrapped = () => React3.createElement(ChannelsPage, { resolveProvider: options?.provider });
+  ChannelsPageWrapped.displayName = "ChannelsPage";
   const navSection = options?.navSection ?? "main";
   const navPosition = options?.navPosition ?? 6;
   return {
@@ -1104,7 +1300,27 @@ function createShopPlugin(options) {
         route: `/shop/${s.id}`,
         icon: s.icon,
         permission: { feature: "shop", action: "read" }
-      }))
+      })),
+      // 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" }
+      },
+      // 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" }
+      }
     ],
     routes: [
       {
@@ -1117,7 +1333,19 @@ function createShopPlugin(options) {
         path: `/shop/${s.id}`,
         component: CRUD_PAGES[s.id] ?? pageFor(s.id),
         permission: { feature: "shop", action: "read" }
-      }))
+      })),
+      // Clientes at the top level, same CRUD page as before.
+      {
+        path: "/customers",
+        component: CustomersCrudPage,
+        permission: { feature: "shop", action: "read" }
+      },
+      // Canais de venda management page (under the Loja group).
+      {
+        path: "/shop/channels",
+        component: ChannelsPageWrapped,
+        permission: { feature: "shop", action: "read" }
+      }
     ],
     widgets: [],
     aiTools: [
@@ -1166,7 +1394,7 @@ function createShopPlugin(options) {
         label: "Shop",
         icon: "ShoppingBag",
         component: (() => {
-          const ShopSettingsTab = () => React2.createElement(ShopSettings, { currency: curr });
+          const ShopSettingsTab = () => React3.createElement(ShopSettings, { currency: curr });
           ShopSettingsTab.displayName = "ShopSettingsTab";
           return ShopSettingsTab;
         })(),