chore: Add Chatwoot SDK to Chatwoot Dashboard (#1726)

Add Chatwoot SDK to Chatwoot Dashboard

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -30,180 +30,65 @@
       <availability-status />
     </div>
 
-    <div class="bottom-nav app-context-menu">
-      <transition name="menu-slide">
-        <div
-          v-if="showOptionsMenu"
-          v-on-clickaway="showOptions"
-          class="dropdown-pane top"
-        >
-          <ul class="vertical dropdown menu">
-            <li v-if="showChangeAccountOption">
-              <button
-                class="button clear change-accounts--button"
-                @click="changeAccount"
-              >
-                {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-              </button>
-            </li>
-            <li>
-              <router-link :to="`/app/accounts/${accountId}/profile/settings`">
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-              </router-link>
-            </li>
-            <li>
-              <a href="#" @click.prevent="logout()">
-                {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </transition>
-
-      <div class="current-user" @click.prevent="showOptions()">
-        <thumbnail
-          :src="currentUser.avatar_url"
-          :username="currentUserAvailableName"
-        />
-        <div class="current-user--data">
-          <h3 class="current-user--name">
-            {{ currentUserAvailableName }}
-          </h3>
-          <h5 v-if="currentRole" class="current-user--role">
-            {{ $t(`AGENT_MGMT.AGENT_TYPES.${currentRole.toUpperCase()}`) }}
-          </h5>
-        </div>
-        <span
-          class="notifications icon ion-ios-bell"
-          @click.stop="showNotification"
-        >
-          <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
-        </span>
-
-        <span class="current-user--options icon ion-android-more-vertical" />
-      </div>
-    </div>
-    <woot-modal
-      :show="showAccountModal"
-      :on-close="onClose"
-      class="account-selector--modal"
-    >
-      <woot-modal-header
-        :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
-        :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
+    <div class="bottom-nav app-context-menu" @click="toggleOptions">
+      <agent-details @show-options="toggleOptions" />
+      <notification-bell />
+      <span class="current-user--options icon ion-android-more-vertical" />
+      <options-menu
+        :show="showOptionsMenu"
+        @toggle-accounts="toggleAccountModal"
+        @show-support-chat-window="toggleSupportChatWindow"
+        @close="toggleOptions"
       />
-      <div
-        v-for="account in currentUser.accounts"
-        :key="account.id"
-        class="account-selector"
-      >
-        <a :href="`/app/accounts/${account.id}/dashboard`">
-          <i v-if="account.id === accountId" class="ion ion-ios-checkmark" />
-          <label :for="account.name" class="account--details">
-            <div class="account--name">{{ account.name }}</div>
-            <div class="account--role">{{ account.role }}</div>
-          </label>
-        </a>
-      </div>
-      <div
-        v-if="globalConfig.createNewAccountFromDashboard"
-        class="modal-footer delete-item"
-      >
-        <button
-          class="button success large expanded nice"
-          @click="createAccount"
-        >
-          {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-        </button>
-      </div>
-    </woot-modal>
+    </div>
 
-    <woot-modal
+    <account-selector
+      :show-account-modal="showAccountModal"
+      @close-account-modal="toggleAccountModal"
+      @show-create-account-modal="openCreateAccountModal"
+    />
+
+    <add-account-modal
       :show="showCreateAccountModal"
-      :on-close="onCloseCreate"
-      class="account-selector--modal"
-    >
-      <div class="column content-box">
-        <woot-modal-header
-          :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
-          :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
-        />
-
-        <form class="row" @submit.prevent="addAccount()">
-          <div class="medium-12 columns">
-            <label :class="{ error: $v.accountName.$error }">
-              {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
-              <input
-                v-model.trim="accountName"
-                type="text"
-                :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-                @input="$v.accountName.$touch"
-              />
-            </label>
-          </div>
-          <div class="modal-footer medium-12 columns">
-            <div class="medium-12 columns">
-              <woot-submit-button
-                :disabled="
-                  $v.accountName.$invalid ||
-                    $v.accountName.$invalid ||
-                    uiFlags.isCreating
-                "
-                :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-                :loading="uiFlags.isCreating"
-                button-class="large expanded"
-              />
-            </div>
-          </div>
-        </form>
-      </div>
-    </woot-modal>
+      @close-account-create-modal="closeCreateAccountModal"
+    />
   </aside>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 
 import adminMixin from '../../mixins/isAdmin';
-import Auth from '../../api/auth';
 import SidebarItem from './SidebarItem';
 import AvailabilityStatus from './AvailabilityStatus';
 import { frontendURL } from '../../helper/URLHelper';
-import Thumbnail from '../widgets/Thumbnail';
 import { getSidebarItems } from '../../i18n/default-sidebar';
-import { required, minLength } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
+import NotificationBell from './sidebarComponents/NotificationBell';
+import AgentDetails from './sidebarComponents/AgentDetails.vue';
+import OptionsMenu from './sidebarComponents/OptionsMenu.vue';
+import AccountSelector from './sidebarComponents/AccountSelector.vue';
+import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
 
 export default {
   components: {
+    AgentDetails,
     SidebarItem,
-    Thumbnail,
     AvailabilityStatus,
+    NotificationBell,
+    OptionsMenu,
+    AccountSelector,
+    AddAccountModal,
   },
-  mixins: [clickaway, adminMixin, alertMixin],
-  props: {
-    route: {
-      type: String,
-      default: '',
-    },
-  },
+  mixins: [adminMixin, alertMixin],
   data() {
     return {
       showOptionsMenu: false,
       showAccountModal: false,
       showCreateAccountModal: false,
-      accountName: '',
-      vertical: 'bottom',
-      horizontal: 'center',
     };
   },
-  validations: {
-    accountName: {
-      required,
-      minLength: minLength(1),
-    },
-  },
+
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
@@ -211,19 +96,9 @@ export default {
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
-      uiFlags: 'agents/getUIFlags',
       accountLabels: 'labels/getLabelsOnSidebar',
-      notificationMetadata: 'notifications/getMeta',
     }),
-    currentUserAvailableName() {
-      return this.currentUser.name;
-    },
-    showChangeAccountOption() {
-      if (this.globalConfig.createNewAccountFromDashboard) {
-        return true;
-      }
-      return this.currentUser.accounts.length > 1;
-    },
+
     sidemenuItems() {
       return getSidebarItems(this.accountId);
     },
@@ -292,22 +167,35 @@ export default {
     dashboardPath() {
       return frontendURL(`accounts/${this.accountId}/dashboard`);
     },
-    unreadCount() {
-      if (!this.notificationMetadata.unreadCount) {
-        return 0;
+  },
+  watch: {
+    currentUser(newUserInfo, oldUserInfo) {
+      if (!oldUserInfo.email && newUserInfo.email) {
+        this.setChatwootUser();
       }
-
-      return this.notificationMetadata.unreadCount < 100
-        ? this.notificationMetadata.unreadCount
-        : '99+';
     },
   },
   mounted() {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('inboxes/get');
     this.$store.dispatch('notifications/unReadCount');
+    this.setChatwootUser();
   },
   methods: {
+    toggleSupportChatWindow() {
+      window.$chatwoot.toggle();
+    },
+    setChatwootUser() {
+      if (!this.currentUser.email || !this.globalConfig.chatwootInboxToken) {
+        return;
+      }
+      window.$chatwoot.setUser(this.currentUser.email, {
+        name: this.currentUser.name,
+        email: this.currentUser.email,
+        avatar_url: this.currentUser.avatar_url,
+        identifier_hash: this.currentUser.hmac_identifier,
+      });
+    },
     filterMenuItemsByRole(menuItems) {
       if (!this.currentRole) {
         return [];
@@ -319,44 +207,19 @@ export default {
           ) > -1
       );
     },
-    logout() {
-      Auth.logout();
-    },
-    showOptions() {
+    toggleOptions() {
       this.showOptionsMenu = !this.showOptionsMenu;
     },
-    showNotification() {
-      this.$router.push(`/app/accounts/${this.accountId}/notifications`);
+    toggleAccountModal() {
+      this.showAccountModal = !this.showAccountModal;
     },
-    changeAccount() {
-      this.showAccountModal = true;
-    },
-    onClose() {
-      this.showAccountModal = false;
-    },
-    createAccount() {
+    openCreateAccountModal() {
       this.showAccountModal = false;
       this.showCreateAccountModal = true;
     },
-    onCloseCreate() {
+    closeCreateAccountModal() {
       this.showCreateAccountModal = false;
     },
-    async addAccount() {
-      try {
-        const account_id = await this.$store.dispatch('accounts/create', {
-          account_name: this.accountName,
-        });
-        this.onClose();
-        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
-        window.location = `/app/accounts/${account_id}/dashboard`;
-      } catch (error) {
-        if (error.response.status === 422) {
-          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
-        } else {
-          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
-        }
-      }
-    },
   },
 };
 </script>
@@ -427,7 +290,19 @@ export default {
     }
   }
 }
+
 .app-context-menu {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
   height: 6rem;
 }
+
+.current-user--options {
+  font-size: $font-size-big;
+  margin-bottom: auto;
+  margin-left: auto;
+  margin-top: auto;
+}
 </style>