refactor: better variable names

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

@@ -124,6 +124,7 @@
         :message="data"
         @open="openContextMenu"
         @close="closeContextMenu"
+        @replyTo="handleReplyTo"
       />
     </div>
   </li>
@@ -188,6 +189,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inboxSupportsReplyTo: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -269,6 +274,8 @@ export default {
         copy: this.hasText,
         delete: this.hasText || this.hasAttachments,
         cannedResponse: this.isOutgoing && this.hasText,
+        replyTo: false,
+        // replyTo: !this.data.private && this.inboxSupportsReplyTo,
       };
     },
     contentAttributes() {
@@ -494,6 +501,12 @@ export default {
       this.showContextMenu = false;
       this.contextMenuPosition = { x: null, y: null };
     },
+    handleReplyTo() {
+      this.$store.dispatch('draftMessages/setInReplyTo', {
+        conversationId: this.data.conversation_id,
+        inReplyToMessage: this.data.id,
+      });
+    },
     setupHighlightTimer() {
       if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
         return;

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

@@ -42,6 +42,7 @@
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span>
@@ -110,7 +111,7 @@ import { mapGetters } from 'vuex';
 import conversationMixin, {
   filterDuplicateSourceMessages,
 } from '../../../mixins/conversations';
-import inboxMixin from 'shared/mixins/inboxMixin';
+import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import configMixin from 'shared/mixins/configMixin';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import aiMixin from 'dashboard/mixins/aiMixin';
@@ -316,6 +317,9 @@ export default {
     unreadMessageCount() {
       return this.currentChat.unread_count || 0;
     },
+    inboxSupportsReplyTo() {
+      return this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
+    },
   },
 
   watch: {

app/javascript/dashboard/constants/localStorage.js

@@ -2,6 +2,7 @@ export const LOCAL_STORAGE_KEYS = {
   DISMISSED_UPDATES: 'dismissedUpdates',
   WIDGET_BUILDER: 'widgetBubble_',
   DRAFT_MESSAGES: 'draftMessages',
+  MESSAGE_IN_REPLY_TO: 'messageInReplyTo',
   COLOR_SCHEME: 'color_scheme',
   DISMISSED_LABEL_SUGGESTIONS: 'labelSuggestionsDismissed',
 };

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

@@ -194,6 +194,7 @@
     },
     "CONTEXT_MENU": {
       "COPY": "Copy",
+      "REPLY_TO": "Reply to this message",
       "DELETE": "Delete",
       "CREATE_A_CANNED_RESPONSE": "Add to canned responses",
       "TRANSLATE": "Translate",

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -44,6 +44,15 @@
       @close="handleClose"
     >
       <div class="menu-container">
+        <menu-item
+          v-if="enabledOptions['replyTo']"
+          :option="{
+            icon: 'arrow-reply',
+            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
+          }"
+          variant="icon"
+          @click="handleReplyTo"
+        />
         <menu-item
           v-if="enabledOptions['copy']"
           :option="{
@@ -204,10 +213,13 @@ export default {
       this.handleClose();
       this.showTranslateModal = true;
     },
+    handleReplyTo() {
+      this.$emit('replyTo', this.message);
+      this.handleClose();
+    },
     onCloseTranslateModal() {
       this.showTranslateModal = false;
     },
-
     openDeleteModal() {
       this.handleClose();
       this.showDeleteModal = true;

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

@@ -7,6 +7,7 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 
 const state = {
   records: LocalStorage.get(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES) || {},
+  inReplyTo: LocalStorage.get(LOCAL_STORAGE_KEYS.MESSAGE_IN_REPLY_TO) || {},
   replyEditorMode: REPLY_EDITOR_MODES.REPLY,
 };
 
@@ -14,6 +15,9 @@ export const getters = {
   get: _state => key => {
     return _state.records[key] || '';
   },
+  getInReplyTo: _state => conversationId => {
+    return _state.inReplyTo[conversationId];
+  },
   getReplyEditorMode: _state => _state.replyEditorMode,
 };
 
@@ -24,6 +28,12 @@ export const actions = {
   delete: ({ commit }, { key }) => {
     commit(types.SET_DRAFT_MESSAGES, { key });
   },
+  setInReplyTo({ commit }, { conversationId, inReplyToMessage }) {
+    commit(types.SET_IN_REPLY_TO, { conversationId, inReplyToMessage });
+  },
+  deleteInReplyTo({ commit }, { conversationId }) {
+    commit(types.REMOVE_IN_REPLY_TO, { conversationId });
+  },
   setReplyEditorMode: ({ commit }, { mode }) => {
     commit(types.SET_REPLY_EDITOR_MODE, { mode });
   },
@@ -39,6 +49,16 @@ export const mutations = {
     Vue.set($state, 'records', updatedRecords);
     LocalStorage.set(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES, $state.records);
   },
+  [types.SET_IN_REPLY_TO]($state, { conversationId, inReplyToMessage }) {
+    Vue.set($state.inReplyTo, conversationId, inReplyToMessage);
+    LocalStorage.set(LOCAL_STORAGE_KEYS.MESSAGE_IN_REPLY_TO, $state.inReplyTo);
+  },
+  [types.REMOVE_IN_REPLY_TO]($state, { conversationId }) {
+    const { [conversationId]: messageIdToBeRemoved, ...newRecords } =
+      $state.inReplyTo;
+    Vue.set($state, 'inReplyTo', newRecords);
+    LocalStorage.set(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES, $state.inReplyTo);
+  },
   [types.SET_REPLY_EDITOR_MODE]($state, { mode }) {
     Vue.set($state, 'replyEditorMode', mode);
   },

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

@@ -73,4 +73,49 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#setInReplyTo', () => {
+    it('sends correct actions', async () => {
+      await actions.setInReplyTo(
+        {
+          commit,
+          state: {
+            inReplyTo: {},
+          },
+        },
+        { conversationId: 45534, inReplyToMessage: 24332 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.SET_IN_REPLY_TO,
+          {
+            conversationId: 45534,
+            inReplyToMessage: 24332,
+          },
+        ],
+      ]);
+    });
+  });
+
+  describe('#deleteInReplyTo', () => {
+    it('sends correct actions', async () => {
+      await actions.deleteInReplyTo(
+        {
+          commit,
+          state: {
+            inReplyTo: {},
+          },
+        },
+        { conversationId: 45534 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.REMOVE_IN_REPLY_TO,
+          {
+            conversationId: 45534,
+          },
+        ],
+      ]);
+    });
+  });
 });

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

