187 lines
4.2 KiB
Markdown
187 lines
4.2 KiB
Markdown
# Quick Start - Loyalty Rewards Screen
|
|
|
|
## Fastest Way to See the Rewards Screen
|
|
|
|
### Option 1: Add Route to Router (Recommended)
|
|
|
|
If you're using GoRouter, add this route:
|
|
|
|
```dart
|
|
// In your router configuration file
|
|
GoRoute(
|
|
path: '/loyalty/rewards',
|
|
builder: (context, state) => const RewardsPage(),
|
|
),
|
|
```
|
|
|
|
Then navigate:
|
|
```dart
|
|
context.push('/loyalty/rewards');
|
|
```
|
|
|
|
### Option 2: Direct Navigation
|
|
|
|
From anywhere in your app:
|
|
|
|
```dart
|
|
import 'package:worker/features/loyalty/presentation/pages/rewards_page.dart';
|
|
|
|
// In your button or list item onTap
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => const RewardsPage(),
|
|
),
|
|
);
|
|
```
|
|
|
|
### Option 3: Test in Main (Quick Preview)
|
|
|
|
For quick testing, temporarily modify your main.dart:
|
|
|
|
```dart
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:worker/features/loyalty/presentation/pages/rewards_page.dart';
|
|
|
|
void main() {
|
|
runApp(
|
|
const ProviderScope(
|
|
child: MaterialApp(
|
|
home: RewardsPage(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
```
|
|
|
|
## Common Integration Points
|
|
|
|
### 1. From Home Page
|
|
Add a button/card to navigate to rewards:
|
|
|
|
```dart
|
|
// In home_page.dart
|
|
InkWell(
|
|
onTap: () => context.push('/loyalty/rewards'),
|
|
child: Card(
|
|
child: ListTile(
|
|
leading: Icon(Icons.card_giftcard, color: AppColors.primaryBlue),
|
|
title: Text('Đổi quà tặng'),
|
|
subtitle: Text('Đổi điểm lấy quà'),
|
|
trailing: Icon(Icons.chevron_right),
|
|
),
|
|
),
|
|
),
|
|
```
|
|
|
|
### 2. From Loyalty Page
|
|
Add to loyalty menu:
|
|
|
|
```dart
|
|
// In loyalty_page.dart quick actions
|
|
ElevatedButton.icon(
|
|
onPressed: () => context.push('/loyalty/rewards'),
|
|
icon: Icon(Icons.card_giftcard),
|
|
label: Text('Đổi quà'),
|
|
),
|
|
```
|
|
|
|
### 3. From Account Page
|
|
Add to account menu:
|
|
|
|
```dart
|
|
// In account_page.dart menu items
|
|
ListTile(
|
|
leading: Icon(Icons.card_giftcard),
|
|
title: Text('Đổi quà tặng'),
|
|
onTap: () => context.push('/loyalty/rewards'),
|
|
),
|
|
```
|
|
|
|
## Verify Installation
|
|
|
|
Run this test to ensure everything is working:
|
|
|
|
```dart
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:worker/features/loyalty/presentation/providers/gifts_provider.dart';
|
|
import 'package:worker/features/loyalty/presentation/providers/loyalty_points_provider.dart';
|
|
|
|
void main() {
|
|
test('Providers are accessible', () {
|
|
final container = ProviderContainer();
|
|
|
|
// Test gifts provider
|
|
final gifts = container.read(giftsProvider);
|
|
expect(gifts.length, 6);
|
|
|
|
// Test points provider
|
|
final points = container.read(loyaltyPointsProvider);
|
|
expect(points.availablePoints, 9750);
|
|
|
|
container.dispose();
|
|
});
|
|
}
|
|
```
|
|
|
|
## What You Should See
|
|
|
|
When you navigate to the rewards page, you'll see:
|
|
|
|
1. **AppBar** with "Đổi quà tặng" title
|
|
2. **Blue gradient card** showing 9,750 available points
|
|
3. **Filter pills**: Tất cả, Voucher, Sản phẩm, Dịch vụ, Ưu đãi đặc biệt
|
|
4. **6 gift cards** in 2-column grid:
|
|
- Voucher 500.000đ (2,500 points) - Can redeem ✅
|
|
- Bộ keo chà ron cao cấp (3,000 points) - Can redeem ✅
|
|
- Tư vấn thiết kế miễn phí (5,000 points) - Can redeem ✅
|
|
- Gạch trang trí Premium (8,000 points) - Can redeem ✅
|
|
- Áo thun EuroTile (1,500 points) - Can redeem ✅
|
|
- Nâng hạng thẻ Platinum (15,000 points) - Cannot redeem ❌
|
|
|
|
## Troubleshooting
|
|
|
|
### "Provider not found"
|
|
Make sure your app is wrapped with ProviderScope:
|
|
```dart
|
|
void main() {
|
|
runApp(
|
|
const ProviderScope(
|
|
child: MyApp(),
|
|
),
|
|
);
|
|
}
|
|
```
|
|
|
|
### "Part file not found"
|
|
Run build_runner:
|
|
```bash
|
|
dart run build_runner build --delete-conflicting-outputs
|
|
```
|
|
|
|
### Images not loading
|
|
Check internet connection and ensure CachedNetworkImage package is installed.
|
|
|
|
### Vietnamese formatting issues
|
|
Install intl package and ensure locale is set:
|
|
```dart
|
|
MaterialApp(
|
|
locale: Locale('vi', 'VN'),
|
|
// ...
|
|
)
|
|
```
|
|
|
|
## Next Steps
|
|
|
|
1. Test the screen thoroughly
|
|
2. Customize mock data if needed
|
|
3. Connect to your backend API
|
|
4. Add to your app's navigation flow
|
|
5. Implement "My Gifts" destination page
|
|
|
|
---
|
|
|
|
**Need help?** Check `REWARDS_INTEGRATION.md` for detailed documentation.
|