Issue-81: Enhancements on the onboarding flow

ios/Runner/AppDelegate.swift

@@ -1,7 +1,7 @@
 import UIKit
 import Flutter
 
-@UIApplicationMain
+@main
 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,

lib/src/core/routes/app_route.dart

@@ -19,5 +19,6 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: AddInvoiceRoute.page),
     AutoRoute(page: OnBoardingRoute.page),
     AutoRoute(page: AddressRoute.page),
+    AutoRoute(page: OnboardingSuccessRoute.page),
   ];
 }

lib/src/core/settings/const.dart

@@ -1,5 +1,7 @@
-
+const double minorMargin = 8;
 const double regularMargin = 16;
 const double marginBetweenFields = 16;
 const double bigBetweenFields = 24;
 const double extraBigBetweenFields = 32;
+const double extraLargeMargin = 64;
+const double defaultPageMaxWidth = 396.0;

lib/src/designsystem/constrained_scaffold.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+class ConstrainedScaffold extends StatefulWidget {
+  final PreferredSizeWidget? appBar;
+  final Widget? body;
+  final double maxWidth;
+  final Widget? floatingActionButton;
+  final FloatingActionButtonLocation? floatingActionButtonLocation;
+  final FloatingActionButtonAnimator? floatingActionButtonAnimator;
+  final List<Widget>? persistentFooterButtons;
+  final AlignmentDirectional persistentFooterAlignment;
+  final Widget? drawer;
+  final DrawerCallback? onDrawerChanged;
+  final Widget? endDrawer;
+  final DrawerCallback? onEndDrawerChanged;
+  final Widget? bottomNavigationBar;
+  final Widget? bottomSheet;
+  final Color? backgroundColor;
+  final bool? resizeToAvoidBottomInset;
+  final bool primary;
+  final DragStartBehavior drawerDragStartBehavior;
+  final bool extendBody;
+  final bool extendBodyBehindAppBar;
+  final Color? drawerScrimColor;
+  final double? drawerEdgeDragWidth;
+  final bool drawerEnableOpenDragGesture;
+  final bool endDrawerEnableOpenDragGesture;
+  final String? restorationId;
+
+  const ConstrainedScaffold({
+    super.key,
+    this.appBar,
+    this.maxWidth = double.infinity,
+    this.body,
+    this.floatingActionButton,
+    this.floatingActionButtonLocation,
+    this.floatingActionButtonAnimator,
+    this.persistentFooterButtons,
+    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
+    this.drawer,
+    this.onDrawerChanged,
+    this.endDrawer,
+    this.onEndDrawerChanged,
+    this.bottomNavigationBar,
+    this.bottomSheet,
+    this.backgroundColor,
+    this.resizeToAvoidBottomInset,
+    this.primary = true,
+    this.drawerDragStartBehavior = DragStartBehavior.start,
+    this.extendBody = false,
+    this.extendBodyBehindAppBar = false,
+    this.drawerScrimColor,
+    this.drawerEdgeDragWidth,
+    this.drawerEnableOpenDragGesture = true,
+    this.endDrawerEnableOpenDragGesture = true,
+    this.restorationId,
+  });
+
+  @override
+  State<ConstrainedScaffold> createState() => _ConstrainedScaffoldState();
+}
+
+class _ConstrainedScaffoldState extends State<ConstrainedScaffold> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: widget.appBar,
+      body: Center(
+        child: ConstrainedBox(
+          constraints: BoxConstraints(maxWidth: widget.maxWidth),
+          child: widget.body,
+        ),
+      ),
+      floatingActionButton: widget.floatingActionButton,
+      floatingActionButtonLocation: widget.floatingActionButtonLocation,
+      floatingActionButtonAnimator: widget.floatingActionButtonAnimator,
+      persistentFooterButtons: widget.persistentFooterButtons,
+      persistentFooterAlignment: widget.persistentFooterAlignment,
+      drawer: widget.drawer,
+      onDrawerChanged: widget.onDrawerChanged,
+      endDrawer: widget.endDrawer,
+      onEndDrawerChanged: widget.onEndDrawerChanged,
+      bottomNavigationBar: widget.bottomNavigationBar,
+      bottomSheet: widget.bottomSheet,
+      backgroundColor: widget.backgroundColor,
+      resizeToAvoidBottomInset: widget.resizeToAvoidBottomInset,
+      primary: widget.primary,
+      drawerDragStartBehavior: widget.drawerDragStartBehavior,
+      extendBody: widget.extendBody,
+      extendBodyBehindAppBar: widget.extendBodyBehindAppBar,
+      drawerScrimColor: widget.drawerScrimColor,
+      drawerEdgeDragWidth: widget.drawerEdgeDragWidth,
+      drawerEnableOpenDragGesture: widget.drawerEnableOpenDragGesture,
+      endDrawerEnableOpenDragGesture: widget.endDrawerEnableOpenDragGesture,
+      restorationId: widget.restorationId,
+    );
+  }
+}

