[Compass App] Booking screen (#2380)

This PR adds the Booking screen at the end of the main app flow.

After the user selects `Activity`s, these get stored in the
`ItineraryConfig` and then the user navigates to the `BookingScreen`.
In the `BookingScreen`, a `Booking` is generated with the
`BookingCreateComponent`.
This component communicates with multiple repositories, and it is a bit
more complex than the average view model, something that we want to show
as discussed in the previous PRs.

<details>
<summary>Screenshots</summary>


![image](https://github.com/user-attachments/assets/6a9d8d5b-0d2c-4724-8aca-d750186651b7)

![image](https://github.com/user-attachments/assets/0ef4d00e-e67b-4ec6-9ea3-28511ed4c2b8)

</details>

In the `BookingScreen`, the user can tap on "share trip" which displays
the OS share sheet functionality. This uses the plugin `share_plus`, but
the functionality is also wrapped in the `BookingShareComponent`, which
takes a `Booking` object and creates a shareable string, then calls to
the `Share.share()` method from `share_plus`. But the `share_plus`
dependency is also injected into the `BookingShareComponent`, allowing
us to unit test without plugin dependencies.

This is an example of a shared booking to instant messaging:


![image](https://github.com/user-attachments/assets/5a559080-4f9a-45e6-a736-ab849a7adc39)

**TODO**

- I want to take a look at the whole experience on mobile, as I noticed
some inconsistent UI and navigation issues that I couldn't see on
Desktop. I will submit those in a new PR.
- We also talked about user authentication in the design document. I
will work on that once we are happy with the main app flow.

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md
[CLA]: https://cla.developers.google.com/
[Discord]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

Author: miquelbeltran

compass_app/app/android/settings.gradle

@@ -19,7 +19,7 @@ pluginManagement {
 plugins {
     id "dev.flutter.flutter-plugin-loader" version "1.0.0"
     id "com.android.application" version "7.3.0" apply false
-    id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+    id "org.jetbrains.kotlin.android" version "1.8.0" apply false
 }
 
 include ":app"

compass_app/app/lib/config/dependencies.dart

@@ -13,6 +13,23 @@ import '../data/repositories/destination/destination_repository_remote.dart';
 import '../data/repositories/itinerary_config/itinerary_config_repository.dart';
 import '../data/repositories/itinerary_config/itinerary_config_repository_memory.dart';
 import '../data/services/api_client.dart';
+import '../ui/booking/components/booking_create_component.dart';
+import '../ui/booking/components/booking_share_component.dart';
+
+/// Shared providers for all configurations.
+List<SingleChildWidget> _sharedProviders = [
+  Provider(
+    lazy: true,
+    create: (context) => BookingCreateComponent(
+      destinationRepository: context.read(),
+      activityRepository: context.read(),
+    ),
+  ),
+  Provider(
+    lazy: true,
+    create: (context) => BookingShareComponent.withSharePlus(),
+  ),
+];
 
 /// Configure dependencies for remote data.
 /// This dependency list uses repositories that connect to a remote server.
@@ -38,6 +55,7 @@ List<SingleChildWidget> get providersRemote {
     Provider.value(
       value: ItineraryConfigRepositoryMemory() as ItineraryConfigRepository,
     ),
+    ..._sharedProviders,
   ];
 }
 
@@ -57,5 +75,6 @@ List<SingleChildWidget> get providersLocal {
     Provider.value(
       value: ItineraryConfigRepositoryMemory() as ItineraryConfigRepository,
     ),
+    ..._sharedProviders,
   ];
 }

compass_app/app/lib/routing/router.dart

@@ -3,6 +3,8 @@ import 'package:provider/provider.dart';
 
 import '../ui/activities/view_models/activities_viewmodel.dart';
 import '../ui/activities/widgets/activities_screen.dart';
+import '../ui/booking/widgets/booking_screen.dart';
+import '../ui/booking/view_models/booking_viewmodel.dart';
 import '../ui/results/view_models/results_viewmodel.dart';
 import '../ui/results/widgets/results_screen.dart';
 import '../ui/search_form/view_models/search_form_viewmodel.dart';
@@ -47,6 +49,19 @@ final router = GoRouter(
             );
           },
         ),
+        GoRoute(
+          path: 'booking',
+          builder: (context, state) {
+            final viewModel = BookingViewModel(
+              itineraryConfigRepository: context.read(),
+              bookingComponent: context.read(),
+              shareComponent: context.read(),
+            );
+            return BookingScreen(
+              viewModel: viewModel,
+            );
+          },
+        ),
       ],
     ),
   ],

