@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/callQueue/callQueueHelpers.js

@@ -0,0 +1,280 @@
+/**
+ * Pure helpers for the call-queue components.
+ *
+ * Split out of CallQueuePop.jsx so they can be imported by `node --test`, which
+ * cannot parse JSX. Nothing here touches React or the DOM; CallQueuePop
+ * re-exports the lot, so the component's public surface is unchanged.
+ */
+
+/** Spatie permission that gates the pop, unless `monitorPermission` overrides it. */
+export const MONITOR_PERMISSION = 'Call Queue Monitor';
+
+/** Badge text for a queue Zoom sent without a name. */
+export const FALLBACK_QUEUE_NAME = 'Call Queue';
+
+/**
+ * Does this user hold the monitor permission?
+ *
+ * `userProfile` comes from the host app's profile endpoint, which eager-loads
+ * the Spatie shape `roles[].permissions[].name`. Direct (non-role) permissions
+ * are checked too, since Spatie allows assigning a permission straight to a
+ * user.
+ */
+export const hasMonitorPermission = (
+    userProfile,
+    permission = MONITOR_PERMISSION
+) => {
+    if (!userProfile) {
+        return false;
+    }
+
+    const roles = Array.isArray(userProfile.roles) ? userProfile.roles : [];
+
+    const viaRole = roles.some((role) =>
+        (Array.isArray(role?.permissions) ? role.permissions : []).some(
+            (item) => item?.name === permission
+        )
+    );
+
+    if (viaRole) {
+        return true;
+    }
+
+    const direct = Array.isArray(userProfile.permissions)
+        ? userProfile.permissions
+        : [];
+
+    return direct.some((item) => item?.name === permission);
+};
+
+/**
+ * Reduce any incoming number to Australian local digits (0xxxxxxxxx).
+ * `+61412345678` / `61412345678` / `0412 345 678` all collapse to `0412345678`.
+ * Display formatting only — the server mirrors this same normalisation for the
+ * client match.
+ */
+export const toLocalDigits = (value) => {
+    if (!value) {
+        return '';
+    }
+
+    let digits = String(value).replace(/\D/g, '');
+
+    // +61 / 0011 61 style country code -> single leading zero.
+    if (digits.length === 11 && digits.indexOf('61') === 0) {
+        digits = `0${digits.slice(2)}`;
+    }
+
+    return digits;
+};
+
+/**
+ * Human AU formatting: mobiles as `04xx xxx xxx`, landlines as `0x xxxx xxxx`.
+ * libphonenumber-js is not a dependency, so this mirrors the formatter the
+ * legacy vendored call pop used (minus its `.replace('61', 0)` bug, which
+ * mangled numbers that merely contained "61").
+ */
+export const formatAuPhone = (value) => {
+    const digits = toLocalDigits(value);
+
+    if (digits === '') {
+        return value ? String(value) : 'Unknown number';
+    }
+
+    if (digits.indexOf('04') === 0) {
+        const mobile = digits.match(/^(\d{4})(\d{3})(\d{3})$/);
+        if (mobile) {
+            return `${mobile[1]} ${mobile[2]} ${mobile[3]}`;
+        }
+    } else {
+        const landline = digits.match(/^(\d{2})(\d{4})(\d{4})$/);
+        if (landline) {
+            return `${landline[1]} ${landline[2]} ${landline[3]}`;
+        }
+    }
+
+    return digits;
+};
+
+/**
+ * A meeting date as `DD/MM h:mma` (e.g. `21/08 10:00am`). Empty string for an
+ * absent or unparseable date, so the caller can just skip it.
+ */
+export const formatEventDate = (value) => {
+    if (!value) {
+        return '';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const hours = date.getHours();
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const suffix = hours < 12 ? 'am' : 'pm';
+    const hour12 = hours % 12 === 0 ? 12 : hours % 12;
+
+    return `${day}/${month} ${hour12}:${minutes}${suffix}`;
+};
+
+/** A task due date as `DD/MM/YYYY`; empty string when absent or unparseable. */
+export const formatDueDate = (value) => {
+    if (!value) {
+        return '';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+
+    return `${day}/${month}/${date.getFullYear()}`;
+};
+
+/**
+ * The `dataId` the Active Call workspace (`/call/:dataId`) expects: it rebuilds
+ * the number it searches on as `'0' + dataId.slice(2)`, so the param has to be
+ * the AU number in `61xxxxxxxxx` form. Anything that does not reduce to a local
+ * `0…` number has no workspace to open, and yields ''.
+ */
+export const toCallWorkspaceId = (value) => {
+    const digits = toLocalDigits(value);
+
+    if (digits.indexOf('0') !== 0 || digits.length < 9) {
+        return '';
+    }
+
+    return `61${digits.slice(1)}`;
+};
+
+/**
+ * Tasks index filtered to one client: `/tasks/:param_task_type_id/:param_company_id`.
+ * Type 0 is the grid's own "All Current Tasks" option, which is the closest
+ * thing to "every open task for this client" the route can express — types 1-4
+ * each narrow it further.
+ */
+export const defaultClientTasksUrl = (clientId) => `/tasks/0/${clientId}`;
+
+/** Default popup target for a task row. */
+export const defaultTaskUrl = (task) => `/tasks/detail/${task?.id}`;
+
+/** Default detail route for a matched client. */
+export const defaultClientUrl = (client) => `/clients/${client?.id}`;
+
+/** The client fields shown as label/value rows, in card order. */
+export const CLIENT_DETAIL_FIELDS = [
+    { key: 'adviser', label: 'Adviser' },
+    { key: 'coding', label: 'Coding' },
+    { key: 'age', label: 'Age' },
+    { key: 'city', label: 'City' },
+];
+
+/**
+ * Detail rows for a client block, with the empty ones dropped — a card only
+ * ever shows what the CRM actually knows, never a row with a blank value.
+ */
+export const clientDetails = (client) => {
+    if (!client || typeof client !== 'object') {
+        return [];
+    }
+
+    return CLIENT_DETAIL_FIELDS.map(({ key, label }) => ({
+        label,
+        value: client[key],
+    })).filter(
+        (row) =>
+            row.value !== null &&
+            row.value !== undefined &&
+            String(row.value).trim() !== ''
+    );
+};
+
+/** Seconds since `startedAt` rendered as m:ss (never negative). */
+export const formatElapsed = (startedAt, now) => {
+    const started = new Date(startedAt).getTime();
+
+    if (Number.isNaN(started)) {
+        return '0:00';
+    }
+
+    const seconds = Math.max(0, Math.floor((now - started) / 1000));
+    const minutes = Math.floor(seconds / 60);
+    const remainder = seconds % 60;
+
+    return `${minutes}:${String(remainder).padStart(2, '0')}`;
+};
+
+/**
+ * Coerce a payload of unknown shape (snapshot endpoint or broadcast) into the
+ * component's call shape. Snake_case and camelCase keys are both accepted so a
+ * Laravel resource can be passed through untouched.
+ */
+export const normaliseCall = (raw) => {
+    if (!raw || typeof raw !== 'object') {
+        return null;
+    }
+
+    const callId = raw.callId ?? raw.call_id ?? raw.id;
+
+    if (callId === undefined || callId === null || callId === '') {
+        return null;
+    }
+
+    // The Zoom call queue this rang on. `queueId` keys the pickup-code lookup
+    // and may legitimately be absent; `queueName` is what the badge prints.
+    const rawQueueId = raw.queueId ?? raw.queue_id ?? null;
+    const queueId =
+        rawQueueId === null || rawQueueId === undefined || rawQueueId === ''
+            ? null
+            : String(rawQueueId);
+
+    const rawQueueName = raw.queueName ?? raw.queue_name ?? '';
+    const queueName = String(rawQueueName).trim() || FALLBACK_QUEUE_NAME;
+
+    return {
+        callId: String(callId),
+        queueId,
+        queueName,
+        callerNumber: raw.callerNumber ?? raw.caller_number ?? raw.from ?? '',
+        callerName: raw.callerName ?? raw.caller_name ?? '',
+        client: raw.client ?? null,
+        // Pre-supplied open tasks. Only demo calls carry these; a real call
+        // leaves it null and the expansion fetches the drill-down endpoint.
+        tasks: Array.isArray(raw.tasks) ? raw.tasks : null,
+        startedAt: raw.startedAt ?? raw.started_at ?? new Date().toISOString(),
+        status: 'ringing',
+        isDemo: raw.isDemo === true || raw.is_demo === true,
+        leaving: false,
+    };
+};
+
+/**
+ * Coerce the snapshot's `pickup_codes` block into a plain `{ queueId: code }`
+ * map, dropping anything that is not a non-empty string on both sides. A queue
+ * absent from the map has no code, which is what suppresses its Pick up button.
+ */
+export const normalisePickupCodes = (raw) => {
+    if (!raw || typeof raw !== 'object') {
+        return {};
+    }
+
+    const codes = {};
+
+    Object.keys(raw).forEach((queueId) => {
+        const code = raw[queueId];
+
+        if (queueId !== '' && typeof code === 'string' && code.trim() !== '') {
+            codes[queueId] = code.trim();
+        }
+    });
+
+    return codes;
+};

package/src/components/callQueue/callQueueSettingsHelpers.js

@@ -0,0 +1,75 @@
+/**
+ * Pure helpers for the call-queue settings page.
+ *
+ * Split out of CallQueueSettings.jsx so they can be imported by `node --test`,
+ * which cannot parse JSX. Nothing here touches React or the DOM; the component
+ * re-exports the lot, so its public surface is unchanged.
+ */
+
+/**
+ * Zoom's pickup code rules, mirrored from CallQueueSettingsController so a typo
+ * is caught before the round trip. Returns an error string, or '' when valid.
+ */
+export const validateCode = (value) => {
+    const code = String(value ?? '').trim();
+
+    if (code === '') return '';
+    if (!/^\d{4}$/.test(code)) return 'Must be 4 digits.';
+    if (code[0] === '0') return 'Cannot start with 0.';
+    if (/^(\d)\1{3}$/.test(code)) return 'Cannot repeat one digit.';
+
+    const steps = [1, 2, 3].map((i) => Number(code[i]) - Number(code[i - 1]));
+
+    if (steps.every((s) => s === 1) || steps.every((s) => s === -1)) {
+        return 'Cannot be a sequence.';
+    }
+
+    return '';
+};
+
+/** Digits only — the `*` is the dial prefix, never part of the stored code. */
+export const cleanCode = (value) =>
+    String(value ?? '')
+        .replace(/[^\d]/g, '')
+        .slice(0, 4);
+
+/**
+ * Human AU formatting for the queue's own number, using the same digit logic as
+ * the call pop's formatter (callQueue/CallQueuePop.jsx): a +61 / 61 country code
+ * collapses to a single leading zero, then mobiles read as `04xx xxx xxx` and
+ * landlines as `(0x) xxxx xxxx`. Anything that does not fit a known shape is
+ * handed back untouched rather than mangled.
+ */
+export const formatAuNumber = (value) => {
+    if (!value) return '';
+
+    let digits = String(value).replace(/\D/g, '');
+
+    if (digits.length === 11 && digits.indexOf('61') === 0) {
+        digits = `0${digits.slice(2)}`;
+    }
+
+    if (digits.indexOf('04') === 0) {
+        const mobile = digits.match(/^(\d{4})(\d{3})(\d{3})$/);
+
+        if (mobile) return `${mobile[1]} ${mobile[2]} ${mobile[3]}`;
+    } else if (/^1[38]00/.test(digits) && digits.length === 10) {
+        // 13/1800 service numbers group as 1300 123 456.
+        return `${digits.slice(0, 4)} ${digits.slice(4, 7)} ${digits.slice(7)}`;
+    } else {
+        const landline = digits.match(/^(\d{2})(\d{4})(\d{4})$/);
+
+        if (landline) return `(${landline[1]}) ${landline[2]} ${landline[3]}`;
+    }
+
+    return String(value);
+};
+
+/** Zoom sends the status lower case ("active"); the pill shows it title case. */
+export const titleCase = (value) => {
+    const text = String(value ?? '').trim();
+
+    if (text === '') return 'Unknown';
+
+    return text.charAt(0).toUpperCase() + text.slice(1);
+};

package/src/components/columns/AutoGrowCell.jsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * The measuring wrapper behind a column's `"autoGrow": true`.
+ *
+ * Why it exists
+ * -------------
+ * In tablet mode (and in `large` density generally) the grid runs with a
+ * FIXED `rowHeight` — see the density table in `utils/useDensity.js` and the
+ * comment above `rowHeight={grid.rowHeight}` in `DataGrid.jsx`. A fixed height
+ * is what keeps action buttons from being clipped after an auto-refresh on an
+ * idle tab, because Inovua's alternative (`rowHeight={null}`) measures every
+ * row with a lazily-scheduled rAF, which a background-throttled tab never runs.
+ *
+ * The cost of that trade is that a cell whose content genuinely needs three
+ * lines — a `stageCounter` column with enough chips to wrap twice — gets cut
+ * off at the row's height. `autoGrow` buys back JUST those rows: this wrapper
+ * measures the content's natural height and hands it up, and the grid raises
+ * that ONE row to fit. Every other row keeps the fixed height, so the property
+ * that made the fixed height worth having (no measurement in the common path)
+ * is preserved.
+ *
+ * How the measurement stays honest
+ * --------------------------------
+ * The cell itself is height-clamped (`.InovuaReactDataGrid__cell` gets an
+ * inline `height` from the row's height, and `global-datagrid.css` gives it
+ * `overflow: hidden`), so measuring the CELL would only ever report the clamp
+ * back. This `div` is a plain block inside the cell's content wrapper with no
+ * height of its own, so its `scrollHeight` is the content's natural height
+ * whatever the cell around it is doing.
+ *
+ * The number reported is a ROW height, not a content height: the owning cell's
+ * vertical padding and borders are read off `getComputedStyle` and added, so
+ * the figure tracks `--grid-cell-padding` and the density that sets it instead
+ * of a constant that would drift the moment either changed.
+ *
+ * @param {object}   props
+ * @param {*}        props.rowId     id of the row this cell belongs to; the
+ *                                   key the grid stores the height under.
+ * @param {Function} props.onMeasure `(rowId, heightPx, force) => void`
+ * @param {import('react').ReactNode} props.children the column's own render.
+ */
+const AutoGrowCell = ({ rowId, onMeasure, children }) => {
+    const nodeRef = useRef(null);
+    // Last height handed up, so a ResizeObserver that fires on every column
+    // resize does not re-report a height nothing has changed about.
+    const lastReportedRef = useRef(null);
+
+    useEffect(() => {
+        const node = nodeRef.current;
+
+        if (
+            !node ||
+            rowId === undefined ||
+            rowId === null ||
+            typeof onMeasure !== 'function'
+        ) {
+            return undefined;
+        }
+
+        /**
+         * Padding + borders of the cell this content sits in. Measured rather
+         * than assumed: `--grid-cell-padding` is density-driven and a caller
+         * can override it per grid.
+         */
+        const cellChrome = () => {
+            if (
+                typeof window === 'undefined' ||
+                typeof window.getComputedStyle !== 'function' ||
+                typeof node.closest !== 'function'
+            ) {
+                return 0;
+            }
+
+            const cell = node.closest('.InovuaReactDataGrid__cell');
+
+            if (!cell) {
+                return 0;
+            }
+
+            const cs = window.getComputedStyle(cell);
+            const sum =
+                (parseFloat(cs.paddingTop) || 0) +
+                (parseFloat(cs.paddingBottom) || 0) +
+                (parseFloat(cs.borderTopWidth) || 0) +
+                (parseFloat(cs.borderBottomWidth) || 0);
+
+            return Number.isFinite(sum) ? sum : 0;
+        };
+
+        /**
+         * @param {boolean} force report even when the height has not moved —
+         *        used on mount and whenever the row under this cell changes,
+         *        because the grid keys heights by row index and an unchanged
+         *        height at a NEW index still has to be re-applied.
+         */
+        const report = (force) => {
+            if (!nodeRef.current) {
+                return;
+            }
+
+            const natural = nodeRef.current.scrollHeight || 0;
+
+            if (!natural) {
+                return;
+            }
+
+            const height = Math.ceil(natural + cellChrome());
+            const last = lastReportedRef.current;
+
+            if (!force && last !== null && Math.abs(last - height) <= 1) {
+                return;
+            }
+
+            lastReportedRef.current = height;
+            onMeasure(rowId, height, !!force);
+        };
+
+        report(true);
+
+        // No ResizeObserver (jsdom, older Safari): the mount measurement above
+        // still applies, the cell just will not follow later reflows.
+        if (typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+
+        const observer = new ResizeObserver(() => report(false));
+
+        observer.observe(node);
+
+        return () => observer.disconnect();
+    }, [rowId, onMeasure]);
+
+    return (
+        <div ref={nodeRef} className="autoGrowCell" style={{ width: '100%' }}>
+            {children}
+        </div>
+    );
+};
+
+export default AutoGrowCell;

package/src/components/columns/ColumnRenderers.jsx

@@ -14,6 +14,7 @@ import {
     DEFAULT_INTELLIGENT_SORTING_CONFIG,
 } from '../../utils/relationshipSortingUtils';
 import { formatCellContent } from '../generic/shared/formatters';
+import { arrayCountFrom } from '../utils/displayValue';
 
 // Stage Toggle Utility Functions
 const buildToggleUrl = (urlTemplate, stageItem, rowData) => {
@@ -380,18 +381,63 @@ export const renderDateTimeColumn = ({
     };
 };
 
-// Array Count Column Renderer
+/**
+ * Array Count Column Renderer
+ *
+ * A count is a quantity, and a bare digit in a text column reads as a short
+ * piece of text — it takes a second look to tell "3" the count from "3" the
+ * label. The number goes in a small neutral pill so the eye can pick the
+ * column out and compare rows down it, and an empty list says so with a muted
+ * dash rather than an empty cell (an empty cell is what a column shows when it
+ * has no answer; here we have one — none).
+ *
+ * `arrayCountFrom` is what makes the zero case reachable at all: the old
+ * truthiness check sent `[]`, `"[]"` and a missing field down the same branch,
+ * and `.length` on a JSON string that was never decoded returned the character
+ * count.
+ */
 export const renderArrayCountColumn = ({ column, commonProps }) => {
     return {
         ...commonProps,
         name: `${column.type}.${column.id}`,
-        sortable: true,
+        // Was hard-coded `true`. A count column is derived from a JSON field,
+        // so server-side ordering on it is lexicographic nonsense as often as
+        // not; a config can now turn the header control off. Default unchanged.
+        sortable: column.sortable ?? true,
         render: ({ data }) => {
-            if (data && data[column.id]) {
-                return data[column.id].length;
-            } else {
-                return null;
+            const count = arrayCountFrom(data ? data[column.id] : null);
+
+            if (count === 0) {
+                return (
+                    <span style={{ color: 'var(--muted-color, #6e7276)' }}>
+                        —
+                    </span>
+                );
             }
+
+            return (
+                <span
+                    style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        minWidth: '22px',
+                        height: '20px',
+                        padding: '0 7px',
+                        boxSizing: 'border-box',
+                        borderRadius: '999px',
+                        border: '1px solid var(--border-color, #e1e1e1)',
+                        background: 'var(--hover-color, rgba(0, 0, 0, 0.04))',
+                        color: 'var(--paragraph-color, #221e33)',
+                        fontSize: '0.75rem',
+                        fontWeight: 600,
+                        lineHeight: 1,
+                        fontVariantNumeric: 'tabular-nums',
+                    }}
+                >
+                    {count}
+                </span>
+            );
         },
     };
 };
@@ -2877,7 +2923,7 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpda
                                 rawValue !== null &&
                                 rawValue !== undefined
                             ) {
-                                tooltipContent = `Stage ${i + 1})`;
+                                tooltipContent = `Stage ${i + 1}`;
                             }
                         }