diff --git a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx index c885008..57163cc 100644 --- a/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx +++ b/PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx @@ -61,6 +61,8 @@ import { NotificationStatus, } from '../../types'; import { formatZAR } from '../../lib/formatters'; +import { MessageViewer } from '../notifications/MessageViewer'; +import { stripMarkdown } from '../../lib/markdownUtils'; interface EnrichedPartnerProject { project: Project; @@ -1321,7 +1323,7 @@ export function DashboardPage() {

- {msg.message} + {stripMarkdown(msg.message)}

@@ -1393,7 +1395,7 @@ export function DashboardPage() { )} -

{msg.message}

+

{stripMarkdown(msg.message)}

@@ -2120,11 +2122,12 @@ export function DashboardPage() { MODAL 3: MESSAGE READER (Clicking an Inbox item) ===================================================================== */} {selectedNotification && ( -
-
-
-
-

+
+
+ {/* Modal Header */} +
+
+

{selectedNotification.subject || 'Message'}

@@ -2134,41 +2137,47 @@ export function DashboardPage() {

-
-

- {selectedNotification.message} -

-
- - -
+ + {/* Scrollable Modal Body containing the Message Reading Pane */} +
+ +
+ + {/* Sticky Modal Footer */} +
+ +
diff --git a/PostFundManagement.PartnerUI/src/components/notifications/MessageViewer.tsx b/PostFundManagement.PartnerUI/src/components/notifications/MessageViewer.tsx new file mode 100644 index 0000000..a001d08 --- /dev/null +++ b/PostFundManagement.PartnerUI/src/components/notifications/MessageViewer.tsx @@ -0,0 +1,188 @@ +import React, { useState, useMemo } from 'react'; +import { + Copy, + Check, + Mail, + MessageSquare, + Code2, + Eye, + ShieldCheck, +} from 'lucide-react'; +import { NotificationPlatform } from '../../types'; +import { parseMarkdownToHtml, isHtmlContent, stripMarkdown } from '../../lib/markdownUtils'; + +export interface MessageViewerProps { + content: string; + platform?: NotificationPlatform | number | string; + subject?: string; + className?: string; + showFormatHeader?: boolean; + maxHeightClass?: string; +} + +export const MessageViewer: React.FC = ({ + content, + platform, + subject, + className = '', + showFormatHeader = true, + maxHeightClass = 'max-h-[60vh]', +}) => { + const [copied, setCopied] = useState(false); + const [showRaw, setShowRaw] = useState(false); + + // Determine whether this message represents an Email (HTML) or In-App (Markup) + const isEmail = useMemo(() => { + if ( + platform === NotificationPlatform.Email || + platform === 1 || + platform === '1' || + String(platform).toLowerCase() === 'email' + ) { + return true; + } + // If platform is not explicitly InApp, detect if content is structured HTML + if ( + platform !== NotificationPlatform.InApp && + platform !== 5 && + platform !== '5' && + String(platform).toLowerCase() !== 'inapp' && + isHtmlContent(content) + ) { + return true; + } + return false; + }, [platform, content]); + + const isInApp = useMemo(() => { + if ( + platform === NotificationPlatform.InApp || + platform === 5 || + platform === '5' || + String(platform).toLowerCase() === 'inapp' + ) { + return true; + } + return !isEmail; + }, [platform, isEmail]); + + // Convert the message to its respective format: + // - Email: HTML rendered + // - In-App: Markup (Markdown) parsed to HTML + const renderedHtml = useMemo(() => { + if (!content) return '

No message content

'; + + // Format 1: Email => HTML + if (isEmail) { + if (isHtmlContent(content)) { + return content.replace(/)<[^<]*)*<\/script>/gi, ''); + } + return parseMarkdownToHtml(content); + } + + // Format 2: In-App => Markup (Markdown) + return parseMarkdownToHtml(content); + }, [content, isEmail]); + + const handleCopy = () => { + const textToCopy = showRaw ? content : stripMarkdown(content) || content; + navigator.clipboard.writeText(textToCopy); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( +
+ {/* Format Header & Controls Bar */} + {showFormatHeader && ( +
+
+ {isEmail ? ( + + + Email (HTML) + + ) : ( + + + In-App (Markup) + + )} + + + {isEmail ? 'Rendered as HTML Email' : 'Converted from Markup to Formatted View'} + +
+ +
+ {/* View Mode Toggle: Formatted vs Raw */} + + + {/* Copy Button */} + +
+
+ )} + + {/* Message Body Content - with explicit max height, max width, word wrapping, and automatic scrollbars */} +
+ {showRaw ? ( + 
+            {content}
+
+ ) : ( +
+ )} +
+ + {/* Footer Info Stamp */} +
+
+ + PFM Communications • {isEmail ? 'Email HTML Format' : 'In-App Markup Format'} +
+ + {stripMarkdown(content).length} characters + +
+
+ ); +}; + diff --git a/PostFundManagement.PartnerUI/src/lib/markdownUtils.ts b/PostFundManagement.PartnerUI/src/lib/markdownUtils.ts index ba3ccb3..c1ae9af 100644 --- a/PostFundManagement.PartnerUI/src/lib/markdownUtils.ts +++ b/PostFundManagement.PartnerUI/src/lib/markdownUtils.ts @@ -62,11 +62,62 @@ export function parseMarkdownToHtml(markdown: string): string { return `${escaped}`; }); + // Tables (| A | B |\n|---|---|\n| C | D |) + html = html.replace(/((?:\|[^\n]+\|\n?)+)/g, (match) => { + const rows = match.trim().split('\n'); + if (rows.length < 2) return match; + + const hasSeparator = rows[1] && rows[1].includes('---'); + if (!hasSeparator) return match; + + const parseCells = (row: string) => + row + .split('|') + .slice(1, -1) + .map((c) => c.trim()); + + const headers = parseCells(rows[0]); + const bodyRows = rows.slice(2); + + let tableHtml = `
`; + tableHtml += ``; + headers.forEach((h) => { + tableHtml += ``; + }); + tableHtml += ``; + + bodyRows.forEach((row, i) => { + const cells = parseCells(row); + const bg = i % 2 === 0 ? '#0f172a' : '#1e293b/40'; + tableHtml += ``; + cells.forEach((c) => { + tableHtml += ``; + }); + tableHtml += ``; + }); + + tableHtml += `
${h}
${c}
`; + return tableHtml; + }); + html = html.replace(/^#### (.*?)$/gm, '

$1

'); html = html.replace(/^### (.*?)$/gm, '

$1

'); html = html.replace(/^## (.*?)$/gm, '

$1

'); html = html.replace(/^# (.*?)$/gm, '

$1

'); + // Blockquotes and GitHub alerts + html = html.replace(/^>\s*\[!NOTE\]\s*(.*?)$/gim, '
NOTE: $1
'); + html = html.replace(/^>\s*\[!IMPORTANT\]\s*(.*?)$/gim, '
IMPORTANT: $1
'); + html = html.replace(/^>\s*\[!WARNING\]\s*(.*?)$/gim, '
WARNING: $1
'); + html = html.replace(/^>\s*\[!TIP\]\s*(.*?)$/gim, '
TIP: $1
'); + html = html.replace(/^>\s*(.*?)$/gm, '
$1
'); + + // Horizontal Rules (---) + html = html.replace(/^(?:---|\*\*\*|___)\s*$/gm, '
'); + + // Strikethrough + html = html.replace(/~~(.*?)~~/g, '$1'); + html = html.replace(/\*\*\*(.*?)\*\*\*/g, '$1'); html = html.replace(/\*\*(.*?)\*\*/g, '$1'); html = html.replace(/__(.*?)__/g, '$1');