TF-2040 Add calendar date icon in email view

contact/pubspec.lock

@@ -492,7 +492,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: "751c09a96a98f96141acdc2f592f183ac9e1a911"
+      resolved-ref: "63d47945f676adca3bf48b3940b21b77546e309e"
       url: "https://github.com/linagora/jmap-dart-client.git"
     source: git
     version: "0.0.1"

core/lib/presentation/extensions/color_extension.dart

@@ -191,6 +191,9 @@ extension AppColor on Color {
   static const colorUpdatedEventActionText = Color(0xFF4BB34B);
   static const colorCanceledEventActionText = Color(0xFFFF3347);
   static const colorSubTitleEventActionText = Color(0xFF939393);
+  static const colorCalendarEventInformationBackground = Color(0x0A000000);
+  static const colorCalendarEventInformationStroke = Color(0x1F000000);
+  static const colorShadowCalendarDateIcon = Color(0x26000000);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

fcm/pubspec.lock

@@ -296,7 +296,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: "751c09a96a98f96141acdc2f592f183ac9e1a911"
+      resolved-ref: "63d47945f676adca3bf48b3940b21b77546e309e"
       url: "https://github.com/linagora/jmap-dart-client.git"
     source: git
     version: "0.0.1"

forward/pubspec.lock

@@ -296,7 +296,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: "751c09a96a98f96141acdc2f592f183ac9e1a911"
+      resolved-ref: "63d47945f676adca3bf48b3940b21b77546e309e"
       url: "https://github.com/linagora/jmap-dart-client.git"
     source: git
     version: "0.0.1"

lib/features/base/reloadable/reloadable_controller.dart

@@ -140,7 +140,7 @@ abstract class ReloadableController extends BaseController {
   }
 
   void updateAuthenticationAccount(Session session, AccountId accountId, UserName userName) {
-    final apiUrl = session.getQualifiedApiUrl(baseUrl: _dynamicUrlInterceptors.jmapUrl);;
+    final apiUrl = session.getQualifiedApiUrl(baseUrl: _dynamicUrlInterceptors.jmapUrl);
     log('ReloadableController::updateAuthenticationAccount():apiUrl: $apiUrl');
     if (apiUrl.isNotEmpty) {
       consumeState(_updateAuthenticationAccountInteractor.execute(accountId, apiUrl, userName));

lib/features/email/presentation/email_view.dart

@@ -29,6 +29,7 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_w
 import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_file_tile_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event_action_banner_widget.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event_information_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/information_sender_and_receiver_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
@@ -282,6 +283,15 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
             ),
             _buildLoadingContentView(),
             _buildAttachments(context),
+            Obx(() {
+              if (controller.calendarEvent.value != null) {
+                return CalendarEventInformationWidget(
+                  calendarEvent: controller.calendarEvent.value!
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
             Obx(() {
               if (controller.calendarEvent.value != null) {
                 return CalendarEventActionBannerWidget(

lib/features/email/presentation/extensions/calendar_event_extension.dart

@@ -3,12 +3,14 @@ import 'package:collection/collection.dart';
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/utils/app_logger.dart';
+import 'package:date_format/date_format.dart' as date_format;
 import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/attendee/calendar_attendee.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/attendee/calendar_attendee_participation_status.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/event_method.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 extension CalendarEventExtension on CalendarEvent {
 
@@ -175,4 +177,42 @@ extension CalendarEventExtension on CalendarEvent {
       return Colors.transparent;
     }
   }
+
+  DateTime? get localStartDate => startUtcDate?.value.toLocal();
+
+  String get monthStartDateAsString {
+    if (localStartDate != null) {
+      return date_format.formatDate(
+        localStartDate!,
+        [date_format.M],
+        locale: AppUtils.getCurrentDateLocale()
+      );
+    } else {
+      return '';
+    }
+  }
+
+  String get dayStartDateAsString {
+    if (localStartDate != null) {
+      return date_format.formatDate(
+        localStartDate!,
+        [date_format.d],
+        locale: AppUtils.getCurrentDateLocale()
+      );
+    } else {
+      return '';
+    }
+  }
+
+  String get weekDayStartDateAsString {
+    if (localStartDate != null) {
+      return date_format.formatDate(
+        localStartDate!,
+        [date_format.D],
+        locale: AppUtils.getCurrentDateLocale()
+      );
+    } else {
+      return '';
+    }
+  }
 }

lib/features/email/presentation/styles/calendar_date_icon_widget_styles.dart

@@ -0,0 +1,10 @@
+
+class CalendarIconWidgetStyles {
+  static const double borderRadius = 8;
+  static const double headerVerticalContentPadding = 4;
+  static const double headerHorizontalContentPadding = 8;
+  static const double headerTextSize = 14;
+  static const double bodyDayTextSize = 40;
+  static const double bodyWeekDayTextSize = 14;
+  static const double bodyContentPadding = 8;
+}

lib/features/email/presentation/styles/calendar_event_action_banner_styles.dart

@@ -3,6 +3,7 @@ class CalendarEventActionBannerStyles {
   static const double borderRadius = 12;
   static const double contentPadding = 12;
   static const double viewHorizontalMargin = 16;
+  static const double viewVerticalMargin = 12;
   static const double titleTextSize = 16;
   static const double subTileTextSize = 13;
   static const double iconSize = 20;

lib/features/email/presentation/styles/calendar_event_information_widget_styles.dart

@@ -0,0 +1,12 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class CalendarEventInformationWidgetStyles {
+  static const double borderRadius = 16;
+  static const double contentPadding = 16;
+  static const double verticalMargin = 12;
+  static const double horizontalMargin = 16;
+  static const double calendarDateIconMargin = 16;
+  static const Color calendarDateIconBackgroundColor = AppColor.colorCalendarEventInformationBackground;
+}

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

@@ -0,0 +1,92 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
+import 'package:tmail_ui_user/features/email/presentation/extensions/calendar_event_extension.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/calendar_date_icon_widget_styles.dart';
+
+class CalendarDateIconWidget extends StatelessWidget {
+
+  final CalendarEvent calendarEvent;
+  final double width;
+
+  const CalendarDateIconWidget({
+    super.key,
+    required this.calendarEvent,
+    this.width = 100
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      clipBehavior: Clip.antiAlias,
+      width: width,
+      decoration: const ShapeDecoration(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(CalendarIconWidgetStyles.borderRadius))),
+        color: Colors.white,
+        shadows: [
+          BoxShadow(
+            color: AppColor.colorShadowBgContentEmail,
+            blurRadius: 80,
+            offset: Offset(0, 1),
+            spreadRadius: 0,
+          ),
+          BoxShadow(
+            color: AppColor.colorShadowCalendarDateIcon,
+            blurRadius: 3,
+            offset: Offset(0, 1),
+            spreadRadius: 1,
+          )
+        ],
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            color: AppColor.primaryColor,
+            padding: const EdgeInsetsDirectional.symmetric(
+              vertical: CalendarIconWidgetStyles.headerVerticalContentPadding,
+              horizontal: CalendarIconWidgetStyles.headerHorizontalContentPadding
+            ),
+            width: width,
+            child: Text(
+              calendarEvent.monthStartDateAsString,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: CalendarIconWidgetStyles.headerTextSize,
+                fontWeight: FontWeight.w400,
+                color: Colors.white
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(CalendarIconWidgetStyles.bodyContentPadding),
+            child: Text(
+              calendarEvent.dayStartDateAsString,
+              style: const TextStyle(
+                fontSize: CalendarIconWidgetStyles.bodyDayTextSize,
+                fontWeight: FontWeight.w700,
+                color: Colors.black
+              ),
+            ),
+          ),
+          const Padding(
+            padding: EdgeInsets.symmetric(horizontal: CalendarIconWidgetStyles.bodyContentPadding),
+            child: Divider(color: AppColor.colorCalendarEventInformationStroke, height: 2)
+          ),
+          Padding(
+            padding: const EdgeInsets.all(CalendarIconWidgetStyles.bodyContentPadding),
+            child: Text(
+              calendarEvent.weekDayStartDateAsString,
+              style: const TextStyle(
+                fontSize: CalendarIconWidgetStyles.bodyWeekDayTextSize,
+                fontWeight: FontWeight.w400,
+                color: Colors.black
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -33,6 +33,7 @@ class CalendarEventActionBannerWidget extends StatelessWidget {
       padding: const EdgeInsets.all(CalendarEventActionBannerStyles.contentPadding),
       margin: const EdgeInsets.symmetric(
         horizontal: CalendarEventActionBannerStyles.viewHorizontalMargin,
+        vertical: CalendarEventActionBannerStyles.viewVerticalMargin,
       ),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,

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

@@ -0,0 +1,63 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/calendar_event_information_widget_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_date_icon_widget.dart';
+
+class CalendarEventInformationWidget extends StatelessWidget {
+
+  final CalendarEvent calendarEvent;
+
+  const CalendarEventInformationWidget({
+    super.key,
+    required this.calendarEvent
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final responsiveUtils = Get.find<ResponsiveUtils>();
+    return Container(
+      clipBehavior: Clip.antiAlias,
+      decoration: const ShapeDecoration(
+        color: Colors.white,
+        shape: RoundedRectangleBorder(
+          side: BorderSide(
+            width: 0.5,
+            color: AppColor.colorCalendarEventInformationStroke,
+          ),
+          borderRadius: BorderRadius.all(Radius.circular(CalendarEventInformationWidgetStyles.borderRadius)),
+        ),
+      ),
+      margin: const EdgeInsetsDirectional.symmetric(
+        vertical: CalendarEventInformationWidgetStyles.verticalMargin,
+        horizontal: CalendarEventInformationWidgetStyles.horizontalMargin),
+      child: responsiveUtils.isPortraitMobile(context)
+        ? Column(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(CalendarEventInformationWidgetStyles.calendarDateIconMargin),
+                color: CalendarEventInformationWidgetStyles.calendarDateIconBackgroundColor,
+                child: CalendarDateIconWidget(
+                  calendarEvent: calendarEvent,
+                  width: double.infinity,
+                ),
+              )
+            ],
+          )
+        : Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                padding: const EdgeInsets.all(CalendarEventInformationWidgetStyles.calendarDateIconMargin),
+                color: CalendarEventInformationWidgetStyles.calendarDateIconBackgroundColor,
+                child: CalendarDateIconWidget(calendarEvent: calendarEvent),
+              ),
+              Expanded(child: Container(color: Colors.white))
+            ],
+          ),
+    );
+  }
+}

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart

@@ -61,7 +61,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                 children: [
                   SizedBox(
                     width: ResponsiveUtils.defaultSizeLeftMenuMobile,
-                    child: _buildScaffoldHaveDrawer(body: SendingQueueView())),
+                    child: _buildScaffoldHaveDrawer(body: const SendingQueueView())),
                   Expanded(child: EmailView()),
                 ],
               );
@@ -70,7 +70,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                 desktop: bodyView,
                 tabletLarge: bodyView,
                 landscapeTablet: bodyView,
-                mobile: _buildScaffoldHaveDrawer(body: SendingQueueView()));
+                mobile: _buildScaffoldHaveDrawer(body: const SendingQueueView()));
             case DashboardRoutes.waiting:
               return const Center(
                 child: SizedBox(

lib/main/localizations/language_code_constants.dart

@@ -0,0 +1,9 @@
+
+class LanguageCodeConstants {
+  static const String english = 'en';
+  static const String french = 'fr';
+  static const String vietnamese = 'vi';
+  static const String italian = 'it';
+  static const String russian = 'ru';
+  static const String arabic = 'ar';
+}