Notifications System

[VisibleNasir]

📘 Overview

Implement a real-time notification system (push, email, and in-app toasts) for key user actions such as payment confirmations, P2P requests, bill payments, QR transactions, and KYC status updates.
This improves engagement, transparency, and trust in the Calxsecure ecosystem.

---

💡 Why Add It

• Retention: Push notifications maintain user engagement (Paytm sees 90% open rate).
• Transparency: Confirms transactions, P2P requests, and KYC completion.
• Scalability: Uses webhook-driven architecture for instant triggers.

---

⚙️ Implementation

🧑‍💻 Userapp (Next.js)

• API Routes

  • POST /app/api/notify/push → Sends FCM push notifications.
  • POST /app/api/notify/email → Sends email notifications via Nodemailer.

• UI Components

  • Toast notifications for instant feedback (via react-hot-toast).
  • Success toasts → bg-green-900/50, Error toasts → bg-red-900/50.

• Push Setup

  • Request notification permission using the Web Push API.
  • Store FCM tokens in the database for each user.

• State Management

  • useState → Toast visibility and message state.
  • TanStack Query → Poll notification history/unread count (optional).

---

🧾 Webhook (Express)

• Extend existing /webhook route to trigger notifications for:

  • payment.succeeded
  • qr_code.paid
  • bill.paid
  • kyc.verified

• Logic Flow

  1. Webhook receives event payload.
  2. Calls /api/notify/push → Sends real-time push notification.
  3. Calls /api/notify/email → Sends confirmation email.
  4. Logs notification result in DB (status: SENT or FAILED).

• Payload Example

  {
    "userId": 1,
    "type": "PAYMENT",
    "message": "Payment of ₹500 successful!",
    "amount": 50000
  }