TF-233 Add presentation for create new mailbox

core/lib/presentation/extensions/color_extension.dart

@@ -74,6 +74,12 @@ extension AppColor on Color {
   static const colorFilterMessageDisabled = Color(0xFF99A2AD);
   static const colorFilterMessageEnabled = Color(0xFF007AFF);
   static const colorDefaultCupertinoActionSheet = Color(0x66000000);
+  static const colorDisableMailboxCreateButton = Color(0x2E3C3C43);
+  static const colorInputBorderErrorVerifyName = Color(0xFFE64646);
+  static const colorInputBorderCreateMailbox = Color(0x1F000000);
+  static const colorInputBackgroundErrorVerifyName = Color(0xFFFAEBEB);
+  static const colorInputBackgroundCreateMailbox = Color(0xFFF2F3F5);
+  static const colorHintInputCreateMailbox= Color(0xFFA9B4C2);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/utils/responsive_utils.dart

@@ -10,10 +10,10 @@ class ResponsiveUtils {
   static const double _loginTextFieldWidthLargeScreen = 320.0;
   static const double _loginButtonWidth = 240.0;
 
-  static const double _tabletHorizontalMargin = 120.0;
+  final double tabletHorizontalMargin = 120.0;
-  static const double _tabletVerticalMargin = 200.0;
+  final double tabletVerticalMargin = 200.0;
-  static const double _desktopVerticalMargin = 120.0;
+  final double desktopVerticalMargin = 120.0;
-  static const double _desktopHorizontalMargin = 200.0;
+  final double desktopHorizontalMargin = 200.0;
 
   bool isMobileDevice(BuildContext context) => MediaQuery.of(context).size.shortestSide < 600;
 
@@ -38,47 +38,4 @@ class ResponsiveUtils {
   double getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
 
   double getWidthLoginButton() => _loginButtonWidth;
-
-  EdgeInsets getMarginDestinationPicker(BuildContext context) {
-    if (isMobileDevice(context) && isLandscape(context)) {
-      return EdgeInsets.only(
-          left: _tabletHorizontalMargin,
-          right: _tabletHorizontalMargin,
-          top: 50.0);
-    } else if (isTablet(context)) {
-      return getSizeHeightScreen(context) <= _tabletVerticalMargin * 2
-        ? EdgeInsets.symmetric(
-            horizontal: _tabletHorizontalMargin,
-            vertical: 0.0)
-        : EdgeInsets.symmetric(
-            horizontal: _tabletHorizontalMargin,
-            vertical: _tabletVerticalMargin);
-    } else if (isDesktop(context) || isTabletLarge(context)) {
-      return getSizeHeightScreen(context) <= _desktopVerticalMargin * 2
-        ? EdgeInsets.symmetric(
-            horizontal: _desktopHorizontalMargin,
-            vertical: 0.0)
-        : EdgeInsets.symmetric(
-            horizontal: _desktopHorizontalMargin,
-            vertical: _desktopVerticalMargin);
-    } else {
-      return EdgeInsets.zero;
-    }
-  }
-
-  BorderRadius radiusDestinationPicker(BuildContext context, double radius) {
-    if (isMobileDevice(context) && isLandscape(context)) {
-      return BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius));
-    } else if (isTablet(context)) {
-      return getSizeHeightScreen(context) <= _tabletVerticalMargin * 2
-          ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius))
-          : BorderRadius.circular(radius);
-    } else if (isDesktop(context) || isTabletLarge(context)) {
-      return getSizeHeightScreen(context) <= _desktopVerticalMargin * 2
-          ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius))
-          : BorderRadius.circular(radius);
-    } else {
-      return BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius));
-    }
-  }
 }

core/lib/presentation/views/text/input_decoration_builder.dart

