feat: add an sms otp pincode screen (#115)

## Description

Implement a screen to handle sms otp pin codes

Result

Email Confirmation
<img src =
"https://user-images.githubusercontent.com/17765231/224350209-056957e1-9005-4a81-bc50-12e9c19df1f2.jpeg"
width = "320" height = "700">


SMS/Phone Confirmation
<img src =
"https://user-images.githubusercontent.com/17765231/224350177-9158edc7-cd2f-4562-9fa7-27f3960d91d9.jpeg"
width = "320" height = "700">


## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [x] ✨ New feature (non-breaking change which adds functionality)
- [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read and ran all relevant commands as specififed in the Running
Tests section of the [Contributor Guide].
- [x] The title of the PR follows the [Conventional Commits] guideline
- [x] My local branch follows the naming standards in the [Deepsource
Branch Naming Convention] or [Biodiversity Branch Naming Convention]
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated `pubspec.yaml` with an appropriate new version according
to the [pub versioning philosophy],
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] All existing and new tests are passing.


[Contributor Guide]:
https://github.com/FlutterPlaza/.github/blob/main/CONTRIBUTING.md
[Conventional Commits]:
https://www.conventionalcommits.org/en/v1.0.0-beta.4/
[pub versioning philosophy]: https://dart.dev/tools/pub/versioning
[Biodiversity Branch Naming Convention]: https://bit.ly/3DyYSwM
[Deepsource Branch Naming Convention]: https://bit.ly/3Y08Gs4

lib/core/presentation/theming/colors/colors.dart

@@ -15,6 +15,8 @@ class _AppColors {
   static Color onSurfaceW = Color(0xfff7f7f7); // const Color(0xff808191);
   static Color greyLight = Color(0xFFABABAB);
 
+  static Color lightGrey = Color(0xffA7A7A7);
+
   static Color getShade(Color color, {bool darker = false, double value = .1}) {
     assert(value >= 0 && value <= 1, 'verify domain interval');
 

lib/core/presentation/theming/themes/light_theme.dart

@@ -35,8 +35,8 @@ ThemeData whiteTheme(BuildContext context, BoxConstraints cts) {
           .green, // set to odd color so we can see which component in the UI is affected
       inversePrimary: Colors
           .yellow, // set to odd color so we can see which component in the UI is affected
-      outline: Colors
-          .purple, // set to odd color so we can see which component in the UI is affected
+      outline: _AppColors
+          .lightGrey, // set to odd color so we can see which component in the UI is affected
       surface: _AppColors.bgColorW,
       onSurface: _AppColors.onSurfaceW,
       background: _AppColors.bgColorW,

lib/core/presentation/widget/confirmation_screen_actions.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:fpb/core/presentation/widget/fpb_button.dart';
+import 'package:fpb/l10n/l10n.dart';
+
+class ConfirmationScreenAction extends StatelessWidget {
+  const ConfirmationScreenAction({
+    Key? key,
+    required this.confirmButtonLabel,
+    required this.onTapConfirmButton,
+    required this.onTapContactUsButton,
+  }) : super(key: key);
+
+  final String confirmButtonLabel;
+  final void Function() onTapConfirmButton;
+  final void Function() onTapContactUsButton;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final theme = Theme.of(context);
+    final style = theme.textTheme;
+    final colors = theme.colorScheme;
+
+    return LayoutBuilder(builder: (context, box) {
+      return Container(
+        height: box.maxHeight * .17,
+        width: box.maxWidth,
+        decoration: BoxDecoration(
+          color: colors.secondary,
+        ),
+        child: Padding(
+          padding: EdgeInsets.symmetric(horizontal: box.maxHeight * .035),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              FpbButton(
+                label: confirmButtonLabel,
+                onTap: onTapConfirmButton,
+                backgroundColor: colors.scrim,
+                borderSideColor: colors.outline,
+                textColor: colors.outline,
+              ),
+              SizedBox(
+                height: box.maxHeight * .03,
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Text(
+                    l10n.confirmPhoneNumberNeedHelpLink,
+                    style: style.labelMedium?.copyWith(
+                      color: colors.outline,
+                      fontSize: 12.0,
+                    ),
+                  ),
+                  InkWell(
+                    child: Text(
+                      l10n.confirmPhoneNumberContactUs,
+                      style: style.labelMedium?.copyWith(
+                        fontWeight: FontWeight.w700,
+                        color: theme.colorScheme.onSurface,
+                        fontSize: 12.0,
+                      ),
+                    ),
+                    onTap: onTapContactUsButton,
+                  ),
+                ],
+              )
+            ],
+          ),
+        ),
+      );
+    });
+  }
+}

