TF-3985 Display Increase your space button when premium is available on web desktop

assets/images/ic_premium.svg

@@ -0,0 +1,24 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="21.51" height="21.51" rx="6.56334" fill="white"/>
+<rect width="21.51" height="21.51" rx="6.56334" fill="url(#paint0_linear_6651_18935)"/>
+<rect width="21.51" height="21.51" rx="6.56334" fill="url(#paint1_linear_6651_18935)"/>
+<rect width="21.51" height="21.51" rx="6.56334" fill="url(#paint2_linear_6651_18935)"/>
+<path d="M10.784 3.20544C10.7918 3.21116 10.8008 3.21505 10.8103 3.21682C10.8149 3.21682 10.8195 3.21896 10.8245 3.21931C10.8794 3.225 10.9325 3.24182 10.9806 3.26874C10.9956 3.27621 11.0098 3.2851 11.0244 3.29328L12.093 3.89783L13.3426 4.60479C13.6449 4.77548 13.9469 4.94642 14.2487 5.11759C14.2676 5.12825 14.2864 5.13821 14.3046 5.14959C14.4204 5.22046 14.5015 5.33646 14.5282 5.46964C14.5313 5.48369 14.533 5.49796 14.5336 5.51232C14.5336 5.54575 14.5361 5.57917 14.5361 5.61296V7.05604C14.5361 7.59444 14.5361 8.13284 14.5361 8.67124C14.5361 8.70005 14.5361 8.72885 14.5361 8.7573C14.5337 8.83434 14.5112 8.9094 14.4706 8.97494C14.4101 9.07688 14.3145 9.15334 14.2018 9.19009C14.1537 9.20498 14.1038 9.21323 14.0535 9.21462C14.0319 9.21445 14.0104 9.21267 13.9891 9.20929C13.9319 9.20298 13.8764 9.18584 13.8255 9.15879C13.8085 9.1499 13.7918 9.1403 13.7754 9.13105L12.1694 8.22246L11.0315 7.57986L10.9753 7.54821C10.9303 7.52594 10.8824 7.51002 10.833 7.50092C10.8213 7.49874 10.8094 7.49743 10.7975 7.497C10.7783 7.497 10.7591 7.497 10.7399 7.497C10.6655 7.49747 10.5923 7.51589 10.5265 7.5507C10.5073 7.56066 10.4888 7.57168 10.4703 7.58235C10.0654 7.81421 9.66046 8.04619 9.25554 8.27829L7.79751 9.11363C7.77689 9.12572 7.75591 9.13745 7.73493 9.14919C7.68865 9.17427 7.63892 9.19237 7.58735 9.20289C7.57797 9.20486 7.56846 9.20617 7.5589 9.2068L7.48777 9.20893C7.42039 9.20908 7.3539 9.1935 7.29361 9.16342C7.16286 9.10408 7.06562 8.98922 7.02868 8.85047C7.01723 8.8113 7.01125 8.77073 7.01089 8.72992V5.61331C7.01089 5.59411 7.01089 5.57491 7.01089 5.55606C7.01218 5.49608 7.02422 5.43682 7.04646 5.3811C7.08388 5.28697 7.14994 5.20698 7.23529 5.15244C7.25129 5.14212 7.26836 5.13288 7.28472 5.12328L8.14424 4.63039L9.16592 4.04505L10.199 3.45437L10.4547 3.30786L10.5109 3.27621C10.5448 3.25771 10.5805 3.24281 10.6175 3.23176C10.6409 3.226 10.6647 3.22184 10.6887 3.21931C10.6981 3.21788 10.7069 3.21367 10.7139 3.20722L10.784 3.20544Z" fill="white"/>
+<path d="M3.26935 11.9787C3.2837 11.9748 3.29406 11.9623 3.29531 11.9475C3.29901 11.919 3.30447 11.8909 3.31167 11.8632C3.34245 11.7538 3.41051 11.6587 3.50405 11.5943C3.52361 11.5808 3.54459 11.5687 3.56522 11.5588L4.21813 11.1818L5.67295 10.3426L6.23873 10.0158C6.25936 10.004 6.28034 9.99193 6.30168 9.98019C6.36584 9.94726 6.43688 9.92996 6.509 9.92966C6.63745 9.92817 6.76135 9.97722 6.85395 10.0663C6.91198 10.1205 6.95519 10.1887 6.97948 10.2643C6.99442 10.3074 7.00258 10.3525 7.00366 10.398C7.00366 10.4244 7.00366 10.4507 7.00366 10.477V13.5136C7.00366 13.5445 7.00366 13.5758 7.00366 13.6068C7.00665 13.7651 7.08617 13.9122 7.21703 14.0015C7.23837 14.0164 7.26184 14.0292 7.2846 14.042L7.90479 14.3887L9.18287 15.1032L9.97447 15.5449C9.99545 15.5566 10.0164 15.568 10.0367 15.5804C10.1459 15.6436 10.2252 15.748 10.2568 15.8702C10.2745 15.9325 10.279 15.9978 10.27 16.0619C10.2623 16.1189 10.2452 16.1741 10.2195 16.2255C10.1797 16.3025 10.1195 16.3672 10.0456 16.4126C10.0253 16.4254 10.004 16.4364 9.983 16.4481L7.91403 17.5861L7.20956 17.9726C7.19071 17.9829 7.174 17.994 7.15302 18.0036C7.12109 18.0201 7.08746 18.0331 7.05273 18.0423C7.00403 18.0551 6.95368 18.0605 6.90338 18.0583C6.82158 18.0544 6.7421 18.0299 6.67223 17.9872L6.45566 17.8599L3.57873 16.1686C3.56024 16.1579 3.54317 16.1473 3.52326 16.1355C3.4124 16.0668 3.33374 15.9565 3.30491 15.8293C3.29958 15.8084 3.29815 15.7867 3.29424 15.7657C3.29238 15.7561 3.28564 15.7481 3.27646 15.7447C3.27426 15.7438 3.272 15.7431 3.2697 15.7426L3.26935 11.9787Z" fill="white"/>
+<path d="M14.4767 18.0818C14.4714 18.0771 14.4656 18.0732 14.4593 18.0701C14.4412 18.0637 14.4228 18.0584 14.4042 18.0541C14.3597 18.044 14.317 18.0276 14.2772 18.0053C14.2541 17.9925 14.2317 17.979 14.2089 17.9659L13.146 17.3524L11.5727 16.4453C11.556 16.4357 11.5393 16.4264 11.5233 16.4161C11.4145 16.3482 11.3376 16.2394 11.3099 16.1142C11.3021 16.0816 11.2982 16.0481 11.2982 16.0146C11.2924 15.8508 11.3711 15.6954 11.5066 15.6032C11.5263 15.5902 11.5468 15.5784 11.5678 15.5676L12.4646 15.0534L13.6737 14.361L14.2406 14.0363C14.2655 14.0221 14.2907 14.0082 14.3149 13.9929C14.4073 13.9357 14.4779 13.8492 14.5155 13.7472C14.5285 13.7137 14.5372 13.6787 14.5414 13.643C14.5457 13.605 14.5478 13.5668 14.5478 13.5285C14.5478 13.392 14.5478 13.2558 14.5478 13.1192C14.5478 12.2482 14.5478 11.3773 14.5478 10.5065C14.5478 10.4823 14.5478 10.4585 14.5478 10.4354C14.5478 10.4123 14.5478 10.397 14.55 10.3781C14.556 10.2642 14.604 10.1565 14.6847 10.0758C14.7454 10.0139 14.8217 9.96956 14.9056 9.94747C14.9424 9.9368 14.9804 9.9307 15.0187 9.92926C15.098 9.928 15.1764 9.94594 15.2473 9.98161C15.2665 9.99121 15.2854 10.0019 15.3039 10.0129L16.025 10.4286L17.2935 11.1608L17.9585 11.5445C17.9795 11.5566 18.0001 11.5684 18.0208 11.5801C18.1052 11.6315 18.1717 11.7076 18.2114 11.7981C18.2189 11.8132 18.2238 11.8294 18.2259 11.8461C18.2287 11.8576 18.2339 11.8684 18.2412 11.8777V15.8418C18.2331 15.847 18.2278 15.8556 18.2267 15.8653C18.224 15.8843 18.2182 15.9028 18.2096 15.92C18.1709 16.0056 18.108 16.0779 18.0286 16.1281C18.0087 16.1412 17.9877 16.1529 17.9671 16.1636L16.9895 16.7241L14.8103 17.974C14.7918 17.9847 14.7747 17.9957 14.7541 18.0057C14.7145 18.028 14.6718 18.0445 14.6275 18.0544C14.6111 18.0581 14.5949 18.0629 14.5791 18.0686C14.5724 18.071 14.5668 18.0757 14.5631 18.0818H14.4767Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_6651_18935" x1="21.51" y1="12.5475" x2="-5.53777e-07" y2="12.5475" gradientUnits="userSpaceOnUse">
+<stop offset="0.12998" stop-color="#A033FF"/>
+<stop offset="0.610381" stop-color="#0094FF"/>
+<stop offset="1" stop-color="#4FB500"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6651_18935" x1="9.85875" y1="6.72187" x2="3.13687" y2="20.1656" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD600" stop-opacity="0"/>
+<stop offset="0.563347" stop-color="#FFC700"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6651_18935" x1="11.6512" y1="12.5475" x2="19.2694" y2="20.6137" gradientUnits="userSpaceOnUse">
+<stop offset="0.0297327" stop-color="#FF3B30" stop-opacity="0"/>
+<stop offset="0.842824" stop-color="#E73B2D"/>
+</linearGradient>
+</defs>
+</svg>