@@ -8,40 +8,48 @@ abstract class InputDecorationBuilder {
   TextStyle? hintStyle;
   EdgeInsets? contentPadding;
   OutlineInputBorder? enabledBorder;
+  OutlineInputBorder? errorBorder;
+  String? errorText;
+  TextStyle? errorTextStyle;
 
-  InputDecorationBuilder setPrefixText(String newPrefixText) {
+  void setPrefixText(String newPrefixText) {
     prefixText = newPrefixText;
-    return this;
   }
 
-  InputDecorationBuilder setLabelText(String newLabelText) {
+  void setLabelText(String newLabelText) {
     labelText = newLabelText;
-    return this;
   }
 
-  InputDecorationBuilder setLabelStyle(TextStyle newLabelStyle) {
+  void setLabelStyle(TextStyle newLabelStyle) {
     labelStyle = newLabelStyle;
-    return this;
   }
 
-  InputDecorationBuilder setHintText(String newHintText) {
+  void setHintText(String newHintText) {
     hintText = newHintText;
-    return this;
   }
 
-  InputDecorationBuilder setHintStyle(TextStyle newHintStyle) {
+  void setHintStyle(TextStyle newHintStyle) {
     hintStyle = newHintStyle;
-    return this;
   }
 
-  InputDecorationBuilder setContentPadding(EdgeInsets newContentPadding) {
+  void setContentPadding(EdgeInsets newContentPadding) {
     contentPadding = newContentPadding;
-    return this;
   }
 
-  InputDecorationBuilder setEnabledBorder(OutlineInputBorder newEnabledBorder) {
+  void setEnabledBorder(OutlineInputBorder newEnabledBorder) {
     enabledBorder = newEnabledBorder;
-    return this;
+  }
+
+  void setErrorBorder(OutlineInputBorder newErrorBorder) {
+    errorBorder = newErrorBorder;
+  }
+
+  void setErrorText(String newText) {
+    errorText = newText;
+  }
+
+  void setErrorTextStyle(TextStyle newStyle) {
+    errorTextStyle = newStyle;
   }
 
   InputDecoration build() {
@@ -52,6 +60,9 @@ abstract class InputDecorationBuilder {
       hintText: hintText,
       hintStyle: hintStyle,
       contentPadding: contentPadding,
+      errorBorder: errorBorder,
+      errorText: errorText,
+      errorStyle: errorTextStyle,
       enabledBorder: enabledBorder);
   }
 }

lib/features/destination_picker/presentation/destination_picker_bindings.dart

@@ -32,7 +32,7 @@ class DestinationPickerBindings extends Bindings {
     Get.lazyPut<MailboxRepository>(() => Get.find<MailboxRepositoryImpl>());
     Get.lazyPut(() => GetAllMailboxInteractor(Get.find<MailboxRepository>()));
     Get.lazyPut(() => TreeBuilder());
-    Get.put(DestinationPickerController(
+    Get.lazyPut(() => DestinationPickerController(
       Get.find<GetAllMailboxInteractor>(),
       Get.find<TreeBuilder>()));
   }

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -24,9 +24,9 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
         borderOnForeground: false,
         color: Colors.transparent,
         child: Container(
-          margin: _responsiveUtils.getMarginDestinationPicker(context),
+          margin: _getMarginDestinationPicker(context),
           child: ClipRRect(
-            borderRadius: _responsiveUtils.radiusDestinationPicker(context, 20),
+            borderRadius: _radiusDestinationPicker(context, 20),
             child: GestureDetector(
               onTap: () => {},
               child: SafeArea(
@@ -194,4 +194,47 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
               ))
       .toList();
   }
+
+  EdgeInsets _getMarginDestinationPicker(BuildContext context) {
+    if (_responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)) {
+      return EdgeInsets.only(
+          left: _responsiveUtils.tabletHorizontalMargin,
+          right: _responsiveUtils.tabletHorizontalMargin,
+          top: 50.0);
+    } else if (_responsiveUtils.isTablet(context)) {
+      return _responsiveUtils.getSizeHeightScreen(context) <= _responsiveUtils.tabletVerticalMargin * 2
+          ? EdgeInsets.symmetric(
+              horizontal: _responsiveUtils.tabletHorizontalMargin,
+              vertical: 0.0)
+          : EdgeInsets.symmetric(
+              horizontal: _responsiveUtils.tabletHorizontalMargin,
+              vertical: _responsiveUtils.tabletVerticalMargin);
+    } else if (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) {
+      return _responsiveUtils.getSizeHeightScreen(context) <= _responsiveUtils.desktopVerticalMargin * 2
+          ? EdgeInsets.symmetric(
+              horizontal: _responsiveUtils.desktopHorizontalMargin,
+              vertical: 0.0)
+          : EdgeInsets.symmetric(
+              horizontal: _responsiveUtils.desktopHorizontalMargin,
+              vertical: _responsiveUtils.desktopVerticalMargin);
+    } else {
+      return EdgeInsets.zero;
+    }
+  }
+
+  BorderRadius _radiusDestinationPicker(BuildContext context, double radius) {
+    if (_responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)) {
+      return BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius));
+    } else if (_responsiveUtils.isTablet(context)) {
+      return _responsiveUtils.getSizeHeightScreen(context) <= _responsiveUtils.tabletVerticalMargin * 2
+          ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius))
+          : BorderRadius.circular(radius);
+    } else if (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) {
+      return _responsiveUtils.getSizeHeightScreen(context) <= _responsiveUtils.desktopVerticalMargin * 2
+          ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius))
+          : BorderRadius.circular(radius);
+    } else {
+      return BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius));
+    }
+  }
 }

lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart

@@ -2,9 +2,7 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
 import 'package:model/model.dart';
-import 'package:tmail_ui_user/main/routes/app_routes.dart';
 
 typedef OnBackActionClick = void Function();
 typedef OnUnreadEmailActionClick = void Function(PresentationEmail presentationEmail);
@@ -56,8 +54,7 @@ class AppBarMailWidgetBuilder {
           crossAxisAlignment: CrossAxisAlignment.center,
           mainAxisAlignment: MainAxisAlignment.end,
           children: [
-            if ((!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context))
+            if ((!_responsiveUtils.isDesktop(_context) && !_responsiveUtils.isTabletLarge(_context)))
-                || Get.currentRoute != AppRoutes.MAILBOX_DASHBOARD)
               Expanded(child: Row(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 mainAxisAlignment: MainAxisAlignment.start,
@@ -86,14 +83,6 @@ class AppBarMailWidgetBuilder {
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        // IconButton(
-        //   color: AppColor.baseTextColor,
-        //   icon: SvgPicture.asset(_imagePaths.icTrash, color: AppColor.baseTextColor, fit: BoxFit.fill),
-        //   onPressed: () {
-        //     if (_onBackActionClick != null) {
-        //       _onBackActionClick!();
-        //     }
-        //   }),
         IconButton(
           key: Key('button_mark_as_star_email'),
           icon: SvgPicture.asset(

lib/features/login/presentation/login_view.dart

@@ -96,9 +96,9 @@ class LoginView extends GetWidget<LoginController> {
             ..onChange((value) => loginController.setUrlText(value))
             ..textInputAction(TextInputAction.next)
             ..keyboardType(TextInputType.url)
-            ..textDecoration(LoginInputDecorationBuilder()
+            ..textDecoration((LoginInputDecorationBuilder()
-                .setLabelText(AppLocalizations.of(context).prefix_https)
+                ..setLabelText(AppLocalizations.of(context).prefix_https)
-                .setPrefixText(AppLocalizations.of(context).prefix_https)
+                ..setPrefixText(AppLocalizations.of(context).prefix_https))
                 .build()))
           .build()));
   }
@@ -113,9 +113,9 @@ class LoginView extends GetWidget<LoginController> {
             ..onChange((value) => loginController.setUserNameText(value))
             ..textInputAction(TextInputAction.next)
             ..keyboardType(TextInputType.emailAddress)
-            ..textDecoration(LoginInputDecorationBuilder()
+            ..textDecoration((LoginInputDecorationBuilder()
-                .setLabelText(AppLocalizations.of(context).email)
+                ..setLabelText(AppLocalizations.of(context).email)
-                .setHintText(AppLocalizations.of(context).email)
+                ..setHintText(AppLocalizations.of(context).email))
                 .build()))
           .build()));
   }
@@ -130,9 +130,9 @@ class LoginView extends GetWidget<LoginController> {
             ..obscureText(true)
             ..onChange((value) => loginController.setPasswordText(value))
             ..textInputAction(TextInputAction.done)
-            ..textDecoration(LoginInputDecorationBuilder()
+            ..textDecoration((LoginInputDecorationBuilder()
-                .setLabelText(AppLocalizations.of(context).password)
+                ..setLabelText(AppLocalizations.of(context).password)
-                .setHintText(AppLocalizations.of(context).password)
+                ..setHintText(AppLocalizations.of(context).password))
                 .build()))
           .build()));
   }

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -16,6 +16,7 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailb
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/list_mailbox_node_extension.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/mailbox_creator_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/mark_as_multiple_email_read_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/move_multiple_email_to_mailbox_state.dart';
@@ -36,6 +37,8 @@ class MailboxController extends BaseController {
   final defaultMailboxList = <PresentationMailbox>[].obs;
   final folderMailboxNodeList = <MailboxNode>[].obs;
 
+  List<PresentationMailbox> allMailboxes = <PresentationMailbox>[];
+
   jmapState.State? currentMailboxState;
 
   MailboxController(
@@ -82,6 +85,7 @@ class MailboxController extends BaseController {
     super.onData(newState);
     newState.map((success) {
       if (success is GetAllMailboxSuccess) {
+        allMailboxes = success.defaultMailboxList + success.folderMailboxList;
         currentMailboxState = success.currentMailboxState;
         defaultMailboxList.value = success.defaultMailboxList;
         _setUpMapMailboxIdDefault(success.defaultMailboxList, success.folderMailboxList);
@@ -202,6 +206,13 @@ class MailboxController extends BaseController {
     await _cachingManager.clearAll();
   }
 
+  void createNewMailbox() async {
+    final newMailboxArguments = await push(
+        AppRoutes.MAILBOX_CREATOR,
+        arguments: MailboxCreatorArguments(allMailboxes)
+    );
+  }
+
   void closeMailboxScreen() {
     mailboxDashBoardController.closeDrawer();
   }

lib/features/mailbox/presentation/mailbox_view.dart

@@ -84,7 +84,7 @@ class MailboxView extends GetWidget<MailboxController> {
         padding: EdgeInsets.only(left: 16, right: 16),
         child: IconButton(
             key: Key('mailbox_add_new_folder_button'),
-            onPressed: () => {},
+            onPressed: () => controller.createNewMailbox(),
             icon: SvgPicture.asset(imagePaths.icAddNewFolder, width: 30, height: 30, fit: BoxFit.fill)));
   }
 

lib/features/mailbox_creator/presentation/mailbox_creator_bindings.dart

@@ -0,0 +1,10 @@
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/mailbox_creator_controller.dart';
+
+class MailboxCreatorBindings extends Bindings {
+
+  @override
+  void dependencies() {
+    Get.lazyPut(() => MailboxCreatorController());
+  }
+}

lib/features/mailbox_creator/presentation/mailbox_creator_controller.dart

@@ -0,0 +1,44 @@
+
+import 'package:core/core.dart';
+import 'package:dartz/dartz.dart';
+import 'package:get/get.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/base/base_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/mailbox_creator_arguments.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+import 'package:tmail_ui_user/main/utils/app_logger.dart';
+
+class MailboxCreatorController extends BaseController {
+
+  final selectedMailbox = Rxn<PresentationMailbox>();
+
+  List<PresentationMailbox> allMailboxes = <PresentationMailbox>[];
+
+  MailboxCreatorController();
+
+  @override
+  void onReady() {
+    super.onReady();
+    final arguments = Get.arguments;
+    if (arguments is MailboxCreatorArguments) {
+      allMailboxes = arguments.allMailboxes;
+      log('allMailboxes: $allMailboxes');
+    }
+  }
+
+  @override
+  void onData(Either<Failure, Success> newState) {
+    super.onData(newState);
+  }
+
+  @override
+  void onDone() {
+  }
+
+  @override
+  void onError(error) {}
+
+  void closeMailboxCreator() {
+    popBack();
+  }
+}

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -0,0 +1,165 @@
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/mailbox_creator_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/create_mailbox_name_input_decoration_builder.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
+
+  final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+        margin: EdgeInsets.zero,
+        borderOnForeground: false,
+        color: Colors.transparent,
+        child: GestureDetector(
+          onTap: () => controller.closeMailboxCreator(),
+          child: ResponsiveWidget(
+              responsiveUtils: _responsiveUtils,
+              mobile: Container(
+                  child: _buildBody(context),
+                  width: _responsiveUtils.getSizeWidthScreen(context)),
+              tablet: Container(
+                  child: Row(
+                      children: [
+                        Expanded(flex: 1, child: _buildBody(context)),
+                        Expanded(flex: 1, child: Container(color: Colors.transparent)),
+                      ]
+                  )
+              ),
+              tabletLarge: Container(
+                  child: Row(
+                      children: [
+                        Expanded(flex: 7, child: _buildBody(context)),
+                        Expanded(flex: 13, child: Container(color: Colors.transparent)),
+                      ]
+                  )
+              ),
+              desktop: Container(
+                  child: Row(
+                      children: [
+                        Expanded(flex: 1, child: _buildBody(context)),
+                        Expanded(flex: 3, child: Container(color: Colors.transparent)),
+                      ]
+                  )
+              )
+          ),
+        )
+    );
+  }
+
+  Widget _buildBody(BuildContext context) {
+    return SafeArea(
+        top: _responsiveUtils.isMobile(context) ? true : false,
+        bottom: false,
+        left: false,
+        right: false,
+        child: GestureDetector(
+          onTap: () => FocusScope.of(context).unfocus(),
+          child: ClipRRect(
+              borderRadius: BorderRadius.only(
+                  topRight: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0),
+                  topLeft: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0)),
+              child: Drawer(
+                  child: Container(
+                      color: AppColor.colorBgMailbox,
+                      width: double.infinity,
+                      child: SafeArea(
+                        top: false,
+                        bottom: false,
+                        left: _responsiveUtils.isMobileDevice(context) ? true : false,
+                        right: _responsiveUtils.isMobileDevice(context) ? true : false,
+                        child: Column(
+                            children: [
+                              _buildAppBar(context),
+                              _buildCreateMailboxNameInput(context),
+                              _buildMailboxLocation(context),
+                            ]
+                        ),
+                      )
+                  )
+              )
+          ),
+        )
+    );
+  }
+
+  Widget _buildAppBar(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: 10, bottom: 4),
+      child: (AppBarMailboxCreatorWidget(context)
+          ..addOnCancelActionClick(() => controller.closeMailboxCreator())
+          ..addOnCreateActionClick(() {}))
+        .build());
+  }
+
+  Widget _buildCreateMailboxNameInput(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+      child: (TextFieldBuilder()
+          ..key(Key('create_mailbox_name_input'))
+          ..onChange((value) => {})
+          ..keyboardType(TextInputType.visiblePassword)
+          ..textDecoration((CreateMailboxNameInputDecorationBuilder()).build()))
+        .build());
+  }
+
+  Widget _buildMailboxLocation(BuildContext context) {
+    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+      Padding(
+        padding: EdgeInsets.only(left: 16, right: 16, top: 4),
+        child: Text(
+          AppLocalizations.of(context).mailbox_location.toUpperCase(),
+          textAlign: TextAlign.left,
+          style: TextStyle(fontSize: 13, color: AppColor.colorHintSearchBar)),
+      ),
+      Container(
+          alignment: Alignment.center,
+          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(14),
+              color: Colors.white
+          ),
+          child: MediaQuery(
+            data: MediaQueryData(padding: EdgeInsets.zero),
+            child: ListTile(
+                contentPadding: EdgeInsets.zero,
+                onTap: () => {},
+                leading: Padding(
+                    padding: EdgeInsets.only(left: 16),
+                    child: SvgPicture.asset(
+                        _imagePaths.icFolderMailbox,
+                        width: 28,
+                        height: 28,
+                        fit: BoxFit.fill)),
+                title: Transform(
+                    transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
+                    child: Row(children: [
+                      Expanded(child: Text(
+                        '${controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).default_mailbox}',
+                        maxLines: 1,
+                        overflow:TextOverflow.ellipsis,
+                        style: TextStyle(
+                            fontSize: 15,
+                            color: controller.selectedMailbox.isBlank == true ? AppColor.colorHintSearchBar : AppColor.colorNameEmail),
+                      )),
+                    ])),
+                trailing: Transform(
+                    transform: Matrix4.translationValues(8.0, 0.0, 0.0),
+                    child: IconButton(
+                        color: AppColor.primaryColor,
+                        icon: SvgPicture.asset(_imagePaths.icFolderArrow, color: AppColor.colorArrowUserMailbox, fit: BoxFit.fill),
+                        onPressed: () {}
+                    ))
+            ),
+          )
+      )
+    ]);
+  }
+}