compass_app/app/lib/ui/activities/view_models/activities_viewmodel.dart

@@ -14,14 +14,7 @@ class ActivitiesViewModel extends ChangeNotifier {
   })  : _activityRepository = activityRepository,
         _itineraryConfigRepository = itineraryConfigRepository {
     loadActivities = Command0(_loadActivities)..execute();
-    saveActivities = Command0(() async {
-      _log.shout(
-        'Save activities not implemented',
-        null,
-        StackTrace.current,
-      );
-      return Result.error(Exception('Not implemented'));
-    });
+    saveActivities = Command0(_saveActivities);
   }
 
   final _log = Logger('ActivitiesViewModel');
@@ -62,6 +55,8 @@ class ActivitiesViewModel extends ChangeNotifier {
       return Result.error(Exception('Destination not found'));
     }
 
+    _selectedActivities.addAll(result.asOk.value.activities);
+
     final resultActivities =
         await _activityRepository.getByDestination(destinationRef);
     switch (resultActivities) {
@@ -118,4 +113,26 @@ class ActivitiesViewModel extends ChangeNotifier {
     _log.finest('Activity $activityRef removed');
     notifyListeners();
   }
+
+  Future<Result<void>> _saveActivities() async {
+    final resultConfig = await _itineraryConfigRepository.getItineraryConfig();
+    if (resultConfig is Error) {
+      _log.warning(
+        'Failed to load stored ItineraryConfig',
+        resultConfig.asError.error,
+      );
+      return resultConfig;
+    }
+
+    final itineraryConfig = resultConfig.asOk.value;
+    final result = await _itineraryConfigRepository.setItineraryConfig(
+        itineraryConfig.copyWith(activities: _selectedActivities.toList()));
+    if (result is Error) {
+      _log.warning(
+        'Failed to store ItineraryConfig',
+        result.asError.error,
+      );
+    }
+    return result;
+  }
 }

compass_app/app/lib/ui/activities/widgets/activities_header.dart

@@ -11,28 +11,32 @@ class ActivitiesHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: EdgeInsets.only(
-        left: Dimens.of(context).paddingScreenHorizontal,
-        right: Dimens.of(context).paddingScreenHorizontal,
-        top: Dimens.of(context).paddingScreenVertical,
-        bottom: Dimens.paddingVertical,
-      ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          CustomBackButton(
-            onTap: () {
-              // Navigate to ResultsScreen and edit search
-              context.go('/results');
-            },
-          ),
-          Text(
-            AppLocalization.of(context).activities,
-            style: Theme.of(context).textTheme.titleLarge,
-          ),
-          const HomeButton(),
-        ],
+    return SafeArea(
+      top: true,
+      bottom: false,
+      child: Padding(
+        padding: EdgeInsets.only(
+          left: Dimens.of(context).paddingScreenHorizontal,
+          right: Dimens.of(context).paddingScreenHorizontal,
+          top: Dimens.of(context).paddingScreenVertical,
+          bottom: Dimens.paddingVertical,
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            CustomBackButton(
+              onTap: () {
+                // Navigate to ResultsScreen and edit search
+                context.go('/results');
+              },
+            ),
+            Text(
+              AppLocalization.of(context).activities,
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            const HomeButton(),
+          ],
+        ),
       ),
     );
   }

compass_app/app/lib/ui/activities/widgets/activities_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 
 import '../../core/localization/applocalization.dart';
 import '../../core/themes/dimens.dart';
