@visns-studio/visns-components 6.20.1 → 6.23.0

package/src/components/sms/SmsThreadPanel.jsx

@@ -10,6 +10,7 @@ import {
     Archive,
     ArchiveRestore,
     ArrowLeft,
+    CheckSquare,
     ChevronUp,
     ExternalLink,
     FileText,
@@ -30,6 +31,7 @@ import useSmsLive, { defaultChannelFor } from './useSmsLive';
 import useDebouncedValue from '../vault/useDebouncedValue';
 import {
     MAX_SEGMENTS,
+    annotationsForMessage,
     clockTime,
     composerPlaceholder,
     counterLabel,
@@ -42,6 +44,7 @@ import {
     nextPlaceholder,
     normaliseNumberForDisplay,
     prependMessages,
+    resolveAnnotations,
     segmentCount,
     statusLabel,
     threadDisplayName,
@@ -83,6 +86,13 @@ let temporaryId = 0;
  * subscription, in which case the parent passes `subscribe={false}` and feeds
  * it events. Two subscriptions to one channel is not an error, but it is two
  * websocket authorisations and two copies of every message to reconcile.
+ *
+ * `messageSelection` and `messageAnnotations` are the two hooks a host has into
+ * the timeline. Both are opt-in and both are deliberately nameless about what
+ * the host does with them: this module knows about messages, and an application
+ * that wants to file them against something of its own (a task, a complaint, a
+ * file note) supplies the verb and the badges. Absent, the panel behaves
+ * exactly as it did before they existed.
  */
 const SmsThreadPanel = ({
     threadId,
@@ -107,6 +117,23 @@ const SmsThreadPanel = ({
     lines = null,
     canManage = false,
     clientUrl = (id) => `/clients/${id}`,
+    // `{label, onSelect}` — turns on a Select mode over the timeline. `label` is
+    // the verb printed on the confirm button ("Attach to task…"), `onSelect` is
+    // called as `onSelect(messages, thread)` and may return a promise; the mode
+    // closes when it settles.
+    //
+    // The thread is the SECOND argument, so a host that already knows which
+    // conversation it mounted (a client's own page) can ignore it. A host that
+    // does not — an inbox, where the pane chooses the thread — has no other way
+    // to know which one is open or which client it is linked to.
+    messageSelection = null,
+    // `{[messageId]: [{id, label, onClick}]}` — small chips under the matching
+    // bubble. The host owns what they say and what a click does.
+    //
+    // May also be a function `(thread) => map`, for the same reason: chips in an
+    // inbox depend on which conversation is open, and no host can hold one map
+    // for every thread in the practice.
+    messageAnnotations = null,
     onThreadChange,
     onMessage,
     onBack = null,
@@ -130,6 +157,10 @@ const SmsThreadPanel = ({
     const [linkOpen, setLinkOpen] = useState(false);
     const [simulateOpen, setSimulateOpen] = useState(false);
 
+    const [selecting, setSelecting] = useState(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [confirmingSelection, setConfirmingSelection] = useState(false);
+
     const mountedRef = useRef(true);
     const timelineRef = useRef(null);
     const composerRef = useRef(null);
@@ -445,6 +476,97 @@ const SmsThreadPanel = ({
         [enterSends, submit]
     );
 
+    /* ------------------------------------------------------------ selection */
+
+    const selectionEnabled =
+        Boolean(messageSelection) && typeof messageSelection.onSelect === 'function';
+
+    // Moving to another conversation abandons whatever was ticked in the last
+    // one: the selection is a list of ids from a timeline that is no longer on
+    // screen, and carrying it across would file one client's messages from
+    // another client's page.
+    useEffect(() => {
+        setSelecting(false);
+        setSelectedIds([]);
+    }, [threadId]);
+
+    // Withdrawing the prop has to close the mode with it, or a host that turns
+    // selection off mid-render leaves the bar stranded with no way out.
+    useEffect(() => {
+        if (!selectionEnabled) {
+            setSelecting(false);
+            setSelectedIds([]);
+        }
+    }, [selectionEnabled]);
+
+    const isSelected = useCallback(
+        (id) => selectedIds.some((one) => String(one) === String(id)),
+        [selectedIds]
+    );
+
+    const toggleSelected = useCallback((id) => {
+        setSelectedIds((prev) =>
+            prev.some((one) => String(one) === String(id))
+                ? prev.filter((one) => String(one) !== String(id))
+                : [...prev, id]
+        );
+    }, []);
+
+    const cancelSelection = useCallback(() => {
+        setSelecting(false);
+        setSelectedIds([]);
+    }, []);
+
+    const confirmSelection = useCallback(() => {
+        if (!selectionEnabled || selectedIds.length === 0 || confirmingSelection) return;
+
+        // The host is handed the message objects, not the ids: it should not
+        // have to hold a second copy of the timeline to know what it was given.
+        // Timeline order, not tick order — a conversation extract only reads
+        // correctly in the order it happened.
+        const chosen = messages.filter((one) => isSelected(one.id));
+
+        setConfirmingSelection(true);
+
+        Promise.resolve(messageSelection.onSelect(chosen, thread))
+            .then(() => {
+                if (!mountedRef.current) return;
+
+                setSelecting(false);
+                setSelectedIds([]);
+            })
+            .catch(() => {
+                // A failed hand-off leaves the ticks where they are so the user
+                // can try again; the host is the one that says what went wrong.
+            })
+            .then(() => {
+                if (mountedRef.current) setConfirmingSelection(false);
+            });
+    }, [
+        selectionEnabled,
+        selectedIds,
+        confirmingSelection,
+        messages,
+        isSelected,
+        messageSelection,
+        thread,
+    ]);
+
+    /**
+     * The chip map for the conversation on screen. A function form is called
+     * with the whole thread rather than its id, because what a host looks chips
+     * up by is usually the client on it.
+     */
+    const annotations = useMemo(
+        () => resolveAnnotations(messageAnnotations, thread),
+        [messageAnnotations, thread]
+    );
+
+    const annotationsFor = useCallback(
+        (id) => annotationsForMessage(annotations, id),
+        [annotations]
+    );
+
     /* -------------------------------------------------------------- actions */
 
     const patchThread = useCallback(
@@ -589,6 +711,44 @@ const SmsThreadPanel = ({
         const attachments = Array.isArray(message.attachments) ? message.attachments : [];
         // A failure is never silent, whatever else the run is doing.
         const showMeta = lastOfRun || failed || heldMessage;
+        const chips = annotationsFor(message.id);
+        // A message still on its way to the server has a temporary id, so there
+        // is nothing a host could file it against yet.
+        const tickable = selecting && !message.pending;
+        const ticked = tickable && isSelected(message.id);
+
+        const bubble = (
+            <div
+                className={[
+                    styles.bubble,
+                    outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
+                    heldMessage ? styles.bubbleHeld : '',
+                    failed ? styles.bubbleFailed : '',
+                    message.pending ? styles.bubblePending : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+            >
+                {message.body}
+
+                {attachments.length > 0 && (
+                    <div className={styles.attachments}>
+                        {attachments.map((file) => (
+                            <a
+                                key={file.id}
+                                className={styles.attachment}
+                                href={file.download_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <FileText size={12} strokeWidth={2} aria-hidden="true" />
+                                <span>{file.name}</span>
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
 
         return (
             <div
@@ -601,36 +761,52 @@ const SmsThreadPanel = ({
                     .filter(Boolean)
                     .join(' ')}
             >
-                <div
-                    className={[
-                        styles.bubble,
-                        outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
-                        heldMessage ? styles.bubbleHeld : '',
-                        failed ? styles.bubbleFailed : '',
-                        message.pending ? styles.bubblePending : '',
-                    ]
-                        .filter(Boolean)
-                        .join(' ')}
-                >
-                    {message.body}
-
-                    {attachments.length > 0 && (
-                        <div className={styles.attachments}>
-                            {attachments.map((file) => (
-                                <a
-                                    key={file.id}
-                                    className={styles.attachment}
-                                    href={file.download_url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
+                {selecting ? (
+                    // The whole row is the hit target while selecting: ticking
+                    // a message by aiming at a 14px box is not how anybody
+                    // picks three texts out of a conversation.
+                    <label
+                        className={[
+                            styles.pickRow,
+                            ticked ? styles.pickRowOn : '',
+                            message.pending ? styles.pickRowOff : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
+                        <input
+                            type="checkbox"
+                            className={styles.pickBox}
+                            checked={ticked}
+                            disabled={!tickable}
+                            onChange={() => toggleSelected(message.id)}
+                        />
+                        {bubble}
+                    </label>
+                ) : (
+                    bubble
+                )}
+
+                {chips.length > 0 && (
+                    <div className={styles.annotations}>
+                        {chips.map((annotation) =>
+                            typeof annotation.onClick === 'function' ? (
+                                <button
+                                    key={annotation.id}
+                                    type="button"
+                                    className={`${styles.annotation} ${styles.annotationAction}`}
+                                    onClick={() => annotation.onClick(annotation)}
                                 >
-                                    <FileText size={12} strokeWidth={2} aria-hidden="true" />
-                                    <span>{file.name}</span>
-                                </a>
-                            ))}
-                        </div>
-                    )}
-                </div>
+                                    {annotation.label}
+                                </button>
+                            ) : (
+                                <span key={annotation.id} className={styles.annotation}>
+                                    {annotation.label}
+                                </span>
+                            )
+                        )}
+                    </div>
+                )}
 
                 {showMeta && (
                     <div
@@ -703,6 +879,22 @@ const SmsThreadPanel = ({
                         </a>
                     ) : null}
 
+                    {selectionEnabled && (
+                        <button
+                            type="button"
+                            className={`${styles.ghostButton} ${
+                                selecting ? styles.ghostButtonOn : ''
+                            }`.trim()}
+                            aria-pressed={selecting}
+                            onClick={() =>
+                                selecting ? cancelSelection() : setSelecting(true)
+                            }
+                        >
+                            <CheckSquare size={14} strokeWidth={2} aria-hidden="true" />
+                            {selecting ? 'Done' : 'Select'}
+                        </button>
+                    )}
+
                     <button
                         type="button"
                         className={styles.ghostButton}
@@ -797,6 +989,42 @@ const SmsThreadPanel = ({
                 ))}
             </div>
 
+            {/*
+              * While selecting, the action bar stands where the composer does.
+              * Both at once would be a pane with two footers and two primary
+              * buttons, and picking messages out of a conversation is not
+              * something anybody does halfway through writing a reply.
+              */}
+            {selecting ? (
+                <div className={styles.selectBar}>
+                    <span className={styles.selectCount}>
+                        {selectedIds.length === 0
+                            ? 'Pick the messages you want'
+                            : `${selectedIds.length} selected`}
+                    </span>
+
+                    <div className={styles.selectActions}>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={cancelSelection}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            className={styles.primaryButton}
+                            onClick={confirmSelection}
+                            disabled={selectedIds.length === 0 || confirmingSelection}
+                        >
+                            {confirmingSelection && (
+                                <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                            )}
+                            {messageSelection.label || 'Select'} ({selectedIds.length})
+                        </button>
+                    </div>
+                </div>
+            ) : (
             <div className={styles.composer}>
                 <div className={styles.composerBox}>
                     <textarea
@@ -905,6 +1133,7 @@ const SmsThreadPanel = ({
                     </div>
                 </div>
             </div>
+            )}
 
             <LinkClientModal
                 open={linkOpen}

package/src/components/sms/smsHelpers.js

@@ -157,6 +157,61 @@ export const toE164 = (value, countryCode = '61') => {
     return null;
 };
 
+/* ------------------------------------------------------- dialling a number */
+
+/**
+ * A number as a person would write it, or '' when there is nothing to show.
+ *
+ * A thin wrapper on `normaliseNumberForDisplay`, and the reason it exists is the
+ * empty case: the formatter returns whatever it was given when it cannot parse
+ * it, including `undefined`, and a display slot wants a string it can render.
+ *
+ * Use THIS rather than the data grid's `renderPhoneColumn` for anything that is
+ * not a grid cell. The grid's formatter collapses `+61` through the guard
+ * `/^61[2-9]\d{8}$/`, which excludes `4` and therefore silently fails to format
+ * the one case a contact screen cares about most — a stored `+61412345678`
+ * mobile falls through to its generic branch and renders unformatted.
+ */
+export const displayNumber = (value) => normaliseNumberForDisplay(value) || '';
+
+/**
+ * The `href` for a phone number, or null when it is not dialable.
+ *
+ * `tel:` wants an unambiguous number, not a pretty one: a tablet handing
+ * `(08) 9375 2549` to a dialler is handing it a string with brackets in it. So
+ * E.164 is preferred, and `toE164` produces it.
+ *
+ * THE 13 / 1300 / 1800 CAVEAT. `toE164` answers null for the Australian service
+ * prefixes, because they genuinely have no country-code form. They are still
+ * perfectly dialable, so rather than drop the link they fall back to the bare
+ * digits, which is what a handset expects for them.
+ *
+ * Anything with no digits at all — "ask reception", and it IS in this column in
+ * real data — gets no link, because an anchor that dials nothing is worse than
+ * plain text.
+ */
+export const telHref = (value) => {
+    const e164 = toE164(value);
+
+    if (e164) return `tel:${e164}`;
+
+    const digits = String(value ?? '').replace(/[^\d]/g, '');
+
+    return /^1[38]00\d{6}$|^13\d{4}$/.test(digits) ? `tel:${digits}` : null;
+};
+
+/**
+ * As above, for the text action on a mobile.
+ *
+ * No service-prefix fallback here, deliberately: 13/1300/1800 numbers cannot
+ * receive an SMS at all, so a link to one is a promise that would be broken.
+ */
+export const smsHref = (value) => {
+    const e164 = toE164(value);
+
+    return e164 ? `sms:${e164}` : null;
+};
+
 /* ----------------------------------------------------------------- segments */
 
 /**
@@ -1147,7 +1202,43 @@ export const describeRecipient = (input) => {
     };
 };
 
+/* -------------------------------------------------------------------------- *
+ * Host annotations
+ *
+ * A host may hand the conversation pane chips to draw under particular
+ * messages. Two shapes, because two kinds of host need it:
+ *
+ *   - a MAP, `{[messageId]: [chip]}`, for a screen that already knows which
+ *     conversation it mounted — a client's own page;
+ *   - a FUNCTION of the open thread, for a screen that does not — an inbox,
+ *     where the pane chooses the thread and no host could hold one map for
+ *     every conversation in the practice.
+ *
+ * Both live here rather than inside the component so the shape has a test.
+ * -------------------------------------------------------------------------- */
+
+/** The chip map for one conversation, whichever shape the host passed. */
+export const resolveAnnotations = (annotations, thread) => {
+    const resolved =
+        typeof annotations === 'function' ? annotations(thread) : annotations;
+
+    return resolved && typeof resolved === 'object' ? resolved : null;
+};
+
+/**
+ * The chips for one message. Looked up by the id as given AND as a string: a
+ * map parsed out of JSON has string keys, and the timeline's ids are numbers.
+ */
+export const annotationsForMessage = (annotations, id) => {
+    if (!annotations) return [];
+
+    const found = annotations[id] ?? annotations[String(id)];
+
+    return Array.isArray(found) ? found : [];
+};
+
 export default {
+    annotationsForMessage,
     badgeCount,
     clientRecipient,
     clockTime,
@@ -1159,6 +1250,7 @@ export default {
     dayLabel,
     describeRecipient,
     describeTransport,
+    displayNumber,
     fillTemplate,
     groupMessagesByDay,
     initialsFor,
@@ -1173,10 +1265,13 @@ export default {
     prependMessages,
     RECIPIENT_HINTS,
     relativeTime,
+    resolveAnnotations,
     segmentCount,
+    smsHref,
     splitPersonName,
     statusLabel,
     sumUnread,
+    telHref,
     threadDisplayName,
     threadIdFromSearch,
     threadSubtitle,

package/src/components/styles/AnchoredMenu.module.scss

@@ -0,0 +1,43 @@
+@use 'surface' as *;
+
+/**
+ * AnchoredMenu — the row menu, portalled out of everything that would clip it.
+ *
+ * It renders into `document.body`, which means it is OUTSIDE the page's own
+ * token block: a `--vs-line` declared on `.page` does not inherit to a sibling
+ * of `<div id="app">`. So this is the one module in the set that reads the app's
+ * tokens directly and offers no page-level override — a menu is neutral chrome
+ * anyway, and a per-page menu skin was never a thing anybody wanted.
+ *
+ * `z-index` sits above a page's own furniture and below the modal layer (1051+
+ * in this library's stack), because a menu must not float over the sheet a
+ * click on it opens.
+ */
+
+.scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 900;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    cursor: default;
+}
+
+.menu {
+    @include surface-tokens;
+
+    position: fixed;
+    z-index: 901;
+    display: flex;
+    flex-direction: column;
+    min-width: 11rem;
+    max-width: min(20rem, calc(100vw - 1rem));
+    padding: 4px;
+    background: var(--pr-surface);
+    border: 1px solid var(--pr-line);
+    border-radius: var(--btn-br, 5px);
+    box-shadow:
+        0 1px 2px rgb(0 0 0 / 8%),
+        0 8px 24px -12px rgb(0 0 0 / 35%);
+}