feat(cat-voices): registration completed screen

catalyst_voices/lib/common/ext/ext.dart

@@ -1,2 +1,3 @@
 export 'brand_ext.dart';
 export 'space_ext.dart';
+export 'string_ext.dart';

catalyst_voices/lib/common/ext/string_ext.dart

@@ -0,0 +1,9 @@
+extension StringExt on String {
+  String capitalize() {
+    if (isNotEmpty) {
+      return '${this[0].toUpperCase()}${substring(1).toLowerCase()}';
+    } else {
+      return '';
+    }
+  }
+}

catalyst_voices/lib/pages/registration/account_completed/account_completed_panel.dart

@@ -0,0 +1,275 @@
+import 'package:catalyst_voices/common/ext/account_role_ext.dart';
+import 'package:catalyst_voices/common/ext/ext.dart';
+import 'package:catalyst_voices/pages/registration/widgets/next_step.dart';
+import 'package:catalyst_voices/routes/routing/account_route.dart';
+import 'package:catalyst_voices/routes/routing/spaces_route.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:catalyst_voices_models/catalyst_voices_models.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class AccountCompletedPanel extends StatelessWidget {
+  const AccountCompletedPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Expanded(
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                const _TitleText(),
+                const SizedBox(height: 10),
+                Column(
+                  children: <Widget>[
+                    _SummaryItem(
+                      image: VoicesAssets.images.registrationSummaryKeychain,
+                      title: context.l10n.registrationCompletedKeychainTitle,
+                      info: context.l10n.registrationCompletedKeychainInfo,
+                    ),
+                    BlocSelector<RegistrationCubit, RegistrationState, String>(
+                      selector: (state) =>
+                          state.walletLinkStateData.selectedWallet?.wallet.name
+                              .capitalize() ??
+                          '',
+                      builder: (context, walletName) {
+                        return _SummaryItem(
+                          image: VoicesAssets.images.registrationSummaryWallet,
+                          title: context.l10n
+                              .registrationCompletedWalletTitle(walletName),
+                          info: context.l10n
+                              .registrationCompletedWalletInfo(walletName),
+                        );
+                      },
+                    ),
+                    BlocSelector<RegistrationCubit, RegistrationState,
+                        List<AccountRole>>(
+                      selector: (state) =>
+                          state.walletLinkStateData.selectedRoles?.toList() ??
+                          state.walletLinkStateData.defaultRoles.toList(),
+                      builder: (context, roles) {
+                        return _SummaryItem(
+                          image: VoicesAssets.images.registrationSummaryRoles,
+                          title: context.l10n.registrationCompletedRolesTitle,
+                          info: context.l10n.registrationCompletedRolesInfo,
+                          footer: _RolesFooter(roles),
+                        );
+                      },
+                    ),
+                  ].separatedBy(const SizedBox(height: 10)).toList(),
+                ),
+              ],
+            ),
+          ),
+        ),
+        const _NextStep(),
+        const SizedBox(height: 10),
+        _OpenDiscoveryButton(
+          onTap: () {
+            Navigator.pop(context);
+            const DiscoveryRoute().go(context);
+          },
+        ),
+        const SizedBox(height: 10),
+        _ReviewMyAccountButton(
+          onTap: () {
+            Navigator.pop(context);
+            const AccountRoute().go(context);
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class _RolesFooter extends StatelessWidget {
+  final List<AccountRole> roles;
+
+  const _RolesFooter(this.roles);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        ...roles.map(
+          (role) => Row(
+            children: [
+              Text(
+                '1x',
+                style: Theme.of(context).textTheme.bodySmall,
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 4),
+                child: VoicesChip(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 1,
+                    horizontal: 6,
+                  ),
+                  content: Text(
+                    role.getName(context),
+                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: Theme.of(context).colors.successContainer,
+                          fontWeight: FontWeight.bold,
+                        ),
+                  ),
+                  borderRadius: const BorderRadius.all(
+                    Radius.circular(6),
+                  ),
+                  backgroundColor: Theme.of(context).colors.success,
+                ),
+              ),
+              Text(
+                context.l10n.registrationCompletedRoleRegistration,
+                style: Theme.of(context).textTheme.bodySmall,
+              ),
+            ],
+          ),
+        ),
+      ]
+          .separatedBy(
+            const SizedBox(height: 6),
+          )
+          .toList(),
+    );
+  }
+}
+
+class _SummaryItem extends StatelessWidget {
+  final AssetGenImage image;
+  final String title;
+  final String info;
+  final Widget? footer;
+
+  const _SummaryItem({
+    required this.image,
+    required this.title,
+    required this.info,
+    this.footer,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colors.elevationsOnSurfaceNeutralLv1Grey,
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              CatalystImage.asset(
+                image.path,
+                width: 52,
+                height: 52,
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      title,
+                      style: Theme.of(context).textTheme.titleSmall,
+                    ),
+                    Text(
+                      info,
+                      style: Theme.of(context).textTheme.bodySmall,
+                    ),
+                  ],
+                ),
+              ),
+              VoicesAvatar(
+                icon: VoicesAssets.icons.check.buildIcon(),
+                radius: 14,
+                padding: EdgeInsets.zero,
+                foregroundColor: Theme.of(context).colors.iconsPrimary,
+                backgroundColor:
+                    Theme.of(context).colors.elevationsOnSurfaceNeutralLv1White,
+              ),
+            ],
+          ),
+          if (footer != null) ...[
+            const VoicesDivider(
+              indent: 70,
+              endIndent: 0,
+            ),
+            Padding(
+              padding: const EdgeInsets.only(left: 70),
+              child: footer,
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+class _TitleText extends StatelessWidget {
+  const _TitleText();
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final color = theme.colors.textOnPrimaryLevel1;
+
+    return Text(
+      context.l10n.registrationCompletedSummaryHeader,
+      style: theme.textTheme.titleMedium?.copyWith(color: color),
+    );
+  }
+}
+
+class _NextStep extends StatelessWidget {
+  const _NextStep();
+
+  @override
+  Widget build(BuildContext context) {
+    return const NextStep(null);
+  }
+}
+
+class _OpenDiscoveryButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _OpenDiscoveryButton({
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return VoicesFilledButton(
+      onTap: onTap,
+      child: Text(context.l10n.registrationCompletedDiscoveryButton),
+    );
+  }
+}
+
+class _ReviewMyAccountButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _ReviewMyAccountButton({
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return VoicesTextButton(
+      onTap: onTap,
+      child: Text(context.l10n.registrationCompletedAccountButton),
+    );
+  }
+}

catalyst_voices/lib/pages/registration/pictures/account_completed_picture.dart

@@ -0,0 +1,15 @@
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:flutter/material.dart';
+
+class AccountCompletedPicture extends StatelessWidget {
+  const AccountCompletedPicture({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CatalystImage.asset(
+      VoicesAssets.images.welcomeIllustration.path,
+    );
+  }
+}

catalyst_voices/lib/pages/registration/registration_details_panel.dart

@@ -1,3 +1,4 @@
+import 'package:catalyst_voices/pages/registration/account_completed/account_completed_panel.dart';
 import 'package:catalyst_voices/pages/registration/create_keychain/create_keychain_panel.dart';
 import 'package:catalyst_voices/pages/registration/finish_account/finish_account_creation_panel.dart';
 import 'package:catalyst_voices/pages/registration/get_started/get_started_panel.dart';
@@ -26,7 +27,7 @@ class RegistrationDetailsPanel extends StatelessWidget {
           CreateKeychainStep(:final stage) => CreateKeychainPanel(stage: stage),
           FinishAccountCreationStep() => const FinishAccountCreationPanel(),
           WalletLinkStep(:final stage) => WalletLinkPanel(stage: stage),
-          AccountCompletedStep() => const Placeholder(),
+          AccountCompletedStep() => const AccountCompletedPanel(),
         };
       },
     );

