@consilioweb/payload-support 5.0.0 → 6.0.1

package/src/views/shared/ErrorBoundary.tsx

@@ -1,25 +1,100 @@
 'use client'
 
 import React from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 
 interface ErrorBoundaryProps {
   children: React.ReactNode
   fallback?: React.ReactNode
   viewName?: string
+  /**
+   * Values that identify the input the subtree renders from (a ticket id, a
+   * filter, a page number...). When any of them changes the boundary clears
+   * the error on its own, because the new input may well render fine.
+   */
+  resetKeys?: unknown[]
 }
 
 interface ErrorBoundaryState {
   hasError: boolean
   error: Error | null
+  /**
+   * Bumped on every reset. It is used as the `key` of the wrapper around the
+   * children so that a retry REMOUNTS the subtree. Clearing `hasError` alone
+   * keeps the broken component instance and its state, so anything that threw
+   * from a bad piece of state throws again on the very next render.
+   */
+  resetCount: number
+}
+
+/**
+ * Shallow comparison of two reset-key arrays. A missing array is treated as
+ * empty, so a boundary declared without `resetKeys` never auto-resets.
+ */
+export function haveResetKeysChanged(previous?: unknown[], next?: unknown[]): boolean {
+  const a = previous ?? []
+  const b = next ?? []
+
+  if (a.length !== b.length) return true
+  return a.some((value, index) => !Object.is(value, b[index]))
+}
+
+/**
+ * Default fallback UI.
+ *
+ * Exported so it can be rendered (and asserted on) in isolation. It is the
+ * only screen a user sees when a view is broken, so it must stay readable in
+ * both themes: every colour comes from a Payload theme token, never a hex
+ * literal that only works on a light background.
+ *
+ * The thrown message is deliberately NOT displayed — it can carry a stack
+ * fragment, an internal path or a raw API payload. It is logged to the console
+ * by `componentDidCatch` instead.
+ */
+export function AdminErrorFallback({ onRetry }: { onRetry: () => void }): React.ReactElement {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      role="alert"
+      style={{
+        padding: '40px',
+        textAlign: 'center',
+        color: 'var(--theme-error-550)',
+      }}
+    >
+      <h2 style={{ marginBottom: '16px', fontSize: '18px' }}>
+        {t('errorBoundary.title')}
+      </h2>
+      <p style={{ marginBottom: '24px', color: 'var(--theme-elevation-650)', fontSize: '14px' }}>
+        {t('errorBoundary.description')}
+      </p>
+      <button
+        type="button"
+        onClick={onRetry}
+        style={{
+          padding: '8px 20px',
+          backgroundColor: 'var(--theme-success-550)',
+          color: 'var(--theme-elevation-0)',
+          border: 'none',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          fontSize: '14px',
+        }}
+      >
+        {t('errorBoundary.retry')}
+      </button>
+    </div>
+  )
 }
 
 export class AdminErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props)
-    this.state = { hasError: false, error: null }
+    this.state = { hasError: false, error: null, resetCount: 0 }
   }
 
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+  static getDerivedStateFromError(error: Error): Pick<ErrorBoundaryState, 'hasError' | 'error'> {
     return { hasError: true, error }
   }
 
@@ -27,42 +102,31 @@ export class AdminErrorBoundary extends React.Component<ErrorBoundaryProps, Erro
     console.error(`[${this.props.viewName || 'AdminView'}] Error:`, error, errorInfo)
   }
 
