Modal Components (Tier 2)

Purpose: Popup dialogs and overlays
Tier: 2 (Standard Documentation)
Count: 7 components

---

1. PopupModal

Purpose: Demo booking modal (most used)
Trigger: CTA buttons across site

Props:

interface PopupModalProps {
  isOpen: boolean;
  onClose: () => void;
}

Features:

• Contact form inside
• Overlay backdrop
• ESC key to close
• Click outside to close

Usage:

const [isOpen, setIsOpen] = useState(false);
<PopupModal isOpen={isOpen} onClose={() => setIsOpen(false)} />;

---

2. BillingDetailsModal

Purpose: Subscription details overlay
Used In: Billing pages

Features:

• Plan summary
• Payment details
• Usage statistics
• Action buttons

---

3. KnowledgeBaseModal

Purpose: Help/documentation viewer
Features:

• Article display
• Search functionality
• Category navigation

---

4. PremiumFeatureModal

Purpose: Upgrade prompt for locked features
Trigger: Click on premium features

Features:

• Feature comparison
• Upgrade CTA
• Plan selection

---

5. ShareModal

Purpose: Chatbot sharing interface
Used In: Chatbots list

Props:

interface ShareModalProps {
  chatbotId: string;
  isOpen: boolean;
  onClose: () => void;
}

Features:

• Share link generation
• Copy to clipboard
• QR code (possible)
• Access control toggle

---

6. UserProfileModal

Purpose: Quick profile edit
Features:

• Name/email update
• Avatar upload (possible)
• Save/cancel actions

---

7. WebsitePreviewModal

Purpose: Preview crawled website pages
Used In: Website wizard step

Props:

interface WebsitePreviewModalProps {
  url: string;
  isOpen: boolean;
  onClose: () => void;
}

Features:

• iFrame preview
• URL display
• Include/exclude toggle

---

Common Modal Patterns

Portal Rendering:

• Render outside normal DOM hierarchy
• Z-index management
• Scroll lock on body

Accessibility:

• Focus trap
• ESC key handler
• ARIA attributes
• Keyboard navigation

Animation:

• Fade in/out
• Scale transitions
• Backdrop opacity

---

"Dialogs that guide, inform, and enable actions."