@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/sms/SmsComposeModal.jsx

@@ -0,0 +1,495 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FileText, Loader2, PenSquare, Send, X } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import styles from '../styles/Sms.module.scss';
+import useDebouncedValue from '../vault/useDebouncedValue';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import {
+    MAX_SEGMENTS,
+    describeRecipient,
+    describeTransport,
+    initialsFor,
+    lineNumberForDisplay,
+    looksLikeNumber,
+    normaliseNumberForDisplay,
+    segmentCount,
+} from './smsHelpers';
+
+/** The hint and the server's complaint both hang off the To field by id. */
+const TO_HINT_ID = 'sms-compose-to-hint';
+
+/**
+ * The modal shell is a generic component sized for forms, and it clips its own
+ * content so a long one can scroll. The templates menu opens upward and out of
+ * the box, so this one asks for a visible overflow — and for a width a compose
+ * box actually wants, rather than the 80vw a settings form does.
+ */
+const MODAL_STYLES = {
+    modal: {
+        width: 'min(38rem, 95vw)',
+        minWidth: 0,
+        maxWidth: 'min(38rem, 95vw)',
+        maxHeight: 'none',
+        overflow: 'visible',
+    },
+};
+
+/** Laravel's error bag arrives joined with `<br />`; a field label is text. */
+const asPlainText = (message) =>
+    String(message ?? '')
+        .replace(/<br\s*\/?>/gi, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+/**
+ * Start a conversation that does not exist yet.
+ *
+ * "To" takes either a number or a client. Typing digits is treated as a
+ * number the moment it looks like one; anything else searches clients, and
+ * picking one that has more than one number asks which. The body is optional
+ * — the contract allows creating an empty thread — but the button says Send
+ * rather than Create, because that is what people are actually doing.
+ *
+ * A typed number is judged before it is sent rather than after: the server
+ * refuses a landline, and finding that out from a 422 after writing the
+ * message is a worse way to learn it than being told while typing.
+ */
+const SmsComposeModal = ({
+    open,
+    onClose,
+    endpoints,
+    lines = [],
+    status = null,
+    templates: templatesProp = null,
+    onCreated,
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [lineId, setLineId] = useState('');
+    const [to, setTo] = useState('');
+    const [picked, setPicked] = useState(null);
+    const [body, setBody] = useState('');
+    const [results, setResults] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState('');
+    const [templates, setTemplates] = useState(templatesProp);
+    const [templatesOpen, setTemplatesOpen] = useState(false);
+
+    const mountedRef = useRef(true);
+    const debouncedTo = useDebouncedValue(to, 250);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    // A fresh modal every time, and the first line preselected: with one line
+    // configured — which is the common case — there is nothing to choose.
+    useEffect(() => {
+        if (!open) return;
+
+        setLineId(lines.length > 0 ? String(lines[0].id) : '');
+        setTo('');
+        setPicked(null);
+        setBody('');
+        setResults([]);
+        setError('');
+    }, [open, lines]);
+
+    const typedNumber = looksLikeNumber(to);
+
+    useEffect(() => {
+        if (!open || picked || typedNumber) {
+            setResults([]);
+
+            return;
+        }
+
+        const query = debouncedTo.trim();
+
+        if (query.length < 2) {
+            setResults([]);
+
+            return;
+        }
+
+        setSearching(true);
+
+        CustomFetch(
+            routes.clientSearch,
+            'GET',
+            { q: query },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setResults(Array.isArray(result?.data) ? result.data : []);
+                setSearching(false);
+            },
+            () => {
+                if (mountedRef.current) setSearching(false);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setSearching(false);
+        });
+    }, [open, debouncedTo, picked, typedNumber, routes]);
+
+    const loadTemplates = useCallback(() => {
+        if (templates !== null) return;
+
+        CustomFetch(
+            routes.templates,
+            'GET',
+            null,
+            (result) => {
+                if (mountedRef.current) {
+                    setTemplates(Array.isArray(result?.data) ? result.data : []);
+                }
+            },
+            () => {
+                if (mountedRef.current) setTemplates([]);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setTemplates([]);
+        });
+    }, [routes, templates]);
+
+    const counts = segmentCount(body);
+    const overLimit = counts.segments > MAX_SEGMENTS;
+
+    // A number the person typed is checked here; a number attached to a client
+    // record is taken as given — it is the CRM's number for them, and second
+    // guessing it would only ever get in the way of texting a client.
+    const recipient = useMemo(() => describeRecipient(to), [to]);
+    const destination = picked ? picked.number : to.trim();
+    const recipientReady = picked !== null || recipient.kind === 'mobile';
+    const canSend =
+        lineId !== '' && destination !== '' && recipientReady && !overLimit && !sending;
+
+    // The server's 422 belongs to the To field as much as our own complaint
+    // does — it is about the same number, and a toast behind the modal is not
+    // where anybody looks for it.
+    const toProblem =
+        error !== '' ? error : picked === null && !recipient.ok ? recipient.message : '';
+    const toIsBad = toProblem !== '';
+
+    const changeTo = (value) => {
+        setTo(value);
+        // Whatever the server objected to, it was about the old number.
+        if (error !== '') setError('');
+    };
+
+    const submit = () => {
+        if (!canSend) return;
+
+        setSending(true);
+        setError('');
+
+        CustomFetch(
+            routes.createThread,
+            'POST',
+            {
+                line_id: lineId,
+                to: destination,
+                body: body.trim() === '' ? undefined : body.trim(),
+            },
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setSending(false);
+                onCreated?.(result?.thread ?? null, result?.message ?? null);
+            },
+            (message) => {
+                if (!mountedRef.current) return;
+
+                setSending(false);
+                // 422 comes back when the number cannot be used, which is the
+                // one error a person can actually fix from here — so it stays
+                // in the modal, under the field it is about.
+                setError(
+                    asPlainText(message) || 'That number could not be used.'
+                );
+            }
+        ).catch(() => {
+            if (mountedRef.current) setSending(false);
+        });
+    };
+
+    if (!open) return null;
+
+    const transport = describeTransport(status);
+    const onlyLine = lines.length === 1 ? lines[0] : null;
+
+    return (
+        <StandardModal
+            isOpen={open}
+            onClose={onClose}
+            size="small"
+            customStyles={MODAL_STYLES}
+        >
+            <div className={`${styles.modalForm} ${styles.composeForm}`}>
+                <div className={styles.modalHead}>
+                    <h3 className={styles.modalTitle}>
+                        <PenSquare size={16} strokeWidth={2.2} aria-hidden="true" />
+                        New message
+                    </h3>
+                    <button
+                        type="button"
+                        className={styles.iconButton}
+                        onClick={onClose}
+                        aria-label="Close"
+                    >
+                        <X size={15} strokeWidth={2} aria-hidden="true" />
+                    </button>
+                </div>
+
+                {transport.tone !== 'ok' && (
+                    <p className={`${styles.banner} ${styles.bannerWarn}`}>
+                        <span>
+                            <strong>{transport.title}</strong>
+                            {transport.detail}
+                        </span>
+                    </p>
+                )}
+
+                <div className={styles.composeRow}>
+                    {onlyLine ? (
+                        <div className={styles.composeField}>
+                            <span className={styles.labelSmall}>From</span>
+                            <span className={styles.fromChip}>
+                                <strong>{onlyLine.label || 'Line'}</strong>
+                                <small>{lineNumberForDisplay(onlyLine)}</small>
+                            </span>
+                        </div>
+                    ) : (
+                        <label className={styles.composeField}>
+                            <span className={styles.labelSmall}>From</span>
+                            <select
+                                className={styles.select}
+                                value={lineId}
+                                onChange={(event) => setLineId(event.target.value)}
+                            >
+                                {lines.length === 0 && (
+                                    <option value="">No lines available</option>
+                                )}
+                                {lines.map((line) => (
+                                    <option key={line.id} value={line.id}>
+                                        {(line.label || 'Line') +
+                                            ' · ' +
+                                            lineNumberForDisplay(line)}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    )}
+
+                    <div className={`${styles.composeField} ${styles.typeahead}`}>
+                        <span className={styles.labelSmall}>To</span>
+
+                        {picked ? (
+                            <div className={styles.searchBar}>
+                                <span className={styles.avatar} aria-hidden="true">
+                                    {initialsFor(picked.name)}
+                                </span>
+                                <span className={styles.searchInput}>
+                                    <strong>{picked.name}</strong>{' '}
+                                    <span className={styles.muted}>
+                                        {normaliseNumberForDisplay(picked.number)}
+                                    </span>
+                                </span>
+                                <button
+                                    type="button"
+                                    className={styles.iconButton}
+                                    onClick={() => {
+                                        setPicked(null);
+                                        setTo('');
+                                        setError('');
+                                    }}
+                                    aria-label="Choose someone else"
+                                >
+                                    <X size={14} strokeWidth={2} aria-hidden="true" />
+                                </button>
+                            </div>
+                        ) : (
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={to}
+                                placeholder="A mobile number, or search for a client…"
+                                autoComplete="off"
+                                aria-invalid={toIsBad ? 'true' : undefined}
+                                aria-describedby={
+                                    toProblem !== '' || recipient.message !== ''
+                                        ? TO_HINT_ID
+                                        : undefined
+                                }
+                                onChange={(event) => changeTo(event.target.value)}
+                            />
+                        )}
+
+                        {toProblem !== '' ? (
+                            <p className={styles.fieldError} id={TO_HINT_ID}>
+                                {toProblem}
+                            </p>
+                        ) : (
+                            !picked &&
+                            recipient.kind === 'mobile' && (
+                                <p className={styles.help} id={TO_HINT_ID}>
+                                    {recipient.message}
+                                </p>
+                            )
+                        )}
+
+                        {!picked && searching && <p className={styles.help}>Searching…</p>}
+
+                        {!picked && results.length > 0 && (
+                            <ul className={styles.typeaheadList}>
+                                {results.map((client) =>
+                                    (client.numbers || []).map((number) => (
+                                        <li key={`${client.id}-${number.number}`}>
+                                            <button
+                                                type="button"
+                                                className={styles.typeaheadRow}
+                                                onClick={() => {
+                                                    setPicked({
+                                                        id: client.id,
+                                                        name: client.name,
+                                                        number: number.number,
+                                                    });
+                                                    setResults([]);
+                                                    setError('');
+                                                }}
+                                            >
+                                                <span
+                                                    className={styles.avatar}
+                                                    aria-hidden="true"
+                                                >
+                                                    {initialsFor(client.name)}
+                                                </span>
+                                                <span>
+                                                    <strong>{client.name}</strong>{' '}
+                                                    <small>
+                                                        {number.label
+                                                            ? `${number.label} · `
+                                                            : ''}
+                                                        {normaliseNumberForDisplay(
+                                                            number.number
+                                                        )}
+                                                    </small>
+                                                </span>
+                                            </button>
+                                        </li>
+                                    ))
+                                )}
+                            </ul>
+                        )}
+                    </div>
+                </div>
+
+                {/* The same card the conversation composer is: the text, and a
+                    bar inside the same border carrying everything about it. */}
+                <div className={styles.composerBox}>
+                    <textarea
+                        className={`${styles.composerInput} ${styles.composeBody}`}
+                        rows={4}
+                        value={body}
+                        placeholder="Write a message…"
+                        aria-label="Message"
+                        onChange={(event) => setBody(event.target.value)}
+                    />
+
+                    <div className={`${styles.composerBar} ${styles.composeBar}`}>
+                        <div className={styles.composerTools}>
+                            <div className={styles.menuWrap}>
+                                <button
+                                    type="button"
+                                    className={styles.ghostButton}
+                                    onClick={() => {
+                                        loadTemplates();
+                                        setTemplatesOpen((prev) => !prev);
+                                    }}
+                                    aria-expanded={templatesOpen}
+                                    aria-haspopup="menu"
+                                >
+                                    <FileText size={14} strokeWidth={2} aria-hidden="true" />
+                                    Templates
+                                </button>
+
+                                {templatesOpen && (
+                                    <div className={styles.menu} role="menu">
+                                        {(templates || []).filter(
+                                            (one) => one.active !== false
+                                        ).length === 0 ? (
+                                            <p className={styles.menuEmpty}>
+                                                {templates === null
+                                                    ? 'Loading…'
+                                                    : 'No templates yet.'}
+                                            </p>
+                                        ) : (
+                                            (templates || [])
+                                                .filter((one) => one.active !== false)
+                                                .map((template) => (
+                                                    <button
+                                                        key={template.id}
+                                                        type="button"
+                                                        className={styles.menuItem}
+                                                        role="menuitem"
+                                                        onClick={() => {
+                                                            setTemplatesOpen(false);
+                                                            setBody((prev) =>
+                                                                prev.trim() === ''
+                                                                    ? template.body
+                                                                    : `${prev}\n${template.body}`
+                                                            );
+                                                        }}
+                                                    >
+                                                        <strong>{template.name}</strong>
+                                                        <small>{template.body}</small>
+                                                    </button>
+                                                ))
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+
+                            <span
+                                className={`${styles.counter} ${
+                                    overLimit ? styles.counterOver : ''
+                                }`}
+                            >
+                                {counts.characters} characters · {counts.segments} SMS ·{' '}
+                                {counts.encoding}
+                                {overLimit ? ` · over the ${MAX_SEGMENTS}-part limit` : ''}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={styles.modalActions}>
+                    <button type="button" className={styles.ghostButton} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={submit}
+                        disabled={!canSend}
+                    >
+                        {sending ? (
+                            <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                        ) : (
+                            <Send size={14} strokeWidth={2} aria-hidden="true" />
+                        )}
+                        Send
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+export default SmsComposeModal;