398 lines
13 KiB
Dart
398 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../utils/safe_cast.dart';
|
|
|
|
/// "My Subscriptions" list displayed on the home tab below the loyalty card.
|
|
/// Renders each subscription as a beautiful standalone ticket card visually distinct
|
|
/// from the points-based loyalty card.
|
|
class SubscriptionListWidget extends StatelessWidget {
|
|
final List<dynamic> subscriptions;
|
|
|
|
const SubscriptionListWidget({super.key, required this.subscriptions});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (subscriptions.isEmpty) return const SizedBox.shrink();
|
|
|
|
final theme = Theme.of(context);
|
|
final colorScheme = theme.colorScheme;
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
|
|
child: Text(
|
|
'MY SUBSCRIPTIONS',
|
|
style: theme.textTheme.labelLarge?.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
letterSpacing: 1.2,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
...subscriptions.map((sub) => _SubscriptionCard(sub: sub)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SubscriptionCard extends StatelessWidget {
|
|
final dynamic sub;
|
|
|
|
const _SubscriptionCard({required this.sub});
|
|
|
|
/// Determine active/expired status from subscription_end_date.
|
|
bool _isActive() {
|
|
final endRaw = sub['subscription_end_date'];
|
|
if (endRaw == null || endRaw == false) return true; // no end date = active
|
|
try {
|
|
final endDate = DateTime.parse(endRaw.toString());
|
|
return endDate.isAfter(DateTime.now());
|
|
} catch (_) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
/// Format a date string (YYYY-MM-DD) to a readable label.
|
|
String _formatDate(dynamic raw) {
|
|
if (raw == null || raw == false) return '—';
|
|
try {
|
|
final dt = DateTime.parse(raw.toString());
|
|
return '${dt.day.toString().padLeft(2, '0')} '
|
|
'${_monthName(dt.month)} '
|
|
'${dt.year}';
|
|
} catch (_) {
|
|
return raw.toString();
|
|
}
|
|
}
|
|
|
|
String _monthName(int m) {
|
|
const months = [
|
|
'Jan',
|
|
'Feb',
|
|
'Mar',
|
|
'Apr',
|
|
'May',
|
|
'Jun',
|
|
'Jul',
|
|
'Aug',
|
|
'Sep',
|
|
'Oct',
|
|
'Nov',
|
|
'Dec',
|
|
];
|
|
return months[m - 1];
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
final colorScheme = theme.colorScheme;
|
|
|
|
final programName = sub['program_id'] is List
|
|
? (safeString(sub['program_id'][1]) ?? 'Subscription')
|
|
: 'Subscription';
|
|
final code = safeString(sub['code']) ?? '';
|
|
final startDate = _formatDate(sub['subscription_start_date']);
|
|
final endDate = _formatDate(sub['subscription_end_date']);
|
|
final active = _isActive();
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
|
|
child: CustomPaint(
|
|
foregroundPainter: TicketBorderPainter(
|
|
color: colorScheme.outline.withValues(alpha: 0.15),
|
|
strokeWidth: 1.0,
|
|
),
|
|
child: PhysicalShape(
|
|
clipper: TicketClipper(),
|
|
color: colorScheme.surfaceContainerLow,
|
|
elevation: 2,
|
|
shadowColor: Colors.black.withValues(alpha: 0.08),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Top Section: Title & Status
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons
|
|
.local_activity_rounded, // Distinct ticket pass icon
|
|
size: 18,
|
|
color: active
|
|
? colorScheme.primary
|
|
: colorScheme.outline,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'SUBSCRIPTION PASS', // Distinct title
|
|
style: theme.textTheme.labelLarge?.copyWith(
|
|
color: active
|
|
? colorScheme.primary
|
|
: colorScheme.outline,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 10,
|
|
letterSpacing: 1.2,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 4,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: active
|
|
? const Color(0xFF1B5E20).withValues(alpha: 0.10)
|
|
: const Color(0xFFB02500).withValues(alpha: 0.08),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(
|
|
active ? 'ACTIVE' : 'EXPIRED',
|
|
style: TextStyle(
|
|
fontSize: 9,
|
|
fontWeight: FontWeight.bold,
|
|
letterSpacing: 0.8,
|
|
color: active
|
|
? const Color(0xFF2E7D32)
|
|
: const Color(0xFFB02500),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 18),
|
|
// Dashed Separator
|
|
CustomPaint(
|
|
size: const Size(double.infinity, 1),
|
|
painter: DashedLinePainter(
|
|
color: colorScheme.outline.withValues(alpha: 0.25),
|
|
),
|
|
),
|
|
const SizedBox(height: 18),
|
|
// Bottom Section: Details
|
|
Text(
|
|
programName,
|
|
style: theme.textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
color: colorScheme.onSurface,
|
|
fontFamily: 'serif',
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Pass Code', // Distinct field label
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
code.isNotEmpty ? code : 'N/A',
|
|
style: theme.textTheme.bodyMedium?.copyWith(
|
|
fontFamily: 'monospace',
|
|
fontWeight: FontWeight.bold,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
if (sub['points'] != null)
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
'Claim Balance',
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
'${(sub['points'] as num).toDouble() % 1 == 0 ? (sub['points'] as num).toInt() : sub['points']} Claims',
|
|
style: theme.textTheme.bodyMedium?.copyWith(
|
|
color: colorScheme.primary,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
if (sub['subscription_start_date'] != null &&
|
|
sub['subscription_start_date'] != false) ...[
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Valid From',
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
startDate,
|
|
style: theme.textTheme.bodyMedium?.copyWith(
|
|
color: colorScheme.onSurface,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
'Expires On',
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
endDate,
|
|
style: theme.textTheme.bodyMedium?.copyWith(
|
|
color: colorScheme.onSurface,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Custom Clipper for a ticket-like appearance with side notches.
|
|
class TicketClipper extends CustomClipper<Path> {
|
|
@override
|
|
Path getClip(Size size) {
|
|
final path = Path();
|
|
path.lineTo(0, 0);
|
|
path.lineTo(size.width, 0);
|
|
|
|
// Right side notch at height 49 (approx. center of vertical separator space)
|
|
const double notchY = 49.0;
|
|
const double notchRadius = 8.0;
|
|
path.lineTo(size.width, notchY - notchRadius);
|
|
path.arcToPoint(
|
|
Offset(size.width, notchY + notchRadius),
|
|
radius: const Radius.circular(notchRadius),
|
|
clockwise: false,
|
|
);
|
|
path.lineTo(size.width, size.height);
|
|
path.lineTo(0, size.height);
|
|
|
|
// Left side notch
|
|
path.lineTo(0, notchY + notchRadius);
|
|
path.arcToPoint(
|
|
const Offset(0, notchY - notchRadius),
|
|
radius: const Radius.circular(notchRadius),
|
|
clockwise: false,
|
|
);
|
|
path.close();
|
|
return path;
|
|
}
|
|
|
|
@override
|
|
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
|
|
}
|
|
|
|
/// Painter to draw a clean dashed divider line.
|
|
class DashedLinePainter extends CustomPainter {
|
|
final Color color;
|
|
|
|
DashedLinePainter({required this.color});
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
double dashWidth = 5.0;
|
|
double dashSpace = 4.0;
|
|
double startX = 0.0;
|
|
final paint = Paint()
|
|
..color = color
|
|
..strokeWidth = 1.0;
|
|
|
|
while (startX < size.width) {
|
|
canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
|
|
startX += dashWidth + dashSpace;
|
|
}
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(CustomPainter oldDelegate) => false;
|
|
}
|
|
|
|
/// Painter to draw the outer outline of the ticket shape.
|
|
class TicketBorderPainter extends CustomPainter {
|
|
final Color color;
|
|
final double strokeWidth;
|
|
|
|
TicketBorderPainter({required this.color, this.strokeWidth = 1.0});
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final paint = Paint()
|
|
..color = color
|
|
..style = PaintingStyle.stroke
|
|
..strokeWidth = strokeWidth;
|
|
|
|
final path = Path();
|
|
path.moveTo(0, 0);
|
|
path.lineTo(size.width, 0);
|
|
|
|
const double notchY = 49.0;
|
|
const double notchRadius = 8.0;
|
|
path.lineTo(size.width, notchY - notchRadius);
|
|
path.arcToPoint(
|
|
Offset(size.width, notchY + notchRadius),
|
|
radius: const Radius.circular(notchRadius),
|
|
clockwise: false,
|
|
);
|
|
path.lineTo(size.width, size.height);
|
|
path.lineTo(0, size.height);
|
|
|
|
path.lineTo(0, notchY + notchRadius);
|
|
path.arcToPoint(
|
|
const Offset(0, notchY - notchRadius),
|
|
radius: const Radius.circular(notchRadius),
|
|
clockwise: false,
|
|
);
|
|
path.close();
|
|
|
|
canvas.drawPath(path, paint);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
|
|
}
|