@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/sms/SmsLineSettings.jsx

@@ -0,0 +1,854 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Loader2, MessageSquare, Plus, TriangleAlert, X } from 'lucide-react';
+import { toast } from 'react-toastify';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import showConfirmDialog from '../generic/ConfirmationDialog';
+import styles from '../styles/Sms.module.scss';
+import { resolveSmsEndpoints } from './smsEndpoints';
+import {
+    describeTransport,
+    normaliseNumberForDisplay,
+    segmentCount,
+} from './smsHelpers';
+
+const emptyLine = {
+    id: null,
+    label: '',
+    phone_number: '',
+    zoom_user_id: '',
+    zoom_user_email: '',
+    active: true,
+    user_ids: [],
+};
+
+const emptyTemplate = { id: null, name: '', body: '', active: true, sort: 0 };
+
+/**
+ * Settings → Messaging.
+ *
+ * Two things live here: the lines (a Zoom Phone number, the staff who can see
+ * it) and the templates. The status card above them exists because "transport:
+ * null" is not a sentence anybody can act on — it says, in words, whether
+ * anything actually leaves the building right now.
+ *
+ * `staffOptions` is required rather than fetched: the contract's
+ * `/settings/lines` response carries the staff already ON each line, but there
+ * is no route that lists everybody who COULD be on one, and inventing a URL
+ * for it here would be a second contract nobody agreed to. The CRM already has
+ * that list on every settings screen, so it passes it in.
+ */
+const SmsLineSettings = ({
+    endpoints,
+    // Accepted for consistency with the CRM's other settings screens.
+    userProfile: _userProfile = null,
+    staffOptions = [],
+    pageTitle = 'Messaging',
+}) => {
+    const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
+
+    const [status, setStatus] = useState(null);
+    const [lines, setLines] = useState([]);
+    const [zoom, setZoom] = useState({ connected: false, users: [], error: null });
+    const [templates, setTemplates] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    const [lineDraft, setLineDraft] = useState(null);
+    const [templateDraft, setTemplateDraft] = useState(null);
+    const [saving, setSaving] = useState(false);
+
+    const mountedRef = useRef(true);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    /* -------------------------------------------------------------- loading */
+
+    const loadLines = useCallback(() => {
+        CustomFetch(
+            routes.settingsLines,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setLines(Array.isArray(result?.data) ? result.data : []);
+                setZoom({
+                    connected: Boolean(result?.zoom_connected),
+                    users: Array.isArray(result?.zoom_users) ? result.zoom_users : [],
+                    error: result?.zoom_error ?? null,
+                });
+                setLoading(false);
+            },
+            () => {
+                if (mountedRef.current) setLoading(false);
+            }
+        ).catch(() => {
+            if (mountedRef.current) setLoading(false);
+        });
+    }, [routes]);
+
+    const loadTemplates = useCallback(() => {
+        CustomFetch(
+            routes.templates,
+            'GET',
+            null,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setTemplates(Array.isArray(result?.data) ? result.data : []);
+            },
+            () => {}
+        ).catch(() => {});
+    }, [routes]);
+
+    useEffect(() => {
+        CustomFetch(
+            routes.status,
+            'GET',
+            null,
+            (result) => {
+                if (mountedRef.current && result) setStatus(result);
+            },
+            () => {}
+        ).catch(() => {});
+
+        loadLines();
+        loadTemplates();
+    }, [routes, loadLines, loadTemplates]);
+
+    /**
+     * Everyone who could be put on a line.
+     *
+     * `staffOptions` is the real answer. Failing that, the staff already on a
+     * line are at least a list — enough to move somebody between lines, which
+     * is the commonest edit — so the picker is never empty when it does not
+     * have to be.
+     */
+    const staff = useMemo(() => {
+        if (staffOptions.length > 0) return staffOptions;
+
+        const seen = new Map();
+
+        lines.forEach((line) => {
+            (line.users || []).forEach((user) => {
+                if (!seen.has(user.id)) seen.set(user.id, user);
+            });
+        });
+
+        return Array.from(seen.values());
+    }, [staffOptions, lines]);
+
+    /* --------------------------------------------------------------- saving */
+
+    const saveLine = () => {
+        if (!lineDraft) return;
+
+        const creating = !lineDraft.id;
+
+        setSaving(true);
+
+        CustomFetch(
+            creating ? routes.settingsLines : routes.settingsLine(lineDraft.id),
+            creating ? 'POST' : 'PUT',
+            {
+                label: lineDraft.label,
+                phone_number: lineDraft.phone_number,
+                zoom_user_id: lineDraft.zoom_user_id || null,
+                zoom_user_email: lineDraft.zoom_user_email || null,
+                active: Boolean(lineDraft.active),
+                user_ids: lineDraft.user_ids || [],
+            },
+            () => {
+                if (!mountedRef.current) return;
+
+                setSaving(false);
+                setLineDraft(null);
+                toast.success(creating ? 'Line added' : 'Line saved');
+                loadLines();
+            },
+            null
+        ).catch(() => {
+            if (mountedRef.current) setSaving(false);
+        });
+    };
+
+    const deleteLine = (line) => {
+        showConfirmDialog({
+            title: 'Delete this line?',
+            message:
+                'Staff will stop seeing its conversations. The messages themselves are kept.',
+            confirmLabel: 'Delete',
+            cancelLabel: 'Keep it',
+            data: line,
+            onConfirm: () => {
+                CustomFetch(
+                    routes.settingsLine(line.id),
+                    'DELETE',
+                    {},
+                    () => {
+                        toast.success('Line deleted');
+                        loadLines();
+                    },
+                    null
+                ).catch(() => {});
+            },
+        });
+    };
+
+    const saveTemplate = () => {
+        if (!templateDraft) return;
+
+        const creating = !templateDraft.id;
+
+        setSaving(true);
+
+        CustomFetch(
+            creating ? routes.templates : routes.template(templateDraft.id),
+            creating ? 'POST' : 'PUT',
+            {
+                name: templateDraft.name,
+                body: templateDraft.body,
+                active: Boolean(templateDraft.active),
+                sort: Number(templateDraft.sort) || 0,
+            },
+            () => {
+                if (!mountedRef.current) return;
+
+                setSaving(false);
+                setTemplateDraft(null);
+                toast.success(creating ? 'Template added' : 'Template saved');
+                loadTemplates();
+            },
+            null
+        ).catch(() => {
+            if (mountedRef.current) setSaving(false);
+        });
+    };
+
+    const deleteTemplate = (template) => {
+        showConfirmDialog({
+            title: 'Delete this template?',
+            message: 'It disappears from the Templates menu in the composer.',
+            confirmLabel: 'Delete',
+            cancelLabel: 'Keep it',
+            data: template,
+            onConfirm: () => {
+                CustomFetch(
+                    routes.template(template.id),
+                    'DELETE',
+                    {},
+                    () => {
+                        toast.success('Template deleted');
+                        loadTemplates();
+                    },
+                    null
+                ).catch(() => {});
+            },
+        });
+    };
+
+    /* --------------------------------------------------------------- render */
+
+    const transport = describeTransport(status);
+
+    return (
+        <div className={styles.settings}>
+            <div className={styles.settingsHead}>
+                <div>
+                    <h1 className={styles.pageTitle}>
+                        <MessageSquare size={22} strokeWidth={2.2} aria-hidden="true" />
+                        {pageTitle}
+                    </h1>
+                    <p className={styles.pageIntro}>
+                        A line is one Zoom Phone number and the staff who can see its
+                        conversations. Everything staff send goes out from the line they
+                        are replying on.
+                    </p>
+                </div>
+            </div>
+
+            <div className={styles.statusCard}>
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Transport</span>
+                    <span className={styles.statusValue}>
+                        <span
+                            className={`${styles.pill} ${
+                                transport.tone === 'ok'
+                                    ? styles.pillOk
+                                    : transport.tone === 'bad'
+                                      ? styles.pillBad
+                                      : styles.pillWarn
+                            }`}
+                        >
+                            {status?.transport ?? '—'}
+                        </span>
+                    </span>
+                </div>
+
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Connected</span>
+                    <span className={styles.statusValue}>
+                        {status?.connected ? 'Yes' : 'No'}
+                    </span>
+                </div>
+
+                <div className={styles.statusItem}>
+                    <span className={styles.statusLabel}>Lines</span>
+                    <span className={styles.statusValue}>
+                        {status?.lines_count ?? lines.length}
+                    </span>
+                </div>
+
+                <p className={styles.statusMeaning}>
+                    <strong>{transport.title}</strong>
+                    <br />
+                    {transport.detail}
+                </p>
+            </div>
+
+            {zoom.error && (
+                <p className={`${styles.banner} ${styles.bannerBad}`}>
+                    <TriangleAlert size={16} strokeWidth={2} aria-hidden="true" />
+                    <span>
+                        <strong>Zoom said no</strong>
+                        {zoom.error}
+                    </span>
+                </p>
+            )}
+
+            {/* ------------------------------------------------------- lines */}
+
+            <section className={styles.section}>
+                <div className={styles.sectionHead}>
+                    <h2 className={styles.sectionTitle}>Lines</h2>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => setLineDraft({ ...emptyLine })}
+                    >
+                        <Plus size={14} strokeWidth={2} aria-hidden="true" />
+                        Add a line
+                    </button>
+                </div>
+
+                <div className={styles.tableWrap}>
+                    <table className={styles.table}>
+                        <thead>
+                            <tr>
+                                <th>Label</th>
+                                <th>Number</th>
+                                <th>Zoom user</th>
+                                <th>Staff</th>
+                                <th>Active</th>
+                                <th className={styles.actionsHead}>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {lines.map((line) => (
+                                <tr
+                                    key={line.id}
+                                    className={line.deleted_at ? styles.deletedRow : ''}
+                                >
+                                    <td>
+                                        <strong>{line.label || 'Untitled line'}</strong>
+                                    </td>
+                                    <td className={styles.numberCell}>
+                                        {line.display_number ||
+                                            normaliseNumberForDisplay(line.phone_number)}
+                                    </td>
+                                    <td>
+                                        {line.zoom_user_email || (
+                                            <span className={styles.muted}>Not linked</span>
+                                        )}
+                                    </td>
+                                    <td>
+                                        <span className={styles.chipRow}>
+                                            {(line.users || []).length === 0 ? (
+                                                <span className={styles.muted}>Everyone</span>
+                                            ) : (
+                                                (line.users || []).map((user) => (
+                                                    <span
+                                                        key={user.id}
+                                                        className={styles.staffChip}
+                                                    >
+                                                        {user.name}
+                                                    </span>
+                                                ))
+                                            )}
+                                        </span>
+                                    </td>
+                                    <td>
+                                        <span
+                                            className={`${styles.pill} ${
+                                                line.active ? styles.pillOk : styles.pillMuted
+                                            }`}
+                                        >
+                                            {line.active ? 'Active' : 'Off'}
+                                        </span>
+                                    </td>
+                                    <td className={styles.actionsCell}>
+                                        <button
+                                            type="button"
+                                            className={styles.linkButton}
+                                            onClick={() =>
+                                                setLineDraft({
+                                                    ...emptyLine,
+                                                    ...line,
+                                                    zoom_user_id: line.zoom_user_id || '',
+                                                    zoom_user_email:
+                                                        line.zoom_user_email || '',
+                                                    user_ids: (line.users || []).map(
+                                                        (user) => user.id
+                                                    ),
+                                                })
+                                            }
+                                        >
+                                            Edit
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className={styles.dangerLink}
+                                            onClick={() => deleteLine(line)}
+                                        >
+                                            Delete
+                                        </button>
+                                    </td>
+                                </tr>
+                            ))}
+
+                            {lines.length === 0 && (
+                                <tr>
+                                    <td colSpan={6} className={styles.tableEmpty}>
+                                        {loading ? (
+                                            <Loader2
+                                                size={18}
+                                                className={styles.spin}
+                                                aria-label="Loading"
+                                            />
+                                        ) : (
+                                            <p>
+                                                No lines yet. Add one and give it the Zoom
+                                                Phone number staff should message from.
+                                            </p>
+                                        )}
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            {/* --------------------------------------------------- templates */}
+
+            <section className={styles.section}>
+                <div className={styles.sectionHead}>
+                    <h2 className={styles.sectionTitle}>Templates</h2>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={() => setTemplateDraft({ ...emptyTemplate })}
+                    >
+                        <Plus size={14} strokeWidth={2} aria-hidden="true" />
+                        Add a template
+                    </button>
+                </div>
+
+                <div className={styles.tableWrap}>
+                    <table className={styles.table}>
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Body</th>
+                                <th>Length</th>
+                                <th>Active</th>
+                                <th className={styles.actionsHead}>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {templates.map((template) => {
+                                const counts = segmentCount(template.body);
+
+                                return (
+                                    <tr key={template.id}>
+                                        <td>
+                                            <strong>{template.name}</strong>
+                                        </td>
+                                        <td>{template.body}</td>
+                                        <td className={styles.numberCell}>
+                                            {counts.characters} · {counts.segments} SMS
+                                        </td>
+                                        <td>
+                                            <span
+                                                className={`${styles.pill} ${
+                                                    template.active
+                                                        ? styles.pillOk
+                                                        : styles.pillMuted
+                                                }`}
+                                            >
+                                                {template.active ? 'Active' : 'Off'}
+                                            </span>
+                                        </td>
+                                        <td className={styles.actionsCell}>
+                                            <button
+                                                type="button"
+                                                className={styles.linkButton}
+                                                onClick={() =>
+                                                    setTemplateDraft({
+                                                        ...emptyTemplate,
+                                                        ...template,
+                                                    })
+                                                }
+                                            >
+                                                Edit
+                                            </button>
+                                            <button
+                                                type="button"
+                                                className={styles.dangerLink}
+                                                onClick={() => deleteTemplate(template)}
+                                            >
+                                                Delete
+                                            </button>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+
+                            {templates.length === 0 && (
+                                <tr>
+                                    <td colSpan={5} className={styles.tableEmpty}>
+                                        <p>
+                                            No templates yet. They appear in the Templates
+                                            menu beside the composer.
+                                        </p>
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            {/* ------------------------------------------------------ modals */}
+
+            {lineDraft && (
+                <StandardModal isOpen onClose={() => setLineDraft(null)} size="medium">
+                    <div className={styles.modalForm}>
+                        <div className={styles.modalHead}>
+                            <h3 className={styles.modalTitle}>
+                                {lineDraft.id ? 'Edit line' : 'Add a line'}
+                            </h3>
+                            <button
+                                type="button"
+                                className={styles.iconButton}
+                                onClick={() => setLineDraft(null)}
+                                aria-label="Close"
+                            >
+                                <X size={15} strokeWidth={2} aria-hidden="true" />
+                            </button>
+                        </div>
+
+                        <label className={styles.field}>
+                            <span className={styles.label}>Label</span>
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={lineDraft.label}
+                                placeholder="Reception, Advice team, Reminders…"
+                                onChange={(event) =>
+                                    setLineDraft({ ...lineDraft, label: event.target.value })
+                                }
+                            />
+                        </label>
+
+                        <label className={styles.field}>
+                            <span className={styles.label}>Phone number</span>
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={lineDraft.phone_number}
+                                placeholder="+61 8 9375 2549"
+                                onChange={(event) =>
+                                    setLineDraft({
+                                        ...lineDraft,
+                                        phone_number: event.target.value,
+                                    })
+                                }
+                            />
+                            <p className={styles.help}>
+                                {lineDraft.phone_number
+                                    ? `Shown as ${normaliseNumberForDisplay(
+                                          lineDraft.phone_number
+                                      )}`
+                                    : 'The Zoom Phone number this line sends from.'}
+                            </p>
+                        </label>
+
+                        {zoom.connected ? (
+                            <label className={styles.field}>
+                                <span className={styles.label}>Zoom user</span>
+                                <select
+                                    className={styles.select}
+                                    value={lineDraft.zoom_user_id || ''}
+                                    onChange={(event) => {
+                                        const user = zoom.users.find(
+                                            (one) => String(one.id) === event.target.value
+                                        );
+
+                                        setLineDraft({
+                                            ...lineDraft,
+                                            zoom_user_id: event.target.value,
+                                            zoom_user_email: user?.email || '',
+                                            // A Zoom user usually has exactly one
+                                            // number; filling it in saves retyping
+                                            // an E.164 by hand.
+                                            phone_number:
+                                                lineDraft.phone_number ||
+                                                user?.phone_numbers?.[0] ||
+                                                '',
+                                        });
+                                    }}
+                                >
+                                    <option value="">Not linked to a Zoom user</option>
+                                    {zoom.users.map((user) => (
+                                        <option key={user.id} value={user.id}>
+                                            {user.display_name || user.email}
+                                            {user.phone_numbers?.length
+                                                ? ` · ${user.phone_numbers.join(', ')}`
+                                                : ''}
+                                        </option>
+                                    ))}
+                                </select>
+                            </label>
+                        ) : (
+                            <p className={styles.help}>
+                                Zoom is not connected, so there is no user list to pick
+                                from yet. Fill in the number now and link the Zoom user
+                                once the connection is live.
+                            </p>
+                        )}
+
+                        <div className={styles.field}>
+                            <span className={styles.label}>Staff who can see this line</span>
+                            <div className={styles.staffPicker}>
+                                {staff.length === 0 && (
+                                    <p className={styles.help}>
+                                        No staff list was supplied, so this line is visible
+                                        to everyone with messaging access.
+                                    </p>
+                                )}
+                                {staff.map((user) => {
+                                    const checked = (lineDraft.user_ids || []).some(
+                                        (id) => String(id) === String(user.id)
+                                    );
+
+                                    return (
+                                        <label key={user.id} className={styles.inlineCheck}>
+                                            <input
+                                                type="checkbox"
+                                                checked={checked}
+                                                onChange={(event) =>
+                                                    setLineDraft({
+                                                        ...lineDraft,
+                                                        user_ids: event.target.checked
+                                                            ? [
+                                                                  ...(lineDraft.user_ids ||
+                                                                      []),
+                                                                  user.id,
+                                                              ]
+                                                            : (
+                                                                  lineDraft.user_ids || []
+                                                              ).filter(
+                                                                  (id) =>
+                                                                      String(id) !==
+                                                                      String(user.id)
+                                                              ),
+                                                    })
+                                                }
+                                            />
+                                            {user.name}
+                                        </label>
+                                    );
+                                })}
+                            </div>
+                            <p className={styles.help}>
+                                Leave every box clear to let anyone with messaging access
+                                see this line.
+                            </p>
+                        </div>
+
+                        <label className={styles.inlineCheck}>
+                            <input
+                                type="checkbox"
+                                checked={Boolean(lineDraft.active)}
+                                onChange={(event) =>
+                                    setLineDraft({
+                                        ...lineDraft,
+                                        active: event.target.checked,
+                                    })
+                                }
+                            />
+                            Active
+                        </label>
+
+                        <div className={styles.modalActions}>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() => setLineDraft(null)}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={saveLine}
+                                disabled={
+                                    saving ||
+                                    lineDraft.label.trim() === '' ||
+                                    lineDraft.phone_number.trim() === ''
+                                }
+                            >
+                                {saving && (
+                                    <Loader2
+                                        size={14}
+                                        className={styles.spin}
+                                        aria-hidden="true"
+                                    />
+                                )}
+                                Save
+                            </button>
+                        </div>
+                    </div>
+                </StandardModal>
+            )}
+
+            {templateDraft && (
+                <StandardModal isOpen onClose={() => setTemplateDraft(null)} size="medium">
+                    <div className={styles.modalForm}>
+                        <div className={styles.modalHead}>
+                            <h3 className={styles.modalTitle}>
+                                {templateDraft.id ? 'Edit template' : 'Add a template'}
+                            </h3>
+                            <button
+                                type="button"
+                                className={styles.iconButton}
+                                onClick={() => setTemplateDraft(null)}
+                                aria-label="Close"
+                            >
+                                <X size={15} strokeWidth={2} aria-hidden="true" />
+                            </button>
+                        </div>
+
+                        <label className={styles.field}>
+                            <span className={styles.label}>Name</span>
+                            <input
+                                type="text"
+                                className={styles.input}
+                                value={templateDraft.name}
+                                placeholder="Appointment reminder"
+                                onChange={(event) =>
+                                    setTemplateDraft({
+                                        ...templateDraft,
+                                        name: event.target.value,
+                                    })
+                                }
+                            />
+                        </label>
+
+                        <label className={styles.field}>
+                            <span className={styles.label}>Body</span>
+                            <textarea
+                                className={styles.textarea}
+                                rows={4}
+                                value={templateDraft.body}
+                                onChange={(event) =>
+                                    setTemplateDraft({
+                                        ...templateDraft,
+                                        body: event.target.value,
+                                    })
+                                }
+                            />
+                            <p className={styles.counter}>
+                                {segmentCount(templateDraft.body).characters} characters ·{' '}
+                                {segmentCount(templateDraft.body).segments} SMS ·{' '}
+                                {segmentCount(templateDraft.body).encoding}
+                            </p>
+                            <p className={styles.help}>
+                                Placeholders: {'{first_name}'} {'{last_name}'} {'{name}'}{' '}
+                                {'{date}'} {'{time}'} {'{number}'} {'{line}'} — filled from
+                                the conversation when inserted.
+                            </p>
+                        </label>
+
+                        <label className={styles.field}>
+                            <span className={styles.label}>Sort</span>
+                            <input
+                                type="number"
+                                className={styles.input}
+                                value={templateDraft.sort}
+                                onChange={(event) =>
+                                    setTemplateDraft({
+                                        ...templateDraft,
+                                        sort: event.target.value,
+                                    })
+                                }
+                            />
+                        </label>
+
+                        <label className={styles.inlineCheck}>
+                            <input
+                                type="checkbox"
+                                checked={Boolean(templateDraft.active)}
+                                onChange={(event) =>
+                                    setTemplateDraft({
+                                        ...templateDraft,
+                                        active: event.target.checked,
+                                    })
+                                }
+                            />
+                            Active
+                        </label>
+
+                        <div className={styles.modalActions}>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() => setTemplateDraft(null)}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={saveTemplate}
+                                disabled={
+                                    saving ||
+                                    templateDraft.name.trim() === '' ||
+                                    templateDraft.body.trim() === ''
+                                }
+                            >
+                                {saving && (
+                                    <Loader2
+                                        size={14}
+                                        className={styles.spin}
+                                        aria-hidden="true"
+                                    />
+                                )}
+                                Save
+                            </button>
+                        </div>
+                    </div>
+                </StandardModal>
+            )}
+        </div>
+    );
+};
+
+export default SmsLineSettings;