@consilioweb/payload-support 5.0.0 → 6.0.1

package/src/components/TicketConversation/components/TimeTrackingPanel.tsx

@@ -34,6 +34,11 @@ export function TimeTrackingPanel({
   duration, setDuration, timeDescription, setTimeDescription,
   handleAddTime, addingTime, timeSuccess,
 }: TimeTrackingPanelProps) {
+  // The two `<label>`s of the manual entry row exist but were not associated
+  // with anything. useId, never a literal: the panel is one per ticket screen
+  // but the pattern has to hold if it is ever mounted twice.
+  const minutesId = React.useId()
+  const workDescriptionId = React.useId()
   const totalH = Math.floor(totalMinutes / 60)
   const totalM = totalMinutes % 60
 
@@ -63,6 +68,7 @@ export function TimeTrackingPanel({
           <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
             {[-5, -1, 1, 5, 15, 30].map((m) => (
               <button
+                type="button"
                 key={m}
                 onClick={() => setTimerSeconds((p) => Math.max(0, p + m * 60))}
                 style={{ width: Math.abs(m) >= 15 ? '32px' : '28px', height: '28px', borderRadius: '6px', border: '1px solid #e2e8f0', background: 'white', cursor: 'pointer', fontSize: Math.abs(m) >= 15 ? '12px' : '14px', fontWeight: 700, color: '#64748b' }}
@@ -75,28 +81,30 @@ export function TimeTrackingPanel({
         )}
 
         {!timerRunning && timerSeconds === 0 && (
-          <button onClick={() => handleTimerStart(true)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <button type="button" onClick={() => handleTimerStart(true)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
             &#9654; Démarrer
           </button>
         )}
         {timerRunning && (
-          <button onClick={handleTimerStop} style={{ ...s.btn('#374151', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <button type="button" onClick={handleTimerStop} style={{ ...s.btn('#374151', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
             &#9208; Pause
           </button>
         )}
         {!timerRunning && timerSeconds > 0 && (
           <>
-            <button onClick={() => handleTimerStart(false)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 14px' }}>
+            <button type="button" onClick={() => handleTimerStart(false)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 14px' }}>
               &#9654; Reprendre
             </button>
             <input
               type="text"
+              aria-label="Description du temps en cours"
               value={timerDescription}
               onChange={(e) => setTimerDescription(e.target.value)}
               placeholder="Description..."
               style={{ ...s.input, fontSize: '12px', flex: 1, minWidth: '120px' }}
             />
             <button
+              type="button"
               onClick={handleTimerSave}
               disabled={addingTime || timerSeconds < 60}
               style={{ ...s.btn('#16a34a', addingTime || timerSeconds < 60), fontSize: '12px', padding: '6px 14px' }}
@@ -104,7 +112,7 @@ export function TimeTrackingPanel({
             >
               &#128190; {Math.round(timerSeconds / 60)} min
             </button>
-            <button onClick={handleTimerDiscard} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: '#94a3b8', padding: '4px' }} title="Annuler">
+            <button type="button" onClick={handleTimerDiscard} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: '#94a3b8', padding: '4px' }} title="Annuler">
               &#10005;
             </button>
           </>
@@ -119,14 +127,14 @@ export function TimeTrackingPanel({
       {/* Manual time entry */}
       <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap', marginBottom: '14px' }}>
         <div>
-          <label style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Min</label>
-          <input type="number" min="1" value={duration} onChange={(e) => setDuration(e.target.value)} placeholder="30" style={{ ...s.input, width: '80px' }} />
+          <label htmlFor={minutesId} style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Min</label>
+          <input id={minutesId} type="number" min="1" value={duration} onChange={(e) => setDuration(e.target.value)} placeholder="30" style={{ ...s.input, width: '80px' }} />
         </div>
         <div style={{ flex: 1 }}>
-          <label style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Description</label>
-          <input type="text" value={timeDescription} onChange={(e) => setTimeDescription(e.target.value)} placeholder="Travail effectué..." style={{ ...s.input, width: '100%' }} />
+          <label htmlFor={workDescriptionId} style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Description</label>
+          <input id={workDescriptionId} type="text" value={timeDescription} onChange={(e) => setTimeDescription(e.target.value)} placeholder="Travail effectué..." style={{ ...s.input, width: '100%' }} />
         </div>
-        <button onClick={handleAddTime} disabled={addingTime || !duration} style={s.btn(C.amber, addingTime || !duration)}>
+        <button type="button" onClick={handleAddTime} disabled={addingTime || !duration} style={s.btn(C.amber, addingTime || !duration)}>
           {addingTime ? '...' : '+ Temps'}
         </button>
         {timeSuccess && <span style={{ fontSize: '12px', color: '#16a34a', fontWeight: 600 }}>{timeSuccess}</span>}

package/src/components/TicketConversation/index.tsx

@@ -24,9 +24,10 @@ import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl'
 import { useFeatures } from './hooks/useFeatures'
 import { SkeletonText } from './SkeletonText'
 import { RewriteDropdown } from './RewriteDropdown'
+import { AdminErrorBoundary } from '../../views/shared/ErrorBoundary'
 import '../../styles/theme.css'
 
-const TicketConversation: React.FC = () => {
+const TicketConversationInner: React.FC = () => {
   const { id } = useDocumentIdFromUrl()
   const { features } = useFeatures()
   const [messages, setMessages] = useState<Message[]>([])
@@ -416,6 +417,7 @@ const TicketConversation: React.FC = () => {
         <div style={{ flex: 1 }}>
           <input
             type="text"
+            aria-label="Rechercher dans la conversation"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Rechercher..."
@@ -442,6 +444,7 @@ const TicketConversation: React.FC = () => {
               <>
                 {showCollapse && hiddenCount > 0 && (
                   <button
+                    type="button"
                     onClick={() => setMessagesCollapsed(false)}
                     style={{
                       background: 'none', border: `1px dashed ${C.border}`, borderRadius: '6px',
@@ -454,6 +457,7 @@ const TicketConversation: React.FC = () => {
                 )}
                 {!messagesCollapsed && filtered.length > 1 && !isSearching && (
                   <button
+                    type="button"
                     onClick={() => setMessagesCollapsed(true)}
                     style={{
                       background: 'none', border: `1px dashed ${C.border}`, borderRadius: '6px',
@@ -501,6 +505,7 @@ const TicketConversation: React.FC = () => {
                                 <span style={s.badge(C.emailBg, C.orange)}>Email</span>
                               ) : (
                                 <select
+                                  aria-label="Auteur du message"
                                   value={msg.authorType}
                                   onChange={(e) => handleToggleAuthor(msg.id, e.target.value === 'admin' ? 'client' : 'admin')}
                                   disabled={togglingAuthor === msg.id}
@@ -537,6 +542,7 @@ const TicketConversation: React.FC = () => {
                               {/* Split button */}
                               {!msg.isInternal && !(msg as unknown as { deletedAt?: string }).deletedAt && (
                                 <button
+                                  type="button"
                                   onClick={() => handleSplitMessage(msg.id, ticketSubject)}
                                   style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '10px', color: '#6b7280', padding: 0 }}
                                   title="Extraire en nouveau ticket"
@@ -579,16 +585,17 @@ const TicketConversation: React.FC = () => {
                           {editingMsg === msg.id ? (
                             <div style={{ marginTop: '6px' }}>
                               <textarea
+                                aria-label="Editer le message"
                                 value={editBody}
                                 onChange={(e) => { setEditBody(e.target.value); setEditHtml(e.target.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br />')) }}
                                 rows={4}
                                 style={{ ...s.input, width: '100%', resize: 'vertical', fontSize: '13px' }}
                               />
                               <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
-                                <button onClick={() => handleEditSave(msg.id)} disabled={savingEdit || (!editBody.trim() && !editHtml)} style={{ ...s.btn(C.blue, savingEdit), fontSize: '11px', padding: '5px 12px' }}>
+                                <button type="button" onClick={() => handleEditSave(msg.id)} disabled={savingEdit || (!editBody.trim() && !editHtml)} style={{ ...s.btn(C.blue, savingEdit), fontSize: '11px', padding: '5px 12px' }}>
                                   {savingEdit ? '...' : 'Enregistrer'}
                                 </button>
-                                <button onClick={handleEditCancel} style={{ ...s.ghostBtn('#6b7280'), fontSize: '11px', padding: '5px 12px' }}>
+                                <button type="button" onClick={handleEditCancel} style={{ ...s.ghostBtn('#6b7280'), fontSize: '11px', padding: '5px 12px' }}>
                                   Annuler
                                 </button>
                               </div>
@@ -775,6 +782,7 @@ const TicketConversation: React.FC = () => {
           ))}
           {features.ai && (
             <button
+              type="button"
               onClick={handleAiSuggestReply}
               disabled={aiReplying || messages.length === 0}
               style={{ ...s.outlineBtn('#17807c', aiReplying || messages.length === 0), fontSize: '11px', padding: '3px 10px', borderRadius: '14px' }}
@@ -800,7 +808,7 @@ const TicketConversation: React.FC = () => {
           />
 {features.canned && cannedResponses.length > 0 && (
             <>
-              <select onChange={handleCannedSelect} style={{ ...s.input, fontSize: '11px', padding: '3px 8px', fontWeight: 600 }}>
+              <select aria-label="Reponse rapide" onChange={handleCannedSelect} style={{ ...s.input, fontSize: '11px', padding: '3px 8px', fontWeight: 600 }}>
                 <option value="">Réponse rapide...</option>
                 {cannedResponses.map((cr) => (
                   <option key={cr.id} value={String(cr.id)}>{cr.title}</option>
@@ -818,6 +826,7 @@ const TicketConversation: React.FC = () => {
         {/* Reply textarea (replacing RichTextEditor) */}
         <div style={{ border: `1px solid ${C.border}`, borderRadius: '8px', overflow: 'hidden' }}>
           <textarea
+            aria-label="Reponse au client"
             value={replyBody}
             onChange={(e) => {
               const text = e.target.value
@@ -831,7 +840,6 @@ const TicketConversation: React.FC = () => {
               minHeight: '120px',
               padding: '12px',
               border: 'none',
-              outline: 'none',
               fontSize: '14px',
               lineHeight: 1.5,
               resize: 'vertical',
@@ -848,6 +856,7 @@ const TicketConversation: React.FC = () => {
             ref={fileInputRef}
             type="file"
             multiple
+            aria-label="Joindre des fichiers"
             onChange={handleReplyFileChange}
             style={{ display: 'none' }}
             accept="image/*,.pdf,.doc,.docx,.txt,.zip"
@@ -866,6 +875,7 @@ const TicketConversation: React.FC = () => {
                   {'\uD83D\uDCCE'} {file.name}
                   <button
                     type="button"
+                    aria-label={`Retirer la piece jointe ${file.name}`}
                     onClick={() => setReplyFiles((prev) => prev.filter((_, idx) => idx !== i))}
                     style={{ border: 'none', background: 'none', color: '#ef4444', fontWeight: 700, cursor: 'pointer', fontSize: '14px', lineHeight: 1 }}
                   >
@@ -879,6 +889,7 @@ const TicketConversation: React.FC = () => {
         {/* Send row */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap', marginTop: '8px' }}>
           <select
+            aria-label="Envoyer en tant que"
             value={sendAsClient ? 'client' : 'admin'}
             onChange={(e) => setSendAsClient(e.target.value === 'client')}
             style={{ ...s.input, fontSize: '12px', padding: '6px 8px', fontWeight: 600 }}
@@ -896,11 +907,12 @@ const TicketConversation: React.FC = () => {
               Envoyer au client
             </label>
           )}
-          <button data-action="send-reply" onClick={handleSendReply} disabled={sending || (!replyBody.trim() && !replyHtml)} style={{ ...s.btn(isInternal ? C.amber : notifyClient ? '#16a34a' : C.blue, sending || (!replyBody.trim() && !replyHtml)), fontSize: '13px', padding: '8px 20px', marginLeft: 'auto' }}>
+          <button type="button" data-action="send-reply" onClick={handleSendReply} disabled={sending || (!replyBody.trim() && !replyHtml)} style={{ ...s.btn(isInternal ? C.amber : notifyClient ? '#16a34a' : C.blue, sending || (!replyBody.trim() && !replyHtml)), fontSize: '13px', padding: '8px 20px', marginLeft: 'auto' }}>
             {sending ? 'Envoi...' : isInternal ? 'Ajouter note' : notifyClient ? 'Envoyer + Notifier' : 'Sauvegarder'}
           </button>
           {!isInternal && (
             <button
+              type="button"
               onClick={() => setShowSchedule(!showSchedule)}
               disabled={!replyBody.trim() && !replyHtml}
               style={{ ...s.outlineBtn('#17807c', !replyBody.trim() && !replyHtml), fontSize: '12px', padding: '8px 12px' }}
@@ -915,19 +927,21 @@ const TicketConversation: React.FC = () => {
             <span style={{ fontSize: '12px', fontWeight: 600, color: '#17807c' }}>Programmer pour :</span>
             <input
               type="datetime-local"
+              aria-label="Date et heure d'envoi programme"
               value={scheduleDate}
               onChange={(e) => setScheduleDate(e.target.value)}
               min={new Date().toISOString().slice(0, 16)}
               style={{ ...s.input, fontSize: '12px', width: 'auto' }}
             />
             <button
+              type="button"
               onClick={handleScheduleReply}
               disabled={sending || !scheduleDate || (!replyBody.trim() && !replyHtml)}
               style={{ ...s.btn('#17807c', sending || !scheduleDate || (!replyBody.trim() && !replyHtml)), fontSize: '12px', padding: '6px 14px' }}
             >
               {sending ? '...' : '\u23F0 Programmer'}
             </button>
-            <button onClick={() => setShowSchedule(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: '14px' }}>{'\u2715'}</button>
+            <button type="button" aria-label="Annuler la programmation" onClick={() => setShowSchedule(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: '14px' }}>{'\u2715'}</button>
           </div>
         )}
         <div style={{ fontSize: '11px', color: C.textMuted, marginTop: '4px', textAlign: 'right' }}>
@@ -1088,4 +1102,24 @@ const TicketConversation: React.FC = () => {
 
 
 
+/**
+ * Payload mounts this component straight from the import map as the `ui` field
+ * of the Tickets edit view, so the plugin never gets to render an ancestor for
+ * it: the boundary has to live inside the module itself. Without it a single
+ * render error in any of the twelve sub-components blanks the whole ticket
+ * screen.
+ *
+ * The document id is used as a reset key so that navigating from a ticket that
+ * broke to another one clears the error on its own.
+ */
+const TicketConversation: React.FC = () => {
+  const { id } = useDocumentIdFromUrl()
+
+  return (
+    <AdminErrorBoundary viewName="TicketConversation" resetKeys={[id]}>
+      <TicketConversationInner />
+    </AdminErrorBoundary>
+  )
+}
+
 export default TicketConversation

package/src/endpoints/delete-account.ts

@@ -1,13 +1,37 @@
 import type { Endpoint } from 'payload'
+import { commitTransaction, initTransaction, killTransaction } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
+import { FIXED_SLUGS } from '../utils/slugs'
 import { requireClient, handleAuthError } from '../utils/auth'
 import { dbFind, dbDelete } from '../utils/db'
 
+interface AttachmentRow {
+  file?: number | string | { id?: number | string } | null
+}
+
+/** Collect the media ids referenced by an `attachments` array field. */
+function collectAttachmentIds(
+  docs: Array<{ attachments?: AttachmentRow[] | null }>,
+  into: Set<number | string>,
+): void {
+  for (const doc of docs) {
+    for (const attachment of doc.attachments ?? []) {
+      const file = attachment?.file
+      const id = file != null && typeof file === 'object' ? file.id : file
+      if (id != null) into.add(id)
+    }
+  }
+}
+
 /**
  * POST /api/support/delete-account
  * RGPD — Right to erasure (Article 17).
- * Allows a support client to request permanent deletion of their account.
- * Uses batch deletes via `where` clauses instead of sequential per-document deletion.
+ *
+ * Erases every row the plugin holds about the caller, and the uploaded files
+ * those rows point at. The whole sequence runs inside a single Payload
+ * transaction: a failure halfway through must not leave a half-deleted
+ * account, which would be worse than not deleting at all — the person would
+ * believe their data is gone while some of it is still readable.
  */
 export function createDeleteAccountEndpoint(slugs: CollectionSlugs): Endpoint {
   return {
@@ -29,7 +53,8 @@ export function createDeleteAccountEndpoint(slugs: CollectionSlugs): Endpoint {
           )
         }
 
-        // Verify password
+        // Verify password. Deliberately outside the transaction: it is a read,
+        // and `payload.login` writes nothing we would want to roll back.
         try {
           await payload.login({
             collection: slugs.supportClients as any,
@@ -43,59 +68,178 @@ export function createDeleteAccountEndpoint(slugs: CollectionSlugs): Endpoint {
         }
 
         const clientId = req.user.id
+        const clientEmail = req.user.email
 
-        // 1. Find all ticket IDs for this client
-        const tickets = await dbFind(payload, slugs.tickets, {
-          where: { client: { equals: clientId } },
-          limit: 10000,
-          depth: 0,
-          overrideAccess: true,
-          select: { id: true },
-        })
-
-        const ticketIds = tickets.docs.map((t) => t.id)
-
-        // 2. Batch delete related data using where clauses
-        if (ticketIds.length > 0) {
-          await dbDelete(payload, slugs.ticketMessages, {
-            where: { ticket: { in: ticketIds } },
-            overrideAccess: true,
-          })
+        // Several of the collections below only exist when the matching
+        // feature flag is on (chat, pendingEmails, ai, timeTracking,
+        // authLogs, emailTracking). Addressing one that was never registered
+        // throws, and inside a transaction that would roll the whole erasure
+        // back — so an install with chat disabled could never delete an
+        // account at all.
+        const isRegistered = (slug: string): boolean =>
+          Boolean((payload.collections as Record<string, unknown> | undefined)?.[slug])
 
-          await dbDelete(payload, slugs.ticketActivityLog, {
-            where: { ticket: { in: ticketIds } },
-            overrideAccess: true,
-          })
+        // No-op on adapters that do not expose `beginTransaction` — the SQLite
+        // adapter only does when the host passes `transactionOptions`. The
+        // sequence then runs unwrapped, exactly as it did before.
+        const startedTransaction = await initTransaction(req)
 
-          await dbDelete(payload, slugs.timeEntries, {
-            where: { ticket: { in: ticketIds } },
+        try {
+          // 1. Tickets owned by the client.
+          const tickets = await dbFind(payload, slugs.tickets, {
+            where: { client: { equals: clientId } },
+            limit: 10000,
+            depth: 0,
             overrideAccess: true,
+            select: { id: true },
+            req,
           })
 
-          // Delete all tickets
-          await dbDelete(payload, slugs.tickets, {
-            where: { client: { equals: clientId } },
+          const ticketIds = tickets.docs.map((t) => t.id)
+
+          // 2. Uploaded files. They live in the HOST's media collection, so
+          // their ids have to be gathered before the rows that reference them
+          // are gone.
+          const attachmentIds = new Set<number | string>()
+
+          if (ticketIds.length > 0) {
+            const messages = await dbFind<{ attachments?: AttachmentRow[] | null }>(
+              payload,
+              slugs.ticketMessages,
+              {
+                where: { ticket: { in: ticketIds } },
+                limit: 10000,
+                depth: 0,
+                overrideAccess: true,
+                req,
+              },
+            )
+            collectAttachmentIds(messages.docs, attachmentIds)
+          }
+
+          if (isRegistered(slugs.pendingEmails)) {
+            const pendingEmails = await dbFind<{ attachments?: AttachmentRow[] | null }>(
+              payload,
+              slugs.pendingEmails,
+              {
+                where: { client: { equals: clientId } },
+                limit: 10000,
+                depth: 0,
+                overrideAccess: true,
+                req,
+              },
+            )
+            collectAttachmentIds(pendingEmails.docs, attachmentIds)
+          }
+
+          // 3. Rows that point at one of those tickets. They must go BEFORE
+          // the tickets themselves: their `ticket` relationship is required,
+          // so the FK would fail on the ticket delete — and Payload's
+          // delete-many collects per-document errors instead of throwing, so
+          // the failure would be silent and the account would survive.
+          if (ticketIds.length > 0) {
+            for (const slug of [FIXED_SLUGS.ticketFeedback, FIXED_SLUGS.ticketCollaborators]) {
+              if (!isRegistered(slug)) continue
+              await dbDelete(payload, slug, {
+                where: {
+                  or: [
+                    { ticket: { in: ticketIds } },
+                    { client: { equals: clientId } },
+                  ],
+                },
+                overrideAccess: true,
+                req,
+              })
+            }
+          }
+
+          // 4. The tickets. Their own beforeDelete cascade takes the messages,
+          // the activity log, the time entries and the surveys with them.
+          if (ticketIds.length > 0) {
+            await dbDelete(payload, slugs.tickets, {
+              where: { client: { equals: clientId } },
+              overrideAccess: true,
+              req,
+            })
+          }
+
+          // 5. Rows keyed on the client id, whatever ticket they belong to.
+          for (const slug of [
+            slugs.satisfactionSurveys,
+            slugs.chatMessages,
+            slugs.notificationQueue,
+            slugs.pendingEmails,
+            FIXED_SLUGS.clientSummaries,
+            FIXED_SLUGS.ticketFeedback,
+          ]) {
+            if (!isRegistered(slug)) continue
+            await dbDelete(payload, slug, {
+              where: { client: { equals: clientId } },
+              overrideAccess: true,
+              req,
+            })
+          }
+
+          // Collaborator invitations can predate the account they point at, so
+          // they are also matched on the address alone.
+          if (isRegistered(FIXED_SLUGS.ticketCollaborators)) {
+            await dbDelete(payload, FIXED_SLUGS.ticketCollaborators, {
+              where: {
+                or: [
+                  { client: { equals: clientId } },
+                  ...(clientEmail ? [{ email: { equals: clientEmail } }] : []),
+                ],
+              },
+              overrideAccess: true,
+              req,
+            })
+          }
+
+          // 6. Journals, keyed on the address only.
+          if (clientEmail) {
+            if (isRegistered(slugs.authLogs)) {
+              await dbDelete(payload, slugs.authLogs, {
+                where: { email: { equals: clientEmail } },
+                overrideAccess: true,
+                req,
+              })
+            }
+
+            if (isRegistered(slugs.emailLogs)) {
+              await dbDelete(payload, slugs.emailLogs, {
+                where: {
+                  or: [
+                    { senderEmail: { equals: clientEmail } },
+                    { recipientEmail: { equals: clientEmail } },
+                  ],
+                },
+                overrideAccess: true,
+                req,
+              })
+            }
+          }
+
+          // 7. The uploaded files themselves.
+          for (const id of isRegistered(slugs.media) ? attachmentIds : []) {
+            await dbDelete(payload, slugs.media, {
+              id,
+              overrideAccess: true,
+              req,
+            })
+          }
+
+          // 8. The account.
+          await dbDelete(payload, slugs.supportClients, {
+            id: clientId,
             overrideAccess: true,
+            req,
           })
-        }
 
-        // 3. Batch delete satisfaction surveys
-        await dbDelete(payload, slugs.satisfactionSurveys, {
-          where: { client: { equals: clientId } },
-          overrideAccess: true,
-        })
-
-        // 4. Batch delete chat messages
-        await dbDelete(payload, slugs.chatMessages, {
-          where: { client: { equals: clientId } },
-          overrideAccess: true,
-        })
-
-        // 5. Delete the client account
-        await dbDelete(payload, slugs.supportClients, {
-          id: clientId,
-          overrideAccess: true,
-        })
+          if (startedTransaction) await commitTransaction(req)
+        } catch (err) {
+          if (startedTransaction) await killTransaction(req)
+          throw err
+        }
 
         const headers = new Headers({ 'Content-Type': 'application/json' })
         const secure = process.env.NODE_ENV === 'production'