@visns-studio/visns-components 6.28.0 → 6.31.0

package/src/components/tickets/TicketConversation.jsx

@@ -25,6 +25,44 @@ const CHANNEL_ICON = {
     Web: Globe,
 };
 
+/**
+ * Who an email went to, or is about to go to.
+ *
+ * A reply on a ticket goes to everybody on the chain, not to the one person
+ * whose message is on screen — so the composer has to SAY so before the button
+ * is pressed, and a sent entry has to say who it reached. The same two
+ * readings are used in both places, which is why they live here rather than
+ * once in the Composer and again in Entry:
+ *
+ *   names()     — what is drawn. "Dana Reid, accounts@acme.test" — the name
+ *                 where there is one, the address where there is not.
+ *   addresses() — what is HOVERED. The full `Name <address>` list, because
+ *                 two people called Dana is exactly the case where the name
+ *                 alone is not enough to check a send against.
+ *
+ * Both take a possibly-absent list: `recipients` is null on an internal note
+ * and on every row imported before the server knew any of this.
+ */
+const names = (list) =>
+    (Array.isArray(list) ? list : [])
+        .map((r) => r.name || r.address)
+        .join(', ');
+
+const addresses = (list) =>
+    (Array.isArray(list) ? list : [])
+        .map((r) => (r.name ? `${r.name} <${r.address}>` : r.address))
+        .join(', ');
+
+/** The `title` for a To/Cc line — undefined rather than an empty attribute. */
+const recipientTitle = (to, cc) => {
+    const lines = [];
+
+    if (to.length) lines.push(`To: ${addresses(to)}`);
+    if (cc.length) lines.push(`Cc: ${addresses(cc)}`);
+
+    return lines.length ? lines.join('\n') : undefined;
+};
+
 /**
  * A support ticket's conversation.
  *
@@ -49,6 +87,10 @@ const TicketConversation = ({
 }) => {
     const [entries, setEntries] = useState([]);
     const [ticket, setTicket] = useState(null);
+    // Who a reply would go to. null = the server does not know, or the ticket
+    // cannot be answered by email — the composer falls back to the old
+    // sentence rather than naming nobody.
+    const [audience, setAudience] = useState(null);
     const [loading, setLoading] = useState(true);
     const [failed, setFailed] = useState(false);
     const mountedRef = useRef(true);
@@ -72,6 +114,7 @@ const TicketConversation = ({
 
                 setEntries(Array.isArray(result?.data) ? result.data : []);
                 setTicket(result?.ticket ?? null);
+                setAudience(result?.reply_audience ?? null);
                 setLoading(false);
                 onLoaded?.(result?.ticket ?? null);
             },
@@ -128,6 +171,7 @@ const TicketConversation = ({
                 <Composer
                     base={base}
                     ticketId={ticketId}
+                    audience={audience}
                     onPosted={(entry) => setEntries((prev) => [entry, ...prev])}
                 />
             )}
@@ -155,8 +199,15 @@ const TicketConversation = ({
  * this" / "only staff can see this") every time. An agent sending an internal
  * note to a customer is the expensive mistake here, and a toggle whose state
  * you have to remember is how it happens.
+ *
+ * `audience` is the second half of that argument. A reply goes to everybody on
+ * the email chain — which on a forwarded ticket is regularly somebody the agent
+ * has never seen — so the consequence NAMES them rather than saying "the
+ * customer". Nothing is truncated to "+3 more": the whole point of the line is
+ * to be read before sending, and the name that would be hidden is the one worth
+ * noticing. `null` means the server could not say, and the old sentence stands.
  */
-const Composer = ({ base, ticketId, onPosted }) => {
+const Composer = ({ base, ticketId, audience, onPosted }) => {
     const [body, setBody] = useState('');
     const [internal, setInternal] = useState(false);
     const [sending, setSending] = useState(false);
@@ -189,6 +240,22 @@ const Composer = ({ base, ticketId, onPosted }) => {
         });
     };
 
+    const to = audience?.to ?? [];
+    const cc = audience?.cc ?? [];
+    const named = !internal && to.length > 0;
+
+    let consequence;
+
+    if (internal) {
+        consequence = 'Only staff can see this.';
+    } else if (named) {
+        consequence = `Emailed to ${names(to)}`;
+
+        if (cc.length) consequence += ` · Cc ${names(cc)}`;
+    } else {
+        consequence = 'This is emailed to the customer.';
+    }
+
     return (
         <div className={`${styles.composer} ${internal ? styles.composerNote : ''}`}>
             <div className={styles.composerBar}>
@@ -201,10 +268,11 @@ const Composer = ({ base, ticketId, onPosted }) => {
                     Internal note
                 </label>
 
-                <span className={styles.consequence}>
-                    {internal
-                        ? 'Only staff can see this.'
-                        : 'This is emailed to the customer.'}
+                <span
+                    className={styles.consequence}
+                    title={named ? recipientTitle(to, cc) : undefined}
+                >
+                    {consequence}
                 </span>
             </div>
 
@@ -408,6 +476,20 @@ const Entry = ({ entry }) => {
           ? styles.entryIn
           : styles.entryOut;
 
+    /* Who else was on this message. Drawn for BOTH directions, and they answer
+       different questions: on our reply it is who we sent to, on the
+       customer's it is who else at their end has already read it — which is
+       what tells an agent whether the answer needs to reach anybody new.
+       Absent on notes, and on every row that predates the server sending it. */
+    const to = entry.recipients?.to ?? [];
+    const cc = entry.recipients?.cc ?? [];
+    const parts = [];
+
+    if (to.length) parts.push(`To ${names(to)}`);
+    if (cc.length) parts.push(`Cc ${names(cc)}`);
+
+    const showRecipients = !isNote && parts.length > 0;
+
     return (
         <li className={`${styles.entry} ${cls}`}>
             <div className={styles.entryHead}>
@@ -452,6 +534,15 @@ const Entry = ({ entry }) => {
                 )}
             </div>
 
+            {showRecipients && (
+                <p
+                    className={styles.recipients}
+                    title={recipientTitle(to, cc)}
+                >
+                    {parts.join(' · ')}
+                </p>
+            )}
+
             <EntryBody entry={entry} />
         </li>
     );

package/src/index.js

@@ -151,9 +151,20 @@ import {
 import {
     CALL_POP_STATUS_EVENT,
     getCallPopStatus,
+    noteCallPopChannelPresent,
     updateCallPopStatus,
 } from './components/callQueue/callPopStatus';
 
+// Ref-counted `echo.private()`. Exported because any host component that
+// listens on a channel one of ours also listens on must go through it —
+// laravel-echo's `leave()` destroys a channel for every holder, not just the
+// caller, which is how the call pop lost its subscription to the header badge.
+import {
+    acquirePrivateChannel,
+    hasPrivateChannel,
+    releasePrivateChannel,
+} from './components/echo/sharedPrivateChannel';
+
 // Vault — the staff password manager. VaultQuickSearch mounts through
 // Navigation's `renderers` slot; VaultManager is the page behind it.
 import OtpChip from './components/vault/OtpChip';
@@ -376,7 +387,11 @@ export {
     clientDetails,
     demoClientDetails,
     getCallPopStatus,
+    noteCallPopChannelPresent,
     updateCallPopStatus,
+    acquirePrivateChannel,
+    hasPrivateChannel,
+    releasePrivateChannel,
     cleanBase32,
     decodeFromBlob,
     decodeFromSource,