worker/lib/features/loyalty/presentation/QUICK_START.md

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:

// In your router configuration file
GoRoute(
  path: '/loyalty/rewards',
  builder: (context, state) => const RewardsPage(),
),

Then navigate:

context.push('/loyalty/rewards');

Option 2: Direct Navigation

From anywhere in your app:

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:

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:

// 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:

// 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:

// 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:

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:

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

"Part file not found"

Run build_runner:

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:

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.