feat: Allow SaaS users to manage subscription within the dashboard (#5059)

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

@@ -19,6 +19,7 @@
       :custom-views="customViews"
       :menu-config="activeSecondaryMenu"
       :current-role="currentRole"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
       @add-label="showAddLabelPopup"
       @toggle-accounts="toggleAccountModal"
     />
@@ -67,6 +68,7 @@ export default {
     ...mapGetters({
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',

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

@@ -30,6 +30,7 @@ const settings = accountId => ({
     'settings_teams_edit',
     'settings_teams_edit_members',
     'settings_teams_edit_finish',
+    'billing_settings_index',
     'automation_list',
   ],
   menuItems: [
@@ -100,6 +101,14 @@ const settings = accountId => ({
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
     },
+    {
+      icon: 'credit-card-person',
+      label: 'BILLING',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/settings/billing`),
+      toStateName: 'billing_settings_index',
+      showOnlyOnCloud: true,
+    },
     {
       icon: 'settings',
       label: 'ACCOUNT_SETTINGS',

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

@@ -55,6 +55,10 @@ export default {
       type: String,
       default: '',
     },
+    isOnChatwootCloud: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     hasSecondaryMenu() {
@@ -67,12 +71,18 @@ export default {
       if (!this.currentRole) {
         return [];
       }
-      return this.menuConfig.menuItems.filter(
+      const menuItemsFilteredByRole = this.menuConfig.menuItems.filter(
         menuItem =>
           window.roleWiseRoutes[this.currentRole].indexOf(
             menuItem.toStateName
           ) > -1
       );
+      return menuItemsFilteredByRole.filter(item => {
+        if (item.showOnlyOnCloud) {
+          return this.isOnChatwootCloud;
+        }
+        return true;
+      });
     },
     inboxSection() {
       return {