TF-3986 Change style for alert quota

2025-09-10 11:48:50 +07:00
parent 9a84f12690
commit 16f0eed730
10 changed files with 200 additions and 123 deletions
@@ -1,6 +1,5 @@

 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/core/unsigned_int.dart';
@@ -79,56 +78,16 @@ extension QuotasExtensions on Quota {
    }
  }

-  Color getQuotaBannerBackgroundColor() {
-    if (isHardLimitReached) {
-      return AppColor.colorQuotaError.withValues(alpha: 0.12);
-    } else if (isWarnLimitReached) {
-      return AppColor.colorBackgroundQuotasWarning.withValues(alpha: 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;
+      return AppLocalizations.of(context).quotaBannerWarningTitle;
    } 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;
@@ -1,10 +1,13 @@
+import 'package:core/presentation/state/failure.dart';
 import 'package:core/presentation/state/success.dart';
+import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
 import 'package:jmap_dart_client/jmap/core/capability/capability_identifier.dart';
 import 'package:jmap_dart_client/jmap/quotas/quota.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/validate_saas_premium_available_extension.dart';
 import 'package:tmail_ui_user/features/quotas/domain/extensions/list_quotas_extensions.dart';
 import 'package:tmail_ui_user/features/quotas/domain/state/get_quotas_state.dart';
 import 'package:tmail_ui_user/features/quotas/domain/use_case/get_quotas_interactor.dart';
@@ -17,6 +20,7 @@ class QuotasController extends BaseController {
  final GetQuotasInteractor _getQuotasInteractor;

  final octetsQuota = Rxn<Quota>();
+  final isBannerEnabled = RxBool(false);

  late Worker accountIdListener;

@@ -28,6 +32,7 @@ class QuotasController extends BaseController {

  void _handleGetQuotasSuccess(GetQuotasSuccess success) {
    octetsQuota.value = success.quotas.octetsQuota;
+    isBannerEnabled.value = true;
  }

  void _initWorker() {
@@ -62,9 +67,32 @@ class QuotasController extends BaseController {

  @override
  void handleSuccessViewState(Success success) {
-    super.handleSuccessViewState(success);
    if (success is GetQuotasSuccess) {
      _handleGetQuotasSuccess(success);
+    } else {
+      super.handleSuccessViewState(success);
    }
  }
+
+  @override
+  void handleFailureViewState(Failure failure) {
+    if (failure is GetQuotasFailure) {
+      isBannerEnabled.value = true;
+    } else {
+      super.handleFailureViewState(failure);
+    }
+  }
+
+  bool get isManageMyStorageIsEnabled {
+    return mailboxDashBoardController.isPremiumAvailable &&
+        !mailboxDashBoardController.isAlreadyHighestSubscription;
+  }
+
+  void handleManageMyStorage(BuildContext context) {
+    mailboxDashBoardController.navigateToPaywall(context);
+  }
+
+  void closeBanner() {
+    isBannerEnabled.value = false;
+  }
 }
@@ -1,25 +1,45 @@

 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';

 class QuotasBannerStyles {
  static const double iconPadding = 16;
  static const double iconSize = 32;
-  static const double titleTextSize = 17;
-  static const double messageTextSize = 15;
-  static const double space = 4;
-  static const double borderRadius = 12;
+  static const double titleTextSize = 15;
+  static const double borderRadius = 8;

  static const Color messageTextColor = AppColor.steelGray400;
+  static const Color backgroundColor = AppColor.lightGrayEAEDF2;

-  static const FontWeight titleFontWeight = FontWeight.w700;
  static const FontWeight messageFontWeight = FontWeight.w400;

-  static const EdgeInsetsGeometry bannerPadding = EdgeInsetsDirectional.symmetric(
-    horizontal: 16,
-    vertical: 8,
+  static TextStyle titleTextStyle = ThemeUtils.textStyleInter500().copyWith(
+    fontSize: 15,
+    height: 20 / 15,
+    letterSpacing: 0.0,
+    color: Colors.black,
+  );
+  static TextStyle subTitleTextStyle = ThemeUtils.textStyleInter400.copyWith(
+    fontSize: 13,
+    height: 16 / 13,
+    letterSpacing: 0.0,
+    color: AppColor.steelGray400,
+  );
+  static TextStyle manageStorageButtonTextStyle = ThemeUtils.textStyleInter700().copyWith(
+    fontSize: 14,
+    height: 20 / 14,
+    letterSpacing: 0.0,
+    color: AppColor.blue700,
+  );
+
+  static const EdgeInsetsGeometry bannerPadding = EdgeInsetsDirectional.only(
+    start: 16,
+    end: 40,
+    top: 12,
+    bottom: 12,
  );
  static EdgeInsetsGeometry getBannerMargin(
    BuildContext context,
@@ -1,10 +1,13 @@
-import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.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/base/widget/default_field/default_close_button_widget.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';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class QuotasBannerWidget extends StatelessWidget {

@@ -16,49 +19,79 @@ class QuotasBannerWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Obx(() {
      final octetQuota = _quotasController.octetsQuota.value;
-      if (octetQuota != null && octetQuota.allowedDisplayToQuotaBanner) {
+
+      if (octetQuota != null &&
+          octetQuota.allowedDisplayToQuotaBanner &&
+          _quotasController.isBannerEnabled.isTrue) {
+        final appLocalizations = AppLocalizations.of(context);
+
        return Container(
-          decoration: BoxDecoration(
-            color: octetQuota.getQuotaBannerBackgroundColor(),
-            borderRadius: const BorderRadius.all(Radius.circular(QuotasBannerStyles.borderRadius)),
+          decoration: const BoxDecoration(
+            color: QuotasBannerStyles.backgroundColor,
+            borderRadius: BorderRadius.all(
+              Radius.circular(QuotasBannerStyles.borderRadius),
+            ),
          ),
          margin: QuotasBannerStyles.getBannerMargin(
            context,
-            _quotasController.responsiveUtils),
-          padding: QuotasBannerStyles.bannerPadding,
-          child: Row(
+            _quotasController.responsiveUtils,
+          ),
+          child: Stack(
            children: [
-              SvgPicture.asset(
-                octetQuota.getQuotaBannerIcon(_quotasController.imagePaths),
-                width: QuotasBannerStyles.iconSize,
-                height: QuotasBannerStyles.iconSize,
-                fit: BoxFit.fill,
-              ),
-              const SizedBox(width: QuotasBannerStyles.iconPadding),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
+              Padding(
+                padding: QuotasBannerStyles.bannerPadding,
+                child: Row(
                  children: [
-                    Text(
-                      octetQuota.getQuotaBannerTitle(context),
-                      style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                        fontSize: QuotasBannerStyles.titleTextSize,
-                        fontWeight: QuotasBannerStyles.titleFontWeight,
-                        color: octetQuota.getQuotaBannerTitleColor(),
-                      ),
+                    SvgPicture.asset(
+                      _quotasController.imagePaths.icCloud,
+                      width: QuotasBannerStyles.iconSize,
+                      height: QuotasBannerStyles.iconSize,
+                      fit: BoxFit.fill,
                    ),
-                    const SizedBox(height: QuotasBannerStyles.space),
-                    Text(
-                      octetQuota.getQuotaBannerMessage(context),
-                      style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                        fontSize: QuotasBannerStyles.messageTextSize,
-                        fontWeight: QuotasBannerStyles.messageFontWeight,
-                        color: QuotasBannerStyles.messageTextColor,
+                    const SizedBox(width: QuotasBannerStyles.iconPadding),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            octetQuota.getQuotaBannerTitle(context),
+                            style: QuotasBannerStyles.titleTextStyle,
+                          ),
+                          const SizedBox(height: 8),
+                          if (!PlatformInfo.isWeb ||
+                              !_quotasController.isManageMyStorageIsEnabled)
+                            Text(
+                              appLocalizations.quotaBannerWarningSubtitleWithoutPremium,
+                              style: QuotasBannerStyles.subTitleTextStyle,
+                            )
+                          else
+                            Wrap(
+                              crossAxisAlignment: WrapCrossAlignment.center,
+                              children: [
+                                Text(
+                                  '${appLocalizations.quotaBannerWarningSubtitleWithPremium} ',
+                                  style: QuotasBannerStyles.subTitleTextStyle,
+                                ),
+                                TMailButtonWidget.fromText(
+                                  text: appLocalizations.manageMyStorage,
+                                  backgroundColor: QuotasBannerStyles.backgroundColor,
+                                  textStyle: QuotasBannerStyles.manageStorageButtonTextStyle,
+                                  padding: EdgeInsets.zero,
+                                  onTapActionCallback: () =>
+                                    _quotasController.handleManageMyStorage(context),
+                                ),
+                              ],
+                            ),
+                        ],
                      ),
                    ),
                  ],
                ),
              ),
+              DefaultCloseButtonWidget(
+                iconClose: _quotasController.imagePaths.icCloseDialog,
+                onTapActionCallback: _quotasController.closeBanner,
+              ),
            ],
          ),
        );