feat: Ability to specify a subject line for outbound emails (#3168)

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -155,6 +155,11 @@
         "LABEL": "Inbox",
         "ERROR": "Select an inbox"
       },
+      "SUBJECT": {
+        "LABEL": "Subject",
+        "PLACEHOLDER": "Subject",
+        "ERROR": "Subject can't be empty"
+      },
       "MESSAGE": {
         "LABEL": "Message",
         "PLACEHOLDER": "Write your message here",

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -41,6 +41,22 @@
           </label>
         </div>
       </div>
+      <div class="row" v-if="isAnEmailInbox">
+        <div class="columns">
+          <label :class="{ error: $v.message.$error }">
+            {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
+            <input
+              v-model="subject"
+              type="text"
+              :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
+              @input="$v.message.$touch"
+            />
+            <span v-if="$v.message.$error" class="message">
+              {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
+            </span>
+          </label>
+        </div>
+      </div>
       <div class="row">
         <div class="columns">
           <label :class="{ error: $v.message.$error }">
@@ -75,6 +91,7 @@ import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 
 import alertMixin from 'shared/mixins/alertMixin';
+import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { required } from 'vuelidate/lib/validators';
 
@@ -96,11 +113,15 @@ export default {
   data() {
     return {
       name: '',
+      subject: '',
       message: '',
       selectedInbox: '',
     };
   },
   validations: {
+    subject: {
+      required,
+    },
     message: {
       required,
     },
@@ -119,6 +140,7 @@ export default {
         sourceId: this.targetInbox.source_id,
         contactId: this.contact.id,
         message: { content: this.message },
+        mailSubject: this.subject,
       };
     },
     targetInbox: {
@@ -138,6 +160,12 @@ export default {
     inboxes() {
       return this.contact.contactableInboxes || [];
     },
+    isAnEmailInbox() {
+      return (
+        this.selectedInbox &&
+        this.selectedInbox.inbox.channel_type === INBOX_TYPES.EMAIL
+      );
+    },
   },
   methods: {
     onCancel() {
@@ -154,7 +182,6 @@ export default {
       }
       try {
         const payload = this.getNewConversation;
-
         await this.onSubmit(payload);
         this.onSuccess();
         this.showAlert(this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'));

app/javascript/dashboard/store/modules/contactConversations.js

@@ -24,12 +24,15 @@ export const actions = {
     commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
       isCreating: true,
     });
-    const { inboxId, message, contactId, sourceId } = params;
+    const { inboxId, message, contactId, sourceId, mailSubject } = params;
     try {
       const { data } = await ConversationApi.create({
         inbox_id: inboxId,
         contact_id: contactId,
         source_id: sourceId,
+        additional_attributes: {
+          mail_subject: mailSubject,
+        },
         message,
       });
       commit(types.default.ADD_CONTACT_CONVERSATION, {

app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js

@@ -44,7 +44,13 @@ describe('#actions', () => {
       axios.post.mockResolvedValue({ data: conversationList[0] });
       await actions.create(
         { commit },
-        { inboxId: 1, message: { content: 'hi' }, contactId: 4, sourceId: 5 }
+        {
+          inboxId: 1,
+          message: { content: 'hi' },
+          contactId: 4,
+          sourceId: 5,
+          mailSubject: 'Mail Subject',
+        }
       );
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isCreating: true }],
@@ -65,7 +71,13 @@ describe('#actions', () => {
       await expect(
         actions.create(
           { commit },
-          { inboxId: 1, message: { content: 'hi' }, contactId: 4, sourceId: 5 }
+          {
+            inboxId: 1,
+            message: { content: 'hi' },
+            contactId: 4,
+            sourceId: 5,
+            mailSubject: 'Mail Subject',
+          }
         )
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([