feat: Display Account context in the UI (#4069)

app/controllers/dashboard_controller.rb

@@ -27,7 +27,9 @@ class DashboardController < ActionController::Base
       'ANALYTICS_TOKEN',
       'ANALYTICS_HOST',
       'DIRECT_UPLOADS_ENABLED',
-      'HCAPTCHA_SITE_KEY'
+      'HCAPTCHA_SITE_KEY',
+      'LOGOUT_REDIRECT_LINK',
+      'DISABLE_USER_PROFILE_UPDATE'
     ).merge(app_config)
   end
 

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -54,3 +54,9 @@
 .text-y-800 {
   color: var(--y-800);
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-if="showShowCurrentAccountContext" class="account-context--group">
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p class="account-context--name text-ellipsis">
+      {{ account.name }}
+    </p>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  computed: {
+    ...mapGetters({
+      account: 'getCurrentAccount',
+      userAccounts: 'getUserAccounts',
+    }),
+    showShowCurrentAccountContext() {
+      return this.userAccounts.length > 1 && this.account.name;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.account-context--group {
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  font-size: var(--font-size-mini);
+  padding: var(--space-small);
+  margin-bottom: var(--space-small);
+
+  .account-context--name {
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 0;
+  }
+}
+</style>

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
+    <account-context />
     <transition-group name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
@@ -18,9 +19,11 @@
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
+import AccountContext from './AccountContext.vue';
 
 export default {
   components: {
+    AccountContext,
     SecondaryNavItem,
   },
   props: {

app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue

@@ -65,7 +65,7 @@
         </div>
         <div class="features-item">
           <h2 class="block-title">
-            <span class="emoji">🏷</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
+            <span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
           </h2>
           <p class="intro-body">
             {{ $t('ONBOARDING.LABELS.DESCRIPTION') }}

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

@@ -142,6 +142,7 @@
     }
   },
   "SIDEBAR": {
+    "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
     "CONVERSATIONS": "Conversations",
     "ALL_CONVERSATIONS": "All Conversations",
     "MENTIONED_CONVERSATIONS": "Mentions",

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -48,7 +48,10 @@
               @input="$v.displayName.$touch"
             />
           </label>
-          <label :class="{ error: $v.email.$error }">
+          <label
+            v-if="!globalConfig.disableUserProfileUpdate"
+            :class="{ error: $v.email.$error }"
+          >
             {{ $t('PROFILE_SETTINGS.FORM.EMAIL.LABEL') }}
             <input
               v-model.trim="email"
@@ -67,7 +70,7 @@
       </div>
     </form>
     <message-signature />
-    <change-password />
+    <change-password v-if="!globalConfig.disableUserProfileUpdate" />
     <notification-settings />
     <div class="profile--settings--row row">
       <div class="columns small-3">

app/javascript/dashboard/routes/login/Login.vue

@@ -50,7 +50,7 @@
           </div>
         </form>
         <div class="column text-center sigin__footer">
-          <p>
+          <p v-if="!globalConfig.disableUserProfileUpdate">
             <router-link to="auth/reset/password">
               {{ $t('LOGIN.FORGOT_PASSWORD') }}
             </router-link>

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

@@ -71,6 +71,19 @@ export const getters = {
 
     return messageSignature || '';
   },
+
+  getCurrentAccount(_state) {
+    const { accounts = [] } = _state.currentUser;
+    const [currentAccount = {}] = accounts.filter(
+      account => account.id === _state.currentAccountId
+    );
+    return currentAccount || {};
+  },
+
+  getUserAccounts(_state) {
+    const { accounts = [] } = _state.currentUser;
+    return accounts;
+  },
 };
 
 // actions

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

@@ -53,4 +53,60 @@ describe('#getters', () => {
       ).toEqual('');
     });
   });
+
+  describe('#getCurrentAccount', () => {
+    it('returns correct values', () => {
+      expect(
+        getters.getCurrentAccount({
+          currentUser: {},
+          currentAccountId: 1,
+        })
+      ).toEqual({});
+
+      expect(
+        getters.getCurrentAccount({
+          currentUser: {
+            accounts: [
+              {
+                name: 'Chatwoot',
+                id: 1,
+              },
+            ],
+          },
+          currentAccountId: 1,
+        })
+      ).toEqual({
+        name: 'Chatwoot',
+        id: 1,
+      });
+    });
+  });
+
+  describe('#getUserAccounts', () => {
+    it('returns correct values', () => {
+      expect(
+        getters.getUserAccounts({
+          currentUser: {},
+        })
+      ).toEqual([]);
+
+      expect(
+        getters.getUserAccounts({
+          currentUser: {
+            accounts: [
+              {
+                name: 'Chatwoot',
+                id: 1,
+              },
+            ],
+          },
+        })
+      ).toEqual([
+        {
+          name: 'Chatwoot',
+          id: 1,
+        },
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/utils/api.js

@@ -44,5 +44,9 @@ export const clearCookiesOnLogout = () => {
 
   Cookies.remove('auth_data');
   Cookies.remove('user');
-  window.location = frontendURL('login');
+
+  const globalConfig = window.globalConfig || {};
+  const logoutRedirectLink =
+    globalConfig.LOGOUT_REDIRECT_LINK || frontendURL('login');
+  window.location = logoutRedirectLink;
 };

app/javascript/shared/store/globalConfig.js

@@ -14,6 +14,7 @@ const {
   PRIVACY_URL: privacyURL,
   TERMS_URL: termsURL,
   WIDGET_BRAND_URL: widgetBrandURL,
+  DISABLE_USER_PROFILE_UPDATE: disableUserProfileUpdate,
 } = window.globalConfig || {};
 
 const state = {
@@ -24,6 +25,7 @@ const state = {
   chatwootInboxToken,
   createNewAccountFromDashboard,
   directUploadsEnabled: directUploadsEnabled === 'true',
+  disableUserProfileUpdate: disableUserProfileUpdate === 'true',
   displayManifest,
   hCaptchaSiteKey,
   installationName,

config/installation_config.yml

@@ -53,3 +53,9 @@
 - name: HCAPTCHA_SERVER_KEY
   value:
   locked: false
+- name: LOGOUT_REDIRECT_LINK
+  value: /app/login
+  locked: false
+- name: DISABLE_USER_PROFILE_UPDATE
+  value: false
+  locked: false