diff --git a/assets/icons/discount_clock.png b/assets/icons/discount_clock.png new file mode 100644 index 0000000..a9fdcb5 Binary files /dev/null and b/assets/icons/discount_clock.png differ diff --git a/assets/icons/discount_crown.png b/assets/icons/discount_crown.png new file mode 100644 index 0000000..1b80eff Binary files /dev/null and b/assets/icons/discount_crown.png differ diff --git a/assets/icons/discount_percent.png b/assets/icons/discount_percent.png new file mode 100644 index 0000000..e8dc2a6 Binary files /dev/null and b/assets/icons/discount_percent.png differ diff --git a/assets/images/marriot_hotel.jpg b/assets/images/marriot_hotel.jpg new file mode 100644 index 0000000..aebd90c Binary files /dev/null and b/assets/images/marriot_hotel.jpg differ diff --git a/lib/core/app_router.dart b/lib/core/app_router.dart index 44ebae3..aca1f9b 100644 --- a/lib/core/app_router.dart +++ b/lib/core/app_router.dart @@ -4,6 +4,8 @@ import 'package:citycards_customer/contact_us/contact_us_view.dart'; import 'package:citycards_customer/edit_profile/edit_profile_view.dart'; import 'package:citycards_customer/esim_offer/esim_offer_view.dart'; import 'package:citycards_customer/faq/faq_view.dart'; +import 'package:citycards_customer/hotel_offer/hotel_offer_view.dart'; +import 'package:citycards_customer/itinerary_creation/bloc/date_selection_bloc.dart'; import 'package:citycards_customer/itinerary_creation/bloc/itinerary_steps_selection_bloc.dart'; import 'package:citycards_customer/itinerary_creation/views/itinerary_creation_start_view.dart'; import 'package:citycards_customer/itinerary_creation/views/itinerary_creation_view.dart'; @@ -79,13 +81,26 @@ class AppRouter { case RouteConstants.itineraryCreation: return MaterialPageRoute( builder: (_) { - return BlocProvider( - create: (_) => ItineraryStepNavigationBloc(), - child: ItineraryCreationPage(), + return MultiBlocProvider( + providers: [ + BlocProvider( + create: (_) => UpdateSelectedDateBloc(), + ), + BlocProvider( + create: (_) => ItineraryStepNavigationBloc(), + ), + ], + child: const ItineraryCreationPage(), ); }, ); + case RouteConstants.hotelOffer: + return MaterialPageRoute(builder: (_){ + return HotelOfferView(); + }); + + case RouteConstants.esimOffer: return MaterialPageRoute( builder: (_) { diff --git a/lib/core/route_constants.dart b/lib/core/route_constants.dart index 66e8b17..0a095f8 100644 --- a/lib/core/route_constants.dart +++ b/lib/core/route_constants.dart @@ -18,4 +18,5 @@ class RouteConstants { /**************************** ESIM Page *****************************************/ static const String esimOffer = '/esim_offer'; + static const String hotelOffer = '/hotelOffer'; } diff --git a/lib/hotel_offer/hotel_offer_view.dart b/lib/hotel_offer/hotel_offer_view.dart index e69de29..d57f014 100644 --- a/lib/hotel_offer/hotel_offer_view.dart +++ b/lib/hotel_offer/hotel_offer_view.dart @@ -0,0 +1,384 @@ +import 'package:citycards_customer/common_packages/app_bar.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:citycards_customer/common_packages/custom_filled_button.dart'; +import 'package:citycards_customer/common_packages/custom_text.dart'; + +class HotelOfferView extends StatelessWidget { + const HotelOfferView({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: SafeArea( + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + color: Colors.white, + padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), + child: CommonAppBar(isWhiteLogo: false, isProfilePage: false), + ), + // Banner Section + Stack( + children: [ + Image.asset( + "assets/images/marriot_hotel.jpg", + height: 529.h, + width: double.infinity, + fit: BoxFit.cover, + ), + Positioned.fill( + child: Container( + height: double.infinity, + width: double.infinity, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Color(0xFF000000).withOpacity(.4), + Color(0xFF000000).withOpacity(.4), + Color(0xFFFFFFFF), + ], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + ), + ), + ), + ), + Positioned.fill( + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 30.w), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Enjoy 20% Off at\nMarriott Hotels\nExclusively with CityCard", + style: TextStyle( + fontSize: 32.sp, + fontWeight: FontWeight.w600, + color: Colors.white, + ), + textAlign: TextAlign.center, + ), + SizedBox(height: 21.h), + Text( + "Make every stay as unforgettable as the city you're exploring.", + style: TextStyle( + fontSize: 18.sp, + color: Colors.white, + ), + textAlign: TextAlign.center, + ), + ], + ), + ), + ), + ], + ), + + SizedBox(height: 65.h), + + Padding( + padding: EdgeInsets.symmetric(horizontal: 22.w), + child: Column( + children: [ + Text( + "Your CityCard unlocks more than just attractions — it also opens doors to exceptional stays.", + style: TextStyle( + fontSize: 21.sp, + color: Color(0xFF1F2937), + ), + textAlign: TextAlign.center, + ), + + SizedBox(height: 31.h), + + RichText( + textAlign: TextAlign.center, + text: TextSpan( + style: TextStyle( + color: const Color(0xFF364153), + fontSize: 18.sp, + height: 1.6, + ), + children: [ + const TextSpan( + text: "Thanks to our exclusive partnership with ", + ), + TextSpan( + text: "Marriott Hotels", + style: TextStyle(color: const Color(0xFFF95F62)), + ), + const TextSpan(text: ", CityCard holders enjoy "), + TextSpan( + text: "20% off best available rates", + style: TextStyle(color: const Color(0xFFF95F62)), + ), + const TextSpan( + text: + " across a curated selection of properties in the city.", + ), + ], + ), + ), + ], + ), + ), + + SizedBox(height: 69.h), + + Container( + width: double.infinity, + padding: EdgeInsets.symmetric(vertical: 32.h, horizontal: 16.w), + decoration: BoxDecoration(color: const Color(0xFFFFF5F5)), + child: Column( + children: [ + RichText( + textAlign: TextAlign.center, + text: TextSpan( + style: TextStyle( + color: const Color(0xFF101828), + fontSize: 26.25.sp, + ), + children: [ + const TextSpan(text: "Choose from a "), + TextSpan( + text: "Wide \nVariety", + style: TextStyle( + color: const Color(0xFFF95F62), + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox(height: 24.h), + RichText( + textAlign: TextAlign.center, + text: TextSpan( + style: TextStyle( + color: const Color(0xFF364153), + fontSize: 18.sp, + height: 1.5, + ), + children: [ + const TextSpan( + text: + "Choose from a wide variety of Marriott hotels — from elegant urban hideaways and premium city-centre locations to luxurious five-star experiences — all designed to make your trip ", + ), + TextSpan( + text: "effortless, comfortable and memorable", + style: TextStyle( + color: const Color(0xFFF95F62), + fontWeight: FontWeight.w600, + ), + ), + TextSpan(text: " and "), + TextSpan( + text: "memorable", + style: TextStyle( + color: const Color(0xFFF95F62), + fontWeight: FontWeight.w600, + ), + ), + ], + ), + ), + ], + ), + ), + SizedBox(height: 70.h), + + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "Simply use your CityCard", + style: TextStyle( + fontSize: 26.25.sp, + color: Color(0xFF1F2937), + ), + ), + + TextSpan( + text: " booking link to:", + style: TextStyle( + fontSize: 26.25.sp, + color: Color(0xFFF95F62), + fontWeight: FontWeight.w700, + ), + ), + ], + ), + textAlign: TextAlign.center, + ), + + SizedBox(height: 56.h), + + _featureCard( + icon: "assets/icons/discount_percent.png", + title: "Access 20% off best available rates", + subtitle: "Save on your stay at premium Marriott properties", + ), + SizedBox(height: 28.h), + _featureCard( + icon: "assets/icons/discount_clock.png", + title: "Enjoy priority check-in and late checkout", + subtitle: "Subject to availability for your convenience", + ), + SizedBox(height: 28.h), + _featureCard( + icon: "assets/icons/discount_crown.png", + title: "Receive exclusive seasonal offers", + subtitle: "Designed specially for CityCard travellers", + ), + + SizedBox(height: 56.h), + + // Bottom CTA + Padding( + padding: EdgeInsets.symmetric(horizontal: 30.w), + child: Text.rich( + textAlign : TextAlign.center, + TextSpan( + children: [ + TextSpan( + text: "It's just one more way", + style: TextStyle( + fontSize: 21.sp, + color: Color(0xFF1F2937), + ), + ), + TextSpan( + text: " CityCard", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w700, + color: Color(0xFFF95F62), + ), + ), + TextSpan( + text: " makes exploring", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w400, + color: Color(0xFF1F2937), + ), + ), + TextSpan( + text: " smarter", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w600, + color: Color(0xFFF95F62), + ), + ), + TextSpan( + text: ",", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w400, + color: Color(0xFF1F2937), + ), + ), + TextSpan( + text: " simpler", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w600, + color: Color(0xFFF95F62), + ), + ), + TextSpan( + text: ", and", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w400, + color: Color(0xFF1F2937), + ), + ), + TextSpan( + text: " more rewarding", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w600, + color: Color(0xFFF95F62), + ), + ), + TextSpan( + text: ".", + style: TextStyle( + fontSize: 21.sp, + fontWeight: FontWeight.w400, + color: Color(0xFF1F2937), + ), + ), + ], + ), + ), + ), + SizedBox(height: 28.h), + Align( + alignment: Alignment.center, + child: CustomFilledButton( + onTap: () {}, + label: "Get your CityCard today", + showArrow: true, + height: 59.h, + width: 291.w, + ), + ), + SizedBox(height: 70.h), + ], + ), + ), + ), + ); + } + + Widget _featureCard({ + required String icon, + required String title, + required String subtitle, + }) { + return Padding( + padding: EdgeInsets.symmetric(horizontal: 22.w), + child: Container( + padding: EdgeInsets.symmetric(horizontal: 21.w, vertical: 21.h), + decoration: BoxDecoration( + color: const Color(0xFFFFF5F5), + borderRadius: BorderRadius.circular(14.r), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset(icon, scale: 4), + SizedBox(height: 21.h), + + Text( + title, + style: TextStyle( + fontSize: 16.sp, + fontWeight: FontWeight.w600, + color: Color(0xFF1F2937), + ), + textAlign: TextAlign.center, + ), + SizedBox(height: 21.h), + Text( + subtitle, + style: TextStyle( + fontSize: 14.sp, + fontWeight: FontWeight.w400, + color: Color(0xFF4B5563), + ), + textAlign: TextAlign.center, + ), + ], + ), + ), + ); + } +} diff --git a/lib/itinerary_creation/bloc/date_selection_bloc.dart b/lib/itinerary_creation/bloc/date_selection_bloc.dart new file mode 100644 index 0000000..db1f13f --- /dev/null +++ b/lib/itinerary_creation/bloc/date_selection_bloc.dart @@ -0,0 +1,28 @@ +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:intl/intl.dart'; + +abstract class SelectDateEvent {} + +class SelectItineraryDateEvent extends SelectDateEvent { + final String date; + SelectItineraryDateEvent(this.date); +} + +class SelectItineraryDateState { + final String selectedDate; + const SelectItineraryDateState(this.selectedDate); +} + +class UpdateSelectedDateBloc + extends Bloc { + UpdateSelectedDateBloc() + : super( + SelectItineraryDateState( + DateFormat('EEEE, MMMM d, yyyy').format(DateTime.now()), + ), + ) { + on((event, emit) { + emit(SelectItineraryDateState(event.date)); + }); + } +} diff --git a/lib/itinerary_creation/views/itinerary_creation_steps/date_selection_view.dart b/lib/itinerary_creation/views/itinerary_creation_steps/date_selection_view.dart index 2a65ca7..5554ce2 100644 --- a/lib/itinerary_creation/views/itinerary_creation_steps/date_selection_view.dart +++ b/lib/itinerary_creation/views/itinerary_creation_steps/date_selection_view.dart @@ -1,9 +1,11 @@ import 'package:citycards_customer/common_packages/custom_filled_button.dart'; import 'package:citycards_customer/common_packages/custom_text.dart'; +import 'package:citycards_customer/itinerary_creation/bloc/date_selection_bloc.dart'; import 'package:citycards_customer/itinerary_creation/bloc/itinerary_steps_selection_bloc.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:intl/intl.dart'; class DateSelectionView extends StatelessWidget { const DateSelectionView({super.key}); @@ -34,16 +36,24 @@ class DateSelectionView extends StatelessWidget { border: Border.all(color: Color(0xFFF95F62), width: 1.1.w), ), child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Image.asset("assets/icons/calender.png", scale: 4), - - CustomText( - text: "Wednesday, October 15, 2025", - size: 14.sp, - color: Color(0xFF101828), + GestureDetector( + onTap: () { + _pickDate(context); + }, + child: Image.asset("assets/icons/calender.png", scale: 4), ), - + SizedBox(width: 16.w,), + BlocBuilder( + builder: (context, state) { + return CustomText( + text: state.selectedDate, + size: 14.sp, + color: Color(0xFF101828), + ); + }, + ), + const Spacer(), Icon(Icons.check_circle, color: Color(0xFFF95F62)), ], ), @@ -62,4 +72,36 @@ class DateSelectionView extends StatelessWidget { ), ); } + + Future _pickDate(BuildContext context) async { + final DateTime? picked = await showDatePicker( + context: context, + // initialDate: , + firstDate: DateTime.now().subtract(const Duration(days: 0)), + lastDate: DateTime.now().add(const Duration(days: 365 * 3)), + builder: (context, child) { + return Theme( + data: Theme.of(context).copyWith( + colorScheme: const ColorScheme.light( + primary: Color(0xFFF95F62), + onPrimary: Colors.white, + onSurface: Color(0xFF101828), + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: const Color(0xFFF95F62), + ), + ), + ), + child: child!, + ); + }, + ); + if (picked != null) { + final formattedDate = DateFormat('EEEE, MMMM d, y').format(picked); + context.read().add( + SelectItineraryDateEvent(formattedDate), + ); + } + } } diff --git a/lib/itinerary_creation/views/itinerary_creation_view.dart b/lib/itinerary_creation/views/itinerary_creation_view.dart index b0d67cd..490e019 100644 --- a/lib/itinerary_creation/views/itinerary_creation_view.dart +++ b/lib/itinerary_creation/views/itinerary_creation_view.dart @@ -1,3 +1,4 @@ +import 'package:citycards_customer/itinerary_creation/bloc/date_selection_bloc.dart'; import 'package:citycards_customer/itinerary_creation/bloc/itinerary_steps_selection_bloc.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -101,7 +102,11 @@ class _ItineraryCreationPageState extends State { controller: _pageController, physics: const NeverScrollableScrollPhysics(), children: [ - DateSelectionView(), + BlocProvider(create: (_){ + return UpdateSelectedDateBloc(); + }, + child: DateSelectionView(), + ), CitySelectionView(), EnergySelectionView(), KidsSelectionView(), diff --git a/lib/main.dart b/lib/main.dart index 263d9bc..3b91eac 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -29,7 +29,7 @@ class MyApp extends StatelessWidget { builder: (context, child) { return MaterialApp( onGenerateRoute: _appRouter.onGenerateRoute, - initialRoute: RouteConstants.itineraryCreationStart, + initialRoute: RouteConstants.hotelOffer, debugShowCheckedModeBanner: false, title: 'City Cards', theme: ThemeData( diff --git a/pubspec.lock b/pubspec.lock index d1431d7..dca9f12 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -139,6 +139,14 @@ packages: url: "https://pub.dev" source: hosted version: "4.1.2" + intl: + dependency: "direct main" + description: + name: intl + sha256: "3df61194eb431efc39c4ceba583b95633a403f46c9fd341e550ce0bfa50e9aa5" + url: "https://pub.dev" + source: hosted + version: "0.20.2" leak_tracker: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index aa5877d..9b73622 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -37,6 +37,7 @@ dependencies: # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.8 flutter_screenutil: ^5.9.3 + intl: ^0.20.2 dev_dependencies: flutter_test: