2019-09-05 07:31:36 +00:00
|
|
|
import Vue from 'vue';
|
2021-11-18 13:45:02 +00:00
|
|
|
import types from '../../mutation-types';
|
2019-09-05 07:31:36 +00:00
|
|
|
import getters, { getSelectedChatConversation } from './getters';
|
|
|
|
import actions from './actions';
|
2020-12-25 07:45:01 +00:00
|
|
|
import { findPendingMessageIndex } from './helpers';
|
2020-02-26 15:45:01 +00:00
|
|
|
import wootConstants from '../../../constants';
|
2022-03-23 07:57:50 +00:00
|
|
|
import { BUS_EVENTS } from '../../../../shared/constants/busEvents';
|
2019-09-05 07:31:36 +00:00
|
|
|
|
|
|
|
const state = {
|
|
|
|
allConversations: [],
|
|
|
|
listLoadingStatus: true,
|
2020-02-26 15:45:01 +00:00
|
|
|
chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
|
2019-09-05 07:31:36 +00:00
|
|
|
currentInbox: null,
|
2020-07-23 18:03:17 +00:00
|
|
|
selectedChatId: null,
|
2021-11-18 13:45:02 +00:00
|
|
|
appliedFilters: [],
|
2022-03-09 12:32:03 +00:00
|
|
|
conversationParticipants: [],
|
2022-04-20 10:33:12 +00:00
|
|
|
conversationLastSeen: null,
|
2019-09-05 07:31:36 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// mutations
|
2020-07-23 18:03:17 +00:00
|
|
|
export const mutations = {
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.SET_ALL_CONVERSATION](_state, conversationList) {
|
2019-12-01 04:46:51 +00:00
|
|
|
const newAllConversations = [..._state.allConversations];
|
|
|
|
conversationList.forEach(conversation => {
|
|
|
|
const indexInCurrentList = newAllConversations.findIndex(
|
|
|
|
c => c.id === conversation.id
|
|
|
|
);
|
|
|
|
if (indexInCurrentList < 0) {
|
|
|
|
newAllConversations.push(conversation);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
_state.allConversations = newAllConversations;
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.EMPTY_ALL_CONVERSATION](_state) {
|
2019-09-05 07:31:36 +00:00
|
|
|
_state.allConversations = [];
|
2020-07-23 18:03:17 +00:00
|
|
|
_state.selectedChatId = null;
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.SET_ALL_MESSAGES_LOADED](_state) {
|
2019-09-05 07:31:36 +00:00
|
|
|
const [chat] = getSelectedChatConversation(_state);
|
|
|
|
Vue.set(chat, 'allMessagesLoaded', true);
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.CLEAR_ALL_MESSAGES_LOADED](_state) {
|
2019-09-05 07:31:36 +00:00
|
|
|
const [chat] = getSelectedChatConversation(_state);
|
|
|
|
Vue.set(chat, 'allMessagesLoaded', false);
|
|
|
|
},
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.CLEAR_CURRENT_CHAT_WINDOW](_state) {
|
2020-07-23 18:03:17 +00:00
|
|
|
_state.selectedChatId = null;
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.SET_PREVIOUS_CONVERSATIONS](_state, { id, data }) {
|
2019-09-05 07:31:36 +00:00
|
|
|
if (data.length) {
|
|
|
|
const [chat] = _state.allConversations.filter(c => c.id === id);
|
|
|
|
chat.messages.unshift(...data);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
|
2019-09-05 07:31:36 +00:00
|
|
|
if (activeChat) {
|
2020-07-23 18:03:17 +00:00
|
|
|
_state.selectedChatId = activeChat.id;
|
2019-09-05 07:31:36 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.ASSIGN_AGENT](_state, assignee) {
|
2019-09-05 07:31:36 +00:00
|
|
|
const [chat] = getSelectedChatConversation(_state);
|
2021-03-15 13:07:03 +00:00
|
|
|
Vue.set(chat.meta, 'assignee', assignee);
|
|
|
|
},
|
|
|
|
|
2022-08-05 05:27:58 +00:00
|
|
|
[types.ASSIGN_TEAM](_state, { team, conversationId }) {
|
|
|
|
const [chat] = _state.allConversations.filter(c => c.id === conversationId);
|
2021-03-15 13:07:03 +00:00
|
|
|
Vue.set(chat.meta, 'team', team);
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
|
|
|
|
2021-12-09 01:32:00 +00:00
|
|
|
[types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](_state, custom_attributes) {
|
2021-10-30 01:39:46 +00:00
|
|
|
const [chat] = getSelectedChatConversation(_state);
|
|
|
|
Vue.set(chat, 'custom_attributes', custom_attributes);
|
|
|
|
},
|
2021-11-15 11:52:44 +00:00
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.CHANGE_CONVERSATION_STATUS](
|
2021-09-29 14:03:51 +00:00
|
|
|
_state,
|
|
|
|
{ conversationId, status, snoozedUntil }
|
|
|
|
) {
|
2021-08-02 07:41:07 +00:00
|
|
|
const conversation =
|
|
|
|
getters.getConversationById(_state)(conversationId) || {};
|
2021-09-29 14:03:51 +00:00
|
|
|
Vue.set(conversation, 'snoozed_until', snoozedUntil);
|
2021-08-02 07:41:07 +00:00
|
|
|
Vue.set(conversation, 'status', status);
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.MUTE_CONVERSATION](_state) {
|
2020-05-26 12:13:59 +00:00
|
|
|
const [chat] = getSelectedChatConversation(_state);
|
2021-11-15 11:52:44 +00:00
|
|
|
Vue.set(chat, 'muted', true);
|
2020-05-26 12:13:59 +00:00
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.UNMUTE_CONVERSATION](_state) {
|
2020-10-08 06:32:08 +00:00
|
|
|
const [chat] = getSelectedChatConversation(_state);
|
2021-11-15 11:52:44 +00:00
|
|
|
Vue.set(chat, 'muted', false);
|
2020-10-08 06:32:08 +00:00
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.ADD_MESSAGE]({ allConversations, selectedChatId }, message) {
|
2020-10-11 14:54:26 +00:00
|
|
|
const { conversation_id: conversationId } = message;
|
|
|
|
const [chat] = getSelectedChatConversation({
|
|
|
|
allConversations,
|
|
|
|
selectedChatId: conversationId,
|
|
|
|
});
|
2019-09-05 07:31:36 +00:00
|
|
|
if (!chat) return;
|
2020-12-25 07:45:01 +00:00
|
|
|
|
|
|
|
const pendingMessageIndex = findPendingMessageIndex(chat, message);
|
|
|
|
if (pendingMessageIndex !== -1) {
|
|
|
|
Vue.set(chat.messages, pendingMessageIndex, message);
|
|
|
|
} else {
|
2019-09-05 07:31:36 +00:00
|
|
|
chat.messages.push(message);
|
2020-10-05 17:22:43 +00:00
|
|
|
chat.timestamp = message.created_at;
|
2020-10-11 14:54:26 +00:00
|
|
|
if (selectedChatId === conversationId) {
|
2022-03-23 07:57:50 +00:00
|
|
|
window.bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
|
2019-09-05 07:31:36 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.ADD_CONVERSATION](_state, conversation) {
|
2019-09-05 07:31:36 +00:00
|
|
|
_state.allConversations.push(conversation);
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.UPDATE_CONVERSATION](_state, conversation) {
|
2020-04-18 14:55:58 +00:00
|
|
|
const { allConversations } = _state;
|
|
|
|
const currentConversationIndex = allConversations.findIndex(
|
|
|
|
c => c.id === conversation.id
|
|
|
|
);
|
|
|
|
if (currentConversationIndex > -1) {
|
2020-07-04 14:16:17 +00:00
|
|
|
const { messages, ...conversationAttributes } = conversation;
|
2020-04-18 14:55:58 +00:00
|
|
|
const currentConversation = {
|
|
|
|
...allConversations[currentConversationIndex],
|
2020-07-04 14:16:17 +00:00
|
|
|
...conversationAttributes,
|
2020-04-18 14:55:58 +00:00
|
|
|
};
|
|
|
|
Vue.set(allConversations, currentConversationIndex, currentConversation);
|
2020-07-23 18:03:17 +00:00
|
|
|
if (_state.selectedChatId === conversation.id) {
|
2022-03-23 07:57:50 +00:00
|
|
|
window.bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
|
2020-04-18 14:55:58 +00:00
|
|
|
}
|
2020-06-25 15:34:03 +00:00
|
|
|
} else {
|
|
|
|
_state.allConversations.push(conversation);
|
2020-04-18 14:55:58 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.SET_LIST_LOADING_STATUS](_state) {
|
2019-09-05 07:31:36 +00:00
|
|
|
_state.listLoadingStatus = true;
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.CLEAR_LIST_LOADING_STATUS](_state) {
|
2019-09-05 07:31:36 +00:00
|
|
|
_state.listLoadingStatus = false;
|
|
|
|
},
|
|
|
|
|
2022-11-24 07:55:45 +00:00
|
|
|
[types.UPDATE_MESSAGE_UNREAD_COUNT](
|
|
|
|
_state,
|
|
|
|
{ id, lastSeen, unreadCount = 0 }
|
|
|
|
) {
|
2019-09-05 07:31:36 +00:00
|
|
|
const [chat] = _state.allConversations.filter(c => c.id === id);
|
2020-08-03 08:10:20 +00:00
|
|
|
if (chat) {
|
2022-11-24 07:55:45 +00:00
|
|
|
Vue.set(chat, 'agent_last_seen_at', lastSeen);
|
|
|
|
Vue.set(chat, 'unread_count', unreadCount);
|
2020-08-03 08:10:20 +00:00
|
|
|
}
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.CHANGE_CHAT_STATUS_FILTER](_state, data) {
|
2019-09-05 07:31:36 +00:00
|
|
|
_state.chatStatusFilter = data;
|
|
|
|
},
|
|
|
|
|
2019-10-24 20:07:01 +00:00
|
|
|
// Update assignee on action cable message
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.UPDATE_ASSIGNEE](_state, payload) {
|
2019-09-05 07:31:36 +00:00
|
|
|
const [chat] = _state.allConversations.filter(c => c.id === payload.id);
|
2021-03-15 13:07:03 +00:00
|
|
|
Vue.set(chat.meta, 'assignee', payload.assignee);
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
|
|
|
|
2021-12-09 01:32:00 +00:00
|
|
|
[types.UPDATE_CONVERSATION_CONTACT](_state, { conversationId, ...payload }) {
|
2020-06-02 17:29:02 +00:00
|
|
|
const [chat] = _state.allConversations.filter(c => c.id === conversationId);
|
|
|
|
if (chat) {
|
|
|
|
Vue.set(chat.meta, 'sender', payload);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.SET_ACTIVE_INBOX](_state, inboxId) {
|
2020-06-25 15:34:03 +00:00
|
|
|
_state.currentInbox = inboxId ? parseInt(inboxId, 10) : null;
|
2019-09-05 07:31:36 +00:00
|
|
|
},
|
2020-07-25 17:24:45 +00:00
|
|
|
|
2021-12-09 01:32:00 +00:00
|
|
|
[types.SET_CONVERSATION_CAN_REPLY](_state, { conversationId, canReply }) {
|
2020-07-25 17:24:45 +00:00
|
|
|
const [chat] = _state.allConversations.filter(c => c.id === conversationId);
|
|
|
|
if (chat) {
|
|
|
|
Vue.set(chat, 'can_reply', canReply);
|
|
|
|
}
|
|
|
|
},
|
2021-09-23 07:22:49 +00:00
|
|
|
|
2021-11-18 13:45:02 +00:00
|
|
|
[types.CLEAR_CONTACT_CONVERSATIONS](_state, contactId) {
|
2021-09-23 07:22:49 +00:00
|
|
|
const chats = _state.allConversations.filter(
|
|
|
|
c => c.meta.sender.id !== contactId
|
|
|
|
);
|
|
|
|
Vue.set(_state, 'allConversations', chats);
|
|
|
|
},
|
2021-11-18 13:45:02 +00:00
|
|
|
|
|
|
|
[types.SET_CONVERSATION_FILTERS](_state, data) {
|
|
|
|
_state.appliedFilters = data;
|
|
|
|
},
|
|
|
|
|
|
|
|
[types.CLEAR_CONVERSATION_FILTERS](_state) {
|
|
|
|
_state.appliedFilters = [];
|
|
|
|
},
|
2019-09-05 07:31:36 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
|
|
state,
|
|
|
|
getters,
|
|
|
|
actions,
|
|
|
|
mutations,
|
|
|
|
};
|