lib/features/mailbox_creator/presentation/model/mailbox_creator_arguments.dart

@@ -0,0 +1,12 @@
+
+import 'package:equatable/equatable.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+
+class MailboxCreatorArguments with EquatableMixin{
+  final List<PresentationMailbox> allMailboxes;
+
+  MailboxCreatorArguments(this.allMailboxes);
+
+  @override
+  List<Object?> get props => [allMailboxes];
+}

lib/features/mailbox_creator/presentation/model/new_mailbox_arguments.dart

@@ -0,0 +1,13 @@
+
+import 'package:equatable/equatable.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+
+class NewMailboxArguments with EquatableMixin{
+  final String nameMailbox;
+  final PresentationMailbox mailboxLocation;
+
+  NewMailboxArguments(this.nameMailbox, this.mailboxLocation);
+
+  @override
+  List<Object?> get props => [nameMailbox, mailboxLocation];
+}

lib/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_widget.dart

@@ -0,0 +1,87 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnCancelActionClick = void Function();
+typedef OnCreateActionClick = void Function();
+
+class AppBarMailboxCreatorWidget {
+  OnCancelActionClick? _cancelActionClick;
+  OnCreateActionClick? _createActionClick;
+
+  final BuildContext _context;
+  final bool isValidated;
+
+  AppBarMailboxCreatorWidget(
+      this._context,
+      {this.isValidated = false}
+  );
+
+  void addOnCancelActionClick(OnCancelActionClick onCancelActionClick) {
+    _cancelActionClick = onCancelActionClick;
+  }
+
+  void addOnCreateActionClick(OnCreateActionClick onCreateActionClick) {
+    _createActionClick = onCreateActionClick;
+  }
+
+  Widget build() {
+    return Container(
+        key: Key('app_bar_mailbox_creator'),
+        alignment: Alignment.center,
+        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
+          color: AppColor.colorBgMailbox),
+        child: MediaQuery(
+            data: MediaQueryData(padding: EdgeInsets.zero),
+            child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  _buildCancelButton(),
+                  Expanded(child: _buildTitle()),
+                  _buildCreateButton()
+                ]
+            )
+        )
+    );
+  }
+
+  Widget _buildCancelButton() {
+    return Material(
+        borderRadius: BorderRadius.circular(20),
+        color: Colors.transparent,
+        child: TextButton(
+            child: Text(
+              AppLocalizations.of(_context).cancel,
+              style: TextStyle(fontSize: 17, color: AppColor.colorTextButton),
+            ),
+            onPressed: () => _cancelActionClick?.call()
+        )
+    );
+  }
+
+  Widget _buildCreateButton() {
+    return Material(
+        borderRadius: BorderRadius.circular(20),
+        color: Colors.transparent,
+        child: TextButton(
+            child: Text(
+              AppLocalizations.of(_context).done,
+              style: TextStyle(fontSize: 17, color: isValidated ? AppColor.colorTextButton : AppColor.colorDisableMailboxCreateButton),
+            ),
+            onPressed: () => _createActionClick?.call()
+        )
+    );
+  }
+
+  Widget _buildTitle() {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 8),
+      child: Text(
+        AppLocalizations.of(_context).new_mailbox,
+        textAlign: TextAlign.center,
+        style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700)));
+  }
+}

