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

Merge branch 'develop' into chore/vuelidate-v2-migration

Browse Source
This commit is contained in:
Muhsin Keloth
2024-07-10 12:31:04 +05:30
committed by GitHub
parent e0ddeb4ee6 9498d1f003
commit 28d9c2615d
108 changed files with 2970 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/ChatList.vue
-58
View File
@@ -111,15 +111,6 @@
@updateFolder="onUpdateSavedFilter"
/>
</woot-modal>
<woot-modal
:show.sync="showCustomSnoozeModal"
:on-close="hideCustomSnoozeModal"
>
<custom-snooze-modal
@close="hideCustomSnoozeModal"
@choose-time="chooseSnoozeTime"
/>
</woot-modal>
</div>
</template>
@@ -152,10 +143,6 @@ import {
isOnUnattendedView,
} from '../store/modules/conversations/helpers/actionHelpers';
import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
import { getUnixTime } from 'date-fns';
import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
import IntersectionObserver from './IntersectionObserver.vue';
export default {
@@ -170,7 +157,6 @@ export default {
ConversationBulkActions,
IntersectionObserver,
VirtualList,
CustomSnoozeModal,
},
mixins: [
timeMixin,
@@ -247,7 +233,6 @@ export default {
root: this.$refs.conversationList,
rootMargin: '100px 0px 100px 0px',
},
showCustomSnoozeModal: false,
itemComponent: ConversationItem,
// virtualListExtraProps is to pass the props to the conversationItem component.
@@ -283,7 +268,6 @@ export default {
campaigns: 'campaigns/getAllCampaigns',
labels: 'labels/getLabels',
selectedConversations: 'bulkActions/getSelectedConversationIds',
contextMenuChatId: 'getContextMenuChatId',
}),
hasAppliedFilters() {
return this.appliedFilters.length !== 0;
@@ -517,11 +501,6 @@ export default {
this.$emitter.on('fetch_conversation_stats', () => {
this.$store.dispatch('conversationStats/get', this.conversationFilters);
});
this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
},
beforeDestroy() {
this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
},
methods: {
updateVirtualListProps(key, value) {
@@ -999,43 +978,6 @@ export default {
onContextMenuToggle(state) {
this.isContextMenuOpen = state;
},
onCmdSnoozeConversation(snoozeType) {
if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
this.showCustomSnoozeModal = true;
} else {
this.toggleStatus(
wootConstants.STATUS_TYPE.SNOOZED,
findSnoozeTime(snoozeType) || null
);
}
},
chooseSnoozeTime(customSnoozeTime) {
this.showCustomSnoozeModal = false;
if (customSnoozeTime) {
this.toggleStatus(
wootConstants.STATUS_TYPE.SNOOZED,
getUnixTime(customSnoozeTime)
);
}
},
toggleStatus(status, snoozedUntil) {
this.$store
.dispatch('toggleStatus', {
conversationId: this.currentChat?.id || this.contextMenuChatId,
status,
snoozedUntil,
})
.then(() => {
this.$store.dispatch('setContextMenuChatId', null);
this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
});
},
hideCustomSnoozeModal() {
// if we select custom snooze and then the custom snooze modal is open
// Then if the custom snooze modal is closed and set the context menu chat id to null
this.$store.dispatch('setContextMenuChatId', null);
this.showCustomSnoozeModal = false;
},
},
};
</script>
app/javascript/dashboard/components/layout/Sidebar.vue
+8 -3
View File
@@ -20,7 +20,7 @@
:teams="teams"
:custom-views="customViews"
:menu-config="activeSecondaryMenu"
:current-role="currentRole"
:current-user="currentUser"
:is-on-chatwoot-cloud="isOnChatwootCloud"
@add-label="showAddLabelPopup"
@toggle-accounts="toggleAccountModal"
@@ -37,7 +37,8 @@ import alertMixin from 'shared/mixins/alertMixin';
import PrimarySidebar from './sidebarComponents/Primary.vue';
import SecondarySidebar from './sidebarComponents/Secondary.vue';
import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
import router from '../../routes';
import router, { routesWithPermissions } from '../../routes';
import { hasPermissions } from '../../helper/permissionsHelper';
export default {
components: {
@@ -98,9 +99,13 @@ export default {
return getSidebarItems(this.accountId);
},
primaryMenuItems() {
const userPermissions = this.currentUser.permissions;
const menuItems = this.sideMenuConfig.primaryMenu;
return menuItems.filter(menuItem => {
const isAvailableForTheUser = menuItem.roles.includes(this.currentRole);
const isAvailableForTheUser = hasPermissions(
routesWithPermissions[menuItem.toStateName],
userPermissions
);
if (!isAvailableForTheUser) {
return false;
app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+1 -8
View File
@@ -9,7 +9,6 @@ const primaryMenuItems = accountId => [
featureFlag: FEATURE_FLAGS.INBOX_VIEW,
toState: frontendURL(`accounts/${accountId}/inbox-view`),
toStateName: 'inbox_view',
roles: ['administrator', 'agent'],
},
{
icon: 'chat',
@@ -17,7 +16,6 @@ const primaryMenuItems = accountId => [
label: 'CONVERSATIONS',
toState: frontendURL(`accounts/${accountId}/dashboard`),
toStateName: 'home',
roles: ['administrator', 'agent'],
},
{
icon: 'book-contacts',
@@ -26,7 +24,6 @@ const primaryMenuItems = accountId => [
featureFlag: FEATURE_FLAGS.CRM,
toState: frontendURL(`accounts/${accountId}/contacts`),
toStateName: 'contacts_dashboard',
roles: ['administrator', 'agent'],
},
{
icon: 'arrow-trending-lines',
@@ -34,8 +31,7 @@ const primaryMenuItems = accountId => [
label: 'REPORTS',
featureFlag: FEATURE_FLAGS.REPORTS,
toState: frontendURL(`accounts/${accountId}/reports`),
toStateName: 'settings_account_reports',
roles: ['administrator'],
toStateName: 'account_overview_reports',
},
{
icon: 'megaphone',
@@ -44,7 +40,6 @@ const primaryMenuItems = accountId => [
featureFlag: FEATURE_FLAGS.CAMPAIGNS,
toState: frontendURL(`accounts/${accountId}/campaigns`),
toStateName: 'ongoing_campaigns',
roles: ['administrator'],
},
{
icon: 'library',
@@ -54,7 +49,6 @@ const primaryMenuItems = accountId => [
alwaysVisibleOnChatwootInstances: true,
toState: frontendURL(`accounts/${accountId}/portals`),
toStateName: 'default_portal_articles',
roles: ['administrator'],
},
{
icon: 'settings',
@@ -62,7 +56,6 @@ const primaryMenuItems = accountId => [
label: 'SETTINGS',
toState: frontendURL(`accounts/${accountId}/settings`),
toStateName: 'settings_home',
roles: ['administrator', 'agent'],
},
];
app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+45 -1
View File
@@ -24,7 +24,6 @@ const settings = accountId => ({
'settings_inbox_list',
'settings_inbox_new',
'settings_inbox_show',
'settings_inbox',
'settings_inboxes_add_agents',
'settings_inboxes_page_channel',
'settings_integrations_dashboard_apps',
@@ -46,6 +45,9 @@ const settings = accountId => ({
icon: 'briefcase',
label: 'ACCOUNT_SETTINGS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/general`),
toStateName: 'general_settings_index',
},
@@ -53,6 +55,9 @@ const settings = accountId => ({
icon: 'people',
label: 'AGENTS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
toStateName: 'agent_list',
featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
@@ -61,6 +66,9 @@ const settings = accountId => ({
icon: 'people-team',
label: 'TEAMS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
toStateName: 'settings_teams_list',
featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
@@ -69,6 +77,9 @@ const settings = accountId => ({
icon: 'mail-inbox-all',
label: 'INBOXES',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
toStateName: 'settings_inbox_list',
featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
@@ -77,6 +88,9 @@ const settings = accountId => ({
icon: 'tag',
label: 'LABELS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
toStateName: 'labels_list',
featureFlag: FEATURE_FLAGS.LABELS,
@@ -85,6 +99,9 @@ const settings = accountId => ({
icon: 'code',
label: 'CUSTOM_ATTRIBUTES',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(
`accounts/${accountId}/settings/custom-attributes/list`
),
@@ -95,6 +112,9 @@ const settings = accountId => ({
icon: 'automation',
label: 'AUTOMATION',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
toStateName: 'automation_list',
featureFlag: FEATURE_FLAGS.AUTOMATIONS,
@@ -103,6 +123,9 @@ const settings = accountId => ({
icon: 'bot',
label: 'AGENT_BOTS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
globalConfigFlag: 'csmlEditorHost',
toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
toStateName: 'agent_bots',
@@ -112,6 +135,9 @@ const settings = accountId => ({
icon: 'flash-settings',
label: 'MACROS',
hasSubMenu: false,
meta: {
permissions: ['administrator', 'agent'],
},
toState: frontendURL(`accounts/${accountId}/settings/macros`),
toStateName: 'macros_wrapper',
featureFlag: FEATURE_FLAGS.MACROS,
@@ -120,6 +146,9 @@ const settings = accountId => ({
icon: 'chat-multiple',
label: 'CANNED_RESPONSES',
hasSubMenu: false,
meta: {
permissions: ['administrator', 'agent'],
},
toState: frontendURL(
`accounts/${accountId}/settings/canned-response/list`
),
@@ -130,6 +159,9 @@ const settings = accountId => ({
icon: 'flash-on',
label: 'INTEGRATIONS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/integrations`),
toStateName: 'settings_integrations',
featureFlag: FEATURE_FLAGS.INTEGRATIONS,
@@ -138,6 +170,9 @@ const settings = accountId => ({
icon: 'star-emphasis',
label: 'APPLICATIONS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/applications`),
toStateName: 'settings_applications',
featureFlag: FEATURE_FLAGS.INTEGRATIONS,
@@ -146,6 +181,9 @@ const settings = accountId => ({
icon: 'key',
label: 'AUDIT_LOGS',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
toStateName: 'auditlogs_list',
isEnterpriseOnly: true,
@@ -156,6 +194,9 @@ const settings = accountId => ({
icon: 'document-list-clock',
label: 'SLA',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
toStateName: 'sla_list',
isEnterpriseOnly: true,
@@ -166,6 +207,9 @@ const settings = accountId => ({
icon: 'credit-card-person',
label: 'BILLING',
hasSubMenu: false,
meta: {
permissions: ['administrator'],
},
toState: frontendURL(`accounts/${accountId}/settings/billing`),
toStateName: 'billing_settings_index',
showOnlyOnCloud: true,
app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+14 -12
View File
@@ -29,6 +29,8 @@ import SecondaryNavItem from './SecondaryNavItem.vue';
import AccountContext from './AccountContext.vue';
import { mapGetters } from 'vuex';
import { FEATURE_FLAGS } from '../../../featureFlags';
import { hasPermissions } from '../../../helper/permissionsHelper';
import { routesWithPermissions } from '../../../routes';
export default {
components: {
@@ -60,9 +62,9 @@ export default {
type: Object,
default: () => {},
},
currentRole: {
type: String,
default: '',
currentUser: {
type: Object,
default: () => {},
},
isOnChatwootCloud: {
type: Boolean,
@@ -80,16 +82,16 @@ export default {
return this.customViews.filter(view => view.filter_type === 'contact');
},
accessibleMenuItems() {
if (!this.currentRole) {
return [];
}
const menuItemsFilteredByRole = this.menuConfig.menuItems.filter(
menuItem =>
window.roleWiseRoutes[this.currentRole].indexOf(
menuItem.toStateName
) > -1
const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
menuItem => {
const { permissions: userPermissions = [] } = this.currentUser;
return hasPermissions(
routesWithPermissions[menuItem.toStateName],
userPermissions
);
}
);
return menuItemsFilteredByRole.filter(item => {
return menuItemsFilteredByPermissions.filter(item => {
if (item.showOnlyOnCloud) {
return this.isOnChatwootCloud;
}
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+25 -22
View File
@@ -65,27 +65,29 @@
:show-child-count="showChildCount(child.count)"
:child-item-count="child.count"
/>
<router-link
v-if="showItem(menuItem)"
v-slot="{ href, navigate }"
:to="menuItem.toState"
custom
>
<li class="pl-1">
<a :href="href">
<woot-button
size="tiny"
variant="clear"
color-scheme="secondary"
icon="add"
:data-testid="menuItem.dataTestid"
@click="e => newLinkClick(e, navigate)"
>
{{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
</woot-button>
</a>
</li>
</router-link>
<Policy :permissions="['administrator']">
<router-link
v-if="menuItem.newLink"
v-slot="{ href, navigate }"
:to="menuItem.toState"
custom
>
<li class="pl-1">
<a :href="href">
<woot-button
size="tiny"
variant="clear"
color-scheme="secondary"
icon="add"
:data-testid="menuItem.dataTestid"
@click="e => newLinkClick(e, navigate)"
>
{{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
</woot-button>
</a>
</li>
</router-link>
</Policy>
</ul>
</li>
</template>
@@ -105,9 +107,10 @@ import {
isOnMentionsView,
isOnUnattendedView,
} from '../../../store/modules/conversations/helpers/actionHelpers';
import Policy from '../../policy.vue';
export default {
components: { SecondaryChildNavItem },
components: { SecondaryChildNavItem, Policy },
mixins: [adminMixin, configMixin],
props: {
menuItem: {
app/javascript/dashboard/components/policy.vue
+23
View File
@@ -0,0 +1,23 @@
<script setup>
import { useStoreGetters } from 'dashboard/composables/store';
import { computed } from 'vue';
import { hasPermissions } from '../helper/permissionsHelper';
const props = defineProps({
permissions: {
type: Array,
required: true,
},
});
const getters = useStoreGetters();
const user = getters.getCurrentUser.value;
const hasPermission = computed(() =>
hasPermissions(props.permissions, user.permissions)
);
</script>
<template>
<div v-if="hasPermission">
<slot />
</div>
</template>
app/javascript/dashboard/components/widgets/conversation/Message.vue
+10 -1
View File
@@ -257,7 +257,16 @@ export default {
html_content: { full: fullHTMLContent } = {},
text_content: { full: fullTextContent } = {},
} = this.contentAttributes.email || {};
return fullHTMLContent || fullTextContent || '';
if (fullHTMLContent) {
return fullHTMLContent;
}
if (fullTextContent) {
return fullTextContent.replace(/\n/g, '<br>');
}
return '';
},
displayQuotedButton() {
if (this.emailMessageContent.includes('<blockquote')) {
app/javascript/dashboard/helper/automationHelper.js
+3 -3
View File
@@ -121,7 +121,7 @@ export const generateConditionOptions = (options, key = 'id') => {
};
// Add the "None" option to the agent list
export const agentList = agents => [
export const addNoneToList = agents => [
{
id: 'nil',
name: 'None',
@@ -137,8 +137,8 @@ export const getActionOptions = ({
type,
}) => {
const actionsMap = {
assign_agent: agentList(agents),
assign_team: teams,
assign_agent: addNoneToList(agents),
assign_team: addNoneToList(teams),
send_email_to_team: teams,
add_label: generateConditionOptions(labels, 'title'),
remove_label: generateConditionOptions(labels, 'title'),
app/javascript/dashboard/helper/permissionsHelper.js
+34
View File
@@ -0,0 +1,34 @@
export const hasPermissions = (
requiredPermissions = [],
availablePermissions = []
) => {
return requiredPermissions.some(permission =>
availablePermissions.includes(permission)
);
};
const isPermissionsPresentInRoute = route =>
route.meta && route.meta.permissions;
export const buildPermissionsFromRouter = (routes = []) =>
routes.reduce((acc, route) => {
if (route.name) {
if (!isPermissionsPresentInRoute(route)) {
// eslint-disable-next-line
console.error(route);
throw new Error(
"The route doesn't have the required permissions defined"
);
}
acc[route.name] = route.meta.permissions;
}
if (route.children) {
acc = {
...acc,
...buildPermissionsFromRouter(route.children),
};
}
return acc;
}, {});
app/javascript/dashboard/helper/routeHelpers.js
+9 -14
View File
@@ -1,19 +1,16 @@
import { hasPermissions } from './permissionsHelper';
// eslint-disable-next-line default-param-last
export const getCurrentAccount = ({ accounts } = {}, accountId) => {
return accounts.find(account => account.id === accountId);
};
// eslint-disable-next-line default-param-last
export const getUserRole = ({ accounts } = {}, accountId) => {
const currentAccount = getCurrentAccount({ accounts }, accountId) || {};
return currentAccount.role || null;
export const routeIsAccessibleFor = (route, userPermissions = []) => {
const { meta: { permissions: routePermissions = [] } = {} } = route;
return hasPermissions(routePermissions, userPermissions);
};
export const routeIsAccessibleFor = (route, role, roleWiseRoutes) => {
return roleWiseRoutes[role].includes(route);
};
const validateActiveAccountRoutes = (to, user, roleWiseRoutes) => {
const validateActiveAccountRoutes = (to, user) => {
// If the current account is active, then check for the route permissions
const accountDashboardURL = `accounts/${to.params.accountId}/dashboard`;
@@ -22,15 +19,13 @@ const validateActiveAccountRoutes = (to, user, roleWiseRoutes) => {
return accountDashboardURL;
}
const userRole = getUserRole(user, Number(to.params.accountId));
const isAccessible = routeIsAccessibleFor(to.name, userRole, roleWiseRoutes);
const isAccessible = routeIsAccessibleFor(to, user.permissions);
// If the route is not accessible for the user, return to dashboard screen
return isAccessible ? null : accountDashboardURL;
};
export const validateLoggedInRoutes = (to, user, roleWiseRoutes) => {
export const validateLoggedInRoutes = (to, user) => {
const currentAccount = getCurrentAccount(user, Number(to.params.accountId));
// If current account is missing, either user does not have
// access to the account or the account is deleted, return to login screen
if (!currentAccount) {
@@ -40,7 +35,7 @@ export const validateLoggedInRoutes = (to, user, roleWiseRoutes) => {
const isCurrentAccountActive = currentAccount.status === 'active';
if (isCurrentAccountActive) {
return validateActiveAccountRoutes(to, user, roleWiseRoutes);
return validateActiveAccountRoutes(to, user);
}
// If the current account is not active, then redirect the user to the suspended screen
app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
+84
View File
@@ -0,0 +1,84 @@
import {
buildPermissionsFromRouter,
hasPermissions,
} from '../permissionsHelper';
describe('hasPermissions', () => {
it('returns true if permission is present', () => {
expect(
hasPermissions(['contact_manage'], ['team_manage', 'contact_manage'])
).toBe(true);
});
it('returns true if permission is not present', () => {
expect(
hasPermissions(['contact_manage'], ['team_manage', 'user_manage'])
).toBe(false);
expect(hasPermissions()).toBe(false);
expect(hasPermissions([])).toBe(false);
});
});
describe('buildPermissionsFromRouter', () => {
it('returns a valid object when routes have permissions defined', () => {
expect(
buildPermissionsFromRouter([
{
path: 'agent',
name: 'agent_list',
meta: { permissions: ['agent_admin'] },
},
{
path: 'inbox',
children: [
{
path: '',
name: 'inbox_list',
meta: { permissions: ['inbox_admin'] },
},
],
},
{
path: 'conversations',
children: [
{
path: '',
children: [
{
path: 'attachments',
name: 'attachments_list',
meta: { permissions: ['conversation_admin'] },
},
],
},
],
},
])
).toEqual({
agent_list: ['agent_admin'],
inbox_list: ['inbox_admin'],
attachments_list: ['conversation_admin'],
});
});
it('throws an error if a named routed does not have permissions defined', () => {
expect(() => {
buildPermissionsFromRouter([
{
path: 'agent',
name: 'agent_list',
},
]);
}).toThrow("The route doesn't have the required permissions defined");
expect(() => {
buildPermissionsFromRouter([
{
path: 'agent',
name: 'agent_list',
meta: {},
},
]);
}).toThrow("The route doesn't have the required permissions defined");
});
});
app/javascript/dashboard/helper/specs/routeHelpers.spec.js
+33 -33
View File
@@ -1,7 +1,6 @@
import {
getConversationDashboardRoute,
getCurrentAccount,
getUserRole,
isAConversationRoute,
routeIsAccessibleFor,
validateLoggedInRoutes,
@@ -15,24 +14,11 @@ describe('#getCurrentAccount', () => {
});
});
describe('#getUserRole', () => {
it('should return the current role', () => {
expect(
getUserRole({ accounts: [{ id: 1, role: 'administrator' }] }, 1)
).toEqual('administrator');
expect(getUserRole({ accounts: [] }, 1)).toEqual(null);
});
});
describe('#routeIsAccessibleFor', () => {
it('should return the correct access', () => {
const roleWiseRoutes = { agent: ['conversations'], admin: ['billing'] };
expect(routeIsAccessibleFor('billing', 'agent', roleWiseRoutes)).toEqual(
false
);
expect(routeIsAccessibleFor('billing', 'admin', roleWiseRoutes)).toEqual(
true
);
let route = { meta: { permissions: ['administrator'] } };
expect(routeIsAccessibleFor(route, ['agent'])).toEqual(false);
expect(routeIsAccessibleFor(route, ['administrator'])).toEqual(true);
});
});
@@ -40,11 +26,7 @@ describe('#validateLoggedInRoutes', () => {
describe('when account access is missing', () => {
it('should return the login route', () => {
expect(
validateLoggedInRoutes(
{ params: { accountId: 1 } },
{ accounts: [] },
{}
)
validateLoggedInRoutes({ params: { accountId: 1 } }, { accounts: [] })
).toEqual(`app/login`);
});
});
@@ -53,9 +35,12 @@ describe('#validateLoggedInRoutes', () => {
it('return suspended route', () => {
expect(
validateLoggedInRoutes(
{ name: 'conversations', params: { accountId: 1 } },
{ accounts: [{ id: 1, role: 'agent', status: 'suspended' }] },
{ agent: ['conversations'] }
{
name: 'conversations',
params: { accountId: 1 },
meta: { permissions: ['agent'] },
},
{ accounts: [{ id: 1, role: 'agent', status: 'suspended' }] }
)
).toEqual(`accounts/1/suspended`);
});
@@ -65,9 +50,22 @@ describe('#validateLoggedInRoutes', () => {
it('returns null (no action required)', () => {
expect(
validateLoggedInRoutes(
{ name: 'conversations', params: { accountId: 1 } },
{ accounts: [{ id: 1, role: 'agent', status: 'active' }] },
{ agent: ['conversations'] }
{
name: 'conversations',
params: { accountId: 1 },
meta: { permissions: ['agent'] },
},
{
permissions: ['agent'],
accounts: [
{
id: 1,
role: 'agent',
permissions: ['agent'],
status: 'active',
},
],
}
)
).toEqual(null);
});
@@ -76,9 +74,12 @@ describe('#validateLoggedInRoutes', () => {
it('returns dashboard url', () => {
expect(
validateLoggedInRoutes(
{ name: 'conversations', params: { accountId: 1 } },
{ accounts: [{ id: 1, role: 'agent', status: 'active' }] },
{ admin: ['conversations'], agent: [] }
{
name: 'billing',
params: { accountId: 1 },
meta: { permissions: ['administrator'] },
},
{ accounts: [{ id: 1, role: 'agent', status: 'active' }] }
)
).toEqual(`accounts/1/dashboard`);
});
@@ -88,8 +89,7 @@ describe('#validateLoggedInRoutes', () => {
expect(
validateLoggedInRoutes(
{ name: 'account_suspended', params: { accountId: 1 } },
{ accounts: [{ id: 1, role: 'agent', status: 'active' }] },
{ agent: ['account_suspended'] }
{ accounts: [{ id: 1, role: 'agent', status: 'active' }] }
)
).toEqual(`accounts/1/dashboard`);
});
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
-2
View File
@@ -367,7 +367,6 @@
"DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
"EMAIL_PLACEHOLDER": "Enter email address",
"SIGN_IN": "Sign in with Microsoft",
"HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
"ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
},
"GOOGLE": {
@@ -375,7 +374,6 @@
"DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
"SIGN_IN": "Sign in with Google",
"EMAIL_PLACEHOLDER": "Enter email address",
"HELP": "To add your Google account as a channel, you need to authenticate your Google account by clicking on 'Sign in with Google' ",
"ERROR_MESSAGE": "There was an error connecting to Google, please try again"
}
},
app/javascript/dashboard/modules/search/search.routes.js
+3 -1
View File
@@ -7,7 +7,9 @@ export const routes = [
{
path: frontendURL('accounts/:accountId/search'),
name: 'search',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: SearchView,
},
];
app/javascript/dashboard/routes/dashboard/contacts/routes.js
+12 -4
View File
@@ -7,13 +7,17 @@ export const routes = [
{
path: frontendURL('accounts/:accountId/contacts'),
name: 'contacts_dashboard',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ContactsView,
},
{
path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
name: 'contacts_segments_dashboard',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ContactsView,
props: route => {
return { segmentsId: route.params.id };
@@ -22,7 +26,9 @@ export const routes = [
{
path: frontendURL('accounts/:accountId/labels/:label/contacts'),
name: 'contacts_labels_dashboard',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ContactsView,
props: route => {
return { label: route.params.label };
@@ -31,7 +37,9 @@ export const routes = [
{
path: frontendURL('accounts/:accountId/contacts/:contactId'),
name: 'contact_profile_dashboard',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ContactManageView,
props: route => {
return { contactId: route.params.contactId };
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+60 -2
View File
@@ -22,25 +22,40 @@
:is-on-expanded-layout="isOnExpandedLayout"
@contact-panel-toggle="onToggleContactPanel"
/>
<woot-modal
:show.sync="showCustomSnoozeModal"
:on-close="hideCustomSnoozeModal"
>
<custom-snooze-modal
@close="hideCustomSnoozeModal"
@choose-time="chooseSnoozeTime"
/>
</woot-modal>
</section>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUnixTime } from 'date-fns';
import ChatList from '../../../components/ChatList.vue';
import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
import PopOverSearch from './search/PopOverSearch.vue';
import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import alertMixin from 'shared/mixins/alertMixin';
import wootConstants from 'dashboard/constants/globals';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
export default {
components: {
ChatList,
ConversationBox,
PopOverSearch,
CustomSnoozeModal,
},
mixins: [uiSettingsMixin],
mixins: [uiSettingsMixin, alertMixin],
props: {
inboxId: {
type: [String, Number],
@@ -70,12 +85,14 @@ export default {
data() {
return {
showSearchModal: false,
showCustomSnoozeModal: false,
};
},
computed: {
...mapGetters({
chatList: 'getAllConversations',
currentChat: 'getSelectedChat',
contextMenuChatId: 'getContextMenuChatId',
}),
showConversationList() {
return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -112,6 +129,10 @@ export default {
this.$watch('chatList.length', () => {
this.setActiveChat();
});
this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
},
beforeDestroy() {
this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
},
methods: {
@@ -186,6 +207,43 @@ export default {
closeSearch() {
this.showSearchModal = false;
},
onCmdSnoozeConversation(snoozeType) {
if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
this.showCustomSnoozeModal = true;
} else {
this.toggleStatus(
wootConstants.STATUS_TYPE.SNOOZED,
findSnoozeTime(snoozeType) || null
);
}
},
chooseSnoozeTime(customSnoozeTime) {
this.showCustomSnoozeModal = false;
if (customSnoozeTime) {
this.toggleStatus(
wootConstants.STATUS_TYPE.SNOOZED,
getUnixTime(customSnoozeTime)
);
}
},
toggleStatus(status, snoozedUntil) {
this.$store
.dispatch('toggleStatus', {
conversationId: this.currentChat?.id || this.contextMenuChatId,
status,
snoozedUntil,
})
.then(() => {
this.$store.dispatch('setContextMenuChatId', null);
this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
});
},
hideCustomSnoozeModal() {
// if we select custom snooze and the custom snooze modal is open
// Then if the custom snooze modal is closed then set the context menu chat id to null
this.$store.dispatch('setContextMenuChatId', null);
this.showCustomSnoozeModal = false;
},
},
};
</script>
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+2 -2
View File
@@ -117,7 +117,7 @@
/>
<div class="w-full">
<label> Social Profiles </label>
<label>{{ $t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES') }}</label>
<div
v-for="socialProfile in socialProfileKeys"
:key="socialProfile.key"
@@ -130,7 +130,7 @@
</span>
<input
v-model="socialProfileUserNames[socialProfile.key]"
class="input-group-field ltr:rounded-l-none rtl:rounded-r-none !mb-0"
class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
type="text"
/>
</div>
app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+48 -16
View File
@@ -7,7 +7,9 @@ export default {
{
path: frontendURL('accounts/:accountId/dashboard'),
name: 'home',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: () => {
return { inboxId: 0 };
@@ -16,7 +18,9 @@ export default {
{
path: frontendURL('accounts/:accountId/conversations/:conversation_id'),
name: 'inbox_conversation',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => {
return { inboxId: 0, conversationId: route.params.conversation_id };
@@ -25,7 +29,9 @@ export default {
{
path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
name: 'inbox_dashboard',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => {
return { inboxId: route.params.inbox_id };
@@ -36,7 +42,9 @@ export default {
'accounts/:accountId/inbox/:inbox_id/conversations/:conversation_id'
),
name: 'conversation_through_inbox',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => {
return {
@@ -48,7 +56,9 @@ export default {
{
path: frontendURL('accounts/:accountId/label/:label'),
name: 'label_conversations',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({ label: route.params.label }),
},
@@ -57,7 +67,9 @@ export default {
'accounts/:accountId/label/:label/conversations/:conversation_id'
),
name: 'conversations_through_label',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({
conversationId: route.params.conversation_id,
@@ -67,7 +79,9 @@ export default {
{
path: frontendURL('accounts/:accountId/team/:teamId'),
name: 'team_conversations',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({ teamId: route.params.teamId }),
},
@@ -76,7 +90,9 @@ export default {
'accounts/:accountId/team/:teamId/conversations/:conversationId'
),
name: 'conversations_through_team',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({
conversationId: route.params.conversationId,
@@ -86,7 +102,9 @@ export default {
{
path: frontendURL('accounts/:accountId/custom_view/:id'),
name: 'folder_conversations',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({ foldersId: route.params.id }),
},
@@ -95,7 +113,9 @@ export default {
'accounts/:accountId/custom_view/:id/conversations/:conversation_id'
),
name: 'conversations_through_folders',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({
conversationId: route.params.conversation_id,
@@ -105,7 +125,9 @@ export default {
{
path: frontendURL('accounts/:accountId/mentions/conversations'),
name: 'conversation_mentions',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: () => ({ conversationType: 'mention' }),
},
@@ -114,7 +136,9 @@ export default {
'accounts/:accountId/mentions/conversations/:conversationId'
),
name: 'conversation_through_mentions',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({
conversationId: route.params.conversationId,
@@ -124,7 +148,9 @@ export default {
{
path: frontendURL('accounts/:accountId/unattended/conversations'),
name: 'conversation_unattended',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: () => ({ conversationType: 'unattended' }),
},
@@ -133,7 +159,9 @@ export default {
'accounts/:accountId/unattended/conversations/:conversationId'
),
name: 'conversation_through_unattended',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({
conversationId: route.params.conversationId,
@@ -143,7 +171,9 @@ export default {
{
path: frontendURL('accounts/:accountId/participating/conversations'),
name: 'conversation_participating',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: () => ({ conversationType: 'participating' }),
},
@@ -152,7 +182,9 @@ export default {
'accounts/:accountId/participating/conversations/:conversationId'
),
name: 'conversation_through_participating',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ConversationView,
props: route => ({
conversationId: route.params.conversationId,
app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+3 -1
View File
@@ -28,7 +28,9 @@ export default {
{
path: frontendURL('accounts/:accountId/suspended'),
name: 'account_suspended',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: Suspended,
},
],
app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+66 -22
View File
@@ -30,13 +30,17 @@ const portalRoutes = [
{
path: getPortalRoute(''),
name: 'default_portal_articles',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator'],
},
component: DefaultPortalArticles,
},
{
path: getPortalRoute('all'),
name: 'list_all_portals',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllPortals,
},
{
@@ -47,55 +51,73 @@ const portalRoutes = [
path: '',
name: 'new_portal_information',
component: PortalDetails,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':portalSlug/customization',
name: 'portal_customization',
component: PortalCustomization,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':portalSlug/finish',
name: 'portal_finish',
component: PortalSettingsFinish,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
{
path: getPortalRoute(':portalSlug'),
name: 'portalSlug',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ShowPortal,
},
{
path: getPortalRoute(':portalSlug/edit'),
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: EditPortal,
children: [
{
path: '',
name: 'edit_portal_information',
component: EditPortalBasic,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'customizations',
name: 'edit_portal_customization',
component: EditPortalCustomization,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'locales',
name: 'edit_portal_locales',
component: EditPortalLocales,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'categories',
name: 'list_all_locale_categories',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllCategories,
},
],
@@ -106,39 +128,51 @@ const articleRoutes = [
{
path: getPortalRoute(':portalSlug/:locale/articles'),
name: 'list_all_locale_articles',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllArticles,
},
{
path: getPortalRoute(':portalSlug/:locale/articles/new'),
name: 'new_article',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: NewArticle,
},
{
path: getPortalRoute(':portalSlug/:locale/articles/mine'),
name: 'list_mine_articles',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllArticles,
},
{
path: getPortalRoute(':portalSlug/:locale/articles/archived'),
name: 'list_archived_articles',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllArticles,
},
{
path: getPortalRoute(':portalSlug/:locale/articles/draft'),
name: 'list_draft_articles',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllArticles,
},
{
path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
name: 'edit_article',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: EditArticle,
},
];
@@ -147,19 +181,25 @@ const categoryRoutes = [
{
path: getPortalRoute(':portalSlug/:locale/categories'),
name: 'all_locale_categories',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllCategories,
},
{
path: getPortalRoute(':portalSlug/:locale/categories/new'),
name: 'new_category_in_locale',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: NewCategory,
},
{
path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
name: 'show_category',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListAllArticles,
},
{
@@ -167,13 +207,17 @@ const categoryRoutes = [
':portalSlug/:locale/categories/:categorySlug/articles'
),
name: 'show_category_articles',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: ListCategoryArticles,
},
{
path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
name: 'edit_category',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: EditCategory,
},
];
app/javascript/dashboard/routes/dashboard/inbox/routes.js
+6 -2
View File
@@ -12,13 +12,17 @@ export const routes = [
path: '',
name: 'inbox_view',
component: InboxEmptyStateView,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
{
path: ':notification_id',
name: 'inbox_view_conversation',
component: InboxDetailView,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/notifications/routes.js
+3 -1
View File
@@ -18,7 +18,9 @@ export const routes = [
path: '',
name: 'notifications_index',
component: NotificationsView,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+6 -2
View File
@@ -6,7 +6,9 @@ export default {
routes: [
{
path: frontendURL('accounts/:accountId/settings/general'),
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: SettingsContent,
props: {
headerTitle: 'GENERAL_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
path: '',
name: 'general_settings_index',
component: Index,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
+12 -4
View File
@@ -8,7 +8,9 @@ export default {
routes: [
{
path: frontendURL('accounts/:accountId/settings/agent-bots'),
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: SettingsContent,
props: {
headerTitle: 'AGENT_BOTS.HEADER',
@@ -20,19 +22,25 @@ export default {
path: '',
name: 'agent_bots',
component: Bot,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'csml/new',
name: 'agent_bots_csml_new',
component: CsmlNewBot,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'csml/:botId',
name: 'agent_bots_csml_edit',
component: CsmlEditBot,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+3 -2
View File
@@ -15,14 +15,15 @@ export default {
children: [
{
path: '',
name: 'agents_wrapper',
redirect: 'list',
},
{
path: 'list',
name: 'agent_list',
component: AgentHome,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+3 -2
View File
@@ -15,14 +15,15 @@ export default {
children: [
{
path: '',
name: 'attributes_wrapper',
redirect: 'list',
},
{
path: 'list',
name: 'attributes_list',
component: AttributesHome,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
+3 -2
View File
@@ -16,13 +16,14 @@ export default {
children: [
{
path: '',
name: 'auditlogs_wrapper',
redirect: 'list',
},
{
path: 'list',
name: 'auditlogs_list',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: AuditLogsHome,
},
],
app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+3 -2
View File
@@ -15,14 +15,15 @@ export default {
children: [
{
path: '',
name: 'automation_wrapper',
redirect: 'list',
},
{
path: 'list',
name: 'automation_list',
component: Automation,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
+6 -2
View File
@@ -6,7 +6,9 @@ export default {
routes: [
{
path: frontendURL('accounts/:accountId/settings/billing'),
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: SettingsContent,
props: {
headerTitle: 'BILLING_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
path: '',
name: 'billing_settings_index',
component: Index,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+6 -2
View File
@@ -19,7 +19,9 @@ export default {
{
path: 'ongoing',
name: 'ongoing_campaigns',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: Index,
},
],
@@ -35,7 +37,9 @@ export default {
{
path: 'one_off',
name: 'one_off',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: Index,
},
],
app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+3 -2
View File
@@ -16,13 +16,14 @@ export default {
children: [
{
path: '',
name: 'canned_wrapper',
redirect: 'list',
},
{
path: 'list',
name: 'canned_list',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: CannedHome,
},
],
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+46 -45
View File
@@ -20,58 +20,59 @@
</div>
</div>
<microsoft v-else-if="provider === 'microsoft'" />
<google v-else-if="provider === 'google'" />
<forward-to-option v-else-if="provider === 'other_provider'" />
</template>
<script>
<script setup>
import { ref, computed } from 'vue';
import ForwardToOption from './emailChannels/ForwardToOption.vue';
import Microsoft from './emailChannels/Microsoft.vue';
import { mapGetters } from 'vuex';
import Google from './emailChannels/Google.vue';
import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
import PageHeader from '../../SettingsSubPageHeader.vue';
export default {
components: {
ChannelSelector,
ForwardToOption,
Microsoft,
PageHeader,
},
data() {
return { provider: '' };
},
computed: {
...mapGetters({
globalConfig: 'globalConfig/get',
isAChatwootInstance: 'globalConfig/isAChatwootInstance',
}),
emailProviderList() {
return [
{
title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
isEnabled: !!this.globalConfig.azureAppId,
key: 'microsoft',
src: '/assets/images/dashboard/channels/microsoft.png',
},
{
title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
isEnabled: true,
key: 'other_provider',
src: '/assets/images/dashboard/channels/email.png',
},
].filter(provider => {
if (this.isAChatwootInstance) {
return true;
}
return provider.isEnabled;
});
import { useStoreGetters } from 'dashboard/composables/store';
import { useI18n } from 'dashboard/composables/useI18n';
const provider = ref('');
const getters = useStoreGetters();
const { t } = useI18n();
const globalConfig = getters['globalConfig/get'];
const isAChatwootInstance = getters['globalConfig/isAChatwootInstance'];
const emailProviderList = computed(() => {
return [
{
title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
isEnabled: !!globalConfig.value.azureAppId,
key: 'microsoft',
src: '/assets/images/dashboard/channels/microsoft.png',
},
},
methods: {
onClick(emailProvider) {
if (emailProvider.isEnabled) {
this.provider = emailProvider.key;
}
{
title: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE'),
isEnabled: !!window.chatwootConfig.googleOAuthClientId,
key: 'google',
src: '/assets/images/dashboard/channels/google.png',
},
},
};
{
title: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
isEnabled: true,
key: 'other_provider',
src: '/assets/images/dashboard/channels/email.png',
},
].filter(providerConfig => {
if (isAChatwootInstance.value) {
return true;
}
return providerConfig.isEnabled;
});
});
function onClick(emailProvider) {
if (emailProvider.isEnabled) {
this.provider = emailProvider.key;
}
}
</script>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
+13 -50
View File
@@ -1,55 +1,18 @@
<script setup>
import { ref } from 'vue';
import OAuthChannel from './OAuthChannel.vue';
import { defineComponent } from 'vue';
import { useAlert } from 'dashboard/composables';
import { useI18n } from 'dashboard/composables/useI18n';
import googleClient from 'dashboard/api/channel/googleClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
const { t } = useI18n();
const isRequestingAuthorization = ref(false);
const email = ref('');
async function requestAuthorization() {
try {
isRequestingAuthorization.value = true;
const response = await googleClient.generateAuthorization({
email: email.value,
});
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
useAlert(t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE'));
} finally {
isRequestingAuthorization.value = false;
}
}
defineComponent({
name: 'GoogleOAuthChannel',
});
</script>
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<settings-sub-page-header
:header-title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
/>
<form class="mt-6" @submit.prevent="requestAuthorization">
<woot-input
v-model="email"
type="email"
:placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
/>
<woot-submit-button
icon="brand-twitter"
:button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
type="submit"
:loading="isRequestingAuthorization"
/>
</form>
</div>
<OAuthChannel
provider="google"
:title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
:description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
:input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
:submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
:error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
/>
</template>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
+16 -72
View File
@@ -1,75 +1,19 @@
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<settings-sub-page-header
:header-title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
/>
<form
class="microsoft--sign-in-form"
@submit.prevent="requestAuthorization"
>
<woot-input
v-model.trim="email"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
@blur="v$.email.$touch"
/>
<woot-submit-button
icon="brand-twitter"
type="submit"
:button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
:loading="isRequestingAuthorization"
/>
</form>
</div>
</template>
<script>
import alertMixin from 'shared/mixins/alertMixin';
import microsoftClient from 'dashboard/api/channel/microsoftClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email } from 'vuelidate/lib/validators';
<script setup>
import OAuthChannel from './OAuthChannel.vue';
import { defineComponent } from 'vue';
export default {
components: { SettingsSubPageHeader },
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return { email: '', isRequestingAuthorization: false };
},
validations: {
email: { required, email },
},
methods: {
async requestAuthorization() {
try {
this.v$.$touch();
if (this.v$.$invalid) return;
this.isRequestingAuthorization = true;
const response = await microsoftClient.generateAuthorization({
email: this.email,
});
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
} finally {
this.isRequestingAuthorization = false;
}
},
},
};
defineComponent({
name: 'MicrosoftOAuthChannel',
});
</script>
<style scoped>
.microsoft--sign-in-form {
@apply mt-6;
}
</style>
<template>
<OAuthChannel
provider="microsoft"
:title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
:description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
:input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
:submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
:error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
/>
</template>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
+89
View File
@@ -0,0 +1,89 @@
<script setup>
import { ref, computed } from 'vue';
import microsoftClient from 'dashboard/api/channel/microsoftClient';
import googleClient from 'dashboard/api/channel/googleClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
import { useAlert } from 'dashboard/composables';
const props = defineProps({
provider: {
type: String,
required: true,
validate: value => ['microsoft', 'google'].includes(value),
},
title: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
submitButtonText: {
type: String,
required: true,
},
errorMessage: {
type: String,
required: true,
},
inputPlaceholder: {
type: String,
required: true,
},
});
const isRequestingAuthorization = ref(false);
const email = ref('');
const client = computed(() => {
if (props.provider === 'microsoft') {
return microsoftClient;
}
return googleClient;
});
async function requestAuthorization() {
try {
isRequestingAuthorization.value = true;
const response = await client.value.generateAuthorization({
email: email.value,
});
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
useAlert(props.errorMessage);
} finally {
isRequestingAuthorization.value = false;
}
}
</script>
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<settings-sub-page-header
:header-title="title"
:header-content="description"
/>
<form class="mt-6" @submit.prevent="requestAuthorization">
<woot-input
v-model="email"
type="email"
:placeholder="inputPlaceholder"
/>
<woot-submit-button
icon="brand-twitter"
type="submit"
:button-text="submitButtonText"
:loading="isRequestingAuthorization"
/>
</form>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+18 -7
View File
@@ -28,14 +28,15 @@ export default {
children: [
{
path: '',
name: 'settings_inbox',
redirect: 'list',
},
{
path: 'list',
name: 'settings_inbox_list',
component: InboxHome,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'new',
@@ -45,19 +46,25 @@ export default {
path: '',
name: 'settings_inbox_new',
component: ChannelList,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':inbox_id/finish',
name: 'settings_inbox_finish',
component: FinishSetup,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':sub_page',
name: 'settings_inboxes_page_channel',
component: channelFactory.create(),
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
props: route => {
return { channel_name: route.params.sub_page };
},
@@ -65,7 +72,9 @@ export default {
{
path: ':inbox_id/agents',
name: 'settings_inboxes_add_agents',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: AddAgents,
},
],
@@ -74,7 +83,9 @@ export default {
path: ':inboxId',
name: 'settings_inbox_show',
component: Settings,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
+6 -2
View File
@@ -26,13 +26,17 @@ export default {
path: '',
name: 'settings_applications',
component: Index,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':integration_id',
name: 'settings_applications_integration',
component: IntegrationHooks,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
props: route => ({
integrationId: route.params.integration_id,
}),
app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+15 -5
View File
@@ -30,32 +30,42 @@ export default {
path: '',
name: 'settings_integrations',
component: Index,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'webhook',
component: Webhook,
name: 'settings_integrations_webhook',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'dashboard-apps',
component: DashboardApps,
name: 'settings_integrations_dashboard_apps',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'slack',
name: 'settings_integrations_slack',
component: Slack,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
props: route => ({ code: route.query.code }),
},
{
path: ':integration_id',
name: 'settings_integrations_integration',
component: ShowIntegration,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
props: route => {
return {
integrationId: route.params.integration_id,
app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+6 -2
View File
@@ -17,13 +17,17 @@ export default {
{
path: '',
name: 'labels_wrapper',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
redirect: 'list',
},
{
path: 'list',
name: 'labels_list',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: Index,
},
],
app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+9 -3
View File
@@ -23,19 +23,25 @@ export default {
path: '',
name: 'macros_wrapper',
component: Macros,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
{
path: 'new',
name: 'macros_new',
component: MacroEditor,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
{
path: ':macroId/edit',
name: 'macros_edit',
component: MacroEditor,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+6 -2
View File
@@ -8,14 +8,18 @@ export default {
{
path: frontendURL('accounts/:accountId/profile'),
name: 'profile_settings',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
component: SettingsContent,
children: [
{
path: 'settings',
name: 'profile_settings_index',
component: Index,
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
},
],
},
app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+27 -9
View File
@@ -29,7 +29,9 @@ export default {
{
path: 'overview',
name: 'account_overview_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: LiveReports,
},
],
@@ -46,7 +48,9 @@ export default {
{
path: 'conversation',
name: 'conversation_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: Index,
},
],
@@ -63,7 +67,9 @@ export default {
{
path: 'csat',
name: 'csat_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: CsatResponses,
},
],
@@ -80,7 +86,9 @@ export default {
{
path: 'bot',
name: 'bot_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: BotReports,
},
],
@@ -97,7 +105,9 @@ export default {
{
path: 'agent',
name: 'agent_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: AgentReports,
},
],
@@ -114,7 +124,9 @@ export default {
{
path: 'label',
name: 'label_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: LabelReports,
},
],
@@ -131,7 +143,9 @@ export default {
{
path: 'inboxes',
name: 'inbox_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: InboxReports,
},
],
@@ -147,7 +161,9 @@ export default {
{
path: 'teams',
name: 'team_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: TeamReports,
},
],
@@ -164,7 +180,9 @@ export default {
{
path: 'sla',
name: 'sla_reports',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: SLAReports,
},
],
app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+3 -1
View File
@@ -24,7 +24,9 @@ export default {
{
path: frontendURL('accounts/:accountId/settings'),
name: 'settings_home',
roles: ['administrator', 'agent'],
meta: {
permissions: ['administrator', 'agent'],
},
redirect: () => {
if (store.getters.getCurrentRole === 'administrator') {
return frontendURL('accounts/:accountId/settings/general');
app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+6 -2
View File
@@ -13,13 +13,17 @@ export default {
{
path: '',
name: 'sla_wrapper',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
redirect: 'list',
},
{
path: 'list',
name: 'sla_list',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: Index,
},
],
app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+21 -8
View File
@@ -29,14 +29,15 @@ export default {
children: [
{
path: '',
name: 'settings_teams',
redirect: 'list',
},
{
path: 'list',
name: 'settings_teams_list',
component: TeamsHome,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'new',
@@ -46,18 +47,24 @@ export default {
path: '',
name: 'settings_teams_new',
component: CreateTeam,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':teamId/finish',
name: 'settings_teams_finish',
component: FinishSetup,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: ':teamId/agents',
name: 'settings_teams_add_agents',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: AddAgents,
},
],
@@ -70,18 +77,24 @@ export default {
path: '',
name: 'settings_teams_edit',
component: EditTeam,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'agents',
name: 'settings_teams_edit_members',
component: EditAgents,
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
},
{
path: 'finish',
name: 'settings_teams_edit_finish',
roles: ['administrator'],
meta: {
permissions: ['administrator'],
},
component: FinishSetup,
},
],
app/javascript/dashboard/routes/index.js
+3 -28
View File
@@ -5,33 +5,12 @@ import dashboard from './dashboard/dashboard.routes';
import store from '../store';
import { validateLoggedInRoutes } from '../helper/routeHelpers';
import AnalyticsHelper from '../helper/AnalyticsHelper';
import { buildPermissionsFromRouter } from '../helper/permissionsHelper';
const routes = [...dashboard.routes];
window.roleWiseRoutes = {
agent: [],
administrator: [],
};
// generateRoleWiseRoute - updates window object with agent/admin route
const generateRoleWiseRoute = route => {
route.forEach(element => {
if (element.children) {
generateRoleWiseRoute(element.children);
}
if (element.roles) {
element.roles.forEach(roleEl => {
window.roleWiseRoutes[roleEl].push(element.name);
});
}
});
};
// Create a object of routes
// accessible by each role.
// returns an object with roles as keys and routeArr as values
generateRoleWiseRoute(routes);
export const router = new VueRouter({ mode: 'history', routes });
export const routesWithPermissions = buildPermissionsFromRouter(routes);
export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
const { isLoggedIn, getCurrentUser: user } = getters;
@@ -45,11 +24,7 @@ export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
return next(frontendURL(`accounts/${user.account_id}/dashboard`));
}
const nextRoute = validateLoggedInRoutes(
to,
getters.getCurrentUser,
window.roleWiseRoutes
);
const nextRoute = validateLoggedInRoutes(to, getters.getCurrentUser);
return nextRoute ? next(frontendURL(nextRoute)) : next();
};
app/javascript/packs/sdk.js
+1
View File
@@ -62,6 +62,7 @@ const runSDK = ({ baseUrl, websiteToken }) => {
type: getBubbleView(chatwootSettings.type),
launcherTitle: chatwootSettings.launcherTitle || '',
showPopoutButton: chatwootSettings.showPopoutButton || false,
showUnreadMessagesDialog: chatwootSettings.showUnreadMessagesDialog ?? true,
widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
resetTriggered: false,
darkMode: getDarkMode(chatwootSettings.darkMode),
app/javascript/sdk/IFrameHelper.js
+1
View File
@@ -160,6 +160,7 @@ export const IFrameHelper = {
showPopoutButton: window.$chatwoot.showPopoutButton,
widgetStyle: window.$chatwoot.widgetStyle,
darkMode: window.$chatwoot.darkMode,
showUnreadMessagesDialog: window.$chatwoot.showUnreadMessagesDialog,
campaignsSnoozedTill,
});
IFrameHelper.onLoad({
app/javascript/v3/views/index.js
+8 -4
View File
@@ -6,12 +6,16 @@ import { validateRouteAccess } from '../helpers/RouteHelper';
export const router = new VueRouter({ mode: 'history', routes });
const sensitiveRouteNames = ['auth_password_edit'];
export const initalizeRouter = () => {
router.beforeEach((to, _, next) => {
AnalyticsHelper.page(to.name || '', {
path: to.path,
name: to.name,
});
if (!sensitiveRouteNames.includes(to.name)) {
AnalyticsHelper.page(to.name || '', {
path: to.path,
name: to.name,
});
}
return validateRouteAccess(to, next, window.chatwootConfig);
});
app/javascript/widget/App.vue
+8 -2
View File
@@ -71,6 +71,7 @@ export default {
messageCount: 'conversation/getMessageCount',
unreadMessageCount: 'conversation/getUnreadMessageCount',
isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
showUnreadMessagesDialog: 'appConfig/getShowUnreadMessagesDialog',
}),
isIFrame() {
return IFrameHelper.isIFrame();
@@ -209,8 +210,13 @@ export default {
},
setUnreadView() {
const { unreadMessageCount } = this;
if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
if (!this.showUnreadMessagesDialog) {
this.handleUnreadNotificationDot();
} else if (
this.isIFrame &&
unreadMessageCount > 0 &&
!this.isWidgetOpen
) {
this.replaceRoute('unread-messages').then(() => {
this.setIframeHeight(true);
IFrameHelper.sendMessage({ event: 'setUnreadMode' });
app/javascript/widget/components/AgentMessage.vue
+17 -1
View File
@@ -30,7 +30,7 @@
/>
<div
v-if="hasAttachments"
class="chat-bubble has-attachment agent"
class="chat-bubble has-attachment space-y-2 agent"
:class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
>
<div
@@ -44,6 +44,14 @@
:readable-time="readableTime"
@error="onImageLoadError"
/>
<video-bubble
v-if="attachment.file_type === 'video' && !hasVideoError"
:url="attachment.data_url"
:readable-time="readableTime"
@error="onVideoLoadError"
/>
<audio v-else-if="attachment.file_type === 'audio'" controls>
<source :src="attachment.data_url" />
</audio>
@@ -84,6 +92,7 @@ import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
import timeMixin from 'dashboard/mixins/time';
import ImageBubble from 'widget/components/ImageBubble.vue';
import VideoBubble from 'widget/components/VideoBubble.vue';
import FileBubble from 'widget/components/FileBubble.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import { MESSAGE_TYPE } from 'widget/helpers/constants';
@@ -100,6 +109,7 @@ export default {
components: {
AgentMessageBubble,
ImageBubble,
VideoBubble,
Thumbnail,
UserMessage,
FileBubble,
@@ -120,6 +130,7 @@ export default {
data() {
return {
hasImageError: false,
hasVideoError: false,
};
},
computed: {
@@ -215,15 +226,20 @@ export default {
watch: {
message() {
this.hasImageError = false;
this.hasVideoError = false;
},
},
mounted() {
this.hasImageError = false;
this.hasVideoError = false;
},
methods: {
onImageLoadError() {
this.hasImageError = true;
},
onVideoLoadError() {
this.hasVideoError = true;
},
toggleReply() {
emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
},
app/javascript/widget/components/UserMessage.vue
+16
View File
@@ -39,6 +39,14 @@
:readable-time="readableTime"
@error="onImageLoadError"
/>
<video-bubble
v-if="attachment.file_type === 'video' && !hasVideoError"
:url="attachment.data_url"
:readable-time="readableTime"
@error="onVideoLoadError"
/>
<file-bubble
v-else
:url="attachment.data_url"
@@ -72,6 +80,7 @@
import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
import ImageBubble from 'widget/components/ImageBubble.vue';
import VideoBubble from 'widget/components/VideoBubble.vue';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import FileBubble from 'widget/components/FileBubble.vue';
import timeMixin from 'dashboard/mixins/time';
@@ -88,6 +97,7 @@ export default {
UserMessageBubble,
MessageReplyButton,
ImageBubble,
VideoBubble,
FileBubble,
FluentIcon,
ReplyToChip,
@@ -107,6 +117,7 @@ export default {
data() {
return {
hasImageError: false,
hasVideoError: false,
};
},
computed: {
@@ -143,10 +154,12 @@ export default {
watch: {
message() {
this.hasImageError = false;
this.hasVideoError = false;
},
},
mounted() {
this.hasImageError = false;
this.hasVideoError = false;
},
methods: {
async retrySendMessage() {
@@ -158,6 +171,9 @@ export default {
onImageLoadError() {
this.hasImageError = true;
},
onVideoLoadError() {
this.hasVideoError = true;
},
toggleReply() {
this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
},
app/javascript/widget/components/VideoBubble.vue
+27
View File
@@ -0,0 +1,27 @@
<script setup>
defineProps({
url: { type: String, default: '' },
readableTime: { type: String, default: '' },
});
const emits = defineEmits(['error']);
const onVideoError = () => {
emits('error');
};
</script>
<template>
<div class="block relative max-w-full">
<video
class="w-full max-w-[250px] h-auto"
:src="url"
controls
@error="onVideoError"
/>
<span
class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
>
{{ readableTime }}
</span>
</div>
</template>
app/javascript/widget/store/modules/appConfig.js
+5
View File
@@ -10,6 +10,7 @@ import {
const state = {
hideMessageBubble: false,
isCampaignViewClicked: false,
showUnreadMessagesDialog: true,
isWebWidgetTriggered: false,
isWidgetOpen: false,
position: 'right',
@@ -29,6 +30,7 @@ export const getters = {
getReferrerHost: $state => $state.referrerHost,
isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
darkMode: $state => $state.darkMode,
getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog,
};
export const actions = {
@@ -38,6 +40,7 @@ export const actions = {
showPopoutButton,
position,
hideMessageBubble,
showUnreadMessagesDialog,
widgetStyle = 'rounded',
darkMode = 'light',
}
@@ -46,6 +49,7 @@ export const actions = {
hideMessageBubble: !!hideMessageBubble,
position: position || 'right',
showPopoutButton: !!showPopoutButton,
showUnreadMessagesDialog: !!showUnreadMessagesDialog,
widgetStyle,
darkMode,
});
@@ -75,6 +79,7 @@ export const mutations = {
$state.widgetStyle = data.widgetStyle;
$state.darkMode = data.darkMode;
$state.locale = data.locale || $state.locale;
$state.showUnreadMessagesDialog = data.showUnreadMessagesDialog;
},
[TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
$state.isWidgetOpen = isWidgetOpen;
app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
+6
View File
@@ -13,4 +13,10 @@ describe('#getters', () => {
expect(getters.getReferrerHost(state)).toEqual('www.chatwoot.com');
});
});
describe('#getShowUnreadMessagesDialog', () => {
it('returns correct value', () => {
const state = { showUnreadMessagesDialog: true };
expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true);
});
});
});