aefril/enaklo-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: product redeem page

Browse Source
This commit is contained in:
efrilm
2025-08-29 14:39:05 +07:00
parent fb7c9a19a9
commit 2870f39bcb
4 changed files with 961 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/reward/pages/product_redeem/product_redeem_page.dart
+823
View File
@@ -0,0 +1,823 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../../common/theme/theme.dart';
import '../../reward_page.dart';
@RoutePage()
class ProductRedeemPage extends StatefulWidget {
final Product product;
final Merchant merchant;
final PointCard pointCard;
const ProductRedeemPage({
super.key,
required this.product,
required this.merchant,
required this.pointCard,
});
@override
State<ProductRedeemPage> createState() => _ProductRedeemPageState();
}
class _ProductRedeemPageState extends State<ProductRedeemPage>
with TickerProviderStateMixin {
bool _isProcessing = false;
bool _showSuccess = false;
String _redeemCode = '';
late AnimationController _pulseController;
late AnimationController _successController;
late Animation<double> _pulseAnimation;
late Animation<double> _successAnimation;
@override
void initState() {
super.initState();
_pulseController = AnimationController(
duration: Duration(milliseconds: 1500),
vsync: this,
);
_successController = AnimationController(
duration: Duration(milliseconds: 800),
vsync: this,
);
_pulseAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
);
_successAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _successController, curve: Curves.elasticOut),
);
_pulseController.repeat(reverse: true);
}
@override
void dispose() {
_pulseController.dispose();
_successController.dispose();
super.dispose();
}
bool get canRedeem =>
widget.pointCard.availablePoints >= widget.product.pointsRequired;
int get pointsShortage =>
widget.product.pointsRequired - widget.pointCard.availablePoints;
Future<void> _processRedeem() async {
setState(() {
_isProcessing = true;
});
// Simulate API call
await Future.delayed(Duration(seconds: 2));
// Generate mock redeem code
_redeemCode =
'RDM${DateTime.now().millisecondsSinceEpoch.toString().substring(8)}';
setState(() {
_isProcessing = false;
_showSuccess = true;
});
_pulseController.stop();
_successController.forward();
// Auto dismiss after 3 seconds
Future.delayed(Duration(seconds: 3), () {
if (mounted) {
Navigator.pop(
context,
true,
); // Return true to indicate successful redemption
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.white,
body: CustomScrollView(
slivers: [
// Custom App Bar with product image
SliverAppBar(
expandedHeight: 280,
floating: false,
pinned: true,
backgroundColor: AppColor.white,
elevation: 0,
flexibleSpace: FlexibleSpaceBar(
background: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.primary.withOpacity(0.1),
AppColor.backgroundLight,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: AnimatedBuilder(
animation: _pulseAnimation,
builder: (context, child) {
return Transform.scale(
scale: _isProcessing ? _pulseAnimation.value : 1.0,
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: AppColor.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: AppColor.primary.withOpacity(0.2),
blurRadius: 20,
offset: Offset(0, 8),
),
],
),
child: Center(
child: Text(
widget.product.image,
style: TextStyle(fontSize: 48),
),
),
),
);
},
),
),
),
),
),
// Product Details
SliverToBoxAdapter(
child: _showSuccess ? _buildSuccessView() : _buildProductDetails(),
),
],
),
);
}
Widget _buildProductDetails() {
return Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Merchant Info
Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(widget.merchant.logo, style: TextStyle(fontSize: 16)),
SizedBox(width: 6),
Text(
widget.merchant.name,
style: AppStyle.sm.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
],
),
),
SizedBox(height: 16),
// Product Name & Popular Badge
Row(
children: [
Expanded(
child: Text(
widget.product.name,
style: AppStyle.h4.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.textPrimary,
),
),
),
if (widget.product.isPopular)
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: AppColor.warning,
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.local_fire_department,
color: AppColor.white,
size: 14,
),
SizedBox(width: 4),
Text(
"Popular",
style: AppStyle.xs.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
SizedBox(height: 8),
// Description
Text(
widget.product.fullDescription ?? widget.product.description,
style: AppStyle.md.copyWith(
color: AppColor.textSecondary,
height: 1.5,
),
),
SizedBox(height: 24),
// Points Required Card
Container(
width: double.infinity,
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.primary.withOpacity(0.1),
AppColor.primary.withOpacity(0.05),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppColor.primary.withOpacity(0.3)),
),
child: Column(
children: [
Row(
children: [
Icon(
Icons.stars_rounded,
color: AppColor.warning,
size: 24,
),
SizedBox(width: 8),
Text(
"Points Required",
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
],
),
SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${widget.product.pointsRequired}",
style: AppStyle.h3.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.primary,
),
),
Text(
"Points needed",
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"${widget.pointCard.availablePoints}",
style: AppStyle.h3.copyWith(
fontWeight: FontWeight.w700,
color: canRedeem
? AppColor.success
: AppColor.error,
),
),
Text(
"Your points",
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
),
],
),
],
),
],
),
),
SizedBox(height: 20),
// Insufficient Points Warning
if (!canRedeem)
Container(
width: double.infinity,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.error.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.error.withOpacity(0.3)),
),
child: Row(
children: [
Icon(
Icons.warning_amber_rounded,
color: AppColor.error,
size: 24,
),
SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Insufficient Points",
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.error,
),
),
Text(
"You need ${pointsShortage} more points to redeem this item",
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
),
],
),
),
],
),
),
SizedBox(height: 24),
// Terms & Conditions
_buildInfoSection(
"Terms & Conditions",
widget.product.termsAndConditions ??
"• Valid for single use only\n• Cannot be combined with other offers\n• No cash value\n• Subject to availability\n• Valid at participating locations only",
),
SizedBox(height: 16),
// Validity
_buildInfoSection(
"Validity",
widget.product.validUntil ??
"Valid until: 30 days from redemption date",
),
SizedBox(height: 32),
// Redeem Button
SizedBox(
width: double.infinity,
height: 56,
child: ElevatedButton(
onPressed: (_isProcessing || !canRedeem) ? null : _processRedeem,
style: ElevatedButton.styleFrom(
backgroundColor: canRedeem
? AppColor.primary
: AppColor.textLight,
foregroundColor: AppColor.white,
elevation: canRedeem ? 4 : 0,
shadowColor: AppColor.primary.withOpacity(0.3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: _isProcessing
? Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
AppColor.white,
),
),
),
SizedBox(width: 12),
Text(
"Processing...",
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.white,
),
),
],
)
: Text(
canRedeem ? "Redeem Now" : "Insufficient Points",
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.white,
),
),
),
),
SizedBox(height: 20),
// Alternative action for insufficient points
if (!canRedeem)
SizedBox(
width: double.infinity,
height: 48,
child: OutlinedButton(
onPressed: () {
// Navigate to earn points page or show earn points options
_showEarnPointsOptions();
},
style: OutlinedButton.styleFrom(
foregroundColor: AppColor.primary,
side: BorderSide(color: AppColor.primary, width: 2),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.add_circle_outline, size: 20),
SizedBox(width: 8),
Text(
"Earn More Points",
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.primary,
),
),
],
),
),
),
SizedBox(height: 40),
],
),
);
}
Widget _buildSuccessView() {
return AnimatedBuilder(
animation: _successAnimation,
builder: (context, child) {
return Transform.scale(
scale: _successAnimation.value,
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
SizedBox(height: 40),
// Success Icon
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: AppColor.success,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: AppColor.success.withOpacity(0.3),
blurRadius: 20,
offset: Offset(0, 8),
),
],
),
child: Icon(
Icons.check_rounded,
color: AppColor.white,
size: 48,
),
),
SizedBox(height: 24),
// Success Message
Text(
"Redemption Successful!",
style: AppStyle.h4.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.success,
),
textAlign: TextAlign.center,
),
SizedBox(height: 12),
Text(
"Your ${widget.product.name} is ready!",
style: AppStyle.lg.copyWith(color: AppColor.textSecondary),
textAlign: TextAlign.center,
),
SizedBox(height: 32),
// Redeem Code Card
Container(
width: double.infinity,
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppColor.success, width: 2),
boxShadow: [
BoxShadow(
color: AppColor.success.withOpacity(0.1),
blurRadius: 12,
offset: Offset(0, 4),
),
],
),
child: Column(
children: [
Text(
"Your Redeem Code",
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
SizedBox(height: 12),
Container(
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
decoration: BoxDecoration(
color: AppColor.backgroundLight,
borderRadius: BorderRadius.circular(8),
),
child: Text(
_redeemCode,
style: AppStyle.h5.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.primary,
letterSpacing: 2,
),
),
),
SizedBox(height: 12),
Text(
"Show this code at ${widget.merchant.name}",
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
textAlign: TextAlign.center,
),
],
),
),
SizedBox(height: 24),
// Points Deducted Info
Container(
width: double.infinity,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Icon(Icons.stars, color: AppColor.primary, size: 20),
SizedBox(width: 8),
Text(
"${widget.product.pointsRequired} points deducted",
style: AppStyle.md.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
),
);
},
);
}
Widget _buildInfoSection(String title, String content) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
SizedBox(height: 8),
Container(
width: double.infinity,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.border),
),
child: Text(
content,
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
height: 1.6,
),
),
),
],
);
}
void _showEarnPointsOptions() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => Container(
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
),
child: Column(
children: [
// Handle
Container(
margin: EdgeInsets.only(top: 12),
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColor.textLight.withOpacity(0.5),
borderRadius: BorderRadius.circular(2),
),
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Earn More Points",
style: AppStyle.h5.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.textPrimary,
),
),
SizedBox(height: 8),
Text(
"You need ${pointsShortage} more points to redeem this item",
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
SizedBox(height: 24),
// Earn Points Options
_buildEarnOption(
"🛍️",
"Shop & Earn",
"Earn 1 point for every \$1 spent",
"Earn up to 500 points per day",
),
_buildEarnOption(
"🎯",
"Complete Missions",
"Daily and weekly challenges",
"Earn 100-1000 points per mission",
),
_buildEarnOption(
"👥",
"Refer Friends",
"Invite friends to join",
"Earn 500 points per referral",
),
SizedBox(height: 20),
// Close Button
SizedBox(
width: double.infinity,
height: 48,
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
"Got it",
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.white,
),
),
),
),
],
),
),
],
),
),
);
}
Widget _buildEarnOption(
String icon,
String title,
String description,
String reward,
) {
return Container(
margin: EdgeInsets.only(bottom: 12),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.backgroundLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.border),
),
child: Row(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(12),
),
child: Center(child: Text(icon, style: TextStyle(fontSize: 24))),
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
Text(
description,
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
),
Text(
reward,
style: AppStyle.xs.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
],
),
),
Icon(Icons.arrow_forward_ios, color: AppColor.textLight, size: 16),
],
),
);
}
}
lib/presentation/pages/reward/reward_page.dart
+19 -78
View File
@@ -2,6 +2,7 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../common/theme/theme.dart';
import '../../router/app_router.gr.dart';
// Models
class PointCard {
@@ -53,6 +54,9 @@ class Product {
final int pointsRequired;
final String description;
final bool isPopular;
final String? fullDescription;
final String? validUntil;
final String? termsAndConditions;
Product({
required this.id,
@@ -61,6 +65,9 @@ class Product {
required this.pointsRequired,
required this.description,
this.isPopular = false,
this.fullDescription,
this.validUntil,
this.termsAndConditions,
});
}
@@ -293,7 +300,13 @@ class _RewardPageState extends State<RewardPage> {
SliverAppBar(
elevation: 0,
backgroundColor: AppColor.white,
title: Text("Rewards"),
title: Text(
"Rewards",
style: AppStyle.h5.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
centerTitle: true,
floating: false,
pinned: true, // Made sticky
@@ -836,83 +849,11 @@ class _RewardPageState extends State<RewardPage> {
}
void _redeemProduct(Product product) {
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
title: Text(
"Redeem Product",
style: AppStyle.lg.copyWith(fontWeight: FontWeight.w600),
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(product.image, style: TextStyle(fontSize: 48)),
SizedBox(height: 12),
Text(
product.name,
style: AppStyle.md.copyWith(fontWeight: FontWeight.w600),
),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.stars, color: AppColor.warning, size: 16),
SizedBox(width: 4),
Text(
"${product.pointsRequired} Points",
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.primary,
),
),
],
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
"Cancel",
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
_showRedeemSuccess(product);
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
foregroundColor: AppColor.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
"Redeem",
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.white,
),
),
),
],
),
);
}
void _showRedeemSuccess(Product product) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
"Successfully redeemed ${product.name}!",
style: AppStyle.sm.copyWith(color: AppColor.white),
),
backgroundColor: AppColor.success,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
context.router.push(
ProductRedeemRoute(
product: product,
merchant: selectedMerchant!,
pointCard: pointCard,
),
);
}