lib/features/mailbox_creator/presentation/widgets/create_mailbox_name_input_decoration_builder.dart

@@ -0,0 +1,33 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+
+class CreateMailboxNameInputDecorationBuilder extends InputDecorationBuilder {
+
+  @override
+  InputDecoration build() {
+    return InputDecoration(
+      enabledBorder: enabledBorder ?? OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 1, color: AppColor.colorInputBorderCreateMailbox)),
+      focusedBorder: enabledBorder ?? OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 1, color: AppColor.colorTextButton)),
+      errorBorder: errorBorder ?? OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 1, color: AppColor.colorInputBorderErrorVerifyName)),
+      prefixText: prefixText,
+      labelText: labelText,
+      floatingLabelBehavior: FloatingLabelBehavior.never,
+      labelStyle: labelStyle ?? TextStyle(color: AppColor.colorNameEmail, fontSize: 16),
+      hintText: hintText,
+      hintStyle: hintStyle ?? TextStyle(color: AppColor.colorHintInputCreateMailbox, fontSize: 16),
+      contentPadding: contentPadding ?? EdgeInsets.all(12),
+      errorText: errorText,
+      errorStyle: errorTextStyle ?? TextStyle(color: AppColor.colorInputBorderErrorVerifyName, fontSize: 13),
+      filled: true,
+      fillColor: errorText?.isNotEmpty == true
+          ? AppColor.colorInputBackgroundErrorVerifyName
+          : AppColor.colorInputBackgroundCreateMailbox);
+  }
+}