+  componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    if (!this.state.hasError) return
+    if (!haveResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) return
+    this.reset()
+  }
+
+  reset = (): void => {
+    this.setState((prev) => ({
+      hasError: false,
+      error: null,
+      resetCount: prev.resetCount + 1,
+    }))
+  }
+
   render(): React.ReactNode {
     if (this.state.hasError) {
       if (this.props.fallback) {
         return this.props.fallback
       }
 
-      return (
-        <div style={{
-          padding: '40px',
-          textAlign: 'center',
-          color: '#dc2626',
-        }}>
-          <h2 style={{ marginBottom: '16px', fontSize: '18px' }}>
-            Une erreur est survenue
-          </h2>
-          <p style={{ marginBottom: '24px', color: '#6b7280', fontSize: '14px' }}>
-            {this.state.error?.message || 'Erreur inattendue'}
-          </p>
-          <button
-            onClick={() => this.setState({ hasError: false, error: null })}
-            style={{
-              padding: '8px 20px',
-              backgroundColor: '#2563eb',
-              color: '#fff',
-              border: 'none',
-              borderRadius: '6px',
-              cursor: 'pointer',
-              fontSize: '14px',
-            }}
-          >
-            Reessayer
-          </button>
-        </div>
-      )
+      return <AdminErrorFallback onRetry={this.reset} />
     }
 
-    return this.props.children
+    // The key forces a full remount after a reset instead of resuming the
+    // component instance that just threw.
+    return <React.Fragment key={this.state.resetCount}>{this.props.children}</React.Fragment>
   }
 }

package/src/views/shared/adminTokens.ts

@@ -3,31 +3,48 @@ import type React from 'react'
 // Shared design tokens for all admin views (professional style)
 export const V = {
   text: 'var(--theme-text)',
-  textSecondary: 'var(--theme-elevation-500)',
+  // elevation-650, not elevation-500: Payload's dark theme does not redefine
+  // the 500 step (colors.scss jumps from 450 to 550), so elevation-500 stays
+  // rgb(128,128,128) in both themes — 3.62:1 on a light background and 4.03:1
+  // on a dark one, below WCAG AA in both. elevation-650 gives 6.63:1 / 9.03:1.
+  textSecondary: 'var(--theme-elevation-650)',
   bg: 'var(--theme-elevation-50)',
   bgCard: 'var(--theme-elevation-100)',
   border: 'var(--theme-elevation-300)',
-  // Professional palette
-  blue: '#2563eb',
-  amber: '#d97706',
-  orange: '#ea580c',
-  green: '#16a34a',
-  red: '#dc2626',
+  // Professional palette. These are fixed hex values (they do not follow the
+  // admin theme), so they are only ever used as a background behind white
+  // text; each one is dark enough for white to reach at least 4.5:1.
+  blue: '#2563eb', // white on it: 5.17:1
+  amber: '#b45309', // white on it: 5.02:1
+  orange: '#c2410c', // white on it: 5.18:1
+  green: '#15803d', // white on it: 5.02:1
+  red: '#dc2626', // white on it: 4.83:1
+  // Neutral / secondary button. Both halves follow the admin theme, so they
+  // must be used together — white on a theme token is unreadable in one of
+  // the two themes whichever token is picked.
+  neutralBg: 'var(--theme-elevation-150)',
+  neutralFg: 'var(--theme-text)',
   // Legacy aliases (backward compat for views not yet updated)
   cyan: '#2563eb',
-  yellow: '#d97706',
+  yellow: '#b45309',
 } as const
 
