From 1094a3924ee26cfae1a7e0d4bfd2d16c56e7bd05 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 30 Apr 2025 22:57:25 +0530
Subject: [PATCH] chore: Forward plain email UI

---
 .../message/bubbles/Email/Index.vue           |  5 ++
 .../message/forwardMessage/ForwardMessage.vue | 12 ++++-
 .../components/EmailMessageEditor.vue         | 53 +++++++++++--------
 .../components/ForwardMessageForm.vue         |  4 ++
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 9834df0b7..1383b2300 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -14,12 +14,15 @@ import TranslationToggle from 'dashboard/components-next/message/TranslationTogg
 import ForwardMessageForm from 'dashboard/components-next/message/forwardMessage/ForwardMessage.vue';
 
 import { useMessageContext } from '../../provider.js';
+import { useInbox } from 'dashboard/composables/useInbox';
 import { MESSAGE_TYPES, MESSAGE_STATUS } from 'next/message/constants.js';
 import { useTranslations } from 'dashboard/composables/useTranslations';
 
 const { id, status, content, contentAttributes, attachments, messageType } =
   useMessageContext();
 
+const { inbox } = useInbox();
+
 const isExpandable = ref(false);
 const isExpanded = ref(false);
 const showQuotedMessage = ref(false);
@@ -128,6 +131,8 @@ const handleSeeOriginal = () => {
           <ForwardMessageForm
             v-if="showForwardMessageModal"
             :message="contentAttributes?.email"
+            :content="content"
+            :inbox="inbox"
             :message-id="id"
             class="absolute right-3 z-50 skip-context-menu top-10"
             @close="showForwardMessageModal = false"
diff --git a/app/javascript/dashboard/components-next/message/forwardMessage/ForwardMessage.vue b/app/javascript/dashboard/components-next/message/forwardMessage/ForwardMessage.vue
index 96538a914..2306f397a 100644
--- a/app/javascript/dashboard/components-next/message/forwardMessage/ForwardMessage.vue
+++ b/app/javascript/dashboard/components-next/message/forwardMessage/ForwardMessage.vue
@@ -24,6 +24,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  content: {
+    type: String,
+    default: '',
+  },
+  inbox: {
+    type: Object,
+    default: () => ({}),
+  },
   messageId: {
     type: Number,
     default: null,
@@ -45,7 +53,7 @@ const currentChat = useMapGetter('getSelectedChat');
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 
-const fromEmail = computed(() => props.message?.to?.[0]);
+const fromEmail = computed(() => props.message?.to?.[0] || props.inbox?.email);
 
 const fullHTML = computed(() => {
   return (
@@ -156,6 +164,8 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
       :from-email="fromEmail"
       :message="message"
       :message-signature="messageSignature"
+      :content="content"
+      :is-plain-email="!message || !Object.keys(message).length"
       :full-html="fullHTML"
       :unquoted-html="unquotedHTML"
       :text-to-show="textToShow"
diff --git a/app/javascript/dashboard/components-next/message/forwardMessage/components/EmailMessageEditor.vue b/app/javascript/dashboard/components-next/message/forwardMessage/components/EmailMessageEditor.vue
index aa92f6055..ca2a724a7 100644
--- a/app/javascript/dashboard/components-next/message/forwardMessage/components/EmailMessageEditor.vue
+++ b/app/javascript/dashboard/components-next/message/forwardMessage/components/EmailMessageEditor.vue
@@ -6,10 +6,12 @@ import { allowedCssProperties } from 'lettersanitizer';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import EmailMeta from 'dashboard/components-next/message/bubbles/Email/EmailMeta.vue';
 
-// import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
+import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 defineProps({
+  content: { type: String, default: '' },
+  isPlainEmail: { type: Boolean, default: false },
   hasQuotedMessage: { type: Boolean, default: false },
   fullHtml: { type: String, default: '' },
   unquotedHtml: { type: String, default: '' },
@@ -50,28 +52,35 @@ const showQuotedMessage = ref(false);
       <EmailMeta />
     </div>
     <div class="px-4 pb-4">
-      <Letter
-        v-if="showQuotedMessage"
-        class-name="prose prose-bubble !max-w-none letter-render"
-        :allowed-css-properties="[
-          ...allowedCssProperties,
-          'transform',
-          'transform-origin',
-        ]"
-        :html="fullHtml"
-        :text="textToShow"
-      />
-      <Letter
-        v-else
-        class-name="prose prose-bubble !max-w-none letter-render"
-        :html="unquotedHtml"
-        :allowed-css-properties="[
-          ...allowedCssProperties,
-          'transform',
-          'transform-origin',
-        ]"
-        :text="textToShow"
+      <FormattedContent
+        v-if="isPlainEmail"
+        class="text-n-slate-12"
+        :content="content"
       />
+      <template v-else>
+        <Letter
+          v-if="showQuotedMessage"
+          class-name="prose prose-bubble !max-w-none letter-render"
+          :allowed-css-properties="[
+            ...allowedCssProperties,
+            'transform',
+            'transform-origin',
+          ]"
+          :html="fullHtml"
+          :text="textToShow"
+        />
+        <Letter
+          v-else
+          class-name="prose prose-bubble !max-w-none letter-render"
+          :html="unquotedHtml"
+          :allowed-css-properties="[
+            ...allowedCssProperties,
+            'transform',
+            'transform-origin',
+          ]"
+          :text="textToShow"
+        />
+      </template>
       <button
         v-if="hasQuotedMessage"
         class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
diff --git a/app/javascript/dashboard/components-next/message/forwardMessage/components/ForwardMessageForm.vue b/app/javascript/dashboard/components-next/message/forwardMessage/components/ForwardMessageForm.vue
index 9e0535c46..5f346f629 100644
--- a/app/javascript/dashboard/components-next/message/forwardMessage/components/ForwardMessageForm.vue
+++ b/app/javascript/dashboard/components-next/message/forwardMessage/components/ForwardMessageForm.vue
@@ -22,6 +22,8 @@ const props = defineProps({
   isCreatingContact: { type: Boolean, default: false },
   fromEmail: { type: String, default: null },
   messageSignature: { type: String, default: '' },
+  content: { type: String, default: '' },
+  isPlainEmail: { type: Boolean, default: false },
   fullHtml: { type: String, default: '' },
   unquotedHtml: { type: String, default: '' },
   textToShow: { type: String, default: '' },
@@ -161,6 +163,8 @@ const handleSendMessage = async () => {
     <EmailMessageEditor
       v-model="state.message"
       class="bg-n-alpha-3"
+      :content="content"
+      :is-plain-email="isPlainEmail"
       :has-quoted-message="hasQuotedMessage"
       :full-html="fullHtml"
       :unquoted-html="unquotedHtml"