TF-2064 Add QuotasBannerWidget

(cherry picked from commit ce85ba3d7e647a8a93a54144a840905a8c479fb0)

lib/features/quotas/domain/extensions/quota_extensions.dart

@@ -0,0 +1,128 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:filesize/filesize.dart';
+import 'package:flutter/material.dart';
+import 'package:jmap_dart_client/jmap/quotas/quota.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+extension QuotasExtensions on Quota {
+
+  String get usedStorageAsString => used != null ? filesize(used!.value) : '';
+
+  String get hardLimitStorageAsString => hardLimit != null ? filesize(hardLimit!.value) : '';
+
+  bool get isWarnLimitReached {
+    if (used != null && warnLimit != null) {
+      return used!.value >= warnLimit!.value * 0.9;
+    } else {
+      return false;
+    }
+  }
+
+  bool get isHardLimitReached {
+    if (used != null && hardLimit != null) {
+      return used!.value >= hardLimit!.value;
+    } else {
+      return false;
+    }
+  }
+
+  double get usedStoragePercent {
+    if (used != null && hardLimit != null && hardLimit!.value > 0) {
+      return used!.value / hardLimit!.value;
+    } else {
+      return 0;
+    }
+  }
+
+  bool get allowedDisplayToQuotaBanner => storageAvailable && (isHardLimitReached || isWarnLimitReached);
+
+  bool get storageAvailable => used != null && hardLimit != null && warnLimit != null;
+
+  String getQuotasStateTitle(BuildContext context) {
+    if (isHardLimitReached) {
+      return AppLocalizations.of(context).textQuotasOutOfStorage;
+    } else {
+      return AppLocalizations.of(context).quotaStateLabel(usedStorageAsString, hardLimitStorageAsString);
+    }
+  }
+
+  Color getQuotasStateTitleColor() {
+    if (isHardLimitReached) {
+      return AppColor.colorQuotaError;
+    } else {
+      return AppColor.colorLabelQuotas;
+    }
+  }
+
+  Color getQuotasStateProgressBarColor() {
+    if (isHardLimitReached) {
+      return AppColor.colorQuotaError;
+    } else if (isWarnLimitReached) {
+      return AppColor.colorBackgroundQuotasWarning;
+    } else {
+      return AppColor.primaryColor;
+    }
+  }
+
+  Color getQuotaBannerBackgroundColor() {
+    if (isHardLimitReached) {
+      return AppColor.colorQuotaError.withOpacity(0.12);
+    } else if (isWarnLimitReached) {
+      return AppColor.colorBackgroundQuotasWarning.withOpacity(0.12);
+    } else {
+      return AppColor.colorNetworkConnectionBannerBackground;
+    }
+  }
+
+  String getQuotaBannerIcon(ImagePaths imagePaths) {
+    if (isHardLimitReached) {
+      return imagePaths.icQuotasOutOfStorage;
+    } else if (isWarnLimitReached) {
+      return imagePaths.icQuotasWarning;
+    } else {
+      return '';
+    }
+  }
+
+  String getQuotaBannerTitle(BuildContext context) {
+    if (isHardLimitReached) {
+      return AppLocalizations.of(context).quotaErrorBannerTitle;
+    } else if (isWarnLimitReached) {
+      return AppLocalizations.of(context).quotaWarningBannerTitle;
+    } else {
+      return '';
+    }
+  }
+
+  String getQuotaBannerMessage(BuildContext context) {
+    if (isHardLimitReached) {
+      return AppLocalizations.of(context).quotaErrorBannerMessage;
+    } else if (isWarnLimitReached) {
+      return AppLocalizations.of(context).quotaWarningBannerMessage;
+    } else {
+      return '';
+    }
+  }
+
+  Color getQuotaBannerTitleColor() {
+    if (isHardLimitReached) {
+      return AppColor.colorQuotaError;
+    } else if (isWarnLimitReached) {
+      return AppColor.colorQuotaWarning;
+    } else {
+      return Colors.black;
+    }
+  }
+
+  Color getQuotaBannerMessageColor() {
+    if (isHardLimitReached) {
+      return AppColor.colorQuotaError;
+    } else if (isWarnLimitReached) {
+      return AppColor.colorQuotaWarning;
+    } else {
+      return Colors.black;
+    }
+  }
+}

