@visns-studio/visns-components 6.6.4 → 6.15.1

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/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}`;
                             }
                         }