feat(notifications): display recurring transaction due date and navigate to details modal (!49) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(notifications): display recurring transaction due date and navigate to details modal

Overview

This PR improves the recurring transaction reminder notifications by including the specific due date in the notification content and seamlessly navigating users directly into the Recurring Transaction Details Modal when clicking "View details" (Xem chi tiết).

Key Changes

1. Notification Due Date Formatting (`src/lib/notification-format.ts`)

Added extractNotificationDueDate() utility to dynamically resolve the transaction's due date from notification.data.dueDate, URL query parameters (actionUrl), or notification message patterns.
Enhanced message formatting for RECURRING_PAYMENT_DUE notifications to clearly state the due date in both English and Vietnamese.

2. Deep-Link Navigation to Schedule Details (`src/pages/notifications/index.tsx`)

Extracted scheduleId from actionUrl / notification.data upon clicking "View details".
Forwarded scheduleId through React Router location.state and search parameters to the recurring transactions page.

3. Auto-Open Details Modal (`src/pages/recurring-transactions/index.tsx`)

Automatically detects scheduleId from navigation state or URL query params upon landing.
Opens RecurringTransactionDetailsModal immediately for the targeted schedule.
If the schedule is not yet loaded in the current paginated list, it fetches the schedule individually using the new hook.

4. Service & Hook Additions

src/services/recurring-transaction.service.ts: Added getById(id) to retrieve single schedule details by ID.
src/hooks/use-recurring-transactions.ts: Added useRecurringTransaction(id) React Query hook with query key caching.

5. Enhanced Schedule Details Modal (`RecurringTransactionDetailsModal.tsx`)

Enriched modal display: transaction amount (income/expense colored), wallet name, category, recurring interval, next execution date, start/end dates, reminder configuration, upcoming preview dates, and execution history.

6. Localization (`en.json`, `vi.json`)

Added translation keys: notification.dueDateLabel, notification.recurringDueMessage, and notification.recurringDueMessageWithName.

## Overview
This PR improves the recurring transaction reminder notifications by including the specific due date in the notification content and seamlessly navigating users directly into the **Recurring Transaction Details Modal** when clicking "View details" (`Xem chi tiết`).

---

## Key Changes

### 1. Notification Due Date Formatting (`src/lib/notification-format.ts`)
- Added `extractNotificationDueDate()` utility to dynamically resolve the transaction's due date from `notification.data.dueDate`, URL query parameters (`actionUrl`), or notification message patterns.
- Enhanced message formatting for `RECURRING_PAYMENT_DUE` notifications to clearly state the due date in both English and Vietnamese.

### 2. Deep-Link Navigation to Schedule Details (`src/pages/notifications/index.tsx`)
- Extracted `scheduleId` from `actionUrl` / `notification.data` upon clicking "View details".
- Forwarded `scheduleId` through React Router `location.state` and search parameters to the recurring transactions page.

### 3. Auto-Open Details Modal (`src/pages/recurring-transactions/index.tsx`)
- Automatically detects `scheduleId` from navigation state or URL query params upon landing.
- Opens `RecurringTransactionDetailsModal` immediately for the targeted schedule.
- If the schedule is not yet loaded in the current paginated list, it fetches the schedule individually using the new hook.

### 4. Service & Hook Additions
- **`src/services/recurring-transaction.service.ts`**: Added `getById(id)` to retrieve single schedule details by ID.
- **`src/hooks/use-recurring-transactions.ts`**: Added `useRecurringTransaction(id)` React Query hook with query key caching.

### 5. Enhanced Schedule Details Modal (`RecurringTransactionDetailsModal.tsx`)
- Enriched modal display: transaction amount (income/expense colored), wallet name, category, recurring interval, next execution date, start/end dates, reminder configuration, upcoming preview dates, and execution history.

### 6. Localization (`en.json`, `vi.json`)
- Added translation keys: `notification.dueDateLabel`, `notification.recurringDueMessage`, and `notification.recurringDueMessageWithName`.