@consilioweb/payload-support 0.15.0 → 1.0.0

package/src/components/TicketConversation/components/ActionPanels.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useRef } from 'react'
-import { s } from '../constants'
+import { C, s } from '../constants'
 
 // ========== MERGE PANEL ==========
 interface MergePanelProps {
@@ -115,6 +115,87 @@ export function ExtMessagePanel({
   )
 }
 
+// ========== REMINDER PANEL ==========
+interface ReminderPanelProps {
+  clientFirstName: string
+  clientEmail: string
+  reminderHours: number
+  setReminderHours: (v: number) => void
+  reminderSending: boolean
+  reminderError: string
+  handleSendReminder: () => void
+}
+
+const REMINDER_DELAYS = [
+  { hours: 24, label: '24 h' },
+  { hours: 48, label: '48 h' },
+  { hours: 72, label: '72 h' },
+]
+
+export function ReminderPanel({
+  clientFirstName, clientEmail, reminderHours, setReminderHours,
+  reminderSending, reminderError, handleSendReminder,
+}: ReminderPanelProps) {
+  const deadline = new Date(Date.now() + reminderHours * 60 * 60 * 1000)
+  const deadlineLabel = deadline.toLocaleString('fr-FR', {
+    weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit',
+  })
+  const name = clientFirstName?.trim() || 'le client'
+
+  return (
+    <div style={{ padding: '14px 18px', borderRadius: '8px', backgroundColor: '#fff7ed', border: '1px solid #fed7aa', marginBottom: '14px' }}>
+      <h4 style={{ fontSize: '13px', fontWeight: 600, marginBottom: '8px', color: '#9a3412' }}>
+        Relancer {name} — fermeture automatique sans réponse
+      </h4>
+      {clientEmail ? (
+        <p style={{ fontSize: '12px', color: '#7c2d12', margin: '0 0 12px 0', lineHeight: 1.5 }}>
+          Un email de relance générique sera envoyé à <strong>{clientEmail}</strong>. Sans retour de sa part avant l&apos;échéance, le ticket sera automatiquement résolu (via le cron auto-close).
+        </p>
+      ) : (
+        <p style={{ fontSize: '12px', color: '#b91c1c', margin: '0 0 12px 0', fontWeight: 600 }}>
+          Ce client n&apos;a pas d&apos;adresse email : impossible d&apos;envoyer une relance.
+        </p>
+      )}
+
+      <div style={{ display: 'flex', gap: '6px', alignItems: 'center', flexWrap: 'wrap', marginBottom: '12px' }}>
+        <span style={{ fontSize: '12px', fontWeight: 600, color: '#9a3412' }}>Fermer dans :</span>
+        {REMINDER_DELAYS.map((d) => {
+          const active = reminderHours === d.hours
+          return (
+            <button
+              key={d.hours}
+              type="button"
+              onClick={() => setReminderHours(d.hours)}
+              style={{
+                ...(active ? s.btn(C.orange) : s.outlineBtn('#ea580c')),
+                fontSize: '12px', padding: '6px 14px',
+              }}
+            >
+              {d.label}
+            </button>
+          )
+        })}
+      </div>
+
+      <div style={{ fontSize: '12px', color: '#7c2d12', marginBottom: '12px' }}>
+        Fermeture automatique prévue le <strong>{deadlineLabel}</strong> sans réponse.
+      </div>
+
+      {reminderError && (
+        <div style={{ fontSize: '12px', color: '#b91c1c', fontWeight: 600, marginBottom: '10px' }}>{reminderError}</div>
+      )}
+
+      <button
+        onClick={handleSendReminder}
+        disabled={reminderSending || !clientEmail}
+        style={{ ...s.btn(C.orange, reminderSending || !clientEmail), color: '#fff', fontSize: '13px', padding: '8px 18px' }}
+      >
+        {reminderSending ? 'Envoi...' : 'Confirmer la relance'}
+      </button>
+    </div>
+  )
+}
+
 // ========== SNOOZE PANEL ==========
 interface SnoozePanelProps {
   snoozeSaving: boolean

package/src/components/TicketConversation/components/QuickActions.tsx

@@ -18,6 +18,13 @@ interface QuickActionsProps {
   onToggleExtMsg: () => void
   onToggleSnooze: () => void
   onNextTicket: () => void
+  // Reminder (relance + auto-close)
+  showReminderButton: boolean
+  onToggleReminder: () => void
+  autoCloseScheduledAt: string | null
+  onCancelScheduledClose: () => void
+  cancelingClose: boolean
+  reminderSuccess: boolean
   // Next ticket banner
   showNextTicket: boolean
   nextTicketId: number | null
@@ -30,8 +37,12 @@ export function QuickActions({
   snoozeUntil, snoozeSaving, onCancelSnooze,
   showMerge: _showMerge, showExtMsg: _showExtMsg, showSnooze: _showSnooze,
   onToggleMerge, onToggleExtMsg, onToggleSnooze, onNextTicket,
+  showReminderButton, onToggleReminder, autoCloseScheduledAt, onCancelScheduledClose, cancelingClose, reminderSuccess,
   showNextTicket, nextTicketId, nextTicketInfo, onCloseNextTicket,
 }: QuickActionsProps) {
+  const scheduledClose = autoCloseScheduledAt && new Date(autoCloseScheduledAt) > new Date()
+    ? new Date(autoCloseScheduledAt).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+    : null
   return (
     <>
       <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px', alignItems: 'center' }}>
@@ -54,7 +65,21 @@ export function QuickActions({
         <button onClick={onToggleMerge} style={s.ghostBtn('#be185d')}>Fusionner</button>
         <button onClick={onToggleExtMsg} style={s.ghostBtn('#4f46e5')}>+ Message reçu</button>
         <button onClick={onToggleSnooze} style={s.ghostBtn('#7c3aed')}>Snooze</button>
+        {showReminderButton && (
+          <button onClick={onToggleReminder} style={s.ghostBtn('#ea580c')}>{'⏰'} Relancer</button>
+        )}
         <button onClick={onNextTicket} style={s.ghostBtn('#16a34a')}>Ticket suivant</button>
+        {scheduledClose && (
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', padding: '5px 10px', borderRadius: '6px', backgroundColor: '#fff7ed', border: '1px solid #fed7aa', fontSize: '12px', color: '#9a3412', fontWeight: 600 }}>
+            {'⏰'} Fermeture auto le {scheduledClose}
+            <button onClick={onCancelScheduledClose} disabled={cancelingClose} style={{ border: 'none', background: 'none', color: '#b91c1c', cursor: cancelingClose ? 'not-allowed' : 'pointer', fontWeight: 700, fontSize: '12px', textDecoration: 'underline', padding: 0, opacity: cancelingClose ? 0.5 : 1 }}>
+              {cancelingClose ? '...' : 'Annuler'}
+            </button>
+          </span>
+        )}
+        {reminderSuccess && (
+          <span style={{ ...s.badge('#f0fdf4', '#16a34a'), fontSize: '12px', padding: '5px 10px' }}>Relance envoyée {'✓'}</span>
+        )}
       </div>
 
       {showNextTicket && (

package/src/components/TicketConversation/constants.ts

@@ -1,5 +1,34 @@
 import type React from 'react'
 
+// ── Rewrite style dropdown options ──────────────────────────────────────
+export const REWRITE_STYLES = [
+  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
+  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
+  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
+  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
+  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
+  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
+]
+
+// Inline layout styles
+export const layoutStyles = {
+  root: { padding: '12px 0' } as React.CSSProperties,
+  twoColumns: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 320px',
+    gap: '16px',
+    alignItems: 'start',
+  } as React.CSSProperties,
+  mainColumn: { minWidth: 0 } as React.CSSProperties,
+  sideColumn: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '12px',
+    position: 'sticky' as const,
+    top: '80px',
+  } as React.CSSProperties,
+}
+
 export const statusLabels: Record<string, { label: string; bg: string; color: string }> = {
   open: { label: 'Ouvert', bg: '#dbeafe', color: '#1e40af' },
   waiting_client: { label: 'Attente', bg: '#fef3c7', color: '#92400e' },

package/src/components/TicketConversation/hooks/useDocumentIdFromUrl.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+// Replacement for @payloadcms/ui's useDocumentInfo — avoids importing
+// @payloadcms/ui (which has chunk splits that break webpack resolution
+// when this bundle is consumed from node_modules).
+// Extracts the document id from the admin URL pattern:
+// /admin/collections/:slug/:id  or  /admin/globals/:slug
+export function useDocumentIdFromUrl(): { id: string | number | undefined } {
+  const [id, setId] = useState<string | number | undefined>(undefined)
+  useEffect(() => {
+    const match = window.location.pathname.match(
+      /\/admin\/collections\/[^/]+\/([^/?#]+)/
+    )
+    if (match && match[1] !== 'create') {
+      const raw = match[1]
+      const num = Number(raw)
+      setId(Number.isFinite(num) && String(num) === raw ? num : raw)
+    }
+  }, [])
+  return { id }
+}

package/src/components/TicketConversation/hooks/useTicketActions.ts

@@ -23,6 +23,13 @@ export function useTicketActions(
   const [showSnooze, setShowSnooze] = useState(false)
   const [snoozeUntil, setSnoozeUntil] = useState<string | null>(null)
   const [snoozeSaving, setSnoozeSaving] = useState(false)
+  // Reminder (relance + auto-close arming)
+  const [showReminder, setShowReminder] = useState(false)
+  const [reminderHours, setReminderHours] = useState(24)
+  const [reminderSending, setReminderSending] = useState(false)
+  const [reminderError, setReminderError] = useState('')
+  const [reminderSuccess, setReminderSuccess] = useState(false)
+  const [cancelingClose, setCancelingClose] = useState(false)
   // Next ticket
   const [showNextTicket, setShowNextTicket] = useState(false)
   const [nextTicketId, setNextTicketId] = useState<number | null>(null)
@@ -178,6 +185,49 @@ export function useTicketActions(
     }
   }
 
+  const handleSendReminder = async () => {
+    if (!id) return
+    setReminderSending(true)
+    setReminderError('')
+    try {
+      const res = await fetch('/api/support/send-reminder', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ ticketId: id, hours: reminderHours }),
+      })
+      const d = await res.json().catch(() => ({}))
+      if (res.ok) {
+        setShowReminder(false)
+        setReminderSuccess(true)
+        setTimeout(() => setReminderSuccess(false), 5000)
+        fetchAll()
+      } else {
+        setReminderError(d.error || 'Erreur lors de la relance')
+      }
+    } catch {
+      setReminderError('Erreur réseau')
+    } finally {
+      setReminderSending(false)
+    }
+  }
+
+  const handleCancelScheduledClose = async () => {
+    if (!id) return
+    setCancelingClose(true)
+    try {
+      await fetch(`/api/tickets/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ autoCloseScheduledAt: null, autoCloseRemindedAt: null }),
+      })
+      fetchAll()
+    } catch { /* ignore */ } finally {
+      setCancelingClose(false)
+    }
+  }
+
   const handleNextTicket = async () => {
     try {
       const res = await fetch('/api/tickets?where[status][equals]=open&sort=updatedAt&limit=1&depth=0', { credentials: 'include' })
@@ -200,6 +250,7 @@ export function useTicketActions(
     showMerge, setShowMerge, mergeTarget, setMergeTarget, mergeTargetInfo, setMergeTargetInfo, mergeError, setMergeError, merging, handleMergeLookup, handleMerge,
     showExtMsg, setShowExtMsg, extMsgBody, setExtMsgBody, extMsgAuthor, setExtMsgAuthor, extMsgDate, setExtMsgDate, extMsgFiles, setExtMsgFiles, sendingExtMsg, handleExtFileChange, handleSendExtMsg,
     showSnooze, setShowSnooze, snoozeUntil, setSnoozeUntil, snoozeSaving, handleSnooze,
+    showReminder, setShowReminder, reminderHours, setReminderHours, reminderSending, reminderError, setReminderError, reminderSuccess, handleSendReminder, cancelingClose, handleCancelScheduledClose,
     showNextTicket, setShowNextTicket, nextTicketId, nextTicketInfo, handleNextTicket,
   }
 }

package/src/components/TicketConversation/index.tsx

@@ -1,29 +1,9 @@
 'use client'
 
 import React, { useState, useEffect, useCallback, useRef } from 'react'
-
-// Replacement for @payloadcms/ui's useDocumentInfo — avoids importing
-// @payloadcms/ui (which has chunk splits that break webpack resolution
-// when this bundle is consumed from node_modules).
-// Extracts the document id from the admin URL pattern:
-// /admin/collections/:slug/:id  or  /admin/globals/:slug
-function useDocumentIdFromUrl(): { id: string | number | undefined } {
-  const [id, setId] = useState<string | number | undefined>(undefined)
-  useEffect(() => {
-    const match = window.location.pathname.match(
-      /\/admin\/collections\/[^/]+\/([^/?#]+)/
-    )
-    if (match && match[1] !== 'create') {
-      const raw = match[1]
-      const num = Number(raw)
-      setId(Number.isFinite(num) && String(num) === raw ? num : raw)
-    }
-  }, [])
-  return { id }
-}
 import type { Message, TimeEntry, ClientInfo, CannedResponse, ActivityEntry, SatisfactionSurvey } from './types'
 import type { RichTextEditorHandle } from './context'
-import { C, s } from './constants'
+import { C, s, layoutStyles } from './constants'
 import { getDateLabel, formatMessageDate } from './utils'
 import { CodeBlockRenderer, CodeBlockRendererHtml } from './components/CodeBlock'
 import { CodeBlockInserter } from './components/CodeBlockInserter'
@@ -31,7 +11,7 @@ import { TicketHeader } from './components/TicketHeader'
 import { ClientBar } from './components/ClientBar'
 import { QuickActions } from './components/QuickActions'
 import { AISummaryPanel } from './components/AISummaryPanel'
-import { MergePanel, ExtMessagePanel, SnoozePanel } from './components/ActionPanels'
+import { MergePanel, ExtMessagePanel, SnoozePanel, ReminderPanel } from './components/ActionPanels'
 import { ActivityLog } from './components/ActivityLog'
 import { ClientHistory } from './components/ClientHistory'
 import { TimeTrackingPanel } from './components/TimeTrackingPanel'
@@ -40,140 +20,12 @@ import { useMessageActions } from './hooks/useMessageActions'
 import { useTicketActions } from './hooks/useTicketActions'
 import { useReply } from './hooks/useReply'
 import { useAI } from './hooks/useAI'
+import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl'
 import { getFeatures, type TicketingFeatures } from './config'
+import { SkeletonText } from './SkeletonText'
+import { RewriteDropdown } from './RewriteDropdown'
 import '../../styles/theme.css'
 
-// Inline skeleton replacement (no external dependency)
-function SkeletonText({ lines = 3 }: { lines?: number }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '12px 0' }}>
-      {Array.from({ length: lines }).map((_, i) => (
-        <div
-          key={i}
-          style={{
-            height: '14px',
-            borderRadius: '4px',
-            backgroundColor: '#e2e8f0',
-            width: i === lines - 1 ? '60%' : '100%',
-            animation: 'pulse 1.5s ease-in-out infinite',
-          }}
-        />
-      ))}
-    </div>
-  )
-}
-
-// Inline layout styles (replacing Layout.module.scss)
-const layoutStyles = {
-  root: { padding: '12px 0' } as React.CSSProperties,
-  twoColumns: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 320px',
-    gap: '16px',
-    alignItems: 'start',
-  } as React.CSSProperties,
-  mainColumn: { minWidth: 0 } as React.CSSProperties,
-  sideColumn: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    gap: '12px',
-    position: 'sticky' as const,
-    top: '80px',
-  } as React.CSSProperties,
-}
-
-// ── Rewrite style dropdown ──────────────────────────────────────────────
-const REWRITE_STYLES = [
-  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
-  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
-  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
-  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
-  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
-  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
-]
-
-const RewriteDropdown: React.FC<{
-  disabled: boolean
-  loading: boolean
-  onSelect: (style: string) => void
-}> = ({ disabled, loading, onSelect }) => {
-  const [open, setOpen] = useState(false)
-  const ref = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (!open) return
-    const close = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', close)
-    return () => document.removeEventListener('mousedown', close)
-  }, [open])
-
-  return (
-    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        disabled={disabled}
-        style={{
-          ...s.outlineBtn('#0891b2', disabled),
-          fontSize: '11px',
-          padding: '3px 10px',
-          borderRadius: '14px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px',
-        }}
-      >
-        {loading ? 'Reformulation...' : '✏️ Reformuler'}
-        {!loading && <span style={{ fontSize: 9, opacity: 0.7 }}>▼</span>}
-      </button>
-      {open && !disabled && !loading && (
-        <div
-          style={{
-            position: 'absolute',
-            bottom: '100%',
-            left: 0,
-            marginBottom: 4,
-            background: 'var(--theme-elevation-0, #fff)',
-            border: '1px solid var(--theme-elevation-200, #e5e7eb)',
-            borderRadius: 8,
-            boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
-            zIndex: 100,
-            minWidth: 180,
-            overflow: 'hidden',
-          }}
-        >
-          {REWRITE_STYLES.map((style) => (
-            <button
-              key={style.id}
-              type="button"
-              onClick={() => { setOpen(false); onSelect(style.id) }}
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                padding: '8px 12px',
-                border: 'none',
-                background: 'transparent',
-                cursor: 'pointer',
-                textAlign: 'left',
-                borderBottom: '1px solid var(--theme-elevation-100, #f3f4f6)',
-                transition: 'background 120ms',
-              }}
-              onMouseEnter={(e) => { (e.target as HTMLElement).style.background = 'var(--theme-elevation-50, #f9fafb)' }}
-              onMouseLeave={(e) => { (e.target as HTMLElement).style.background = 'transparent' }}
-            >
-              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--theme-text, #111)' }}>{style.label}</span>
-              <span style={{ fontSize: 10, color: 'var(--theme-elevation-500, #6b7280)' }}>{style.desc}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
 const TicketConversation: React.FC = () => {
   const { id } = useDocumentIdFromUrl()
   const [features] = useState<TicketingFeatures>(() => getFeatures())
@@ -201,6 +53,7 @@ const TicketConversation: React.FC = () => {
   const [ticketSubject, setTicketSubject] = useState<string>('')
   const [ticketSource, setTicketSource] = useState<string>('')
   const [chatSession, setChatSession] = useState<string>('')
+  const [autoCloseScheduledAt, setAutoCloseScheduledAt] = useState<string | null>(null)
   // Client history
   const [clientTickets, setClientTickets] = useState<Array<{ id: number; ticketNumber: string; subject: string; status: string; createdAt: string }>>([])
   const [clientProjects, setClientProjects] = useState<Array<{ id: number; name: string; status: string }>>([])
@@ -236,6 +89,7 @@ const TicketConversation: React.FC = () => {
           setClient(d.client)
         }
         setSnoozeUntil(d.snoozeUntil || null)
+        setAutoCloseScheduledAt(d.autoCloseScheduledAt || null)
         setLastClientReadAt(d.lastClientReadAt || null)
         setCurrentStatus(d.status || '')
         setTicketNumber(d.ticketNumber || '')
@@ -384,7 +238,7 @@ const TicketConversation: React.FC = () => {
 
   // Ticket actions (status, merge, snooze, ext msg, next ticket)
   const ta = useTicketActions(id, fetchAll)
-  const { statusUpdating, handleStatusChange, showMerge, setShowMerge, mergeTarget, setMergeTarget, mergeTargetInfo, setMergeTargetInfo, mergeError, setMergeError, merging, handleMergeLookup, handleMerge, showExtMsg, setShowExtMsg, extMsgBody, setExtMsgBody, extMsgAuthor, setExtMsgAuthor, extMsgDate, setExtMsgDate, extMsgFiles, setExtMsgFiles, sendingExtMsg, handleExtFileChange, handleSendExtMsg, showSnooze, setShowSnooze, snoozeUntil, setSnoozeUntil, snoozeSaving, handleSnooze, showNextTicket, setShowNextTicket, nextTicketId, nextTicketInfo, handleNextTicket } = ta
+  const { statusUpdating, handleStatusChange, showMerge, setShowMerge, mergeTarget, setMergeTarget, mergeTargetInfo, setMergeTargetInfo, mergeError, setMergeError, merging, handleMergeLookup, handleMerge, showExtMsg, setShowExtMsg, extMsgBody, setExtMsgBody, extMsgAuthor, setExtMsgAuthor, extMsgDate, setExtMsgDate, extMsgFiles, setExtMsgFiles, sendingExtMsg, handleExtFileChange, handleSendExtMsg, showSnooze, setShowSnooze, snoozeUntil, setSnoozeUntil, snoozeSaving, handleSnooze, showReminder, setShowReminder, reminderHours, setReminderHours, reminderSending, reminderError, setReminderError, reminderSuccess, handleSendReminder, cancelingClose, handleCancelScheduledClose, showNextTicket, setShowNextTicket, nextTicketId, nextTicketInfo, handleNextTicket } = ta
 
   // Reply composer
   const replyEditorRef = useRef<RichTextEditorHandle>(null)
@@ -419,6 +273,7 @@ const TicketConversation: React.FC = () => {
           const d = await ticketRes.json()
           setCurrentStatus(d.status || '')
           setSnoozeUntil(d.snoozeUntil || null)
+          setAutoCloseScheduledAt(d.autoCloseScheduledAt || null)
           setLastClientReadAt(d.lastClientReadAt || null)
         }
         if (activityRes.ok) {
@@ -1094,10 +949,16 @@ const TicketConversation: React.FC = () => {
         showMerge={showMerge}
         showExtMsg={showExtMsg}
         showSnooze={showSnooze}
-        onToggleMerge={() => { setShowMerge(!showMerge); setShowExtMsg(false); setShowSnooze(false) }}
-        onToggleExtMsg={() => { setShowExtMsg(!showExtMsg); setShowMerge(false); setShowSnooze(false) }}
-        onToggleSnooze={() => { setShowSnooze(!showSnooze); setShowMerge(false); setShowExtMsg(false) }}
+        onToggleMerge={() => { setShowMerge(!showMerge); setShowExtMsg(false); setShowSnooze(false); setShowReminder(false) }}
+        onToggleExtMsg={() => { setShowExtMsg(!showExtMsg); setShowMerge(false); setShowSnooze(false); setShowReminder(false) }}
+        onToggleSnooze={() => { setShowSnooze(!showSnooze); setShowMerge(false); setShowExtMsg(false); setShowReminder(false) }}
         onNextTicket={handleNextTicket}
+        showReminderButton={features.autoClose}
+        onToggleReminder={() => { setShowReminder(!showReminder); setReminderError(''); setShowMerge(false); setShowExtMsg(false); setShowSnooze(false) }}
+        autoCloseScheduledAt={autoCloseScheduledAt}
+        onCancelScheduledClose={handleCancelScheduledClose}
+        cancelingClose={cancelingClose}
+        reminderSuccess={reminderSuccess}
         showNextTicket={showNextTicket}
         nextTicketId={nextTicketId}
         nextTicketInfo={nextTicketInfo}
@@ -1139,6 +1000,17 @@ const TicketConversation: React.FC = () => {
       {features.snooze && showSnooze && (
         <SnoozePanel snoozeSaving={snoozeSaving} handleSnooze={handleSnooze} />
       )}
+      {features.autoClose && showReminder && (
+        <ReminderPanel
+          clientFirstName={client?.firstName || ''}
+          clientEmail={client?.email || ''}
+          reminderHours={reminderHours}
+          setReminderHours={setReminderHours}
+          reminderSending={reminderSending}
+          reminderError={reminderError}
+          handleSendReminder={handleSendReminder}
+        />
+      )}
 
 
         </div>

package/src/endpoints/admin-chat-stream.ts

@@ -1,6 +1,7 @@
 import type { Endpoint } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
 import { requireAdmin, handleAuthError } from '../utils/auth'
+import { dbFind } from '../utils/db'
 
 /**
  * GET /api/support/admin-chat-stream?session=xxx
@@ -58,8 +59,7 @@ function createSessionStream(
       // Poll DB every 2 seconds for new messages in this session
       const interval = setInterval(async () => {
         try {
-          const messages = await req.payload.find({
-            collection: slugs.chatMessages as any,
+          const messages = await dbFind(req.payload, slugs.chatMessages, {
             where: {
               session: { equals: sessionId },
               createdAt: { greater_than: lastCheck },
@@ -140,8 +140,7 @@ function createSessionListStream(req: any, slugs: CollectionSlugs): Response {
 
       const interval = setInterval(async () => {
         try {
-          const recentMessages = await req.payload.find({
-            collection: slugs.chatMessages as any,
+          const recentMessages = await dbFind(req.payload, slugs.chatMessages, {
             sort: '-createdAt',
             limit: 50,
             depth: 1,

package/src/endpoints/admin-chat.ts

@@ -3,6 +3,7 @@ import type { Where } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
 import { RateLimiter } from '../utils/rateLimiter'
 import { requireAdmin, handleAuthError } from '../utils/auth'
+import { dbFind, dbCreate, dbUpdate } from '../utils/db'
 
 const adminChatLimiter = new RateLimiter(60_000, 30) // 30 per minute
 
@@ -28,8 +29,7 @@ export function createAdminChatGetEndpoint(slugs: CollectionSlugs): Endpoint {
           const where: Where = { session: { equals: session } }
           if (after) where.createdAt = { greater_than: after }
 
-          const messages = await payload.find({
-            collection: slugs.chatMessages as any,
+          const messages = await dbFind(payload, slugs.chatMessages, {
             where,
             sort: 'createdAt',
             limit: 200,
@@ -46,8 +46,7 @@ export function createAdminChatGetEndpoint(slugs: CollectionSlugs): Endpoint {
         }
 
         // List recent sessions: fetch only recent messages, limit to 50
-        const recentMessages = await payload.find({
-          collection: slugs.chatMessages as any,
+        const recentMessages = await dbFind(payload, slugs.chatMessages, {
           sort: '-createdAt',
           limit: 50,
           depth: 1,
@@ -134,8 +133,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
           return Response.json({ error: 'Session requise' }, { status: 400 })
         }
 
-        const sessionMsg = await payload.find({
-          collection: slugs.chatMessages as any,
+        const sessionMsg = await dbFind(payload, slugs.chatMessages, {
           where: { session: { equals: session } },
           limit: 1,
           depth: 0,
@@ -161,8 +159,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
             return Response.json({ error: 'Message invalide (1-2000 caractères).' }, { status: 400 })
           }
 
-          const newMsg = await payload.create({
-            collection: slugs.chatMessages as any,
+          const newMsg = await dbCreate(payload, slugs.chatMessages, {
             data: {
               session,
               client: clientId,
@@ -176,8 +173,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
 
           // Try to link to ticket
           try {
-            const linkedTicket = await payload.find({
-              collection: slugs.tickets as any,
+            const linkedTicket = await dbFind(payload, slugs.tickets, {
               where: { chatSession: { equals: session } },
               limit: 1,
               depth: 0,
@@ -185,8 +181,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
             })
             if (linkedTicket.docs.length > 0) {
               const ticketId = linkedTicket.docs[0].id
-              await payload.create({
-                collection: slugs.ticketMessages as any,
+              await dbCreate(payload, slugs.ticketMessages, {
                 data: {
                   ticket: ticketId,
                   body: trimmedMessage,
@@ -195,8 +190,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
                 },
                 overrideAccess: true,
               })
-              await payload.update({
-                collection: slugs.chatMessages as any,
+              await dbUpdate(payload, slugs.chatMessages, {
                 id: newMsg.id,
                 data: { ticket: ticketId },
                 overrideAccess: true,
@@ -211,8 +205,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
 
         // Admin closes session
         if (action === 'close') {
-          await payload.create({
-            collection: slugs.chatMessages as any,
+          await dbCreate(payload, slugs.chatMessages, {
             data: {
               session,
               client: clientId,
@@ -224,16 +217,14 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
           })
 
           try {
-            const linkedTicket = await payload.find({
-              collection: slugs.tickets as any,
+            const linkedTicket = await dbFind(payload, slugs.tickets, {
               where: { chatSession: { equals: session } },
               limit: 1,
               depth: 0,
               overrideAccess: true,
             })
             if (linkedTicket.docs.length > 0) {
-              await payload.create({
-                collection: slugs.ticketMessages as any,
+              await dbCreate(payload, slugs.ticketMessages, {
                 data: {
                   ticket: linkedTicket.docs[0].id,
                   body: 'Session de chat terminée par un agent.',