Merge branch 'release/1.14.1'
This commit is contained in:
Sojan
commit
818f45916e
34 changed files with 542 additions and 260 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -54,8 +54,10 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-slide-enter-active, .menu-slide-leave-active {
|
||||
transition: all .15s $ease-in-cubic;
|
||||
.menu-slide-enter-active,
|
||||
.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
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
.dropdown-pane.sleek {
|
||||
.dropdown-pane {
|
||||
@include elegant-card;
|
||||
@include border-light;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
right: -12px;
|
||||
top: 48px;
|
||||
width: auto;
|
||||
z-index: 999;
|
||||
|
||||
&.dropdown-pane--open {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.dropdowm--bottom {
|
||||
&::before {
|
||||
@include arrow(top, var(--color-border-light), 14px);
|
||||
position: absolute;
|
||||
|
|
@ -20,8 +22,21 @@
|
|||
right: var(--space-small);
|
||||
top: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown>li>a:hover {
|
||||
background: var(--color-background);
|
||||
&.dropdowm--top {
|
||||
&::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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
activeTeam() {
|
||||
if (this.teamId) {
|
||||
return this.$store.getters['teams/getTeam'](this.teamId);
|
||||
}
|
||||
|
||||
return conversationList.filter(conversation => {
|
||||
const labels = this.$store.getters[
|
||||
'conversationLabels/getConversationLabels'
|
||||
](conversation.id);
|
||||
return labels.includes(this.label);
|
||||
});
|
||||
return {};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<li
|
||||
<woot-dropdown-menu>
|
||||
<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>
|
||||
</ul>
|
||||
</woot-dropdown-item>
|
||||
</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;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
margin-left: $space-small;
|
||||
color: var(--b-600);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
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;
|
||||
font-size: $font-size-small;
|
||||
border-bottom: 1px solid $color-gray;
|
||||
color: var(--b-600);
|
||||
font-size: var(--font-size-small);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<li v-if="showChangeAccountOption">
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item v-if="showChangeAccountOption">
|
||||
<button
|
||||
class="button clear change-accounts--button"
|
||||
@click="$emit('toggle-accounts')"
|
||||
>
|
||||
{{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="globalConfig.chatwootInboxToken">
|
||||
</woot-dropdown-item>
|
||||
<woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
|
||||
<button
|
||||
class="button clear change-accounts--button"
|
||||
@click="$emit('show-support-chat-window')"
|
||||
>
|
||||
Contact Support
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
</woot-dropdown-item>
|
||||
<woot-dropdown-item>
|
||||
<router-link :to="`/app/accounts/${accountId}/profile/settings`">
|
||||
{{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
</woot-dropdown-item>
|
||||
<woot-dropdown-item>
|
||||
<a href="#" @click.prevent="logout">
|
||||
{{ $t('SIDEBAR_ITEMS.LOGOUT') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</woot-dropdown-item>
|
||||
</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: {
|
||||
|
|
|
|||
|
|
@ -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) });
|
||||
},
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export default {
|
|||
},
|
||||
shouldShowSpinner() {
|
||||
return (
|
||||
this.getMessages.dataFetched === undefined ||
|
||||
(this.getMessages && this.getMessages.dataFetched === undefined) ||
|
||||
(!this.listLoadingStatus && this.isLoadingPrevious)
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
v-if="!currentChat.muted"
|
||||
class="button small clear row alert small-6 action--button"
|
||||
@click="mute"
|
||||
>
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item v-if="!currentChat.muted">
|
||||
<button class="button clear alert " @click="mute">
|
||||
<span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-else
|
||||
class="button small clear row alert small-6 action--button"
|
||||
@click="unmute"
|
||||
>
|
||||
</woot-dropdown-item>
|
||||
<woot-dropdown-item v-else>
|
||||
<button class="button clear alert" @click="unmute">
|
||||
<span>{{ $t('CONTACT_PANEL.UNMUTE_CONTACT') }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="button small clear row small-6 action--button"
|
||||
@click="toggleEmailActionsModal"
|
||||
>
|
||||
</woot-dropdown-item>
|
||||
<woot-dropdown-item>
|
||||
<button class="button clear" @click="toggleEmailActionsModal">
|
||||
{{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
|
||||
</button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
</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 {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -48,11 +48,7 @@ class ActionCableConnector extends BaseActionCableConnector {
|
|||
};
|
||||
|
||||
onAssigneeChanged = payload => {
|
||||
const { meta = {}, id } = payload;
|
||||
const { assignee } = meta || {};
|
||||
if (id) {
|
||||
this.app.$store.dispatch('updateAssignee', { id, assignee });
|
||||
}
|
||||
this.app.$store.dispatch('updateConversation', payload);
|
||||
this.fetchConversationStats();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -149,7 +149,13 @@ export default {
|
|||
}
|
||||
|
||||
if (response && response.status === 401) {
|
||||
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'));
|
||||
|
|
|
|||
|
|
@ -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
|
||||
? false
|
||||
: chat.status === _state.chatStatusFilter &&
|
||||
chat.meta.assignee.id === currentUserID
|
||||
);
|
||||
|
||||
return _state.allConversations.filter(conversation => {
|
||||
const { assignee } = conversation.meta;
|
||||
const isAssignedToMe = assignee && assignee.id === currentUserID;
|
||||
const shouldFilter = applyPageFilters(conversation, activeFilters);
|
||||
const isChatMine = isAssignedToMe && shouldFilter;
|
||||
|
||||
return isChatMine;
|
||||
});
|
||||
},
|
||||
getUnAssignedChats(_state) {
|
||||
return _state.allConversations.filter(
|
||||
chat => !chat.meta.assignee && chat.status === _state.chatStatusFilter
|
||||
);
|
||||
getUnAssignedChats: _state => activeFilters => {
|
||||
return _state.allConversations.filter(conversation => {
|
||||
const isUnAssigned = !conversation.meta.assignee;
|
||||
const shouldFilter = applyPageFilters(conversation, activeFilters);
|
||||
return isUnAssigned && shouldFilter;
|
||||
});
|
||||
},
|
||||
getAllStatusChats(_state) {
|
||||
return _state.allConversations.filter(
|
||||
chat => chat.status === _state.chatStatusFilter
|
||||
);
|
||||
getAllStatusChats: _state => activeFilters => {
|
||||
return _state.allConversations.filter(conversation => {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -47,33 +47,59 @@ describe('#getters', () => {
|
|||
]);
|
||||
});
|
||||
});
|
||||
describe('#getNextChatConversation', () => {
|
||||
it('return the next chat', () => {
|
||||
const state = {
|
||||
allConversations: [
|
||||
describe('#getUnAssignedChats', () => {
|
||||
it('order returns only chats assigned to user', () => {
|
||||
const conversationList = [
|
||||
{
|
||||
id: 1,
|
||||
inbox_id: 2,
|
||||
status: 1,
|
||||
meta: { assignee: { id: 1 } },
|
||||
labels: ['sales', 'dev'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
inbox_id: 2,
|
||||
status: 1,
|
||||
meta: {},
|
||||
labels: ['dev'],
|
||||
},
|
||||
],
|
||||
selectedChatId: 1,
|
||||
};
|
||||
expect(getters.getNextChatConversation(state)).toEqual({
|
||||
id: 2,
|
||||
});
|
||||
});
|
||||
it('return null when there is only one chat', () => {
|
||||
const state = {
|
||||
allConversations: [
|
||||
{
|
||||
id: 1,
|
||||
id: 11,
|
||||
inbox_id: 3,
|
||||
status: 1,
|
||||
meta: { assignee: { id: 1 } },
|
||||
labels: [],
|
||||
},
|
||||
],
|
||||
selectedChatId: 1,
|
||||
};
|
||||
expect(getters.getNextChatConversation(state)).toBeNull();
|
||||
{
|
||||
id: 22,
|
||||
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'],
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
it('returns the correct index of pending message with id', () => {
|
||||
const chat = {
|
||||
messages: [{ id: 1, status: 'progress' }],
|
||||
describe('#applyPageFilters', () => {
|
||||
describe('#filter-team', () => {
|
||||
it('returns true if conversation has team and team filter is active', () => {
|
||||
const filters = {
|
||||
status: 1,
|
||||
teamId: 5,
|
||||
};
|
||||
const message = { echo_id: 1 };
|
||||
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', () => {
|
||||
const chat = {
|
||||
messages: [{ id: 1, status: 'progress' }],
|
||||
describe('#filter-inbox', () => {
|
||||
it('returns true if conversation has inbox and inbox filter is active', () => {
|
||||
const filters = {
|
||||
status: 1,
|
||||
inboxId: 4,
|
||||
};
|
||||
const message = { echo_id: 2 };
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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') {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {},
|
||||
getters: {},
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations: {},
|
||||
mutations,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
3
app/views/api/v1/widget/contacts/show.json.jbuilder
Normal file
3
app/views/api/v1/widget/contacts/show.json.jbuilder
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
json.id @contact.id
|
||||
json.name @contact.name
|
||||
json.email @contact.email
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
shared: &shared
|
||||
version: '1.14.0'
|
||||
version: '1.14.1'
|
||||
|
||||
development:
|
||||
<<: *shared
|
||||
|
|
|
|||
|
|
@ -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']
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@chatwoot/chatwoot",
|
||||
"version": "1.14.0",
|
||||
"version": "1.14.1",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"eslint": "eslint app/javascript --fix",
|
||||
|
|
|
|||
Loading…
Reference in a new issue