feat: Add inbox view page (#8814)

* feat: Add inbox view page

* Update accounts.js

* Update index.js

app/javascript/dashboard/featureFlags.js

@@ -17,4 +17,5 @@ export const FEATURE_FLAGS = {
   VOICE_RECORDER: 'voice_recorder',
   AUDIT_LOGS: 'audit_logs',
   INSERT_ARTICLE_IN_REPLY: 'insert_article_in_reply',
+  INBOX_VIEW: 'inbox_view',
 };

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

@@ -90,6 +90,9 @@
       "conversation_mention": "Mention"
     }
   },
+  "INBOX_PAGE": {
+    "HEADER": "Inbox"
+  },
   "NETWORK": {
     "NOTIFICATION": {
       "OFFLINE": "Offline"

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -5,6 +5,7 @@ import { routes as contactRoutes } from './contacts/routes';
 import { routes as notificationRoutes } from './notifications/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
+import { routes as inboxRoutes } from './inbox/routes';
 
 const AppContainer = () => import('./Dashboard.vue');
 const Suspended = () => import('./suspended/Index.vue');
@@ -21,6 +22,7 @@ export default {
         ...contactRoutes,
         ...searchRoutes,
         ...notificationRoutes,
+        ...inboxRoutes,
       ],
     },
     {

app/javascript/dashboard/routes/dashboard/inbox/components/InboxView.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1>Inbox View</h1>
+</template>
+
+<script setup></script>

app/javascript/dashboard/routes/dashboard/inbox/routes.js

@@ -0,0 +1,25 @@
+/* eslint arrow-body-style: 0 */
+import { frontendURL } from '../../../helper/URLHelper';
+const SettingsWrapper = () => import('../settings/Wrapper.vue');
+const InboxView = () => import('./components/InboxView.vue');
+
+export const routes = [
+  {
+    path: frontendURL('accounts/:accountId/inbox'),
+    component: SettingsWrapper,
+    props: {
+      headerTitle: 'INBOX_PAGE.HEADER',
+      icon: 'alert',
+      showNewButton: false,
+      showSidemenuIcon: false,
+    },
+    children: [
+      {
+        path: '',
+        name: 'inbox_index',
+        component: InboxView,
+        roles: ['administrator', 'agent'],
+      },
+    ],
+  },
+];

app/javascript/dashboard/routes/index.js

@@ -5,6 +5,7 @@ import dashboard from './dashboard/dashboard.routes';
 import store from '../store';
 import { validateLoggedInRoutes } from '../helper/routeHelpers';
 import AnalyticsHelper from '../helper/AnalyticsHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const routes = [...dashboard.routes];
 
@@ -41,6 +42,16 @@ export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
     return '/app/login';
   }
 
+  // Open inbox view if inbox view feature is enabled, else redirect to dashboard
+  // TODO: Remove this code once inbox view feature is enabled for all accounts
+  const isInboxViewEnabled = store.getters['accounts/isFeatureEnabledGlobally'](
+    user.account_id,
+    FEATURE_FLAGS.INBOX_VIEW
+  );
+  if (to.name === 'inbox_index' && !isInboxViewEnabled) {
+    return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+  }
+
   if (!to.name) {
     return next(frontendURL(`accounts/${user.account_id}/dashboard`));
   }

app/javascript/dashboard/store/modules/accounts.js

@@ -4,6 +4,9 @@ import AccountAPI from '../../api/account';
 import EnterpriseAccountAPI from '../../api/enterprise/account';
 import { throwErrorMessage } from '../utils/api';
 
+const findRecordById = ($state, id) =>
+  $state.records.find(record => record.id === Number(id)) || {};
+
 const state = {
   records: [],
   uiFlags: {
@@ -30,10 +33,15 @@ export const getters = {
         return true;
       }
 
-      const { features = {} } =
-        $state.records.find(record => record.id === Number(id)) || {};
+      const { features = {} } = findRecordById($state, id);
+
       return features[featureName] || false;
     },
+  // There are some features which can be enabled/disabled globally
+  isFeatureEnabledGlobally: $state => (id, featureName) => {
+    const { features = {} } = findRecordById($state, id);
+    return features[featureName] || false;
+  },
 };
 
 export const actions = {

app/javascript/dashboard/store/modules/specs/account/getters.spec.js

@@ -4,6 +4,10 @@ const accountData = {
   id: 1,
   name: 'Company one',
   locale: 'en',
+  features: {
+    auto_resolve_conversations: false,
+    agent_management: false,
+  },
 };
 
 describe('#getters', () => {
@@ -29,4 +33,32 @@ describe('#getters', () => {
       isDeleting: false,
     });
   });
+
+  it('isFeatureEnabledonAccount', () => {
+    const state = {
+      records: [accountData],
+    };
+    const rootGetters = {
+      getCurrentUser: {
+        type: 'SuperAdmin',
+      },
+    };
+    expect(
+      getters.isFeatureEnabledonAccount(
+        state,
+        null,
+        null,
+        rootGetters
+      )(1, 'auto_resolve_conversations')
+    ).toEqual(true);
+  });
+
+  it('isFeatureEnabledGlobally', () => {
+    const state = {
+      records: [accountData],
+    };
+    expect(
+      getters.isFeatureEnabledGlobally(state)(1, 'auto_resolve_conversations')
+    ).toEqual(false);
+  });
 });

config/features.yml

@@ -61,3 +61,5 @@
   enabled: false
 - name: insert_article_in_reply
   enabled: false
+- name: inbox_view
+  enabled: false