-// Button style factory
+/**
+ * Button style factory.
+ *
+ * `bg` is expected to be one of the fixed hex values of `V`; the default
+ * foreground is white, which reaches AA on all of them. Pass `fg` whenever
+ * `bg` is a theme variable, since white only works on one of the two themes.
+ */
 export const btnStyle = (
   bg: string,
-  opts?: { disabled?: boolean; small?: boolean },
+  opts?: { disabled?: boolean; small?: boolean; fg?: string },
 ): React.CSSProperties => ({
   padding: opts?.small ? '6px 12px' : '8px 14px',
   borderRadius: 6,
   border: `1px solid var(--theme-elevation-300)`,
   backgroundColor: bg,
-  color: '#fff',
+  color: opts?.fg ?? '#fff',
   fontWeight: 600,
   fontSize: opts?.small ? 12 : 13,
   cursor: opts?.disabled ? 'not-allowed' : 'pointer',

package/src/views/shared/icons.tsx

@@ -0,0 +1,146 @@
+/**
+ * Inlined Lucide icons.
+ *
+ * The plugin used to require `lucide-react` as a peer dependency for exactly
+ * 15 icons across two admin views. That made every integrator install an icon set,
+ * and a missing install a build-time failure, for 15 paths totalling a few
+ * hundred bytes. They are inlined here instead, and `lucide-react` is no longer
+ * a peer dependency.
+ *
+ * The geometry below is copied from lucide-react v1.41.0 and, like the rest of
+ * Lucide, is under the ISC licence:
+ *
+ *   ISC License
+ *   Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as
+ *   part of Feather (MIT). All other copyright (c) for Lucide are held by
+ *   Lucide Contributors 2022.
+ *
+ *   Permission to use, copy, modify, and/or distribute this software for any
+ *   purpose with or without fee is hereby granted, provided that the above
+ *   copyright notice and this permission notice appear in all copies.
+ *
+ *   THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ *   WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ *   MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ *   ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ *   WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ *   ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+ *   IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import React from 'react'
+
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+  /** Rendered width and height. Lucide's own default is 24. */
+  size?: number | string
+}
+
+type IconNode = ReadonlyArray<readonly [string, Record<string, string | number>]>
+
+/**
+ * Icons are decorative by default (`aria-hidden`): every control that has
+ * nothing but an icon inside carries its own `aria-label`. Pass
+ * `aria-hidden={false}` plus a label to make one meaningful on its own.
+ */
+function createIcon(displayName: string, nodes: IconNode): React.FC<IconProps> {
+  const Icon: React.FC<IconProps> = ({ size = 24, strokeWidth = 2, ...rest }) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...rest}
+    >
+      {nodes.map(([tag, attrs], index) => React.createElement(tag, { key: index, ...attrs }))}
+    </svg>
+  )
+  Icon.displayName = displayName
+  return Icon
+}
+
+export const Bot = createIcon('Bot', [
+  ['path', { d: "M12 8V4H8" }],
+  ['rect', { width: "16", height: "12", x: "4", y: "8", rx: "2" }],
+  ['path', { d: "M2 14h2" }],
+  ['path', { d: "M20 14h2" }],
+  ['path', { d: "M15 13v2" }],
+  ['path', { d: "M9 13v2" }],
+] as const)
+
+export const ChevronDown = createIcon('ChevronDown', [
+  ['path', { d: "m6 9 6 6 6-6" }],
+] as const)
+
+export const ChevronUp = createIcon('ChevronUp', [
+  ['path', { d: "m18 15-6-6-6 6" }],
+] as const)
+
+export const Clock = createIcon('Clock', [
+  ['circle', { cx: "12", cy: "12", r: "10" }],
+  ['path', { d: "M12 6v6l4 2" }],
+] as const)
+
+export const FileSignature = createIcon('FileSignature', [
+  ['path', { d: "M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z" }],
+  ['path', { d: "M14.487 7.858A1 1 0 0 1 14 7V2" }],
+  ['path', { d: "M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516" }],
+  ['path', { d: "M8 18h1" }],
+] as const)
+
+export const Globe = createIcon('Globe', [
+  ['circle', { cx: "12", cy: "12", r: "10" }],
+  ['path', { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }],
+  ['path', { d: "M2 12h20" }],
+] as const)
+
+export const Inbox = createIcon('Inbox', [
+  ['polyline', { points: "22 12 16 12 14 15 10 15 8 12 2 12" }],
+  ['path', { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }],
+] as const)
+
+export const Link2 = createIcon('Link2', [
+  ['path', { d: "M9 17H7A5 5 0 0 1 7 7h2" }],
+  ['path', { d: "M15 7h2a5 5 0 1 1 0 10h-2" }],
+  ['line', { x1: "8", x2: "16", y1: "12", y2: "12" }],
+] as const)
+
+export const Mail = createIcon('Mail', [
+  ['path', { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }],
+  ['rect', { x: "2", y: "4", width: "20", height: "16", rx: "2" }],
+] as const)
+
+export const Paperclip = createIcon('Paperclip', [
+  ['path', { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }],
+] as const)
+
+export const Plus = createIcon('Plus', [
+  ['path', { d: "M5 12h14" }],
+  ['path', { d: "M12 5v14" }],
+] as const)
+
+export const Search = createIcon('Search', [
+  ['path', { d: "m21 21-4.34-4.34" }],
+  ['circle', { cx: "11", cy: "11", r: "8" }],
+] as const)
+
+export const Settings = createIcon('Settings', [
+  ['path', { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }],
+  ['circle', { cx: "12", cy: "12", r: "3" }],
+] as const)
+
+export const Timer = createIcon('Timer', [
+  ['line', { x1: "10", x2: "14", y1: "2", y2: "2" }],
+  ['line', { x1: "12", x2: "15", y1: "14", y2: "11" }],
+  ['circle', { cx: "12", cy: "14", r: "8" }],
+] as const)
+
+export const X = createIcon('X', [
+  ['path', { d: "M18 6 6 18" }],
+  ['path', { d: "m6 6 12 12" }],
+] as const)

