Developer Docs

Alerts & Notifications

Real-time feedback systems that keep users informed about orders, session state, and platform events.

Features Overview

Feature Component / Store Status
Toast Notifications toastStore.svelte.ts ✅
Session Expiry Warning SessionWarningModal.svelte ✅
Rate Limit Feedback toastStore.rateLimited() ✅
Notification Center NotificationCenter.svelte ✅
Notification Store notificationStore.svelte.ts ✅
Notifications Page /notifications ✅
Activity Monitor activityMonitor.ts ✅

Toast Store

The toast system uses Svelte 5 runes for reactive state management. Toasts support multiple types and automatic dismissal.

Key Files

File Purpose
src/stores/toastStore.svelte.ts Runes-based toast state
src/lib/components/ToastContainer.svelte Toast rendering & positioning
tests/toastStore.test.ts Toast store unit tests

Toast Types

type ToastType = 'success' | 'error' | 'warning' | 'info';

// Usage
toastStore.success('Order placed!');
toastStore.error('Payment failed');
toastStore.warning('Stock running low');
toastStore.info('New features available');

Deduplication

The toast store has built-in deduplication for session-related events:

// Session expiry — shows once per session
toastStore.sessionExpired();

// Rate limiting — shows once, resets after cooldown
toastStore.rateLimited();

Session Warning Modal

Warns users when their session is about to expire, giving them the option to extend or logout.

Key Files

File Purpose
src/lib/components/SessionWarningModal.svelte Modal UI + countdown
src/stores/activityMonitor.ts Tab activity tracking

Rate Limit Feedback

When the API gateway returns HTTP 429 (Too Many Requests), the GraphQL client's responseMiddleware triggers a deduplicated toast notification.

Implementation

// In src/lib/client.ts responseMiddleware
if (response.status === 429) {
	toastStore.rateLimited();
}

The rateLimited() method ensures only one rate-limit toast appears per cooldown period, preventing toast spam during burst scenarios.

Notification Center

The notification center aggregates order updates, system alerts, and merchant communications.

Key Files

File Purpose
src/lib/components/NotificationCenter.svelte Dropdown UI with badge + category
src/stores/notificationStore.svelte.ts Production GraphQL polling (30s)
src/lib/queries/notifications.ts GraphQL queries & mutations
src/routes/notifications/+page.svelte Full notifications page

The notification store polls the alerts subgraph (myAlertLogs) every 30 seconds for IN_APP notifications. It supports:

  • Category filtering — Organization, Orders, Community, System
  • Mark as read — Individual or bulk mark-all-read
  • Dismiss — Remove individual notifications
  • Unread badge — Real-time count displayed on the bell icon
query MyAlertLogs($filter: AlertLogFilterInput) {
	myAlertLogs(filter: $filter) {
		id
		channel
		status
		subject
		eventType
		payload
		createdAt
	}
}

Activity Monitor

Tracks user activity across tabs to manage session timeouts and prevent premature logouts during active usage.

Key Files

File Purpose
src/stores/activityMonitor.ts Cross-tab activity tracking
tests/activityFeed.test.ts Activity feed tests