akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'develop' into fix/next-message-bubbles

Browse Source
This commit is contained in:
Sivin Varghese
2025-02-26 14:52:32 +05:30
committed by GitHub
parent eaf7f8d4a7 0ccbe5882c
commit 019e2de124
58 changed files with 1083 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/super_admin/index.scss
+206
View File
@@ -6,3 +6,209 @@
body {
font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
@layer base {
// FIXME: Use a common color file for all packs
// scss-lint:disable PropertySortOrder
:root {
--slate-1: 252 252 253;
--slate-2: 249 249 251;
--slate-3: 240 240 243;
--slate-4: 232 232 236;
--slate-5: 224 225 230;
--slate-6: 217 217 224;
--slate-7: 205 206 214;
--slate-8: 185 187 198;
--slate-9: 139 141 152;
--slate-10: 128 131 141;
--slate-11: 96 100 108;
--slate-12: 28 32 36;
--iris-1: 253 253 255;
--iris-2: 248 248 255;
--iris-3: 240 241 254;
--iris-4: 230 231 255;
--iris-5: 218 220 255;
--iris-6: 203 205 255;
--iris-7: 184 186 248;
--iris-8: 155 158 240;
--iris-9: 91 91 214;
--iris-10: 81 81 205;
--iris-11: 87 83 198;
--iris-12: 39 41 98;
--ruby-1: 255 252 253;
--ruby-2: 255 247 248;
--ruby-3: 254 234 237;
--ruby-4: 255 220 225;
--ruby-5: 255 206 214;
--ruby-6: 248 191 200;
--ruby-7: 239 172 184;
--ruby-8: 229 146 163;
--ruby-9: 229 70 102;
--ruby-10: 220 59 93;
--ruby-11: 202 36 77;
--ruby-12: 100 23 43;
--amber-1: 254 253 251;
--amber-2: 254 251 233;
--amber-3: 255 247 194;
--amber-4: 255 238 156;
--amber-5: 251 229 119;
--amber-6: 243 214 115;
--amber-7: 233 193 98;
--amber-8: 226 163 54;
--amber-9: 255 197 61;
--amber-10: 255 186 24;
--amber-11: 171 100 0;
--amber-12: 79 52 34;
--teal-1: 250 254 253;
--teal-2: 243 251 249;
--teal-3: 224 248 243;
--teal-4: 204 243 234;
--teal-5: 184 234 224;
--teal-6: 161 222 210;
--teal-7: 131 205 193;
--teal-8: 83 185 171;
--teal-9: 18 165 148;
--teal-10: 13 155 138;
--teal-11: 0 133 115;
--teal-12: 13 61 56;
--gray-1: 252 252 252;
--gray-2: 249 249 249;
--gray-3: 240 240 240;
--gray-4: 232 232 232;
--gray-5: 224 224 224;
--gray-6: 217 217 217;
--gray-7: 206 206 206;
--gray-8: 187 187 187;
--gray-9: 141 141 141;
--gray-10: 131 131 131;
--gray-11: 100 100 100;
--gray-12: 32 32 32;
--background-color: 253 253 253;
--text-blue: 8 109 224;
--border-container: 236 236 236;
--border-strong: 235 235 235;
--border-weak: 234 234 234;
--solid-1: 255 255 255;
--solid-2: 255 255 255;
--solid-3: 255 255 255;
--solid-active: 255 255 255;
--solid-amber: 252 232 193;
--solid-blue: 218 236 255;
--solid-iris: 230 231 255;
--alpha-1: 67, 67, 67, 0.06;
--alpha-2: 201, 202, 207, 0.15;
--alpha-3: 255, 255, 255, 0.96;
--black-alpha-1: 0, 0, 0, 0.12;
--black-alpha-2: 0, 0, 0, 0.04;
--border-blue: 39, 129, 246, 0.5;
--white-alpha: 255, 255, 255, 0.8;
}
.dark {
--slate-1: 17 17 19;
--slate-2: 24 25 27;
--slate-3: 33 34 37;
--slate-4: 39 42 45;
--slate-5: 46 49 53;
--slate-6: 54 58 63;
--slate-7: 67 72 78;
--slate-8: 90 97 105;
--slate-9: 105 110 119;
--slate-10: 119 123 132;
--slate-11: 176 180 186;
--slate-12: 237 238 240;
--iris-1: 19 19 30;
--iris-2: 23 22 37;
--iris-3: 32 34 72;
--iris-4: 38 42 101;
--iris-5: 48 51 116;
--iris-6: 61 62 130;
--iris-7: 74 74 149;
--iris-8: 89 88 177;
--iris-9: 91 91 214;
--iris-10: 84 114 228;
--iris-11: 158 177 255;
--iris-12: 224 223 254;
--ruby-1: 25 17 19;
--ruby-2: 30 21 23;
--ruby-3: 58 20 30;
--ruby-4: 78 19 37;
--ruby-5: 94 26 46;
--ruby-6: 111 37 57;
--ruby-7: 136 52 71;
--ruby-8: 179 68 90;
--ruby-9: 229 70 102;
--ruby-10: 236 90 114;
--ruby-11: 255 148 157;
--ruby-12: 254 210 225;
--amber-1: 22 18 12;
--amber-2: 29 24 15;
--amber-3: 48 32 8;
--amber-4: 63 39 0;
--amber-5: 77 48 0;
--amber-6: 92 61 5;
--amber-7: 113 79 25;
--amber-8: 143 100 36;
--amber-9: 255 197 61;
--amber-10: 255 214 10;
--amber-11: 255 202 22;
--amber-12: 255 231 179;
--teal-1: 13 21 20;
--teal-2: 17 28 27;
--teal-3: 13 45 42;
--teal-4: 2 59 55;
--teal-5: 8 72 67;
--teal-6: 20 87 80;
--teal-7: 28 105 97;
--teal-8: 32 126 115;
--teal-9: 18 165 148;
--teal-10: 14 179 158;
--teal-11: 11 216 182;
--teal-12: 173 240 221;
--gray-1: 17 17 17;
--gray-2: 25 25 25;
--gray-3: 34 34 34;
--gray-4: 42 42 42;
--gray-5: 49 49 49;
--gray-6: 58 58 58;
--gray-7: 72 72 72;
--gray-8: 96 96 96;
--gray-9: 110 110 110;
--gray-10: 123 123 123;
--gray-11: 180 180 180;
--gray-12: 238 238 238;
--background-color: 18 18 19;
--border-strong: 52 52 52;
--border-weak: 38 38 42;
--solid-1: 23 23 26;
--solid-2: 29 30 36;
--solid-3: 44 45 54;
--solid-active: 53 57 66;
--solid-amber: 42 37 30;
--solid-blue: 16 49 91;
--solid-iris: 38 42 101;
--text-blue: 126 182 255;
--alpha-1: 36, 36, 36, 0.8;
--alpha-2: 139, 147, 182, 0.15;
--alpha-3: 36, 38, 45, 0.9;
--black-alpha-1: 0, 0, 0, 0.3;
--black-alpha-2: 0, 0, 0, 0.2;
--border-blue: 39, 129, 246, 0.5;
--border-container: 236, 236, 236, 0;
--white-alpha: 255, 255, 255, 0.1;
}
}
app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
+1
View File
@@ -50,6 +50,7 @@ const { t } = useI18n();
</div>
<ComboBox
id="inbox"
use-api-results
:model-value="primaryContactId"
:options="primaryContactList"
:empty-state="
app/javascript/dashboard/components-next/captain/PageLayout.vue
+5 -5
View File
@@ -1,12 +1,12 @@
<script setup>
import { computed } from 'vue';
import { useAccount } from 'dashboard/composables/useAccount';
import { usePolicy } from 'dashboard/composables/usePolicy';
import Button from 'dashboard/components-next/button/Button.vue';
import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
import Policy from 'dashboard/components/policy.vue';
const { featureFlag } = defineProps({
const props = defineProps({
currentPage: {
type: Number,
default: 1,
@@ -50,10 +50,10 @@ const { featureFlag } = defineProps({
});
const emit = defineEmits(['click', 'close', 'update:currentPage']);
const { isCloudFeatureEnabled } = useAccount();
const { shouldShowPaywall } = usePolicy();
const showPaywall = computed(() => {
return !isCloudFeatureEnabled(featureFlag);
return shouldShowPaywall(props.featureFlag);
});
const handleButtonClick = () => {
@@ -97,7 +97,7 @@ const handlePageChange = event => {
</header>
<main class="flex-1 px-6 overflow-y-auto xl:px-0">
<div class="w-full max-w-[960px] mx-auto py-4">
<slot name="controls" />
<slot v-if="!showPaywall" name="controls" />
<div
v-if="isFetching"
class="flex items-center justify-center py-10 text-n-slate-11"
app/javascript/dashboard/components-next/combobox/ComboBox.vue
+14 -28
View File
@@ -13,34 +13,14 @@ const props = defineProps({
validator: value =>
value.every(option => 'value' in option && 'label' in option),
},
placeholder: {
type: String,
default: '',
},
modelValue: {
type: [String, Number],
default: '',
},
disabled: {
type: Boolean,
default: false,
},
searchPlaceholder: {
type: String,
default: '',
},
emptyState: {
type: String,
default: '',
},
message: {
type: String,
default: '',
},
hasError: {
type: Boolean,
default: false,
},
placeholder: { type: String, default: '' },
modelValue: { type: [String, Number], default: '' },
disabled: { type: Boolean, default: false },
searchPlaceholder: { type: String, default: '' },
emptyState: { type: String, default: '' },
message: { type: String, default: '' },
hasError: { type: Boolean, default: false },
useApiResults: { type: Boolean, default: false }, // useApiResults prop to determine if search is handled by API
});
const emit = defineEmits(['update:modelValue', 'search']);
@@ -54,6 +34,12 @@ const dropdownRef = ref(null);
const comboboxRef = ref(null);
const filteredOptions = computed(() => {
// For API search, don't filter options locally
if (props.useApiResults && search.value) {
return props.options;
}
// For local search, filter options based on search term
const searchTerm = search.value.toLowerCase();
return props.options.filter(option =>
option.label.toLowerCase().includes(searchTerm)
app/javascript/dashboard/components-next/sidebar/Sidebar.vue
-5
View File
@@ -240,24 +240,20 @@ const menuItems = computed(() => {
name: 'Captain',
icon: 'i-woot-captain',
label: t('SIDEBAR.CAPTAIN'),
showOnlyOnCloud: true,
children: [
{
name: 'Assistants',
label: t('SIDEBAR.CAPTAIN_ASSISTANTS'),
showOnlyOnCloud: true,
to: accountScopedRoute('captain_assistants_index'),
},
{
name: 'Documents',
label: t('SIDEBAR.CAPTAIN_DOCUMENTS'),
showOnlyOnCloud: true,
to: accountScopedRoute('captain_documents_index'),
},
{
name: 'Responses',
label: t('SIDEBAR.CAPTAIN_RESPONSES'),
showOnlyOnCloud: true,
to: accountScopedRoute('captain_responses_index'),
},
],
@@ -509,7 +505,6 @@ const menuItems = computed(() => {
name: 'Settings Billing',
label: t('SIDEBAR.BILLING'),
icon: 'i-lucide-credit-card',
showOnlyOnCloud: true,
to: accountScopedRoute('billing_settings_index'),
},
],
app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+1 -3
View File
@@ -24,7 +24,6 @@ const {
resolvePath,
resolvePermissions,
resolveFeatureFlag,
isOnChatwootCloud,
isAllowed,
} = useSidebarContext();
@@ -43,7 +42,6 @@ const hasChildren = computed(
const accessibleItems = computed(() => {
if (!hasChildren.value) return [];
return props.children.filter(child => {
if (child.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
// If a item has no link, it means it's just a subgroup header
// So we don't need to check for permissions here, because there's nothing to
// access here anyway
@@ -166,7 +164,7 @@ onMounted(async () => {
:active-child="activeChild"
/>
<SidebarGroupLeaf
v-else
v-else-if="isAllowed(child.to)"
v-show="isExpanded || activeChild?.name === child.name"
v-bind="child"
:active="activeChild?.name === child.name"
app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+1 -10
View File
@@ -9,18 +9,10 @@ const props = defineProps({
to: { type: [String, Object], required: true },
icon: { type: [String, Object], default: null },
active: { type: Boolean, default: false },
showOnlyOnCloud: { type: Boolean, default: false },
component: { type: Function, default: null },
});
const { resolvePermissions, resolveFeatureFlag, isOnChatwootCloud } =
useSidebarContext();
const allowedToShow = computed(() => {
if (props.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
return true;
});
const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
const shouldRenderComponent = computed(() => {
return typeof props.component === 'function' || isVNode(props.component);
@@ -30,7 +22,6 @@ const shouldRenderComponent = computed(() => {
<!-- eslint-disable-next-line vue/no-root-v-if -->
<template>
<Policy
v-if="allowedToShow"
:permissions="resolvePermissions(to)"
:feature-flag="resolveFeatureFlag(to)"
as="li"
app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+13 -1
View File
@@ -13,6 +13,7 @@ import {
DropdownSeparator,
DropdownItem,
} from 'next/dropdown-menu/base';
import CustomBrandPolicyWrapper from '../../components/CustomBrandPolicyWrapper.vue';
const emit = defineEmits(['close', 'openKeyShortcutModal']);
@@ -43,6 +44,7 @@ const menuItems = computed(() => {
return [
{
show: showChatSupport.value,
showOnCustomBrandedInstance: false,
label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
icon: 'i-lucide-life-buoy',
click: () => {
@@ -51,6 +53,7 @@ const menuItems = computed(() => {
},
{
show: true,
showOnCustomBrandedInstance: true,
label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
icon: 'i-lucide-keyboard',
click: () => {
@@ -59,12 +62,14 @@ const menuItems = computed(() => {
},
{
show: true,
showOnCustomBrandedInstance: true,
label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
icon: 'i-lucide-user-pen',
link: { name: 'profile_settings_index' },
},
{
show: true,
showOnCustomBrandedInstance: true,
label: t('SIDEBAR_ITEMS.APPEARANCE'),
icon: 'i-lucide-palette',
click: () => {
@@ -74,6 +79,7 @@ const menuItems = computed(() => {
},
{
show: true,
showOnCustomBrandedInstance: false,
label: t('SIDEBAR_ITEMS.DOCS'),
icon: 'i-lucide-book',
link: 'https://www.chatwoot.com/hc/user-guide/en',
@@ -82,6 +88,7 @@ const menuItems = computed(() => {
},
{
show: currentUser.value.type === 'SuperAdmin',
showOnCustomBrandedInstance: true,
label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
icon: 'i-lucide-castle',
link: '/super_admin',
@@ -90,6 +97,7 @@ const menuItems = computed(() => {
},
{
show: true,
showOnCustomBrandedInstance: true,
label: t('SIDEBAR_ITEMS.LOGOUT'),
icon: 'i-lucide-power',
click: Auth.logout,
@@ -136,7 +144,11 @@ const allowedMenuItems = computed(() => {
<SidebarProfileMenuStatus />
<DropdownSeparator />
<template v-for="item in allowedMenuItems" :key="item.label">
<DropdownItem v-if="item.show" v-bind="item" />
<CustomBrandPolicyWrapper
:show-on-custom-branded-instance="item.showOnCustomBrandedInstance"
>
<DropdownItem v-if="item.show" v-bind="item" />
</CustomBrandPolicyWrapper>
</template>
</DropdownBody>
</DropdownContainer>
app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
+1 -2
View File
@@ -14,12 +14,11 @@ const props = defineProps({
activeChild: { type: Object, default: undefined },
});
const { isAllowed, isOnChatwootCloud } = useSidebarContext();
const { isAllowed } = useSidebarContext();
const scrollableContainer = ref(null);
const accessibleItems = computed(() =>
props.children.filter(child => {
if (child.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
return child.to && isAllowed(child.to);
})
);
app/javascript/dashboard/components-next/sidebar/provider.js
+8 -5
View File
@@ -1,5 +1,4 @@
import { inject, provide } from 'vue';
import { useMapGetter } from 'dashboard/composables/store';
import { usePolicy } from 'dashboard/composables/usePolicy';
import { useRouter } from 'vue-router';
@@ -12,9 +11,8 @@ export function useSidebarContext() {
}
const router = useRouter();
const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
const { checkFeatureAllowed, checkPermissions } = usePolicy();
const { shouldShow } = usePolicy();
const resolvePath = to => {
if (to) return router.resolve(to)?.path || '/';
@@ -31,11 +29,17 @@ export function useSidebarContext() {
return '';
};
const resolveInstallationType = to => {
if (to) return router.resolve(to)?.meta?.installationTypes || [];
return [];
};
const isAllowed = to => {
const permissions = resolvePermissions(to);
const featureFlag = resolveFeatureFlag(to);
const installationType = resolveInstallationType(to);
return checkPermissions(permissions) && checkFeatureAllowed(featureFlag);
return shouldShow(featureFlag, permissions, installationType);
};
return {
@@ -44,7 +48,6 @@ export function useSidebarContext() {
resolvePermissions,
resolveFeatureFlag,
isAllowed,
isOnChatwootCloud,
};
}
app/javascript/dashboard/components/ChatList.vue
+10
View File
@@ -675,6 +675,15 @@ async function markAsUnread(conversationId) {
// Ignore error
}
}
async function markAsRead(conversationId) {
try {
await store.dispatch('markMessagesRead', {
id: conversationId,
});
} catch (error) {
// Ignore error
}
}
async function onAssignTeam(team, conversationId = null) {
try {
await store.dispatch('assignTeam', {
@@ -744,6 +753,7 @@ provide('assignLabels', onAssignLabels);
provide('updateConversationStatus', toggleConversationStatus);
provide('toggleContextMenu', onContextMenuToggle);
provide('markAsUnread', markAsUnread);
provide('markAsRead', markAsRead);
provide('assignPriority', assignPriority);
provide('isConversationSelected', isConversationSelected);
app/javascript/dashboard/components/ConversationItem.vue
+2
View File
@@ -13,6 +13,7 @@ export default {
'updateConversationStatus',
'toggleContextMenu',
'markAsUnread',
'markAsRead',
'assignPriority',
'isConversationSelected',
],
@@ -64,6 +65,7 @@ export default {
@update-conversation-status="updateConversationStatus"
@context-menu-toggle="toggleContextMenu"
@mark-as-unread="markAsUnread"
@mark-as-read="markAsRead"
@assign-priority="assignPriority"
/>
</template>
app/javascript/dashboard/components/policy.vue
+9 -4
View File
@@ -15,17 +15,22 @@ const props = defineProps({
type: String,
default: null,
},
installationTypes: {
type: Array,
default: null,
},
});
const { checkFeatureAllowed, checkPermissions } = usePolicy();
const { shouldShow } = usePolicy();
const isFeatureAllowed = computed(() => checkFeatureAllowed(props.featureFlag));
const hasPermission = computed(() => checkPermissions(props.permissions));
const show = computed(() =>
shouldShow(props.featureFlag, props.permissions, props.installationTypes)
);
</script>
<!-- eslint-disable vue/no-root-v-if -->
<template>
<component :is="as" v-if="isFeatureAllowed && hasPermission">
<component :is="as" v-if="show">
<slot />
</component>
</template>
app/javascript/dashboard/components/widgets/Thumbnail.vue
+2 -1
View File
@@ -156,13 +156,14 @@ export default {
</slot>
<img
v-if="badgeSrc"
class="source-badge"
class="source-badge z-20"
:style="badgeStyle"
:src="`/integrations/channels/badges/${badgeSrc}.png`"
alt="Badge"
/>
<div
v-if="showStatusIndicator"
class="z-20"
:class="`source-badge user-online-status user-online-status--${status}`"
:style="statusStyle"
/>
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+1 -1
View File
@@ -127,7 +127,7 @@ export default {
const uploadRef = ref(false);
const keyboardEvents = {
'Alt+KeyA': {
'$mod+Alt+KeyA': {
action: () => {
// TODO: This is really hacky, we need to replace the file picker component with
// a custom one, where the logic and the component markup is isolated.
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+35 -24
View File
@@ -75,6 +75,7 @@ export default {
'assignLabel',
'assignTeam',
'markAsUnread',
'markAsRead',
'assignPriority',
'updateConversationStatus',
],
@@ -95,9 +96,6 @@ export default {
activeInbox: 'getSelectedInbox',
accountId: 'getCurrentAccountId',
}),
bulkActionCheck() {
return !this.hideThumbnail && !this.hovered && !this.selected;
},
chatMetadata() {
return this.chat.meta || {};
},
@@ -182,10 +180,10 @@ export default {
router.push({ path });
},
onCardHover() {
onThumbnailHover() {
this.hovered = !this.hideThumbnail;
},
onCardLeave() {
onThumbnailLeave() {
this.hovered = false;
},
onSelectConversation(checked) {
@@ -231,6 +229,10 @@ export default {
this.$emit('markAsUnread', this.chat.id);
this.closeContextMenu();
},
async markAsRead() {
this.$emit('markAsRead', this.chat.id);
this.closeContextMenu();
},
async assignPriority(priority) {
this.$emit('assignPriority', priority, this.chat.id);
this.closeContextMenu();
@@ -249,28 +251,36 @@ export default {
'has-inbox-name': showInboxName,
'conversation-selected': selected,
}"
@mouseenter="onCardHover"
@mouseleave="onCardLeave"
@click="onCardClick"
@contextmenu="openContextMenu($event)"
>
<label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
<input
:value="selected"
:checked="selected"
class="checkbox"
type="checkbox"
@change="onSelectConversation($event.target.checked)"
<div
class="relative"
@mouseenter="onThumbnailHover"
@mouseleave="onThumbnailLeave"
>
<label
v-if="hovered || selected"
class="checkbox-wrapper absolute inset-0 z-20 backdrop-blur-[2px]"
@click.stop
>
<input
:value="selected"
:checked="selected"
class="checkbox"
type="checkbox"
@change="onSelectConversation($event.target.checked)"
/>
</label>
<Thumbnail
v-if="!hideThumbnail"
:src="currentContact.thumbnail"
:badge="inboxBadge"
:username="currentContact.name"
:status="currentContact.availability_status"
size="40px"
/>
</label>
<Thumbnail
v-if="bulkActionCheck"
:src="currentContact.thumbnail"
:badge="inboxBadge"
:username="currentContact.name"
:status="currentContact.availability_status"
size="40px"
/>
</div>
<div
class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
>
@@ -351,6 +361,7 @@ export default {
@assign-label="onAssignLabel"
@assign-team="onAssignTeam"
@mark-as-unread="markAsUnread"
@mark-as-read="markAsRead"
@assign-priority="assignPriority"
/>
</ContextMenu>
@@ -400,7 +411,7 @@ export default {
}
.checkbox-wrapper {
@apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4 hover:bg-woot-100 dark:hover:bg-woot-800;
@apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4;
input[type='checkbox'] {
@apply m-0 cursor-pointer;
app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+18 -6
View File
@@ -41,6 +41,7 @@ export default {
'updateConversation',
'assignPriority',
'markAsUnread',
'markAsRead',
'assignAgent',
'assignTeam',
'assignLabel',
@@ -48,6 +49,10 @@ export default {
data() {
return {
STATUS_TYPE: wootConstants.STATUS_TYPE,
readOption: {
label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_READ'),
icon: 'mail',
},
unreadOption: {
label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
icon: 'mail',
@@ -58,16 +63,16 @@ export default {
label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.RESOLVED'),
icon: 'checkmark',
},
{
key: wootConstants.STATUS_TYPE.PENDING,
label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
icon: 'book-clock',
},
{
key: wootConstants.STATUS_TYPE.OPEN,
label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.REOPEN'),
icon: 'arrow-redo',
},
{
key: wootConstants.STATUS_TYPE.PENDING,
label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
icon: 'book-clock',
},
],
snoozeOption: {
key: wootConstants.STATUS_TYPE.SNOOZED,
@@ -203,6 +208,13 @@ export default {
variant="icon"
@click.stop="$emit('markAsUnread')"
/>
<MenuItem
v-else
:option="readOption"
variant="icon"
@click.stop="$emit('markAsRead')"
/>
<hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
<template v-for="option in statusMenuConfig">
<MenuItem
v-if="show(option.key)"
@@ -218,7 +230,7 @@ export default {
variant="icon"
@click.stop="snoozeConversation()"
/>
<hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
<MenuItemWithSubmenu :option="priorityConfig">
<MenuItem
v-for="(option, i) in priorityConfig.options"
app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+35 -76
View File
@@ -1,41 +1,34 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
import { SHORTCUT_KEYS } from './constants';
import { SHORTCUT_KEYS, KEYS } from './constants';
import {
LAYOUT_QWERTZ,
keysToModifyInQWERTZ,
} from 'shared/helpers/KeyboardHelpers';
import Hotkey from 'dashboard/components/base/Hotkey.vue';
defineProps({
show: {
type: Boolean,
default: false,
},
});
defineProps({ show: Boolean });
defineEmits(['close']);
const { t } = useI18n();
const shortcutKeys = SHORTCUT_KEYS;
const currentLayout = ref(null);
const title = item => t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`);
const title = computed(
() => item => t(`KEYBOARD_SHORTCUTS.TITLE.${item.label}`)
);
// Added this function to check if the keySet needs a shift key
// This is used to display the shift key in the modal
// If the current layout is QWERTZ and the keySet contains a key that needs a shift key
// If layout is QWERTZ then we add the Shift+keysToModify to fix an known issue
// https://github.com/chatwoot/chatwoot/issues/9492
const needsShiftKey = keySet => {
return (
const needsShiftKey = computed(
() => keySet =>
currentLayout.value === LAYOUT_QWERTZ &&
keySet.some(key => keysToModifyInQWERTZ.has(key))
);
};
);
onMounted(async () => {
currentLayout.value = await useDetectKeyboardLayout();
@@ -55,80 +48,46 @@ onMounted(async () => {
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
{{ KEYS.WIN }}
</Hotkey>
<Hotkey custom-class="min-h-[28px] min-w-[36px] key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
{{ KEYS.SLASH }}
</Hotkey>
</div>
</div>
</div>
<div class="grid grid-cols-2 px-8 pt-0 pb-8 gap-x-5 gap-y-3">
<div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<div class="flex gap-2">
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</Hotkey>
<Hotkey custom-class="min-h-[28px] w-9 key"> {{ 'J' }} </Hotkey>
<span
class="flex items-center text-sm font-semibold text-slate-800 dark:text-slate-100"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
</span>
</div>
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</Hotkey>
<Hotkey custom-class="w-9 key"> {{ 'K' }} </Hotkey>
</div>
</div>
<div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
</Hotkey>
<Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</Hotkey>
<Hotkey custom-class="w-9 key"> {{ 'E' }} </Hotkey>
</div>
</div>
<div
v-for="shortcutKey in shortcutKeys"
:key="shortcutKey.id"
v-for="shortcut in SHORTCUT_KEYS"
:key="shortcut.id"
class="flex justify-between items-center min-w-[25rem]"
>
<h5 class="text-sm text-slate-800 min-w-[36px] dark:text-slate-100">
{{ title(shortcutKey) }}
{{ title(shortcut) }}
</h5>
<div class="flex items-center gap-2 mb-1 ml-2">
<Hotkey
v-if="needsShiftKey(shortcutKey.keySet)"
custom-class="min-h-[28px] min-w-[36px] key"
>
{{ 'Shift' }}
</Hotkey>
<Hotkey
:class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
custom-class="min-h-[28px] normal-case key"
>
{{ shortcutKey.firstKey }}
</Hotkey>
<Hotkey
:class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
custom-class="min-h-[28px] min-w-[36px] key"
>
{{ shortcutKey.secondKey }}
</Hotkey>
<template v-if="needsShiftKey(shortcut.keySet)">
<Hotkey custom-class="min-h-[28px] min-w-[36px] key">
{{ KEYS.SHIFT }}
</Hotkey>
</template>
<template v-for="(key, index) in shortcut.displayKeys" :key="index">
<template v-if="key !== KEYS.SLASH">
<Hotkey
custom-class="min-h-[28px] min-w-[36px] key normal-case"
>
{{ key }}
</Hotkey>
</template>
<span
v-else
class="flex items-center text-sm font-semibold text-slate-800 dark:text-slate-100"
>
{{ key }}
</span>
</template>
</div>
</div>
</div>
app/javascript/dashboard/components/widgets/modal/constants.js
+55 -46
View File
@@ -1,86 +1,95 @@
export const KEYS = {
ALT: 'Alt / ⌥',
WIN: 'Win / ⌘',
SHIFT: 'Shift',
SLASH: '/',
UP: 'Up',
DOWN: 'Down',
};
export const SHORTCUT_KEYS = [
{
id: 1,
label: 'NAVIGATE_DROPDOWN',
firstKey: 'Up',
secondKey: 'Down',
keySet: ['ArrowUp', 'ArrowDown'],
label: 'OPEN_CONVERSATION',
displayKeys: [KEYS.ALT, 'J', KEYS.SLASH, KEYS.ALT, 'K'],
keySet: ['Alt+KeyJ', 'Alt+KeyK'],
},
{
id: 2,
label: 'RESOLVE_CONVERSATION',
firstKey: 'Alt / ⌥',
secondKey: 'E',
keySet: ['Alt+KeyE'],
label: 'RESOLVE_AND_NEXT',
displayKeys: [KEYS.WIN, KEYS.ALT, 'E'],
keySet: ['$mod+Alt+KeyE'],
},
{
id: 3,
label: 'GO_TO_CONVERSATION_DASHBOARD',
firstKey: 'Alt / ⌥',
secondKey: 'C',
keySet: ['Alt+KeyC'],
label: 'NAVIGATE_DROPDOWN',
displayKeys: [KEYS.UP, KEYS.DOWN],
keySet: ['ArrowUp', 'ArrowDown'],
},
{
id: 4,
label: 'ADD_ATTACHMENT',
firstKey: 'Alt / ⌥',
secondKey: 'A',
keySet: ['Alt+KeyA'],
label: 'RESOLVE_CONVERSATION',
displayKeys: [KEYS.ALT, 'E'],
keySet: ['Alt+KeyE'],
},
{
id: 5,
label: 'GO_TO_CONTACTS_DASHBOARD',
firstKey: 'Alt / ⌥',
secondKey: 'V',
keySet: ['Alt+KeyV'],
label: 'GO_TO_CONVERSATION_DASHBOARD',
displayKeys: [KEYS.ALT, 'C'],
keySet: ['Alt+KeyC'],
},
{
id: 6,
label: 'TOGGLE_SIDEBAR',
firstKey: 'Alt / ⌥',
secondKey: 'O',
keySet: ['Alt+KeyO'],
label: 'ADD_ATTACHMENT',
displayKeys: [KEYS.WIN, KEYS.ALT, 'A'],
keySet: ['$mod+Alt+KeyA'],
},
{
id: 7,
label: 'GO_TO_REPORTS_SIDEBAR',
firstKey: 'Alt / ⌥',
secondKey: 'R',
keySet: ['Alt+KeyR'],
label: 'GO_TO_CONTACTS_DASHBOARD',
displayKeys: [KEYS.ALT, 'V'],
keySet: ['Alt+KeyV'],
},
{
id: 8,
label: 'MOVE_TO_NEXT_TAB',
firstKey: 'Alt / ⌥',
secondKey: 'N',
keySet: ['Alt+KeyN'],
label: 'TOGGLE_SIDEBAR',
displayKeys: [KEYS.ALT, 'O'],
keySet: ['Alt+KeyO'],
},
{
id: 9,
label: 'GO_TO_SETTINGS',
firstKey: 'Alt / ⌥',
secondKey: 'S',
keySet: ['Alt+KeyS'],
label: 'GO_TO_REPORTS_SIDEBAR',
displayKeys: [KEYS.ALT, 'R'],
keySet: ['Alt+KeyR'],
},
{
id: 10,
label: 'MOVE_TO_NEXT_TAB',
displayKeys: [KEYS.ALT, 'N'],
keySet: ['Alt+KeyN'],
},
{
id: 11,
label: 'SWITCH_TO_PRIVATE_NOTE',
firstKey: 'Alt / ⌥',
secondKey: 'P',
keySet: ['Alt+KeyP'],
label: 'GO_TO_SETTINGS',
displayKeys: [KEYS.ALT, 'S'],
keySet: ['Alt+KeyS'],
},
{
id: 12,
label: 'SWITCH_TO_REPLY',
firstKey: 'Alt / ⌥',
secondKey: 'L',
keySet: ['Alt+KeyL'],
label: 'SWITCH_TO_PRIVATE_NOTE',
displayKeys: [KEYS.ALT, 'P'],
keySet: ['Alt+KeyP'],
},
{
id: 13,
label: 'SWITCH_TO_REPLY',
displayKeys: [KEYS.ALT, 'L'],
keySet: ['Alt+KeyL'],
},
{
id: 14,
label: 'TOGGLE_SNOOZE_DROPDOWN',
firstKey: 'Alt / ⌥',
secondKey: 'M',
displayKeys: [KEYS.ALT, 'M'],
keySet: ['Alt+KeyM'],
},
];
app/javascript/dashboard/composables/usePolicy.js
+107 -2
View File
@@ -1,20 +1,31 @@
import { computed, unref } from 'vue';
import { useMapGetter } from 'dashboard/composables/store';
import { useAccount } from 'dashboard/composables/useAccount';
import { useConfig } from 'dashboard/composables/useConfig';
import {
getUserPermissions,
hasPermissions,
} from 'dashboard/helper/permissionsHelper';
import { PREMIUM_FEATURES } from 'dashboard/featureFlags';
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
export function usePolicy() {
const user = useMapGetter('getCurrentUser');
const isFeatureEnabled = useMapGetter('accounts/isFeatureEnabledonAccount');
const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
const isACustomBrandedInstance = useMapGetter(
'globalConfig/isACustomBrandedInstance'
);
const { isEnterprise, enterprisePlanName } = useConfig();
const { accountId } = useAccount();
const getUserPermissionsForAccount = () => {
return getUserPermissions(user.value, accountId.value);
};
const checkFeatureAllowed = featureFlag => {
const isFeatureFlagEnabled = featureFlag => {
if (!featureFlag) return true;
return isFeatureEnabled.value(accountId.value, featureFlag);
};
@@ -25,5 +36,99 @@ export function usePolicy() {
return hasPermissions(requiredPermissions, userPermissions);
};
return { checkFeatureAllowed, checkPermissions };
const checkInstallationType = config => {
if (Array.isArray(config) && config.length > 0) {
const installationCheck = {
[INSTALLATION_TYPES.ENTERPRISE]: isEnterprise,
[INSTALLATION_TYPES.CLOUD]: isOnChatwootCloud.value,
[INSTALLATION_TYPES.COMMUNITY]: true,
};
return config.some(type => installationCheck[type]);
}
return true;
};
const isPremiumFeature = featureFlag => {
if (!featureFlag) return true;
return PREMIUM_FEATURES.includes(featureFlag);
};
const hasPremiumEnterprise = computed(() => {
if (isEnterprise) return enterprisePlanName !== 'community';
return true;
});
const shouldShow = (featureFlag, permissions, installationTypes) => {
const flag = unref(featureFlag);
const perms = unref(permissions);
const installation = unref(installationTypes);
// if the user does not have permissions or installation type is not supported
// return false;
// This supersedes everything
if (!checkPermissions(perms)) return false;
if (!checkInstallationType(installation)) return false;
if (isACustomBrandedInstance.value) {
// if this is a custom branded instance, we just use the feature flag as a reference
return isFeatureFlagEnabled(flag);
}
// if on cloud, we should if the feature is allowed
// or if the feature is a premium one like SLA to show a paywall
// the paywall should be managed by the individual component
if (isOnChatwootCloud.value) {
return isFeatureFlagEnabled(flag) || isPremiumFeature(flag);
}
if (isEnterprise) {
// in enterprise, if the feature is premium but they don't have an enterprise plan
// we should it anyway this is to show upsells on enterprise regardless of the feature flag
// Feature flag is only honored if they have a premium plan
//
// In case they have a premium plan, the check on feature flag alone is enough
// because the second condition will always be false
// That means once subscribed, the feature can be disabled by the admin
//
// the paywall should be managed by the individual component
return (
isFeatureFlagEnabled(flag) ||
(isPremiumFeature(flag) && !hasPremiumEnterprise.value)
);
}
// default to true
return true;
};
const shouldShowPaywall = featureFlag => {
const flag = unref(featureFlag);
if (!flag) return false;
if (isACustomBrandedInstance.value) {
// custom branded instances never show paywall
return false;
}
if (isPremiumFeature(flag)) {
if (isOnChatwootCloud.value) {
return !isFeatureFlagEnabled(flag);
}
if (isEnterprise) {
return !hasPremiumEnterprise.value;
}
}
return false;
};
return {
checkPermissions,
shouldShowPaywall,
shouldShow,
};
}
app/javascript/dashboard/constants/installationTypes.js
+5
View File
@@ -0,0 +1,5 @@
export const INSTALLATION_TYPES = {
CLOUD: 'cloud',
ENTERPRISE: 'enterprise',
COMMUNITY: 'community',
};
app/javascript/dashboard/featureFlags.js
+8
View File
@@ -36,3 +36,11 @@ export const FEATURE_FLAGS = {
REPORT_V4: 'report_v4',
CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
};
export const PREMIUM_FEATURES = [
FEATURE_FLAGS.SLA,
FEATURE_FLAGS.CAPTAIN,
FEATURE_FLAGS.CUSTOM_ROLES,
FEATURE_FLAGS.AUDIT_LOGS,
FEATURE_FLAGS.HELP_CENTER,
];
app/javascript/dashboard/i18n/locale/en/conversation.json
+1
View File
@@ -117,6 +117,7 @@
"PENDING": "Mark as pending",
"RESOLVED": "Mark as resolved",
"MARK_AS_UNREAD": "Mark as unread",
"MARK_AS_READ": "Mark as read",
"REOPEN": "Reopen conversation",
"SNOOZE": {
"TITLE": "Snooze",
app/javascript/dashboard/i18n/locale/en/settings.json
-5
View File
@@ -389,11 +389,6 @@
"SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
"SWITCH_TO_REPLY": "Switch to Reply",
"TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
},
"KEYS": {
"WINDOWS_KEY_AND_COMMAND_KEY": "Win / ⌘",
"ALT_OR_OPTION_KEY": "Alt / ⌥",
"FORWARD_SLASH_KEY": "/"
}
}
}
app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js
+10 -12
View File
@@ -3,6 +3,12 @@ import { frontendURL } from 'dashboard/helper/URLHelper.js';
import CampaignsPageRouteView from './pages/CampaignsPageRouteView.vue';
import LiveChatCampaignsPage from './pages/LiveChatCampaignsPage.vue';
import SMSCampaignsPage from './pages/SMSCampaignsPage.vue';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
const meta = {
featureFlag: FEATURE_FLAGS.CAMPAIGNS,
permissions: ['administrator'],
};
const campaignsRoutes = {
routes: [
@@ -19,9 +25,7 @@ const campaignsRoutes = {
{
path: 'ongoing',
name: 'campaigns_ongoing_index',
meta: {
permissions: ['administrator'],
},
meta,
redirect: to => {
return { name: 'campaigns_livechat_index', params: to.params };
},
@@ -29,9 +33,7 @@ const campaignsRoutes = {
{
path: 'one_off',
name: 'campaigns_one_off_index',
meta: {
permissions: ['administrator'],
},
meta,
redirect: to => {
return { name: 'campaigns_sms_index', params: to.params };
},
@@ -39,17 +41,13 @@ const campaignsRoutes = {
{
path: 'live_chat',
name: 'campaigns_livechat_index',
meta: {
permissions: ['administrator'],
},
meta,
component: LiveChatCampaignsPage,
},
{
path: 'sms',
name: 'campaigns_sms_index',
meta: {
permissions: ['administrator'],
},
meta,
component: SMSCampaignsPage,
},
],
app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
+1 -1
View File
@@ -78,8 +78,8 @@ onMounted(() => store.dispatch('captainAssistants/get'));
:button-policy="['administrator']"
:show-pagination-footer="false"
:is-fetching="isFetching"
:feature-flag="FEATURE_FLAGS.CAPTAIN"
:is-empty="!assistants.length"
:feature-flag="FEATURE_FLAGS.CAPTAIN"
@click="handleCreate"
>
<template #emptyState>
app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
+1 -1
View File
@@ -72,8 +72,8 @@ onMounted(() =>
:button-policy="['administrator']"
:is-fetching="isFetchingAssistant || isFetching"
:is-empty="!captainInboxes.length"
:feature-flag="FEATURE_FLAGS.CAPTAIN"
:show-pagination-footer="false"
:feature-flag="FEATURE_FLAGS.CAPTAIN"
@click="handleCreate"
>
<template v-if="!isFetchingAssistant" #headerTitle>
app/javascript/dashboard/routes/dashboard/captain/captain.routes.js
+22 -1
View File
@@ -1,4 +1,5 @@
// import { FEATURE_FLAGS } from 'dashboard/featureFlags';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
import { frontendURL } from '../../../helper/URLHelper';
import AssistantIndex from './assistants/Index.vue';
import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
@@ -12,6 +13,11 @@ export const routes = [
name: 'captain_assistants_index',
meta: {
permissions: ['administrator', 'agent'],
featureFlag: FEATURE_FLAGS.CAPTAIN,
installationTypes: [
INSTALLATION_TYPES.CLOUD,
INSTALLATION_TYPES.ENTERPRISE,
],
},
},
{
@@ -22,6 +28,11 @@ export const routes = [
name: 'captain_assistants_inboxes_index',
meta: {
permissions: ['administrator', 'agent'],
featureFlag: FEATURE_FLAGS.CAPTAIN,
installationTypes: [
INSTALLATION_TYPES.CLOUD,
INSTALLATION_TYPES.ENTERPRISE,
],
},
},
{
@@ -30,6 +41,11 @@ export const routes = [
name: 'captain_documents_index',
meta: {
permissions: ['administrator', 'agent'],
featureFlag: FEATURE_FLAGS.CAPTAIN,
installationTypes: [
INSTALLATION_TYPES.CLOUD,
INSTALLATION_TYPES.ENTERPRISE,
],
},
},
{
@@ -38,6 +54,11 @@ export const routes = [
name: 'captain_responses_index',
meta: {
permissions: ['administrator', 'agent'],
featureFlag: FEATURE_FLAGS.CAPTAIN,
installationTypes: [
INSTALLATION_TYPES.CLOUD,
INSTALLATION_TYPES.ENTERPRISE,
],
},
},
];
app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+1 -1
View File
@@ -163,8 +163,8 @@ onMounted(() => {
:button-label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
:is-fetching="isFetching"
:is-empty="!responses.length"
:feature-flag="FEATURE_FLAGS.CAPTAIN"
:show-pagination-footer="!isFetching && !!responses.length"
:feature-flag="FEATURE_FLAGS.CAPTAIN"
@update:current-page="onPageChange"
@click="handleCreate"
>
app/javascript/dashboard/routes/dashboard/contacts/routes.js
+2
View File
@@ -1,8 +1,10 @@
import { frontendURL } from '../../../helper/URLHelper';
import ContactsIndex from './pages/ContactsIndex.vue';
import ContactManageView from './pages/ContactManageView.vue';
import { FEATURE_FLAGS } from '../../../featureFlags';
const commonMeta = {
featureFlag: FEATURE_FLAGS.CRM,
permissions: ['administrator', 'agent', 'contact_manage'],
};
app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+15 -24
View File
@@ -1,3 +1,4 @@
import { FEATURE_FLAGS } from '../../../featureFlags';
import { getPortalRoute } from './helpers/routeHelper';
import HelpCenterPageRouteView from './pages/HelpCenterPageRouteView.vue';
@@ -21,21 +22,21 @@ const PortalsLocalesIndexPage = () =>
const PortalsSettingsIndexPage = () =>
import('./pages/PortalsSettingsIndexPage.vue');
const meta = {
featureFlag: FEATURE_FLAGS.HELP_CENTER,
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
};
const portalRoutes = [
{
path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/:tab?'),
name: 'portals_articles_index',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsArticlesIndexPage,
},
{
path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/new'),
name: 'portals_articles_new',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsArticlesNewPage,
},
{
@@ -43,18 +44,14 @@ const portalRoutes = [
':portalSlug/:locale/:categorySlug?/articles/:tab?/edit/:articleSlug'
),
name: 'portals_articles_edit',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsArticlesEditPage,
},
{
path: getPortalRoute(':portalSlug/:locale/categories'),
name: 'portals_categories_index',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsCategoriesIndexPage,
},
{
@@ -62,9 +59,7 @@ const portalRoutes = [
':portalSlug/:locale/categories/:categorySlug/articles'
),
name: 'portals_categories_articles_index',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsArticlesIndexPage,
},
{
@@ -72,31 +67,26 @@ const portalRoutes = [
':portalSlug/:locale/categories/:categorySlug/articles/:articleSlug'
),
name: 'portals_categories_articles_edit',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsArticlesEditPage,
},
{
path: getPortalRoute(':portalSlug/locales'),
name: 'portals_locales_index',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsLocalesIndexPage,
},
{
path: getPortalRoute(':portalSlug/settings'),
name: 'portals_settings_index',
meta: {
permissions: ['administrator', 'agent', 'knowledge_base_manage'],
},
meta,
component: PortalsSettingsIndexPage,
},
{
path: getPortalRoute('new'),
name: 'portals_new',
meta: {
featureFlag: FEATURE_FLAGS.HELP_CENTER,
permissions: ['administrator', 'knowledge_base_manage'],
},
component: PortalsNew,
@@ -105,6 +95,7 @@ const portalRoutes = [
path: getPortalRoute(':navigationPath'),
name: 'portals_index',
meta: {
featureFlag: FEATURE_FLAGS.HELP_CENTER,
permissions: ['administrator', 'knowledge_base_manage'],
},
component: PortalsIndex,
app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
+5
View File
@@ -1,4 +1,5 @@
import { FEATURE_FLAGS } from '../../../../featureFlags';
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
import { frontendURL } from '../../../../helper/URLHelper';
import SettingsWrapper from '../SettingsWrapper.vue';
@@ -21,6 +22,10 @@ export default {
name: 'auditlogs_list',
meta: {
featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
installationTypes: [
INSTALLATION_TYPES.CLOUD,
INSTALLATION_TYPES.ENTERPRISE,
],
permissions: ['administrator'],
},
component: AuditLogsHome,
app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
+3
View File
@@ -1,4 +1,5 @@
import { frontendURL } from '../../../../helper/URLHelper';
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
import SettingsWrapper from '../SettingsWrapper.vue';
import Index from './Index.vue';
@@ -8,6 +9,7 @@ export default {
path: frontendURL('accounts/:accountId/settings/billing'),
meta: {
permissions: ['administrator'],
installationTypes: [INSTALLATION_TYPES.CLOUD],
},
component: SettingsWrapper,
props: {
@@ -21,6 +23,7 @@ export default {
name: 'billing_settings_index',
component: Index,
meta: {
installationTypes: [INSTALLATION_TYPES.CLOUD],
permissions: ['administrator'],
},
},
app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
+5
View File
@@ -1,4 +1,5 @@
import { FEATURE_FLAGS } from '../../../../featureFlags';
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
import { frontendURL } from 'dashboard/helper/URLHelper';
import SettingsWrapper from '../SettingsWrapper.vue';
@@ -19,6 +20,10 @@ export default {
name: 'custom_roles_list',
meta: {
featureFlag: FEATURE_FLAGS.CUSTOM_ROLES,
installationTypes: [
INSTALLATION_TYPES.CLOUD,
INSTALLATION_TYPES.ENTERPRISE,
],
permissions: ['administrator'],
},
component: CustomRolesHome,
app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+13 -18
View File
@@ -112,33 +112,28 @@ export default {
};
},
getChartOptions(metric) {
const baseOptions = METRIC_CHART[metric.KEY].scales;
const options = {
scales: METRIC_CHART[metric.KEY].scales,
};
// If not an average metric type, return base options early
if (!this.isAverageMetricType(metric.KEY)) {
return baseOptions;
}
// Only create tooltip config for time-based metrics
return {
...baseOptions,
plugins: {
// Only add tooltip configuration for time-based metrics
if (this.isAverageMetricType(metric.KEY)) {
options.plugins = {
tooltip: {
callbacks: {
label: ({ raw, dataIndex }) => {
const value = raw || 0;
const count =
this.accountReport.data[metric.KEY][dataIndex]?.count || 0;
return this.$t(metric.TOOLTIP_TEXT, {
metricValue: formatTime(value),
conversationCount: count,
metricValue: formatTime(raw || 0),
conversationCount:
this.accountReport.data[metric.KEY][dataIndex]?.count || 0,
});
},
},
},
},
};
};
}
return options;
},
},
};
app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+14 -28
View File
@@ -22,37 +22,34 @@ import BotReports from './BotReports.vue';
import LiveReports from './LiveReports.vue';
import SLAReports from './SLAReports.vue';
const meta = {
featureFlag: FEATURE_FLAGS.REPORTS,
permissions: ['administrator', 'report_manage'],
};
const oldReportRoutes = [
{
path: 'agent',
name: 'agent_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: AgentReports,
},
{
path: 'inboxes',
name: 'inbox_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: InboxReports,
},
{
path: 'label',
name: 'label_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: LabelReports,
},
{
path: 'teams',
name: 'team_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: TeamReports,
},
];
@@ -124,17 +121,13 @@ export default {
{
path: 'overview',
name: 'account_overview_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: LiveReports,
},
{
path: 'conversation',
name: 'conversation_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: Index,
},
...oldReportRoutes,
@@ -142,26 +135,19 @@ export default {
{
path: 'sla',
name: 'sla_reports',
meta: {
permissions: ['administrator', 'report_manage'],
featureFlag: FEATURE_FLAGS.SLA,
},
meta,
component: SLAReports,
},
{
path: 'csat',
name: 'csat_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: CsatResponses,
},
{
path: 'bot',
name: 'bot_reports',
meta: {
permissions: ['administrator', 'report_manage'],
},
meta,
component: BotReports,
},
],
app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+9 -8
View File
@@ -1,9 +1,16 @@
import { FEATURE_FLAGS } from '../../../../featureFlags';
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
import { frontendURL } from '../../../../helper/URLHelper';
import SettingsWrapper from '../SettingsWrapper.vue';
import Index from './Index.vue';
const meta = {
featureFlag: FEATURE_FLAGS.SLA,
permissions: ['administrator'],
installationTypes: [INSTALLATION_TYPES.CLOUD, INSTALLATION_TYPES.ENTERPRISE],
};
export default {
routes: [
{
@@ -14,10 +21,7 @@ export default {
{
path: '',
name: 'sla_wrapper',
meta: {
featureFlag: FEATURE_FLAGS.SLA,
permissions: ['administrator'],
},
meta,
redirect: to => {
return { name: 'sla_list', params: to.params };
},
@@ -25,10 +29,7 @@ export default {
{
path: 'list',
name: 'sla_list',
meta: {
featureFlag: FEATURE_FLAGS.SLA,
permissions: ['administrator'],
},
meta,
component: Index,
},
],