import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router"; import { useLoaderData, useFetcher, useNavigate, Link } from "react-router"; import { useState, useEffect } from "react"; import { getNotifications, getUnreadCount, markNotificationAsRead, markAllNotificationsAsRead, } from "../services/notification.server"; import prisma from "../db.server"; import { FAIcon } from "../components/FAIcon"; import { getDefaultStoreDomainSync } from "../services/platform-settings.server"; export const loader = async ({ request }: LoaderFunctionArgs) => { const url = new URL(request.url); const shopDomain = url.searchParams.get("shop") || getDefaultStoreDomainSync(); const page = parseInt(url.searchParams.get("page") || "1", 10); const filter = url.searchParams.get("filter") || "ALL"; // ALL or UNREAD let shopId: string | null = null; const shop = await prisma.shop.findUnique({ where: { shopifyDomain: shopDomain.toLowerCase().trim() }, select: { id: true }, }); if (shop) shopId = shop.id; try { const data = await getNotifications({ shopId, page, pageSize: 20, isRead: filter === "UNREAD" ? false : undefined, }); const unreadCount = await getUnreadCount(shopId); return { shopDomain, shopId, notifications: data.notifications.map((n) => ({ id: n.id, type: n.type, title: n.title, message: n.message, isRead: n.isRead, readAt: n.readAt ? new Date(n.readAt).toISOString() : null, actionUrl: n.actionUrl, createdAt: new Date(n.createdAt).toISOString(), })), totalCount: data.totalCount, page: data.page, totalPages: data.totalPages, unreadCount, filter, error: null, }; } catch (err: any) { return { shopDomain, shopId: null, notifications: [], totalCount: 0, page: 1, totalPages: 1, unreadCount: 0, filter: "ALL", error: err.message || "Failed to load notifications", }; } }; export const action = async ({ request }: ActionFunctionArgs) => { const formData = await request.formData(); const intent = String(formData.get("_intent") || ""); const shopId = String(formData.get("shopId") || ""); try { if (intent === "mark_read") { const notificationId = String(formData.get("notificationId") || ""); if (notificationId) { await markNotificationAsRead(notificationId, shopId); return { success: true, intent }; } } if (intent === "mark_all_read") { await markAllNotificationsAsRead(shopId); return { success: true, intent }; } } catch (err: any) { return { success: false, error: err.message }; } return null; }; // Helper for formatting time ago function formatTimeAgo(isoString: string): string { const date = new Date(isoString); const now = new Date(); const seconds = Math.floor((now.getTime() - date.getTime()) / 1000); if (seconds < 60) return "Just now"; const minutes = Math.floor(seconds / 60); if (minutes < 60) return `${minutes} minute${minutes === 1 ? "" : "s"} ago`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`; const days = Math.floor(hours / 24); if (days < 30) return `${days} day${days === 1 ? "" : "s"} ago`; return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); } // Icon mapper by notification type function getNotificationIcon(type: string): { icon: string; color: string; bg: string } { switch (type) { case "SHOPIFY_SYNC_SUCCESS": case "SHOPIFY_CONNECTED": return { icon: "rotate", color: "#10B981", bg: "#ECFDF5" }; case "SHOPIFY_SYNC_FAILED": case "SHOPIFY_DISCONNECTED": return { icon: "triangle-exclamation", color: "#EF4444", bg: "#FEF2F2" }; case "AI_CONFIG_UPDATED": return { icon: "robot", color: "#4F46E5", bg: "#EEF2FF" }; case "USAGE_LIMIT_WARNING": case "USAGE_LIMIT_REACHED": return { icon: "gauge-high", color: "#F59E0B", bg: "#FEF3C7" }; case "SUBSCRIPTION_UPDATED": return { icon: "credit-card", color: "#8B5CF6", bg: "#F5F3FF" }; default: return { icon: "bell", color: "#4F46E5", bg: "#EEF2FF" }; } } export default function NotificationsPage() { const loaderData = useLoaderData(); const fetcher = useFetcher(); const navigate = useNavigate(); const [notifications, setNotifications] = useState(loaderData.notifications); const [unreadCount, setUnreadCount] = useState(loaderData.unreadCount); const [isLoading, setIsLoading] = useState(false); useEffect(() => { setNotifications(loaderData.notifications); setUnreadCount(loaderData.unreadCount); }, [loaderData]); const handleMarkRead = (id: string, actionUrl?: string | null) => { // Optimistic UI update setNotifications((prev) => prev.map((item) => (item.id === id ? { ...item, isRead: true } : item)) ); setUnreadCount((prev) => Math.max(0, prev - 1)); fetcher.submit( { _intent: "mark_read", notificationId: id, shopId: loaderData.shopId || "" }, { method: "post" } ); if (actionUrl) { navigate(actionUrl); } }; const handleMarkAllRead = () => { // Optimistic UI update setNotifications((prev) => prev.map((item) => ({ ...item, isRead: true }))); setUnreadCount(0); fetcher.submit( { _intent: "mark_all_read", shopId: loaderData.shopId || "" }, { method: "post" } ); }; const handleFilterChange = (newFilter: string) => { const url = new URL(window.location.href); url.searchParams.set("filter", newFilter); url.searchParams.set("page", "1"); navigate(`${url.pathname}${url.search}`); }; const handlePageChange = (newPage: number) => { const url = new URL(window.location.href); url.searchParams.set("page", String(newPage)); navigate(`${url.pathname}${url.search}`); }; return (
{/* HEADER SECTION */}

Notifications

{unreadCount > 0 && ( {unreadCount} unread )}
{unreadCount > 0 && ( )}

View system alerts, account updates, and important activity.

{/* ERROR STATE */} {loaderData.error && (
Unable to load notifications.
{loaderData.error}
)} {/* MAIN CONTAINER */}
{/* TABS & FILTER BAR */}
Showing {notifications.length} of {loaderData.totalCount}
{/* NOTIFICATION LIST */} {notifications.length === 0 ? ( /* EMPTY STATE */

No notifications

You're all caught up. New system updates and important alerts will appear here.

) : (
{notifications.map((n) => { const iconStyle = getNotificationIcon(n.type); return (
handleMarkRead(n.id, n.actionUrl)} >

{n.title} {!n.isRead && ( )}

{formatTimeAgo(n.createdAt)}

{n.message}

{n.actionUrl && ( View details )}
); })}
)} {/* PAGINATION BAR */} {loaderData.totalPages > 1 && (
Page {loaderData.page} of {loaderData.totalPages}
)}
); }