package/src/views/shared/locales/en.json

@@ -1,4 +1,9 @@
 {
+  "errorBoundary": {
+    "title": "Something went wrong",
+    "description": "This section could not be displayed. The technical details were logged to the browser console.",
+    "retry": "Retry"
+  },
   "common": {
     "loading": "Loading...",
     "cancel": "Cancel",
@@ -144,6 +149,7 @@
     "title": "CRM Clients",
     "subtitle": "Client management and history",
     "searchPlaceholder": "Search a client...",
+    "searchLabel": "Search a client",
     "noClientFound": "No client found",
     "selectClient": "Select a client to see their details",
     "editButton": "Edit",
@@ -316,6 +322,8 @@
       "resolved": "Resolved",
       "slaBreach": "SLA breached"
     },
+    "searchLabel": "Search a ticket",
+    "sortLabel": "Sort the tickets",
     "sort": {
       "newest": "Most recent",
       "oldest": "Oldest first",
@@ -324,6 +332,7 @@
     },
     "selected": "{{count}} selected",
     "selectedPlural": "{{count}} selected",
+    "tabsLabel": "Inbox filters",
     "closeAction": "Close",
     "reopenAction": "Reopen",
     "moreActions": "More actions...",
@@ -344,6 +353,7 @@
   "emailTracking": {
     "title": "Email tracking",
     "searchPlaceholder": "Search by recipient or subject...",
+    "searchLabel": "Search an email",
     "noLogs": "No logs found for this period",
     "tabs": {
       "all": "All",
@@ -366,7 +376,8 @@
       "action": "Action",
       "time": "Time"
     },
-    "errorLabel": "Error"
+    "errorLabel": "Error",
+    "toggleError": "Show the error detail"
   },
   "logs": {
     "title": "Email Logs",
@@ -530,8 +541,11 @@
     "messageDeletedToast": "Message deleted",
     "split": {
       "subjectPlaceholder": "New ticket subject...",
+      "subjectLabel": "Subject of the new ticket",
       "createBtn": "Create ticket"
     },
+    "sendAs": "Send as",
+    "manualMinutes": "Minutes to add",
     "editMessage": "Edit",
     "editMessageLabel": "Edit message",
     "uploadItem": "Attachment {{name}}",

package/src/views/shared/locales/fr.json

@@ -1,4 +1,9 @@
 {
+  "errorBoundary": {
+    "title": "Une erreur est survenue",
+    "description": "Cette section n'a pas pu s'afficher. Le detail technique est consigne dans la console du navigateur.",
+    "retry": "Reessayer"
+  },
   "common": {
     "loading": "Chargement...",
     "cancel": "Annuler",
@@ -144,6 +149,7 @@
     "title": "CRM Clients",
     "subtitle": "Gestion des clients et historique",
     "searchPlaceholder": "Rechercher un client...",
+    "searchLabel": "Rechercher un client",
     "noClientFound": "Aucun client trouvé",
     "selectClient": "Sélectionnez un client pour voir ses détails",
     "editButton": "Modifier",
@@ -316,6 +322,8 @@
       "resolved": "Résolus",
       "slaBreach": "SLA dépassé"
     },
+    "searchLabel": "Rechercher un ticket",
+    "sortLabel": "Trier les tickets",
     "sort": {
       "newest": "Plus récent",
       "oldest": "Plus ancien",
@@ -324,6 +332,7 @@
     },
     "selected": "{{count}} sélectionné",
     "selectedPlural": "{{count}} sélectionnés",
+    "tabsLabel": "Filtres de la boite de reception",
     "closeAction": "Fermer",
     "reopenAction": "Rouvrir",
     "moreActions": "Plus d'actions...",
@@ -344,6 +353,7 @@
   "emailTracking": {
     "title": "Suivi des emails",
     "searchPlaceholder": "Rechercher par destinataire ou sujet...",
+    "searchLabel": "Rechercher un email",
     "noLogs": "Aucun log trouvé pour cette période",
     "tabs": {
       "all": "Tous",
@@ -366,7 +376,8 @@
       "action": "Action",
       "time": "Temps"
     },
-    "errorLabel": "Erreur"
+    "errorLabel": "Erreur",
+    "toggleError": "Afficher le detail de l'erreur"
   },
   "logs": {
     "title": "Logs Email",
@@ -530,8 +541,11 @@
     "messageDeletedToast": "Message supprimé",
     "split": {
       "subjectPlaceholder": "Sujet du nouveau ticket...",
+      "subjectLabel": "Sujet du nouveau ticket",
       "createBtn": "Créer le ticket"
     },
+    "sendAs": "Envoyer en tant que",
+    "manualMinutes": "Minutes a ajouter",
     "editMessage": "Éditer",
     "editMessageLabel": "Éditer le message",
     "uploadItem": "PJ {{name}}",

package/src/types/lucide-react.d.ts

@@ -1,42 +0,0 @@
-/**
- * Ambient stub for 'lucide-react'.
- *
- * lucide-react is a REQUIRED peer dependency — three unconditionally registered
- * components import it statically, so a host without it fails at build time.
- * It is deliberately not a devDependency here; this stub is what lets the plugin
- * type-check in isolation without pulling the icon set into the repo.
- *
- * Keep the icon list below in sync with the actual imports:
- *   src/portal/LiveChat.tsx
- *   src/views/PendingEmailsView/client.tsx
- *   src/views/TicketingSettingsView/client.tsx
- */
-declare module 'lucide-react' {
-  import type { FC, SVGProps } from 'react'
-  type LucideIcon = FC<SVGProps<SVGSVGElement> & { size?: number | string; strokeWidth?: number | string }>
-  // Export every named icon as LucideIcon so any import resolves cleanly
-  const MessageCircle: LucideIcon
-  const Send: LucideIcon
-  const X: LucideIcon
-  const Minimize2: LucideIcon
-  const ArrowLeft: LucideIcon
-  const Inbox: LucideIcon
-  const Plus: LucideIcon
-  const Link2: LucideIcon
-  const Search: LucideIcon
-  const ChevronDown: LucideIcon
-  const ChevronUp: LucideIcon
-  const Paperclip: LucideIcon
-  const Settings: LucideIcon
-  const Mail: LucideIcon
-  const Bot: LucideIcon
-  const Clock: LucideIcon
-  const Timer: LucideIcon
-  const Globe: LucideIcon
-  const FileSignature: LucideIcon
-  export {
-    MessageCircle, Send, X, Minimize2, ArrowLeft,
-    Inbox, Plus, Link2, Search, ChevronDown, ChevronUp, Paperclip,
-    Settings, Mail, Bot, Clock, Timer, Globe, FileSignature,
-  }
-}