chore: Add an option to enable accounts with billing only access

app/javascript/dashboard/constants/permissions.js

@@ -1,20 +1,3 @@
-export const AVAILABLE_CUSTOM_ROLE_PERMISSIONS = [
-  'conversation_manage',
-  'conversation_unassigned_manage',
-  'conversation_participating_manage',
-  'contact_manage',
-  'report_manage',
-  'knowledge_base_manage',
-];
-
-export const ROLES = ['agent', 'administrator'];
-
-export const CONVERSATION_PERMISSIONS = [
-  'conversation_manage',
-  'conversation_unassigned_manage',
-  'conversation_participating_manage',
-];
-
 export const MANAGE_ALL_CONVERSATION_PERMISSIONS = 'conversation_manage';
 
 export const CONVERSATION_UNASSIGNED_PERMISSIONS =
@@ -29,6 +12,27 @@ export const REPORTS_PERMISSIONS = 'report_manage';
 
 export const PORTAL_PERMISSIONS = 'knowledge_base_manage';
 
+export const BILLING_PERMISSIONS = 'billing_manage';
+
+export const AVAILABLE_CUSTOM_ROLE_PERMISSIONS = [
+  MANAGE_ALL_CONVERSATION_PERMISSIONS,
+  CONVERSATION_UNASSIGNED_PERMISSIONS,
+  CONVERSATION_PARTICIPATING_PERMISSIONS,
+  CONTACT_PERMISSIONS,
+  REPORTS_PERMISSIONS,
+  PORTAL_PERMISSIONS,
+];
+
+export const CHATWOOT_CLOUD_ONLY_CUSTOM_ROLES = [BILLING_PERMISSIONS];
+
+export const ROLES = ['agent', 'administrator'];
+
+export const CONVERSATION_PERMISSIONS = [
+  MANAGE_ALL_CONVERSATION_PERMISSIONS,
+  CONVERSATION_UNASSIGNED_PERMISSIONS,
+  CONVERSATION_PARTICIPATING_PERMISSIONS,
+];
+
 export const ASSIGNEE_TYPE_TAB_PERMISSIONS = {
   me: {
     count: 'mineCount',

app/javascript/dashboard/helper/routeHelpers.js

@@ -10,6 +10,7 @@ import {
   CONTACT_PERMISSIONS,
   REPORTS_PERMISSIONS,
   PORTAL_PERMISSIONS,
+  BILLING_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
 export const routeIsAccessibleFor = (route, userPermissions = []) => {
@@ -28,6 +29,7 @@ export const defaultRedirectPage = (to, permissions) => {
     { permissions: [CONTACT_PERMISSIONS], path: 'contacts' },
     { permissions: [REPORTS_PERMISSIONS], path: 'reports/overview' },
     { permissions: [PORTAL_PERMISSIONS], path: 'portals' },
+    { permissions: [BILLING_PERMISSIONS], path: 'settings/billing' },
   ];
 
   const route = permissionRoutes.find(({ permissions: routePermissions }) =>

app/javascript/dashboard/i18n/locale/en/customRole.json

@@ -35,7 +35,8 @@
       "CONVERSATION_PARTICIPATING_MANAGE": "Manage participating conversations and those assigned to them",
       "CONTACT_MANAGE": "Manage contacts",
       "REPORT_MANAGE": "Manage reports",
-      "KNOWLEDGE_BASE_MANAGE": "Manage knowledge base"
+      "KNOWLEDGE_BASE_MANAGE": "Manage knowledge base",
+      "BILLING_MANAGE": "Manage billing"
     },
     "FORM": {
       "NAME": {

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

@@ -8,7 +8,7 @@ export default {
     {
       path: frontendURL('accounts/:accountId/settings/billing'),
       meta: {
-        permissions: ['administrator'],
+        permissions: ['billing_manage', 'administrator'],
         installationTypes: [INSTALLATION_TYPES.CLOUD],
       },
       component: SettingsWrapper,
@@ -24,7 +24,7 @@ export default {
           component: Index,
           meta: {
             installationTypes: [INSTALLATION_TYPES.CLOUD],
-            permissions: ['administrator'],
+            permissions: ['billing_manage', 'administrator'],
           },
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { ref, reactive, computed, onMounted, watch } from 'vue';
-import { useStore } from 'dashboard/composables/store';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import {
   AVAILABLE_CUSTOM_ROLE_PERMISSIONS,
+  CHATWOOT_CLOUD_ONLY_CUSTOM_ROLES,
   MANAGE_ALL_CONVERSATION_PERMISSIONS,
   CONVERSATION_UNASSIGNED_PERMISSIONS,
   CONVERSATION_PARTICIPATING_PERMISSIONS,
@@ -109,6 +110,17 @@ const getTranslationKey = base => {
     : `CUSTOM_ROLE.ADD.${base}`;
 };
 
+const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+const availablePermissions = computed(() => {
+  if (!isOnChatwootCloud.value) {
+    return AVAILABLE_CUSTOM_ROLE_PERMISSIONS;
+  }
+  return [
+    ...AVAILABLE_CUSTOM_ROLE_PERMISSIONS,
+    ...CHATWOOT_CLOUD_ONLY_CUSTOM_ROLES,
+  ];
+});
+
 const modalTitle = computed(() => t(getTranslationKey('TITLE')));
 const modalDescription = computed(() => t(getTranslationKey('DESC')));
 const submitButtonText = computed(() => t(getTranslationKey('SUBMIT')));
@@ -191,7 +203,7 @@ const isSubmitDisabled = computed(
         </label>
         <div class="flex flex-col gap-2.5 mb-4 mt-2">
           <div
-            v-for="permission in AVAILABLE_CUSTOM_ROLE_PERMISSIONS"
+            v-for="permission in availablePermissions"
             :key="permission"
             class="flex items-center"
           >

enterprise/app/models/custom_role.rb

@@ -23,6 +23,7 @@
 # - 'contact_manage': Can manage contacts.
 # - 'report_manage': Can manage reports.
 # - 'knowledge_base_manage': Can manage knowledge base portals.
+# - 'billing_manage': Can manage billing.
 
 class CustomRole < ApplicationRecord
   belongs_to :account
@@ -35,6 +36,7 @@ class CustomRole < ApplicationRecord
     contact_manage
     report_manage
     knowledge_base_manage
+    billing_manage
   ].freeze
 
   validates :name, presence: true