@visns-studio/visns-components 6.16.6 → 6.17.0

package/src/components/sms/SmsComposeModal.jsx

@@ -63,6 +63,14 @@ const SmsComposeModal = ({
     lines = [],
     status = null,
     templates: templatesProp = null,
+    // Who this message is already for. A client page opening the composer
+    // knows the answer — `{number, id?, name?}` — and making somebody search
+    // for the client whose page they are standing on is the kind of small
+    // insult that stops a feature being used. With an `id` the recipient is
+    // set the way picking one out of the typeahead sets it, so the modal opens
+    // with the cursor's next stop being the message itself.
+    initialRecipient = null,
+    initialBody = '',
     onCreated,
 }) => {
     const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
@@ -81,6 +89,16 @@ const SmsComposeModal = ({
     const mountedRef = useRef(true);
     const debouncedTo = useDebouncedValue(to, 250);
 
+    // Read through refs so that a consumer writing `initialRecipient={{...}}`
+    // inline — which is how every consumer will write it — does not re-seed
+    // the form on every render of the page behind the modal. The seed is
+    // applied once, when the modal opens.
+    const seedRef = useRef(initialRecipient);
+    seedRef.current = initialRecipient;
+
+    const seedBodyRef = useRef(initialBody);
+    seedBodyRef.current = initialBody;
+
     useEffect(
         () => () => {
             mountedRef.current = false;
@@ -94,11 +112,27 @@ const SmsComposeModal = ({
         if (!open) return;
 
         setLineId(lines.length > 0 ? String(lines[0].id) : '');
-        setTo('');
-        setPicked(null);
-        setBody('');
         setResults([]);
         setError('');
+
+        // The seed goes on AFTER the reset, not instead of it: the reset is
+        // what makes a second open of the modal a clean one, and a seed
+        // applied first would be wiped by it.
+        const seed = seedRef.current;
+        const number = String(seed?.number ?? '').trim();
+
+        if (number !== '' && seed?.id !== undefined && seed?.id !== null) {
+            // Exactly the shape the typeahead produces, so a seeded recipient
+            // and a picked one are the same thing from here on — including the
+            // number being taken as given rather than re-judged.
+            setPicked({ id: seed.id, name: seed.name || number, number });
+            setTo('');
+        } else {
+            setPicked(null);
+            setTo(number);
+        }
+
+        setBody(String(seedBodyRef.current ?? ''));
     }, [open, lines]);
 
     const typedNumber = looksLikeNumber(to);

package/src/components/sms/SmsInbox.jsx

@@ -17,6 +17,7 @@ import SmsComposeModal from './SmsComposeModal';
 import SmsThreadPanel from './SmsThreadPanel';
 import { resolveSmsEndpoints } from './smsEndpoints';
 import useSmsLive, { defaultChannelFor } from './useSmsLive';
+import useSmsThreads from './useSmsThreads';
 import {
     describeTransport,
     initialsFor,
@@ -25,7 +26,6 @@ import {
     relativeTime,
     threadDisplayName,
     threadIdFromSearch,
-    upsertThread,
 } from './smsHelpers';
 
 const PER_PAGE = 25;
@@ -119,11 +119,6 @@ const SmsInboxInner = ({
     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))
@@ -134,11 +129,36 @@ const SmsInboxInner = ({
     const [refreshToken, setRefreshToken] = useState(0);
 
     const mountedRef = useRef(true);
-    const requestRef = useRef(0);
     const seqRef = useRef(0);
 
     const debouncedSearch = useDebouncedValue(search, 300);
 
+    // What this page adds to the shared list hook: which filters go with it.
+    // `null` means "not filtered" — the hook drops those before they reach the
+    // query string.
+    const threadParams = useMemo(
+        () => ({
+            line_id: lineId === 'all' ? null : lineId,
+            search: debouncedSearch,
+            unread_only: filter === 'unread' ? 1 : null,
+            archived: filter === 'archived' ? 1 : null,
+        }),
+        [lineId, debouncedSearch, filter]
+    );
+
+    // The list itself — paging, the request ticket, the live upsert — lives in
+    // useSmsThreads, which the client-page card shares.
+    const {
+        threads,
+        loading,
+        hasMore,
+        reload,
+        loadMore,
+        applyThread,
+        upsert,
+        clearUnread,
+    } = useSmsThreads({ endpoints, params: threadParams, perPage: PER_PAGE });
+
     useEffect(
         () => () => {
             mountedRef.current = false;
@@ -177,64 +197,16 @@ const SmsInboxInner = ({
         });
     }, [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));
-        }
+        if (event?.thread) upsert(event.thread);
 
         seqRef.current += 1;
         setLiveEvent({ seq: seqRef.current, payload: event });
-    }, []);
+    }, [upsert]);
 
     const handleUnread = useCallback((payload) => {
         if (!mountedRef.current) return;
@@ -253,9 +225,9 @@ const SmsInboxInner = ({
         // 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);
+            reload();
             setRefreshToken((prev) => prev + 1);
-        }, [fetchThreads]),
+        }, [reload]),
     });
 
     /* ------------------------------------------------------------ selection */
@@ -269,26 +241,17 @@ const SmsInboxInner = ({
 
         // 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
-                )
-            );
-        }
-    }, []);
+        clearUnread(id);
+    }, [clearUnread]);
 
