@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/sms/SmsInbox.jsx

@@ -0,0 +1,596 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    Inbox,
+    Loader2,
+    MessageSquare,
+    PenSquare,
+    Unplug,
+    Search,
+    Settings,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/Sms.module.scss';
+import withVaultNavigation from '../vault/vaultNavigation';
+import useDebouncedValue from '../vault/useDebouncedValue';
+import SmsComposeModal from './SmsComposeModal';
+import SmsThreadPanel from './SmsThreadPanel';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import useSmsLive, { defaultChannelFor } from './useSmsLive';
+import {
+    describeTransport,
+    initialsFor,
+    lineNumberForDisplay,
+    lineOptionLabel,
+    relativeTime,
+    threadDisplayName,
+    threadIdFromSearch,
+    upsertThread,
+} from './smsHelpers';
+
+const PER_PAGE = 25;
+
+const FILTERS = [
+    { id: 'all', label: 'All' },
+    { id: 'unread', label: 'Unread' },
+    { id: 'archived', label: 'Archived' },
+];
+
+/** Keep the address bar in step without pushing a history entry per click. */
+const syncThreadInUrl = (threadId) => {
+    if (typeof window === 'undefined' || !window.history?.replaceState) return;
+
+    const url = new URL(window.location.href);
+
+    if (threadId) url.searchParams.set('thread', threadId);
+    else url.searchParams.delete('thread');
+
+    window.history.replaceState({}, '', `${url.pathname}${url.search}${url.hash}`);
+};
+
+/**
+ * What the page says when the user can see no lines at all.
+ *
+ * Exported because it is the state a new deployment starts in — nothing works
+ * and nothing is broken — and because it is the one screen a person is most
+ * likely to hit before anybody has written a line of backend.
+ */
+export const SmsNoLines = ({ canManage = false, onOpenSettings }) => (
+    <div className={`${styles.listPane} ${styles.tableEmpty}`}>
+        <p>
+            No lines yet — ask an administrator to set one up in Settings →
+            Messaging.
+        </p>
+        {canManage && (
+            <button type="button" className={styles.primaryButton} onClick={onOpenSettings}>
+                <Settings size={14} strokeWidth={2} aria-hidden="true" />
+                Open messaging settings
+            </button>
+        )}
+    </div>
+);
+
+const previewOf = (thread) => {
+    const message = thread?.last_message;
+
+    if (!message || !message.body) return 'No messages yet';
+
+    const body = String(message.body).replace(/\s+/g, ' ').trim();
+
+    return message.direction === 'out' ? `You: ${body}` : body;
+};
+
+/**
+ * The messages page: lines and conversations on the left, one conversation on
+ * the right.
+ *
+ * Two panes because that is what a messaging inbox is, and because the two
+ * halves scroll independently — a timeline that scrolls the page takes the
+ * composer off the bottom of the screen with it. Below 900px they stop being
+ * two panes and become a list that opens into a conversation with a back
+ * button, which is the same content and one decision fewer on a phone.
+ *
+ * This page owns the live subscription for every line the user can see, and
+ * hands events down to the conversation pane. One subscription per channel,
+ * one poller when there is no Echo at all.
+ */
+const SmsInboxInner = ({
+    endpoints,
+    // Accepted so the page matches the prop shape every other CRM screen is
+    // mounted with, even though the two-pane layout does not read it.
+    userProfile: _userProfile = null,
+    canManage = false,
+    echo = null,
+    channelFor = defaultChannelFor,
+    settingsUrl = '/settings/sms',
+    clientUrl = (id) => `/clients/${id}`,
+    pageTitle = 'Messages',
+    navigate,
+    locationSearch,
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [status, setStatus] = useState(null);
+    const [lines, setLines] = useState([]);
+    const [linesLoaded, setLinesLoaded] = useState(false);
+    const [unreadByLine, setUnreadByLine] = useState({});
+
+    const [lineId, setLineId] = useState('all');
+    const [filter, setFilter] = useState('all');
+    const [search, setSearch] = useState('');
+
+    const [threads, setThreads] = useState([]);
+    const [page, setPage] = useState(1);
+    const [lastPage, setLastPage] = useState(1);
+    const [loading, setLoading] = useState(false);
+
+    const [selectedId, setSelectedId] = useState(() => threadIdFromSearch(locationSearch));
+    const [showConversation, setShowConversation] = useState(
+        () => Boolean(threadIdFromSearch(locationSearch))
+    );
+
+    const [composeOpen, setComposeOpen] = useState(false);
+    const [liveEvent, setLiveEvent] = useState(null);
+    const [refreshToken, setRefreshToken] = useState(0);
+
+    const mountedRef = useRef(true);
+    const requestRef = useRef(0);
+    const seqRef = useRef(0);
+
+    const debouncedSearch = useDebouncedValue(search, 300);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    /* -------------------------------------------------------------- loading */
+
+    useEffect(() => {
+        CustomFetch(
+            routes.status,
+            'GET',
+            null,
+            (result) => {
+                if (mountedRef.current && result) setStatus(result);
+            },
+            () => {}
+        ).catch(() => {});
+
+        CustomFetch(
+            routes.lines,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setLines(Array.isArray(result?.data) ? result.data : []);
+                setLinesLoaded(true);
+            },
+            () => {
+                if (mountedRef.current) setLinesLoaded(true);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setLinesLoaded(true);
+        });
+    }, [routes]);
+
+    const fetchThreads = useCallback(
+        (targetPage = 1, { append = false } = {}) => {
+            const ticket = requestRef.current + 1;
+
+            requestRef.current = ticket;
+            setLoading(true);
+
+            const params = { page: targetPage, per_page: PER_PAGE };
+
+            if (lineId !== 'all') params.line_id = lineId;
+            if (debouncedSearch.trim() !== '') params.search = debouncedSearch.trim();
+            if (filter === 'unread') params.unread_only = 1;
+            if (filter === 'archived') params.archived = 1;
+
+            CustomFetch(
+                routes.threads,
+                'GET',
+                params,
+                (result) => {
+                    if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                    const rows = Array.isArray(result?.data) ? result.data : [];
+
+                    setThreads((prev) => (append ? [...prev, ...rows] : rows));
+                    setPage(Number(result?.current_page) || targetPage);
+                    setLastPage(Number(result?.last_page) || 1);
+                    setLoading(false);
+                },
+                () => {
+                    if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                    setLoading(false);
+                }
+            ).catch(() => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setLoading(false);
+            });
+        },
+        [routes, lineId, debouncedSearch, filter]
+    );
+
+    useEffect(() => {
+        fetchThreads(1);
+    }, [fetchThreads]);
+
+    /* ----------------------------------------------------------------- live */
+
+    const pushEvent = useCallback((event) => {
+        if (!mountedRef.current) return;
+
+        if (event?.thread) {
+            setThreads((prev) => upsertThread(prev, event.thread));
+        }
+
+        seqRef.current += 1;
+        setLiveEvent({ seq: seqRef.current, payload: event });
+    }, []);
+
+    const handleUnread = useCallback((payload) => {
+        if (!mountedRef.current) return;
+
+        setUnreadByLine(payload?.by_line || {});
+    }, []);
+
+    useSmsLive({
+        echo,
+        lines,
+        channelFor,
+        endpoints,
+        onReceived: pushEvent,
+        onUpdated: pushEvent,
+        onUnread: handleUnread,
+        // Only ticks while there is no Echo instance: refresh the list, and
+        // let the conversation pane know to re-read itself.
+        onPoll: useCallback(() => {
+            fetchThreads(1);
+            setRefreshToken((prev) => prev + 1);
+        }, [fetchThreads]),
+    });
+
+    /* ------------------------------------------------------------ selection */
+
+    const selectThread = useCallback((thread) => {
+        const id = thread?.id ?? null;
+
+        setSelectedId(id);
+        setShowConversation(Boolean(id));
+        syncThreadInUrl(id);
+
+        // Optimistically clear the badge: the GET that opens the thread is
+        // what marks it read on the server, and it is already in flight.
+        if (id) {
+            setThreads((prev) =>
+                prev.map((one) =>
+                    String(one.id) === String(id) ? { ...one, unread_count: 0 } : one
+                )
+            );
+        }
+    }, []);
+
+    const onThreadChange = useCallback((thread) => {
+        if (!mountedRef.current || !thread) return;
+
+        setThreads((prev) =>
+            prev.some((one) => String(one.id) === String(thread.id))
+                ? prev.map((one) =>
+                      String(one.id) === String(thread.id) ? { ...one, ...thread } : one
+                  )
+                : upsertThread(prev, thread)
+        );
+    }, []);
+
+    /* --------------------------------------------------------------- render */
+
+    const transport = describeTransport(status);
+    const noLines = linesLoaded && lines.length === 0;
+
+    const lineUnread = (line) =>
+        Number(unreadByLine[line.id] ?? line.unread_count ?? 0) || 0;
+
+    const totalUnread = lines.reduce((total, line) => total + lineUnread(line), 0);
+
+    return (
+        <div className={styles.inbox}>
+            <div className={styles.inboxHead}>
+                <div className={styles.inboxHeading}>
+                    <h1 className={styles.pageTitle}>
+                        <MessageSquare size={22} strokeWidth={2.2} aria-hidden="true" />
+                        {pageTitle}
+                    </h1>
+                    <p className={styles.pageIntro}>
+                        Text messages sent and received on the practice's phone lines.
+                        Replies come back to the line they were sent from.
+                    </p>
+                    {lines.length > 0 && (
+                        <ul className={styles.lineNumbers} aria-label="Numbers clients can text">
+                            {lines.map((line) => (
+                                <li key={line.id} className={styles.lineNumber}>
+                                    <span className={styles.lineNumberLabel}>
+                                        {line.label || 'Line'}
+                                    </span>
+                                    <strong className={styles.lineNumberValue}>
+                                        {lineNumberForDisplay(line) || 'No number'}
+                                    </strong>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+
+                <div className={styles.headActions}>
+                    {canManage && (
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={() => navigate(settingsUrl)}
+                        >
+                            <Settings size={14} strokeWidth={2} aria-hidden="true" />
+                            Messaging settings
+                        </button>
+                    )}
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => setComposeOpen(true)}
+                        disabled={noLines}
+                    >
+                        <PenSquare size={14} strokeWidth={2} aria-hidden="true" />
+                        New message
+                    </button>
+                </div>
+            </div>
+
+            {/* One banner, three possible readings of it: not connected, dev
+                transport, or Zoom refusing to answer. Only a healthy Zoom
+                connection says nothing at all. */}
+            {status && transport.tone !== 'ok' && (
+                <p
+                    className={`${styles.banner} ${
+                        transport.tone === 'bad' ? styles.bannerBad : styles.bannerWarn
+                    }`}
+                    role="status"
+                >
+                    <Unplug size={14} strokeWidth={2} aria-hidden="true" />
+                    <strong>{transport.title}</strong>
+                    <span className={styles.bannerNote}>{transport.note}</span>
+                </p>
+            )}
+
+            {noLines ? (
+                <SmsNoLines
+                    canManage={canManage}
+                    onOpenSettings={() => navigate(settingsUrl)}
+                />
+            ) : (
+                <div className={styles.panes}>
+                    <section
+                        className={`${styles.listPane} ${
+                            showConversation ? styles.paneHiddenNarrow : ''
+                        }`}
+                        aria-label="Conversations"
+                    >
+                        <div className={styles.listHead}>
+                            <label className={styles.field}>
+                                <span className={styles.visuallyHidden}>Line</span>
+                                <select
+                                    className={styles.select}
+                                    value={lineId}
+                                    onChange={(event) => setLineId(event.target.value)}
+                                >
+                                    <option value="all">
+                                        {totalUnread > 0
+                                            ? `All lines · ${totalUnread} unread`
+                                            : 'All lines'}
+                                    </option>
+                                    {lines.map((line) => (
+                                        <option key={line.id} value={line.id}>
+                                            {lineOptionLabel(line, lineUnread(line))}
+                                        </option>
+                                    ))}
+                                </select>
+                            </label>
+
+                            <div className={styles.searchBar}>
+                                <Search size={15} strokeWidth={2} aria-hidden="true" />
+                                <input
+                                    type="text"
+                                    className={styles.searchInput}
+                                    value={search}
+                                    placeholder="Search messages and numbers…"
+                                    aria-label="Search conversations"
+                                    autoComplete="off"
+                                    onChange={(event) => setSearch(event.target.value)}
+                                />
+                                {loading && (
+                                    <Loader2
+                                        size={14}
+                                        className={styles.spin}
+                                        aria-label="Loading"
+                                    />
+                                )}
+                            </div>
+
+                            <div className={styles.chips}>
+                                {FILTERS.map((one) => (
+                                    <button
+                                        key={one.id}
+                                        type="button"
+                                        className={`${styles.chip} ${
+                                            filter === one.id ? styles.chipActive : ''
+                                        }`}
+                                        aria-pressed={filter === one.id}
+                                        onClick={() => setFilter(one.id)}
+                                    >
+                                        {one.label}
+                                        {one.id === 'unread' && totalUnread > 0 && (
+                                            <span className={styles.chipCount}>
+                                                {totalUnread}
+                                            </span>
+                                        )}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        <ul className={styles.threadList}>
+                            {threads.map((thread) => {
+                                const unread = Number(thread.unread_count) || 0;
+                                const name = threadDisplayName(thread);
+                                const active = String(thread.id) === String(selectedId);
+
+                                return (
+                                    <li key={thread.id}>
+                                        <button
+                                            type="button"
+                                            className={[
+                                                styles.threadRow,
+                                                active ? styles.threadRowActive : '',
+                                                unread > 0 ? styles.threadUnread : '',
+                                            ]
+                                                .filter(Boolean)
+                                                .join(' ')}
+                                            aria-current={active ? 'true' : undefined}
+                                            onClick={() => selectThread(thread)}
+                                        >
+                                            {/* The unread/selected marker, in
+                                                its own fixed track — see
+                                                Sms.module.scss `.threadRow`. */}
+                                            <span
+                                                className={styles.threadAccent}
+                                                aria-hidden="true"
+                                            />
+
+                                            <span
+                                                className={styles.avatar}
+                                                aria-hidden="true"
+                                            >
+                                                {initialsFor(name)}
+                                            </span>
+
+                                            <span className={styles.threadBody}>
+                                                <span className={styles.threadTop}>
+                                                    <span className={styles.threadName}>
+                                                        {name}
+                                                    </span>
+                                                    <span className={styles.threadTime}>
+                                                        {relativeTime(
+                                                            thread.last_message?.at ??
+                                                                thread.updated_at
+                                                        )}
+                                                    </span>
+                                                </span>
+                                                <span className={styles.threadPreview}>
+                                                    <span>{previewOf(thread)}</span>
+                                                    {unread > 0 && (
+                                                        <span
+                                                            className={styles.threadCount}
+                                                        >
+                                                            {unread}
+                                                        </span>
+                                                    )}
+                                                </span>
+                                            </span>
+                                        </button>
+                                    </li>
+                                );
+                            })}
+
+                            {threads.length === 0 && !loading && (
+                                <li>
+                                    <div className={styles.tableEmpty}>
+                                        <p>
+                                            {filter === 'archived'
+                                                ? 'Nothing archived.'
+                                                : filter === 'unread'
+                                                  ? 'Nothing unread — you are all caught up.'
+                                                  : search.trim() !== ''
+                                                    ? `No conversations match "${search.trim()}".`
+                                                    : 'No conversations yet.'}
+                                        </p>
+                                    </div>
+                                </li>
+                            )}
+                        </ul>
+
+                        {page < lastPage && (
+                            <div className={styles.listFoot}>
+                                <button
+                                    type="button"
+                                    className={styles.ghostButton}
+                                    onClick={() => fetchThreads(page + 1, { append: true })}
+                                    disabled={loading}
+                                >
+                                    {loading ? (
+                                        <Loader2
+                                            size={14}
+                                            className={styles.spin}
+                                            aria-hidden="true"
+                                        />
+                                    ) : (
+                                        <Inbox size={14} strokeWidth={2} aria-hidden="true" />
+                                    )}
+                                    Load more
+                                </button>
+                            </div>
+                        )}
+                    </section>
+
+                    <SmsThreadPanel
+                        threadId={selectedId}
+                        endpoints={endpoints}
+                        // The page holds the subscription; the pane is fed from
+                        // it. Two subscriptions to one channel is two websocket
+                        // authorisations and two copies of every message.
+                        subscribe={false}
+                        liveEvent={liveEvent}
+                        refreshToken={refreshToken}
+                        status={status}
+                        // Only so a template's {line} has a label to fill with.
+                        lines={lines}
+                        canManage={canManage}
+                        clientUrl={clientUrl}
+                        onThreadChange={onThreadChange}
+                        onMessage={onThreadChange}
+                        onBack={() => {
+                            setShowConversation(false);
+                            syncThreadInUrl(null);
+                        }}
+                        showTransportBanner={false}
+                        className={showConversation ? '' : styles.paneHiddenNarrow}
+                    />
+                </div>
+            )}
+
+            <SmsComposeModal
+                open={composeOpen}
+                onClose={() => setComposeOpen(false)}
+                endpoints={endpoints}
+                lines={lines}
+                status={status}
+                onCreated={(thread) => {
+                    setComposeOpen(false);
+
+                    if (!thread) return;
+
+                    setThreads((prev) => upsertThread(prev, thread));
+                    selectThread(thread);
+                }}
+            />
+        </div>
+    );
+};
+
+const SmsInbox = withVaultNavigation(SmsInboxInner);
+
+export default SmsInbox;