From dab84949ed679575d57264e6de618a5355e7e06e Mon Sep 17 00:00:00 2001 From: agilityb Date: Thu, 23 Jul 2026 17:06:46 +0100 Subject: [PATCH] feat: add Transaction Notification Center with retry actions and deep links Provide a centralized notification context for transaction toasts with retry capabilities and deep links to relevant escrow/booking pages. - Add TransactionNotification type system with factory helpers (success, error, pending, info) in lib/notifications.ts - Implement React Context-based NotificationProvider with auto-dismiss timers (5s success/info, 10s error/pending) - Create floating toast stack (bottom-right) with animated entrance, per-type icons, retry button, and deep-link navigation - Build notification center dropdown (bell icon) with unread count badge, scrollable list, relative timestamps, and "Clear all" action - Integrate provider + toast into root layout and bell icon into navbar - Wire retry/deep-link actions into both toast and dropdown surfaces --- TODO.md | 16 ++ next-env.d.ts | 2 +- src/app/layout.tsx | 11 +- src/components/Navbar.tsx | 3 + .../notifications/NotificationCenter.tsx | 169 ++++++++++++++++++ .../notifications/NotificationToast.tsx | 133 ++++++++++++++ src/components/notifications/index.ts | 4 + .../notifications/useNotifications.tsx | 100 +++++++++++ src/lib/notifications.ts | 99 ++++++++++ 9 files changed, 533 insertions(+), 4 deletions(-) create mode 100644 TODO.md create mode 100644 src/components/notifications/NotificationCenter.tsx create mode 100644 src/components/notifications/NotificationToast.tsx create mode 100644 src/components/notifications/index.ts create mode 100644 src/components/notifications/useNotifications.tsx create mode 100644 src/lib/notifications.ts diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..c82092f --- /dev/null +++ b/TODO.md @@ -0,0 +1,16 @@ +# Transaction Notification Center — Implementation Checklist ✓ + +## Files to Create +- [x] `src/lib/notifications.ts` — Types, interfaces, and helper functions +- [x] `src/components/notifications/useNotifications.tsx` — React Context, Provider, and hook +- [x] `src/components/notifications/NotificationToast.tsx` — Floating toast component +- [x] `src/components/notifications/NotificationCenter.tsx` — Dropdown panel with notification list + +## Files to Edit +- [x] `src/app/layout.tsx` — Wrap with NotificationProvider +- [x] `src/components/Navbar.tsx` — Add bell icon with unread count badge + +## Verification +- [x] `npm run lint` — No linting errors +- [x] `npm run build` — Production build succeeds (17 routes) + diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818..9edff1c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1bb6064..05a0b4e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,8 @@ import "leaflet/dist/leaflet.css"; import "./globals.css"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; +import { NotificationProvider } from "@/components/notifications/useNotifications"; +import NotificationToast from "@/components/notifications/NotificationToast"; const inter = Inter({ variable: "--font-inter", @@ -31,9 +33,12 @@ export default function RootLayout({