KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'release/1.14.1'

Browse source
This commit is contained in:
Sojan 2021-03-21 01:46:59 +05:30
commit 818f45916e
34 changed files with 542 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/controllers/api/v1/widget/contacts_controller.rb
View file

@ -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

6
app/javascript/dashboard/assets/scss/_animations.scss
View file

@ -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

51
app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
View file

@ -1,27 +1,42 @@
.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;
&::before {
@include arrow(top, var(--color-border-light), 14px);
position: absolute;
right: 6px;
top: -14px;
&.dropdown-pane--open {
display: block;
visibility: visible;
}
&::after {
@include arrow(top, $color-white, var(--space-slab));
position: absolute;
right: var(--space-small);
top: -12px;
&.dropdowm--bottom {
&::before {
@include arrow(top, var(--color-border-light), 14px);
position: absolute;
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 {
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);
}
}
}

10
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View file

@ -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 {

33
app/javascript/dashboard/components/ChatList.vue
View file

@ -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 conversationList.filter(conversation => {
const labels = this.$store.getters[
'conversationLabels/getConversationLabels'
](conversation.id);
return labels.includes(this.label);
});
return {};
},
},
watch: {

88
app/javascript/dashboard/components/layout/AvailabilityStatus.vue
View file

@ -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>

8
app/javascript/dashboard/components/layout/Sidebar.vue
View file

@ -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;

28
app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
View file

@ -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: {

5
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View file

@ -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) });
},

2
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View file

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

81
app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
View file

@ -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"
>
<span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
</button>
<button
v-else
class="button small clear row alert small-6 action--button"
@click="unmute"
>
<span>{{ $t('CONTACT_PANEL.UNMUTE_CONTACT') }}</span>
</button>
<button
class="button small clear row small-6 action--button"
@click="toggleEmailActionsModal"
>
{{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
</button>
<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>
</woot-dropdown-item>
<woot-dropdown-item v-else>
<button class="button clear alert" @click="unmute">
<span>{{ $t('CONTACT_PANEL.UNMUTE_CONTACT') }}</span>
</button>
</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);
}
.icon {
margin-right: var(--space-smaller);
min-width: var(--space-normal);
}
</style>

11
app/javascript/dashboard/helper/URLHelper.js
View file

@ -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}`;
};

6
app/javascript/dashboard/helper/actionCable.js
View file

@ -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();
};

5
app/javascript/dashboard/helper/specs/URLHelper.spec.js
View file

@ -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', () => {

8
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
View file

@ -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() {

8
app/javascript/dashboard/routes/login/Login.vue
View file

@ -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'));

49
app/javascript/dashboard/store/modules/conversations/getters.js
View file

@ -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;

29
app/javascript/dashboard/store/modules/conversations/helpers.js
View file

@ -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;
};

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

@ -47,33 +47,59 @@ describe('#getters', () => {
]);
});
});
describe('#getNextChatConversation', () => {
it('return the next chat', () => {
const state = {
allConversations: [
{
id: 1,
},
{
id: 2,
},
],
selectedChatId: 1,
};
expect(getters.getNextChatConversation(state)).toEqual({
id: 2,
});
});
it('return null when there is only one chat', () => {
const state = {
allConversations: [
{
id: 1,
},
],
selectedChatId: 1,
};
expect(getters.getNextChatConversation(state)).toBeNull();
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'],
},
{
id: 11,
inbox_id: 3,
status: 1,
meta: { assignee: { id: 1 } },
labels: [],
},
{
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'],
},
]);
});
});
});

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

@ -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' }],
};
const message = { echo_id: 1 };
expect(findPendingMessageIndex(chat, message)).toEqual(0);
describe('#applyPageFilters', () => {
describe('#filter-team', () => {
it('returns true if conversation has team and team filter is active', () => {
const filters = {
status: 1,
teamId: 5,
};
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' }],
};
const message = { echo_id: 2 };
expect(findPendingMessageIndex(chat, message)).toEqual(-1);
describe('#filter-inbox', () => {
it('returns true if conversation has inbox and inbox filter is active', () => {
const filters = {
status: 1,
inboxId: 4,
};
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);
});
});
});

46
app/javascript/shared/components/ui/dropdown/DropdownItem.vue Normal file
View file

@ -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>

21
app/javascript/shared/components/ui/dropdown/DropdownMenu.vue Normal file
View file

@ -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>

1
app/javascript/widget/App.vue
View file

@ -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
app/javascript/widget/api/contacts.js
View file

@ -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,

34
app/javascript/widget/store/modules/contacts.js
View file

@ -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,
};

21
app/javascript/widget/store/modules/specs/contact/actions.spec.js Normal file
View file

@ -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([]);
});
});
});

21
app/javascript/widget/store/modules/specs/contact/getters.spec.js Normal file
View file

@ -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',
});
});
});

17
app/javascript/widget/store/modules/specs/contact/mutations.spec.js Normal file
View file

@ -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);
});
});
});

4
app/javascript/widget/views/Home.vue
View file

@ -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
View file

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

2
config/app.yml
View file

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

6
config/initializers/mailer.rb
View file

@ -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']

2
config/routes.rb
View file

@ -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

2
package.json
View file

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