@consilioweb/payload-support 0.10.0 → 0.11.0

package/src/portal/auth/tickets/new/KbDeflection.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+interface KbResult {
+  id: number | string
+  title: string
+  slug: string
+  excerpt: string
+  category: string
+  score: number
+}
+
+interface KbDeflectionProps {
+  query: string
+  /** Max number of suggestions to show (default 3). */
+  limit?: number
+}
+
+/**
+ * Live KB suggestions under the "Subject" field of the new-ticket form.
+ *
+ * - Debounces the query (400ms) to avoid hitting the endpoint on each keystroke.
+ * - Hides itself when the query is too short (< 3 chars) or returns no results.
+ * - Renders nothing while loading the first time to avoid flicker.
+ *
+ * The goal is deflection: let the client find an answer before submitting a
+ * ticket. Opens articles in a new tab so the form state is preserved.
+ */
+export default function KbDeflection({ query, limit = 3 }: KbDeflectionProps) {
+  const [results, setResults] = useState<KbResult[]>([])
+  const [dismissed, setDismissed] = useState(false)
+
+  useEffect(() => {
+    const trimmed = (query || '').trim()
+    if (trimmed.length < 3) {
+      setResults([])
+      return
+    }
+
+    const ctrl = new AbortController()
+    const timer = window.setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `/api/support/kb/search?q=${encodeURIComponent(trimmed)}&limit=${limit}`,
+          { signal: ctrl.signal, credentials: 'include' },
+        )
+        if (!res.ok) {
+          setResults([])
+          return
+        }
+        const data = (await res.json()) as { results?: KbResult[] }
+        setResults(Array.isArray(data.results) ? data.results : [])
+      } catch (err) {
+        if ((err as Error).name === 'AbortError') return
+        setResults([])
+      }
+    }, 400)
+
+    return () => {
+      ctrl.abort()
+      window.clearTimeout(timer)
+    }
+  }, [query, limit])
+
+  // Reset dismissal whenever the user types a new query.
+  useEffect(() => {
+    setDismissed(false)
+  }, [query])
+
+  if (dismissed) return null
+  if (!results || results.length === 0) return null
+
+  return (
+    <div
+      role="region"
+      aria-label="Articles suggérés"
+      className="animate-in slide-in-from-top-2 fade-in mt-3 rounded-xl border border-blue-100 bg-blue-50/60 p-4 duration-300 dark:border-blue-900/40 dark:bg-blue-950/30"
+    >
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <p className="text-sm font-semibold text-blue-700 dark:text-blue-300">
+          💡 Ces articles peuvent répondre à votre question
+        </p>
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          className="text-[11px] font-medium text-blue-600/70 hover:text-blue-700 dark:text-blue-300/70 dark:hover:text-blue-200"
+        >
+          Ignorer
+        </button>
+      </div>
+
+      <ul className="space-y-2">
+        {results.map((r) => (
+          <li
+            key={r.id}
+            className="rounded-lg border border-blue-100 bg-white p-3 transition-colors hover:border-blue-300 hover:bg-blue-50/40 dark:border-blue-900/50 dark:bg-slate-900/40 dark:hover:border-blue-700"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                <h4 className="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">
+                  {r.title}
+                </h4>
+                {r.excerpt && (
+                  <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+                    {r.excerpt}
+                  </p>
+                )}
+              </div>
+              <a
+                href={`/support/kb/${r.slug}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-shrink-0 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition hover:bg-blue-700"
+              >
+                Lire l&apos;article
+              </a>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <p className="mt-3 text-[11px] text-slate-500 dark:text-slate-400">
+        Mon problème n&apos;est pas résolu — continuez à remplir le formulaire pour créer un ticket.
+      </p>
+    </div>
+  )
+}

package/src/portal/auth/tickets/new/page.tsx

@@ -2,13 +2,14 @@
 
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
+import KbDeflection from './KbDeflection'
 
 const categories = [
-  { label: 'Bug / Dysfonctionnement', value: 'bug', icon: '🐛' },
-  { label: 'Modification de contenu', value: 'content', icon: '📝' },
-  { label: 'Nouvelle fonctionnalité', value: 'feature', icon: '✨' },
-  { label: 'Question / Aide', value: 'question', icon: '💬' },
-  { label: 'Hébergement / Domaine', value: 'hosting', icon: '🌐' },
+  { label: 'Bug / Dysfonctionnement', shortLabel: 'Bug', desc: 'Quelque chose ne fonctionne pas', value: 'bug', icon: '🐛' },
+  { label: 'Modification de contenu', shortLabel: 'Contenu', desc: 'Texte, image, page', value: 'content', icon: '📝' },
+  { label: 'Nouvelle fonctionnalité', shortLabel: 'Feature', desc: 'Idee, evolution', value: 'feature', icon: '✨' },
+  { label: 'Question / Aide', shortLabel: 'Question', desc: 'Information, conseil', value: 'question', icon: '💬' },
+  { label: 'Hébergement / Domaine', shortLabel: 'Hebergement', desc: 'DNS, mail, performance', value: 'hosting', icon: '🌐' },
 ]
 
 const templates: Record<string, { subject: string; message: string }> = {
@@ -30,13 +31,49 @@ const templates: Record<string, { subject: string; message: string }> = {
   },
 }
 
+// SLA fallback values (hours) used when no sla-policies record matches.
+// Aligned with the brief: urgent=2h, high=4h, normal=24h, low=48h.
+const SLA_FALLBACK_HOURS: Record<string, number> = {
+  urgent: 2,
+  high: 4,
+  normal: 24,
+  low: 48,
+}
+
 const priorities = [
-  { label: 'Basse', value: 'low', color: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300' },
-  { label: 'Normale', value: 'normal', color: 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' },
-  { label: 'Haute', value: 'high', color: 'bg-amber-50 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400' },
-  { label: 'Urgente', value: 'urgent', color: 'bg-red-50 text-red-600 dark:bg-red-900/30 dark:text-red-400' },
+  {
+    label: 'Pas urgent',
+    value: 'low',
+    desc: 'Peut attendre quelques jours',
+    color: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300',
+  },
+  {
+    label: 'Normal',
+    value: 'normal',
+    desc: 'Demande standard',
+    color: 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
+  },
+  {
+    label: 'Important',
+    value: 'high',
+    desc: 'Genere une gene quotidienne',
+    color: 'bg-amber-50 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400',
+  },
+  {
+    label: 'Urgent',
+    value: 'urgent',
+    desc: 'Bloque mon activite',
+    color: 'bg-red-50 text-red-600 dark:bg-red-900/30 dark:text-red-400',
+  },
 ]
 
+function formatSla(hours: number): string {
+  if (hours < 1) return 'moins d\'1h'
+  if (hours < 24) return `${hours}h`
+  const days = Math.round(hours / 24)
+  return days === 1 ? '1 jour' : `${days} jours`
+}
+
 interface Project {
   id: number | string
   name: string
@@ -58,7 +95,8 @@ export default function NewTicketPage() {
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
-  const [showAdvanced, setShowAdvanced] = useState(false)
+  // Map of priority → SLA in hours, loaded from sla-policies when available.
+  const [slaByPriority, setSlaByPriority] = useState<Record<string, number>>(SLA_FALLBACK_HOURS)
 
   useEffect(() => {
     const fetchProjects = async () => {
@@ -75,6 +113,32 @@ export default function NewTicketPage() {
     fetchProjects()
   }, [])
 
+  // Load SLA policies — try to read first-response targets and override fallback per priority.
+  // Endpoint may not be public; on failure we just keep the fallback.
+  useEffect(() => {
+    const fetchSla = async () => {
+      try {
+        const res = await fetch('/api/sla-policies?limit=10&depth=0', { credentials: 'include' })
+        if (!res.ok) return
+        const data = await res.json()
+        const next: Record<string, number> = { ...SLA_FALLBACK_HOURS }
+        for (const policy of data.docs || []) {
+          // SLA policy shape may vary — try common field names defensively.
+          const prio = (policy.priority || policy.level || '').toLowerCase()
+          const responseHours: number | undefined =
+            policy.firstResponseHours ??
+            policy.responseTimeHours ??
+            (typeof policy.firstResponseMinutes === 'number' ? policy.firstResponseMinutes / 60 : undefined)
+          if (prio && typeof responseHours === 'number' && responseHours > 0) {
+            next[prio] = responseHours
+          }
+        }
+        setSlaByPriority(next)
+      } catch { /* keep fallback */ }
+    }
+    fetchSla()
+  }, [])
+
   const addFiles = useCallback((newFiles: File[]) => {
     const tooLarge = newFiles.filter((f) => f.size > MAX_FILE_SIZE)
     if (tooLarge.length > 0) {
@@ -273,6 +337,8 @@ export default function NewTicketPage() {
                 placeholder="Ex: Erreur 404 sur la page contact"
                 className="w-full rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-900/50 px-4 py-3 text-sm text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 outline-none transition-all duration-200 focus:border-blue-500 focus:bg-white dark:focus:bg-slate-900 focus:ring-4 focus:ring-blue-500/10"
               />
+              {/* KB deflection — suggest existing articles before ticket creation */}
+              <KbDeflection query={subject} limit={3} />
             </div>
 
             {/* Description */}
@@ -380,102 +446,139 @@ export default function NewTicketPage() {
               )}
             </div>
 
-            {/* Advanced options toggle */}
-            <div className="border-t border-slate-100 dark:border-slate-700/50 pt-5">
-              <button
-                type="button"
-                onClick={() => setShowAdvanced(!showAdvanced)}
-                className="group flex w-full items-center justify-between rounded-lg px-1 py-1 text-sm font-medium text-slate-500 dark:text-slate-400 transition-colors hover:text-slate-700 dark:hover:text-slate-200"
+            {/* Category — radio cards in a responsive grid (no longer hidden behind a toggle) */}
+            <div className="mb-6">
+              <label className="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">
+                Categorie
+              </label>
+              <div
+                role="radiogroup"
+                aria-label="Categorie du ticket"
+                className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5"
               >
-                <span className="flex items-center gap-2">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
-                    <path d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z" />
-                  </svg>
-                  Options avancees
-                </span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  className={`h-4 w-4 transition-transform duration-200 ${showAdvanced ? 'rotate-180' : ''}`}
-                >
-                  <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
-                </svg>
-              </button>
-
-              {showAdvanced && (
-                <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3 rounded-xl border border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-900/30 p-5">
-                  {/* Category */}
-                  <div>
-                    <label htmlFor="category" className="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                      Categorie
-                    </label>
-                    <select
-                      id="category"
-                      value={category}
-                      onChange={(e) => {
-                        const val = e.target.value
-                        setCategory(val)
-                        const tmpl = templates[val]
-                        if (tmpl) {
-                          if (!message.trim()) setMessage(tmpl.message)
-                          if (!subject.trim() && tmpl.subject) setSubject(tmpl.subject)
-                        }
-                      }}
-                      className="w-full rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2.5 text-sm text-slate-900 dark:text-white outline-none transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10"
+                {categories.map((cat) => {
+                  const isActive = category === cat.value
+                  return (
+                    <label
+                      key={cat.value}
+                      className={`group relative flex cursor-pointer flex-col items-start gap-1 rounded-xl border p-3 text-left transition-all ${
+                        isActive
+                          ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 dark:border-blue-400 dark:bg-blue-950/40'
+                          : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50 dark:hover:border-slate-600 dark:hover:bg-slate-800'
+                      }`}
                     >
-                      <option value="">Selectionner</option>
-                      {categories.map((cat) => (
-                        <option key={cat.value} value={cat.value}>
-                          {cat.icon} {cat.label}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  {/* Priority */}
-                  <div>
-                    <label htmlFor="priority" className="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                      Priorite
+                      <input
+                        type="radio"
+                        name="category"
+                        value={cat.value}
+                        checked={isActive}
+                        onChange={() => {
+                          setCategory(cat.value)
+                          const tmpl = templates[cat.value]
+                          if (tmpl) {
+                            if (!message.trim()) setMessage(tmpl.message)
+                            if (!subject.trim() && tmpl.subject) setSubject(tmpl.subject)
+                          }
+                        }}
+                        className="sr-only"
+                      />
+                      <span className="text-xl" aria-hidden>{cat.icon}</span>
+                      <span className={`text-sm font-semibold ${
+                        isActive ? 'text-blue-700 dark:text-blue-300' : 'text-slate-800 dark:text-slate-200'
+                      }`}>
+                        {cat.shortLabel}
+                      </span>
+                      <span className="text-xs text-slate-500 dark:text-slate-400">
+                        {cat.desc}
+                      </span>
                     </label>
-                    <select
-                      id="priority"
-                      value={priority}
-                      onChange={(e) => setPriority(e.target.value)}
-                      className="w-full rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2.5 text-sm text-slate-900 dark:text-white outline-none transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10"
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* Priority — radio cards with dynamic SLA per level */}
+            <div className="mb-6">
+              <label className="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">
+                Niveau d&apos;urgence
+              </label>
+              <div role="radiogroup" aria-label="Niveau d'urgence" className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                {priorities.map((p) => {
+                  const isActive = priority === p.value
+                  const slaHours = slaByPriority[p.value] ?? SLA_FALLBACK_HOURS[p.value]
+                  return (
+                    <label
+                      key={p.value}
+                      className={`flex cursor-pointer items-start gap-3 rounded-xl border p-3 transition-all ${
+                        isActive
+                          ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 dark:border-blue-400 dark:bg-blue-950/40'
+                          : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50 dark:hover:border-slate-600 dark:hover:bg-slate-800'
+                      }`}
                     >
-                      {priorities.map((p) => (
-                        <option key={p.value} value={p.value}>
-                          {p.label}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  {/* Project */}
-                  {projects.length > 0 && (
-                    <div>
-                      <label htmlFor="project" className="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                        Projet
-                      </label>
-                      <select
-                        id="project"
-                        value={project}
-                        onChange={(e) => setProject(e.target.value)}
-                        className="w-full rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2.5 text-sm text-slate-900 dark:text-white outline-none transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10"
+                      <input
+                        type="radio"
+                        name="priority"
+                        value={p.value}
+                        checked={isActive}
+                        onChange={() => setPriority(p.value)}
+                        className="sr-only"
+                      />
+                      <span
+                        aria-hidden
+                        className={`mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2 ${
+                          isActive
+                            ? 'border-blue-500 dark:border-blue-400'
+                            : 'border-slate-300 dark:border-slate-600'
+                        }`}
                       >
-                        <option value="">Selectionner</option>
-                        {projects.map((p) => (
-                          <option key={p.id} value={p.id}>
-                            {p.name}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-                </div>
-              )}
+                        {isActive && <span className="h-2 w-2 rounded-full bg-blue-500 dark:bg-blue-400" />}
+                      </span>
+                      <span className="min-w-0 flex-1">
+                        <span className="flex flex-wrap items-baseline justify-between gap-2">
+                          <span className={`text-sm font-semibold ${
+                            isActive ? 'text-blue-700 dark:text-blue-300' : 'text-slate-800 dark:text-slate-200'
+                          }`}>
+                            {p.label}
+                          </span>
+                          <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${p.color}`}>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" aria-hidden>
+                              <circle cx="12" cy="12" r="10" />
+                              <polyline points="12 6 12 12 16 14" />
+                            </svg>
+                            Reponse sous {formatSla(slaHours)}
+                          </span>
+                        </span>
+                        <span className="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">
+                          {p.desc}
+                        </span>
+                      </span>
+                    </label>
+                  )
+                })}
+              </div>
             </div>
