Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/shared/mixins/inboxMixin.js

@@ -0,0 +1,143 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+export const INBOX_FEATURES = {
+  REPLY_TO: 'replyTo',
+  REPLY_TO_OUTGOING: 'replyToOutgoing',
+};
+
+// 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.FB,
+    INBOX_TYPES.WEB,
+    INBOX_TYPES.TWITTER,
+    INBOX_TYPES.WHATSAPP,
+    INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.TIKTOK,
+    INBOX_TYPES.API,
+  ],
+  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
+    INBOX_TYPES.WEB,
+    INBOX_TYPES.TWITTER,
+    INBOX_TYPES.WHATSAPP,
+    INBOX_TYPES.TELEGRAM,
+    INBOX_TYPES.TIKTOK,
+    INBOX_TYPES.API,
+  ],
+};
+
+export default {
+  computed: {
+    channelType() {
+      return this.inbox.channel_type;
+    },
+    whatsAppAPIProvider() {
+      return this.inbox.provider || '';
+    },
+    isAMicrosoftInbox() {
+      return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
+    },
+    isAGoogleInbox() {
+      return this.isAnEmailChannel && this.inbox.provider === 'google';
+    },
+    isAPIInbox() {
+      return this.channelType === INBOX_TYPES.API;
+    },
+    isATwitterInbox() {
+      return this.channelType === INBOX_TYPES.TWITTER;
+    },
+    isAFacebookInbox() {
+      return this.channelType === INBOX_TYPES.FB;
+    },
+    isAWebWidgetInbox() {
+      return this.channelType === INBOX_TYPES.WEB;
+    },
+    isATwilioChannel() {
+      return this.channelType === INBOX_TYPES.TWILIO;
+    },
+    isALineChannel() {
+      return this.channelType === INBOX_TYPES.LINE;
+    },
+    isAVoiceChannel() {
+      return this.channelType === INBOX_TYPES.VOICE;
+    },
+    isAnEmailChannel() {
+      return this.channelType === INBOX_TYPES.EMAIL;
+    },
+    isATelegramChannel() {
+      return this.channelType === INBOX_TYPES.TELEGRAM;
+    },
+    isATwilioSMSChannel() {
+      const { medium: medium = '' } = this.inbox;
+      return this.isATwilioChannel && medium === 'sms';
+    },
+    isASmsInbox() {
+      return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel;
+    },
+    isATwilioWhatsAppChannel() {
+      const { medium: medium = '' } = this.inbox;
+      return this.isATwilioChannel && medium === 'whatsapp';
+    },
+    isAWhatsAppCloudChannel() {
+      return (
+        this.channelType === INBOX_TYPES.WHATSAPP &&
+        this.whatsAppAPIProvider === 'whatsapp_cloud'
+      );
+    },
+    is360DialogWhatsAppChannel() {
+      return (
+        this.channelType === INBOX_TYPES.WHATSAPP &&
+        this.whatsAppAPIProvider === 'default'
+      );
+    },
+    chatAdditionalAttributes() {
+      const { additional_attributes: additionalAttributes } = this.chat || {};
+      return additionalAttributes || {};
+    },
+    isTwitterInboxTweet() {
+      return this.chatAdditionalAttributes.type === 'tweet';
+    },
+    twilioBadge() {
+      return `${this.isATwilioSMSChannel ? 'sms' : 'whatsapp'}`;
+    },
+    twitterBadge() {
+      return `${this.isTwitterInboxTweet ? 'twitter-tweet' : 'twitter-dm'}`;
+    },
+    facebookBadge() {
+      return this.chatAdditionalAttributes.type || 'facebook';
+    },
+    inboxBadge() {
+      let badgeKey = '';
+      if (this.isATwitterInbox) {
+        badgeKey = this.twitterBadge;
+      } else if (this.isAFacebookInbox) {
+        badgeKey = this.facebookBadge;
+      } else if (this.isATwilioChannel) {
+        badgeKey = this.twilioBadge;
+      } else if (this.isAWhatsAppChannel) {
+        badgeKey = 'whatsapp';
+      } else if (this.isATiktokChannel) {
+        badgeKey = 'tiktok';
+      }
+      return badgeKey || this.channelType;
+    },
+    isAWhatsAppChannel() {
+      return (
+        this.channelType === INBOX_TYPES.WHATSAPP ||
+        this.isATwilioWhatsAppChannel
+      );
+    },
+    isAnInstagramChannel() {
+      return this.channelType === INBOX_TYPES.INSTAGRAM;
+    },
+    isATiktokChannel() {
+      return this.channelType === INBOX_TYPES.TIKTOK;
+    },
+  },
+  methods: {
+    inboxHasFeature(feature) {
+      return INBOX_FEATURE_MAP[feature]?.includes(this.channelType) ?? false;
+    },
+  },
+};

