From cc74bebc0f44dc452e4489e2bdeba858ef352a70 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 25 Feb 2022 16:36:36 +0530
Subject: [PATCH] feat: Display Account context in the UI (#4069)

---
 app/controllers/dashboard_controller.rb       |  4 +-
 .../assets/scss/_utility-helpers.scss         |  6 ++
 .../sidebarComponents/AccountContext.vue      | 36 ++++++++++++
 .../layout/sidebarComponents/Secondary.vue    |  3 +
 .../widgets/conversation/OnboardingView.vue   |  2 +-
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 .../dashboard/settings/profile/Index.vue      |  7 ++-
 .../dashboard/routes/login/Login.vue          |  2 +-
 .../dashboard/store/modules/auth.js           | 13 +++++
 .../store/modules/specs/auth/getters.spec.js  | 56 +++++++++++++++++++
 app/javascript/dashboard/store/utils/api.js   |  6 +-
 app/javascript/shared/store/globalConfig.js   |  2 +
 config/installation_config.yml                |  6 ++
 13 files changed, 138 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index b76ad4015..2bb8e9847 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/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
 
diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index 7b528d1c2..8a85dc6a5 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/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;
+}
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
new file mode 100644
index 000000000..1438ac7e8
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index da14cf295..6222490e4 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/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: {
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index 9999f3778..e6dfa9654 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/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') }}
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 0fa169fc2..d353e6b6e 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/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",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index f9bfc6a91..850130f08 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/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">
diff --git a/app/javascript/dashboard/routes/login/Login.vue b/app/javascript/dashboard/routes/login/Login.vue
index 8c6869d7b..92fea2e36 100644
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/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>
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index 4d5c75323..d9ec54564 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/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
diff --git a/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js b/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
index 08e5d350f..61b738115 100644
--- a/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
+++ b/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,
+        },
+      ]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/utils/api.js b/app/javascript/dashboard/store/utils/api.js
index fefb6c136..651f0cd61 100644
--- a/app/javascript/dashboard/store/utils/api.js
+++ b/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;
 };
diff --git a/app/javascript/shared/store/globalConfig.js b/app/javascript/shared/store/globalConfig.js
index eaf88fedc..d1f7aa64d 100644
--- a/app/javascript/shared/store/globalConfig.js
+++ b/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,
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 5e22e1a4f..a80776715 100644
--- a/config/installation_config.yml
+++ b/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