+
+            {/* Project selector (only shown when host app has projects) */}
+            {projects.length > 0 && (
+              <div className="mb-2">
+                <label htmlFor="project" className="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">
+                  Projet
+                </label>
+                <select
+                  id="project"
+                  value={project}
+                  onChange={(e) => setProject(e.target.value)}
+                  className="w-full rounded-xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2.5 text-sm text-slate-900 dark:text-white outline-none transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10"
+                >
+                  <option value="">Aucun projet specifique</option>
+                  {projects.map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
           </div>
 
           {/* Submit footer */}

package/src/portal/locales/en.json

@@ -309,6 +309,11 @@
       "normal": "Normal",
       "high": "High",
       "urgent": "Urgent"
+    },
+    "deflection": {
+      "title": "These articles may answer your question",
+      "readMore": "Read article",
+      "stillCreateTicket": "My issue isn't resolved — create a ticket anyway"
     }
   },
   "profile": {

package/src/portal/locales/fr.json

@@ -309,6 +309,11 @@
       "normal": "Normale",
       "high": "Haute",
       "urgent": "Urgente"
+    },
+    "deflection": {
+      "title": "Ces articles peuvent répondre à votre question",
+      "readMore": "Lire l'article",
+      "stillCreateTicket": "Mon problème n'est pas résolu — créer un ticket quand même"
     }
   },
   "profile": {