+
{{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
@@ -19,36 +23,50 @@
- Contact Support
+ {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
{{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
- {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+
+
{{ $t('SIDEBAR_ITEMS.LOGOUT') }}
@@ -63,13 +81,15 @@
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';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
export default {
components: {
WootDropdownMenu,
WootDropdownItem,
+ AvailabilityStatus,
},
mixins: [clickaway],
props: {
@@ -88,18 +108,34 @@ export default {
if (this.globalConfig.createNewAccountFromDashboard) {
return true;
}
- return this.currentUser.accounts.length > 1;
+
+ const { accounts = [] } = this.currentUser;
+ return accounts.length > 1;
},
},
methods: {
+ handleProfileSettingClick(e, navigate) {
+ this.$emit('close');
+ navigate(e);
+ },
+ handleKeyboardHelpClick() {
+ this.$emit('key-shortcut-modal');
+ this.$emit('close');
+ },
logout() {
Auth.logout();
},
+ onClickAway() {
+ if (this.show) this.$emit('close');
+ },
},
};
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
index 142bbedfa..073881a58 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
@@ -2,13 +2,20 @@ import AgentDetails from '../AgentDetails';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
import i18n from 'dashboard/i18n';
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import WootButton from 'dashboard/components/ui/WootButton';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(VueI18n);
localVue.component('thumbnail', Thumbnail);
+localVue.component('woot-button', WootButton);
+localVue.component('woot-button', WootButton);
+localVue.use(VTooltip, {
+ defaultHtml: false,
+});
const i18nConfig = new VueI18n({
locale: 'en',
@@ -16,7 +23,11 @@ const i18nConfig = new VueI18n({
});
describe('agentDetails', () => {
- const currentUser = { name: 'Neymar Junior', avatar_url: '' };
+ const currentUser = {
+ name: 'Neymar Junior',
+ avatar_url: '',
+ availability_status: 'online',
+ };
const currentRole = 'agent';
let store = null;
let actions = null;
@@ -31,6 +42,7 @@ describe('agentDetails', () => {
getters: {
getCurrentUser: () => currentUser,
getCurrentRole: () => currentRole,
+ getCurrentUserAvailability: () => currentUser.availability_status,
},
},
};
@@ -47,14 +59,8 @@ describe('agentDetails', () => {
});
});
- it('shows the agent name', () => {
- const agentTitle = agentDetails.find('.current-user--name');
- expect(agentTitle.text()).toBe('Neymar Junior');
- });
-
- it('shows the agent role', () => {
- const agentTitle = agentDetails.find('.current-user--role');
- expect(agentTitle.text()).toBe('Agent');
+ it(' the agent status', () => {
+ expect(agentDetails.find('thumbnail-stub').vm.status).toBe('online');
});
it('agent thumbnail exists', () => {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
index 947e5976b..5da4a7d02 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
@@ -50,8 +50,9 @@ describe('notificationBell', () => {
localVue,
i18n: i18nConfig,
});
- const statusViewTitle = notificationBell.find('.unread-badge');
- expect(statusViewTitle.text()).toBe('19');
+
+ const statusViewTitle = notificationBell.find('primary-nav-item-stub');
+ expect(statusViewTitle.vm.count).toBe('19');
});
it('it should return unread count 99+ ', async () => {
@@ -61,7 +62,7 @@ describe('notificationBell', () => {
localVue,
i18n: i18nConfig,
});
- const statusViewTitle = notificationBell.find('.unread-badge');
- expect(statusViewTitle.text()).toBe('99+');
+ const statusViewTitle = notificationBell.find('primary-nav-item-stub');
+ expect(statusViewTitle.vm.count).toBe('99+');
});
});
diff --git a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
index a14cc6724..4e60dbe5b 100644
--- a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
+++ b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
@@ -1,15 +1,23 @@
-import AvailabilityStatus from '../AvailabilityStatus';
+import AvailabilityStatus from '../AvailabilityStatus.vue';
import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex';
import VueI18n from 'vue-i18n';
import WootButton from 'dashboard/components/ui/WootButton';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
import i18n from 'dashboard/i18n';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(VueI18n);
localVue.component('woot-button', WootButton);
+localVue.component('woot-dropdown-header', WootDropdownHeader);
+localVue.component('woot-dropdown-menu', WootDropdownMenu);
+localVue.component('woot-dropdown-divider', WootDropdownDivider);
+localVue.component('woot-dropdown-item', WootDropdownItem);
const i18nConfig = new VueI18n({
locale: 'en',
@@ -52,29 +60,11 @@ describe('AvailabilityStatus', () => {
});
});
- it('shows current user status', () => {
- const statusViewTitle = availabilityStatus.find('.status-view--title');
-
- expect(statusViewTitle.text()).toBe('Online');
- });
-
- it('opens the menu when user clicks "change"', async () => {
- expect(availabilityStatus.find('.dropdown-pane').exists()).toBe(false);
-
- await availabilityStatus
- .find('.status-change--change-button')
- .trigger('click');
-
- expect(availabilityStatus.find('.dropdown-pane').exists()).toBe(true);
- });
-
it('dispatches an action when user changes status', async () => {
- await availabilityStatus
- .find('.status-change--change-button')
- .trigger('click');
-
- await availabilityStatus
- .find('.status-change li:last-child button')
+ await availabilityStatus;
+ availabilityStatus
+ .findAll('.status-change--dropdown-button')
+ .at(2)
.trigger('click');
expect(actions.updateAvailability).toBeCalledWith(
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index eb1741bbc..3bc92af83 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -116,6 +116,10 @@ export default {
type: Boolean,
default: false,
},
+ shouldShowStatusAlways: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
@@ -124,6 +128,7 @@ export default {
},
computed: {
showStatusIndicator() {
+ if (this.shouldShowStatusAlways) return true;
return this.status === 'online' || this.status === 'busy';
},
avatarSize() {
@@ -210,5 +215,9 @@ export default {
.user-online-status--busy {
background: $warning-color;
}
+
+ .user-online-status--offline {
+ background: var(--s-500);
+ }
}
diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
index 0be6d91e6..588bbef82 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -20,7 +20,7 @@ export default {
background: var(--g-400);
}
&__offline {
- background: var(--b-600);
+ background: var(--s-500);
}
&__busy {
background: var(--y-700);
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 952b81bbc..8b7b68069 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -51,6 +51,7 @@
@toggle-user-mention="toggleUserMention"
@toggle-canned-menu="toggleCannedMenu"
/>
+
{{ message }}
-
{{ decodeURI(fileName) }}
({ common: common(accountId), @@ -10,4 +13,5 @@ export const getSidebarItems = accountId => ({ reports: reports(accountId), campaigns: campaigns(accountId), settings: settings(accountId), + notifications: notifications(accountId), }); diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json index 47ad6ec7b..7b09e40b8 100644 --- a/app/javascript/dashboard/i18n/locale/en/settings.json +++ b/app/javascript/dashboard/i18n/locale/en/settings.json @@ -103,6 +103,7 @@ "SIDEBAR_ITEMS": { "CHANGE_AVAILABILITY_STATUS": "Change", "CHANGE_ACCOUNTS": "Switch Account", + "CONTACT_SUPPORT": "Contact Support", "SELECTOR_SUBTITLE": "Select an account from the following list", "PROFILE_SETTINGS": "Profile Settings", "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts", @@ -143,6 +144,7 @@ "NOTIFICATIONS": "Notifications", "CANNED_RESPONSES": "Canned Responses", "INTEGRATIONS": "Integrations", + "PROFILE_SETTINGS": "Profile Settings", "ACCOUNT_SETTINGS": "Account Settings", "APPLICATIONS": "Applications", "LABELS": "Labels", @@ -151,6 +153,9 @@ "TEAMS": "Teams", "ALL_CONTACTS": "All Contacts", "TAGGED_WITH": "Tagged with", + "NEW_LABEL": "New label", + "NEW_TEAM": "New team", + "NEW_INBOX": "New inbox", "REPORTS_OVERVIEW": "Overview", "CSAT": "CSAT", "CAMPAIGNS": "Campaigns", @@ -159,7 +164,8 @@ "REPORTS_AGENT": "Agents", "REPORTS_LABEL": "Labels", "REPORTS_INBOX": "Inbox", - "REPORTS_TEAM": "Team" + "REPORTS_TEAM": "Team", + "SET_AVAILABILITY_TITLE": "Set yourself as" }, "CREATE_ACCOUNT": { "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.", diff --git a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js index 18aad271c..448b6b5d6 100644 --- a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js +++ b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js @@ -2,29 +2,24 @@ import { frontendURL } from '../../helper/URLHelper'; const campaigns = accountId => ({ routes: ['settings_account_campaigns', 'one_off'], - menuItems: { - back: { - icon: 'chevron-left', - label: 'HOME', - hasSubMenu: false, - toStateName: 'home', - toState: frontendURL(`accounts/${accountId}/dashboard`), - }, - ongoingCampaigns: { + menuItems: [ + { icon: 'arrow-swap', label: 'ONGOING', + key: 'ongoingCampaigns', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`), toStateName: 'settings_account_campaigns', }, - onOffCampaigns: { + { + key: 'oneOffCampaigns', icon: 'sound-source', label: 'ONE_OFF', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/campaigns/one_off`), toStateName: 'one_off', }, - }, + ], }); export default campaigns; diff --git a/app/javascript/dashboard/i18n/sidebarItems/common.js b/app/javascript/dashboard/i18n/sidebarItems/common.js index 6f52ed54f..03af7dab1 100644 --- a/app/javascript/dashboard/i18n/sidebarItems/common.js +++ b/app/javascript/dashboard/i18n/sidebarItems/common.js @@ -19,44 +19,41 @@ const common = accountId => ({ assignedToMe: { icon: 'chat', label: 'CONVERSATIONS', - hasSubMenu: false, - key: '', + hasSubMenu: true, + key: 'conversations', toState: frontendURL(`accounts/${accountId}/dashboard`), toolTip: 'Conversation from all subscribed inboxes', toStateName: 'home', }, contacts: { + key: 'contacts', icon: 'book-contacts', label: 'CONTACTS', - hasSubMenu: false, + hasSubMenu: true, toState: frontendURL(`accounts/${accountId}/contacts`), toStateName: 'contacts_dashboard', }, - notifications: { - icon: 'alert', - label: 'NOTIFICATIONS', - hasSubMenu: false, - toState: frontendURL(`accounts/${accountId}/notifications`), - toStateName: 'notifications_dashboard', - }, - report: { + reports: { + key: 'reports', icon: 'arrow-trending-lines', label: 'REPORTS', - hasSubMenu: false, + hasSubMenu: true, toState: frontendURL(`accounts/${accountId}/reports`), toStateName: 'settings_account_reports', }, campaigns: { + key: 'campaigns', icon: 'megaphone', label: 'CAMPAIGNS', - hasSubMenu: false, + hasSubMenu: true, toState: frontendURL(`accounts/${accountId}/campaigns`), toStateName: 'settings_account_campaigns', }, settings: { + key: 'settings', icon: 'settings', label: 'SETTINGS', - hasSubMenu: false, + hasSubMenu: true, toState: frontendURL(`accounts/${accountId}/settings`), toStateName: 'settings_home', }, diff --git a/app/javascript/dashboard/i18n/sidebarItems/notifications.js b/app/javascript/dashboard/i18n/sidebarItems/notifications.js new file mode 100644 index 000000000..a78b23f42 --- /dev/null +++ b/app/javascript/dashboard/i18n/sidebarItems/notifications.js @@ -0,0 +1,6 @@ +const notifications = () => ({ + routes: ['notifications_index'], + menuItems: {}, +}); + +export default notifications; diff --git a/app/javascript/dashboard/i18n/sidebarItems/reports.js b/app/javascript/dashboard/i18n/sidebarItems/reports.js index 3b6c94972..4286ff7ba 100644 --- a/app/javascript/dashboard/i18n/sidebarItems/reports.js +++ b/app/javascript/dashboard/i18n/sidebarItems/reports.js @@ -9,57 +9,50 @@ const reports = accountId => ({ 'inbox_reports', 'team_reports', ], - menuItems: { - back: { - icon: 'chevron-left', - label: 'HOME', - hasSubMenu: false, - toStateName: 'home', - toState: frontendURL(`accounts/${accountId}/dashboard`), - }, - reportOverview: { + menuItems: [ + { icon: 'arrow-trending-lines', label: 'REPORTS_OVERVIEW', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/reports/overview`), toStateName: 'settings_account_reports', }, - csatReports: { + { icon: 'emoji', label: 'CSAT', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/reports/csat`), toStateName: 'csat_reports', }, - agentReports: { + { icon: 'people', label: 'REPORTS_AGENT', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/reports/agent`), toStateName: 'agent_reports', }, - labelReports: { + { icon: 'tag', label: 'REPORTS_LABEL', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/reports/label`), toStateName: 'label_reports', }, - inboxReports: { + { icon: 'mail-inbox-all', label: 'REPORTS_INBOX', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/reports/inboxes`), toStateName: 'inbox_reports', }, - teamReports: { + { icon: 'people-team', label: 'REPORTS_TEAM', hasSubMenu: false, toState: frontendURL(`accounts/${accountId}/reports/teams`), toStateName: 'team_reports', }, - }, + ], }); export default reports; diff --git a/app/javascript/dashboard/modules/sidebar/components/Logo.vue b/app/javascript/dashboard/modules/sidebar/components/Logo.vue new file mode 100644 index 000000000..406157fc2 --- /dev/null +++ b/app/javascript/dashboard/modules/sidebar/components/Logo.vue @@ -0,0 +1,46 @@ + +
+
+ ![]()
+
+
+
+
+
diff --git a/app/javascript/dashboard/modules/sidebar/components/Primary.vue b/app/javascript/dashboard/modules/sidebar/components/Primary.vue
new file mode 100644
index 000000000..80b00ab26
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/Primary.vue
@@ -0,0 +1,120 @@
+
+
+
+
+
diff --git a/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue b/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue
new file mode 100644
index 000000000..67765b90e
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue
@@ -0,0 +1,78 @@
+
+