@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/Notification.jsx

@@ -3,10 +3,36 @@ import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Bell, X, Check } from 'lucide-react';
+import { Bell, X, Check, Monitor } from 'lucide-react';
 import CustomFetch from './Fetch';
+import {
+    getPermission,
+    isEnabled as desktopAlertsEnabled,
+    isSupported as desktopAlertsSupported,
+    notify as desktopNotify,
+    requestPermission as requestDesktopPermission,
+    setEnabled as setDesktopAlertsEnabled,
+} from './notify/desktopNotifications';
+// Pure subscription bookkeeping. It lives under sms/ because that is where it
+// was written, but there is nothing messaging-specific in it — importing it
+// keeps one implementation of "has this channel actually been authorised?".
+import { subscriptionMonitor } from './sms/smsLiveState';
 import styles from './styles/Notification.module.scss';
 
+/**
+ * The event Laravel broadcasts a notification as, and what Echo's
+ * `.notification()` helper binds to. Named here so the fallback path below can
+ * unbind it explicitly.
+ */
+const BROADCAST_EVENT = '.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated';
+
+/** Polling, with and without a confirmed websocket. */
+const POLL_INTERVAL = 60000;
+const LIVE_POLL_INTERVAL = 300000;
+
+/** The bold line on a desktop alert. */
+const ALERT_TITLE = 'Throughlife';
+
 // Helper function to sanitize HTML content and remove unwanted styling from anchor tags
 const sanitizeHtml = (html) => {
     if (!html) return '';
@@ -47,6 +73,26 @@ const sanitizeHtml = (html) => {
     return tempDiv.innerHTML;
 };
 
+/**
+ * A label with its markup taken off, for the desktop toast.
+ *
+ * Notification labels are stored as HTML (the bell parses them), and the OS
+ * toast renders text — so "<b>New task</b>" would otherwise appear verbatim.
+ */
+const plainText = (html) => {
+    if (!html) return '';
+
+    if (typeof document === 'undefined') {
+        return String(html).replace(/<[^>]*>/g, '').trim();
+    }
+
+    const holder = document.createElement('div');
+
+    holder.innerHTML = String(html);
+
+    return (holder.textContent || '').replace(/\s+/g, ' ').trim();
+};
+
 function Notification(props) {
     const navigate = useNavigate();
     const wrapperRef = useRef(null);
@@ -54,7 +100,22 @@ function Notification(props) {
     const [show, setShow] = useState(false);
     const [loading, setLoading] = useState(false);
     const [processingIds, setProcessingIds] = useState([]);
-    const { setSystemAuth } = props;
+    const { setSystemAuth, echo = null, channel = null } = props;
+
+    // Live means *confirmed*: Echo hands back a channel object long before
+    // /broadcasting/auth has approved it, and treating that as live is how a
+    // bell ends up subscribed to nothing and polling every five minutes.
+    const [live, setLive] = useState(false);
+    const [alertsOn, setAlertsOn] = useState(() => desktopAlertsEnabled());
+    const [permission, setPermission] = useState(() => getPermission());
+
+    const alertsSupported = desktopAlertsSupported();
+
+    // Read through refs so a consumer passing inline arrows — `echo={() =>
+    // getEcho()}` is the normal way to write it — does not tear the
+    // subscription down on every render. Only the channel name does that.
+    const echoRef = useRef(echo);
+    echoRef.current = echo;
 
     const fetchNotification = useCallback(() => {
         setLoading(true);
@@ -184,26 +245,191 @@ function Notification(props) {
         setShow(false);
     }, [navigate]);
 
+    /**
+     * One notification, straight off the websocket.
+     *
+     * The payload is App\Notifications\SystemAlert::toBroadcast() — the same
+     * id the database row was written under, so a live item and a polled one
+     * are interchangeable and "mark as read" works on either.
+     */
+    const handleBroadcast = useCallback(
+        (payload) => {
+            const label = payload?.label;
+
+            if (!label) return;
+
+            const id = payload.id ?? `live-${Date.now()}`;
+            const url = payload.url ?? null;
+
+            setItems((prev) => {
+                // Pusher can redeliver, and a poll may have raced us here.
+                if (prev.some((item) => item.id === id)) return prev;
+
+                return [
+                    {
+                        id,
+                        data: { label, url },
+                        read_at: null,
+                        created_at: payload.created_at ?? new Date().toISOString(),
+                    },
+                    ...prev,
+                ];
+            });
+
+            desktopNotify({
+                title: ALERT_TITLE,
+                body: plainText(label),
+                tag: `notification-${id}`,
+                url,
+                navigate,
+            });
+        },
+        [navigate]
+    );
+
+    const broadcastRef = useRef(handleBroadcast);
+    broadcastRef.current = handleBroadcast;
+
+    /**
+     * Subscribe to this user's private channel, when the consumer named one.
+     *
+     * `channel` is deliberately allowed to be null — a build with no
+     * VITE_APP_ENV cannot know whether it is dev or production, and dev and
+     * production share one Pusher app. Guessing there would put a developer's
+     * browser on the production channel; polling is the safe answer.
+     */
     useEffect(() => {
-        fetchNotification();
+        if (!channel || typeof window === 'undefined') {
+            setLive(false);
+
+            return undefined;
+        }
+
+        const source = echoRef.current;
+        const instance = typeof source === 'function' ? source() : source;
+
+        if (!instance || typeof instance.private !== 'function') {
+            setLive(false);
+
+            return undefined;
+        }
+
+        let subscription;
+
+        try {
+            subscription = instance.private(channel);
+        } catch (error) {
+            setLive(false);
+
+            return undefined;
+        }
+
+        if (!subscription) {
+            setLive(false);
 
-        const interval = setInterval(() => {
-            if (!document.hidden) {
-                fetchNotification();
+            return undefined;
+        }
+
+        const handler = (payload) => broadcastRef.current?.(payload || {});
+
+        try {
+            // Echo's own helper for Laravel's broadcast notifications; the
+            // raw `listen` is the fallback for anything hand-rolled.
+            if (typeof subscription.notification === 'function') {
+                subscription.notification(handler);
+            } else {
+                subscription.listen(BROADCAST_EVENT, handler);
             }
-        }, 60000);
+        } catch (error) {
+            setLive(false);
+
+            return undefined;
+        }
+
+        const stopMonitoring = subscriptionMonitor(subscription, {
+            onSuccess: () => setLive(true),
+            onError: () => setLive(false),
+        });
+
+        return () => {
+            setLive(false);
+            stopMonitoring();
+
+            try {
+                subscription.stopListening?.(BROADCAST_EVENT);
+                instance.leave(channel);
+            } catch (error) {
+                // Nothing to clean up.
+            }
+        };
+    }, [channel]);
+
+    /**
+     * The fallback, and the safety net.
+     *
+     * Off the websocket this is the only thing keeping the bell current, so it
+     * runs every minute. Once a channel confirms it drops to five — slow
+     * enough to be free, quick enough that a dropped event is invisible.
+     */
+    useEffect(() => {
+        fetchNotification();
+
+        const interval = setInterval(
+            () => {
+                if (!document.hidden) {
+                    fetchNotification();
+                }
+            },
+            live ? LIVE_POLL_INTERVAL : POLL_INTERVAL
+        );
 
+        return () => clearInterval(interval);
+    }, [fetchNotification, live]);
+
+    useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside, false);
 
         return function cleanup() {
-            clearInterval(interval);
             document.removeEventListener(
                 'mousedown',
                 handleClickOutside,
                 false
             );
         };
-    }, [fetchNotification, handleClickOutside]);
+    }, [handleClickOutside]);
+
+    /**
+     * The switch at the foot of the dropdown.
+     *
+     * Turning it on for the first time is what asks the browser for
+     * permission — the prompt only appears inside a user gesture, which is why
+     * this cannot be done on mount. A refusal leaves the switch off and the
+     * row explains itself; the browser will not ask twice.
+     */
+    const toggleDesktopAlerts = useCallback(() => {
+        if (alertsOn) {
+            setDesktopAlertsEnabled(false);
+            setAlertsOn(false);
+
+            return;
+        }
+
+        if (getPermission() === 'granted') {
+            setDesktopAlertsEnabled(true);
+            setAlertsOn(true);
+
+            return;
+        }
+
+        requestDesktopPermission().then((result) => {
+            setPermission(result);
+
+            if (result !== 'granted') return;
+
+            setDesktopAlertsEnabled(true);
+            setAlertsOn(true);
+        });
+    }, [alertsOn]);
 
     const formatTimeAgo = (date) => {
         const now = moment();
@@ -225,6 +451,7 @@ function Notification(props) {
                 className={styles.notificationTrigger}
                 onClick={toggleNotification}
                 data-tooltip-id="system-tooltip"
+                data-tooltip-place="bottom"
                 data-tooltip-content="Notifications"
                 aria-label="Notifications"
             >
@@ -331,6 +558,49 @@ function Notification(props) {
                             )}
                         </div>
 
+                        {alertsSupported && (
+                            <div className={styles.alertsRow}>
+                                <span className={styles.alertsLabel}>
+                                    <Monitor
+                                        size={14}
+                                        strokeWidth={2}
+                                        aria-hidden="true"
+                                    />
+                                    Desktop alerts
+                                </span>
+
+                                {permission === 'denied' ? (
+                                    <span className={styles.alertsBlocked}>
+                                        Blocked in browser settings
+                                    </span>
+                                ) : (
+                                    <button
+                                        type="button"
+                                        className={[
+                                            styles.toggle,
+                                            alertsOn ? styles.toggleOn : '',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ')}
+                                        onClick={toggleDesktopAlerts}
+                                        role="switch"
+                                        aria-checked={alertsOn}
+                                        aria-label="Desktop alerts"
+                                    >
+                                        <span
+                                            className={styles.toggleTrack}
+                                            aria-hidden="true"
+                                        >
+                                            <span
+                                                className={styles.toggleKnob}
+                                            />
+                                        </span>
+                                        {alertsOn ? 'On' : 'Off'}
+                                    </button>
+                                )}
+                            </div>
+                        )}
+
                         <div className={styles.notiboxActions}>
                             <button
                                 className={styles.viewAllBtn}

package/src/components/TableFilter.jsx

@@ -9,6 +9,15 @@ function TableFilter({
     type,
     onFilterChange,
     tabs,
+    // `variant="underline"` lays the rail out as a horizontal tab strip with
+    // an accent edge under the selected tab, at every width — the same
+    // treatment narrow viewports already get for a flat rail (see the
+    // `.flatFilter` block in the stylesheet), promoted to an opt-in.
+    //
+    // A vertical rail spends a fifth of the page on navigation, which pays for
+    // itself at seven tabs and does not at two. Pages say which they are; the
+    // default is unchanged.
+    variant,
 }) {
     const [visibleChildren, setVisibleChildren] = useState({});
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -661,11 +670,15 @@ function TableFilter({
         }
     }, [isFlatStrip, activeId]);
 
+    // Gated on `isFlatStrip`: the strip is one row of tabs, and a rail with
+    // expandable parents has no single row to lay out.
+    const isUnderline = variant === 'underline' && isFlatStrip;
+
     return (
         <div
             className={`${styles.tableFilterContainer} ${
                 isFlatStrip ? styles.flatFilter : ''
-            }`}
+            } ${isUnderline ? styles.underlineFilter : ''}`}
         >
             {!isFlatStrip && (
                 <div className={styles.mobileToggle} onClick={toggleMobileMenu}>

package/src/components/auth/AuthBrandPanel.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+/**
+ * The brand side of a two-pane auth screen.
+ *
+ * Markup counterpart to the `auth-brand-panel` mixin in
+ * styles/_authBrandPanel.scss — the staff Login, the shared AuthShell and the
+ * client portal's split layout all render exactly this, and each supplies its
+ * own CSS module (the class names are identical because they all include that
+ * one mixin).
+ *
+ * `aria-hidden` is deliberate and applies to every consumer: everything this
+ * panel says is said again, in words, by the form beside it. A screen reader
+ * announcing the brand line twice before reaching the first field is worse
+ * than not announcing the photograph at all.
+ *
+ * Renders the `<aside>` unconditionally, even with nothing to put in it — it is
+ * a layout column, and a grid with a missing child is a broken screen rather
+ * than a tidier one. Only the ink block is conditional.
+ */
+const AuthBrandPanel = ({ styles, loginBg, branding = {} }) => (
+    <aside
+        className={styles.brand}
+        style={loginBg ? { backgroundImage: `url(${loginBg})` } : undefined}
+        aria-hidden="true"
+    >
+        {(branding.eyebrow || branding.name || branding.tagline) && (
+            <div className={styles.brandInk}>
+                {branding.eyebrow && (
+                    <p className={styles.eyebrow}>{branding.eyebrow}</p>
+                )}
+                {branding.name && (
+                    <p className={styles.brandLine}>{branding.name}</p>
+                )}
+                {branding.tagline && (
+                    <p className={styles.brandSub}>{branding.tagline}</p>
+                )}
+            </div>
+        )}
+    </aside>
+);
+
+export default AuthBrandPanel;

package/src/components/auth/AuthLoading.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+/**
+ * The please-wait curtain.
+ *
+ * Shown while the profile check is in flight, and — since 6.8.1 — for the
+ * whole of any transition that ends in the browser unloading the page.
+ * Rendering null through either of those leaves a blank white screen, or worse,
+ * a screen that still looks interactive while nothing on it will respond.
+ *
+ * Lived inside GenericAuth until the auth screens needed it too. Extracted
+ * verbatim rather than reimplemented, so the curtain a screen raises for itself
+ * and the one GenericAuth raises over it are the same object: when both are up
+ * at once — which is exactly what happens on a successful 2FA hand-off — there
+ * is nothing to see between them.
+ *
+ * Self-contained on purpose: a SMIL animation, no stylesheet dependency, and
+ * the consuming app's design tokens with neutral fallbacks. It has to be able
+ * to render when the page it covers has not finished loading its CSS.
+ */
+const AuthLoading = ({ label }) => (
+    <div
+        role="status"
+        aria-label="Loading"
+        aria-live="polite"
+        style={{
+            position: 'fixed',
+            inset: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--bg-color, #f4f4f5)',
+            // Above every app surface — this is a curtain, not a page.
+            zIndex: 2000,
+        }}
+    >
+        <svg width="42" height="42" viewBox="0 0 42 42" fill="none">
+            <circle
+                cx="21"
+                cy="21"
+                r="18"
+                stroke="var(--border-color, #dfe3eb)"
+                strokeWidth="4"
+            />
+            <path
+                d="M39 21a18 18 0 0 0-18-18"
+                stroke="var(--primary-color, #52525b)"
+                strokeWidth="4"
+                strokeLinecap="round"
+            >
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 21 21"
+                    to="360 21 21"
+                    dur="0.9s"
+                    repeatCount="indefinite"
+                />
+            </path>
+        </svg>
+        {label ? (
+            <p
+                style={{
+                    margin: 0,
+                    fontFamily: 'var(--font-family, inherit)',
+                    fontSize: 'var(--font-size-md, 0.9375rem)',
+                    color: 'var(--paragraph-color, #52525b)',
+                }}
+            >
+                {label}
+            </p>
+        ) : null}
+    </div>
+);
+
+export default AuthLoading;

package/src/components/auth/AuthShell.jsx

@@ -0,0 +1,59 @@
+/**
+ * The two-pane frame every staff auth screen sits in.
+ *
+ * Login.jsx keeps its own copy of this markup — it is the screen the design was
+ * drawn for and it has an SSO disclosure the others do not — but TwoFactorAuth,
+ * Reset and Verify all render the same frame around different contents, so it
+ * lives here rather than three times over.
+ *
+ * The styles come from the caller: each screen owns its own CSS module (they
+ * all `@include auth-shell` from styles/_authShell.scss, so the class names are
+ * identical) and passes it in as `styles`. That keeps the module scoping intact
+ * while the markup stays in one place.
+ */
+
+import React from 'react';
+
+import AuthBrandPanel from './AuthBrandPanel';
+
+const AuthShell = ({
+    styles,
+    logo,
+    loginBg,
+    branding = {},
+    title,
+    subtitle,
+    children,
+    footer,
+}) => (
+    <div className={styles.auth}>
+        <AuthBrandPanel
+            styles={styles}
+            loginBg={loginBg}
+            branding={branding}
+        />
+
+        <main className={styles.panel}>
+            <div className={styles.panelInner}>
+                {logo ? (
+                    <img
+                        src={logo}
+                        alt={branding.name || 'Logo'}
+                        className={styles.logo}
+                    />
+                ) : null}
+
+                {title ? <h1 className={styles.title}>{title}</h1> : null}
+                {subtitle ? (
+                    <p className={styles.subtitle}>{subtitle}</p>
+                ) : null}
+
+                {children}
+
+                {footer ? <p className={styles.foot}>{footer}</p> : null}
+            </div>
+        </main>
+    </div>
+);
+
+export default AuthShell;