TF-888 Update new design for notification message vacation

core/lib/presentation/extensions/color_extension.dart

@@ -138,11 +138,11 @@ extension AppColor on Color {
   static const colorBackgroundFieldConditionRulesFilter = Color(0xFFF2F3F5);
   static const colorDividerRuleFilter = Color(0xFFE7E8EC);
   static const colorIconTextField = Color(0xFFB8C1CC);
-  static const colorVacationNotificationMessageBackground = Color(0x2999A2AD);
   static const colorDeletePermanentlyButton = Color(0xffE64646);
   static const colorDefaultButton = Color(0xff9AA1AD);
   static const colorVacationSettingExplanation = Color(0xFF686E76);
   static const colorBackgroundVacationSettingField = Color(0xFFF2F3F5);
+  static const colorBackgroundNotificationVacationSetting= Color(0xFFFFF5C2);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

lib/features/email/presentation/email_view.dart

@@ -71,7 +71,8 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
                               radius: 0,
                               margin: EdgeInsets.zero,
                               vacationResponse: controller.mailboxDashBoardController.vacationResponse.value!,
-                              action: () => controller.mailboxDashBoardController.disableVacationResponder()),
+                              actionGotoVacationSetting: () => controller.mailboxDashBoardController.goToVacationSetting(),
+                              actionEndNow: () => controller.mailboxDashBoardController.disableVacationResponder()),
                         );
                       } else {
                         return const SizedBox.shrink();

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -50,6 +50,7 @@ import 'package:tmail_ui_user/features/manage_account/domain/usecases/get_all_va
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/log_out_oidc_interactor.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/update_vacation_interactor.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/manage_account_arguments.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
@@ -623,6 +624,17 @@ class MailboxDashBoardController extends ReloadableController {
     }
   }
 