@@ -22,4 +22,24 @@ describe('#getters', () => {
     };
     expect(getters.getReplyEditorMode(state)).toEqual('reply');
   });
+
+  describe('#getInReplyTo', () => {
+    it('returns the inReplyTo value if key is present', () => {
+      const state = {
+        inReplyTo: {
+          1234: 9876,
+        },
+      };
+      expect(getters.getInReplyTo(state)(1234)).toEqual(9876);
+    });
+
+    it('returns undefined if key is not present', () => {
+      const state = {
+        inReplyTo: {
+          1234: 9876,
+        },
+      };
+      expect(getters.getInReplyTo(state)('message-22')).toBeUndefined();
+    });
+  });
 });

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

@@ -31,6 +31,35 @@ describe('#mutations', () => {
     });
   });
 
+  describe('#SET_IN_REPLY_TO', () => {
+    it('sets the inReplyTo value', () => {
+      const state = {
+        inReplyTo: {},
+      };
+      mutations[types.SET_IN_REPLY_TO](state, {
+        conversationId: 1234,
+        inReplyToMessage: 9876,
+      });
+      expect(state.inReplyTo).toEqual({
+        1234: 9876,
+      });
+    });
+  });
+
+  describe('#REMOVE_IN_REPLY_TO', () => {
+    it('removes the inReplyTo value', () => {
+      const state = {
+        inReplyTo: {
+          1234: 9876,
+        },
+      };
+      mutations[types.REMOVE_IN_REPLY_TO](state, {
+        conversationId: 1234,
+      });
+      expect(state.inReplyTo).toEqual({});
+    });
+  });
+
   describe('#SET_REPLY_EDITOR_MODE', () => {
     it('sets the reply editor mode', () => {
       const state = {

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

@@ -28,6 +28,8 @@ export default {
   SET_DRAFT_MESSAGES: 'SET_DRAFT_MESSAGES',
   REMOVE_DRAFT_MESSAGES: 'REMOVE_DRAFT_MESSAGES',
   SET_REPLY_EDITOR_MODE: 'SET_REPLY_EDITOR_MODE',
+  SET_IN_REPLY_TO: 'SET_IN_REPLY_TO',
+  REMOVE_IN_REPLY_TO: 'REMOVE_IN_REPLY_TO',
 
   SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',

app/javascript/shared/mixins/inboxMixin.js

@@ -11,6 +11,24 @@ export const INBOX_TYPES = {
   SMS: 'Channel::Sms',
 };
 
+export const INBOX_FEATURES = {
+  REPLY_TO: 'replyTo',
+};
+
+// This is a single source of truth for inbox features
+// This is used to check if a feature is available for a particular inbox or not
+export const INBOX_FEATURE_MAP = {
+  [INBOX_FEATURES.REPLY_TO]: [
+    INBOX_TYPES.WEB,
+    INBOX_TYPES.FB,
+    INBOX_TYPES.TWITTER,
+    INBOX_TYPES.WHATSAPP,
+    INBOX_TYPES.LINE,
+    INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.API,
+  ],
+};
+
 export default {
   computed: {
     channelType() {
@@ -102,4 +120,9 @@ export default {
       );
     },
   },
+  methods: {
+    inboxHasFeature(feature) {
+      return INBOX_FEATURE_MAP[feature]?.includes(this.channelType) ?? false;
+    },
+  },
 };

app/javascript/shared/mixins/specs/inboxMixin.spec.js

@@ -1,218 +1,286 @@
 import { shallowMount } from '@vue/test-utils';
 import inboxMixin from '../inboxMixin';
 
+function getComponentConfigForInbox(channelType, additionalConfig = {}) {
+  return {
+    render() {},
+    mixins: [inboxMixin],
+    data() {
+      return {
+        inbox: {
+          channel_type: channelType,
+          ...additionalConfig,
+        },
+      };
+    },
+  };
+}
+
+function getComponentConfigForChat(chat) {
+  return {
+    render() {},
+    mixins: [inboxMixin],
+    data() {
+      return {
+        chat,
+      };
+    },
+  };
+}
+
 describe('inboxMixin', () => {
   it('returns the correct channel type', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return { inbox: { channel_type: 'Channel::WebWidget' } };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::WebWidget');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.channelType).toBe('Channel::WebWidget');
   });
 
   it('isAPIInbox returns true if channel type is API', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return { inbox: { channel_type: 'Channel::Api' } };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::Api');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isAPIInbox).toBe(true);
   });
 
   it('isATwitterInbox returns true if channel type is twitter', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return { inbox: { channel_type: 'Channel::TwitterProfile' } };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::TwitterProfile');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isATwitterInbox).toBe(true);
   });
 
   it('isAFacebookInbox returns true if channel type is Facebook', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return { inbox: { channel_type: 'Channel::FacebookPage' } };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::FacebookPage');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isAFacebookInbox).toBe(true);
   });
 
   it('isAWebWidgetInbox returns true if channel type is Facebook', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return { inbox: { channel_type: 'Channel::WebWidget' } };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::WebWidget');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isAWebWidgetInbox).toBe(true);
   });
 
   it('isASmsInbox returns true if channel type is sms', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return { inbox: { channel_type: 'Channel::Sms' } };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::Sms');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isASmsInbox).toBe(true);
   });
 
+  it('isASmsInbox returns true if channel type is twilio sms', () => {
+    const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+      medium: 'sms',
+    });
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isASmsInbox).toBe(true);
+  });
+
+  it('isALineChannel returns true if channel type is Line', () => {
+    const Component = getComponentConfigForInbox('Channel::Line');
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isALineChannel).toBe(true);
+  });
+
+  it('isATelegramChannel returns true if channel type is Telegram', () => {
+    const Component = getComponentConfigForInbox('Channel::Telegram');
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATelegramChannel).toBe(true);
+  });
+
   it('isATwilioChannel returns true if channel type is Twilio', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          inbox: {
-            channel_type: 'Channel::TwilioSms',
-          },
-        };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::TwilioSms');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isATwilioChannel).toBe(true);
   });
 
