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

Add Chatwoot SDK to Chatwoot Dashboard

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

@@ -0,0 +1,56 @@
+<template>
+  <woot-modal
+    :show="showAccountModal"
+    :on-close="() => $emit('close-account-modal')"
+    class="account-selector--modal"
+  >
+    <woot-modal-header
+      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
+      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
+    />
+    <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="$emit('show-create-account-modal')"
+      >
+        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+      </button>
+    </div>
+  </woot-modal>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    showAccountModal: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+};
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <woot-modal
+    :show="show"
+    :on-close="() => $emit('close-account-create-modal')"
+    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>
+</template>
+
+<script>
+import { required, minLength } from 'vuelidate/lib/validators';
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      accountName: '',
+    };
+  },
+  validations: {
+    accountName: {
+      required,
+      minLength: minLength(1),
+    },
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'agents/getUIFlags',
+    }),
+  },
+  methods: {
+    async addAccount() {
+      try {
+        const account_id = await this.$store.dispatch('accounts/create', {
+          account_name: this.accountName,
+        });
+        this.$emit('close-account-create-modal');
+        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>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="current-user--row">
+    <thumbnail
+      :src="currentUser.avatar_url"
+      :username="currentUserAvailableName"
+    />
+    <div class="current-user--data">
+      <h3 class="current-user--name text-truncate">
+        {{ currentUserAvailableName }}
+      </h3>
+      <h5 v-if="currentRole" class="current-user--role">
+        {{ $t(`AGENT_MGMT.AGENT_TYPES.${currentRole.toUpperCase()}`) }}
+      </h5>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import Thumbnail from '../../widgets/Thumbnail';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      currentRole: 'getCurrentRole',
+    }),
+    currentUserAvailableName() {
+      return this.currentUser.name;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.current-user--row {
+  align-items: center;
+  display: flex;
+}
+
+.current-user--data {
+  display: flex;
+  flex-direction: column;
+
+  .current-user--name {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--space-micro);
+    margin-left: var(--space-one);
+    max-width: 12rem;
+  }
+
+  .current-user--role {
+    color: var(--color-gray);
+    font-size: var(--font-size-mini);
+    margin-bottom: var(--zero);
+    margin-left: var(--space-one);
+    text-transform: capitalize;
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <span class="notifications icon ion-ios-bell" @click.stop="showNotification">
+    <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
+  </span>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    unreadCount() {
+      if (!this.notificationMetadata.unreadCount) {
+        return 0;
+      }
+
+      return this.notificationMetadata.unreadCount < 100
+        ? this.notificationMetadata.unreadCount
+        : '99+';
+    },
+  },
+  methods: {
+    showNotification() {
+      this.$router.push(`/app/accounts/${this.accountId}/notifications`);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.notifications {
+  font-size: var(--font-size-big);
+  margin-bottom: auto;
+  margin-left: auto;
+  margin-top: auto;
+  position: relative;
+
+  .unread-badge {
+    background: var(--r-300);
+    border-radius: var(--space-small);
+    color: var(--white);
+    font-size: var(--font-size-micro);
+    font-weight: var(--font-weight-black);
+    left: var(--space-slab);
+    padding: 0 var(--space-smaller);
+    position: absolute;
+    top: var(--space-smaller);
+  }
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <transition name="menu-slide">
+    <div
+      v-if="show"
+      v-on-clickaway="() => $emit('close')"
+      class="dropdown-pane top"
+    >
+      <ul class="vertical dropdown menu">
+        <li v-if="showChangeAccountOption">
+          <button
+            class="button clear change-accounts--button"
+            @click="$emit('toggle-accounts')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+          </button>
+        </li>
+        <li v-if="globalConfig.chatwootInboxToken">
+          <button
+            class="button clear change-accounts--button"
+            @click="$emit('show-support-chat-window')"
+          >
+            Contact Support
+          </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>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import { mapGetters } from 'vuex';
+import Auth from '../../../api/auth';
+
+export default {
+  mixins: [clickaway],
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+      accountId: 'getCurrentAccountId',
+    }),
+    showChangeAccountOption() {
+      if (this.globalConfig.createNewAccountFromDashboard) {
+        return true;
+      }
+      return this.currentUser.accounts.length > 1;
+    },
+  },
+  methods: {
+    logout() {
+      Auth.logout();
+
+      if (this.globalConfig.chatwootInboxToken) {
+        window.$chatwoot.reset();
+      }
+    },
+  },
+};
+</script>