From 74a90c01732f35855725ff2ded739a2ad020864d Mon Sep 17 00:00:00 2001 From: iamsivin Date: Mon, 11 Nov 2024 23:09:30 +0530 Subject: [PATCH] chore: Fix sidebar --- .../components-next/sidebar/Sidebar.vue | 200 ++++++++++-------- .../dashboard/i18n/locale/en/contact.json | 4 +- 2 files changed, 111 insertions(+), 93 deletions(-) diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue index 083566139..28c9fc06b 100644 --- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue +++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue @@ -7,6 +7,7 @@ import { useMapGetter } from 'dashboard/composables/store'; import { useStore } from 'vuex'; import { useI18n } from 'vue-i18n'; import { useStorage } from '@vueuse/core'; +import { FEATURE_FLAGS } from 'dashboard/featureFlags'; import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts'; import SidebarGroup from './SidebarGroup.vue'; @@ -59,7 +60,11 @@ provideSidebarContext({ const inboxes = useMapGetter('inboxes/getInboxes'); const labels = useMapGetter('labels/getLabelsOnSidebar'); const teams = useMapGetter('teams/getMyTeams'); +const currentAccountId = useMapGetter('getCurrentAccountId'); const contactCustomViews = useMapGetter('customViews/getContactCustomViews'); +const isFeatureEnabledonAccount = useMapGetter( + 'accounts/isFeatureEnabledonAccount' +); const conversationCustomViews = useMapGetter( 'customViews/getConversationCustomViews' ); @@ -78,6 +83,13 @@ const sortedInboxes = computed(() => inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name)) ); +const showV4Feature = computed(() => { + return isFeatureEnabledonAccount.value( + currentAccountId.value, + FEATURE_FLAGS.CHATWOOT_V4 + ); +}); + const menuItems = computed(() => { return [ { @@ -168,104 +180,108 @@ const menuItems = computed(() => { label: t('SIDEBAR.CAPTAIN'), to: accountScopedRoute('captain'), }, - { - name: 'Contacts', - label: t('SIDEBAR.CONTACTS'), - icon: 'i-lucide-contact', - activeOn: ['contacts_dashboard_index', 'contacts_dashboard_edit_index'], - children: [ - { - name: 'All Contacts', - label: t('SIDEBAR.ALL_CONTACTS'), - to: accountScopedRoute('contacts_dashboard_index'), + !showV4Feature.value + ? { + name: 'Contacts', + label: t('SIDEBAR.CONTACTS'), + icon: 'i-lucide-contact', + children: [ + { + name: 'All Contacts', + label: t('SIDEBAR.ALL_CONTACTS'), + to: accountScopedRoute('contacts_dashboard'), + }, + { + name: 'Segments', + icon: 'i-lucide-group', + label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'), + children: contactCustomViews.value.map(view => ({ + name: `${view.name}-${view.id}`, + label: view.name, + to: accountScopedRoute('contacts_segments_dashboard', { + id: view.id, + }), + })), + }, + { + name: 'Tagged With', + icon: 'i-lucide-tag', + label: t('SIDEBAR.TAGGED_WITH'), + children: labels.value.map(label => ({ + name: `${label.title}-${label.id}`, + label: label.title, + icon: h('span', { + class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`, + style: { backgroundColor: label.color }, + }), + to: accountScopedRoute('contacts_labels_dashboard', { + label: label.title, + }), + })), + }, + ], + } + : { + name: 'Contacts', + label: t('SIDEBAR.CONTACTS'), + icon: 'i-lucide-contact', activeOn: [ 'contacts_dashboard_index', 'contacts_dashboard_edit_index', ], - }, - { - name: 'Segments', - icon: 'i-lucide-group', - label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'), + children: [ + { + name: 'All Contacts', + label: t('SIDEBAR.ALL_CONTACTS'), + to: accountScopedRoute('contacts_dashboard_index'), + activeOn: [ + 'contacts_dashboard_index', + 'contacts_dashboard_edit_index', + ], + }, + { + name: 'Segments', + icon: 'i-lucide-group', + label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'), - children: contactCustomViews.value.map(view => ({ - name: `${view.name}-${view.id}`, - label: view.name, - to: accountScopedRoute('contacts_dashboard_segments_index', { - segmentId: view.id, - }), - activeOn: [ - 'contacts_dashboard_segments_index', - 'contacts_dashboard_segments_edit_index', - ], - })), - }, - { - name: 'Tagged With', - icon: 'i-lucide-tag', - label: t('SIDEBAR.TAGGED_WITH'), - activeOn: [ - 'contacts_dashboard_labels_index', - 'contacts_dashboard_labels_edit_index', + children: contactCustomViews.value.map(view => ({ + name: `${view.name}-${view.id}`, + label: view.name, + to: accountScopedRoute('contacts_dashboard_segments_index', { + segmentId: view.id, + }), + activeOn: [ + 'contacts_dashboard_segments_index', + 'contacts_dashboard_segments_edit_index', + ], + })), + }, + { + name: 'Tagged With', + icon: 'i-lucide-tag', + label: t('SIDEBAR.TAGGED_WITH'), + activeOn: [ + 'contacts_dashboard_labels_index', + 'contacts_dashboard_labels_edit_index', + ], + children: labels.value.map(label => ({ + name: `${label.title}-${label.id}`, + label: label.title, + icon: h('span', { + class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`, + style: { backgroundColor: label.color }, + }), + to: accountScopedRoute('contacts_dashboard_labels_index', { + label: label.title, + }), + activeOn: [ + 'contacts_dashboard_labels_index', + 'contacts_dashboard_labels_edit_index', + ], + })), + }, ], - children: labels.value.map(label => ({ - name: `${label.title}-${label.id}`, - label: label.title, - icon: h('span', { - class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`, - style: { backgroundColor: label.color }, - }), - to: accountScopedRoute('contacts_dashboard_labels_index', { - label: label.title, - }), - activeOn: [ - 'contacts_dashboard_labels_index', - 'contacts_dashboard_labels_edit_index', - ], - })), }, - ], - }, - { - name: 'Contacts', - label: t('SIDEBAR.CONTACTS'), - icon: 'i-lucide-contact', - children: [ - { - name: 'All Contacts', - label: t('SIDEBAR.ALL_CONTACTS'), - to: accountScopedRoute('contacts_dashboard'), - }, - { - name: 'Segments', - icon: 'i-lucide-group', - label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'), - children: contactCustomViews.value.map(view => ({ - name: `${view.name}-${view.id}`, - label: view.name, - to: accountScopedRoute('contacts_segments_dashboard', { - id: view.id, - }), - })), - }, - { - name: 'Tagged With', - icon: 'i-lucide-tag', - label: t('SIDEBAR.TAGGED_WITH'), - children: labels.value.map(label => ({ - name: `${label.title}-${label.id}`, - label: label.title, - icon: h('span', { - class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`, - style: { backgroundColor: label.color }, - }), - to: accountScopedRoute('contacts_labels_dashboard', { - label: label.title, - }), - })), - }, - ], - }, { name: 'Reports', label: t('SIDEBAR.REPORTS'), @@ -493,6 +509,8 @@ const menuItems = computed(() => { }, ]; }); + +console.log(menuItems.value);