add payment status dialog and enhance bill payment flow

[deveasyclick]

This PR introduces a new PaymentStatusDialog component to provide users with a visual confirmation of their bill payment status. It also updates the useBillPayment hook and payment-related types to handle enhanced metadata, payment references, and statuses. Additionally, the PaymentProvider now integrates the dialog for a smoother client experience.

---

Changes

1. PaymentStatusDialog

   • New PaymentStatusDialog component that displays:

     • Loading state with spinner.
     • Success state with reference, amount, and metadata.
     • Error state with message and metadata.

   • Prevents closing while a payment is in progress.

2. Dialog UI Components

   • Added reusable Dialog components using Radix UI.
   • Includes Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogOverlay, and DialogTrigger.

3. useBillPayment hook

   • Added dialog state handling (isDialogOpen).
   • Returns closeDialog() to reset state after closing.
   • Keeps SSR-safe dynamic import of browser-only Paystack SDK.
   • Updated hook to integrate with PaymentStatusDialog.

4. PaymentProvider

   • Integrates PaymentStatusDialog with useBillPayment for client-side display.
   • Provides dialog context to children via PaymentContext.

5. Types

   • Updated PayBillResponse type:

     • TransactionRef, ApprovedAmount, and old response fields removed.
     • Added paymentRef, amount, status, and metadata fields.

6. Dependencies

   • Added @radix-ui/react-dialog for the dialog components.

---

Benefits

• Provides clear, interactive feedback for users during bill payments.
• Maintains SSR-safe execution by dynamically loading browser-only libraries.
• Standardizes dialog UI across the application.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
billpay	Ready	Preview	Comment	Nov 24, 2025 6:26pm