Merge branch 'release/1.14.1'

app/controllers/api/v1/widget/contacts_controller.rb

@@ -1,6 +1,9 @@
 class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
+  before_action :process_hmac
+
+  def show; end
+
   def update
-    process_hmac
     contact_identify_action = ContactIdentifyAction.new(
       contact: @contact,
       params: permitted_params.to_h.deep_symbolize_keys

app/javascript/dashboard/assets/scss/_animations.scss

@@ -54,8 +54,10 @@
   opacity: 0;
 }
 
-.menu-slide-enter-active, .menu-slide-leave-active {
+.menu-slide-enter-active,
-  transition: all .15s $ease-in-cubic;
+.menu-slide-leave-active {
+  transform: translateY(0);
+  transition: transform 0.25s $ease-in-cubic, opacity 0.15s $ease-in-cubic;
 }
 
 .menu-slide-enter, .menu-slide-leave-to

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -1,27 +1,42 @@
-.dropdown-pane.sleek {
+.dropdown-pane {
   @include elegant-card;
   @include border-light;
-  padding-left: 0;
+  z-index: 999;
-  padding-right: 0;
-  right: -12px;
-  top: 48px;
-  width: auto;
 
-  &::before {
+  &.dropdown-pane--open {
-    @include arrow(top, var(--color-border-light), 14px);
+    display: block;
-    position: absolute;
+    visibility: visible;
-    right: 6px;
-    top: -14px;
   }
 
-  &::after {
+  &.dropdowm--bottom {
-    @include arrow(top, $color-white, var(--space-slab));
+    &::before {
-    position: absolute;
+      @include arrow(top, var(--color-border-light), 14px);
-    right: var(--space-small);
+      position: absolute;
-    top: -12px;
+      right: 6px;
+      top: -14px;
+    }
+
+    &::after {
+      @include arrow(top, $color-white, var(--space-slab));
+      position: absolute;
+      right: var(--space-small);
+      top: -12px;
+    }
   }
 
-  .dropdown>li>a:hover {
+  &.dropdowm--top {
-    background: var(--color-background);
+    &::before {
+      @include arrow(bottom, var(--color-border-light), 14px);
+      bottom: -14px;
+      position: absolute;
+      right: 6px;
+    }
+
+    &::after {
+      @include arrow(bottom, $color-white, var(--space-slab));
+      bottom: -12px;
+      position: absolute;
+      right: var(--space-small);
+    }
   }
 }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -68,21 +68,11 @@
   position: relative;
 
   .dropdown-pane {
-    @include elegant-card;
-    @include border-light;
     bottom: 6rem;
     display: block;
     left: 5rem;
     visibility: visible;
     width: 80%;
-    z-index: 999;
-
-    &::before {
-      @include arrow(bottom, $color-white, $space-slab);
-      bottom: -$space-slab;
-      position: absolute;
-      right: $space-slab;
-    }
   }
 
   .active {

app/javascript/dashboard/components/ChatList.vue

@@ -25,6 +25,7 @@
         v-for="chat in conversationList"
         :key="chat.id"
         :active-label="label"
+        :team-id="teamId"
         :chat="chat"
       />
 
@@ -76,14 +77,14 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    teamId: {
+      type: [String, Number],
+      default: 0,
+    },
     label: {
       type: String,
       default: '',
     },
-    activeTeam: {
-      type: Object,
-      default: () => {},
-    },
   },
   data() {
     return {
@@ -132,7 +133,7 @@ export default {
         status: this.activeStatus,
         page: this.currentPage + 1,
         labels: this.label ? [this.label] : undefined,
-        teamId: this.activeTeam.name ? this.activeTeam.id : undefined,
+        teamId: this.teamId ? this.teamId : undefined,
       };
     },
     pageTitle() {
@@ -149,24 +150,22 @@ export default {
     },
     conversationList() {
       let conversationList = [];
+      const filters = this.conversationFilters;
       if (this.activeAssigneeTab === 'me') {
-        conversationList = this.mineChatsList.slice();
+        conversationList = [...this.mineChatsList(filters)];
       } else if (this.activeAssigneeTab === 'unassigned') {
-        conversationList = this.unAssignedChatsList.slice();
+        conversationList = [...this.unAssignedChatsList(filters)];
       } else {
-        conversationList = this.allChatList.slice();
+        conversationList = [...this.allChatList(filters)];
       }
 
-      if (!this.label) {
+      return conversationList;
-        return conversationList;
+    },
+    activeTeam() {
+      if (this.teamId) {
+        return this.$store.getters['teams/getTeam'](this.teamId);
       }
-
+      return {};
-      return conversationList.filter(conversation => {
-        const labels = this.$store.getters[
-          'conversationLabels/getConversationLabels'
-        ](conversation.id);
-        return labels.includes(this.label);
-      });
     },
   },
   watch: {

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -15,25 +15,24 @@
         <div
           v-if="isStatusMenuOpened"
           v-on-clickaway="closeStatusMenu"
-          class="dropdown-pane top"
+          class="dropdown-pane dropdowm--top"
         >
-          <ul class="vertical dropdown menu">
+          <woot-dropdown-menu>
-            <li
+            <woot-dropdown-item
               v-for="status in availabilityStatuses"
               :key="status.value"
               class="status-items"
             >
-              <div :class="`status-badge status-badge__${status.value}`" />
-
               <button
                 class="button clear status-change--dropdown-button"
                 :disabled="status.disabled"
                 @click="changeAvailabilityStatus(status.value)"
               >
+                <span :class="`status-badge status-badge__${status.value}`" />
                 {{ status.label }}
               </button>
-            </li>
+            </woot-dropdown-item>
-          </ul>
+          </woot-dropdown-menu>
         </div>
       </transition>
 
@@ -47,9 +46,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+
 const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
 
 export default {
+  components: {
+    WootDropdownMenu,
+    WootDropdownItem,
+  },
+
   mixins: [clickaway],
 
   data() {
@@ -121,7 +128,7 @@ export default {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: $space-micro $space-smaller;
+  padding: var(--space-micro) var(--space-smaller);
 }
 
 .status-view {
@@ -129,10 +136,10 @@ export default {
   align-items: baseline;
 
   & &--title {
-    color: $color-gray;
+    color: var(--b-600);
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
-    font-weight: $font-weight-medium;
+    font-weight: var(--font-weight-medium);
-    margin-left: $space-small;
+    margin-left: var(--space-small);
 
     &:first-letter {
       text-transform: capitalize;
@@ -140,51 +147,44 @@ export default {
   }
 }
 
+.status-badge {
+  width: var(--space-one);
+  height: var(--space-one);
+  margin-right: var(--space-micro);
+  display: inline-block;
+  border-radius: 50%;
+
+  &__online {
+    background: var(--g-400);
+  }
+
+  &__offline {
+    background: var(--b-600);
+  }
+
+  &__busy {
+    background: var(--y-700);
+  }
+}
+
 .status-change {
   .dropdown-pane {
-    top: -130px;
+    top: -132px;
   }
 
   .status-items {
     display: flex;
     align-items: baseline;
   }
-
   & &--change-button {
-    color: $color-gray;
+    color: var(--b-600);
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
-    border-bottom: 1px solid $color-gray;
     cursor: pointer;
+    outline: none;
 
     &:hover {
-      border-bottom: none;
+      color: var(--w-600);
     }
   }
-
-  & &--dropdown-button {
-    font-weight: $font-weight-normal;
-    font-size: $font-size-small;
-    padding: $space-small $space-one;
-    text-align: left;
-    width: 100%;
-  }
-}
-
-.status-badge {
-  width: $space-one;
-  height: $space-one;
-  border-radius: 50%;
-
-  &__online {
-    background: $success-color;
-  }
-
-  &__offline {
-    background: $color-gray;
-  }
-
-  &__busy {
-    background: $warning-color;
-  }
 }
 </style>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -270,14 +270,6 @@ export default {
   padding: $space-small $space-one;
 }
 
-.dropdown-pane {
-  li {
-    a {
-      padding: $space-small $space-one !important;
-    }
-  }
-}
-
 .account-selector {
   cursor: pointer;
   padding: $space-small $space-large;

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -3,36 +3,36 @@
     <div
       v-if="show"
       v-on-clickaway="() => $emit('close')"
-      class="dropdown-pane top"
+      class="dropdown-pane dropdowm--top"
     >
-      <ul class="vertical dropdown menu">
+      <woot-dropdown-menu>
-        <li v-if="showChangeAccountOption">
+        <woot-dropdown-item v-if="showChangeAccountOption">
           <button
             class="button clear change-accounts--button"
             @click="$emit('toggle-accounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </button>
-        </li>
+        </woot-dropdown-item>
-        <li v-if="globalConfig.chatwootInboxToken">
+        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
           <button
             class="button clear change-accounts--button"
             @click="$emit('show-support-chat-window')"
           >
             Contact Support
           </button>
-        </li>
+        </woot-dropdown-item>
-        <li>
+        <woot-dropdown-item>
           <router-link :to="`/app/accounts/${accountId}/profile/settings`">
             {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
           </router-link>
-        </li>
+        </woot-dropdown-item>
-        <li>
+        <woot-dropdown-item>
           <a href="#" @click.prevent="logout">
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
           </a>
-        </li>
+        </woot-dropdown-item>
-      </ul>
+      </woot-dropdown-menu>
     </div>
   </transition>
 </template>
@@ -41,8 +41,14 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
 export default {
+  components: {
+    WootDropdownMenu,
+    WootDropdownItem,
+  },
   mixins: [clickaway],
   props: {
     show: {

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

@@ -85,6 +85,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    teamId: {
+      type: [String, Number],
+      default: 0,
+    },
   },
 
   computed: {
@@ -171,6 +175,7 @@ export default {
         activeInbox,
         id: chat.id,
         label: this.activeLabel,
+        teamId: this.teamId,
       });
       router.push({ path: frontendURL(path) });
     },

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

@@ -162,7 +162,7 @@ export default {
     },
     shouldShowSpinner() {
       return (
-        this.getMessages.dataFetched === undefined ||
+        (this.getMessages && this.getMessages.dataFetched === undefined) ||
         (!this.listLoadingStatus && this.isLoadingPrevious)
       );
     },

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

@@ -12,31 +12,26 @@
     <div
       v-if="showConversationActions"
       v-on-clickaway="hideConversationActions"
-      class="dropdown-pane"
+      class="dropdown-pane dropdowm--bottom"
       :class="{ 'dropdown-pane--open': showConversationActions }"
     >
-      <button
+      <woot-dropdown-menu>
-        v-if="!currentChat.muted"
+        <woot-dropdown-item v-if="!currentChat.muted">
-        class="button small clear row alert small-6 action--button"
+          <button class="button clear alert " @click="mute">
-        @click="mute"
+            <span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
-      >
+          </button>
-        <span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
+        </woot-dropdown-item>
-      </button>
+        <woot-dropdown-item v-else>
-
+          <button class="button clear alert" @click="unmute">
-      <button
+            <span>{{ $t('CONTACT_PANEL.UNMUTE_CONTACT') }}</span>
-        v-else
+          </button>
-        class="button small clear row alert small-6 action--button"
+        </woot-dropdown-item>
-        @click="unmute"
+        <woot-dropdown-item>
-      >
+          <button class="button clear" @click="toggleEmailActionsModal">
-        <span>{{ $t('CONTACT_PANEL.UNMUTE_CONTACT') }}</span>
+            {{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
-      </button>
+          </button>
-
+        </woot-dropdown-item>
-      <button
+      </woot-dropdown-menu>
-        class="button small clear row small-6 action--button"
-        @click="toggleEmailActionsModal"
-      >
-        {{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
-      </button>
     </div>
     <email-transcript-modal
       v-if="showEmailActionsModal"
@@ -52,9 +47,13 @@ import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal';
 import ResolveAction from '../../buttons/ResolveAction';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
 export default {
   components: {
+    WootDropdownMenu,
+    WootDropdownItem,
     EmailTranscriptModal,
     ResolveAction,
   },
@@ -117,43 +116,13 @@ export default {
 }
 
 .dropdown-pane {
-  @include elegant-card;
-  @include border-light;
   right: -12px;
   top: 48px;
   width: auto;
-
-  &::before {
-    @include arrow(top, var(--color-border-light), 14px);
-    top: -14px;
-    position: absolute;
-    right: 6px;
-  }
-
-  &::after {
-    @include arrow(top, white, var(--space-slab));
-    top: -12px;
-    position: absolute;
-    right: var(--space-small);
-  }
 }
 
-.dropdown-pane--open {
+.icon {
-  display: block;
+  margin-right: var(--space-smaller);
-  visibility: visible;
+  min-width: var(--space-normal);
-}
-
-.action--button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  white-space: nowrap;
-  padding: var(--space-small) var(--space-smaller);
-  font-size: var(--font-size-small);
-
-  .icon {
-    margin-right: var(--space-smaller);
-    min-width: var(--space-normal);
-  }
 }
 </style>

app/javascript/dashboard/helper/URLHelper.js

@@ -5,13 +5,22 @@ export const frontendURL = (path, params) => {
   return `/app/${path}${stringifiedParams}`;
 };
 
-export const conversationUrl = ({ accountId, activeInbox, id, label }) => {
+export const conversationUrl = ({
+  accountId,
+  activeInbox,
+  id,
+  label,
+  teamId,
+}) => {
   if (activeInbox) {
     return `accounts/${accountId}/inbox/${activeInbox}/conversations/${id}`;
   }
   if (label) {
     return `accounts/${accountId}/label/${label}/conversations/${id}`;
   }
+  if (teamId) {
+    return `accounts/${accountId}/team/${teamId}/conversations/${id}`;
+  }
   return `accounts/${accountId}/conversations/${id}`;
 };
 

app/javascript/dashboard/helper/actionCable.js

@@ -48,11 +48,7 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 
   onAssigneeChanged = payload => {
-    const { meta = {}, id } = payload;
+    this.app.$store.dispatch('updateConversation', payload);
-    const { assignee } = meta || {};
-    if (id) {
-      this.app.$store.dispatch('updateAssignee', { id, assignee });
-    }
     this.fetchConversationStats();
   };
 

app/javascript/dashboard/helper/specs/URLHelper.spec.js

@@ -21,6 +21,11 @@ describe('#URL Helpers', () => {
         conversationUrl({ accountId: 1, label: 'customer-support', id: 1 })
       ).toBe('accounts/1/label/customer-support/conversations/1');
     });
+    it('should return correct conversation URL if team Id is available', () => {
+      expect(conversationUrl({ accountId: 1, teamId: 1, id: 1 })).toBe(
+        'accounts/1/team/1/conversations/1'
+      );
+    });
   });
 
   describe('frontendURL', () => {

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -3,7 +3,7 @@
     <chat-list
       :conversation-inbox="inboxId"
       :label="label"
-      :active-team="activeTeam"
+      :team-id="teamId"
       @conversation-load="onConversationLoad"
     >
       <pop-over-search />
@@ -68,12 +68,6 @@ export default {
       }
       return false;
     },
-    activeTeam() {
-      if (this.teamId) {
-        return this.$store.getters['teams/getTeam'](this.teamId);
-      }
-      return {};
-    },
   },
 
   mounted() {

app/javascript/dashboard/routes/login/Login.vue

@@ -149,7 +149,13 @@ export default {
           }
 
           if (response && response.status === 401) {
-            this.showAlert(this.$t('LOGIN.API.UNAUTH'));
+						const { errors } = response.data;
+						const hasAuthErrorMsg = errors && errors.length && errors[0] && typeof errors[0] === 'string';
+            if (hasAuthErrorMsg) {
+              this.showAlert(errors[0]);
+            } else {
+							this.showAlert(this.$t('LOGIN.API.UNAUTH'));
+						} 
             return;
           }
           this.showAlert(this.$t('LOGIN.API.ERROR_MESSAGE'));

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -1,4 +1,5 @@
 import authAPI from '../../../api/auth';
+import { applyPageFilters } from './helpers';
 
 export const getSelectedChatConversation = ({
   allConversations,
@@ -18,24 +19,30 @@ const getters = {
     );
     return selectedChat || {};
   },
-  getMineChats(_state) {
+  getMineChats: _state => activeFilters => {
     const currentUserID = authAPI.getCurrentUser().id;
-    return _state.allConversations.filter(chat =>
+
-      !chat.meta.assignee
+    return _state.allConversations.filter(conversation => {
-        ? false
+      const { assignee } = conversation.meta;
-        : chat.status === _state.chatStatusFilter &&
+      const isAssignedToMe = assignee && assignee.id === currentUserID;
-          chat.meta.assignee.id === currentUserID
+      const shouldFilter = applyPageFilters(conversation, activeFilters);
-    );
+      const isChatMine = isAssignedToMe && shouldFilter;
+
+      return isChatMine;
+    });
   },
-  getUnAssignedChats(_state) {
+  getUnAssignedChats: _state => activeFilters => {
-    return _state.allConversations.filter(
+    return _state.allConversations.filter(conversation => {
-      chat => !chat.meta.assignee && chat.status === _state.chatStatusFilter
+      const isUnAssigned = !conversation.meta.assignee;
-    );
+      const shouldFilter = applyPageFilters(conversation, activeFilters);
+      return isUnAssigned && shouldFilter;
+    });
   },
-  getAllStatusChats(_state) {
+  getAllStatusChats: _state => activeFilters => {
-    return _state.allConversations.filter(
+    return _state.allConversations.filter(conversation => {
-      chat => chat.status === _state.chatStatusFilter
+      const shouldFilter = applyPageFilters(conversation, activeFilters);
-    );
+      return shouldFilter;
+    });
   },
   getChatListLoadingStatus: ({ listLoadingStatus }) => listLoadingStatus,
   getAllMessagesLoaded(_state) {
@@ -56,18 +63,6 @@ const getters = {
   },
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
-  getNextChatConversation: _state => {
-    const [selectedChat] = getSelectedChatConversation(_state);
-    const conversations = getters.getAllStatusChats(_state);
-    if (conversations.length <= 1) {
-      return null;
-    }
-    const currentIndex = conversations.findIndex(
-      conversation => conversation.id === selectedChat.id
-    );
-    const nextIndex = (currentIndex + 1) % conversations.length;
-    return conversations[nextIndex];
-  },
 };
 
 export default getters;

app/javascript/dashboard/store/modules/conversations/helpers.js

@@ -4,3 +4,32 @@ export const findPendingMessageIndex = (chat, message) => {
     m => m.id === message.id || m.id === tempMessageId
   );
 };
+
+export const applyPageFilters = (conversation, filters) => {
+  const { inboxId, status, labels = [], teamId } = filters;
+  const {
+    status: chatStatus,
+    inbox_id: chatInboxId,
+    labels: chatLabels = [],
+    meta = {},
+  } = conversation;
+  const { team = {} } = meta;
+  const { id: chatTeamId } = team;
+  const filterByStatus = chatStatus === status;
+  let shouldFilter = filterByStatus;
+
+  if (inboxId) {
+    const filterByInbox = Number(inboxId) === chatInboxId;
+    shouldFilter = shouldFilter && filterByInbox;
+  }
+  if (teamId) {
+    const filterByTeam = Number(teamId) === chatTeamId;
+    shouldFilter = shouldFilter && filterByTeam;
+  }
+  if (labels.length) {
+    const filterByLabels = labels.every(label => chatLabels.includes(label));
+    shouldFilter = shouldFilter && filterByLabels;
+  }
+
+  return shouldFilter;
+};

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

@@ -47,33 +47,59 @@ describe('#getters', () => {
       ]);
     });
   });
-  describe('#getNextChatConversation', () => {
+  describe('#getUnAssignedChats', () => {
-    it('return the next chat', () => {
+    it('order returns only chats assigned to user', () => {
-      const state = {
+      const conversationList = [
-        allConversations: [
+        {
-          {
+          id: 1,
-            id: 1,
+          inbox_id: 2,
-          },
+          status: 1,
-          {
+          meta: { assignee: { id: 1 } },
-            id: 2,
+          labels: ['sales', 'dev'],
-          },
+        },
-        ],
+        {
-        selectedChatId: 1,
+          id: 2,
-      };
+          inbox_id: 2,
-      expect(getters.getNextChatConversation(state)).toEqual({
+          status: 1,
-        id: 2,
+          meta: {},
-      });
+          labels: ['dev'],
-    });
+        },
-    it('return null when there is only one chat', () => {
+        {
-      const state = {
+          id: 11,
-        allConversations: [
+          inbox_id: 3,
-          {
+          status: 1,
-            id: 1,
+          meta: { assignee: { id: 1 } },
-          },
+          labels: [],
-        ],
+        },
-        selectedChatId: 1,
+        {
-      };
+          id: 22,
-      expect(getters.getNextChatConversation(state)).toBeNull();
+          inbox_id: 4,
+          status: 1,
+          meta: { team: { id: 5 } },
+          labels: ['sales'],
+        },
+      ];
+
+      expect(
+        getters.getUnAssignedChats({ allConversations: conversationList })({
+          status: 1,
+        })
+      ).toEqual([
+        {
+          id: 2,
+          inbox_id: 2,
+          status: 1,
+          meta: {},
+          labels: ['dev'],
+        },
+        {
+          id: 22,
+          inbox_id: 4,
+          status: 1,
+          meta: { team: { id: 5 } },
+          labels: ['sales'],
+        },
+      ]);
     });
   });
 });

app/javascript/dashboard/store/modules/specs/conversations/helpers.spec.js

@@ -1,4 +1,38 @@
-import { findPendingMessageIndex } from '../../conversations/helpers';
+import {
+  findPendingMessageIndex,
+  applyPageFilters,
+} from '../../conversations/helpers';
+
+const conversationList = [
+  {
+    id: 1,
+    inbox_id: 2,
+    status: 1,
+    meta: {},
+    labels: ['sales', 'dev'],
+  },
+  {
+    id: 2,
+    inbox_id: 2,
+    status: 1,
+    meta: {},
+    labels: ['dev'],
+  },
+  {
+    id: 11,
+    inbox_id: 3,
+    status: 1,
+    meta: { team: { id: 5 } },
+    labels: [],
+  },
+  {
+    id: 22,
+    inbox_id: 4,
+    status: 1,
+    meta: { team: { id: 5 } },
+    labels: ['sales'],
+  },
+];
 
 describe('#findPendingMessageIndex', () => {
   it('returns the correct index of pending message with id', () => {
@@ -18,20 +52,64 @@ describe('#findPendingMessageIndex', () => {
   });
 });
 
-describe('#addOrUpdateChat', () => {
+describe('#applyPageFilters', () => {
-  it('returns the correct index of pending message with id', () => {
+  describe('#filter-team', () => {
-    const chat = {
+    it('returns true if conversation has team and team filter is active', () => {
-      messages: [{ id: 1, status: 'progress' }],
+      const filters = {
-    };
+        status: 1,
-    const message = { echo_id: 1 };
+        teamId: 5,
-    expect(findPendingMessageIndex(chat, message)).toEqual(0);
+      };
+      expect(applyPageFilters(conversationList[3], filters)).toEqual(true);
+    });
+    it('returns true if conversation has no team and team filter is active', () => {
+      const filters = {
+        status: 1,
+        teamId: 5,
+      };
+      expect(applyPageFilters(conversationList[0], filters)).toEqual(false);
+    });
   });
 
-  it('returns -1 if pending message with id is not present', () => {
+  describe('#filter-inbox', () => {
-    const chat = {
+    it('returns true if conversation has inbox and inbox filter is active', () => {
-      messages: [{ id: 1, status: 'progress' }],
+      const filters = {
-    };
+        status: 1,
-    const message = { echo_id: 2 };
+        inboxId: 4,
-    expect(findPendingMessageIndex(chat, message)).toEqual(-1);
+      };
+      expect(applyPageFilters(conversationList[3], filters)).toEqual(true);
+    });
+    it('returns true if conversation has no inbox and inbox filter is active', () => {
+      const filters = {
+        status: 1,
+        inboxId: 5,
+      };
+      expect(applyPageFilters(conversationList[0], filters)).toEqual(false);
+    });
+  });
+
+  describe('#filter-labels', () => {
+    it('returns true if conversation has labels and labels filter is active', () => {
+      const filters = {
+        status: 1,
+        labels: ['dev'],
+      };
+      expect(applyPageFilters(conversationList[0], filters)).toEqual(true);
+    });
+    it('returns true if conversation has no inbox and inbox filter is active', () => {
+      const filters = {
+        status: 1,
+        labels: ['dev'],
+      };
+      expect(applyPageFilters(conversationList[2], filters)).toEqual(false);
+    });
+  });
+
+  describe('#filter-status', () => {
+    it('returns true if conversation has status and status filter is active', () => {
+      const filters = {
+        status: 1,
+      };
+      expect(applyPageFilters(conversationList[1], filters)).toEqual(true);
+    });
   });
 });

app/javascript/shared/components/ui/dropdown/DropdownItem.vue

@@ -0,0 +1,46 @@
+<template>
+  <li
+    class="dropdown-menu__item"
+    :class="{
+      'is-disabled': disabled,
+    }"
+    :tabindex="disabled ? null : -1"
+    :aria-disabled="disabled"
+  >
+    <slot></slot>
+  </li>
+</template>
+<script>
+export default {
+  name: 'WootDropdownItem',
+  componentName: 'WootDropdownMenu',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dropdown-menu__item ::v-deep {
+  a,
+  .button {
+    font-weight: var(--font-size-normal);
+    font-size: var(--font-size-small);
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+    padding: var(--space-small) var(--space-one);
+
+    &:hover {
+      background: var(--color-background);
+      border-radius: var(--border-radius-normal);
+    }
+  }
+}
+</style>

app/javascript/shared/components/ui/dropdown/DropdownMenu.vue

@@ -0,0 +1,21 @@
+<template>
+  <ul
+    class="dropdown menu vertical"
+    :class="[placement && `dropdown--${placement}`]"
+  >
+    <slot></slot>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'WootDropdownMenu',
+  componentName: 'WootDropdownMenu',
+
+  props: {
+    placement: {
+      type: String,
+      default: 'top',
+    },
+  },
+};
+</script>

app/javascript/widget/App.vue

@@ -150,6 +150,7 @@ export default {
           this.setPopoutDisplay(message.showPopoutButton);
           this.fetchAvailableAgents(websiteToken);
           this.setHideMessageBubble(message.hideMessageBubble);
+          this.$store.dispatch('contacts/get');
         } else if (message.event === 'widget-visible') {
           this.scrollConversationToBottom();
         } else if (message.event === 'set-current-url') {

app/javascript/widget/api/contacts.js

@@ -3,6 +3,9 @@ import { API } from 'widget/helpers/axios';
 const buildUrl = endPoint => `/api/v1/${endPoint}${window.location.search}`;
 
 export default {
+  get() {
+    return API.get(buildUrl('widget/contact'));
+  },
   update(identifier, userObject) {
     return API.patch(buildUrl('widget/contact'), {
       identifier,

app/javascript/widget/store/modules/contacts.js

@@ -1,7 +1,27 @@
 import ContactsAPI from '../../api/contacts';
 import { refreshActionCableConnector } from '../../helpers/actionCable';
 
+const state = {
+  currentUser: {},
+};
+
+const SET_CURRENT_USER = 'SET_CURRENT_USER';
+
+export const getters = {
+  getCurrentUser(_state) {
+    return _state.currentUser;
+  },
+};
+
 export const actions = {
+  get: async ({ commit }) => {
+    try {
+      const { data } = await ContactsAPI.get();
+      commit(SET_CURRENT_USER, data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
   update: async ({ dispatch }, { identifier, user: userObject }) => {
     try {
       const user = {
@@ -14,6 +34,7 @@ export const actions = {
         data: { pubsub_token: pubsubToken },
       } = await ContactsAPI.update(identifier, user);
 
+      dispatch('get');
       if (userObject.identifier_hash) {
         dispatch('conversation/clearConversations', {}, { root: true });
         dispatch('conversation/fetchOldConversations', {}, { root: true });
@@ -33,10 +54,17 @@ export const actions = {
   },
 };
 
+export const mutations = {
+  [SET_CURRENT_USER]($state, user) {
+    const { currentUser } = $state;
+    $state.currentUser = { ...currentUser, ...user };
+  },
+};
+
 export default {
   namespaced: true,
-  state: {},
+  state,
-  getters: {},
+  getters,
   actions,
-  mutations: {},
+  mutations,
 };

app/javascript/widget/store/modules/specs/contact/actions.spec.js

@@ -0,0 +1,21 @@
+import { API } from 'widget/helpers/axios';
+import { actions } from '../../contacts';
+
+const commit = jest.fn();
+jest.mock('widget/helpers/axios');
+
+describe('#actions', () => {
+  describe('#update', () => {
+    it('sends correct actions', async () => {
+      const user = {
+        email: 'thoma@sphadikam.com',
+        name: 'Adu Thoma',
+        avatar_url: '',
+        identifier_hash: 'malana_hash',
+      };
+      API.patch.mockResolvedValue({ data: { pubsub_token: 'token' } });
+      await actions.update({ commit }, { identifier: 1, user });
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
+});

app/javascript/widget/store/modules/specs/contact/getters.spec.js

@@ -0,0 +1,21 @@
+import { getters } from '../../contacts';
+
+describe('#getters', () => {
+  it('getCurrentUser', () => {
+    const user = {
+      email: 'thoma@sphadikam.com',
+      name: 'Adu Thoma',
+      avatar_url: '',
+      identifier_hash: 'malana_hash',
+    };
+    const state = {
+      currentUser: user,
+    };
+    expect(getters.getCurrentUser(state)).toEqual({
+      email: 'thoma@sphadikam.com',
+      name: 'Adu Thoma',
+      avatar_url: '',
+      identifier_hash: 'malana_hash',
+    });
+  });
+});

app/javascript/widget/store/modules/specs/contact/mutations.spec.js

@@ -0,0 +1,17 @@
+import { mutations } from '../../contacts';
+
+describe('#mutations', () => {
+  describe('#SET_CURRENT_USER', () => {
+    it('set current user', () => {
+      const user = {
+        email: 'thoma@sphadikam.com',
+        name: 'Adu Thoma',
+        avatar_url: '',
+        identifier_hash: 'malana_hash',
+      };
+      const state = { currentUser: {} };
+      mutations.SET_CURRENT_USER(state, user);
+      expect(state.currentUser).toEqual(user);
+    });
+  });
+});

app/javascript/widget/views/Home.vue

@@ -114,13 +114,15 @@ export default {
       conversationSize: 'conversation/getConversationSize',
       groupedMessages: 'conversation/getGroupedConversation',
       isFetchingList: 'conversation/getIsFetchingList',
+      currentUser: 'contacts/getCurrentUser',
     }),
     currentView() {
+      const { email: currentUserEmail = '' } = this.currentUser;
       if (this.isHeaderCollapsed) {
         if (this.conversationSize) {
           return 'messageView';
         }
-        if (this.preChatFormEnabled) {
+        if (this.preChatFormEnabled && !currentUserEmail) {
           return 'preChatFormView';
         }
         return 'messageView';

app/views/api/v1/widget/contacts/show.json.jbuilder

@@ -0,0 +1,3 @@
+json.id @contact.id
+json.name @contact.name
+json.email @contact.email

config/app.yml

@@ -1,5 +1,5 @@
 shared: &shared
-  version: '1.14.0'
+  version: '1.14.1'
 
 development:
   <<: *shared

config/initializers/mailer.rb

@@ -13,16 +13,16 @@ Rails.application.configure do
 
   # Config related to smtp
   smtp_settings = {
-    domain: ENV.fetch('SMTP_DOMAIN', ''),
     address: ENV.fetch('SMTP_ADDRESS', 'localhost'),
     port: ENV.fetch('SMTP_PORT', 587)
   }
 
-  smtp_settings[:authentication] = ENV.fetch('SMTP_AUTHENTICATION', 'login').to_sym if ENV.fetch('SMTP_AUTHENTICATION', '').present?
+  smtp_settings[:authentication] = ENV.fetch('SMTP_AUTHENTICATION', 'login').to_sym if ENV['SMTP_AUTHENTICATION'].present?
+  smtp_settings[:domain] = ENV['SMTP_DOMAIN'] if ENV['SMTP_DOMAIN'].present?
   smtp_settings[:user_name] = ENV['SMTP_USERNAME']
   smtp_settings[:password] = ENV['SMTP_PASSWORD']
   smtp_settings[:enable_starttls_auto] = ActiveModel::Type::Boolean.new.cast(ENV.fetch('SMTP_ENABLE_STARTTLS_AUTO', true))
-  smtp_settings[:openssl_verify_mode] = ENV.fetch('SMTP_OPENSSL_VERIFY_MODE', 'peer')
+  smtp_settings[:openssl_verify_mode] = ENV['SMTP_OPENSSL_VERIFY_MODE'] if ENV['SMTP_OPENSSL_VERIFY_MODE'].present?
   smtp_settings[:ssl] = ActiveModel::Type::Boolean.new.cast(ENV.fetch('SMTP_SSL', true)) if ENV['SMTP_SSL']
   smtp_settings[:tls] = ActiveModel::Type::Boolean.new.cast(ENV.fetch('SMTP_TLS', true)) if ENV['SMTP_TLS']
 

config/routes.rb

@@ -150,7 +150,7 @@ Rails.application.routes.draw do
             post :transcript
           end
         end
-        resource :contact, only: [:update]
+        resource :contact, only: [:show, :update]
         resources :inbox_members, only: [:index]
         resources :labels, only: [:create, :destroy]
       end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/javascript --fix",