+  void goToVacationSetting() async {
+    final result = await push(AppRoutes.MANAGE_ACCOUNT,
+        arguments: ManageAccountArguments(
+            sessionCurrent,
+            menuSettingCurrent: AccountMenuItem.vacation));
+
+    if (result is VacationResponse) {
+      vacationResponse.value = result;
+    }
+  }
+
   void _handleUpdateVacationSuccess(UpdateVacationSuccess success) {
     if (success.listVacationResponse.isNotEmpty) {
       if (currentContext != null && currentOverlayContext != null) {

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -100,7 +100,8 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                             return VacationNotificationMessageWidget(
                                 margin: const EdgeInsets.only(top: 16, right: 16),
                                 vacationResponse: controller.vacationResponse.value!,
-                                action: () => controller.disableVacationResponder());
+                                actionGotoVacationSetting: () => controller.goToVacationSetting(),
+                                actionEndNow: () => controller.disableVacationResponder());
                           } else {
                             return const SizedBox.shrink();
                           }

lib/features/manage_account/presentation/manage_account_dashboard_controller.dart

@@ -33,6 +33,7 @@ class ManageAccountDashBoardController extends ReloadableController {
 
   final _appToast = Get.find<AppToast>();
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   final GetAllVacationInteractor _getAllVacationInteractor;
   final UpdateVacationInteractor _updateVacationInteractor;
@@ -107,6 +108,9 @@ class ManageAccountDashBoardController extends ReloadableController {
       _getUserProfile();
       _getVacationResponse();
       injectAutoCompleteBindings();
+      if (arguments.menuSettingCurrent != null) {
+        _goToSettingMenuCurrent(arguments.menuSettingCurrent!);
+      }
     } else {
       if (kIsWeb) {
         reload();
@@ -157,6 +161,20 @@ class ManageAccountDashBoardController extends ReloadableController {
       closeMenuDrawer();
     }
   }
+  
+  void _goToSettingMenuCurrent(AccountMenuItem accountMenuItem) {
+    if(accountMenuItem == AccountMenuItem.emailRules) {
+      EmailRulesBindings().dependencies();
+    }
+    if(accountMenuItem == AccountMenuItem.forward) {
+      ForwardBindings().dependencies();
+    }
+    accountMenuItemSelected.value = accountMenuItem;
+    if (currentContext != null &&
+        !_responsiveUtils.isDesktop(currentContext!)) {
+      settingsPageLevel.value = SettingsPageLevel.level1;
+    }
+  }
 
   void goToSettings() {
     pushAndPop(AppRoutes.MANAGE_ACCOUNT,

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -1,7 +1,6 @@
 
 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/emails_forward_creator/presentation/emails_forward_creator_view.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
@@ -91,8 +90,12 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
                                         top: 16,
                                         left: BuildUtils.isWeb ? 24 : 16,
                                         right: BuildUtils.isWeb ? 24 : 16),
+                                    fromAccountDashBoard: true,
                                     vacationResponse: controller.vacationResponse.value!,
-                                    action: () => controller.disableVacationResponder());
+                                    actionGotoVacationSetting: !controller.inVacationSettings()
+                                        ? () => controller.selectAccountMenuItem(AccountMenuItem.vacation)
+                                        : null,
+                                    actionEndNow: () => controller.disableVacationResponder());
                               } else if ((controller.vacationResponse.value?.vacationResponderIsWaiting == true
                                   || controller.vacationResponse.value?.vacationResponderIsStopped == true)
                                   && controller.accountMenuItemSelected.value == AccountMenuItem.vacation) {
@@ -101,10 +104,9 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
                                         top: 16,
                                         left: BuildUtils.isWeb ? 24 : 16,
                                         right: BuildUtils.isWeb ? 24 : 16),
+                                    fromAccountDashBoard: true,
                                     vacationResponse: controller.vacationResponse.value!,
                                     padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
-                                    backgroundColor: Colors.yellow,
-                                    fontWeight: FontWeight.normal,
                                     leadingIcon: const Padding(
                                       padding: EdgeInsets.only(right: 16),
                                       child: Icon(Icons.timer, size: 20),

lib/features/manage_account/presentation/menu/settings/settings_view.dart

@@ -49,8 +49,9 @@ class SettingsView extends GetWidget<SettingsController> {
                   left: BuildUtils.isWeb ? 24 : 16,
                   right: BuildUtils.isWeb ? 24 : 16,
                   top: 16),
+                fromAccountDashBoard: true,
                 vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
-                action: () => controller.manageAccountDashboardController.disableVacationResponder());
+                actionEndNow: () => controller.manageAccountDashboardController.disableVacationResponder());
             } else if ((controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsWaiting == true
                 || controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsStopped == true)
                 && controller.manageAccountDashboardController.inVacationSettings()) {
@@ -59,10 +60,9 @@ class SettingsView extends GetWidget<SettingsController> {
                     left: BuildUtils.isWeb ? 24 : 16,
                     right: BuildUtils.isWeb ? 24 : 16,
                     top: 16),
+                  fromAccountDashBoard: true,
                   vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
                   padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
-                  fontWeight: FontWeight.normal,
-                  backgroundColor: Colors.yellow,
                   leadingIcon: const Padding(
                     padding: EdgeInsets.only(right: 16),
                     child: Icon(Icons.timer, size: 20),

lib/features/manage_account/presentation/model/manage_account_arguments.dart

@@ -1,13 +1,15 @@
 
 import 'package:equatable/equatable.dart';
 import 'package:jmap_dart_client/jmap/core/session/session.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 
 class ManageAccountArguments with EquatableMixin {
 
   final Session? session;
+  final AccountMenuItem? menuSettingCurrent;
 
-  ManageAccountArguments(this.session);
+  ManageAccountArguments(this.session, {this.menuSettingCurrent});
 
   @override
-  List<Object?> get props => [session];
+  List<Object?> get props => [session, menuSettingCurrent];
 }

lib/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart

@@ -1,68 +1,151 @@
 
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/vacation/vacation_response.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-typedef DisableVacationResponderAction = Function();
+typedef EndNowVacationSettingAction = Function();
+typedef GoToVacationSettingAction = Function();
 
 class VacationNotificationMessageWidget extends StatelessWidget {
 
   final VacationResponse vacationResponse;
-  final DisableVacationResponderAction? action;
+  final EndNowVacationSettingAction? actionEndNow;
+  final GoToVacationSettingAction? actionGotoVacationSetting;
   final EdgeInsets? margin;
   final EdgeInsets? padding;
   final double? radius;
   final Widget? leadingIcon;
   final Color? backgroundColor;
   final FontWeight? fontWeight;
+  final bool fromAccountDashBoard;
 
   const VacationNotificationMessageWidget({
     super.key,
     required this.vacationResponse,
-    this.action,
+    this.actionEndNow,
+    this.actionGotoVacationSetting,
     this.radius,
     this.margin,
     this.padding,
     this.leadingIcon,
     this.backgroundColor,
     this.fontWeight,
+    this.fromAccountDashBoard = false,
   });
 
   @override
   Widget build(BuildContext context) {
     return Container(
       width: double.infinity,
-      margin: margin ?? const EdgeInsets.symmetric(horizontal: 16),
+      margin: margin ?? const EdgeInsets.symmetric(horizontal: 12),
-      padding: padding ?? const EdgeInsets.only(left: 16),
+      padding: padding ?? const EdgeInsets.only(left: 12),
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(radius ?? 5),
+        borderRadius: BorderRadius.circular(radius ?? 8),
-        color: backgroundColor ?? AppColor.colorVacationNotificationMessageBackground,
+        color: backgroundColor ?? AppColor.colorBackgroundNotificationVacationSetting,
+      ),
+      child: ResponsiveWidget(
+        responsiveUtils: Get.find<ResponsiveUtils>(),
+        mobile: _buildBodyForMobile(context),
+        tabletLarge: fromAccountDashBoard
+            ? _buildBodyForDesktop(context)
+            : _buildBodyForMobile(context),
+        landscapeTablet: fromAccountDashBoard
+            ? _buildBodyForDesktop(context)
+            : _buildBodyForMobile(context),
+        desktop: _buildBodyForDesktop(context),
+        tablet: _buildBodyForDesktop(context),
+        landscapeMobile: _buildBodyForDesktop(context),
       ),
-      child: Row(children: [
-        if (leadingIcon != null) leadingIcon!,
-       Expanded(
-         child: Text(
-           vacationResponse.getNotificationMessage(context),
-           style: TextStyle(
-             color: Colors.black,
-             fontSize: 13,
-             fontWeight: fontWeight ?? FontWeight.w500,
-           ))),
-        if (action != null)
-          buildTextButton(
-              AppLocalizations.of(context).disable.allInCaps,
-              textStyle: const TextStyle(
-                  fontWeight: FontWeight.w500,
-                  fontSize: 13,
-                  color: AppColor.colorTextButton),
-              backgroundColor: Colors.transparent,
-              width: 128,
-              height: 44,
-              radius: 10,
-              onTap: () => action!.call())
-      ]),
     );
   }
+
+  Widget _buildBodyForDesktop(BuildContext context) {
+    return Row(children: [
+      if (leadingIcon != null) leadingIcon!,
+      Expanded(
+          child: Text(
+              vacationResponse.getNotificationMessage(context),
+              style: TextStyle(
+                color: Colors.black,
+                fontSize: 16,
+                fontWeight: fontWeight ?? FontWeight.normal,
+              ))),
+      if (actionEndNow != null)
+        buildTextButton(
+            AppLocalizations.of(context).endNow,
+            textStyle: const TextStyle(
+                fontWeight: FontWeight.w500,
+                fontSize: 16,
+                color: AppColor.colorTextButton),
+            backgroundColor: Colors.transparent,
+            width: 90,
+            height: 44,
+            radius: 10,
+            onTap: () => actionEndNow!.call()),
+      if (actionGotoVacationSetting != null)
+        buildTextButton(
+            AppLocalizations.of(context).vacationSetting,
+            textStyle: const TextStyle(
+                fontWeight: FontWeight.w500,
+                fontSize: 16,
+                color: AppColor.colorTextButton),
+            backgroundColor: Colors.transparent,
+            width: 150,
+            height: 44,
+            radius: 10,
+            onTap: () => actionGotoVacationSetting!.call())
+    ]);
+  }
+
+  Widget _buildBodyForMobile(BuildContext context) {
+    return Column(children: [
+      Row(children: [
+        if (leadingIcon != null) leadingIcon!,
+        Expanded(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 8, right: 12),
+              child: Center(
+                child: Text(
+                    vacationResponse.getNotificationMessage(context),
+                    style: TextStyle(
+                      color: Colors.black,
+                      fontSize: 16,
+                      fontWeight: fontWeight ?? FontWeight.normal,
+                    )),
+              ),
+            )),
+      ]),
+      Row(children: [
+        const Spacer(),
+        if (actionEndNow != null)
+          buildTextButton(
+              AppLocalizations.of(context).endNow,
+              textStyle: const TextStyle(
+                  fontWeight: FontWeight.w500,
+                  fontSize: 16,
+                  color: AppColor.colorTextButton),
+              backgroundColor: Colors.transparent,
+              width: 90,
+              height: 36,
+              radius: 10,
+              onTap: () => actionEndNow!.call()),
+        if (actionGotoVacationSetting != null)
+          buildTextButton(
+              AppLocalizations.of(context).vacationSetting,
+              textStyle: const TextStyle(
+                  fontWeight: FontWeight.w500,
+                  fontSize: 16,
+                  color: AppColor.colorTextButton),
+              backgroundColor: Colors.transparent,
+              width: 150,
+              height: 36,
+              radius: 10,
+              onTap: () => actionGotoVacationSetting!.call()),
+        const Spacer(),
+      ])
+    ]);
+  }
 }