-    const onThreadChange = useCallback((thread) => {
-        if (!mountedRef.current || !thread) return;
+    const onThreadChange = useCallback(
+        (thread) => {
+            if (!mountedRef.current) 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)
-        );
-    }, []);
+            applyThread(thread);
+        },
+        [applyThread]
+    );
 
     /* --------------------------------------------------------------- render */
 
@@ -523,12 +486,12 @@ const SmsInboxInner = ({
                             )}
                         </ul>
 
-                        {page < lastPage && (
+                        {hasMore && (
                             <div className={styles.listFoot}>
                                 <button
                                     type="button"
                                     className={styles.ghostButton}
-                                    onClick={() => fetchThreads(page + 1, { append: true })}
+                                    onClick={loadMore}
                                     disabled={loading}
                                 >
                                     {loading ? (
@@ -583,7 +546,7 @@ const SmsInboxInner = ({
 
                     if (!thread) return;
 
-                    setThreads((prev) => upsertThread(prev, thread));
+                    upsert(thread);
                     selectThread(thread);
                 }}
             />

package/src/components/sms/smsHelpers.js

@@ -728,6 +728,113 @@ export const upsertMessage = (messages, message) => {
     return next;
 };
 
+/**
+ * A client's conversations, newest first.
+ *
+ * The list endpoint already orders by `last_message_at` desc, so this is not
+ * about the first render - it is about what happens after one. A live event
+ * lands through `upsertThread`, which puts the thread it carries on top
+ * whatever its timestamp says, and an optimistic row added by the composer has
+ * no timestamp at all. On the inbox that is exactly right: the thing that just
+ * moved is the thing you want to see. On a client card showing two or three
+ * conversations, the rail flipping order because a delivery receipt arrived on
+ * the older one reads as a bug.
+ *
+ * A thread with no timestamp at all sorts to the top rather than the bottom:
+ * it is one that has just been created, and the person who created it is
+ * looking straight at it.
+ */
+export const orderThreadsByRecency = (threads) => {
+    const list = Array.isArray(threads) ? threads.filter(Boolean) : [];
+
+    const stampOf = (thread) => {
+        const date = parseDate(thread?.last_message?.at ?? thread?.updated_at ?? null);
+
+        return date === null ? null : date.getTime();
+    };
+
+    return list
+        .map((thread, index) => ({ thread, index, at: stampOf(thread) }))
+        .sort((a, b) => {
+            if (a.at === b.at) return a.index - b.index;
+            // Brand new, no message yet: top of the list.
+            if (a.at === null) return -1;
+            if (b.at === null) return 1;
+
+            return b.at - a.at;
+        })
+        .map((one) => one.thread);
+};
+
+/**
+ * Which conversation a client card should open on.
+ *
+ * `preferredId` wins whenever it is still in the list - it is the thread the
+ * user picked, or the one a `?thread=` deep link named, and a refresh must not
+ * move them somewhere else. Otherwise: anything unread first (that is the
+ * reason to be on this tab), then the most recent.
+ *
+ * Returns null for an empty list, which is the card's empty state rather than
+ * an error - most clients have never been texted.
+ */
+export const pickInitialThread = (threads, preferredId = null) => {
+    const ordered = orderThreadsByRecency(threads);
+
+    if (ordered.length === 0) return null;
+
+    if (preferredId !== null && preferredId !== undefined && preferredId !== '') {
+        const preferred = ordered.find((one) => sameId(one.id, preferredId));
+
+        if (preferred) return preferred;
+    }
+
+    return ordered.find((one) => (Number(one.unread_count) || 0) > 0) ?? ordered[0];
+};
+
+/**
+ * The recipient a client card hands the compose modal.
+ *
+ * The CRM knows the client's mobiles; the composer would otherwise make
+ * somebody search for a client whose page they are already standing on. The
+ * first entry with a usable number wins - the host passes them in the order it
+ * wants them offered.
+ *
+ * Returns null when there is nothing to text, which is what turns the New
+ * message button off rather than opening a modal with an empty To field.
+ */
+export const clientRecipient = ({ id = null, name = '', numbers = [] } = {}) => {
+    const list = Array.isArray(numbers) ? numbers : [];
+
+    const usable = list.find((one) => {
+        const number = typeof one === 'string' ? one : one?.number;
+
+        return String(number ?? '').trim() !== '';
+    });
+
+    if (!usable) return null;
+
+    const number = String(
+        (typeof usable === 'string' ? usable : usable.number) ?? ''
+    ).trim();
+
+    return {
+        number,
+        // Without an id the modal falls back to a typed number, which is the
+        // right behaviour for a host that knows a mobile but not a client id.
+        id: id ?? null,
+        name: String(name ?? '').trim() || normaliseNumberForDisplay(number),
+    };
+};
+
+/** "No conversations" / "1 conversation" / "4 conversations". */
+export const conversationCountLabel = (count) => {
+    const total = Number(count) || 0;
+
+    if (total <= 0) return 'No conversations';
+
+    return total === 1 ? '1 conversation' : `${total} conversations`;
+};
+
 /** Prepend a page of older messages, dropping any this timeline already has. */
 export const prependMessages = (messages, older) => {
     const list = Array.isArray(messages) ? messages : [];
@@ -1042,8 +1149,10 @@ export const describeRecipient = (input) => {
 
 export default {
     badgeCount,
+    clientRecipient,
     clockTime,
     composerPlaceholder,
+    conversationCountLabel,
     counterLabel,
     lineOptionLabel,
     markRuns,
@@ -1058,7 +1167,9 @@ export default {
     messageTimestamp,
     nextPlaceholder,
     normaliseNumberForDisplay,
+    orderThreadsByRecency,
     parseDate,
+    pickInitialThread,
     prependMessages,
     RECIPIENT_HINTS,
     relativeTime,

package/src/components/sms/useSmsThreads.js

@@ -0,0 +1,211 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import CustomFetch from '../Fetch';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import { upsertThread } from './smsHelpers';
+
+export const DEFAULT_PER_PAGE = 25;
+
+/**
+ * Drop the keys the server should not see.
+ *
+ * A filter that is off must be absent rather than empty: `search=` and
+ * `line_id=` both mean "no filter" to this hook and neither should reach the
+ * query string, where an empty `client_id` in particular would be cast to 0 and
+ * match nothing.
+ */
+const cleanParams = (params) => {
+    const out = {};
+
+    Object.entries(params || {}).forEach(([key, value]) => {
+        if (value === null || value === undefined) return;
+
+        const trimmed = typeof value === 'string' ? value.trim() : value;
+
+        if (trimmed === '') return;
+
+        out[key] = trimmed;
+    });
+
+    return out;
+};
+
+/**
+ * A page of conversations, and the four things every surface does to one.
+ *
+ * Pulled out of SmsInbox when the client page grew its own conversation list:
+ * the two differ only in which filters they send — the inbox sends a line, a
+ * search and a chip; a client card sends `client_id` — and everything after
+ * the request is identical. Paging, the request ticket that stops a slow reply
+ * overwriting a fast one, the live upsert that moves a thread to the top, and
+ * the optimistic unread clear were all worth having once rather than twice.
+ *
+ * `params` may be a fresh object every render; the hook watches its CONTENTS,
+ * so an inline `{client_id: id}` does not refetch on every keystroke elsewhere
+ * on the page.
+ *
+ * @param {object}  options
+ * @param {object}  [options.endpoints]  Partial endpoints override.
+ * @param {object}  [options.params]     Query filters: `line_id`, `client_id`,
+ *                                       `search`, `unread_only`, `archived`.
+ * @param {number}  [options.perPage]    Rows per request; default 25.
+ * @param {boolean} [options.enabled]    False fetches nothing and keeps the
+ *                                       list it already has.
+ *
+ * @returns {{
+ *   threads: Array, setThreads: Function, page: number, lastPage: number,
+ *   loading: boolean, hasMore: boolean, loaded: boolean,
+ *   reload: Function, loadMore: Function, applyThread: Function,
+ *   upsert: Function, clearUnread: Function
+ * }}
+ */
+const useSmsThreads = ({
+    endpoints,
+    params = null,
+    perPage = DEFAULT_PER_PAGE,
+    enabled = true,
+} = {}) => {
+    // The URL as a string, not the resolved object: a consumer writing
+    // `endpoints={{...}}` inline hands us a new object every render, and an
+    // effect keyed on that identity would refetch forever.
+    const threadsUrl = resolveSmsEndpoints(endpoints).threads;
+
+    const [threads, setThreads] = useState([]);
+    const [page, setPage] = useState(1);
+    const [lastPage, setLastPage] = useState(1);
+    const [loading, setLoading] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+
+    const mountedRef = useRef(true);
+    // Every request takes a ticket; only the newest one is allowed to write.
+    // Without it, a slow "all lines" reply landing after a fast filtered one
+    // puts the wrong list on screen and nothing on the page looks wrong.
+    const requestRef = useRef(0);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    // The filters as one stable string, so the effect below re-runs when they
+    // actually change rather than when the caller rebuilt the object.
+    const paramsKey = JSON.stringify(
+        Object.entries(cleanParams(params)).sort(([a], [b]) => (a < b ? -1 : 1))
+    );
+
+    const fetchPage = useCallback(
+        (targetPage = 1, { append = false } = {}) => {
+            if (!enabled) return;
+
+            const ticket = requestRef.current + 1;
+
+            requestRef.current = ticket;
+            setLoading(true);
+
+            const query = {
+                ...Object.fromEntries(JSON.parse(paramsKey)),
+                page: targetPage,
+                per_page: perPage,
+            };
+
+            const settle = () => {
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setLoading(false);
+                setLoaded(true);
+            };
+
+            CustomFetch(
+                threadsUrl,
+                'GET',
+                query,
+                (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);
+                    settle();
+                },
+                settle
+            ).catch(settle);
+        },
+        [threadsUrl, paramsKey, perPage, enabled]
+    );
+
+    useEffect(() => {
+        fetchPage(1);
+    }, [fetchPage]);
+
+    const reload = useCallback(() => fetchPage(1), [fetchPage]);
+
+    const loadMore = useCallback(() => {
+        if (loading || page >= lastPage) return;
+
+        fetchPage(page + 1, { append: true });
+    }, [fetchPage, loading, page, lastPage]);
+
+    /** A live event: the conversation that moved goes to the top. */
+    const upsert = useCallback((thread) => {
+        if (!thread) return;
+
+        setThreads((prev) => upsertThread(prev, thread));
+    }, []);
+
+    /**
+     * A thread we already know about has changed — merge it where it stands.
+     *
+     * Distinct from `upsert` on purpose: an open conversation writes back its
+     * own row constantly (read marks, a link, an archive), and reordering the
+     * list under the person reading it is not what any of those mean.
+     */
+    const applyThread = useCallback((thread) => {
+        if (!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)
+        );
+    }, []);
+
+    /**
+     * Zero a row's badge without waiting for the server.
+     *
+     * The GET that opens a conversation is what marks it read, and it is
+     * already in flight — leaving the badge lit until it answers makes the
+     * click look like it missed.
+     */
+    const clearUnread = useCallback((threadId) => {
+        if (!threadId) return;
+
+        setThreads((prev) =>
+            prev.map((one) =>
+                String(one.id) === String(threadId) ? { ...one, unread_count: 0 } : one
+            )
+        );
+    }, []);
+
+    return {
+        threads,
+        setThreads,
+        page,
+        lastPage,
+        loading,
+        loaded,
+        hasMore: page < lastPage,
+        reload,
+        loadMore,
+        applyThread,
+        upsert,
+        clearUnread,
+    };
+};
+
+export default useSmsThreads;