catalyst_voices/lib/pages/registration/registration_dialog.dart

@@ -7,6 +7,7 @@ import 'package:catalyst_voices/pages/registration/registration_exit_confirm_dia
 import 'package:catalyst_voices/pages/registration/registration_info_panel.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
+import 'package:catalyst_voices_models/catalyst_voices_models.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -56,9 +57,15 @@ class _RegistrationDialogState extends State<RegistrationDialog>
         onPopInvokedWithResult: (didPop, result) {
           unawaited(_confirmedExit(context, didPop: didPop));
         },
-        child: const VoicesTwoPaneDialog(
-          left: RegistrationInfoPanel(),
-          right: RegistrationDetailsPanel(),
+        child: BlocSelector<RegistrationCubit, RegistrationState, bool>(
+          selector: (state) => state.step is! AccountCompletedStep,
+          builder: (context, showCloseButton) {
+            return VoicesTwoPaneDialog(
+              left: const RegistrationInfoPanel(),
+              right: const RegistrationDetailsPanel(),
+              showCloseButton: showCloseButton,
+            );
+          },
         ),
       ),
     );

catalyst_voices/lib/pages/registration/registration_info_panel.dart

@@ -1,5 +1,6 @@
 import 'package:catalyst_voices/pages/registration/bloc_unlock_password_builder.dart';
 import 'package:catalyst_voices/pages/registration/create_keychain/bloc_seed_phrase_builder.dart';
+import 'package:catalyst_voices/pages/registration/pictures/account_completed_picture.dart';
 import 'package:catalyst_voices/pages/registration/pictures/keychain_picture.dart';
 import 'package:catalyst_voices/pages/registration/pictures/keychain_with_password_picture.dart';
 import 'package:catalyst_voices/pages/registration/pictures/password_picture.dart';
@@ -131,7 +132,10 @@ class RegistrationInfoPanel extends StatelessWidget {
         ),
       CreateKeychainStep(:final stage) => buildKeychainStageHeader(stage),
       WalletLinkStep(:final stage) => buildWalletLinkStageHeader(stage),
-      AccountCompletedStep() => _HeaderStrings(title: 'TODO'),
+      AccountCompletedStep() => _HeaderStrings(
+          title: context.l10n.registrationCompletedTitle,
+          subtitle: context.l10n.registrationCompletedSubtitle,
+        ),
     };
   }
 }
@@ -194,7 +198,7 @@ class _RegistrationPicture extends StatelessWidget {
       CreateKeychainStep(:final stage) => buildKeychainStagePicture(stage),
       FinishAccountCreationStep() => const KeychainWithPasswordPicture(),
       WalletLinkStep(:final stage) => buildWalletLinkStagePicture(stage),
-      AccountCompletedStep() => const KeychainPicture(),
+      AccountCompletedStep() => const AccountCompletedPicture(),
     };
   }
 }