research/chatwoot/app/javascript/shared/mixins/keyboardEventListenerMixins.js

@@ -0,0 +1,70 @@
+import { isActiveElementTypeable, isEscape } from '../helpers/KeyboardHelpers';
+
+import { createKeybindingsHandler } from 'tinykeys';
+
+// this is a store that stores the handler globally, and only gets reset on reload
+const taggedHandlers = [];
+
+export default {
+  mounted() {
+    const events = this.getKeyboardEvents();
+    if (events) {
+      const wrappedEvents = this.wrapEventsInKeybindingsHandler(events);
+      const keydownHandler = createKeybindingsHandler(wrappedEvents);
+      this.addEventHandler(keydownHandler);
+    }
+  },
+  unmounted() {
+    if (this.$el && this.$el.dataset?.keydownHandlerIndex) {
+      const handlerToRemove =
+        taggedHandlers[this.$el.dataset.keydownHandlerIndex];
+      document.removeEventListener('keydown', handlerToRemove);
+    }
+  },
+  methods: {
+    addEventHandler(keydownHandler) {
+      const indexToAppend = taggedHandlers.push(keydownHandler) - 1;
+      const root = this.getElementToBind();
+      if (root && root.dataset) {
+        // For the components with a top level v-if Vue renders it as an empty comment in the DOM
+        // so we need to check if the root element has a dataset property to ensure it is a valid element
+        document.addEventListener('keydown', keydownHandler);
+        root.dataset.keydownHandlerIndex = indexToAppend;
+      }
+    },
+    getElementToBind() {
+      return this.$el;
+    },
+    getKeyboardEvents() {
+      return null;
+    },
+    wrapEventsInKeybindingsHandler(events) {
+      const wrappedEvents = {};
+      Object.keys(events).forEach(eventName => {
+        wrappedEvents[eventName] = this.keydownWrapper(events[eventName]);
+      });
+
+      return wrappedEvents;
+    },
+    keydownWrapper(handler) {
+      return e => {
+        const actionToPerform =
+          typeof handler === 'function' ? handler : handler.action;
+        const allowOnFocusedInput =
+          typeof handler === 'function' ? false : handler.allowOnFocusedInput;
+
+        const isTypeable = isActiveElementTypeable(e);
+
+        if (isTypeable) {
+          if (isEscape(e)) {
+            e.target.blur();
+          }
+
+          if (!allowOnFocusedInput) return;
+        }
+
+        actionToPerform(e);
+      };
+    },
+  },
+};

research/chatwoot/app/javascript/shared/mixins/specs/MockComponent.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+  name: 'MockComponent',
+};
+</script>
+
+<template>
+  <div class="test" />
+</template>

research/chatwoot/app/javascript/shared/mixins/specs/filterFixtures.js

@@ -0,0 +1,29 @@
+export const filterGroups = [
+  {
+    name: 'Standard Filters',
+    attributes: [
+      { key: 'status', name: 'Status' },
+      { key: 'assignee_id', name: 'Assignee Name' },
+      { key: 'inbox_id', name: 'Inbox Name' },
+      { key: 'team_id', name: 'Team Name' },
+      { key: 'display_id', name: 'Conversation Identifier' },
+      { key: 'campaign_id', name: 'Campaign Name' },
+      { key: 'labels', name: 'Labels' },
+    ],
+  },
+  {
+    name: 'Additional Filters',
+    attributes: [
+      { key: 'browser_language', name: 'Browser Language' },
+      { key: 'country_code', name: 'Country Name' },
+      { key: 'referer', name: 'Referer link' },
+    ],
+  },
+  {
+    name: 'Custom Attributes',
+    attributes: [
+      { key: 'signed_up_at', name: 'Signed Up At' },
+      { key: 'test', name: 'Test' },
+    ],
+  },
+];

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

@@ -0,0 +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 = 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 = getComponentConfigForInbox('Channel::Api');
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isAPIInbox).toBe(true);
+  });
+
+  it('isATwitterInbox returns true if channel type is twitter', () => {
+    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 = getComponentConfigForInbox('Channel::FacebookPage');
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isAFacebookInbox).toBe(true);
+  });
+
+  it('isAWebWidgetInbox returns true if channel type is Facebook', () => {
+    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 = 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 = getComponentConfigForInbox('Channel::TwilioSms');
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwilioChannel).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('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 = 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 = 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 = 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 = getComponentConfigForChat({
+      id: 1,
+      additional_attributes: {
+        type: 'tweet',
+      },
+    });
+
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
+    expect(wrapper.vm.twitterBadge).toBe('twitter-tweet');
+  });
+
+  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);
+    });
+  });
+});