[Feature] Website live chat (#187)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -9,14 +9,14 @@
         v-for="channel in channelList"
         :key="channel"
         :channel="channel"
+        @channel-item-click="initChannelAuth"
       />
     </div>
   </div>
 </template>
 
 <script>
-/* global bus */
-import ChannelItem from '../../../../components/widgets/ChannelItem';
+import ChannelItem from 'dashboard/components/widgets/ChannelItem';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader';
 
@@ -27,22 +27,16 @@ export default {
   },
   data() {
     return {
-      channelList: ['facebook', 'twitter', 'telegram', 'line'],
+      channelList: ['website', 'facebook', 'twitter', 'telegram', 'line'],
     };
   },
-  created() {
-    bus.$on('channelItemClick', channel => {
-      this.initChannelAuth(channel);
-    });
-  },
   methods: {
     initChannelAuth(channel) {
-      if (channel === 'facebook') {
-        router.push({
-          name: 'settings_inboxes_page_channel',
-          params: { page: 'new', sub_page: 'facebook' },
-        });
-      }
+      const params = {
+        page: 'new',
+        sub_page: channel,
+      };
+      router.push({ name: 'settings_inboxes_page_channel', params });
     },
   },
 };

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

@@ -15,7 +15,7 @@
 
         <table v-if="inboxesList.length" class="woot-table">
           <tbody>
-            <tr v-for="item in inboxesList" :key="item.label">
+            <tr v-for="item in inboxesList" :key="item.id">
               <td>
                 <img
                   class="woot-thumbnail"
@@ -26,7 +26,12 @@
               <!-- Short Code  -->
               <td>
                 <span class="agent-name">{{ item.label }}</span>
-                <span>Facebook</span>
+                <span v-if="item.channelType === 'Channel::FacebookPage'">
+                  Facebook
+                </span>
+                <span v-if="item.channelType === 'Channel::WebWidget'">
+                  Website
+                </span>
               </td>
 
               <!-- Action Buttons -->

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -5,7 +5,10 @@
         :header-image="inbox.avatarUrl"
         :header-title="inbox.label"
       />
-      <div class="code-wrapper">
+      <div
+        v-if="inbox.channelType === 'Channel::FacebookPage'"
+        class="code-wrapper"
+      >
         <p class="title">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
         </p>
@@ -18,6 +21,20 @@
           </code>
         </p>
       </div>
+      <div
+        v-else-if="inbox.channelType === 'Channel::WebWidget'"
+        class="code-wrapper"
+      >
+        <p class="title">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
+        </p>
+        <p class="sub-head">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
+        </p>
+        <highlight-code lang="javascript">
+          {{ webWidgetScript }}
+        </highlight-code>
+      </div>
       <div class="agent-wrapper">
         <p class="title">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}
@@ -53,6 +70,7 @@
 /* eslint-disable no-useless-escape */
 /* global bus */
 import { mapGetters } from 'vuex';
+import 'highlight.js/styles/default.css';
 
 export default {
   props: ['onClose', 'inbox', 'show'],
@@ -83,6 +101,20 @@ export default {
         color="blue"
         size="standard" >
       </div>`,
+      webWidgetScript: `
+        (function(d,t) {
+          var BASE_URL = '${window.location.origin}';
+          var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+          g.src= BASE_URL + "/packs/js/sdk.js";
+          s.parentNode.insertBefore(g,s);
+          g.onload=function(){
+            window.chatwootSDK.run({
+              websiteToken: '${this.inbox.websiteToken}',
+              baseUrl: BASE_URL
+            })
+          }
+        })(document,"script");
+      `,
     };
   },
   computed: {

app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js

@@ -1,19 +1,23 @@
-import CONSTANTS from '../../../../constants';
-import FacebookView from './Facebook';
+import Facebook from './channels/Facebook';
+import Website from './channels/Website';
+
+const channelViewList = {
+  facebook: Facebook,
+  website: Website,
+};
 
 export default {
   create() {
     return {
-      name: 'new-channel-view',
-
-      render(h) {
-        if (this.channel_name === CONSTANTS.CHANNELS.FACEBOOK) {
-          return h(FacebookView);
-        }
-        return null;
-      },
       props: {
-        channel_name: String,
+        channel_name: {
+          type: String,
+          required: true,
+        },
+      },
+      name: 'new-channel-view',
+      render(h) {
+        return h(channelViewList[this.channel_name] || null);
       },
     };
   },

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -64,14 +64,13 @@
   </div>
 </template>
 <script>
-/* eslint no-console: 0 */
 /* eslint-env browser */
 /* global FB */
 import { required } from 'vuelidate/lib/validators';
-import ChannelApi from '../../../../api/channels';
-import LoadingState from '../../../../components/widgets/LoadingState';
-import PageHeader from '../SettingsSubPageHeader';
-import router from '../../../index';
+import LoadingState from 'dashboard/components/widgets/LoadingState';
+import ChannelApi from '../../../../../api/channels';
+import PageHeader from '../../SettingsSubPageHeader';
+import router from '../../../../index';
 
 export default {
   components: {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="wizard-body small-9 columns">
+    <page-header
+      :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
+    />
+    <loading-state
+      v-if="isCreating"
+      message="Creating Website Support Channel"
+    ></loading-state>
+    <form v-if="!isCreating" class="row" @submit.prevent="createChannel()">
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="websiteName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+          />
+        </label>
+      </div>
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL') }}
+          <input
+            v-model.trim="websiteUrl"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
+            "
+          />
+        </label>
+      </div>
+      <div class="modal-footer">
+        <div class="medium-12 columns">
+          <woot-submit-button
+            :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
+          />
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+/* global bus */
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader';
+
+export default {
+  components: {
+    PageHeader,
+  },
+  data() {
+    return {
+      websiteName: '',
+      websiteUrl: '',
+      isCreating: false,
+    };
+  },
+  mounted() {
+    bus.$on('new_website_channel', ({ inboxId }) => {
+      router.replace({
+        name: 'settings_inboxes_add_agents',
+        params: { page: 'new', inbox_id: inboxId },
+      });
+    });
+  },
+  methods: {
+    createChannel() {
+      this.isCreating = true;
+      this.$store.dispatch('addWebsiteChannel', {
+        website: {
+          website_name: this.websiteName,
+          website_url: this.websiteUrl,
+        },
+      });
+    },
+  },
+};
+</script>