From eff39fbbf5f9ecfd334f0a98a7d0258848afdd09 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 23 Jan 2025 18:08:41 +0530
Subject: [PATCH] feat: add showOnlyOnCloud flag

---
 .../dashboard/components-next/sidebar/Sidebar.vue    |  1 +
 .../components-next/sidebar/SidebarGroup.vue         |  2 ++
 .../components-next/sidebar/SidebarGroupLeaf.vue     | 12 +++++++++++-
 .../components-next/sidebar/SidebarSubGroup.vue      |  7 +++++--
 .../dashboard/components-next/sidebar/provider.js    |  4 ++++
 5 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 449ba9ada..509654013 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -455,6 +455,7 @@ const menuItems = computed(() => {
           name: 'Settings Billing',
           label: t('SIDEBAR.BILLING'),
           icon: 'i-lucide-credit-card',
+          showOnlyOnCloud: true,
           to: accountScopedRoute('billing_settings_index'),
         },
       ],
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 36caf61fe..e84a18fb8 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -23,6 +23,7 @@ const {
   resolvePath,
   resolvePermissions,
   resolveFeatureFlag,
+  isOnChatwootCloud,
   isAllowed,
 } = useSidebarContext();
 
@@ -41,6 +42,7 @@ const hasChildren = computed(
 const accessibleItems = computed(() => {
   if (!hasChildren.value) return [];
   return props.children.filter(child => {
+    if (child.showOnlyOnCloud && isOnChatwootCloud.value) return false;
     // If a item has no link, it means it's just a subgroup header
     // So we don't need to check for permissions here, because there's nothing to
     // access here anyway
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index 13bdb040d..94ca7bd78 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -9,18 +9,28 @@ const props = defineProps({
   to: { type: [String, Object], required: true },
   icon: { type: [String, Object], default: null },
   active: { type: Boolean, default: false },
+  showOnlyOnCloud: { type: Boolean, default: false },
   component: { type: Function, default: null },
 });
 
-const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
+const { resolvePermissions, resolveFeatureFlag, isOnChatwootCloud } =
+  useSidebarContext();
+
+const allowedToShow = computed(() => {
+  if (props.showOnlyOnCloud && isOnChatwootCloud) return false;
+
+  return true;
+});
 
 const shouldRenderComponent = computed(() => {
   return typeof props.component === 'function' || isVNode(props.component);
 });
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
+    v-if="allowedToShow"
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
index 52886ebde..f70293af2 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
@@ -15,11 +15,14 @@ const props = defineProps({
   activeChild: { type: Object, default: undefined },
 });
 
-const { isAllowed } = useSidebarContext();
+const { isAllowed, isOnChatwootCloud } = useSidebarContext();
 const scrollableContainer = ref(null);
 
 const accessibleItems = computed(() =>
-  props.children.filter(child => isAllowed(child.to))
+  props.children.filter(child => {
+    if (child.showOnlyOnCloud && isOnChatwootCloud.value) return false;
+    return child.to && isAllowed(child.to);
+  })
 );
 
 const hasAccessibleItems = computed(() => {
diff --git a/app/javascript/dashboard/components-next/sidebar/provider.js b/app/javascript/dashboard/components-next/sidebar/provider.js
index d6571dcd9..4d9973213 100644
--- a/app/javascript/dashboard/components-next/sidebar/provider.js
+++ b/app/javascript/dashboard/components-next/sidebar/provider.js
@@ -1,4 +1,5 @@
 import { inject, provide } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import { useRouter } from 'vue-router';
 
@@ -11,6 +12,8 @@ export function useSidebarContext() {
   }
 
   const router = useRouter();
+  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+
   const { checkFeatureAllowed, checkPermissions } = usePolicy();
 
   const resolvePath = to => {
@@ -41,6 +44,7 @@ export function useSidebarContext() {
     resolvePermissions,
     resolveFeatureFlag,
     isAllowed,
+    isOnChatwootCloud,
   };
 }