feat: Add reply editor mode to the store (#7515)

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -781,6 +781,9 @@ export default {
     },
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
       const { can_reply: canReply } = this.currentChat;
+      this.$store.dispatch('draftMessages/setReplyEditorMode', {
+        mode,
+      });
       if (canReply || this.isAWhatsAppChannel) this.replyType = mode;
       if (this.showRichContentEditor) {
         if (this.isRecordingAudio) {

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

@@ -1,17 +1,20 @@
 import Vue from 'vue';
 import types from '../mutation-types';
 
+import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 
 const state = {
   records: LocalStorage.get(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES) || {},
+  replyEditorMode: REPLY_EDITOR_MODES.REPLY,
 };
 
 export const getters = {
   get: _state => key => {
     return _state.records[key] || '';
   },
+  getReplyEditorMode: _state => _state.replyEditorMode,
 };
 
 export const actions = {
@@ -21,6 +24,9 @@ export const actions = {
   delete: ({ commit }, { key }) => {
     commit(types.SET_DRAFT_MESSAGES, { key });
   },
+  setReplyEditorMode: ({ commit }, { mode }) => {
+    commit(types.SET_REPLY_EDITOR_MODE, { mode });
+  },
 };
 
 export const mutations = {
@@ -33,6 +39,9 @@ export const mutations = {
     Vue.set($state, 'records', updatedRecords);
     LocalStorage.set(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES, $state.records);
   },
+  [types.SET_REPLY_EDITOR_MODE]($state, { mode }) {
+    Vue.set($state, 'replyEditorMode', mode);
+  },
 };
 
 export default {

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

@@ -51,4 +51,26 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#setReplyEditorMode', () => {
+    it('sends correct actions', async () => {
+      await actions.setReplyEditorMode(
+        {
+          commit,
+          state: {
+            draftMessages: {},
+          },
+        },
+        { mode: 'reply' }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.SET_REPLY_EDITOR_MODE,
+          {
+            mode: 'reply',
+          },
+        ],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/draftMessages/getters.spec.js

@@ -15,4 +15,11 @@ describe('#getters', () => {
     };
     expect(getters.get(state)('draft-22-REPLY')).toEqual('');
   });
+
+  it('return replyEditorMode', () => {
+    const state = {
+      replyEditorMode: 'reply',
+    };
+    expect(getters.getReplyEditorMode(state)).toEqual('reply');
+  });
 });

app/javascript/dashboard/store/modules/specs/draftMessages/mutations.spec.js

@@ -30,4 +30,16 @@ describe('#mutations', () => {
       expect(state.records).toEqual({});
     });
   });
+
+  describe('#SET_REPLY_EDITOR_MODE', () => {
+    it('sets the reply editor mode', () => {
+      const state = {
+        replyEditorMode: 'reply',
+      };
+      mutations[types.SET_REPLY_EDITOR_MODE](state, {
+        mode: 'note',
+      });
+      expect(state.replyEditorMode).toEqual('note');
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -27,6 +27,7 @@ export default {
     'SET_LAST_MESSAGE_ID_FOR_SYNC_CONVERSATION',
   SET_DRAFT_MESSAGES: 'SET_DRAFT_MESSAGES',
   REMOVE_DRAFT_MESSAGES: 'REMOVE_DRAFT_MESSAGES',
+  SET_REPLY_EDITOR_MODE: 'SET_REPLY_EDITOR_MODE',
 
   SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',