lib/core/presentation/widget/confirmation_screen_illustration.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:fpb/assets/fpb_svg.dart';
+
+class ConfirmationScreenIllustration extends StatelessWidget {
+  const ConfirmationScreenIllustration({
+    super.key,
+    required this.box,
+  });
+
+  final BoxConstraints box;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: box.maxHeight * .23,
+      width: box.maxWidth,
+      child: SvgPicture.asset(
+        SvgNames.emailConfirmation,
+        width: box.maxWidth,
+        height: 0.25 * box.maxHeight,
+      ),
+    );
+  }
+}

lib/core/presentation/widget/my_button.dart → lib/core/presentation/widget/fpb_button.dart

@@ -10,6 +10,9 @@ class FpbButton extends StatelessWidget {
     this.width,
     this.leading,
     this.spaceAround = false,
+    this.backgroundColor,
+    this.borderSideColor,
+    this.textColor,
   });
 
   final String label;
@@ -19,17 +22,16 @@ class FpbButton extends StatelessWidget {
   final double? width;
   final Widget? leading;
   final bool spaceAround;
+  final Color? backgroundColor;
+  final Color? borderSideColor;
+  final Color? textColor;
 
   @override
   Widget build(BuildContext context) {
-    final text = Text(
-      label,
-      style: Theme.of(context).textTheme.titleMedium?.copyWith(
-            color: Colors.white,
-            // fontWeight: FontWeight.w400,
-          ),
-    );
     final size = MediaQuery.of(context).size;
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+
     return SizedBox(
       width: width ?? size.width,
       height: height ?? size.height * 0.075,
@@ -41,13 +43,14 @@ class FpbButton extends StatelessWidget {
               ? MainAxisAlignment.spaceAround
               : MainAxisAlignment.spaceBetween,
           children: [
-            leading != null
-                ? Transform.translate(
-                    offset: const Offset(-10, 0),
-                    child: leading,
-                  )
-                : const SizedBox.shrink(),
-            text,
+            leading ?? const SizedBox.shrink(),
+            Text(
+              label,
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    color: textColor ?? colors.surface,
+                    // fontWeight: FontWeight.w400,
+                  ),
+            ),
             if (trailing != null)
               Transform.translate(
                 offset: const Offset(-15, 0),
@@ -57,6 +60,17 @@ class FpbButton extends StatelessWidget {
               const SizedBox.shrink()
           ],
         ),
+        style: ButtonStyle(
+          backgroundColor:
+              MaterialStateProperty.all<Color>(backgroundColor ?? colors.error),
+          side: MaterialStateProperty.all(
+            BorderSide(
+                color: borderSideColor ?? colors.error,
+                width: 1.0,
+                style: BorderStyle.solid),
+          ),
+          elevation: MaterialStateProperty.all(0.0),
+        ),
       ),
     );
   }

lib/core/presentation/widget/otp_group_text_field.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:fpb/core/presentation/widget/otp_input.dart';
+
+class OtpGroupTextField extends StatelessWidget {
+  const OtpGroupTextField({
+    super.key,
+    required this.box,
+  });
+
+  final BoxConstraints box;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Wrap(
+          children: [
+            OtpInput(
+              box: box,
+            ),
+            OtpInput(
+              box: box,
+            ),
+            OtpInput(
+              box: box,
+            ),
+            OtpInput(
+              box: box,
+            ),
+            OtpInput(
+              box: box,
+            ),
+            OtpInput(
+              box: box,
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

lib/core/presentation/widget/otp_input.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class OtpInput extends StatelessWidget {
+  const OtpInput({
+    super.key,
+    required this.box,
+  });
+
+  final BoxConstraints box;
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: box.maxHeight * .0065),
+      child: Container(
+        height: box.maxHeight * .065,
+        width: box.maxWidth * .12,
+        child: Flexible(
+          fit: FlexFit.loose,
+          child: TextFormField(
+            cursorColor: colors.scrim,
+            textAlign: TextAlign.center,
+            decoration: InputDecoration(
+                border: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(box.maxHeight * .15))),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/email_confirmation/email_confirmation.dart

@@ -1 +1 @@
-export 'view/email_confirmation_page.dart';
+export 'view/email_confirmation_screen.dart';