-  it('isATwilioSMSChannel returns true if channel type is Twilio and medium is SMS', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          inbox: {
-            channel_type: 'Channel::TwilioSms',
-            medium: 'sms',
-          },
-        };
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATwilioChannel).toBe(true);
-    expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
-    expect(wrapper.vm.isASmsInbox).toBe(true);
-  });
+  describe('isATwilioSMSChannel', () => {
+    it('returns true if channel type is Twilio and medium is SMS', () => {
+      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+        medium: 'sms',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
+    });
 
-  it('isATwilioWhatsAppChannel returns true if channel type is Twilio and medium is WhatsApp', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          inbox: {
-            channel_type: 'Channel::TwilioSms',
-            medium: 'whatsapp',
-          },
-        };
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATwilioChannel).toBe(true);
-    expect(wrapper.vm.isATwilioWhatsAppChannel).toBe(true);
+    it('returns false if channel type is Twilio but medium is not SMS', () => {
+      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+        medium: 'whatsapp',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
+    });
+
+    it('returns false if channel type is not Twilio but medium is SMS', () => {
+      const Component = getComponentConfigForInbox('Channel::NotTwilio', {
+        medium: 'sms',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
+    });
+
+    it('returns false if neither channel type is Twilio nor medium is SMS', () => {
+      const Component = getComponentConfigForInbox('Channel::NotTwilio', {
+        medium: 'not_sms',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
+    });
+
+    it('returns false if channel type is Twilio but medium is empty', () => {
+      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+        medium: undefined,
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isATwilioSMSChannel).toBe(false);
+    });
   });
 
   it('isAnEmailChannel returns true if channel type is email', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          inbox: { channel_type: 'Channel::Email' },
-        };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::Email');
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isAnEmailChannel).toBe(true);
   });
 
   it('isTwitterInboxTweet returns true if Twitter channel type is tweet', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          chat: {
-            channel_type: 'Channel::TwitterProfile',
-            additional_attributes: {
-              type: 'tweet',
-            },
-          },
-        };
+    const Component = getComponentConfigForChat({
+      channel_type: 'Channel::TwitterProfile',
+      additional_attributes: {
+        type: 'tweet',
       },
-    };
+    });
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
   });
 
   it('twilioBadge returns string sms if channel type is Twilio and medium is sms', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          inbox: {
-            channel_type: 'Channel::TwilioSms',
-            medium: 'sms',
-          },
-        };
-      },
-    };
+    const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+      medium: 'sms',
+    });
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
     expect(wrapper.vm.twilioBadge).toBe('sms');
   });
 
   it('twitterBadge returns string twitter-tweet if Twitter channel type is tweet', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          chat: {
-            id: 1,
-            additional_attributes: {
-              type: 'tweet',
-            },
-          },
-        };
+    const Component = getComponentConfigForChat({
+      id: 1,
+      additional_attributes: {
+        type: 'tweet',
       },
-    };
+    });
+
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
     expect(wrapper.vm.twitterBadge).toBe('twitter-tweet');
   });
 
