Pending Review

Pending Review from User Experience (UX)

Notifications Component

Overview

The Notifications component provides a comprehensive notification management and preferences system for enterprise applications. This solution component combines administrative notification management, user preference configuration, and multi-channel delivery systems to deliver complete notification workflows with provider integration and subscription management.

Core Capabilities

Notification Management System - Complete administrative interface for configuring providers, topics, and notification service management
User Preference Configuration - Self-service notification preferences with channel selection and subscription management capabilities
Multi-Provider Integration - Support for various notification providers including SMTP, Mailgun, AWS SES, Twilio, Slack, and PagerDuty
Channel and Topic Management - Comprehensive management of communication channels (Email, SMS, Chat) and notification topics
Context-Driven Architecture - Separate contexts for management and preferences with centralized state management patterns
Subscription and Rules Engine - Advanced subscription management with filter rules, schedule rules, and delivery optimization

When to use Notifications:

Enterprise Communication Systems - Applications requiring sophisticated notification management with multiple delivery channels and providers
Multi-Tenant Platforms - SaaS applications needing tenant-specific notification configuration and user preference management
Administrative Dashboards - Management interfaces for configuring notification providers, topics, and system-wide communication settings
User Preference Centers - Self-service interfaces allowing users to manage their notification subscriptions and delivery preferences

When not to use Notifications:

Simple Alert Systems - Use basic toast or alert components for straightforward application notifications without complex management
Static Notifications - Consider simpler patterns for applications with fixed notification requirements that don't need user customization
Development Environments - Use mock notification systems for development and testing scenarios without full production complexity

Basic Implementation

React 18React 19+AngularPure JavaScript

import React, { useState } from 'react';
import { PwcNotifications } from '@progress-i360/pwc-react';

function NotificationPreferences() {
  const [preferences, setPreferences] = useState({
    emailEnabled: true,
    smsEnabled: false
  });

  const handlePreferenceChange = (type: string, enabled: boolean) => {
    setPreferences(prev => ({ ...prev, [type]: enabled }));
  };

  return (
      <PwcNotifications
        baseApiUrl="/api/v1/notifications"
        preferences={preferences}
        onPreferenceChange={handlePreferenceChange}
      />
  );
}

import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
import '@progress-i360/progress-web-components/notifications';

