feat: rsvp flow pick my ticket page remake

lemonadesocial · Oct 8, 2024 · eaad5df · eaad5df
1 parent c7d2e01
commit eaad5df
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 52 deletions.
diff --git a/...event_buy_tickets_page/sub_pages/event_pick_my_ticket_page/event_pick_my_ticket_page.dart b/...event_buy_tickets_page/sub_pages/event_pick_my_ticket_page/event_pick_my_ticket_page.dart
@@ -150,7 +150,7 @@ class EventPickMyTicketView extends StatelessWidget {
                         ),
                         Text(
                           t.event.eventPickMyTickets.pickYourTicketDescription,
-                          style: Typo.mediumPlus.copyWith(
+                          style: Typo.medium.copyWith(
                             color: colorScheme.onSecondary,
                           ),
                         ),

diff --git a/...nt_buy_tickets_page/sub_pages/event_pick_my_ticket_page/widgets/pick_my_tickets_list.dart b/...nt_buy_tickets_page/sub_pages/event_pick_my_ticket_page/widgets/pick_my_tickets_list.dart
@@ -45,6 +45,7 @@ class PickMyTicketsList extends StatelessWidget {
                     );
 
                     return PickTicketItem(
+                      event: event,
                       ticketType: ticketType,
                       total: total,
                       currency: event.currency,

diff --git a/.../event_buy_tickets_page/sub_pages/event_pick_my_ticket_page/widgets/pick_ticket_item.dart b/.../event_buy_tickets_page/sub_pages/event_pick_my_ticket_page/widgets/pick_ticket_item.dart
@@ -1,25 +1,25 @@
+import 'package:app/core/domain/event/entities/event.dart';
 import 'package:app/core/domain/event/entities/event_ticket_types.dart';
-import 'package:app/core/presentation/widgets/image_placeholder_widget.dart';
-import 'package:app/core/presentation/widgets/theme_svg_icon_widget.dart';
-import 'package:app/gen/assets.gen.dart';
-import 'package:app/i18n/i18n.g.dart';
+import 'package:app/core/utils/event_tickets_utils.dart';
+import 'package:app/theme/color.dart';
 import 'package:app/theme/sizing.dart';
 import 'package:app/theme/spacing.dart';
 import 'package:app/theme/typo.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 class PickTicketItem extends StatelessWidget {
   const PickTicketItem({
     super.key,
+    required this.event,
     this.selected = false,
     this.ticketType,
     this.total = 1,
     this.currency,
     this.onPressed,
   });
 
+  final Event event;
   final bool selected;
   final PurchasableTicketType? ticketType;
   final double total;
@@ -28,70 +28,90 @@ class PickTicketItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final t = Translations.of(context);
     final colorScheme = Theme.of(context).colorScheme;
     final displayedTotal = (selected ? total - 1 : total).toInt();
-    final ticketThumbnail = ImagePlaceholder.ticketThumbnail(
-      iconColor: colorScheme.onSecondary,
-      backgroundColor: colorScheme.background,
+    final price = ticketType?.prices?.firstOrNull;
+    final currency = price?.currency;
+    final decimals = EventTicketUtils.getCurrencyDecimalsWithPaymentAccounts(
+      currency: currency ?? '',
+      paymentAccounts: event.paymentAccountsExpanded ?? [],
+    );
+    final displayedPrice = EventTicketUtils.getDisplayedTicketPrice(
+      decimals: decimals,
+      price: price,
     );
 
     return InkWell(
       onTap: () => onPressed?.call(),
       child: Container(
-        margin: EdgeInsets.symmetric(horizontal: Spacing.smMedium),
-        padding: EdgeInsets.all(Spacing.smMedium),
+        margin: EdgeInsets.symmetric(horizontal: Spacing.small),
+        padding: EdgeInsets.all(Spacing.small),
         decoration: BoxDecoration(
+          border: Border.all(
+            color: selected ? colorScheme.onPrimary : Colors.transparent,
+          ),
           borderRadius: BorderRadius.circular(LemonRadius.small),
-          color: colorScheme.onPrimary.withOpacity(0.06),
+          color: LemonColor.atomicBlack,
         ),
-        child: Row(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Container(
-              clipBehavior: Clip.hardEdge,
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(LemonRadius.extraSmall),
-              ),
-              child: CachedNetworkImage(
-                width: Sizing.medium,
-                height: Sizing.medium,
-                // TODO: ticketType.photosExpanded.first
-                imageUrl: "",
-                errorWidget: (_, __, ___) => ticketThumbnail,
-                placeholder: (_, __) => ticketThumbnail,
-              ),
-            ),
-            SizedBox(width: Spacing.xSmall),
-            Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
+            Row(
               children: [
-                Text(
-                  ticketType?.title ?? '',
-                  style: Typo.medium.copyWith(
-                    fontWeight: FontWeight.w600,
-                    color: colorScheme.onPrimary.withOpacity(0.87),
-                  ),
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      ticketType?.title ?? '',
+                      style: Typo.medium.copyWith(
+                        fontWeight: FontWeight.w500,
+                        color: colorScheme.onPrimary,
+                      ),
+                    ),
+                    SizedBox(height: 2.w),
+                    Text(
+                      displayedPrice,
+                      style: Typo.mediumPlus.copyWith(
+                        color: colorScheme.onPrimary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
                 ),
-                SizedBox(height: 2.w),
-                Text(
-                  selected
-                      ? '$displayedTotal ${t.event.remaining} ${t.event.tickets(n: displayedTotal)}'
-                      : '$displayedTotal ${t.event.tickets(n: displayedTotal)}',
-                  style: Typo.small.copyWith(
-                    color: colorScheme.onSecondary,
+                const Spacer(),
+                Container(
+                  width: Sizing.regular,
+                  height: Sizing.regular,
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                      color: colorScheme.outline,
+                      width: 0.5.w,
+                    ),
+                    color: LemonColor.chineseBlack,
+                    borderRadius: BorderRadius.circular(Sizing.regular),
+                  ),
+                  child: Center(
+                    child: Text(
+                      displayedTotal.toString(),
+                      style: Typo.medium.copyWith(
+                        color: colorScheme.onSecondary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
                   ),
                 ),
               ],
             ),
-            const Spacer(),
-            if (selected)
-              Assets.icons.icInvitedFilled.svg()
-            else
-              ThemeSvgIcon(
-                color: colorScheme.onSurfaceVariant,
-                builder: (filter) =>
-                    Assets.icons.icCircleEmpty.svg(colorFilter: filter),
+            if (ticketType?.description?.isNotEmpty == true) ...[
+              SizedBox(height: Spacing.xSmall),
+              Text(
+                ticketType?.description ?? '',
+                style: Typo.small.copyWith(
+                  color: colorScheme.onSecondary,
+                ),
               ),
+            ],
           ],
         ),
       ),