-  it('inboxBadge returns string Channel::Telegram if isATwilioChannel and isATwitterInbox is false', () => {
-    const Component = {
-      render() {},
-      mixins: [inboxMixin],
-      data() {
-        return {
-          inbox: {
-            channel_type: 'Channel::Telegram',
-          },
-        };
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isATwilioChannel).toBe(false);
-    expect(wrapper.vm.isATwitterInbox).toBe(false);
-    expect(wrapper.vm.channelType).toBe('Channel::Telegram');
+  describe('Badges', () => {
+    it('inboxBadge returns string Channel::Telegram if isATwilioChannel and isATwitterInbox is false', () => {
+      const Component = getComponentConfigForInbox('Channel::Telegram');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isATwilioChannel).toBe(false);
+      expect(wrapper.vm.isATwitterInbox).toBe(false);
+      expect(wrapper.vm.channelType).toBe('Channel::Telegram');
+    });
+
+    it('inboxBadge returns correct badge for WhatsApp channel', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxBadge).toBe('whatsapp');
+    });
+
+    it('inboxBadge returns the twitterBadge when isATwitterInbox is true', () => {
+      const Component = getComponentConfigForInbox('Channel::TwitterProfile');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxBadge).toBe('twitter-dm');
+    });
+
+    it('inboxBadge returns the facebookBadge when isAFacebookInbox is true', () => {
+      const Component = getComponentConfigForInbox('Channel::FacebookPage');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxBadge).toBe('facebook');
+    });
+
+    it('inboxBadge returns the twilioBadge when isATwilioChannel is true', () => {
+      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+        medium: 'sms',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxBadge).toBe('sms');
+    });
+
+    it('inboxBadge returns "whatsapp" when isAWhatsAppChannel is true', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxBadge).toBe('whatsapp');
+    });
+
+    it('inboxBadge returns the channelType when no specific condition is true', () => {
+      const Component = getComponentConfigForInbox('Channel::Email');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxBadge).toBe('Channel::Email');
+    });
+  });
+
+  describe('#inboxHasFeature', () => {
+    it('detects the correct feature', () => {
+      const Component = getComponentConfigForInbox('Channel::Telegram');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxHasFeature('replyTo')).toBe(true);
+      expect(wrapper.vm.inboxHasFeature('feature-does-not-exist')).toBe(false);
+    });
+
+    it('returns false for feature not included', () => {
+      const Component = getComponentConfigForInbox('Channel::Sms');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.inboxHasFeature('replyTo')).toBe(false);
+      expect(wrapper.vm.inboxHasFeature('feature-does-not-exist')).toBe(false);
+    });
+  });
+
+  describe('WhatsApp channel', () => {
+    it('returns correct whatsAppAPIProvider', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
+        provider: 'whatsapp_cloud',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.whatsAppAPIProvider).toBe('whatsapp_cloud');
+    });
+
+    it('returns empty whatsAppAPIProvider if nothing is present', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
+        provider: undefined,
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.whatsAppAPIProvider).toBe('');
+    });
+
+    it('isAWhatsAppCloudChannel returns true if channel type is WhatsApp and provider is whatsapp_cloud', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
+        provider: 'whatsapp_cloud',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(true);
+    });
+
+    it('is360DialogWhatsAppChannel returns true if channel type is WhatsApp and provider is default', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp', {
+        provider: 'default',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.is360DialogWhatsAppChannel).toBe(true);
+    });
+
+    it('isAWhatsAppChannel returns true if channel type is WhatsApp', () => {
+      const Component = getComponentConfigForInbox('Channel::Whatsapp');
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
+    });
+
+    it('isAWhatsAppChannel returns true if channel type is Twilio and medium is WhatsApp', () => {
+      const Component = getComponentConfigForInbox('Channel::TwilioSms', {
+        medium: 'whatsapp',
+      });
+      const wrapper = shallowMount(Component);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
+    });
   });
 });