Refactor: Inbox store, remove inboxes from sidebar (#387)

* Refactor: Inbox store, remove inboxes from sidebar * Add a new page for inbox settings * Show inboxes on sidebar * Add inbox_members API * Disable similar-code check * Fix codeclimate scss issues * Add widget_color update API and actions * Add specs for inbox store * Fix Facebook auth flow * Fix agent loading, inbox name
2019-12-28 21:56:42 +05:30
parent 96f8070e79
commit 5ddc46c474
51 changed files with 1028 additions and 726 deletions
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -39,7 +39,6 @@ export default {
  },
  computed: {
    ...mapGetters({
-      menuItems: 'getMenuItems',
      chatList: 'getAllConversations',
    }),
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -1,10 +1,9 @@
 <template>
  <div class="column">
    <h2 class="page-sub-title">
-      {{headerTitle}}
+      {{ headerTitle }}
    </h2>
-    <p class="small-12 column" v-html="headerContent">
-    </p>
+    <p class="small-12 column" v-html="headerContent"></p>
  </div>
 </template>

--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -1,8 +1,6 @@
 <template>
  <div class="wizard-body columns content-box small-9">
-    <loading-state v-if="showLoader" :message="emptyStateMessage">
-    </loading-state>
-    <form v-if="!showLoader" class="row" @submit.prevent="addAgents()">
+    <form class="row" @submit.prevent="addAgents()">
      <div class="medium-12 columns">
        <page-header
          :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
@@ -31,8 +29,11 @@
            </span>
          </label>
        </div>
-        <div class="medium-12 columns text-right">
-          <input type="submit" value="Create Inbox" class="button" />
+        <div class="medium-12 columns">
+          <woot-submit-button
+            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
+            :loading="isCreating"
+          />
        </div>
      </div>
    </form>
@@ -44,15 +45,13 @@
 /* global bus */
 import { mapGetters } from 'vuex';

-import ChannelApi from '../../../../api/channels';
+import InboxMembersAPI from '../../../../api/inboxMembers';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader';
-import LoadingState from '../../../../components/widgets/LoadingState';

 export default {
  components: {
    PageHeader,
-    LoadingState,
  },

  validations: {
@@ -65,9 +64,8 @@ export default {

  data() {
    return {
-      emptyStateMessage: this.$t('INBOX_MGMT.AGENTS.ADD_AGENTS'),
-      showLoader: false,
      selectedAgents: [],
+      isCreating: false,
    };
  },

@@ -82,25 +80,24 @@ export default {
  },

  methods: {
-    addAgents() {
+    async addAgents() {
      this.isCreating = true;
      const inboxId = this.$route.params.inbox_id;
-      ChannelApi.addAgentsToChannel(inboxId, this.selectedAgents.map(x => x.id))
-        .then(() => {
-          this.isCreating = false;
-          router.replace({
-            name: 'settings_inbox_finish',
-            params: {
-              page: 'new',
-              inbox_id: this.$route.params.inbox_id,
-              website_token: this.$route.params.website_token,
-            },
-          });
-        })
-        .catch(error => {
-          bus.$emit('newToastMessage', error.message);
-          this.isCreating = false;
+      const selectedAgents = this.selectedAgents.map(x => x.id);
+
+      try {
+        await InboxMembersAPI.create({ inboxId, agentList: selectedAgents });
+        router.replace({
+          name: 'settings_inbox_finish',
+          params: {
+            page: 'new',
+            inbox_id: this.$route.params.inbox_id,
+          },
        });
+      } catch (error) {
+        bus.$emit('newToastMessage', error.message);
+      }
+      this.isCreating = false;
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -7,7 +7,7 @@
    >
      <div class="medium-12 columns text-center">
        <div class="website--code">
-          <woot-code v-if="$route.params.website_token" :script="websiteScript">
+          <woot-code v-if="currentInbox.website_token" :script="websiteScript">
          </woot-code>
        </div>
        <router-link
@@ -33,6 +33,11 @@ export default {
    EmptyState,
  },
  computed: {
+    currentInbox() {
+      return this.$store.getters['inboxes/getInbox'](
+        this.$route.params.inbox_id
+      );
+    },
    message() {
      if (!this.$route.params.website_token) {
        return this.$t('INBOX_MGMT.FINISH.MESSAGE');
@@ -40,7 +45,7 @@ export default {
      return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
    },
    websiteScript() {
-      return createWebsiteWidgetScript(this.$route.params.website_token);
+      return createWebsiteWidgetScript(this.currentInbox.website_token);
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -18,9 +18,9 @@
            <tr v-for="item in inboxesList" :key="item.id">
              <td>
                <img
-                  v-if="item.avatarUrl"
+                  v-if="item.avatar_url"
                  class="woot-thumbnail"
-                  :src="item.avatarUrl"
+                  :src="item.avatar_url"
                  alt="No Page Image"
                />
                <img
@@ -32,11 +32,11 @@
              </td>
              <!-- Short Code  -->
              <td>
-                <span class="agent-name">{{ item.label }}</span>
-                <span v-if="item.channelType === 'Channel::FacebookPage'">
+                <span class="agent-name">{{ item.name }}</span>
+                <span v-if="item.channel_type === 'Channel::FacebookPage'">
                  Facebook
                </span>
-                <span v-if="item.channelType === 'Channel::WebWidget'">
+                <span v-if="item.channel_type === 'Channel::WebWidget'">
                  Website
                </span>
              </td>
@@ -44,28 +44,23 @@
              <!-- Action Buttons -->
              <td>
                <div class="button-wrapper">
-                  <div v-if="isAdmin()" @click="openSettings(item)">
+                  <router-link :to="`/app/settings/inboxes/${item.id}`">
                    <woot-submit-button
+                      v-if="isAdmin()"
                      :button-text="$t('INBOX_MGMT.SETTINGS')"
                      icon-class="ion-gear-b"
                      button-class="link hollow grey-btn"
                    />
-                  </div>
-                  <!-- <div>
-                    <woot-submit-button
-                    :button-text="$t('INBOX_MGMT.REAUTH')"
-                    icon-class="ion-edit"
+                  </router-link>
+
+                  <woot-submit-button
+                    v-if="isAdmin()"
+                    :button-text="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                    :loading="loading[item.id]"
+                    icon-class="ion-close-circled"
                    button-class="link hollow grey-btn"
-                    />
-                  </div> -->
-                  <div v-if="isAdmin()" @click="openDelete(item)">
-                    <woot-submit-button
-                      :button-text="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                      :loading="loading[item.id]"
-                      icon-class="ion-close-circled"
-                      button-class="link hollow grey-btn"
-                    />
-                  </div>
+                    @click="openDelete(item)"
+                  />
                </div>
              </td>
            </tr>
@@ -120,22 +115,22 @@ export default {
  },
  computed: {
    ...mapGetters({
-      inboxesList: 'getInboxesList',
+      inboxesList: 'inboxes/getInboxes',
    }),
    // Delete Modal
    deleteConfirmText() {
      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
-        this.selectedInbox.label
+        this.selectedInbox.name
      }`;
    },
    deleteRejectText() {
      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
-        this.selectedInbox.label
+        this.selectedInbox.name
      }`;
    },
    deleteMessage() {
      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
-        this.selectedInbox.label
+        this.selectedInbox.name
      } ?`;
    },
  },
@@ -148,21 +143,19 @@ export default {
      this.showSettings = false;
      this.selectedInbox = {};
    },
-    deleteInbox({ channel_id }) {
-      this.$store
-        .dispatch('deleteInbox', channel_id)
-        .then(() =>
-          bus.$emit(
-            'newToastMessage',
-            this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE')
-          )
-        )
-        .catch(() =>
-          bus.$emit(
-            'newToastMessage',
-            this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE')
-          )
+    async deleteInbox({ id }) {
+      try {
+        await this.$store.dispatch('inboxes/delete', id);
+        bus.$emit(
+          'newToastMessage',
+          this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE')
        );
+      } catch (error) {
+        bus.$emit(
+          'newToastMessage',
+          this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE')
+        );
+      }
    },

    confirmDeletion() {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -1,148 +1,170 @@
 <template>
-  <woot-modal class-name="settings-modal" :show.sync="show" :on-close="onClose">
-    <div class="settings">
-      <woot-modal-header
-        :header-image="inbox.avatarUrl"
-        :header-title="inbox.label"
-      />
-      <div
-        v-if="inbox.channelType === 'Channel::FacebookPage'"
-        class="settings--content"
+  <div class="settings columns container">
+    <woot-modal-header
+      :header-image="inbox.avatarUrl"
+      :header-title="inbox.name"
+    />
+    <div
+      v-if="inbox.channel_type === 'Channel::FacebookPage'"
+      class="settings--content"
+    >
+      <settings-form-header
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
      >
+      </settings-form-header>
+      <woot-code :script="messengerScript"></woot-code>
+    </div>
+    <div v-else-if="inbox.channel_type === 'Channel::WebWidget'">
+      <div class="settings--content">
        <settings-form-header
          :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
        >
        </settings-form-header>
-        <woot-code :script="messengerScript"></woot-code>
-      </div>
-      <div v-else-if="inbox.channelType === 'Channel::WebWidget'">
-        <div class="settings--content">
-          <settings-form-header
-            :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
-          >
-          </settings-form-header>
-          <woot-code :script="webWidgetScript"></woot-code>
-        </div>
-        <!-- <div class="settings--content">
-          <settings-form-header
-            :title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
-            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
-            :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-            :is-updating="isUpdating"
-            v-on:update="updateAgents"
-          >
-          </settings-form-header>
-          <Compact v-model="widgetColor" />
-        </div> -->
+        <woot-code :script="webWidgetScript"></woot-code>
      </div>
      <div class="settings--content">
        <settings-form-header
-          :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+          :title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
+          :sub-title="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.PLACEHOLDER')
+          "
          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :is-updating="isUpdating"
-          @update="updateAgents"
+          :is-updating="uiFlags.isUpdating"
+          @update="updateWidgetColor"
        >
        </settings-form-header>
-        <multiselect
-          v-model="selectedAgents"
-          :options="agentList"
-          track-by="id"
-          label="name"
-          :multiple="true"
-          :close-on-select="false"
-          :clear-on-select="false"
-          :hide-selected="true"
-          placeholder="Pick some"
-          @select="$v.selectedAgents.$touch"
-        />
+        <Compact v-model="inbox.widget_color" class="widget-color--selector" />
      </div>
    </div>
-  </woot-modal>
+    <div class="settings--content">
+      <settings-form-header
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :is-updating="isAgentListUpdating"
+        @update="updateAgents"
+      >
+      </settings-form-header>
+      <multiselect
+        v-model="selectedAgents"
+        :options="agentList"
+        track-by="id"
+        label="name"
+        :multiple="true"
+        :close-on-select="false"
+        :clear-on-select="false"
+        :hide-selected="true"
+        placeholder="Pick some"
+        @select="$v.selectedAgents.$touch"
+      />
+    </div>
+  </div>
 </template>

 <script>
 /* eslint no-console: 0 */
-/* eslint-disable no-useless-escape */
 /* global bus */
 import { mapGetters } from 'vuex';
 import {
  createWebsiteWidgetScript,
  createMessengerScript,
 } from 'dashboard/helper/scriptGenerator';
+import { Compact } from 'vue-color';
 import SettingsFormHeader from '../../../../components/SettingsFormHeader.vue';

 export default {
  components: {
+    Compact,
    SettingsFormHeader,
  },
-  props: ['onClose', 'inbox', 'show'],
  data() {
    return {
      selectedAgents: [],
      isUpdating: false,
-      widgetColor: { hex: this.inbox.widgetColor },
+      isAgentListUpdating: false,
    };
  },
  computed: {
    ...mapGetters({
      agentList: 'agents/getAgents',
+      uiFlags: 'inboxes/getUIFlags',
    }),
+    currentInboxId() {
+      return this.$route.params.inboxId;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
+    },
    webWidgetScript() {
-      return createWebsiteWidgetScript(this.inbox.websiteToken);
+      return createWebsiteWidgetScript(this.inbox.website_token);
    },
    messengerScript() {
-      return createMessengerScript(this.inbox.pageId);
+      return createMessengerScript(this.inbox.page_id);
    },
  },
  mounted() {
-    this.$store.dispatch('agents/get').then(() => {
+    this.$store.dispatch('agents/get');
+    this.$store.dispatch('inboxes/get').then(() => {
      this.fetchAttachedAgents();
    });
  },
  methods: {
-    fetchAttachedAgents() {
-      this.$store
-        .dispatch('listInboxAgents', {
-          inboxId: this.inbox.channel_id,
-        })
-        .then(response => {
-          const { payload } = response.data;
-          payload.forEach(el => {
-            const [item] = this.agentList.filter(
-              agent => agent.id === el.user_id
-            );
-            if (item) this.selectedAgents.push(item);
-          });
-        })
-        .catch(error => {
-          console.log(error);
-        });
+    showAlert(message) {
+      bus.$emit('newToastMessage', message);
    },
-    updateAgents() {
-      const agentList = this.selectedAgents.map(el => el.id);
-      this.isUpdating = true;
-      this.$store
-        .dispatch('updateInboxAgents', {
-          inboxId: this.inbox.channel_id,
-          agentList,
-        })
-        .then(() => {
-          this.isUpdating = false;
-          bus.$emit(
-            'newToastMessage',
-            this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE')
-          );
-        })
-        .catch(() => {
-          this.isUpdating = false;
-          bus.$emit(
-            'newToastMessage',
-            this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE')
-          );
+    async fetchAttachedAgents() {
+      try {
+        const response = await this.$store.dispatch('inboxMembers/get', {
+          inboxId: this.currentInboxId,
        });
+        const {
+          data: { payload },
+        } = response;
+        payload.forEach(el => {
+          const [item] = this.agentList.filter(
+            agent => agent.id === el.user_id
+          );
+          if (item) {
+            this.selectedAgents.push(item);
+          }
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async updateAgents() {
+      const agentList = this.selectedAgents.map(el => el.id);
+      this.isAgentListUpdating = true;
+      try {
+        await this.$store.dispatch('inboxMembers/create', {
+          inboxId: this.currentInboxId,
+          agentList,
+        });
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+      this.isAgentListUpdating = false;
+    },
+    async updateWidgetColor() {
+      try {
+        await this.$store.dispatch('inboxes/updateWebsiteChannel', {
+          id: this.inbox.channel_id,
+          website: {
+            widget_color: this.getWidgetColor(this.inbox.widget_color),
+          },
+        });
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      }
+    },
+    getWidgetColor() {
+      return typeof this.inbox.widget_color !== 'object'
+        ? this.inbox.widget_color
+        : this.inbox.widget_color.hex;
    },
  },
  validations: {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -219,14 +219,11 @@ export default {
        this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
        this.isCreating = true;
        this.$store
-          .dispatch('addInboxItem', {
-            channel: this.channel,
-            params: this.channelParams(),
-          })
-          .then(response => {
+          .dispatch('inboxes/createFBChannel', this.channelParams())
+          .then(data => {
            router.replace({
              name: 'settings_inboxes_add_agents',
-              params: { page: 'new', inbox_id: response.data.id },
+              params: { page: 'new', inbox_id: data.id },
            });
          })
          .catch(() => {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -55,8 +55,8 @@
 </template>

 <script>
-/* global bus */
 import { Compact } from 'vue-color';
+import { mapGetters } from 'vuex';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';

@@ -73,26 +73,28 @@ export default {
      isCreating: false,
    };
  },
-  mounted() {
-    bus.$on('new_website_channel', ({ inboxId, websiteToken }) => {
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  methods: {
+    async createChannel() {
+      const website = await this.$store.dispatch(
+        'inboxes/createWebsiteChannel',
+        {
+          website: {
+            website_name: this.websiteName,
+            website_url: this.websiteUrl,
+            widget_color: this.widgetColor.hex,
+          },
+        }
+      );
      router.replace({
        name: 'settings_inboxes_add_agents',
        params: {
          page: 'new',
-          inbox_id: inboxId,
-          website_token: websiteToken,
-        },
-      });
-    });
-  },
-  methods: {
-    createChannel() {
-      this.isCreating = true;
-      this.$store.dispatch('addWebsiteChannel', {
-        website: {
-          website_name: this.websiteName,
-          website_url: this.websiteUrl,
-          widget_color: this.widgetColor.hex,
+          inbox_id: website.id,
        },
      });
    },
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -1,5 +1,6 @@
 /* eslint arrow-body-style: 0 */
 import SettingsContent from '../Wrapper';
+import Settings from './Settings';
 import InboxHome from './Index';
 import InboxChannel from './InboxChannels';
 import ChannelList from './ChannelList';
@@ -64,6 +65,12 @@ export default {
            },
          ],
        },
+        {
+          path: ':inboxId',
+          name: 'settings_inbox_show',
+          component: Settings,
+          roles: ['administrator'],
+        },
      ],
    },
  ],