@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/tickets/TicketConversation.jsx

@@ -0,0 +1,455 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    AlertTriangle,
+    ArrowDownLeft,
+    ArrowUpRight,
+    Loader2,
+    Lock,
+    ImageOff,
+    Mail,
+    Paperclip,
+    Phone,
+    Type,
+    Globe,
+} from 'lucide-react';
+
+import { toast } from 'react-toastify';
+import parse, { attributesToProps } from 'html-react-parser';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/TicketConversation.module.scss';
+
+const CHANNEL_ICON = {
+    Email: Mail,
+    Phone: Phone,
+    Web: Globe,
+};
+
+/**
+ * A support ticket's conversation.
+ *
+ * The three kinds of entry are visually distinct because confusing them has a
+ * cost, and the costs are not symmetrical:
+ *
+ *   in    — the customer wrote it. Left, plain surface.
+ *   out   — we wrote it. Left-accented, tinted, so a reply is obvious at a
+ *           glance when scanning a long thread.
+ *   note  — an internal note. Marked with a lock and its own colour, because
+ *           an agent must never mistake one for something the customer has
+ *           seen. That is the single most expensive mistake in a helpdesk.
+ *
+ * Ordered by when a message was SENT, not when the sync imported it. The
+ * server sorts on `posted_at`; this component does not re-sort.
+ */
+const TicketConversation = ({
+    ticketId,
+    base = '/ajax/tickets',
+    onLoaded,
+    canReply = true,
+}) => {
+    const [entries, setEntries] = useState([]);
+    const [ticket, setTicket] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [failed, setFailed] = useState(false);
+    const mountedRef = useRef(true);
+
+    useEffect(() => () => {
+        mountedRef.current = false;
+    }, []);
+
+    const load = useCallback(() => {
+        if (!ticketId) return;
+
+        setLoading(true);
+        setFailed(false);
+
+        CustomFetch(
+            `${base}/${ticketId}/conversation`,
+            'GET',
+            {},
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setEntries(Array.isArray(result?.data) ? result.data : []);
+                setTicket(result?.ticket ?? null);
+                setLoading(false);
+                onLoaded?.(result?.ticket ?? null);
+            },
+            null,
+            { cache: false }
+        ).catch(() => {
+            if (!mountedRef.current) return;
+
+            setLoading(false);
+            setFailed(true);
+        });
+    }, [base, ticketId, onLoaded]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    const counts = useMemo(() => {
+        const out = { in: 0, out: 0, note: 0 };
+
+        entries.forEach((e) => {
+            out[e.direction] = (out[e.direction] ?? 0) + 1;
+        });
+
+        return out;
+    }, [entries]);
+
+    if (loading) {
+        return (
+            <p className={styles.state}>
+                <Loader2 size={16} className={styles.spin} /> Loading conversation…
+            </p>
+        );
+    }
+
+    if (failed) {
+        return (
+            <p className={styles.state}>
+                <AlertTriangle size={16} /> The conversation could not be loaded.
+            </p>
+        );
+    }
+
+    return (
+        <div className={styles.wrap}>
+            {ticket && <TicketHeader ticket={ticket} counts={counts} />}
+
+            {entries.length === 0 ? (
+                <p className={styles.state}>
+                    Nothing has been said on this ticket yet.
+                </p>
+            ) : (
+                <ol className={styles.thread}>
+                    {entries.map((entry) => (
+                        <Entry key={entry.id} entry={entry} />
+                    ))}
+                </ol>
+            )}
+
+            {canReply && (
+                <Composer
+                    base={base}
+                    ticketId={ticketId}
+                    onPosted={(entry) => setEntries((prev) => [...prev, entry])}
+                />
+            )}
+        </div>
+    );
+};
+
+/**
+ * Reply, or leave an internal note.
+ *
+ * The two are one control with an explicit switch rather than two buttons,
+ * and the switch RESTATES the consequence in words ("the customer will see
+ * 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.
+ */
+const Composer = ({ base, ticketId, onPosted }) => {
+    const [body, setBody] = useState('');
+    const [internal, setInternal] = useState(false);
+    const [sending, setSending] = useState(false);
+
+    const send = () => {
+        const text = body.trim();
+
+        if (text === '' || sending) return;
+
+        setSending(true);
+
+        CustomFetch(
+            `${base}/${ticketId}/reply`,
+            'POST',
+            { body: text, internal },
+            (result) => {
+                setSending(false);
+                setBody('');
+                toast.success(result?.message || 'Sent');
+
+                if (result?.data) onPosted(result.data);
+            },
+            null,
+            { silentStatuses: [422, 502] }
+        ).catch((error) => {
+            setSending(false);
+            // 422 and 502 carry the reason — no email to reply to, or
+            // Microsoft refused the send — and the reason is the whole point.
+            toast.error(error?.data?.message || 'Could not send.');
+        });
+    };
+
+    return (
+        <div className={`${styles.composer} ${internal ? styles.composerNote : ''}`}>
+            <div className={styles.composerBar}>
+                <label className={styles.switch}>
+                    <input
+                        type="checkbox"
+                        checked={internal}
+                        onChange={(e) => setInternal(e.target.checked)}
+                    />
+                    Internal note
+                </label>
+
+                <span className={styles.consequence}>
+                    {internal
+                        ? 'Only staff can see this.'
+                        : 'This is emailed to the customer.'}
+                </span>
+            </div>
+
+            <textarea
+                className={styles.composerInput}
+                value={body}
+                rows={4}
+                placeholder={
+                    internal
+                        ? 'Leave a note for the team…'
+                        : 'Write a reply to the customer…'
+                }
+                onChange={(e) => setBody(e.target.value)}
+            />
+
+            <div className={styles.composerActions}>
+                <button
+                    type="button"
+                    className={styles.send}
+                    onClick={send}
+                    disabled={sending || body.trim() === ''}
+                >
+                    {sending ? 'Sending…' : internal ? 'Add note' : 'Send reply'}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const TicketHeader = ({ ticket, counts }) => {
+    const Channel = CHANNEL_ICON[ticket.channel] ?? Mail;
+    const closed = (ticket.status_type || '').toLowerCase() === 'closed';
+
+    return (
+        <header className={styles.head}>
+            <div className={styles.headMain}>
+                <p className={styles.reference}>
+                    {ticket.reference ? `#${ticket.reference}` : `Ticket ${ticket.id}`}
+                    <span
+                        className={`${styles.status} ${closed ? styles.closed : styles.open}`}
+                    >
+                        {ticket.status_type || 'Unknown'}
+                    </span>
+                </p>
+                <h3>{ticket.subject}</h3>
+            </div>
+
+            <dl className={styles.meta}>
+                {ticket.customer && (
+                    <div>
+                        <dt>Client</dt>
+                        <dd>{ticket.customer}</dd>
+                    </div>
+                )}
+                {ticket.contact && (
+                    <div>
+                        <dt>Raised by</dt>
+                        <dd>{ticket.contact}</dd>
+                    </div>
+                )}
+                {ticket.assignee_name && (
+                    <div>
+                        <dt>Assigned to</dt>
+                        <dd>{ticket.assignee_name}</dd>
+                    </div>
+                )}
+                <div>
+                    <dt>Channel</dt>
+                    <dd className={styles.channel}>
+                        <Channel size={13} strokeWidth={2} />
+                        {ticket.channel || '—'}
+                    </dd>
+                </div>
+                <div>
+                    <dt>Messages</dt>
+                    <dd>
+                        {counts.in} in · {counts.out} out
+                        {counts.note > 0 && ` · ${counts.note} internal`}
+                    </dd>
+                </div>
+            </dl>
+
+        </header>
+    );
+};
+
+/**
+ * One message's body.
+ *
+ * `body_html` is the server's SANITISED copy of the email, and the only reason
+ * it can be rendered at all: the markup came from a stranger, and it has been
+ * through an allowlist on the way in (App\Services\Mail\HtmlEmailSanitizer).
+ * This component adds no sanitising of its own and must not be given markup
+ * from anywhere else — html-react-parser builds elements, it does not clean
+ * them.
+ *
+ * `body` (plain text) is the fallback and is what every note imported before
+ * the column existed still shows. Both are always present in the payload, so
+ * the plain-text switch below is free.
+ *
+ * Remote images arrive with their URL parked in `data-blocked-src` and no
+ * `src`, so the browser has already declined to fetch them by the time this
+ * runs. Swapping them in is a per-message, per-session choice held in state and
+ * never persisted — the point of blocking a tracking pixel is that opening the
+ * ticket does not announce itself, and a remembered preference would announce
+ * it on every message thereafter.
+ */
+export const EntryBody = ({ entry }) => {
+    const html = entry.body_html || null;
+    const [plain, setPlain] = useState(false);
+    const [showImages, setShowImages] = useState(false);
+
+    const blockedCount = useMemo(() => {
+        if (!html) return 0;
+
+        return (html.match(/data-blocked-src=/g) || []).length;
+    }, [html]);
+
+    const options = useMemo(
+        () => ({
+            replace: (node) => {
+                if (node.type !== 'tag' || node.name !== 'img') return undefined;
+
+                const blocked = node.attribs?.['data-blocked-src'];
+
+                if (!blocked) return undefined;
+
+                const props = attributesToProps(node.attribs);
+
+                delete props['data-blocked-src'];
+
+                if (showImages) {
+                    return <img {...props} src={blocked} />;
+                }
+
+                // A placeholder rather than nothing: a signature whose logo has
+                // silently vanished reads as a broken message, and the reader
+                // has no way to know there is a button that would fix it.
+                return (
+                    <span className={styles.blockedImage} title={blocked}>
+                        {props.alt || 'Image'}
+                    </span>
+                );
+            },
+        }),
+        [showImages]
+    );
+
+    if (!html) {
+        return <p className={styles.body}>{entry.body}</p>;
+    }
+
+    return (
+        <>
+            <div className={styles.bodyBar}>
+                {blockedCount > 0 && !showImages && (
+                    <button
+                        type="button"
+                        className={styles.bodyAction}
+                        onClick={() => setShowImages(true)}
+                    >
+                        <ImageOff size={12} strokeWidth={2} />
+                        Show {blockedCount === 1 ? 'image' : `${blockedCount} images`}
+                    </button>
+                )}
+
+                {blockedCount > 0 && !showImages && (
+                    <span className={styles.bodyHint}>
+                        Remote images are blocked — they tell the sender you
+                        opened this.
+                    </span>
+                )}
+
+                <button
+                    type="button"
+                    className={styles.bodyAction}
+                    onClick={() => setPlain((v) => !v)}
+                >
+                    <Type size={12} strokeWidth={2} />
+                    {plain ? 'Formatted' : 'Plain text'}
+                </button>
+            </div>
+
+            {plain ? (
+                <p className={styles.body}>{entry.body}</p>
+            ) : (
+                <div className={styles.bodyHtml}>{parse(html, options)}</div>
+            )}
+        </>
+    );
+};
+
+const Entry = ({ entry }) => {
+    const isNote = entry.direction === 'note';
+    const isInbound = entry.direction === 'in';
+    const Icon = isNote ? Lock : isInbound ? ArrowDownLeft : ArrowUpRight;
+
+    const cls = isNote
+        ? styles.entryNote
+        : isInbound
+          ? styles.entryIn
+          : styles.entryOut;
+
+    return (
+        <li className={`${styles.entry} ${cls}`}>
+            <div className={styles.entryHead}>
+                <span className={styles.entryIcon} aria-hidden="true">
+                    <Icon size={13} strokeWidth={2.5} />
+                </span>
+
+                <span className={styles.author}>
+                    {entry.author_name || entry.author_email || 'Unknown'}
+                </span>
+
+                {/* The label is the point: never colour alone, and never
+                    leave "is the customer able to see this?" to inference. */}
+                <span className={styles.tag}>
+                    {isNote
+                        ? 'Internal note'
+                        : isInbound
+                          ? 'From customer'
+                          : 'Reply sent'}
+                </span>
+
+                {entry.visibility === 'private' && !isNote && (
+                    <span className={styles.privateTag}>
+                        <Lock size={10} /> Private
+                    </span>
+                )}
+
+                {entry.is_first_message && (
+                    <span className={styles.firstTag}>Original request</span>
+                )}
+
+                {entry.attachment_count > 0 && (
+                    <span className={styles.attachTag}>
+                        <Paperclip size={11} /> {entry.attachment_count}
+                    </span>
+                )}
+
+                {entry.posted_at && (
+                    <time className={styles.when} dateTime={entry.posted_at}>
+                        {new Date(entry.posted_at).toLocaleString()}
+                    </time>
+                )}
+            </div>
+
+            <EntryBody entry={entry} />
+        </li>
+    );
+};
+
+export default TicketConversation;

package/src/components/utils/rowActionSettings.js

@@ -0,0 +1,117 @@
+/**
+ * The grid's trailing "Action" column used to render one kind of thing: a
+ * shared setting (`update`, `delete`, `view`, …) named by id in the root
+ * `settings` array and drawn by DataGrid's own renderSetting.
+ *
+ * A view often wants one more verb in that same cell — "mark as complete",
+ * "mark as spam", "assign to" — which is not a shared setting and never will
+ * be, because the endpoint behind it belongs to that one view. The alternative
+ * was a second `type: "action"` column sitting beside the Action column, i.e.
+ * two action columns per grid.
+ *
+ * So a root `settings` entry may now ALSO be an inline row-action config, the
+ * same object shape an `action` column already accepts:
+ *
+ *   { id, icon, label, show?, confirm?, fetch: { url, method?, pathKey?, … } }
+ *
+ * and its picker variant, which opens a menu instead of a confirm dialog:
+ *
+ *   { id, icon, label, optionsUrl, optionsParams?, fetch: { …, bodyKey } }
+ *
+ * Telling the two apart is by SHAPE, not by an opt-in flag: a shared setting
+ * is identified by its id and so never carries a `fetch`/`optionsUrl` of its
+ * own. Every settings array written before this change therefore partitions
+ * entirely into `standard` and behaves exactly as it did.
+ */
+
+/**
+ * True for a root `settings` entry that is an inline row action rather than
+ * the id of a shared setting.
+ */
+export const isInlineRowActionSetting = (entry) =>
+    Boolean(
+        entry &&
+            typeof entry === 'object' &&
+            !Array.isArray(entry) &&
+            (entry.optionsUrl ||
+                (entry.fetch &&
+                    typeof entry.fetch === 'object' &&
+                    entry.fetch.url))
+    );
+
+/**
+ * True for an inline row action that opens a picker (quick-assign) rather than
+ * firing straight away.
+ */
+export const isPickerRowAction = (config) =>
+    Boolean(config && typeof config === 'object' && config.optionsUrl);
+
+/**
+ * Split a root `settings` array into the inline row actions and the shared
+ * settings, preserving each group's declared order.
+ *
+ * Inline actions come first in the rendered cell: they are the verbs specific
+ * to this view, and update/delete keep their familiar position at the end of
+ * the row where muscle memory expects them.
+ */
+export const splitSettingEntries = (settings) => {
+    const entries = Array.isArray(settings) ? settings : [];
+
+    return {
+        inlineActions: entries.filter(isInlineRowActionSetting),
+        standard: entries.filter((entry) => !isInlineRowActionSetting(entry)),
+    };
+};
+
+/**
+ * Cache key for a picker's option list. Options are fetched once per grid
+ * mount per (url, params) pair — the user list behind a quick-assign menu does
+ * not change between two clicks, and refetching it made the menu flash.
+ */
+export const pickerOptionsCacheKey = (config) =>
+    `${config?.optionsUrl || ''}|${JSON.stringify(config?.optionsParams || {})}`;
+
+/**
+ * Normalise a dropdown endpoint's answer to `[{ id, label }]`.
+ *
+ * The CRM's `/ajax/*\/dropdown` endpoints answer `{ data: [...] }`, which
+ * CustomFetch hands back as `res.data.data`; a few answer a bare array. Both
+ * are accepted so a picker can point at either without a config flag.
+ */
+export const normalisePickerOptions = (payload) => {
+    const list = Array.isArray(payload)
+        ? payload
+        : Array.isArray(payload?.data)
+        ? payload.data
+        : Array.isArray(payload?.data?.data)
+        ? payload.data.data
+        : [];
+
+    return list
+        .map((option) =>
+            option && typeof option === 'object'
+                ? {
+                      id: option.id ?? option.value ?? null,
+                      label: String(
+                          option.label ?? option.name ?? option.id ?? ''
+                      ),
+                  }
+                : { id: option, label: String(option) }
+        )
+        .filter((option) => option.label !== '');
+};
+
+/** Case-insensitive substring match over the option labels. */
+export const filterPickerOptions = (options, search) => {
+    const term = String(search || '')
+        .trim()
+        .toLowerCase();
+
+    if (!term) {
+        return options;
+    }
+
+    return options.filter((option) =>
+        String(option.label).toLowerCase().includes(term)
+    );
+};