lib/features/thread/presentation/thread_view.dart

@@ -62,18 +62,6 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
                       if ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)
                         ... [
                           _buildAppBarNormal(context),
-                          Obx(() {
-                            if (controller.mailboxDashBoardController.vacationResponse.value?.vacationResponderIsValid == true) {
-                              return Padding(
-                                padding: const EdgeInsets.only(bottom: 16),
-                                child: VacationNotificationMessageWidget(
-                                    vacationResponse: controller.mailboxDashBoardController.vacationResponse.value!,
-                                    action: () => controller.mailboxDashBoardController.disableVacationResponder()),
-                              );
-                            } else {
-                              return const SizedBox.shrink();
-                            }
-                          }),
                           Obx(() {
                             return Stack(children: [
                               if (!controller.isSearchActive())
@@ -95,7 +83,20 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
                                         bottom: !BuildUtils.isWeb ? 16 : 0),
                                     child: _buildSearchFormActive(context))
                             ]);
-                          })
+                          }),
+                          Obx(() {
+                            if (controller.mailboxDashBoardController.vacationResponse.value?.vacationResponderIsValid == true) {
+                              return Padding(
+                                padding: const EdgeInsets.only(bottom: 8, top: 4),
+                                child: VacationNotificationMessageWidget(
+                                    vacationResponse: controller.mailboxDashBoardController.vacationResponse.value!,
+                                    actionGotoVacationSetting: () => controller.mailboxDashBoardController.goToVacationSetting(),
+                                    actionEndNow: () => controller.mailboxDashBoardController.disableVacationResponder()),
+                              );
+                            } else {
+                              return const SizedBox.shrink();
+                            }
+                          }),
                         ]
                       else
                         const SizedBox.shrink(),

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-09-09T19:44:24.604383",
+  "@@last_modified": "2022-09-12T10:15:14.832674",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -1996,12 +1996,6 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "disable": "Disable",
-  "@disable": {
-    "type": "text",
-    "placeholders_order": [],
-    "placeholders": {}
-  },
   "yourVacationResponderIsDisabledSuccessfully": "Your vacation responder is disabled successfully",
   "@yourVacationResponderIsDisabledSuccessfully": {
     "type": "text",
@@ -2167,5 +2161,17 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "endNow": "End now",
+  "@endNow": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "vacationSetting": "Vacation setting",
+  "@vacationSetting": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -2065,13 +2065,6 @@ class AppLocalizations {
     );
   }
 
-  String get disable {
-    return Intl.message(
-      'Disable',
-      name: 'disable',
-    );
-  }
-
   String get yourVacationResponderIsDisabledSuccessfully {
     return Intl.message(
       'Your vacation responder is disabled successfully',
@@ -2237,4 +2230,18 @@ class AppLocalizations {
       name: 'messageIsRequired',
     );
   }
+
+  String get endNow {
+    return Intl.message(
+      'End now',
+      name: 'endNow',
+    );
+  }
+
+  String get vacationSetting {
+    return Intl.message(
+      'Vacation setting',
+      name: 'vacationSetting',
+    );
+  }
 }