chore: Allow super admin to suspend an account (#5174)

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

@@ -6,6 +6,8 @@ import { routes as notificationRoutes } from './notifications/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
+const Suspended = () => import('./suspended/Index');
+
 export default {
   routes: [
     ...helpcenterRoutes.routes,
@@ -19,5 +21,11 @@ export default {
         ...notificationRoutes,
       ],
     },
+    {
+      path: frontendURL('accounts/:accountId/suspended'),
+      name: 'account_suspended',
+      roles: ['administrator', 'agent'],
+      component: Suspended,
+    },
   ],
 };

app/javascript/dashboard/routes/dashboard/suspended/Index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="suspended-page">
+    <empty-state
+      :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
+      :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
+    />
+  </div>
+</template>
+<script>
+import EmptyState from 'dashboard/components/widgets/EmptyState';
+export default {
+  components: { EmptyState },
+};
+</script>
+<style scoped>
+.suspended-page {
+  align-items: center;
+  background: var(--s-50);
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+</style>

app/javascript/dashboard/routes/index.js

@@ -6,6 +6,7 @@ import authRoute from './auth/auth.routes';
 import dashboard from './dashboard/dashboard.routes';
 import login from './login/login.routes';
 import store from '../store';
+import { validateLoggedInRoutes } from '../helper/routeHelpers';
 
 const routes = [...login.routes, ...dashboard.routes, ...authRoute.routes];
 
@@ -14,11 +15,6 @@ window.roleWiseRoutes = {
   administrator: [],
 };
 
-const getUserRole = ({ accounts } = {}, accountId) => {
-  const currentAccount = accounts.find(account => account.id === accountId);
-  return currentAccount ? currentAccount.role : null;
-};
-
 // generateRoleWiseRoute - updates window object with agent/admin route
 const generateRoleWiseRoute = route => {
   route.forEach(element => {
@@ -47,10 +43,6 @@ const authIgnoreRoutes = [
   'auth_password_edit',
 ];
 
-function routeIsAccessibleFor(route, role) {
-  return window.roleWiseRoutes[role].includes(route);
-}
-
 const routeValidators = [
   {
     protected: false,
@@ -68,12 +60,8 @@ const routeValidators = [
   {
     protected: true,
     loggedIn: true,
-    handler: (to, getters) => {
-      const user = getters.getCurrentUser;
-      const userRole = getUserRole(user, Number(to.params.accountId));
-      const isAccessible = routeIsAccessibleFor(to.name, userRole);
-      return isAccessible ? null : `accounts/${to.params.accountId}/dashboard`;
-    },
+    handler: (to, getters) =>
+      validateLoggedInRoutes(to, getters.getCurrentUser, window.roleWiseRoutes),
   },
   {
     protected: false,

app/javascript/dashboard/routes/index.spec.js

@@ -26,7 +26,7 @@ describe('#validateAuthenticateRoutePermission', () => {
         getCurrentUser: {
           account_id: 1,
           id: 1,
-          accounts: [{ id: 1, role: 'admin' }],
+          accounts: [{ id: 1, role: 'admin', status: 'active' }],
         },
       };
       validateAuthenticateRoutePermission(to, from, next, { getters });
@@ -72,7 +72,7 @@ describe('#validateAuthenticateRoutePermission', () => {
             getCurrentUser: {
               account_id: 1,
               id: 1,
-              accounts: [{ id: 1, role: 'agent' }],
+              accounts: [{ id: 1, role: 'agent', status: 'active' }],
             },
           };
           validateAuthenticateRoutePermission(to, from, next, { getters });
@@ -90,7 +90,7 @@ describe('#validateAuthenticateRoutePermission', () => {
             getCurrentUser: {
               account_id: 1,
               id: 1,
-              accounts: [{ id: 1, role: 'agent' }],
+              accounts: [{ id: 1, role: 'agent', status: 'active' }],
             },
           };
           validateAuthenticateRoutePermission(to, from, next, { getters });