core/lib/presentation/extensions/color_extension.dart

@@ -243,6 +243,7 @@ extension AppColor on Color {
   static const m3Tertiary20 = Color(0xFF71767C);
   static const m3Neutral70 = Color(0xFFAEAAAE);
   static const m3Neutral90 = Color(0xFFE6E1E5);
+  static const m3SysLightSecondaryBlue = Color(0xFF5C9CE6);
   static const grayBackgroundColor = Color(0xFFF3F6F9);
   static const m3SurfaceBackground = Color(0xFF1C1B1F);
   static const warningColor = Color(0xFFFFC107);

core/lib/presentation/resources/image_paths.dart

@@ -239,6 +239,7 @@ class ImagePaths {
   String get icTwakeWorkplace => _getIconPath('icon_twp.png');
   String get animLottieTmail => _getAnimationPath('lottie-tmail.json');
   String get icExpandArrows => _getImagePath('ic_expand_arrows.svg');
+  String get icPremium => _getImagePath('ic_premium.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

core/lib/presentation/views/dialog/confirm_dialog_button.dart

@@ -1,11 +1,19 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 class ConfirmDialogButton extends StatelessWidget {
   final String label;
   final Color? backgroundColor;
   final Color? textColor;
   final Color? borderColor;
+  final String? icon;
+  final double? iconSize;
+  final Color? iconColor;
+  final TextStyle? textStyle;
+  final double? radius;
+  final EdgeInsetsGeometry? padding;
   final VoidCallback? onTapAction;
 
   const ConfirmDialogButton({
@@ -14,6 +22,12 @@ class ConfirmDialogButton extends StatelessWidget {
     this.backgroundColor,
     this.textColor,
     this.borderColor,
+    this.icon,
+    this.iconSize,
+    this.iconColor,
+    this.textStyle,
+    this.radius,
+    this.padding,
     this.onTapAction,
   });
 
@@ -21,11 +35,11 @@ class ConfirmDialogButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final outlineBorder = borderColor != null
         ? RoundedRectangleBorder(
-            borderRadius: const BorderRadius.all(Radius.circular(100)),
+            borderRadius: BorderRadius.all(Radius.circular(radius ?? 100)),
             side: BorderSide(width: 1, color: borderColor!),
           )
-        : const RoundedRectangleBorder(
+        : RoundedRectangleBorder(
-            borderRadius: BorderRadius.all(Radius.circular(100)),
+            borderRadius: BorderRadius.all(Radius.circular(radius ?? 100)),
           );
 
     return TextButton(
@@ -33,15 +47,37 @@ class ConfirmDialogButton extends StatelessWidget {
         backgroundColor: backgroundColor,
         overlayColor: Theme.of(context).colorScheme.outline.withValues(alpha: 0.08),
         shape: outlineBorder,
-        padding: const EdgeInsets.symmetric(horizontal: 10),
+        padding: padding ?? const EdgeInsets.symmetric(horizontal: 10),
       ),
       onPressed: onTapAction,
-      child: Text(
+      child: icon == null
-        label,
+          ? Text(
-        style: ThemeUtils.textStyleM3LabelLarge(color: textColor),
+              label,
-        maxLines: 1,
+              style: textStyle ?? ThemeUtils.textStyleM3LabelLarge(color: textColor),
-        overflow: TextOverflow.ellipsis,
+              maxLines: 1,
-      ),
+              overflow: TextOverflow.ellipsis,
+            )
+          : Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SvgPicture.asset(
+                  icon!,
+                  width: iconSize ?? 14,
+                  height: iconSize ?? 14,
+                  fit: BoxFit.fill,
+                  colorFilter: iconColor?.toInt() == Colors.transparent.toInt()
+                      ? null
+                      : iconColor?.asFilter() ?? AppColor.primaryMain.asFilter(),
+                ),
+                const SizedBox(width: 8),
+                Text(
+                  label,
+                  style: textStyle ?? ThemeUtils.textStyleM3LabelLarge(color: textColor),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                )
+              ],
+            ),
     );
   }
 }

lib/features/base/widget/premium/increase_space_button_widget.dart

@@ -0,0 +1,41 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/dialog/confirm_dialog_button.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class IncreaseSpaceButtonWidget extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final VoidCallback onTapAction;
+  final EdgeInsetsGeometry? margin;
+
+  const IncreaseSpaceButtonWidget({
+    super.key,
+    required this.imagePaths,
+    required this.onTapAction,
+    this.margin,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: const BoxConstraints(minWidth: 193),
+      height: 44,
+      margin: margin,
+      child: ConfirmDialogButton(
+        label: AppLocalizations.of(context).increaseYourSpace,
+        borderColor: AppColor.m3SysLightSecondaryBlue,
+        icon: imagePaths.icPremium,
+        iconSize: 22,
+        iconColor: Colors.transparent,
+        textStyle: ThemeUtils.textStyleM3BodyMedium.copyWith(
+          color: AppColor.blue700,
+        ),
+        radius: 7,
+        padding: const EdgeInsetsDirectional.symmetric(horizontal: 8),
+        onTapAction: onTapAction,
+      ),
+    );
+  }
+}

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -5,8 +5,10 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
+import 'package:tmail_ui_user/features/base/widget/premium/increase_space_button_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/validate_saas_premium_available_extension.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/quotas_view.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
@@ -35,6 +37,23 @@ class MailboxView extends BaseMailboxView {
                 : _buildListMailbox(context),
             ),
             const QuotasView(),
+            Obx(() {
+              final isPremiumAvailable =
+                  controller.mailboxDashBoardController.isPremiumAvailable;
+
+              if (isPremiumAvailable) {
+                return IncreaseSpaceButtonWidget(
+                  imagePaths: controller.imagePaths,
+                  margin: const EdgeInsetsDirectional.only(
+                    start: 26,
+                    bottom: 8,
+                  ),
+                  onTapAction: () {},
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
             Container(
               alignment: isDesktop
                 ? AlignmentDirectional.center

lib/features/mailbox_dashboard/presentation/extensions/validate_saas_premium_available_extension.dart

@@ -0,0 +1,16 @@
+import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+
+extension ValidateSaasPremiumAvailableExtension on MailboxDashBoardController {
+  bool get isPremiumAvailable {
+    if (accountId.value == null || sessionCurrent == null) {
+      return false;
+    }
+
+    final saasAccount = sessionCurrent?.getSaaSAccountCapability(
+      accountId.value!,
+    );
+
+    return saasAccount?.isPremiumAvailable ?? false;
+  }
+}

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2025-08-18T13:21:17.206262",
+  "@@last_modified": "2025-09-09T13:12:15.883838",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -4671,5 +4671,11 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "increaseYourSpace": "Increase your space",
+  "@increaseYourSpace": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
-}
+}

lib/main/localizations/app_localizations.dart

@@ -4928,4 +4928,11 @@ class AppLocalizations {
       name: 'archiveMessagesFailed',
     );
   }
+
+  String get increaseYourSpace {
+    return Intl.message(
+      'Increase your space',
+      name: 'increaseYourSpace',
+    );
+  }
 }

model/lib/saas/saas_account_capability.dart

@@ -19,6 +19,8 @@ class SaaSAccountCapability extends CapabilityProperties {
     return SaaSAccountCapability.fromJson(json);
   }
 
+  bool get isPremiumAvailable => canUpgrade;
+
   @override
   List<Object?> get props => [isPaying, canUpgrade];
 }