lib/features/quotas/presentation/styles/quotas_banner_styles.dart

@@ -0,0 +1,23 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class QuotasBannerStyles {
+  static const double verticalPadding = 12;
+  static const double horizontalPadding = 16;
+  static const double topMargin = 8;
+  static const double startMargin = 16;
+  static const double endMargin = 16;
+  static const double bottomMargin = 8;
+  static const double iconPadding = 16;
+  static const double iconSize = 32;
+  static const double titleTextSize = 17;
+  static const double messageTextSize = 15;
+  static const double space = 8;
+  static const double borderRadius = 12;
+
+  static const Color messageTextColor = AppColor.colorLabelQuotas;
+
+  static const FontWeight titleFontWeight = FontWeight.w700;
+  static const FontWeight messageFontWeight = FontWeight.w400;
+}

lib/features/quotas/presentation/widget/quotas_banner_widget.dart

@@ -0,0 +1,77 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/quotas/domain/extensions/quota_extensions.dart';
+import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller.dart';
+import 'package:tmail_ui_user/features/quotas/presentation/styles/quotas_banner_styles.dart';
+
+class QuotasBannerWidget extends StatelessWidget {
+
+  const QuotasBannerWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = Get.find<QuotasController>();
+    final responsiveUtils = Get.find<ResponsiveUtils>();
+    return Obx(() {
+      if (controller.octetsQuota.value != null && controller.octetsQuota.value!.allowedDisplayToQuotaBanner) {
+        final octetQuota = controller.octetsQuota.value!;
+        return Container(
+          decoration: BoxDecoration(
+            color: octetQuota.getQuotaBannerBackgroundColor(),
+            borderRadius: const BorderRadius.all(Radius.circular(QuotasBannerStyles.borderRadius)),
+          ),
+          margin: EdgeInsetsDirectional.only(
+            end: QuotasBannerStyles.endMargin,
+            top: PlatformInfo.isWeb ? QuotasBannerStyles.topMargin : 0,
+            start: responsiveUtils.isWebDesktop(context) ? 0 : QuotasBannerStyles.startMargin,
+            bottom: responsiveUtils.isWebDesktop(context) ? 0 : QuotasBannerStyles.bottomMargin
+          ),
+          padding: const EdgeInsetsDirectional.symmetric(
+            horizontal: QuotasBannerStyles.horizontalPadding,
+            vertical: QuotasBannerStyles.verticalPadding,
+          ),
+          child: Row(
+            children: [
+              SvgPicture.asset(
+                octetQuota.getQuotaBannerIcon(controller.imagePaths),
+                width: QuotasBannerStyles.iconSize,
+                height: QuotasBannerStyles.iconSize,
+                fit: BoxFit.fill,
+              ),
+              const SizedBox(width: QuotasBannerStyles.iconPadding),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      octetQuota.getQuotaBannerTitle(context),
+                      style: TextStyle(
+                        fontSize: QuotasBannerStyles.titleTextSize,
+                        fontWeight: QuotasBannerStyles.titleFontWeight,
+                        color: octetQuota.getQuotaBannerTitleColor(),
+                      ),
+                    ),
+                    const SizedBox(height: QuotasBannerStyles.space),
+                    Text(
+                      octetQuota.getQuotaBannerMessage(context),
+                      style: const TextStyle(
+                        fontSize: QuotasBannerStyles.messageTextSize,
+                        fontWeight: QuotasBannerStyles.messageFontWeight,
+                        color: QuotasBannerStyles.messageTextColor,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        );
+      } else {
+        return const SizedBox.shrink();
+      }
+    });
+  }
+}