@consilioweb/payload-support 0.15.0 → 1.0.0

package/dist/components/TicketConversation/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { C, s } from './constants.js';
+import { C, layoutStyles, s } from './constants.js';
 import { getDateLabel, formatMessageDate } from './utils.js';
 import { CodeBlockRendererHtml, CodeBlockRenderer } from './components/CodeBlock.js';
 import { CodeBlockInserter } from './components/CodeBlockInserter.js';
@@ -9,7 +9,7 @@ import { TicketHeader } from './components/TicketHeader.js';
 import { ClientBar } from './components/ClientBar.js';
 import { QuickActions } from './components/QuickActions.js';
 import { AISummaryPanel } from './components/AISummaryPanel.js';
-import { MergePanel, ExtMessagePanel, SnoozePanel } from './components/ActionPanels.js';
+import { MergePanel, ExtMessagePanel, SnoozePanel, ReminderPanel } from './components/ActionPanels.js';
 import { ActivityLog } from './components/ActivityLog.js';
 import { ClientHistory } from './components/ClientHistory.js';
 import { TimeTrackingPanel } from './components/TimeTrackingPanel.js';
@@ -18,149 +18,12 @@ import { useMessageActions } from './hooks/useMessageActions.js';
 import { useTicketActions } from './hooks/useTicketActions.js';
 import { useReply } from './hooks/useReply.js';
 import { useAI } from './hooks/useAI.js';
+import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl.js';
 import { getFeatures } from './config.js';
+import { SkeletonText } from './SkeletonText.js';
+import { RewriteDropdown } from './RewriteDropdown.js';
 import '../../styles/theme.css';
 
