@fayz-ai/plugin-marketing 0.9.0-next.0 → 0.9.0

package/src/views/LandingPageComposer.tsx

@@ -0,0 +1,201 @@
+import React from 'react'
+import { Sparkles } from 'lucide-react'
+import {
+  Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter,
+  Button, Input, Badge, SegmentedControl,
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { useMarketingStore } from '../MarketingContext'
+import type { LandingPage, LandingPageStatus } from '../types'
+
+/** 'Consulta capilar' → 'consulta-capilar' — the shape CRM tag slugs take. */
+function slugify(value: string): string {
+  return value
+    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase().trim()
+    .replace(/[^a-z0-9:]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+export function LandingPageComposer({
+  open, page, onClose,
+}: { open: boolean; page?: LandingPage | null; onClose: () => void }) {
+  const t = useTranslation()
+  const sites = useMarketingStore((s) => s.sites)
+  const leadTags = useMarketingStore((s) => s.leadTags)
+  const saveLandingPage = useMarketingStore((s) => s.saveLandingPage)
+
+  const [siteId, setSiteId] = React.useState('')
+  const [name, setName] = React.useState('')
+  const [route, setRoute] = React.useState('')
+  const [status, setStatus] = React.useState<LandingPageStatus>('live')
+  const [prompt, setPrompt] = React.useState('')
+  const [tags, setTags] = React.useState<string[]>([])
+  const [newTag, setNewTag] = React.useState('')
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open) return
+    setSiteId(page?.siteId ?? sites[0]?.id ?? '')
+    setName(page?.name ?? '')
+    setRoute(page?.route ?? '')
+    setStatus(page?.status ?? 'live')
+    setPrompt(page?.prompt ?? '')
+    setTags(page?.leadTags ?? [])
+    setNewTag('')
+  }, [open, page, sites])
+
+  const site = sites.find((s) => s.id === siteId)
+  const previewPath = route.trim() ? (route.trim().startsWith('/') ? route.trim() : `/${route.trim()}`) : ''
+
+  // The catalog plus whatever this page already carries: a slug used by a
+  // campaign before anyone curated the vocabulary is still a real tag.
+  const options = React.useMemo(() => {
+    const byslug = new Map(leadTags.map((tag) => [tag.slug, tag.name]))
+    for (const slug of tags) if (!byslug.has(slug)) byslug.set(slug, slug)
+    return [...byslug].map(([slug, label]) => ({ slug, label }))
+  }, [leadTags, tags])
+
+  function toggleTag(slug: string) {
+    setTags((current) => (current.includes(slug) ? current.filter((s) => s !== slug) : [...current, slug]))
+  }
+
+  function addTag() {
+    const slug = slugify(newTag)
+    if (!slug) return
+    setTags((current) => (current.includes(slug) ? current : [...current, slug]))
+    setNewTag('')
+  }
+
+  async function handleSave() {
+    if (!siteId || !name.trim() || !route.trim()) return
+    setSaving(true)
+    try {
+      await saveLandingPage({
+        id: page?.id,
+        siteId,
+        name: name.trim(),
+        route: route.trim(),
+        leadTags: tags,
+        status,
+        prompt: status === 'planned' ? prompt.trim() || undefined : undefined,
+      })
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal open={open} onOpenChange={(o) => { if (!o) onClose() }}>
+      <ModalContent size="md">
+        <ModalHeader>
+          <ModalTitle>{page ? t('marketing.landing.edit') : t('marketing.landing.new')}</ModalTitle>
+        </ModalHeader>
+        <ModalBody className="space-y-4">
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.landing.site')}</span>
+            <Select value={siteId} onValueChange={setSiteId}>
+              <SelectTrigger><SelectValue placeholder={t('marketing.landing.sitePlaceholder')} /></SelectTrigger>
+              <SelectContent>
+                {sites.map((s) => (
+                  <SelectItem key={s.id} value={s.id}>
+                    {s.url ? `${s.name} · ${s.url.replace(/^https?:\/\//, '')}` : s.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </label>
+
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.landing.name')}</span>
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('marketing.landing.namePlaceholder')} />
+          </label>
+
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.landing.route')}</span>
+            <Input value={route} onChange={(e) => setRoute(e.target.value)} placeholder="/lp-capilar" />
+            {site?.url && previewPath ? (
+              <span className="block text-xs text-muted-foreground">
+                {site.url.replace(/\/+$/, '')}{previewPath}
+              </span>
+            ) : null}
+          </label>
+
+          <div className="space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.landing.status')}</span>
+            <SegmentedControl
+              value={status}
+              onChange={(v) => setStatus(v as LandingPageStatus)}
+              options={[
+                { value: 'live', label: t('marketing.landing.statusLive') },
+                { value: 'planned', label: t('marketing.landing.statusPlanned') },
+              ]}
+            />
+          </div>
+
+          {status === 'planned' ? (
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-sm font-medium text-foreground">{t('marketing.landing.prompt')}</span>
+                {site?.editorUrl ? (
+                  <button
+                    type="button"
+                    onClick={() => window.open(site.editorUrl!, '_blank', 'noopener,noreferrer')}
+                    className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
+                  >
+                    <Sparkles className="h-3.5 w-3.5" /> {t('marketing.landing.buildWithFayz')}
+                  </button>
+                ) : null}
+              </div>
+              <textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                rows={3}
+                placeholder={t('marketing.landing.promptPlaceholder')}
+                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          ) : null}
+
+          {/* One field, not a chip list plus a form: the catalog and the free
+              slug live in the same box, like any tag picker. */}
+          <div className="space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.landing.leadTag')}</span>
+            <div className="flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-background px-2 py-2 focus-within:ring-2 focus-within:ring-ring">
+              {options.map((opt) => {
+                const active = tags.includes(opt.slug)
+                return (
+                  <Badge
+                    key={opt.slug}
+                    variant={active ? 'default' : 'outline'}
+                    className="cursor-pointer text-xs"
+                    onClick={() => toggleTag(opt.slug)}
+                  >
+                    {opt.label}
+                  </Badge>
+                )
+              })}
+              <input
+                value={newTag}
+                onChange={(e) => setNewTag(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag() } }}
+                onBlur={addTag}
+                placeholder={t('marketing.landing.leadTagPlaceholder')}
+                className="min-w-[8rem] flex-1 border-0 bg-transparent px-1 text-xs text-foreground outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+            <span className="block text-xs text-muted-foreground">{t('marketing.landing.leadTagHint')}</span>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="outline" onClick={onClose}>{t('marketing.composer.cancel')}</Button>
+          <Button onClick={handleSave} disabled={saving || !siteId || !name.trim() || !route.trim()}>
+            {page ? t('marketing.landing.save') : t('marketing.landing.create')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/views/LandingPagesView.tsx

@@ -1,49 +1,172 @@
 import React from 'react'
-import { MousePointerClick, Layers, Percent } from 'lucide-react'
+import { MousePointerClick, Layers, Users, Plus, Pencil, Trash2, ExternalLink, Sparkles } from 'lucide-react'
 import type { ColumnDef } from '@tanstack/react-table'
-import { DataTable } from '@fayz-ai/ui'
+import { Button, DataTable } from '@fayz-ai/ui'
+import { PermissionGate } from '@fayz-ai/saas'
 import { useTranslation } from '@fayz-ai/core'
 import { useMarketingStore } from '../MarketingContext'
 import { formatNumber, formatPercent } from '../format'
 import { KpiCard, RangeTabs } from '../components/MarketingBits'
+import { LandingPageComposer } from './LandingPageComposer'
 import type { LandingPagePerf } from '../types'
 
-const TYPE_STYLE: Record<string, string> = {
-  Funnel: 'bg-indigo-100 text-indigo-700',
-  'Landing page': 'bg-pink-100 text-pink-700',
-  Website: 'bg-sky-100 text-sky-700',
-}
-
 export function LandingPagesView() {
   const t = useTranslation()
   const pages = useMarketingStore((s) => s.landingPages)
+  const deleteLandingPage = useMarketingStore((s) => s.deleteLandingPage)
+  const [editing, setEditing] = React.useState<LandingPagePerf | null>(null)
+  const [composerOpen, setComposerOpen] = React.useState(false)
+
+  // Visits are only known for pages whose host reports them; a page with an
+  // unknown count must not drag the total down to a wrong number.
+  const measured = pages.filter((p) => p.visits !== null)
+  const totalVisits = measured.reduce((s, p) => s + (p.visits ?? 0), 0)
+  const totalLeads = pages.reduce((s, p) => s + p.conversions, 0)
 
-  const totalVisits = pages.reduce((s, p) => s + p.visits, 0)
-  const totalConv = pages.reduce((s, p) => s + p.conversions, 0)
-  const avgCvr = totalVisits > 0 ? (totalConv / totalVisits) * 100 : 0
+  function openNew() {
+    setEditing(null)
+    setComposerOpen(true)
+  }
+
+  function openEdit(page: LandingPagePerf) {
+    setEditing(page)
+    setComposerOpen(true)
+  }
 
   const columns = React.useMemo<ColumnDef<LandingPagePerf, any>[]>(() => [
-    { accessorKey: 'name', header: t('marketing.col.page'), cell: ({ getValue }) => <span className="font-medium text-foreground">{getValue() as string}</span> },
-    { accessorKey: 'type', header: t('marketing.col.type'), cell: ({ getValue }) => { const v = getValue() as string; return <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${TYPE_STYLE[v] ?? 'bg-muted text-muted-foreground'}`}>{v}</span> } },
-    { accessorKey: 'visits', header: t('marketing.col.visits'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatNumber(getValue() as number)}</span> },
-    { accessorKey: 'conversions', header: t('marketing.col.conversions'), cell: ({ getValue }) => <span className="font-medium text-foreground">{formatNumber(getValue() as number)}</span> },
-    { accessorKey: 'cvr', header: t('marketing.col.cvr'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatPercent(getValue() as number)}</span> },
-  ], [t])
+    {
+      accessorKey: 'name',
+      header: t('marketing.col.page'),
+      cell: ({ row }) => (
+        <div className="min-w-0">
+          <span className="flex items-center gap-1.5 truncate font-medium text-foreground">
+            {row.original.name}
+            {row.original.status === 'planned' ? (
+              <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-800">
+                {t('marketing.landing.statusPlanned')}
+              </span>
+            ) : null}
+          </span>
+          <span className="block truncate text-xs text-muted-foreground">{row.original.siteName}</span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'route',
+      header: t('marketing.col.route'),
+      cell: ({ row }) => (
+        <a
+          href={row.original.url}
+          target="_blank"
+          rel="noreferrer"
+          onClick={(e) => e.stopPropagation()}
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground hover:underline"
+        >
+          {row.original.route}
+          <ExternalLink className="h-3 w-3" />
+        </a>
+      ),
+    },
+    {
+      accessorKey: 'leadTags',
+      header: t('marketing.col.leadTag'),
+      cell: ({ getValue }) => {
+        const tags = (getValue() as string[]) ?? []
+        if (!tags.length) return <span className="text-muted-foreground">—</span>
+        return (
+          <div className="flex flex-wrap gap-1">
+            {tags.map((tag) => (
+              <span key={tag} className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">{tag}</span>
+            ))}
+          </div>
+        )
+      },
+    },
+    {
+      accessorKey: 'visits',
+      header: t('marketing.col.visits'),
+      cell: ({ getValue }) => {
+        const visits = getValue() as number | null
+        return visits === null
+          ? <span className="text-muted-foreground" title={t('marketing.landing.visitsPending')}>—</span>
+          : <span className="text-muted-foreground">{formatNumber(visits)}</span>
+      },
+    },
+    {
+      accessorKey: 'conversions',
+      header: t('marketing.col.leads'),
+      cell: ({ getValue }) => <span className="font-medium text-foreground">{formatNumber(getValue() as number)}</span>,
+    },
+    {
+      accessorKey: 'cvr',
+      header: t('marketing.col.cvr'),
+      cell: ({ getValue }) => {
+        const cvr = getValue() as number | null
+        return cvr === null
+          ? <span className="text-muted-foreground">—</span>
+          : <span className="text-muted-foreground">{formatPercent(cvr)}</span>
+      },
+    },
+    {
+      id: 'actions', header: '', enableSorting: false,
+      cell: ({ row }) => (
+        <div className="flex items-center justify-end gap-1">
+          {row.original.status === 'planned' && row.original.editorUrl ? (
+            <button
+              onClick={(e) => { e.stopPropagation(); window.open(row.original.editorUrl!, '_blank', 'noopener,noreferrer') }}
+              className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              title={t('marketing.landing.buildWithFayz')}
+            >
+              <Sparkles className="h-4 w-4" />
+            </button>
+          ) : null}
+          <button
+            onClick={(e) => { e.stopPropagation(); openEdit(row.original) }}
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            title={t('marketing.landing.edit')}
+          >
+            <Pencil className="h-4 w-4" />
+          </button>
+          <button
+            onClick={(e) => { e.stopPropagation(); void deleteLandingPage(row.original.id) }}
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+            title={t('marketing.landing.delete')}
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </div>
+      ),
+    },
+  ], [t, deleteLandingPage])
 
   return (
     <div className="mx-auto max-w-6xl space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">{t('marketing.landing.subtitle')}</p>
+      <div className="flex items-center justify-end gap-2">
         <RangeTabs />
+        <PermissionGate feature="marketing" action="create">
+          <Button onClick={openNew}>
+            <Plus className="mr-1.5 h-4 w-4" /> {t('marketing.landing.new')}
+          </Button>
+        </PermissionGate>
       </div>
 
       <div className="grid grid-cols-3 gap-4">
-        <KpiCard icon={MousePointerClick} label={t('marketing.metric.totalVisits')} value={formatNumber(totalVisits)} />
         <KpiCard icon={Layers} label={t('marketing.metric.pages')} value={String(pages.length)} />
-        <KpiCard icon={Percent} label={t('marketing.metric.avgConversion')} value={formatPercent(avgCvr)} />
+        <KpiCard
+          icon={MousePointerClick}
+          label={t('marketing.metric.totalVisits')}
+          value={measured.length > 0 ? formatNumber(totalVisits) : '—'}
+        />
+        <KpiCard icon={Users} label={t('marketing.metric.leads')} value={formatNumber(totalLeads)} />
       </div>
 
-      <DataTable columns={columns} data={pages} emptyMessage={t('marketing.landing.subtitle')} />
+      <DataTable columns={columns} data={pages} emptyMessage={t('marketing.landing.empty')} />
+
+      {measured.length < pages.length ? (
+        <p className="text-xs text-muted-foreground">{t('marketing.landing.visitsPending')}</p>
+      ) : null}
+
+      <LandingPageComposer open={composerOpen} page={editing} onClose={() => { setComposerOpen(false); setEditing(null) }} />
     </div>
   )
 }