@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/sms/SmsInboxBadge.jsx

@@ -0,0 +1,468 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Loader2, MessageSquare, Unplug, TriangleAlert } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import { notify as desktopNotify } from '../notify/desktopNotifications';
+import styles from '../styles/Sms.module.scss';
+// The HOC is named for the vault because that is where it was written, but
+// nothing in it is vault-specific: it hands a component a `navigate` that
+// works inside a Router and outside one. Imported rather than copied so there
+// is one implementation of that decision in the library.
+import withVaultNavigation from '../vault/vaultNavigation';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import useSmsLive, { defaultChannelFor } from './useSmsLive';
+import {
+    badgeCount,
+    initialsFor,
+    relativeTime,
+    threadDisplayName,
+    upsertThread,
+} from './smsHelpers';
+
+/** The one-line preview under a thread's name. */
+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;
+};
+
+/**
+ * Messages, from the header.
+ *
+ * Mounted as an account action through Navigation's `renderers` slot, so it
+ * sits in the chip row beside the notification bell and the vault and wears
+ * the same trigger. It answers one question — "has anyone texted us?" — and
+ * gives one path onward, into the inbox.
+ *
+ * The two states this was built around are the ones that do not exist yet:
+ * Zoom is not connected, and the dev transport that stands in for it. Both say
+ * so on the face of the popover rather than in a console somewhere, because a
+ * message that is queued and a message that is sent look identical from here
+ * otherwise.
+ */
+const SmsInboxBadgeInner = ({
+    setting,
+    // Accepted so the component matches the shape Navigation's renderers hand
+    // over, even though the popover does not read them.
+    userProfile: _userProfile,
+    setSystemAuth: _setSystemAuth,
+    endpoints,
+    echo = null,
+    channelFor = defaultChannelFor,
+    inboxUrl = '/sms',
+    limit = 8,
+    navigate,
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [open, setOpen] = useState(false);
+    const [status, setStatus] = useState(null);
+    const [lines, setLines] = useState([]);
+    const [threads, setThreads] = useState([]);
+    const [unread, setUnread] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+    const [highlight, setHighlight] = useState(0);
+
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listRef = useRef(null);
+    const mountedRef = useRef(true);
+    // Guards against an early response overwriting a later one.
+    const requestRef = useRef(0);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    /* -------------------------------------------------------------- loading */
+
+    /** Status carries the unread total, so this is also the badge's source. */
+    const loadStatus = useCallback(() => {
+        CustomFetch(
+            routes.status,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current || !result) return;
+
+                setStatus(result);
+
+                if (typeof result.unread_total === 'number') {
+                    setUnread(result.unread_total);
+                }
+            },
+            // Silent: a header chip must not toast at someone because a
+            // background poll failed.
+            () => {}
+        ).catch(() => {});
+    }, [routes]);
+
+    const loadLines = useCallback(() => {
+        CustomFetch(
+            routes.lines,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setLines(Array.isArray(result?.data) ? result.data : []);
+            },
+            () => {}
+        ).catch(() => {});
+    }, [routes]);
+
+    const loadThreads = useCallback(() => {
+        const ticket = requestRef.current + 1;
+
+        requestRef.current = ticket;
+        setLoading(true);
+
+        CustomFetch(
+            routes.threads,
+            'GET',
+            { per_page: limit, page: 1 },
+            (result) => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setThreads(Array.isArray(result?.data) ? result.data : []);
+                setLoading(false);
+                setLoaded(true);
+                setHighlight(0);
+            },
+            () => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setLoading(false);
+                setLoaded(true);
+            }
+        ).catch(() => {
+            if (!mountedRef.current || requestRef.current !== ticket) return;
+
+            setLoading(false);
+            setLoaded(true);
+        });
+    }, [routes, limit]);
+
+    useEffect(() => {
+        loadStatus();
+        loadLines();
+    }, [loadStatus, loadLines]);
+
+    // The list is deliberately not cached between openings: a preview from
+    // twenty minutes ago is worse than a spinner.
+    useEffect(() => {
+        if (!open) return;
+
+        loadThreads();
+    }, [open, loadThreads]);
+
+    /* ----------------------------------------------------------------- live */
+
+    const handleReceived = useCallback(
+        (event) => {
+            if (!mountedRef.current) return;
+
+            if (event?.thread) {
+                setThreads((prev) => upsertThread(prev, event.thread).slice(0, 50));
+            }
+
+            // An inbound message is one more unread, unless the open conversation
+            // just marked it read — which the inbox page, not this popover, owns.
+            setUnread((prev) => prev + 1);
+
+            // ...and a desktop alert, if the user has asked for them and is not
+            // already looking at this tab. Only `sms.received`: an updated
+            // delivery status is not news anybody needs an OS toast for.
+            const thread = event?.thread;
+            const body = event?.message?.body;
+
+            if (!thread) return;
+
+            desktopNotify({
+                title: `New text from ${threadDisplayName(thread)}`,
+                body: String(body || '')
+                    .replace(/\s+/g, ' ')
+                    .trim()
+                    .slice(0, 120),
+                // One toast per conversation: a burst of five replaces itself
+                // rather than burying the desktop.
+                tag: `sms-${thread.id}`,
+                url: `${inboxUrl}?thread=${thread.id}`,
+                navigate,
+            });
+        },
+        [inboxUrl, navigate]
+    );
+
+    const handleUpdated = useCallback((event) => {
+        if (!mountedRef.current || !event?.thread) return;
+
+        setThreads((prev) => upsertThread(prev, event.thread).slice(0, 50));
+    }, []);
+
+    const handleUnread = useCallback((payload) => {
+        if (!mountedRef.current) return;
+
+        if (typeof payload?.total === 'number') setUnread(payload.total);
+    }, []);
+
+    useSmsLive({
+        echo,
+        lines,
+        channelFor,
+        endpoints,
+        onReceived: handleReceived,
+        onUpdated: handleUpdated,
+        onUnread: handleUnread,
+    });
+
+    /* -------------------------------------------------------------- opening */
+
+    const close = useCallback(() => {
+        setOpen(false);
+        setHighlight(0);
+    }, []);
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        const onMouseDown = (event) => {
+            if (wrapperRef.current?.contains(event.target)) return;
+            if (triggerRef.current?.contains(event.target)) return;
+
+            close();
+        };
+
+        document.addEventListener('mousedown', onMouseDown);
+
+        return () => document.removeEventListener('mousedown', onMouseDown);
+    }, [open, close]);
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        // Focus after paint, or the list is not in the document yet. The
+        // popover has no search box, so the list itself takes the keyboard.
+        const handle = setTimeout(() => listRef.current?.focus(), 0);
+
+        return () => clearTimeout(handle);
+    }, [open]);
+
+    const openThread = useCallback(
+        (thread) => {
+            close();
+            navigate(thread ? `${inboxUrl}?thread=${thread.id}` : inboxUrl);
+        },
+        [close, navigate, inboxUrl]
+    );
+
+    const onKeyDown = useCallback(
+        (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                close();
+                triggerRef.current?.focus();
+
+                return;
+            }
+
+            if (threads.length === 0) return;
+
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setHighlight((prev) => (prev + 1) % threads.length);
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setHighlight((prev) => (prev - 1 + threads.length) % threads.length);
+            } else if (event.key === 'Enter') {
+                event.preventDefault();
+                openThread(threads[highlight]);
+            }
+        },
+        [threads, highlight, close, openThread]
+    );
+
+    /* --------------------------------------------------------------- render */
+
+    const label = setting?.label || 'Messages';
+    const count = badgeCount(unread);
+
+    // Two different sentences, because they mean two different things: one is
+    // "this will send later", the other is "this is pretending to send".
+    const note = (() => {
+        if (!status) return null;
+        if (status.connected === false && status.transport === 'null') {
+            return 'Not connected to Zoom yet — messages you send are held';
+        }
+        if (status.transport === 'log') return 'Dev transport — replies are simulated';
+
+        return null;
+    })();
+
+    const renderRow = (thread, index) => {
+        const unreadCount = Number(thread.unread_count) || 0;
+        const name = threadDisplayName(thread);
+        const preview = previewOf(thread);
+        const stamp = thread.last_message?.at ?? thread.updated_at;
+
+        return (
+            <li
+                key={thread.id}
+                className={[
+                    styles.row,
+                    index === highlight ? styles.rowActive : '',
+                    unreadCount > 0 ? styles.rowUnread : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+                role="option"
+                aria-selected={index === highlight}
+                onMouseEnter={() => setHighlight(index)}
+                onClick={() => openThread(thread)}
+                title={`${name} — ${preview}`}
+            >
+                {/* The unread marker, in its own fixed track. It used to be a
+                    border-left, which is layout: unread rows sat three pixels
+                    to the right of read ones and the avatars zig-zagged. */}
+                <span className={styles.rowAccent} aria-hidden="true" />
+
+                <span className={styles.avatar} aria-hidden="true">
+                    {initialsFor(name)}
+                </span>
+
+                <span className={styles.rowMain}>
+                    <strong className={styles.rowName}>{name}</strong>
+                    <span className={styles.rowSep} aria-hidden="true">
+                        ·
+                    </span>
+                    <span className={styles.rowPreview}>{preview}</span>
+                </span>
+
+                <span className={styles.rowTime}>
+                    {unreadCount > 0 && (
+                        <span
+                            className={styles.unreadDot}
+                            aria-label={`${unreadCount} unread`}
+                        />
+                    )}
+                    {relativeTime(stamp)}
+                </span>
+            </li>
+        );
+    };
+
+    return (
+        <div className={styles.quickSms}>
+            <button
+                ref={triggerRef}
+                type="button"
+                className={styles.trigger}
+                onClick={() => (open ? close() : setOpen(true))}
+                data-tooltip-id="system-tooltip"
+                data-tooltip-place="bottom"
+                data-tooltip-content={label}
+                aria-label={unread > 0 ? `${label} (${unread} unread)` : label}
+                aria-expanded={open}
+                aria-haspopup="dialog"
+            >
+                <MessageSquare size={20} strokeWidth={2} />
+                {count !== '' && (
+                    <span className={styles.badge} aria-hidden="true">
+                        {count}
+                    </span>
+                )}
+            </button>
+
+            {open && (
+                <div
+                    className={styles.popoverWrapper}
+                    ref={wrapperRef}
+                    /* Tells the navigation's action pill to stop clipping while
+                       this is open. See Navigation.module.scss `.hactions > ul`,
+                       and Notification and the vault, which do the same. */
+                    data-nav-overlay="open"
+                    role="dialog"
+                    aria-label={label}
+                >
+                    <div className={styles.popover}>
+                        <div className={styles.popoverHead}>
+                            <span className={styles.popoverTitle}>
+                                <MessageSquare size={15} strokeWidth={2.2} aria-hidden="true" />
+                                {label}
+                            </span>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={() => openThread(null)}
+                            >
+                                Open messages
+                            </button>
+                        </div>
+
+                        {threads.length > 0 && (
+                            <ul
+                                className={styles.rows}
+                                ref={listRef}
+                                role="listbox"
+                                aria-label="Recent conversations"
+                                tabIndex={-1}
+                                onKeyDown={onKeyDown}
+                            >
+                                {threads.map(renderRow)}
+                            </ul>
+                        )}
+
+                        {threads.length === 0 && (
+                            <div className={styles.empty}>
+                                {loading || !loaded ? (
+                                    <p>
+                                        <Loader2
+                                            size={16}
+                                            className={styles.spin}
+                                            aria-label="Loading conversations"
+                                        />
+                                    </p>
+                                ) : (
+                                    <p>
+                                        {status && status.lines_count === 0
+                                            ? 'No messaging lines are set up yet.'
+                                            : 'No conversations yet.'}
+                                    </p>
+                                )}
+                            </div>
+                        )}
+
+                        {note && (
+                            <p className={styles.statusNote}>
+                                {status?.transport === 'log' ? (
+                                    <TriangleAlert size={14} strokeWidth={2} aria-hidden="true" />
+                                ) : (
+                                    <Unplug size={14} strokeWidth={2} aria-hidden="true" />
+                                )}
+                                {note}
+                            </p>
+                        )}
+
+                        <div className={styles.footer}>
+                            <span className={styles.footerHint}>
+                                ↑↓ move · ⏎ open · Esc close
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const SmsInboxBadge = withVaultNavigation(SmsInboxBadgeInner);
+
+export default SmsInboxBadge;