@visns-studio/visns-components 6.6.4 → 6.15.1

package/src/components/callQueue/CallQueueSettings.jsx

@@ -0,0 +1,508 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import Toggle from 'react-toggle';
+import {
+    AlertTriangle,
+    ChevronRight,
+    Info,
+    Loader2,
+    Phone,
+    Save,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/CallQueueSettings.module.scss';
+
+// Pure helpers live in a plain .js sibling so `node --test` can import them;
+// re-exported below so this file's public surface is unchanged.
+import {
+    cleanCode,
+    formatAuNumber,
+    titleCase,
+    validateCode,
+} from './callQueueSettingsHelpers';
+
+export { cleanCode, formatAuNumber, titleCase, validateCode };
+
+import 'react-toggle/style.css';
+
+/**
+ * Settings -> Call Queues.
+ *
+ * One row per Zoom call queue (the list is live from the Zoom API), carrying the
+ * two things the app owns: the pickup code the call pop tells staff to dial, and
+ * whether the queue is allowed to pop at all.
+ *
+ * Saving a code pushes it to Zoom before it is stored, so a rejected code never
+ * ends up on a Pick up button — the row surfaces Zoom's own wording when that
+ * happens. Excluding a queue is local only and keeps working while Zoom is
+ * unreachable, which is why an API failure warns rather than empties the page.
+ *
+ * Library note: the endpoints, the page header and every line of copy are props
+ * whose defaults reproduce the CRM's original page exactly.
+ */
+
+/** Endpoints the page talks to; the `endpoints` prop is merged over these. */
+const DEFAULT_ENDPOINTS = {
+    list: '/ajax/call-queue/settings',
+    save: (queueId) => '/ajax/call-queue/settings/' + encodeURIComponent(queueId),
+};
+
+/** The page's default copy, kept verbatim from the CRM. */
+const DEFAULT_INTRO =
+    'Every Zoom call queue pops a card for staff with the Call Queue Monitor ' +
+    'permission — set the code that card tells them to dial, or keep a queue ' +
+    'out of the pop entirely.';
+
+const DEFAULT_INFO_NOTE =
+    "Saving a code switches the pickup code policy on for that queue in Zoom " +
+    "(clearing it switches the policy off), but Zoom's API will not accept the " +
+    'digits themselves — a new code still has to be typed into the Zoom admin ' +
+    'UI. What is stored here is what the call pop tells staff to dial.';
+
+
+/**
+ * The page header the CRM shipped: `Settings > Call Queues` in the app's own
+ * `crmtitle` block. Rendered unless the `breadcrumb` prop replaces it (any React
+ * node) or switches it off entirely (`null`).
+ */
+const defaultBreadcrumb = (title) => (
+    <div className="grid">
+        <div className="grid__row">
+            <div className="grid__full crmtitle">
+                <h1>
+                    <Link to="/settings">Settings</Link>
+                    <ChevronRight strokeWidth={2} size={18} />
+                    {title}
+                </h1>
+            </div>
+        </div>
+    </div>
+);
+
+const CallQueueSettings = ({
+    endpoints,
+    title = 'Call Queues',
+    breadcrumb,
+    intro = DEFAULT_INTRO,
+    infoNote = DEFAULT_INFO_NOTE,
+    codePrefix = '*99',
+    onSaved = null,
+}) => {
+    const [rows, setRows] = useState([]);
+    const [draft, setDraft] = useState({});
+    const [saving, setSaving] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [zoomUnreachable, setZoomUnreachable] = useState(false);
+    const [zoomError, setZoomError] = useState('');
+
+    // Plain string, so it can sit in the loader's dep list without an object
+    // identity re-running the request on every render.
+    const listUrl = endpoints?.list ?? DEFAULT_ENDPOINTS.list;
+
+    /** The save endpoint for one queue, from a builder or an `{id}` template. */
+    const saveUrl = useCallback(
+        (queueId) => {
+            const option = endpoints?.save;
+
+            if (typeof option === 'function') {
+                return option(queueId);
+            }
+
+            if (typeof option === 'string' && option !== '') {
+                return option
+                    .split('{id}')
+                    .join(encodeURIComponent(String(queueId)));
+            }
+
+            return DEFAULT_ENDPOINTS.save(queueId);
+        },
+        [endpoints]
+    );
+
+    const seedDraft = useCallback((queues) => {
+        const next = {};
+
+        queues.forEach((queue) => {
+            next[queue.queue_id] = {
+                pickup_code: queue.pickup_code ?? '',
+                excluded: Boolean(queue.excluded),
+            };
+        });
+
+        setDraft(next);
+    }, []);
+
+    const load = useCallback(async () => {
+        setIsLoading(true);
+
+        try {
+            const res = await CustomFetch(listUrl, 'GET', {});
+            const data = res?.data ?? {};
+            const queues = data.queues ?? [];
+
+            setRows(queues);
+            seedDraft(queues);
+            setZoomUnreachable(Boolean(data.zoom_unreachable));
+            setZoomError(String(data.error ?? ''));
+        } catch (e) {
+            console.error('Failed to load call queue settings:', e);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [listUrl, seedDraft]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    const setField = (queueId, field, value) => {
+        setDraft((prev) => ({
+            ...prev,
+            [queueId]: { ...prev[queueId], [field]: value },
+        }));
+    };
+
+    /** Nothing to save until the row differs from what the server returned. */
+    const isDirty = (queue) => {
+        const current = draft[queue.queue_id];
+
+        if (!current) return false;
+
+        return (
+            current.pickup_code !== (queue.pickup_code ?? '') ||
+            Boolean(current.excluded) !== Boolean(queue.excluded)
+        );
+    };
+
+    const save = async (queue) => {
+        const queueId = queue.queue_id;
+        const current = draft[queueId] ?? {};
+        const error = validateCode(current.pickup_code);
+
+        if (error) {
+            toast.error(error);
+
+            return;
+        }
+
+        setSaving((prev) => ({ ...prev, [queueId]: true }));
+
+        try {
+            const res = await CustomFetch(
+                saveUrl(queueId),
+                'PUT',
+                {
+                    pickup_code:
+                        current.pickup_code === '' ? null : current.pickup_code,
+                    excluded: Boolean(current.excluded),
+                    // Keeps the local name cache fresh even when this save is the
+                    // only thing that touches the row today.
+                    queue_name: queue.name ?? null,
+                },
+                null,
+                // Own the error toast: CustomFetch would otherwise raise its own
+                // and the row would have no idea the save failed.
+                (message) => {
+                    toast.error(message || 'Failed to save the queue settings.');
+                }
+            );
+
+            const saved = res?.data?.queue;
+
+            if (saved) {
+                setRows((prev) =>
+                    prev.map((row) =>
+                        row.queue_id === queueId
+                            ? {
+                                  ...row,
+                                  pickup_code: saved.pickup_code,
+                                  excluded: saved.excluded,
+                              }
+                            : row
+                    )
+                );
+                setDraft((prev) => ({
+                    ...prev,
+                    [queueId]: {
+                        pickup_code: saved.pickup_code ?? '',
+                        excluded: Boolean(saved.excluded),
+                    },
+                }));
+                toast.success('Call queue settings saved.');
+
+                if (typeof onSaved === 'function') {
+                    onSaved(saved);
+                }
+            }
+        } catch (e) {
+            // The error toast is already out (errorCallback above); this only
+            // stops an unhandled rejection.
+            console.error('Failed to save call queue settings:', e);
+        } finally {
+            setSaving((prev) => ({ ...prev, [queueId]: false }));
+        }
+    };
+
+    // `undefined` keeps the default header, `null` removes it, anything else is
+    // rendered in its place.
+    const header =
+        breadcrumb === undefined ? defaultBreadcrumb(title) : breadcrumb;
+
+    return (
+        <div>
+            {header}
+
+            <div className="grid">
+                <div className="grid__full">
+                    <div className={styles.cqsettings}>
+                        {intro ? (
+                            <p className={styles.cqsettingsIntro}>{intro}</p>
+                        ) : null}
+
+                        {infoNote ? (
+                            <div className={styles.cqsettingsInfo}>
+                                <Info size={15} />
+                                <span>{infoNote}</span>
+                            </div>
+                        ) : null}
+
+                        {zoomUnreachable && (
+                            <div className={styles.cqsettingsWarning}>
+                                <AlertTriangle size={15} />
+                                <span>
+                                    Zoom could not be reached
+                                    {zoomError ? ` (${zoomError})` : ''}, so only
+                                    queues already configured here are listed and
+                                    pickup codes cannot be saved. Exclusions still
+                                    work.
+                                </span>
+                            </div>
+                        )}
+
+                        <div className={styles.cqsettingsPanel}>
+                            {isLoading ? (
+                                <div className={styles.cqsettingsState}>
+                                    <Loader2 size={16} className={styles.spin} />
+                                    <span>Loading call queues...</span>
+                                </div>
+                            ) : rows.length === 0 ? (
+                                <div className={styles.cqsettingsState}>
+                                    <span>
+                                        No call queues found in the Zoom account.
+                                    </span>
+                                </div>
+                            ) : (
+                                <table className={styles.cqsettingsTable}>
+                                    {/* Fixed layout + a colgroup: the queue name
+                                        takes the slack, every other column is
+                                        sized to the control it holds. */}
+                                    <colgroup>
+                                        <col />
+                                        <col
+                                            className={
+                                                styles.cqsettingsColNumber
+                                            }
+                                        />
+                                        <col
+                                            className={
+                                                styles.cqsettingsColStatus
+                                            }
+                                        />
+                                        <col
+                                            className={styles.cqsettingsColCode}
+                                        />
+                                        <col
+                                            className={styles.cqsettingsColPop}
+                                        />
+                                        <col
+                                            className={
+                                                styles.cqsettingsColExclude
+                                            }
+                                        />
+                                        <col
+                                            className={styles.cqsettingsColSave}
+                                        />
+                                    </colgroup>
+                                    <thead>
+                                        <tr>
+                                            <th>Queue</th>
+                                            <th>Number</th>
+                                            <th>Status</th>
+                                            <th>Pickup code</th>
+                                            <th>Call pop</th>
+                                            <th className={styles.isCentred}>
+                                                Exclude
+                                            </th>
+                                            <th aria-label="Save" />
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {rows.map((queue) => {
+                                            const current = draft[queue.queue_id] ?? {
+                                                pickup_code: '',
+                                                excluded: false,
+                                            };
+                                            const error = validateCode(current.pickup_code);
+                                            const dirty = isDirty(queue);
+                                            const isSaving = Boolean(saving[queue.queue_id]);
+                                            const isExcluded = Boolean(current.excluded);
+                                            const hasCode = Boolean(current.pickup_code);
+                                            const number = formatAuNumber(queue.number);
+                                            const name = queue.name || queue.queue_id;
+
+                                            return (
+                                                <tr
+                                                    key={queue.queue_id}
+                                                    className={
+                                                        isExcluded
+                                                            ? styles.isExcluded
+                                                            : undefined
+                                                    }
+                                                >
+                                                    <td>
+                                                        <span className={styles.cqsettingsName}>
+                                                            <span className={styles.cqsettingsIcon}>
+                                                                <Phone size={13} />
+                                                            </span>
+                                                            <span title={name}>{name}</span>
+                                                        </span>
+                                                        <span className={styles.cqsettingsMeta}>
+                                                            {queue.extension_number
+                                                                ? `Ext ${queue.extension_number}`
+                                                                : 'No extension'}
+                                                            {queue.missing_in_zoom && (
+                                                                <span className={styles.cqsettingsFlag}>
+                                                                    not in Zoom any more
+                                                                </span>
+                                                            )}
+                                                        </span>
+                                                    </td>
+                                                    <td>
+                                                        {number ? (
+                                                            <span className={styles.cqsettingsNumber}>
+                                                                {number}
+                                                            </span>
+                                                        ) : (
+                                                            <span className={styles.cqsettingsNone}>
+                                                                —
+                                                            </span>
+                                                        )}
+                                                    </td>
+                                                    <td>
+                                                        <span
+                                                            className={
+                                                                styles.cqsettingsPill +
+                                                                (queue.status === 'active'
+                                                                    ? ' ' + styles.cqsettingsPillOk
+                                                                    : '')
+                                                            }
+                                                        >
+                                                            {titleCase(queue.status)}
+                                                        </span>
+                                                    </td>
+                                                    <td>
+                                                        <span
+                                                            className={
+                                                                styles.cqsettingsCode +
+                                                                (error ? ' ' + styles.hasError : '')
+                                                            }
+                                                        >
+                                                            <span className={styles.cqsettingsCodePrefix}>
+                                                                {codePrefix}
+                                                            </span>
+                                                            <input
+                                                                className={styles.cqsettingsCodeInput}
+                                                                type="text"
+                                                                inputMode="numeric"
+                                                                maxLength={4}
+                                                                placeholder="0000"
+                                                                aria-label={`Pickup code for ${name}`}
+                                                                aria-invalid={Boolean(error)}
+                                                                value={current.pickup_code}
+                                                                onChange={(e) =>
+                                                                    setField(
+                                                                        queue.queue_id,
+                                                                        'pickup_code',
+                                                                        cleanCode(e.target.value)
+                                                                    )
+                                                                }
+                                                            />
+                                                        </span>
+                                                        {error && (
+                                                            <span className={styles.cqsettingsError}>
+                                                                {error}
+                                                            </span>
+                                                        )}
+                                                    </td>
+                                                    <td>
+                                                        {isExcluded ? (
+                                                            <span className={styles.cqsettingsPill}>
+                                                                Excluded
+                                                            </span>
+                                                        ) : hasCode ? (
+                                                            <span
+                                                                className={`${styles.cqsettingsPill} ${styles.cqsettingsPillOk}`}
+                                                            >
+                                                                Pick up enabled
+                                                            </span>
+                                                        ) : (
+                                                            <span className={styles.cqsettingsPill}>
+                                                                No pick-up code
+                                                            </span>
+                                                        )}
+                                                    </td>
+                                                    <td className={styles.isCentred}>
+                                                        <span className={styles.cqsettingsToggle}>
+                                                            <Toggle
+                                                                icons={false}
+                                                                checked={isExcluded}
+                                                                aria-label={`Exclude ${name} from the call pop`}
+                                                                onChange={(e) =>
+                                                                    setField(
+                                                                        queue.queue_id,
+                                                                        'excluded',
+                                                                        e.target.checked
+                                                                    )
+                                                                }
+                                                            />
+                                                        </span>
+                                                    </td>
+                                                    <td>
+                                                        <button
+                                                            type="button"
+                                                            className={styles.cqsettingsSave}
+                                                            disabled={
+                                                                !dirty || isSaving || Boolean(error)
+                                                            }
+                                                            onClick={() => save(queue)}
+                                                        >
+                                                            {isSaving ? (
+                                                                <Loader2
+                                                                    size={13}
+                                                                    className={styles.spin}
+                                                                />
+                                                            ) : (
+                                                                <Save size={13} />
+                                                            )}
+                                                            <span>
+                                                                {isSaving ? 'Saving' : 'Save'}
+                                                            </span>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CallQueueSettings;