TF-1813 Support RichText in confirm dialog

(cherry picked from commit cabaf34f1a7c7281b933a157f2edb91dba9faefa)

core/lib/presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart

@@ -19,8 +19,9 @@ class ConfirmationDialogActionSheetBuilder {
   TextStyle? _styleConfirmButton;
   TextStyle? _styleCancelButton;
   TextStyle? _styleMessage;
+  List<TextSpan>? listTextSpan;
 
-  ConfirmationDialogActionSheetBuilder(this._context);
+  ConfirmationDialogActionSheetBuilder(this._context, {this.listTextSpan});
 
   void onConfirmAction(String confirmText, OnConfirmActionClick onConfirmActionClick) {
     _onConfirmActionClick = onConfirmActionClick;
@@ -54,20 +55,36 @@ class ConfirmationDialogActionSheetBuilder {
       barrierColor: AppColor.colorDefaultCupertinoActionSheet,
       builder: (context) => PointerInterceptor(child: CupertinoActionSheet(
         actions: [
-          Container(
+          if (_messageText != null && _messageText!.isNotEmpty)
+            Container(
+                padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
+                color: Colors.white,
+                child: MouseRegion(
+                  cursor: BuildUtils.isWeb ? MaterialStateMouseCursor.clickable : MouseCursor.defer,
+                  child: CupertinoActionSheetAction(
+                    child: Text(
+                        _messageText ?? '',
+                        textAlign: TextAlign.center,
+                        style: _styleMessage ?? const TextStyle(fontSize: 14, color: AppColor.colorMessageConfirmDialog)),
+                    onPressed: () => {},
+                  ),
+                )
+            )
+          else if (listTextSpan != null)
+            Container(
               padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
               color: Colors.white,
               child: MouseRegion(
                 cursor: BuildUtils.isWeb ? MaterialStateMouseCursor.clickable : MouseCursor.defer,
                 child: CupertinoActionSheetAction(
-                  child: Text(
+                  child: RichText(text: TextSpan(
-                      _messageText ?? '',
+                    style: _styleMessage ?? const TextStyle(fontSize: 14, color: AppColor.colorMessageConfirmDialog),
-                      textAlign: TextAlign.center,
+                    children: listTextSpan
-                      style: _styleMessage ?? const TextStyle(fontSize: 14, color: AppColor.colorMessageConfirmDialog)),
+                  )),
                   onPressed: () => {},
                 ),
               )
-          ),
+            ),
           Container(
               color: Colors.white,
               child: MouseRegion(

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

@@ -23,6 +23,7 @@ class ConfirmDialogBuilder {
   TextStyle? _styleTitle;
   TextStyle? _styleContent;
   double? _radiusButton;
+  double? heightButton;
   EdgeInsets? _paddingTitle;
   EdgeInsets? _paddingContent;
   EdgeInsets? _paddingButton;
@@ -34,6 +35,7 @@ class ConfirmDialogBuilder {
   Alignment? _alignment;
   Color? _backgroundColor;
   bool showAsBottomSheet;
+  List<TextSpan>? listTextSpan;
 
   OnConfirmButtonAction? _onConfirmButtonAction;
   OnCancelButtonAction? _onCancelButtonAction;
@@ -41,7 +43,11 @@ class ConfirmDialogBuilder {
 
   ConfirmDialogBuilder(
     this._imagePath,
-    {this.showAsBottomSheet = false}
+    {
+      this.showAsBottomSheet = false,
+      this.listTextSpan,
+      this.heightButton,
+    }
   );
 
   void key(Key key) {
@@ -116,7 +122,7 @@ class ConfirmDialogBuilder {
     _heightDialog = value;
   }
 
-  void aligment(Alignment? alignment) {
+  void alignment(Alignment? alignment) {
     _alignment = alignment;
   }
 
@@ -204,6 +210,19 @@ class ConfirmDialogBuilder {
                     style: _styleContent ?? const TextStyle(fontSize: 17.0, color: AppColor.colorMessageDialog)
                 ),
               ),
+            )
+          else if (listTextSpan != null)
+            Padding(
+              padding: _paddingContent ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+              child: Center(
+                child: RichText(
+                  textAlign: TextAlign.center,
+                  text: TextSpan(
+                    style: _styleContent ?? const TextStyle(fontSize: 17.0, color: AppColor.colorMessageDialog),
+                    children: listTextSpan
+                  ),
+                ),
+              ),
             ),
           Padding(
               padding: _paddingButton ?? const EdgeInsets.only(bottom: 16, left: 16, right: 16),
@@ -214,6 +233,7 @@ class ConfirmDialogBuilder {
                           name: _cancelText,
                           bgColor: _colorCancelButton,
                           radius: _radiusButton,
+                          height: heightButton,
                           textStyle: _styleTextCancelButton,
                           action: _onCancelButtonAction)),
                     if (_confirmText.isNotEmpty && _cancelText.isNotEmpty) const SizedBox(width: 16),
@@ -222,6 +242,7 @@ class ConfirmDialogBuilder {
                           name: _confirmText,
                           bgColor: _colorConfirmButton,
                           radius: _radiusButton,
+                          height: heightButton,
                           textStyle: _styleTextConfirmButton,
                           action: _onConfirmButtonAction))
                   ]
@@ -231,11 +252,16 @@ class ConfirmDialogBuilder {
   }
 
   Widget _buildButton({
-    String? name, TextStyle? textStyle, Color? bgColor, double? radius, Function? action
+    String? name,
+    TextStyle? textStyle,
+    Color? bgColor,
+    double? radius,
+    double? height,
+    Function? action
   }) {
     return SizedBox(
       width: double.infinity,
-      height: 48,
+      height: height ?? 48,
       child: ElevatedButton(
         onPressed: () => action?.call(),
         style: ButtonStyle(

lib/features/base/mixin/message_dialog_action_mixin.dart

@@ -18,8 +18,11 @@ mixin MessageDialogActionMixin {
         String? cancelTitle,
         bool hasCancelButton = true,
         bool showAsBottomSheet = false,
+        bool alignCenter = false,
+        List<TextSpan>? listTextSpan,
         Widget? icon,
         TextStyle? titleStyle,
+        TextStyle? messageStyle,
         TextStyle? actionStyle,
         TextStyle? cancelStyle,
         Color? actionButtonColor,
@@ -29,16 +32,45 @@ mixin MessageDialogActionMixin {
     final responsiveUtils = Get.find<ResponsiveUtils>();
     final imagePaths = Get.find<ImagePaths>();
 
-    if (responsiveUtils.isMobile(context)) {
+    if (alignCenter) {
-      if (showAsBottomSheet) {
+      showDialog(
-        showModalBottomSheet(
+        context: context,
+        barrierColor: AppColor.colorDefaultCupertinoActionSheet,
+        builder: (BuildContext context) => PointerInterceptor(
+          child: (ConfirmDialogBuilder(imagePaths, listTextSpan: listTextSpan, heightButton: 44)
+            ..key(const Key('confirm_dialog_action'))
+            ..title(title ?? '')
+            ..content(message)
+            ..addIcon(icon)
+            ..colorConfirmButton(actionButtonColor ?? AppColor.colorTextButton)
+            ..colorCancelButton(cancelButtonColor ?? AppColor.colorCancelButton)
+            ..paddingTitle(icon != null ? const EdgeInsets.only(top: 24) : EdgeInsets.zero)
+            ..radiusButton(12)
+            ..paddingContent(const EdgeInsets.only(left: 24, right: 24, bottom: 24, top: 12))
+            ..paddingButton(hasCancelButton ? null : const EdgeInsets.only(bottom: 24, left: 24, right: 24))
+            ..styleTitle(titleStyle ?? const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black))
+            ..styleContent(messageStyle ?? const TextStyle(fontSize: 14, fontWeight: FontWeight.normal, color: AppColor.colorContentEmail))
+            ..styleTextCancelButton(cancelStyle ?? const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))
+            ..styleTextConfirmButton(actionStyle ?? const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: Colors.white))
+            ..onConfirmButtonAction(actionName, () {
+                popBack();
+                onConfirmAction?.call();
+            })
+            ..onCancelButtonAction(hasCancelButton ? cancelTitle ?? AppLocalizations.of(context).cancel : '', () => popBack())
+          ).build()
+        )
+      );
+    } else {
+      if (responsiveUtils.isMobile(context)) {
+        if (showAsBottomSheet) {
+          showModalBottomSheet(
             context: context,
             isScrollControlled: true,
             barrierColor: AppColor.colorDefaultCupertinoActionSheet,
             backgroundColor: Colors.transparent,
             enableDrag: true,
             builder: (BuildContext context) => PointerInterceptor(
-              child: (ConfirmDialogBuilder(imagePaths, showAsBottomSheet: true)
+              child: (ConfirmDialogBuilder(imagePaths, showAsBottomSheet: true, listTextSpan: listTextSpan)
                 ..key(const Key('confirm_dialog_action'))
                 ..title(title ?? '')
                 ..content(message)
@@ -52,31 +84,34 @@ mixin MessageDialogActionMixin {
                 ..paddingContent(const EdgeInsets.only(left: 44, right: 44, bottom: 24, top: 12))
                 ..paddingButton(hasCancelButton ? null : const EdgeInsets.only(bottom: 16, left: 44, right: 44))
                 ..styleTitle(titleStyle ?? const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black))
-                ..styleContent(const TextStyle(fontSize: 14, fontWeight: FontWeight.normal, color: AppColor.colorContentEmail))
+                ..styleContent(messageStyle ?? const TextStyle(fontSize: 14, fontWeight: FontWeight.normal, color: AppColor.colorContentEmail))
                 ..styleTextCancelButton(cancelStyle ?? const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))
                 ..styleTextConfirmButton(actionStyle ?? const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: Colors.white))
                 ..onConfirmButtonAction(actionName, () {
-                  popBack();
+                    popBack();
-                  onConfirmAction?.call();
+                    onConfirmAction?.call();
                 })
                 ..onCancelButtonAction(hasCancelButton ? cancelTitle ?? AppLocalizations.of(context).cancel : '', () => popBack())
                 ..onCloseButtonAction(() => popBack()))
               .build()));
+        } else {
+          (ConfirmationDialogActionSheetBuilder(context, listTextSpan: listTextSpan)
+            ..messageText(message)
+            ..styleConfirmButton(const TextStyle(fontSize: 20, fontWeight: FontWeight.normal, color: Colors.black))
+            ..styleMessage(messageStyle)
+            ..styleCancelButton(cancelStyle)
+            ..onCancelAction(cancelTitle ?? AppLocalizations.of(context).cancel, () => popBack())
+            ..onConfirmAction(actionName, () {
+                popBack();
+                onConfirmAction?.call();
+            })).show();
+        }
       } else {
-        (ConfirmationDialogActionSheetBuilder(context)
+        showDialog(
-          ..messageText(message)
-          ..styleConfirmButton(const TextStyle(fontSize: 20, fontWeight: FontWeight.normal, color: Colors.black))
-          ..onCancelAction(cancelTitle ?? AppLocalizations.of(context).cancel, () => popBack())
-          ..onConfirmAction(actionName, () {
-            popBack();
-            onConfirmAction?.call();
-          })).show();
-      }
-    } else {
-      showDialog(
           context: context,
           barrierColor: AppColor.colorDefaultCupertinoActionSheet,
-          builder: (BuildContext context) => PointerInterceptor(child: (ConfirmDialogBuilder(imagePaths)
+          builder: (BuildContext context) => PointerInterceptor(
+            child: (ConfirmDialogBuilder(imagePaths, listTextSpan: listTextSpan)
               ..key(const Key('confirm_dialog_action'))
               ..title(title ?? '')
               ..content(message)
@@ -88,7 +123,7 @@ mixin MessageDialogActionMixin {
               ..paddingContent(const EdgeInsets.only(left: 44, right: 44, bottom: 24, top: 12))
               ..paddingButton(hasCancelButton ? null : const EdgeInsets.only(bottom: 16, left: 44, right: 44))
               ..styleTitle(titleStyle ?? const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black))
-              ..styleContent(const TextStyle(fontSize: 14, fontWeight: FontWeight.normal, color: AppColor.colorContentEmail))
+              ..styleContent(messageStyle ?? const TextStyle(fontSize: 14, fontWeight: FontWeight.normal, color: AppColor.colorContentEmail))
               ..styleTextCancelButton(cancelStyle ?? const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))
               ..styleTextConfirmButton(actionStyle ?? const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: Colors.white))
               ..onConfirmButtonAction(actionName, () {
@@ -97,7 +132,10 @@ mixin MessageDialogActionMixin {
               })
               ..onCancelButtonAction(hasCancelButton ? cancelTitle ?? AppLocalizations.of(context).cancel : '', () => popBack())
               ..onCloseButtonAction(() => popBack()))
-            .build()));
+            .build()
+          )
+        );
+      }
     }
   }
 }