function NotificationManagement() {
  const [managementState, setManagementState] = useState({
    providers: ['email', 'sms'],
    activeProvider: 'email'
  });

  const deferredState = useDeferredValue(managementState);
  const { providers, activeProvider } = deferredState;
  const notificationsRef = useRef<(HTMLElement & { providers: string[]; activeProvider: string }) | null>(null);

  const handleProviderChange = useCallback((event: CustomEvent<{ provider: string }>) => {
    setManagementState(prev => ({ ...prev, activeProvider: event.detail.provider }));
  }, []);

  useEffect(() => {
    if (notificationsRef.current) {
      notificationsRef.current.providers = providers;
      notificationsRef.current.activeProvider = activeProvider;
    }
  }, [providers, activeProvider]);

  return (
      <pwc-notifications
        ref={notificationsRef}
        base-api-url="/api/v1/notifications"
        onPwcProviderChange={handleProviderChange}
      ></pwc-notifications>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/notifications";
import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'notifications-demo',
  template: `
    <pwc-notifications></pwc-notifications>
    <pwc-action-bar heading="Notifications" [rowCount]="notificationCount">
      <pwc-button slot="actions" label="Send Notification" variant="primary" (pwc-click)="sendNotification()"></pwc-button>
    </pwc-action-bar>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NotificationsDemo {
  notificationCount = 5;

  sendNotification() {
    this.notificationCount++;
  }
}

const management = document.createElement('pwc-notification-management');
management.setAttribute('base-api-url', '/api/v1/notifications');

const preferences = document.createElement('pwc-notification-preferences');
preferences.setAttribute('base-api-url', '/api/v1/notifications');

// Provider testing workflow
management.addEventListener('pwc-provider-test', async (event) => {
  const providerId = event.detail.providerId;
  console.log('Testing notification provider:', providerId);

  const testResult = await fetch(`/api/v1/notifications/provider/${providerId}/test/verify`, {
    method: 'POST'
  });

  if (testResult.ok) {
    console.log('Provider test successful');
  }
});

// Provider enable/disable management
management.addEventListener('pwc-provider-toggle', async (event) => {
  const { providerId, enabled } = event.detail;
  const endpoint = enabled ? 'enable' : 'disable';

  await fetch(`/api/v1/notifications/provider/${providerId}/${endpoint}`, {
    method: 'PATCH'
  });

  console.log(`Provider ${enabled ? 'enabled' : 'disabled'} successfully`);
});

document.body.appendChild(management);
document.body.appendChild(preferences);

Usage Patterns

Administrative Notification Management - Complete provider configuration, topic management, and system-wide notification service administration
User Preference Self-Service - Individual user control over notification subscriptions, channel preferences, and delivery schedules
Multi-Channel Delivery Configuration - Setup and management of various communication channels including email, SMS, chat, and system integrations
Enterprise Integration Workflows - Integration with external notification providers and enterprise communication systems with API-driven configuration

Best Practices

Content Strategy Guidelines

Clear Channel Organization - Structure notification channels logically with clear naming conventions and consistent provider groupings
User-Friendly Preferences - Present subscription options clearly with helpful descriptions and visual indicators for notification types
Provider Configuration Clarity - Use descriptive labels and validation messages that guide administrators through complex provider setup processes
Subscription Management Transparency - Provide clear feedback on subscription changes and delivery preferences with confirmation messaging

Performance Optimization

Efficient API Client Management - Implement proper API client initialization and reuse patterns across notification management components
Context State Optimization - Use separate management and preferences contexts to minimize unnecessary re-renders and state conflicts
Lazy Loading Strategies - Load provider configurations and user preferences only when needed to improve initial application performance
Batch Operations Support - Implement bulk operations for subscription management and provider configuration to reduce API overhead

Integration Architecture

Modular Component Design - Structure notification components (management, preferences, channels, topics) as independent, reusable modules
Context-Driven State Management - Leverage separate contexts for management and preferences workflows with proper data isolation
API Abstraction Layer - Implement clean notification API client with proper error handling, retry logic, and response validation
Provider Integration Framework - Design flexible provider integration patterns that support multiple notification service vendors

Common Use Cases

Data Table Headers

Provider Management Tables - Administrative tables showing notification providers with status, configuration, and performance metrics
Subscription Management Views - User subscription tables with topic names, channel selections, and active/inactive status indicators
Topic Administration Interface - Management tables for notification topics with rules, subscriptions, and delivery statistics

Search Result Sections

Provider Discovery - Search across available notification providers by type, status, and configuration parameters
Subscription Filtering - Filter user subscriptions by topic type, channel preference, and activity status for easy management
Topic Search Interface - Search notification topics by category, rules, and subscriber count for administrative oversight

Notification Metrics - Dashboard widgets showing delivery success rates, provider performance, and subscription activity statistics
System Health Monitoring - Real-time widgets displaying notification service status, provider connectivity, and delivery queue metrics
User Engagement Analytics - Overview widgets showing subscription trends, channel preferences, and notification interaction rates

Troubleshooting

Common Issues

Actions Not Triggering

Problem: Notification management actions (provider setup, subscription changes) don't respond or fail to execute properly

Solutions:

Verify that management and preferences contexts are properly provided and consumed by notification components
Check that API endpoints are correctly configured with baseApiUrl and notification service is accessible
Ensure that form submission handlers and wizard workflows are properly bound to context methods

Actions Not Visible

Problem: Provider options, subscription settings, or management interfaces don't appear correctly

Solutions:

Confirm that notification API is responding correctly and returning expected provider and topic configurations
Check that user permissions allow access to notification management and preference features
Verify that notification components are properly imported and registered in the application bundle

Layout Issues

Problem: Notification interface doesn't display correctly or has responsive layout problems across different screen sizes

Solutions:

Ensure that required CSS styles and design tokens are properly loaded for notification management components
Check that wizard layouts and form containers have appropriate responsive breakpoint handling
Verify that table and summary views have proper flex layout configurations for different viewport sizes

Icon Problems

Problem: Provider icons, notification type indicators, or status icons don't display correctly in management interfaces

Solutions:

Confirm that icon fonts and provider-specific branding assets are properly bundled and available
Check that notification type configurations include correct icon keys and display names
Verify that status indicators and delivery state icons have proper mappings matching the design system standards

Implementation Support

Framework Integration - Complete examples and integration guides for React, Angular, and vanilla JavaScript implementations
Context Architecture Support - Comprehensive patterns for using management and preferences contexts in notification workflows
API Integration Documentation - Full notification service API integration including provider configuration and subscription management

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.

Notifications Component

Overview

Core Capabilities

Basic Implementation

Usage Patterns

Best Practices

Content Strategy Guidelines

Performance Optimization

Integration Architecture

Common Use Cases

Data Table Headers

Search Result Sections

Dashboard Widget Headers

Troubleshooting

Common Issues

Actions Not Triggering

Actions Not Visible

Layout Issues

Icon Problems

Implementation Support

Resources

Storybook Documentation