TF-2667 Show saving message dialog when preform save action

2024-03-06 03:02:18 +07:00
parent 490a913bdb
commit 904736a3aa
14 changed files with 784 additions and 95 deletions
@@ -1,6 +1,5 @@
 import 'package:core/core.dart';
 import 'package:core/utils/application_manager.dart';
-import 'package:core/utils/file_utils.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/base_bindings.dart';
 import 'package:tmail_ui_user/features/composer/data/datasource/composer_datasource.dart';
@@ -11,6 +10,7 @@ import 'package:tmail_ui_user/features/composer/data/repository/composer_reposit
 import 'package:tmail_ui_user/features/composer/data/repository/contact_repository_impl.dart';
 import 'package:tmail_ui_user/features/composer/domain/repository/composer_repository.dart';
 import 'package:tmail_ui_user/features/composer/domain/repository/contact_repository.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/create_new_and_save_email_to_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/create_new_and_send_email_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/download_image_as_base64_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/save_email_as_drafts_interactor.dart';
@@ -208,6 +208,11 @@ class ComposerBindings extends BaseBindings {
      Get.find<MailboxRepository>(),
      Get.find<ComposerRepository>(),
    ));
+    Get.lazyPut(() => CreateNewAndSaveEmailToDraftsInteractor(
+      Get.find<EmailRepository>(),
+      Get.find<MailboxRepository>(),
+      Get.find<ComposerRepository>(),
+    ));

    IdentityInteractorsBindings().dependencies();
  }
@@ -229,6 +234,8 @@ class ComposerBindings extends BaseBindings {
      Get.find<DownloadImageAsBase64Interactor>(),
      Get.find<TransformHtmlEmailContentInteractor>(),
      Get.find<GetAlwaysReadReceiptSettingInteractor>(),
+      Get.find<CreateNewAndSendEmailInteractor>(),
+      Get.find<CreateNewAndSaveEmailToDraftsInteractor>(),
    ));
  }

@@ -43,6 +43,7 @@ import 'package:tmail_ui_user/features/composer/domain/state/get_device_contact_
 import 'package:tmail_ui_user/features/composer/domain/state/save_email_as_drafts_state.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/send_email_state.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/update_email_drafts_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/create_new_and_save_email_to_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/create_new_and_send_email_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/download_image_as_base64_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/get_all_autocomplete_interactor.dart';
@@ -63,6 +64,7 @@ import 'package:tmail_ui_user/features/composer/presentation/model/save_to_draft
 import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/from_composer_bottom_sheet_builder.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/saving_message_dialog_view.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/sending_message_dialog_view.dart';
 import 'package:tmail_ui_user/features/email/domain/exceptions/email_exceptions.dart';
 import 'package:tmail_ui_user/features/email/domain/state/get_email_content_state.dart';
