fix: added integrations section and show settings if installed

crm/api/whatsapp.py

@@ -96,6 +96,12 @@ def is_whatsapp_enabled():
         return False
     return frappe.get_cached_value("WhatsApp Settings", "WhatsApp Settings", "enabled")
 
+@frappe.whitelist()
+def is_whatsapp_installed():
+    if not frappe.db.exists("DocType", "WhatsApp Settings"):
+        return False
+    return True
+
 
 @frappe.whitelist()
 def get_whatsapp_messages(reference_doctype, reference_name):

frontend/src/components/Settings/SettingsModal.vue

@@ -6,7 +6,7 @@
           <h1 class="px-2 pt-2 text-lg font-semibold">
             {{ __('Settings') }}
           </h1>
-          <div class="mt-3 space-y-1">
+          <nav class="mt-3 space-y-1">
             <SidebarLink
               v-for="tab in tabs"
               :icon="tab.icon"
@@ -19,7 +19,26 @@
               "
               @click="activeTab = tab"
             />
+          </nav>
+          <div
+            class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+          >
+            <span>{{ __('Integrations') }}</span>
           </div>
+          <nav class="space-y-1">
+            <SidebarLink
+              v-for="i in integrations"
+              :icon="i.icon"
+              :label="__(i.label)"
+              class="w-full"
+              :class="
+                activeTab?.label == i.label
+                  ? 'bg-white shadow-sm'
+                  : 'hover:bg-gray-100'
+              "
+              @click="activeTab = i"
+            />
+          </nav>
         </div>
         <div class="flex flex-1 flex-col overflow-y-auto p-12 pt-10">
           <component :is="activeTab.component" v-if="activeTab" />
@@ -29,13 +48,15 @@
   </Dialog>
 </template>
 <script setup>
-import { ref, markRaw } from 'vue'
-import { Dialog } from 'frappe-ui'
-import SidebarLink from '@/components/SidebarLink.vue'
-import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
-import AgentSettings from '@/components/Settings/AgentSettings.vue'
-import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
+import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
+import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
+import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import { isWhatsappInstalled } from '@/composables/settings'
+import { Dialog, FeatherIcon } from 'frappe-ui'
+import { ref, markRaw, h, computed } from 'vue'
 
 const show = defineModel()
 
@@ -45,12 +66,27 @@ let tabs = [
     icon: ContactsIcon,
     component: markRaw(ProfileSettings),
   },
-  {
-    label: 'Agents',
-    icon: LeadsIcon,
-    component: markRaw(AgentSettings),
-  },
 ]
 
+let integrations = computed(() => {
+  let items = [
+    {
+      label: 'Twilio',
+      icon: h(FeatherIcon, { name: 'phone' }),
+      component: markRaw(TwilioSettings),
+    },
+  ]
+
+  if (isWhatsappInstalled.value) {
+    items.push({
+      label: 'WhatsApp',
+      icon: WhatsAppIcon,
+      component: markRaw(WhatsAppSettings),
+    })
+  }
+
+  return items
+})
+
 const activeTab = ref(tabs[0])
 </script>

frontend/src/components/Settings/TwilioSettings.vue

@@ -1,3 +1,3 @@
 <template>
-    Agent Settings
+    Twilio Settings
 </template>

frontend/src/components/Settings/WhatsAppSettings.vue

@@ -0,0 +1,3 @@
+<template>
+    WhatsApp Settings
+</template>

frontend/src/composables/settings.js

@@ -2,6 +2,7 @@ import { createResource } from 'frappe-ui'
 import { computed, ref } from 'vue'
 
 export const whatsappEnabled = ref(false)
+export const isWhatsappInstalled = ref(false)
 createResource({
   url: 'crm.api.whatsapp.is_whatsapp_enabled',
   cache: 'Is Whatsapp Enabled',
@@ -10,6 +11,15 @@ createResource({
     whatsappEnabled.value = Boolean(data)
   },
 })
+createResource({
+  url: 'crm.api.whatsapp.is_whatsapp_installed',
+  cache: 'Is Whatsapp Installed',
+  auto: true,
+  onSuccess: (data) => {
+    isWhatsappInstalled.value = Boolean(data)
+  },
+})
+
 export const callEnabled = ref(false)
 createResource({
   url: 'crm.integrations.twilio.api.is_enabled',