lib/main/localizations/app_localizations.dart

@@ -585,4 +585,32 @@ class AppLocalizations {
       name: 'message_has_been_sent_failure',
     );
   }
+
+  String get done {
+    return Intl.message(
+        'Done',
+        name: 'done'
+    );
+  }
+
+  String get new_mailbox {
+    return Intl.message(
+      'New mailbox',
+      name: 'new_mailbox',
+    );
+  }
+
+  String get mailbox_location {
+    return Intl.message(
+      'Mailbox location',
+      name: 'mailbox_location',
+    );
+  }
+
+  String get default_mailbox {
+    return Intl.message(
+      'Default mailbox',
+      name: 'default_mailbox',
+    );
+  }
 }

lib/main/pages/app_pages.dart

@@ -9,6 +9,8 @@ import 'package:tmail_ui_user/features/login/presentation/login_bindings.dart';
 import 'package:tmail_ui_user/features/login/presentation/login_view.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/mailbox_creator_bindings.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/mailbox_creator_view.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_bindings.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
@@ -52,5 +54,10 @@ class AppPages {
       opaque: false,
       page: () => DestinationPickerView(),
       binding: DestinationPickerBindings()),
+    GetPage(
+      name: AppRoutes.MAILBOX_CREATOR,
+      opaque: false,
+      page: () => MailboxCreatorView(),
+      binding: MailboxCreatorBindings()),
   ];
 }

lib/main/routes/app_routes.dart

@@ -8,4 +8,5 @@ abstract class AppRoutes {
   static const SESSION = '/session';
   static const COMPOSER = '/composer';
   static const DESTINATION_PICKER = '/destinationPicker';
+  static const MAILBOX_CREATOR = '/mailboxCreator';
 }