@@ -133,6 +135,7 @@ class ComposerController extends BaseController with DragDropFileMixin {
  final TransformHtmlEmailContentInteractor _transformHtmlEmailContentInteractor;
  final GetAlwaysReadReceiptSettingInteractor _getAlwaysReadReceiptSettingInteractor;
  final CreateNewAndSendEmailInteractor _createNewAndSendEmailInteractor;
+  final CreateNewAndSaveEmailToDraftsInteractor _createNewAndSaveEmailToDraftsInteractor;

  GetAllAutoCompleteInteractor? _getAllAutoCompleteInteractor;
  GetAutoCompleteInteractor? _getAutoCompleteInteractor;
@@ -202,6 +205,7 @@ class ComposerController extends BaseController with DragDropFileMixin {
    this._transformHtmlEmailContentInteractor,
    this._getAlwaysReadReceiptSettingInteractor,
    this._createNewAndSendEmailInteractor,
+    this._createNewAndSaveEmailToDraftsInteractor,
  );

  @override
@@ -348,11 +352,11 @@ class ComposerController extends BaseController with DragDropFileMixin {
        },
        (success) {
          if (success is SaveEmailAsDraftsSuccess) {
-            _emailIdEditing = success.emailAsDrafts.id;
+            _emailIdEditing = success.emailId;
            _saveToDraftButtonState = ButtonState.enabled;
            log('ComposerController::_listenStreamEvent::dashboardViewStateWorker:SaveEmailAsDraftsSuccess:emailIdEditing: $_emailIdEditing');
          } else if (success is UpdateEmailDraftsSuccess) {
-            _emailIdEditing = success.emailAsDrafts.id;
+            _emailIdEditing = success.emailId;
            _saveToDraftButtonState = ButtonState.enabled;
            log('ComposerController::_listenStreamEvent::dashboardViewStateWorker:UpdateEmailDraftsSuccess:emailIdEditing: $_emailIdEditing');
          }
@@ -1211,65 +1215,6 @@ class ComposerController extends BaseController with DragDropFileMixin {
    return false;
  }

-  Future<SaveToDraftArguments?> _generateSaveAsDraftsArguments(BuildContext context) async {
-    log('ComposerController::_generateSaveAsDraftsArguments:');
-    final arguments = composerArguments.value;
-    final accountId = mailboxDashBoardController.accountId.value;
-    final session = mailboxDashBoardController.sessionCurrent;
-    final draftMailboxId = mailboxDashBoardController.mapDefaultMailboxIdByRole[PresentationMailbox.roleDrafts];
-
-    if (arguments == null ||
-        draftMailboxId == null ||
-        session == null ||
-        accountId == null
-    ) {
-      return null;
-    }
-
-    if (_emailIdEditing != null && _emailIdEditing != arguments.presentationEmail?.id) {
-      final newEmail = await _generateEmail(
-        context,
-        session.username,
-        asDrafts: true,
-        draftMailboxId: draftMailboxId,
-        arguments: arguments,
-      );
-
-      return SaveToDraftArguments(
-        session: session,
-        accountId: accountId,
-        newEmail: newEmail,
-        oldEmailId: _emailIdEditing!);
-    } else {
-      final isChanged = await _validateEmailChange(
-        context: context,
-        emailActionType: arguments.emailActionType,
-        presentationEmail: arguments.presentationEmail,
-        mailboxRole: arguments.mailboxRole
-      );
-
-      if (isChanged && context.mounted) {
-        final newEmail = await _generateEmail(
-          context,
-          session.username,
-          asDrafts: true,
-          draftMailboxId: draftMailboxId,
-          arguments: arguments,
-        );
-
-        return SaveToDraftArguments(
-          session: session,
-          accountId: accountId,
-          newEmail: newEmail,
-          oldEmailId: arguments.emailActionType == EmailActionType.editDraft
-            ? arguments.presentationEmail?.id
-            : null);
-      } else {
-        return null;
-      }
-    }
-  }
-
  void saveToDraftAction(BuildContext context) async {
    if (_saveToDraftButtonState == ButtonState.disabled) {
      log('ComposerController::saveToDraftAction: Saving to draft');
@@ -2103,9 +2048,10 @@ class ComposerController extends BaseController with DragDropFileMixin {
      AppLocalizations.of(context).save,
      cancelTitle: AppLocalizations.of(context).discardChanges,
      alignCenter: true,
-      onConfirmAction: () {
-        _closeComposerButtonState = ButtonState.enabled;
-      },
+      onConfirmAction: () async => await Future.delayed(
+        const Duration(milliseconds: 100),
+        () => _handleSaveMessageToDraft(context)
+      ),
      onCancelAction: () async {
        _closeComposerButtonState = ButtonState.enabled;
        await Future.delayed(
@@ -2180,4 +2126,132 @@ class ComposerController extends BaseController with DragDropFileMixin {
      onValidationSuccess: () => _uploadAttachmentsAction(pickedFiles: listFileInfo)
    );
  }
+
+  void _handleSaveMessageToDraft(BuildContext context) async {
+    if (composerArguments.value == null ||
+        mailboxDashBoardController.sessionCurrent == null ||
+        mailboxDashBoardController.accountId.value == null ||
+        mailboxDashBoardController.mapDefaultMailboxIdByRole[PresentationMailbox.roleDrafts] == null
+    ) {
+      log('ComposerController::_handleSaveMessageToDraft: SESSION or ACCOUNT_ID or ARGUMENTS is NULL');
+      _closeComposerButtonState = ButtonState.enabled;
+      _closeComposerAction();
+      return;
+    }
+
+    final emailContent = await _getContentInEditor();
+    final draftEmailId = _getDraftEmailId();
+    log('ComposerController::_handleSaveMessageToDraft: draftEmailId = $draftEmailId');
+    final resultState = await _showSavingMessageToDraftsDialog(
+      emailContent: emailContent,
+      draftEmailId: draftEmailId
+    );
+
+    if (resultState is SaveEmailAsDraftsSuccess || resultState is UpdateEmailDraftsSuccess) {
+      _closeComposerButtonState = ButtonState.enabled;
+      _closeComposerAction(result: resultState);
+    } else if ((resultState is SaveEmailAsDraftsFailure ||
+        resultState is UpdateEmailDraftsFailure ||
+        resultState is GenerateEmailFailure) &&
+        context.mounted
+    ) {
+      _showConfirmDialogWhenSaveMessageToDraftsFailure(
+        context: context,
+        failure: resultState
+      );
+    } else {
+      _closeComposerButtonState = ButtonState.enabled;
+    }
+  }
+
+  EmailId? _getDraftEmailId() {
+    if (_emailIdEditing != null &&
+        _emailIdEditing != composerArguments.value!.presentationEmail?.id) {
+      return _emailIdEditing;
+    } else if (composerArguments.value!.emailActionType == EmailActionType.editDraft) {
+      return composerArguments.value!.presentationEmail?.id;
+    } else {
+      return null;
+    }
+  }
+
+  Future<dynamic> _showSavingMessageToDraftsDialog({
+    required String emailContent,
+    EmailId? draftEmailId,
+  }) {
+    return Get.dialog(
+      PointerInterceptor(
+        child: SavingMessageDialogView(
+          createEmailRequest: CreateEmailRequest(
+            session: mailboxDashBoardController.sessionCurrent!,
+            accountId: mailboxDashBoardController.accountId.value!,
+            emailActionType: composerArguments.value!.emailActionType,
+            subject: subjectEmail.value ?? '',
+            emailContent: emailContent,
+            fromSender: composerArguments.value!.presentationEmail?.from ?? {},
+            toRecipients: listToEmailAddress.toSet(),
+            ccRecipients: listCcEmailAddress.toSet(),
+            bccRecipients: listBccEmailAddress.toSet(),
+            isRequestReadReceipt: hasRequestReadReceipt.value,
+            identity: identitySelected.value,
+            attachments: uploadController.attachmentsUploaded,
+            inlineAttachments: uploadController.mapInlineAttachments,
+            sentMailboxId: mailboxDashBoardController.mapDefaultMailboxIdByRole[PresentationMailbox.roleSent],
+            draftsMailboxId: mailboxDashBoardController.mapDefaultMailboxIdByRole[PresentationMailbox.roleDrafts],
+            draftsEmailId: draftEmailId,
+            answerForwardEmailId: composerArguments.value!.presentationEmail?.id,
+            unsubscribeEmailId: composerArguments.value!.previousEmailId,
+            messageId: composerArguments.value!.messageId,
+            references: composerArguments.value!.references,
+            emailSendingQueue: composerArguments.value!.sendingEmail
+          ),
+          createNewAndSaveEmailToDraftsInteractor: _createNewAndSaveEmailToDraftsInteractor
+        ),
+      ),
+      barrierColor: AppColor.colorDefaultCupertinoActionSheet,
+    );
+  }
+
+  void _showConfirmDialogWhenSaveMessageToDraftsFailure({
+    required BuildContext context,
+    required FeatureFailure failure
+  }) {
+    showConfirmDialogAction(
+      context,
+      title: '',
+      AppLocalizations.of(context).warningMessageWhenSaveEmailToDraftsFailure,
+      AppLocalizations.of(context).edit,
+      cancelTitle: AppLocalizations.of(context).closeAnyway,
+      alignCenter: true,
+      onConfirmAction: () {
+        _closeComposerButtonState = ButtonState.enabled;
+        _autoFocusFieldWhenLauncher();
+      },
+      onCancelAction: () async {
+        _closeComposerButtonState = ButtonState.enabled;
+        await Future.delayed(
+          const Duration(milliseconds: 100),
+          _closeComposerAction
+        );
+      },
+      icon: SvgPicture.asset(
+        imagePaths.icQuotasWarning,
+        width: 40,
+        height: 40,
+        colorFilter: AppColor.colorBackgroundQuotasWarning.asFilter(),
+      ),
+      messageStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
+        fontSize: 14,
+        color: AppColor.colorTextBody
+      ),
+      actionStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
+        fontSize: 17,
+        color: Colors.white
+      ),
+      cancelStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
+        fontSize: 17,
+        color: Colors.black
+      )
+    );
+  }
 }
@@ -0,0 +1,209 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:core/presentation/extensions/capitalize_extension.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/state/failure.dart';
+import 'package:core/presentation/state/success.dart';
+import 'package:core/utils/app_logger.dart';
+import 'package:dartz/dartz.dart' as dartz;
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/composer/domain/state/generate_email_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/state/save_email_as_drafts_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/state/update_email_drafts_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/create_new_and_save_email_to_drafts_interactor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/create_email_request.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class SavingMessageDialogView extends StatefulWidget {
+
+  final CreateEmailRequest createEmailRequest;
+  final CreateNewAndSaveEmailToDraftsInteractor createNewAndSaveEmailToDraftsInteractor;
+
+  const SavingMessageDialogView({
+    super.key,
+    required this.createEmailRequest,
+    required this.createNewAndSaveEmailToDraftsInteractor,
+  });
+
+  @override
+  State<SavingMessageDialogView> createState() => _SavingMessageDialogViewState();
+}
+
+class _SavingMessageDialogViewState extends State<SavingMessageDialogView> {
+
+  StreamSubscription? _streamSubscription;
+  final ValueNotifier<dartz.Either<Failure, Success>?> _viewStateNotifier = ValueNotifier(null);
+
+  @override
+  void initState() {
+    super.initState();
+    _streamSubscription = widget.createNewAndSaveEmailToDraftsInteractor
+      .execute(widget.createEmailRequest)
+      .listen(
+        _handleDataStream,
+        onError: _handleErrorStream
+      );
+  }
+
+  void _handleDataStream(dartz.Either<Failure, Success> newState) {
+    _viewStateNotifier.value = newState;
+
+    newState.fold(
+      (failure) {
+        if (failure is SaveEmailAsDraftsFailure ||
+            failure is UpdateEmailDraftsFailure ||
+            failure is GenerateEmailFailure) {
+          popBack(result: failure);
+        }
+      },
+      (success) {
+        if (success is SaveEmailAsDraftsSuccess || success is UpdateEmailDraftsSuccess) {
+          popBack(result: success);
+        }
+      }
+    );
+  }
+
+  void _handleErrorStream(Object error, StackTrace stackTrace) {
+    logError('_SavingMessageDialogViewState::_handleErrorStream: Exception = $error');
+    popBack(result: SaveEmailAsDraftsFailure(error));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12))),
+      insetPadding: const EdgeInsets.symmetric(
+        horizontal: 24.0,
+        vertical: 16.0
+      ),
+      alignment: Alignment.center,
+      child: Container(
+        decoration: const BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          color: Colors.white,
+        ),
+        width: min(context.width, 400),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: double.infinity,
+              clipBehavior: Clip.antiAlias,
+              padding: const EdgeInsetsDirectional.symmetric(vertical: 8, horizontal: 12),
+              decoration: const BoxDecoration(
+                borderRadius: BorderRadius.all(Radius.circular(12)),
+                color: AppColor.colorItemSelected,
+              ),
+              alignment: Alignment.center,
+              child: Text(
+                AppLocalizations.of(context).savingMessage.capitalizeFirstEach,
+                style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                  color: Colors.black,
+                  fontWeight: FontWeight.bold,
+                  fontSize: 17
+                ),
+              ),
+            ),
+            const Divider(),
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Padding(
+                  padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 12, bottom: 4),
+                  child: Row(
+                    children: [
+                      Text(
+                        '${AppLocalizations.of(context).status}:',
+                        style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                          color: Colors.black,
+                          fontWeight: FontWeight.w500,
+                          fontSize: 14
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: ValueListenableBuilder(
+                          valueListenable: _viewStateNotifier,
+                          builder: (context, value, child) {
+                            if (value == null) {
+                              return child!;
+                            }
+
+                            return value.fold(
+                              (failure) => child!,
+                              (success) {
+                                if (success is GenerateEmailLoading) {
+                                  return Text(
+                                    '${AppLocalizations.of(context).creatingMessage}...',
+                                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                                      color: AppColor.labelColor,
+                                      fontSize: 14
+                                    ),
+                                  );
+                                } else {
+                                  return Text(
+                                    '${AppLocalizations.of(context).savingMessageToDraftFolder}...',
+                                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                                      color: AppColor.labelColor,
+                                      fontSize: 14
+                                    ),
+                                  );
+                                }
+                              }
+                            );
+                          },
+                          child: Text(
+                            '...',
+                            style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                              color: AppColor.labelColor,
+                              fontSize: 14
+                            ),
+                          ),
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 4, bottom: 24),
+                  child: Row(
+                    children: [
+                      Text(
+                        '${AppLocalizations.of(context).progress}:',
+                        style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                          color: Colors.black,
+                          fontWeight: FontWeight.w500,
+                          fontSize: 14
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: LinearProgressIndicator(
+                          color: Colors.white.withOpacity(0.6),
+                          backgroundColor: AppColor.primaryColor,
+                          borderRadius: const BorderRadius.all(Radius.circular(12)),
+                        ),
+                      )
+                    ],
+                  ),
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _streamSubscription?.cancel();
+    _viewStateNotifier.dispose();
+    super.dispose();
+  }
+}
@@ -33,13 +33,13 @@ class SendingMessageDialogView extends StatefulWidget {

 class _SendingMessageDialogViewState extends State<SendingMessageDialogView> {

-  StreamSubscription? _sendingStreamSubscription;
-  final ValueNotifier<dartz.Either<Failure, Success>?> _sendingNotifier = ValueNotifier(null);
+  StreamSubscription? _streamSubscription;
+  final ValueNotifier<dartz.Either<Failure, Success>?> _viewStateNotifier = ValueNotifier(null);

  @override
  void initState() {
    super.initState();
-    _sendingStreamSubscription = widget.createNewAndSendEmailInteractor
+    _streamSubscription = widget.createNewAndSendEmailInteractor
      .execute(widget.createEmailRequest)
      .listen(
        _handleDataStream,
@@ -48,7 +48,7 @@ class _SendingMessageDialogViewState extends State<SendingMessageDialogView> {
  }

  void _handleDataStream(dartz.Either<Failure, Success> newState) {
-    _sendingNotifier.value = newState;
+    _viewStateNotifier.value = newState;

    newState.fold(
      (failure) {
@@ -125,7 +125,7 @@ class _SendingMessageDialogViewState extends State<SendingMessageDialogView> {
                      const SizedBox(width: 8),
                      Expanded(
                        child: ValueListenableBuilder(
-                          valueListenable: _sendingNotifier,
+                          valueListenable: _viewStateNotifier,
                          builder: (context, value, child) {
                            if (value == null) {
                              return child!;
@@ -136,13 +136,13 @@ class _SendingMessageDialogViewState extends State<SendingMessageDialogView> {
                              (success) {
                                if (success is GenerateEmailLoading) {
                                  return Text(
-                                    'Creating email...',
+                                    '${AppLocalizations.of(context).creatingMessage}...',
                                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
                                      color: AppColor.labelColor,
                                      fontSize: 14
                                    ),
                                  );
-                                } else if (success is SendEmailLoading) {
+                                } else {
                                  return Text(
                                    '${AppLocalizations.of(context).sendingMessage}...',
                                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
@@ -150,14 +150,12 @@ class _SendingMessageDialogViewState extends State<SendingMessageDialogView> {
                                      fontSize: 14
                                    ),
                                  );
-                                } else {
-                                  return child!;
                                }
                              }
                            );
                          },
                          child: Text(
-                            '${AppLocalizations.of(context).sendingMessage}...',
+                            '...',
                            style: Theme.of(context).textTheme.labelSmall?.copyWith(
                              color: AppColor.labelColor,
                              fontSize: 14
@@ -201,8 +199,8 @@ class _SendingMessageDialogViewState extends State<SendingMessageDialogView> {

  @override
  void dispose() {
-    _sendingStreamSubscription?.cancel();
-    _sendingNotifier.dispose();
+    _streamSubscription?.cancel();
+    _viewStateNotifier.dispose();
    super.dispose();
  }
 }
@@ -0,0 +1,208 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:core/presentation/extensions/capitalize_extension.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/state/failure.dart';
+import 'package:core/presentation/state/success.dart';
+import 'package:core/utils/app_logger.dart';
+import 'package:dartz/dartz.dart' as dartz;
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/composer/domain/state/generate_email_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/state/send_email_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/create_new_and_send_email_interactor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/create_email_request.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class SavingMessageToDraftsDialogView extends StatefulWidget {
+
+  final CreateEmailRequest createEmailRequest;
+  final CreateNewAndSendEmailInteractor createNewAndSendEmailInteractor;
+
+  const SavingMessageToDraftsDialogView({
+    super.key,
+    required this.createEmailRequest,
+    required this.createNewAndSendEmailInteractor,
+  });
+
+  @override
+  State<SavingMessageToDraftsDialogView> createState() => _SavingMessageToDraftsDialogViewState();
+}
+
+class _SavingMessageToDraftsDialogViewState extends State<SavingMessageToDraftsDialogView> {
+
+  StreamSubscription? _sendingStreamSubscription;
+  final ValueNotifier<dartz.Either<Failure, Success>?> _sendingNotifier = ValueNotifier(null);
+
+  @override
+  void initState() {
+    super.initState();
+    _sendingStreamSubscription = widget.createNewAndSendEmailInteractor
+      .execute(widget.createEmailRequest)
+      .listen(
+        _handleDataStream,
+        onError: _handleErrorStream
+      );
+  }
+
+  void _handleDataStream(dartz.Either<Failure, Success> newState) {
+    _sendingNotifier.value = newState;
+
+    newState.fold(
+      (failure) {
+        if (failure is SendEmailFailure || failure is GenerateEmailFailure) {
+          popBack(result: failure);
+        }
+      },
+      (success) {
+        if (success is SendEmailSuccess) {
+          popBack(result: success);
+        }
+      }
+    );
+  }
+
+  void _handleErrorStream(Object error, StackTrace stackTrace) {
+    logError('_SendingMessageDialogViewState::_handleErrorStream: Exception = $error');
+    popBack(result: SendEmailFailure(exception: error));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(12))),
+      insetPadding: const EdgeInsets.symmetric(
+        horizontal: 24.0,
+        vertical: 16.0
+      ),
+      alignment: Alignment.center,
+      child: Container(
+        decoration: const BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          color: Colors.white,
+        ),
+        width: min(context.width, 400),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: double.infinity,
+              clipBehavior: Clip.antiAlias,
+              padding: const EdgeInsetsDirectional.symmetric(vertical: 8, horizontal: 12),
+              decoration: const BoxDecoration(
+                borderRadius: BorderRadius.all(Radius.circular(12)),
+                color: AppColor.colorItemSelected,
+              ),
+              alignment: Alignment.center,
+              child: Text(
+                AppLocalizations.of(context).sendingMessage.capitalizeFirstEach,
+                style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                  color: Colors.black,
+                  fontWeight: FontWeight.bold,
+                  fontSize: 17
+                ),
+              ),
+            ),
+            const Divider(),
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Padding(
+                  padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 12, bottom: 4),
+                  child: Row(
+                    children: [
+                      Text(
+                        '${AppLocalizations.of(context).status}:',
+                        style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                          color: Colors.black,
+                          fontWeight: FontWeight.w500,
+                          fontSize: 14
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: ValueListenableBuilder(
+                          valueListenable: _sendingNotifier,
+                          builder: (context, value, child) {
+                            if (value == null) {
+                              return child!;
+                            }
+
+                            return value.fold(
+                              (failure) => child!,
+                              (success) {
+                                if (success is GenerateEmailLoading) {
+                                  return Text(
+                                    'Creating email...',
+                                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                                      color: AppColor.labelColor,
+                                      fontSize: 14
+                                    ),
+                                  );
+                                } else if (success is SendEmailLoading) {
+                                  return Text(
+                                    '${AppLocalizations.of(context).sendingMessage}...',
+                                    style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                                      color: AppColor.labelColor,
+                                      fontSize: 14
+                                    ),
+                                  );
+                                } else {
+                                  return child!;
+                                }
+                              }
+                            );
+                          },
+                          child: Text(
+                            '${AppLocalizations.of(context).sendingMessage}...',
+                            style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                              color: AppColor.labelColor,
+                              fontSize: 14
+                            ),
+                          ),
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 4, bottom: 24),
+                  child: Row(
+                    children: [
+                      Text(
+                        '${AppLocalizations.of(context).progress}:',
+                        style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                          color: Colors.black,
+                          fontWeight: FontWeight.w500,
+                          fontSize: 14
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: LinearProgressIndicator(
+                          color: Colors.white.withOpacity(0.6),
+                          backgroundColor: AppColor.primaryColor,
+                          borderRadius: const BorderRadius.all(Radius.circular(12)),
+                        ),
+                      )
+                    ],
+                  ),
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _sendingStreamSubscription?.cancel();
+    _sendingNotifier.dispose();
+    super.dispose();
+  }
+}