-function useDocumentIdFromUrl() {
-  const [id, setId] = useState(void 0);
-  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 };
-}
-function SkeletonText({ lines = 3 }) {
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px", padding: "12px 0" }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        height: "14px",
-        borderRadius: "4px",
-        backgroundColor: "#e2e8f0",
-        width: i === lines - 1 ? "60%" : "100%",
-        animation: "pulse 1.5s ease-in-out infinite"
-      }
-    },
-    i
-  )) });
-}
-const layoutStyles = {
-  root: { padding: "12px 0" },
-  twoColumns: {
-    display: "grid",
-    gridTemplateColumns: "1fr 320px",
-    gap: "16px",
-    alignItems: "start"
-  },
-  mainColumn: { minWidth: 0 },
-  sideColumn: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    position: "sticky",
-    top: "80px"
-  }
-};
-const REWRITE_STYLES = [
-  { id: "auto", label: "\u270F\uFE0F Auto", desc: "Garde le ton actuel" },
-  { id: "tutoyer", label: "\u{1F44B} Tutoyer", desc: "Passe en tu" },
-  { id: "vouvoyer", label: "\u{1F3A9} Vouvoyer", desc: "Passe en vous" },
-  { id: "formel", label: "\u{1F4BC} Formel", desc: "Ton professionnel" },
-  { id: "amical", label: "\u{1F60A} Amical", desc: "Ton chaleureux" },
-  { id: "court", label: "\u26A1 Court", desc: "Version concise" }
-];
-const RewriteDropdown = ({ disabled, loading, onSelect }) => {
-  const [open, setOpen] = useState(false);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (!open) return;
-    const close = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", close);
-    return () => document.removeEventListener("mousedown", close);
-  }, [open]);
-  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen(!open),
-        disabled,
-        style: {
-          ...s.outlineBtn("#0891b2", disabled),
-          fontSize: "11px",
-          padding: "3px 10px",
-          borderRadius: "14px",
-          display: "flex",
-          alignItems: "center",
-          gap: "4px"
-        },
-        children: [
-          loading ? "Reformulation..." : "\u270F\uFE0F Reformuler",
-          !loading && /* @__PURE__ */ jsx("span", { style: { fontSize: 9, opacity: 0.7 }, children: "\u25BC" })
-        ]
-      }
-    ),
-    open && !disabled && !loading && /* @__PURE__ */ jsx(
-      "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"
-        },
-        children: REWRITE_STYLES.map((style) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            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.style.background = "var(--theme-elevation-50, #f9fafb)";
-            },
-            onMouseLeave: (e) => {
-              e.target.style.background = "transparent";
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "var(--theme-text, #111)" }, children: style.label }),
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "var(--theme-elevation-500, #6b7280)" }, children: style.desc })
-            ]
-          },
-          style.id
-        ))
-      }
-    )
-  ] });
-};
 const TicketConversation = () => {
   const { id } = useDocumentIdFromUrl();
   const [features] = useState(() => getFeatures());
@@ -183,6 +46,7 @@ const TicketConversation = () => {
   const [ticketSubject, setTicketSubject] = useState("");
   const [ticketSource, setTicketSource] = useState("");
   const [chatSession, setChatSession] = useState("");
+  const [autoCloseScheduledAt, setAutoCloseScheduledAt] = useState(null);
   const [clientTickets, setClientTickets] = useState([]);
   const [clientProjects, setClientProjects] = useState([]);
   const [clientNotes, setClientNotes] = useState("");
@@ -215,6 +79,7 @@ const TicketConversation = () => {
           setClient(d.client);
         }
         setSnoozeUntil(d.snoozeUntil || null);
+        setAutoCloseScheduledAt(d.autoCloseScheduledAt || null);
         setLastClientReadAt(d.lastClientReadAt || null);
         setCurrentStatus(d.status || "");
         setTicketNumber(d.ticketNumber || "");
@@ -359,7 +224,7 @@ const TicketConversation = () => {
   const ma = useMessageActions(id, client, fetchAll);
   const { togglingAuthor, editingMsg, editBody, editHtml, setEditHtml, savingEdit, handleEditStart, handleEditSave, handleEditCancel, deletingMsg, handleDelete, resendingMsg, resendSuccess, handleResend, handleToggleAuthor, handleSplitMessage, setEditBody } = ma;
   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;
   const replyEditorRef = useRef(null);
   const rp = useReply(id, client, cannedResponses, ticketNumber, ticketSubject, fetchAll, handleNextTicket, replyEditorRef);
   const { fileInputRef, replyBody, setReplyBody, replyHtml, setReplyHtml, replyFiles, setReplyFiles, isInternal, setIsInternal, notifyClient, setNotifyClient, sendAsClient, setSendAsClient, sending, showSchedule, setShowSchedule, scheduleDate, setScheduleDate, handleEditorFileUpload, handleCannedSelect, handleReplyFileChange, handleSendReply, handleScheduleReply } = rp;
@@ -388,6 +253,7 @@ const TicketConversation = () => {
           const d = await ticketRes.json();
           setCurrentStatus(d.status || "");
           setSnoozeUntil(d.snoozeUntil || null);
+          setAutoCloseScheduledAt(d.autoCloseScheduledAt || null);
           setLastClientReadAt(d.lastClientReadAt || null);
         }
         if (activityRes.ok) {
@@ -1075,18 +941,33 @@ const TicketConversation = () => {
               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,
+            onCancelScheduledClose: handleCancelScheduledClose,
+            cancelingClose,
+            reminderSuccess,
             showNextTicket,
             nextTicketId,
             nextTicketInfo,
@@ -1136,7 +1017,19 @@ const TicketConversation = () => {
             handleExtFileChange
           }
         ),
-        features.snooze && showSnooze && /* @__PURE__ */ jsx(SnoozePanel, { snoozeSaving, handleSnooze })
+        features.snooze && showSnooze && /* @__PURE__ */ jsx(SnoozePanel, { snoozeSaving, handleSnooze }),
+        features.autoClose && showReminder && /* @__PURE__ */ jsx(
+          ReminderPanel,
+          {
+            clientFirstName: client?.firstName || "",
+            clientEmail: client?.email || "",
+            reminderHours,
+            setReminderHours,
+            reminderSending,
+            reminderError,
+            handleSendReminder
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { style: layoutStyles.sideColumn, children: [
         /* @__PURE__ */ jsx(