@ews-admin/global-design-system 1.29.0 → 1.30.0

package/src/hooks/useIdleLock.ts

@@ -0,0 +1,181 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseIdleLockOptions {
+  /** Inactivity delay before locking. Default 3 minutes. */
+  timeoutMs?: number;
+  /** Called each time the screen becomes locked (idle, `lock()` or another tab). */
+  onLock?: () => void;
+  /** localStorage key of the locked flag, also the BroadcastChannel name. */
+  storageKey?: string;
+  /** Turns the inactivity timer off (e.g. until the session is loaded). Default true. */
+  enabled?: boolean;
+}
+
+export interface UseIdleLockResult {
+  locked: boolean;
+  lock: () => void;
+  unlock: () => void;
+}
+
+const DEFAULT_TIMEOUT_MS = 180_000;
+const DEFAULT_STORAGE_KEY = "ews-idle-lock";
+const ACTIVITY_WRITE_INTERVAL_MS = 5_000;
+const ACTIVITY_EVENTS = [
+  "pointerdown",
+  "pointermove",
+  "keydown",
+  "wheel",
+  "scroll",
+  "touchstart",
+] as const;
+
+const readStorage = (key: string): string | null => {
+  try {
+    return typeof window === "undefined" ? null : window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+
+const writeStorage = (key: string, value: string | null) => {
+  try {
+    if (typeof window === "undefined") return;
+    if (value === null) window.localStorage.removeItem(key);
+    else window.localStorage.setItem(key, value);
+  } catch {
+    // Storage unavailable (private mode, quota): the lock still works in this tab.
+  }
+};
+
+/**
+ * Locks the screen after `timeoutMs` without user activity. The locked flag is
+ * kept in localStorage (it survives a reload) and shared between tabs through
+ * a BroadcastChannel, or the `storage` event where BroadcastChannel is missing:
+ * locking or unlocking one tab does the same in every tab. Activity in any tab
+ * keeps every tab unlocked.
+ */
+export function useIdleLock({
+  timeoutMs = DEFAULT_TIMEOUT_MS,
+  onLock,
+  storageKey = DEFAULT_STORAGE_KEY,
+  enabled = true,
+}: UseIdleLockOptions = {}): UseIdleLockResult {
+  const activityKey = `${storageKey}:activity`;
+  const [locked, setLocked] = useState(() => readStorage(storageKey) === "1");
+  const lockedRef = useRef(locked);
+  const onLockRef = useRef(onLock);
+  const lastActivity = useRef(Date.now());
+  const lastActivityWrite = useRef(0);
+  const channelRef = useRef<{ postMessage: (message: string) => void } | null>(
+    null,
+  );
+
+  useEffect(() => {
+    onLockRef.current = onLock;
+  }, [onLock]);
+
+  const markActivity = useCallback(
+    (now: number) => {
+      lastActivity.current = now;
+      if (now - lastActivityWrite.current >= ACTIVITY_WRITE_INTERVAL_MS) {
+        lastActivityWrite.current = now;
+        writeStorage(activityKey, String(now));
+      }
+    },
+    [activityKey],
+  );
+
+  const applyLocked = useCallback((next: boolean) => {
+    if (lockedRef.current === next) return;
+    lockedRef.current = next;
+    setLocked(next);
+    if (next) onLockRef.current?.();
+  }, []);
+
+  const lock = useCallback(() => {
+    if (lockedRef.current) return;
+    writeStorage(storageKey, "1");
+    channelRef.current?.postMessage("lock");
+    applyLocked(true);
+  }, [storageKey, applyLocked]);
+
+  const unlock = useCallback(() => {
+    lastActivityWrite.current = 0;
+    markActivity(Date.now());
+    writeStorage(storageKey, null);
+    channelRef.current?.postMessage("unlock");
+    applyLocked(false);
+  }, [storageKey, applyLocked, markActivity]);
+
+  // Cross-tab sync.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onRemote = (nextLocked: boolean) => {
+      if (!nextLocked) lastActivity.current = Date.now();
+      applyLocked(nextLocked);
+    };
+
+    if (typeof window.BroadcastChannel === "function") {
+      const channel = new window.BroadcastChannel(storageKey);
+      channelRef.current = channel;
+      channel.onmessage = (event: MessageEvent) => {
+        if (event.data === "lock") onRemote(true);
+        else if (event.data === "unlock") onRemote(false);
+      };
+      return () => {
+        channelRef.current = null;
+        channel.close();
+      };
+    }
+
+    const onStorage = (event: StorageEvent) => {
+      if (event.key !== storageKey) return;
+      onRemote(event.newValue === "1");
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [storageKey, applyLocked]);
+
+  // Inactivity timer.
+  useEffect(() => {
+    if (!enabled || locked || typeof window === "undefined") return;
+    lastActivity.current = Date.now();
+    let timer: ReturnType<typeof setTimeout>;
+
+    const idleFor = () => {
+      const shared = Number(readStorage(activityKey)) || 0;
+      return Date.now() - Math.max(lastActivity.current, shared);
+    };
+
+    const check = () => {
+      const idle = idleFor();
+      if (idle >= timeoutMs) lock();
+      else timer = setTimeout(check, timeoutMs - idle);
+    };
+
+    const onActivity = () => markActivity(Date.now());
+
+    // Timers are throttled in background tabs: check the delay on return.
+    const onVisibility = () => {
+      if (document.visibilityState !== "visible") return;
+      if (idleFor() >= timeoutMs) lock();
+      else onActivity();
+    };
+
+    timer = setTimeout(check, timeoutMs);
+    ACTIVITY_EVENTS.forEach((name) =>
+      document.addEventListener(name, onActivity, { capture: true, passive: true }),
+    );
+    document.addEventListener("visibilitychange", onVisibility);
+
+    return () => {
+      clearTimeout(timer);
+      ACTIVITY_EVENTS.forEach((name) =>
+        document.removeEventListener(name, onActivity, { capture: true }),
+      );
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [enabled, locked, timeoutMs, activityKey, lock, markActivity]);
+
+  return { locked, lock, unlock };
+}

package/src/index.ts

@@ -55,6 +55,16 @@ export type { PaymentDueBannerProps } from "./components/PaymentDueBanner";
 export { SecureLoader } from "./components/SecureLoader";
 export type { SecureLoaderProps } from "./components/SecureLoader";
 
+export { PinPad } from "./components/PinPad";
+export type { PinPadProps } from "./components/PinPad";
+
+export { LockScreen } from "./components/LockScreen";
+export type {
+  LockScreenMode,
+  LockScreenProps,
+  LockScreenTexts,
+} from "./components/LockScreen";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";
@@ -95,8 +105,17 @@ export type {
 } from "./utils";
 
 // Hooks
-export { useDebounce, useDebouncedCallback, useSelectField } from "./hooks";
-export type { UseSelectFieldProps } from "./hooks";
+export {
+  useDebounce,
+  useDebouncedCallback,
+  useIdleLock,
+  useSelectField,
+} from "./hooks";
+export type {
+  UseIdleLockOptions,
+  UseIdleLockResult,
+  UseSelectFieldProps,
+} from "./hooks";
 
 // Theme
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider";

package/tailwind.preset.js

@@ -135,6 +135,17 @@ module.exports = {
         large:
           "0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05)",
       },
+      // PinPad: wrong PIN feedback
+      keyframes: {
+        "pin-shake": {
+          "0%, 100%": { transform: "translateX(0)" },
+          "20%, 60%": { transform: "translateX(-8px)" },
+          "40%, 80%": { transform: "translateX(8px)" },
+        },
+      },
+      animation: {
+        "pin-shake": "pin-shake 0.4s ease-in-out",
+      },
     },
   },
   plugins: [