@@ -43,67 +44,71 @@ class _ActivitiesScreenState extends State<ActivitiesScreen> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      body: ListenableBuilder(
-        listenable: widget.viewModel.loadActivities,
-        builder: (context, child) {
-          if (widget.viewModel.loadActivities.completed) {
-            return child!;
-          }
-          return Column(
-            children: [
-              const ActivitiesHeader(),
-              if (widget.viewModel.loadActivities.running)
-                const Expanded(
-                    child: Center(child: CircularProgressIndicator())),
-              if (widget.viewModel.loadActivities.error)
-                Expanded(
-                  child: Center(
-                    child: ErrorIndicator(
-                      title: AppLocalization.of(context)
-                          .errorWhileLoadingActivities,
-                      label: AppLocalization.of(context).tryAgain,
-                      onPressed: widget.viewModel.loadActivities.execute,
-                    ),
-                  ),
-                ),
-            ],
-          );
-        },
-        child: ListenableBuilder(
-          listenable: widget.viewModel,
+    return PopScope(
+      canPop: false,
+      onPopInvokedWithResult: (d, r) => context.go('/results'),
+      child: Scaffold(
+        body: ListenableBuilder(
+          listenable: widget.viewModel.loadActivities,
           builder: (context, child) {
+            if (widget.viewModel.loadActivities.completed) {
+              return child!;
+            }
             return Column(
               children: [
-                Expanded(
-                  child: CustomScrollView(
-                    slivers: [
-                      const SliverToBoxAdapter(
-                        child: ActivitiesHeader(),
-                      ),
-                      ActivitiesTitle(
-                        viewModel: widget.viewModel,
-                        activityTimeOfDay: ActivityTimeOfDay.daytime,
-                      ),
-                      ActivitiesList(
-                        viewModel: widget.viewModel,
-                        activityTimeOfDay: ActivityTimeOfDay.daytime,
+                const ActivitiesHeader(),
+                if (widget.viewModel.loadActivities.running)
+                  const Expanded(
+                      child: Center(child: CircularProgressIndicator())),
+                if (widget.viewModel.loadActivities.error)
+                  Expanded(
+                    child: Center(
+                      child: ErrorIndicator(
+                        title: AppLocalization.of(context)
+                            .errorWhileLoadingActivities,
+                        label: AppLocalization.of(context).tryAgain,
+                        onPressed: widget.viewModel.loadActivities.execute,
                       ),
-                      ActivitiesTitle(
-                        viewModel: widget.viewModel,
-                        activityTimeOfDay: ActivityTimeOfDay.evening,
-                      ),
-                      ActivitiesList(
-                        viewModel: widget.viewModel,
-                        activityTimeOfDay: ActivityTimeOfDay.evening,
-                      ),
-                    ],
+                    ),
                   ),
-                ),
-                _BottomArea(viewModel: widget.viewModel),
               ],
             );
           },
+          child: ListenableBuilder(
+            listenable: widget.viewModel,
+            builder: (context, child) {
+              return Column(
+                children: [
+                  Expanded(
+                    child: CustomScrollView(
+                      slivers: [
+                        const SliverToBoxAdapter(
+                          child: ActivitiesHeader(),
+                        ),
+                        ActivitiesTitle(
+                          viewModel: widget.viewModel,
+                          activityTimeOfDay: ActivityTimeOfDay.daytime,
+                        ),
+                        ActivitiesList(
+                          viewModel: widget.viewModel,
+                          activityTimeOfDay: ActivityTimeOfDay.daytime,
+                        ),
+                        ActivitiesTitle(
+                          viewModel: widget.viewModel,
+                          activityTimeOfDay: ActivityTimeOfDay.evening,
+                        ),
+                        ActivitiesList(
+                          viewModel: widget.viewModel,
+                          activityTimeOfDay: ActivityTimeOfDay.evening,
+                        ),
+                      ],
+                    ),
+                  ),
+                  _BottomArea(viewModel: widget.viewModel),
+                ],
+              );
+            },
+          ),
         ),
       ),
     );
@@ -112,7 +117,7 @@ class _ActivitiesScreenState extends State<ActivitiesScreen> {
   void _onResult() {
     if (widget.viewModel.saveActivities.completed) {
       widget.viewModel.saveActivities.clearResult();
-      // TODO
+      context.go('/booking');
     }
 
     if (widget.viewModel.saveActivities.error) {
@@ -159,6 +164,7 @@ class _BottomArea extends StatelessWidget {
                 style: Theme.of(context).textTheme.labelLarge,
               ),
               FilledButton(
+                key: const Key('confirm-button'),
                 onPressed: viewModel.selectedActivities.isNotEmpty
                     ? viewModel.saveActivities.execute
                     : null,

compass_app/app/lib/ui/activities/widgets/activity_entry.dart

@@ -42,13 +42,14 @@ class ActivityEntry extends StatelessWidget {
                 ),
                 Text(
                   activity.name,
-                  maxLines: 1,
+                  maxLines: 2,
                   overflow: TextOverflow.ellipsis,
                   style: Theme.of(context).textTheme.bodyMedium,
                 ),
               ],
             ),
           ),
+          const SizedBox(width: 20),
           CustomCheckbox(
             key: ValueKey('${activity.ref}-checkbox'),
             value: selected,