one.md

Notification Form Component

A React modal form for creating and editing notification preferences for alerts and reports.

Structure and Flow

• ✅ Create and edit notifications through a modal interface
• ✅ Configure notification type, timing, and delivery methods
• ✅ Select custom views for targeted notifications
• ✅ Choose between daily and weekly scheduling
• ✅ Set up Slack channel and email delivery
• ✅ Form validation using react-hook-form and Zod

Core Features

• Multiple notification types (digest report, new cases, PSV alerts)
• Daily or weekly scheduling with timezone support
• Slack and email delivery methods
• Custom view selection for filtering

Edge Cases

Form Validation Failures

If (no delivery method selected)

• Show validation errors under both Slack and email fields
• Error message: "Either Slack channel or email is required"
• Submit button disabled

If (invalid email format)

• Show validation error highlighting invalid addresses
• Error message: "Invalid email format: [invalid_emails]"
• Submit button disabled
• Handle multiple comma-separated emails independently

If (weekly schedule selected)

• Require at least one day selection
• Show validation error if no days selected
• Time selection becomes mandatory
• Submit button disabled until valid

If (custom views required)

• Show validation error for missing view selection
• Exception: PSV alerts don't require view selection
• Submit button disabled
• Clear error when valid selection made

API Interactions

If (form submission fails)

• Keep modal open
• Preserve form values
• Show error toast: "Failed to create/update notification"
• Enable retry attempt

If (slack channels fail to load)

• Show empty state in channel selector
• Keep email input as fallback
• Allow form submission with email only
• Show loading state during retry

If (filter presets fail to load)

• Disable custom view selection
• Show error state in dropdown
• Block submission for types requiring views
• Provide refresh option

User Interactions

If (user changes notification type)

• Reset custom view selection for PSV alerts
• Preserve delivery settings
• Update validation rules
• Show relevant fields only

If (switching between daily/weekly)

• Clear previous schedule settings
• Reset time selection
• Update validation schema
• Preserve delivery methods

If (editing scan notifications)

• Lock notification type
• Hide timing section
• Maintain delivery methods only
• Show modified validation rules