lib/src/presentation/add_invoice/add_invoice_navigation_flow.dart

@@ -30,7 +30,7 @@ class AddInvoiceNavigationFlow implements InfoNavigationFlow {
 
   @override
   void onFinishFlow() {
-    _router.popUntilRoot();
+    _router.push(InvoiceListRoute());
   }
 
   @override
@@ -63,9 +63,13 @@ class AddInvoiceNavigationFlow implements InfoNavigationFlow {
         break;
       case ServiceInfoRoute.name:
         _router.push(
-          AddInvoiceRoute(flow: this),
+          OnboardingSuccessRoute(),
         );
         break;
+
+      case OnBoardingRoute.name:
+        _router.push(AddInvoiceRoute(flow: this));
+        break;
     }
   }
 

lib/src/presentation/invoice_list/list_page.dart

@@ -1,3 +1,4 @@
+import 'package:ambush_app/src/designsystem/constrained_scaffold.dart';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -22,7 +23,8 @@ class InvoiceListPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
-    return Scaffold(
+    return ConstrainedScaffold(
+      maxWidth: double.infinity,
       appBar: AppBar(
         title: SvgPicture.asset(
           'assets/extended_logo.svg',

lib/src/presentation/onboarding/onboarding_navigation_flow.dart

@@ -51,8 +51,11 @@ class OnBoardingNavigationFlow implements InfoNavigationFlow {
         );
         break;
       case ServiceInfoRoute.name:
-        _router.replaceAll([InvoiceListRoute()]);
+        _router.push(OnboardingSuccessRoute());
         break;
+
+      case OnboardingSuccessRoute.name:
+        _router.push(InvoiceListRoute());
     }
   }
 

lib/src/presentation/settings/address/address_page.dart

@@ -25,7 +25,7 @@ class AddressPage extends StatelessWidget {
         return BaseSettingsPage(
           title: "Company Address",
           infoText:
-              "With your information as a contractor, fill the details below",
+              "Now we need to know where your company is located. Please provide the business address of your company, not the company that hired you",
           buttonText: screenConfig.ctaText,
           onButtonPressed: () async {
             await onNextStepClick();

lib/src/presentation/settings/bank/bank_info_page.dart

@@ -28,7 +28,7 @@ class BankInfoPage extends StatelessWidget {
     return Observer(builder: (context) {
       return BaseSettingsPage(
         title: "Bank information",
-        infoText: "Fill in the form with your company's banking information",
+        infoText: "Enter your company’s bank account details. This information will be used to process payments for the services you've provided",
         buttonText: screenConfig.ctaText,
         onButtonPressed: () async {
           await _onNextClicked();

lib/src/presentation/settings/base_settings_page.dart

@@ -1,3 +1,4 @@
+import 'package:ambush_app/src/designsystem/constrained_scaffold.dart';
 import 'package:flutter/material.dart';
 import 'package:ambush_app/src/core/settings/const.dart';
 import 'package:ambush_app/src/designsystem/buttons.dart';
@@ -21,8 +22,8 @@ class BaseSettingsPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
-    final colorScheme = Theme.of(context).colorScheme;
-    return Scaffold(
+    return ConstrainedScaffold(
+      maxWidth: defaultPageMaxWidth,
       appBar: AppBar(title: Text(title)),
       body: ListView(
         padding: const EdgeInsets.symmetric(
@@ -35,9 +36,7 @@ class BaseSettingsPage extends StatelessWidget {
               padding: const EdgeInsets.only(bottom: 36),
               child: Text(
                 infoText!,
-                style: textTheme.titleMedium?.copyWith(
-                  color: colorScheme.primary,
-                ),
+                style: textTheme.titleMedium?.copyWith(),
               ),
             ),
           form,
@@ -55,7 +54,6 @@ class BaseSettingsPage extends StatelessWidget {
       ),
     );
   }
-
 }
 
 class BasicInfoPageConfig {

lib/src/presentation/settings/basic/basic_info_page.dart

@@ -23,7 +23,7 @@ class BasicInfoPage extends StatelessWidget {
     return Observer(builder: (context) {
       return BaseSettingsPage(
         title: "Contractor Information",
-        infoText: "With your information as a contractor, fill the details below",
+        infoText: "Please enter your company’s information. This is where you tell us who you are and the name of the company you represent as a contractor",
         buttonText: screenConfig.ctaText,
         onButtonPressed: () async {
           await onNextStepClick();

lib/src/presentation/settings/service/service_info_page.dart

@@ -29,7 +29,7 @@ class ServiceInfoPage extends StatelessWidget {
         return BaseSettingsPage(
           title: "Service information",
           infoText:
-              "Fill in the form with information about the service provided",
+              "Describe the service your company provides. We want to know the details of what you and your company offer. Remember, this is about the service your company delivers.",
           onButtonPressed: () async {
             await _onNextClick();
           },

lib/src/presentation/settings/settings_page.dart

@@ -1,3 +1,4 @@
+import 'package:ambush_app/src/designsystem/constrained_scaffold.dart';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:ambush_app/src/core/routes/app_route.gr.dart';
@@ -18,7 +19,8 @@ class SettingsPage extends StatelessWidget {
       ctaText: 'Save',
     );
 
-    return Scaffold(
+    return ConstrainedScaffold(
+      maxWidth: double.infinity,
       appBar: AppBar(title: const Text("Settings")),
       body: Observer(builder: (_) {
         return ListView(

lib/src/presentation/settings/success/onboarding_success_screen.dart

@@ -0,0 +1,110 @@
+import 'package:ambush_app/src/core/routes/app_route.gr.dart';
+import 'package:ambush_app/src/core/settings/const.dart';
+import 'package:ambush_app/src/designsystem/constrained_scaffold.dart';
+import 'package:auto_route/auto_route.dart';
+import 'package:ambush_app/src/designsystem/buttons.dart';
+import 'package:ambush_app/src/presentation/add_invoice/add_invoice_navigation_flow.dart';
+import 'package:flutter/material.dart';
+
+@RoutePage()
+class OnboardingSuccessPage extends StatelessWidget {
+  const OnboardingSuccessPage({super.key});
+
+  void _onAddClick(BuildContext context) {
+    final navigator = context.router;
+    navigator.replace(InvoiceListRoute());
+    final flow = AddInvoiceNavigationFlow(navigator);
+    flow.start();
+  }
+
+  void _willDoThisLater(BuildContext context) {
+    context.router.replaceAll([InvoiceListRoute()]);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final colorTheme = Theme.of(context).colorScheme;
+
+    return ConstrainedScaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          icon: Icon(Icons.arrow_back),
+          onPressed: () {
+            context.router.push(InvoiceListRoute());
+          },
+        ),
+        elevation: 0,
+        backgroundColor: Colors.transparent,
+      ),
+      maxWidth: defaultPageMaxWidth,
+      body: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          SizedBox(height: extraBigBetweenFields),
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Success!',
+                style: textTheme.titleLarge,
+              ),
+              SizedBox(height: minorMargin),
+              Text(
+                "All set! YOUR company's information has been\nsuccessfully submitted. We're ready to move\nforward with your invoice!",
+                textAlign: TextAlign.start,
+                style: textTheme.bodyLarge?.copyWith(color: Colors.grey[700]),
+              ),
+            ],
+          ),
+          SizedBox(height: extraBigBetweenFields),
+          Container(
+            height: 120,
+            width: 120,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(16),
+            ),
+            child: Center(
+              child: Image.asset(
+                'assets/illustration_success.png',
+                fit: BoxFit.contain,
+              ),
+            ),
+          ),
+          SizedBox(height: extraLargeMargin),
+          Padding(
+            padding: const EdgeInsets.all(minorMargin),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                TextButton(
+                  onPressed: () {
+                    _willDoThisLater(context);
+                  },
+                  child: Text(
+                    "I'll do it later",
+                    style: TextStyle(
+                      color: colorTheme.primary,
+                      fontSize: 16,
+                    ),
+                  ),
+                ),
+                SizedBox(
+                  width: regularMargin,
+                ),
+                PrimaryButton(
+                    text: "Create Invoice",
+                    onPressed: () {
+                      _onAddClick(context);
+                    }),
+              ],
+            ),
+          ),
+          SizedBox(height: bigBetweenFields),
+        ],
+      ),
+    );
+  }
+}

pubspec.yaml

@@ -131,6 +131,7 @@
       - assets/extended_logo.svg
       - assets/currency.json
       - assets/icons/
+      - assets/illustration_success.png
 
   #Font mapping -------------------
   #FontWeight.w100: 'Thin',