Merge branch 'develop' into spike/permissions-for-agents

# Conflicts:
#	app/models/account_user.rb

app/javascript/dashboard/components/ChatList.vue

@@ -314,14 +314,28 @@ export default {
         unassigned: 'unAssignedCount',
         all: 'allCount',
       };
-      return Object.keys(ASSIGNEE_TYPE_TAB_KEYS).map(key => {
-        const count = this.conversationStats[ASSIGNEE_TYPE_TAB_KEYS[key]] || 0;
-        return {
-          key,
-          name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
-          count,
-        };
-      });
+      const userPermissions = this.currentUser.permissions;
+      const allowedTabs = {
+        me: ['conversation_manage', 'conversation_participating_manage'].some(
+          permission => userPermissions.includes(permission)
+        ),
+        unassigned: [
+          'conversation_manage',
+          'conversation_unassigned_manage',
+        ].some(permission => userPermissions.includes(permission)),
+        all: true,
+      };
+      return Object.keys(allowedTabs)
+        .filter(key => allowedTabs[key])
+        .map(key => {
+          const count =
+            this.conversationStats[ASSIGNEE_TYPE_TAB_KEYS[key]] || 0;
+          return {
+            key,
+            name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
+            count,
+          };
+        });
     },
     showAssigneeInConversationCard() {
       return (

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -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"
@@ -98,9 +98,12 @@ export default {
       return getSidebarItems(this.accountId);
     },
     primaryMenuItems() {
+      const permissions = this.currentUser.permissions;
       const menuItems = this.sideMenuConfig.primaryMenu;
       return menuItems.filter(menuItem => {
-        const isAvailableForTheUser = menuItem.roles.includes(this.currentRole);
+        const isAvailableForTheUser = permissions.some(permission =>
+          menuItem.meta.permissions.includes(permission)
+        );
 
         if (!isAvailableForTheUser) {
           return false;

app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js

@@ -11,6 +11,9 @@ const campaigns = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'ongoing_campaigns',
+      meta: {
+        permissions: ['account_manage'],
+      },
     },
     {
       key: 'oneOffCampaigns',
@@ -19,6 +22,9 @@ const campaigns = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
       toStateName: 'one_off',
+      meta: {
+        permissions: ['account_manage'],
+      },
     },
   ],
 });

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -14,6 +14,9 @@ const contacts = accountId => ({
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'contacts_dashboard',
     },
   ],

app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js

@@ -28,6 +28,9 @@ const conversations = accountId => ({
       key: 'conversations',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
       toolTip: 'Conversation from all subscribed inboxes',
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'home',
     },
     {
@@ -35,6 +38,9 @@ const conversations = accountId => ({
       label: 'MENTIONED_CONVERSATIONS',
       key: 'conversation_mentions',
       toState: frontendURL(`accounts/${accountId}/mentions/conversations`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'conversation_mentions',
     },
     {
@@ -42,6 +48,9 @@ const conversations = accountId => ({
       label: 'UNATTENDED_CONVERSATIONS',
       key: 'conversation_unattended',
       toState: frontendURL(`accounts/${accountId}/unattended/conversations`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'conversation_unattended',
     },
   ],

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -9,7 +9,14 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.INBOX_VIEW,
     toState: frontendURL(`accounts/${accountId}/inbox-view`),
     toStateName: 'inbox_view',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
   {
     icon: 'chat',
@@ -17,7 +24,14 @@ const primaryMenuItems = accountId => [
     label: 'CONVERSATIONS',
     toState: frontendURL(`accounts/${accountId}/dashboard`),
     toStateName: 'home',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
   {
     icon: 'book-contacts',
@@ -26,7 +40,14 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CRM,
     toState: frontendURL(`accounts/${accountId}/contacts`),
     toStateName: 'contacts_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
   {
     icon: 'arrow-trending-lines',
@@ -35,7 +56,9 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.REPORTS,
     toState: frontendURL(`accounts/${accountId}/reports`),
     toStateName: 'settings_account_reports',
-    roles: ['administrator'],
+    meta: {
+      permissions: ['account_manage'],
+    },
   },
   {
     icon: 'megaphone',
@@ -44,7 +67,9 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
     toStateName: 'ongoing_campaigns',
-    roles: ['administrator'],
+    meta: {
+      permissions: ['account_manage'],
+    },
   },
   {
     icon: 'library',
@@ -54,7 +79,9 @@ const primaryMenuItems = accountId => [
     alwaysVisibleOnChatwootInstances: true,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
-    roles: ['administrator'],
+    meta: {
+      permissions: ['account_manage'],
+    },
   },
   {
     icon: 'settings',
@@ -62,7 +89,14 @@ const primaryMenuItems = accountId => [
     label: 'SETTINGS',
     toState: frontendURL(`accounts/${accountId}/settings`),
     toStateName: 'settings_home',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
 ];
 

app/javascript/dashboard/components/layout/config/sidebarItems/reports.js

@@ -20,6 +20,9 @@ const reports = accountId => ({
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'account_overview_reports',
     },
     {
@@ -27,6 +30,9 @@ const reports = accountId => ({
       label: 'REPORTS_CONVERSATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/conversation`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'conversation_reports',
     },
     {
@@ -34,6 +40,9 @@ const reports = accountId => ({
       label: 'CSAT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'csat_reports',
     },
     {
@@ -42,6 +51,9 @@ const reports = accountId => ({
       hasSubMenu: false,
       featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
       toState: frontendURL(`accounts/${accountId}/reports/bot`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'bot_reports',
     },
     {
@@ -49,6 +61,9 @@ const reports = accountId => ({
       label: 'REPORTS_AGENT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/agent`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'agent_reports',
     },
     {
@@ -56,6 +71,9 @@ const reports = accountId => ({
       label: 'REPORTS_LABEL',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/label`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'label_reports',
     },
     {
@@ -63,6 +81,9 @@ const reports = accountId => ({
       label: 'REPORTS_INBOX',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'inbox_reports',
     },
     {
@@ -70,6 +91,9 @@ const reports = accountId => ({
       label: 'REPORTS_TEAM',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'team_reports',
     },
     {
@@ -78,6 +102,9 @@ const reports = accountId => ({
       hasSubMenu: false,
       featureFlag: FEATURE_FLAGS.SLA,
       toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'sla_reports',
     },
   ],

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -47,6 +47,9 @@ const settings = accountId => ({
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/general`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'general_settings_index',
     },
     {
@@ -55,6 +58,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
     },
     {
@@ -63,6 +69,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
     },
     {
@@ -71,6 +80,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
     },
     {
@@ -79,6 +91,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.LABELS,
     },
     {
@@ -89,6 +104,9 @@ const settings = accountId => ({
         `accounts/${accountId}/settings/custom-attributes/list`
       ),
       toStateName: 'attributes_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.CUSTOM_ATTRIBUTES,
     },
     {
@@ -97,6 +115,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.AUTOMATIONS,
     },
     {
@@ -106,6 +127,9 @@ const settings = accountId => ({
       globalConfigFlag: 'csmlEditorHost',
       toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
       toStateName: 'agent_bots',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.AGENT_BOTS,
     },
     {
@@ -114,6 +138,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/macros`),
       toStateName: 'macros_wrapper',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.MACROS,
     },
     {
@@ -124,6 +151,9 @@ const settings = accountId => ({
         `accounts/${accountId}/settings/canned-response/list`
       ),
       toStateName: 'canned_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.CANNED_RESPONSES,
     },
     {
@@ -132,6 +162,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
       toStateName: 'settings_integrations',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
     {
@@ -140,6 +173,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
     {
@@ -150,6 +186,9 @@ const settings = accountId => ({
       toStateName: 'auditlogs_list',
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
+      meta: {
+        permissions: ['account_manage'],
+      },
       beta: true,
     },
     {
@@ -160,6 +199,9 @@ const settings = accountId => ({
       toStateName: 'sla_list',
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.SLA,
+      meta: {
+        permissions: ['account_manage'],
+      },
       beta: true,
     },
     {
@@ -168,6 +210,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/billing`),
       toStateName: 'billing_settings_index',
+      meta: {
+        permissions: ['account_manage'],
+      },
       showOnlyOnCloud: true,
     },
   ],

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -60,9 +60,9 @@ export default {
       type: Object,
       default: () => {},
     },
-    currentRole: {
-      type: String,
-      default: '',
+    currentUser: {
+      type: Object,
+      default: () => {},
     },
     isOnChatwootCloud: {
       type: Boolean,
@@ -80,16 +80,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 { meta: { permissions: menuPermissions = [] } = {} } = menuItem;
+          const { permissions: userPermissions = [] } = this.currentUser;
+          return menuPermissions.some(permission =>
+            userPermissions.includes(permission)
+          );
+        }
       );
-      return menuItemsFilteredByRole.filter(item => {
+      return menuItemsFilteredByPermissions.filter(item => {
         if (item.showOnlyOnCloud) {
           return this.isOnChatwootCloud;
         }

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -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="['account_manage']">
+        <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

@@ -0,0 +1,24 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+
+const props = defineProps({
+  permissions: {
+    type: Array,
+    required: true,
+  },
+});
+
+const getters = useStoreGetters();
+const user = getters.getCurrentUser.value;
+
+const hasPermission = computed(() =>
+  props.permissions.some(permission => user.permissions.includes(permission))
+);
+</script>
+
+<template>
+  <div v-if="hasPermission">
+    <slot />
+  </div>
+</template>

app/javascript/dashboard/constants/permissions.js

@@ -0,0 +1,10 @@
+export const ACCOUNT_PERMISSIONS = {
+  ACCOUNT_MANAGE: 'account_manage',
+  PORTAL_MANAGE: 'portal_manage',
+  CONVERSATION_MANAGE: 'conversation_manage',
+  CONVERSATION_UNASSIGNED_MANAGE: 'conversation_unassigned_manage',
+  CONVERSATION_PARTICIPATING_MANAGE: 'conversation_participating_manage',
+  MACROS_MANAGE: 'macros_manage',
+  REPORTS_MANAGE: 'reports_manage',
+  CONTACTS_MANAGE: 'contacts_manage',
+};

app/javascript/dashboard/helper/routeHelpers.js

@@ -3,17 +3,14 @@ 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 routePermissions.some(permissions =>
+    userPermissions.includes(permissions)
+  );
 };
 
-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/modules/search/search.routes.js

@@ -7,7 +7,14 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/search'),
     name: 'search',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: SearchView,
   },
 ];

app/javascript/dashboard/routes/dashboard/contacts/routes.js

@@ -7,13 +7,27 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts'),
     name: 'contacts_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ContactsView,
   },
   {
     path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
     name: 'contacts_segments_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ContactsView,
     props: route => {
       return { segmentsId: route.params.id };
@@ -22,7 +36,14 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/labels/:label/contacts'),
     name: 'contacts_labels_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ContactsView,
     props: route => {
       return { label: route.params.label };
@@ -31,7 +52,14 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
     name: 'contact_profile_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ContactManageView,
     props: route => {
       return { contactId: route.params.contactId };

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -1,13 +1,21 @@
 /* eslint arrow-body-style: 0 */
+import { ACCOUNT_PERMISSIONS } from '../../../constants/permissions';
 import { frontendURL } from '../../../helper/URLHelper';
 const ConversationView = () => import('./ConversationView');
 
+const GENERIC_CONVERSATION_PERMISSIONS = [
+  ACCOUNT_PERMISSIONS.ACCOUNT_MANAGE,
+  ACCOUNT_PERMISSIONS.CONVERSATION_MANAGE,
+  ACCOUNT_PERMISSIONS.CONVERSATION_PARTICIPATING_MANAGE,
+  ACCOUNT_PERMISSIONS.CONVERSATION_UNASSIGNED_MANAGE,
+];
+
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: () => {
         return { inboxId: 0 };
@@ -16,7 +24,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/conversations/:conversation_id'),
       name: 'inbox_conversation',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => {
         return { inboxId: 0, conversationId: route.params.conversation_id };
@@ -25,7 +33,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
       name: 'inbox_dashboard',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => {
         return { inboxId: route.params.inbox_id };
@@ -36,7 +44,7 @@ export default {
         'accounts/:accountId/inbox/:inbox_id/conversations/:conversation_id'
       ),
       name: 'conversation_through_inbox',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => {
         return {
@@ -48,7 +56,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/label/:label'),
       name: 'label_conversations',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({ label: route.params.label }),
     },
@@ -57,7 +65,7 @@ export default {
         'accounts/:accountId/label/:label/conversations/:conversation_id'
       ),
       name: 'conversations_through_label',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversation_id,
@@ -67,7 +75,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/team/:teamId'),
       name: 'team_conversations',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({ teamId: route.params.teamId }),
     },
@@ -76,7 +84,7 @@ export default {
         'accounts/:accountId/team/:teamId/conversations/:conversationId'
       ),
       name: 'conversations_through_team',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -86,7 +94,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/custom_view/:id'),
       name: 'folder_conversations',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({ foldersId: route.params.id }),
     },
@@ -95,7 +103,7 @@ export default {
         'accounts/:accountId/custom_view/:id/conversations/:conversation_id'
       ),
       name: 'conversations_through_folders',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversation_id,
@@ -105,7 +113,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/mentions/conversations'),
       name: 'conversation_mentions',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: () => ({ conversationType: 'mention' }),
     },
@@ -114,7 +122,7 @@ export default {
         'accounts/:accountId/mentions/conversations/:conversationId'
       ),
       name: 'conversation_through_mentions',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -124,7 +132,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/unattended/conversations'),
       name: 'conversation_unattended',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: () => ({ conversationType: 'unattended' }),
     },
@@ -133,7 +141,7 @@ export default {
         'accounts/:accountId/unattended/conversations/:conversationId'
       ),
       name: 'conversation_through_unattended',
-      roles: ['administrator', 'agent'],
+      meta: { permissions: GENERIC_CONVERSATION_PERMISSIONS },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -143,8 +151,13 @@ export default {
     {
       path: frontendURL('accounts/:accountId/participating/conversations'),
       name: 'conversation_participating',
-      roles: ['administrator', 'agent'],
       component: ConversationView,
+      meta: {
+        permissions: [
+          ACCOUNT_PERMISSIONS.CONVERSATION_MANAGE,
+          ACCOUNT_PERMISSIONS.CONVERSATION_PARTICIPATING_MANAGE,
+        ],
+      },
       props: () => ({ conversationType: 'participating' }),
     },
     {
@@ -152,8 +165,13 @@ export default {
         'accounts/:accountId/participating/conversations/:conversationId'
       ),
       name: 'conversation_through_participating',
-      roles: ['administrator', 'agent'],
       component: ConversationView,
+      meta: {
+        permissions: [
+          ACCOUNT_PERMISSIONS.CONVERSATION_MANAGE,
+          ACCOUNT_PERMISSIONS.CONVERSATION_PARTICIPATING_MANAGE,
+        ],
+      },
       props: route => ({
         conversationId: route.params.conversationId,
         conversationType: 'participating',

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -28,7 +28,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/suspended'),
       name: 'account_suspended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['profile_manage'],
+      },
       component: Suspended,
     },
   ],

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -30,13 +30,27 @@ const portalRoutes = [
   {
     path: getPortalRoute(''),
     name: 'default_portal_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: DefaultPortalArticles,
   },
   {
     path: getPortalRoute('all'),
     name: 'list_all_portals',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllPortals,
   },
   {
@@ -47,55 +61,88 @@ const portalRoutes = [
         path: '',
         name: 'new_portal_information',
         component: PortalDetails,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['account_manage'],
+        },
       },
       {
         path: ':portalSlug/customization',
         name: 'portal_customization',
         component: PortalCustomization,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['account_manage'],
+        },
       },
       {
         path: ':portalSlug/finish',
         name: 'portal_finish',
         component: PortalSettingsFinish,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['account_manage'],
+        },
       },
     ],
   },
   {
     path: getPortalRoute(':portalSlug'),
     name: 'portalSlug',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ShowPortal,
   },
   {
     path: getPortalRoute(':portalSlug/edit'),
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: EditPortal,
     children: [
       {
         path: '',
         name: 'edit_portal_information',
         component: EditPortalBasic,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['account_manage'],
+        },
       },
       {
         path: 'customizations',
         name: 'edit_portal_customization',
         component: EditPortalCustomization,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['account_manage'],
+        },
       },
       {
         path: 'locales',
         name: 'edit_portal_locales',
         component: EditPortalLocales,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['account_manage'],
+        },
       },
       {
         path: 'categories',
         name: 'list_all_locale_categories',
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: [
+            'account_manage',
+            'conversation_manage',
+            'conversation_participating_manage',
+            'conversation_unassigned_manage',
+          ],
+        },
         component: ListAllCategories,
       },
     ],
@@ -106,39 +153,81 @@ const articleRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/articles'),
     name: 'list_all_locale_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/new'),
     name: 'new_article',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: NewArticle,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/mine'),
     name: 'list_mine_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/archived'),
     name: 'list_archived_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/draft'),
     name: 'list_draft_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
     name: 'edit_article',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: EditArticle,
   },
 ];
@@ -147,19 +236,40 @@ const categoryRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
     name: 'all_locale_categories',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllCategories,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/new'),
     name: 'new_category_in_locale',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: NewCategory,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'show_category',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListAllArticles,
   },
   {
@@ -167,13 +277,27 @@ const categoryRoutes = [
       ':portalSlug/:locale/categories/:categorySlug/articles'
     ),
     name: 'show_category_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: ListCategoryArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'edit_category',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
     component: EditCategory,
   },
 ];

app/javascript/dashboard/routes/dashboard/inbox/routes.js

@@ -12,13 +12,27 @@ export const routes = [
         path: '',
         name: 'inbox_view',
         component: InboxEmptyStateView,
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: [
+            'account_manage',
+            'conversation_manage',
+            'conversation_participating_manage',
+            'conversation_unassigned_manage',
+          ],
+        },
       },
       {
         path: ':notification_id',
         name: 'inbox_view_conversation',
         component: InboxDetailView,
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: [
+            'account_manage',
+            'conversation_manage',
+            'conversation_participating_manage',
+            'conversation_unassigned_manage',
+          ],
+        },
       },
     ],
   },

app/javascript/dashboard/routes/dashboard/notifications/routes.js

@@ -18,7 +18,14 @@ export const routes = [
         path: '',
         name: 'notifications_index',
         component: NotificationsView,
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: [
+            'account_manage',
+            'conversation_manage',
+            'conversation_participating_manage',
+            'conversation_unassigned_manage',
+          ],
+        },
       },
     ],
   },

app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js

@@ -6,7 +6,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/general'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['account_manage'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
           path: '',
           name: 'general_settings_index',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js

@@ -8,7 +8,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/agent-bots'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['account_manage'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_BOTS.HEADER',
@@ -20,19 +22,25 @@ export default {
           path: '',
           name: 'agent_bots',
           component: Bot,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'csml/new',
           name: 'agent_bots_csml_new',
           component: CsmlNewBot,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'csml/:botId',
           name: 'agent_bots_csml_edit',
           component: CsmlEditBot,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js

@@ -22,7 +22,9 @@ export default {
           path: 'list',
           name: 'agent_list',
           component: AgentHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js

@@ -22,7 +22,9 @@ export default {
           path: 'list',
           name: 'attributes_list',
           component: AttributesHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js

@@ -22,7 +22,9 @@ export default {
         {
           path: 'list',
           name: 'auditlogs_list',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: AuditLogsHome,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js

@@ -22,7 +22,9 @@ export default {
           path: 'list',
           name: 'automation_list',
           component: Automation,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js

@@ -6,7 +6,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/billing'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['account_manage'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'BILLING_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
           path: '',
           name: 'billing_settings_index',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js

@@ -19,7 +19,9 @@ export default {
         {
           path: 'ongoing',
           name: 'ongoing_campaigns',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: Index,
         },
       ],
@@ -35,7 +37,9 @@ export default {
         {
           path: 'one_off',
           name: 'one_off',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: Index,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js

@@ -22,7 +22,14 @@ export default {
         {
           path: 'list',
           name: 'canned_list',
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: [
+              'account_manage',
+              'conversation_manage',
+              'conversation_participating_manage',
+              'conversation_unassigned_manage',
+            ],
+          },
           component: CannedHome,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js

@@ -35,7 +35,9 @@ export default {
           path: 'list',
           name: 'settings_inbox_list',
           component: InboxHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'new',
@@ -45,19 +47,25 @@ export default {
               path: '',
               name: 'settings_inbox_new',
               component: ChannelList,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
             },
             {
               path: ':inbox_id/finish',
               name: 'settings_inbox_finish',
               component: FinishSetup,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
             },
             {
               path: ':sub_page',
               name: 'settings_inboxes_page_channel',
               component: channelFactory.create(),
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
               props: route => {
                 return { channel_name: route.params.sub_page };
               },
@@ -65,7 +73,9 @@ export default {
             {
               path: ':inbox_id/agents',
               name: 'settings_inboxes_add_agents',
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
               component: AddAgents,
             },
           ],
@@ -74,7 +84,9 @@ export default {
           path: ':inboxId',
           name: 'settings_inbox_show',
           component: Settings,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js

@@ -26,13 +26,17 @@ export default {
           path: '',
           name: 'settings_applications',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: ':integration_id',
           name: 'settings_applications_integration',
           component: IntegrationHooks,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           props: route => ({
             integrationId: route.params.integration_id,
           }),

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -30,32 +30,42 @@ export default {
           path: '',
           name: 'settings_integrations',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'webhook',
           component: Webhook,
           name: 'settings_integrations_webhook',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'dashboard-apps',
           component: DashboardApps,
           name: 'settings_integrations_dashboard_apps',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'slack',
           name: 'settings_integrations_slack',
           component: Slack,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           props: route => ({ code: route.query.code }),
         },
         {
           path: ':integration_id',
           name: 'settings_integrations_integration',
           component: ShowIntegration,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           props: route => {
             return {
               integrationId: route.params.integration_id,

app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js

@@ -17,13 +17,17 @@ export default {
         {
           path: '',
           name: 'labels_wrapper',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'labels_list',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: Index,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js

@@ -23,19 +23,40 @@ export default {
           path: '',
           name: 'macros_wrapper',
           component: Macros,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: [
+              'account_manage',
+              'conversation_manage',
+              'conversation_participating_manage',
+              'conversation_unassigned_manage',
+            ],
+          },
         },
         {
           path: 'new',
           name: 'macros_new',
           component: MacroEditor,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: [
+              'account_manage',
+              'conversation_manage',
+              'conversation_participating_manage',
+              'conversation_unassigned_manage',
+            ],
+          },
         },
         {
           path: ':macroId/edit',
           name: 'macros_edit',
           component: MacroEditor,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: [
+              'account_manage',
+              'conversation_manage',
+              'conversation_participating_manage',
+              'conversation_unassigned_manage',
+            ],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js

@@ -8,14 +8,28 @@ export default {
     {
       path: frontendURL('accounts/:accountId/profile'),
       name: 'profile_settings',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: [
+          'account_manage',
+          'conversation_manage',
+          'conversation_participating_manage',
+          'conversation_unassigned_manage',
+        ],
+      },
       component: SettingsContent,
       children: [
         {
           path: 'settings',
           name: 'profile_settings_index',
           component: Index,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: [
+              'account_manage',
+              'conversation_manage',
+              'conversation_participating_manage',
+              'conversation_unassigned_manage',
+            ],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js

@@ -29,7 +29,9 @@ export default {
         {
           path: 'overview',
           name: 'account_overview_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: LiveReports,
         },
       ],
@@ -46,7 +48,9 @@ export default {
         {
           path: 'conversation',
           name: 'conversation_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: Index,
         },
       ],
@@ -63,7 +67,9 @@ export default {
         {
           path: 'csat',
           name: 'csat_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: CsatResponses,
         },
       ],
@@ -80,7 +86,9 @@ export default {
         {
           path: 'bot',
           name: 'bot_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: BotReports,
         },
       ],
@@ -97,7 +105,9 @@ export default {
         {
           path: 'agent',
           name: 'agent_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: AgentReports,
         },
       ],
@@ -114,7 +124,9 @@ export default {
         {
           path: 'label',
           name: 'label_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: LabelReports,
         },
       ],
@@ -131,7 +143,9 @@ export default {
         {
           path: 'inboxes',
           name: 'inbox_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: InboxReports,
         },
       ],
@@ -147,7 +161,9 @@ export default {
         {
           path: 'teams',
           name: 'team_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: TeamReports,
         },
       ],
@@ -164,7 +180,9 @@ export default {
         {
           path: 'sla',
           name: 'sla_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: SLAReports,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/settings.routes.js

@@ -24,7 +24,14 @@ export default {
     {
       path: frontendURL('accounts/:accountId/settings'),
       name: 'settings_home',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: [
+          'account_manage',
+          'conversation_manage',
+          'conversation_participating_manage',
+          'conversation_unassigned_manage',
+        ],
+      },
       redirect: () => {
         if (store.getters.getCurrentRole === 'administrator') {
           return frontendURL('accounts/:accountId/settings/general');

app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js

@@ -13,13 +13,17 @@ export default {
         {
           path: '',
           name: 'sla_wrapper',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'sla_list',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
           component: Index,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js

@@ -36,7 +36,9 @@ export default {
           path: 'list',
           name: 'settings_teams_list',
           component: TeamsHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['account_manage'],
+          },
         },
         {
           path: 'new',
@@ -46,18 +48,24 @@ export default {
               path: '',
               name: 'settings_teams_new',
               component: CreateTeam,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
             },
             {
               path: ':teamId/finish',
               name: 'settings_teams_finish',
               component: FinishSetup,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
             },
             {
               path: ':teamId/agents',
               name: 'settings_teams_add_agents',
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
               component: AddAgents,
             },
           ],
@@ -70,18 +78,24 @@ export default {
               path: '',
               name: 'settings_teams_edit',
               component: EditTeam,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
             },
             {
               path: 'agents',
               name: 'settings_teams_edit_members',
               component: EditAgents,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
             },
             {
               path: 'finish',
               name: 'settings_teams_edit_finish',
-              roles: ['administrator'],
+              meta: {
+                permissions: ['account_manage'],
+              },
               component: FinishSetup,
             },
           ],

app/javascript/dashboard/routes/index.js

@@ -8,29 +8,6 @@ import AnalyticsHelper from '../helper/AnalyticsHelper';
 
 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 validateAuthenticateRoutePermission = (to, next, { getters }) => {
@@ -45,11 +22,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/models/account_user.rb

@@ -50,7 +50,11 @@ class AccountUser < ApplicationRecord
   end
 
   def permissions
-    administrator? ? ['administrator'] : ['agent']
+    if administrator?
+      GlobalConfigService.load('CHATWOOT_ADMIN_PERMISSIONS', 'account_manage').split(',')
+    else
+      GlobalConfigService.load('CHATWOOT_AGENT_PERMISSIONS', 'conversation_manage').split(',')
+    end
   end
 
   def push_event_data

config/installation_config.yml

@@ -168,6 +168,14 @@
   display_title: 'Dashboard Scripts'
   description: 'Scripts are loaded as the last item in the <body> tag'
   type: code
+- name: CHATWOOT_ADMIN_PERMISSIONS
+  value:
+  display_title: Chatwoot Admin Permissions
+  description: 'Comma separated list of permissions for a Chatwoot admin'
+- name: CHATWOOT_AGENT_PERMISSIONS
+  value:
+  display_title: Chatwoot Agent Permissions
+  description: 'Comma separated list of permissions for a Chatwoot agent'
 # ------- End of Chatwoot Internal Config for Cloud ----#
 
 # ------- Chatwoot Internal Config for Self Hosted ----#

enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb

@@ -30,6 +30,7 @@ module Enterprise::SuperAdmin::AppConfigsController
   end
 
   def internal_config_options
-    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS]
+    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS CHATWOOT_ADMIN_PERMISSIONS
+       CHATWOOT_AGENT_PERMISSIONS]
   end
 end