# 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.