[Enhancement] Add CopyToClipboard action in code component (#329)

* Add CopyToClipboard action in websiteWidgetCode component

* Fix codeclimate issues

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

@@ -1,7 +1,8 @@
 <template>
   <div class="wizard-body columns content-box small-9">
-    <loading-state :message="emptyStateMessage" v-if="showLoader"></loading-state>
-    <form class="row" v-on:submit.prevent="addAgents()" v-if="!showLoader">
+    <loading-state v-if="showLoader" :message="emptyStateMessage">
+    </loading-state>
+    <form v-if="!showLoader" class="row" @submit.prevent="addAgents()">
       <div class="medium-12 columns">
         <page-header
           :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
@@ -10,13 +11,28 @@
       </div>
       <div class="medium-7 columns">
         <div class="medium-12 columns">
-          <label :class="{ 'error': $v.selectedAgents.$error }">Agents
-            <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"></multiselect>
-            <span class="message" v-if="$v.selectedAgents.$error">Add atleast one agent to your new Inbox</span>
+          <label :class="{ error: $v.selectedAgents.$error }">
+            Agents
+            <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"
+            >
+            </multiselect>
+            <span v-if="$v.selectedAgents.$error" class="message">
+              Add atleast one agent to your new Inbox
+            </span>
           </label>
         </div>
         <div class="medium-12 columns text-right">
-          <input type="submit" value="Create Inbox" class="button">
+          <input type="submit" value="Create Inbox" class="button" />
         </div>
       </div>
     </form>
@@ -28,16 +44,13 @@
 /* global bus */
 import { mapGetters } from 'vuex';
 
-import ChannelItem from '../../../../components/widgets/ChannelItem';
 import ChannelApi from '../../../../api/channels';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader';
 import LoadingState from '../../../../components/widgets/LoadingState';
 
 export default {
-
   components: {
-    ChannelItem,
     PageHeader,
     LoadingState,
   },
@@ -73,16 +86,22 @@ export default {
       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 } });
-      }).catch((error) => {
-        bus.$emit('newToastMessage', error.message);
-        this.isCreating = false;
-      });
+        .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;
+        });
     },
   },
-
 };
-
 </script>

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

@@ -1,19 +1,55 @@
 <template>
   <div class="wizard-body columns content-box small-9">
-    <empty-state :title="$t('INBOX_MGMT.FINISH.TITLE')" :message="$t('INBOX_MGMT.FINISH.MESSAGE')" :buttonText="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')">
+    <empty-state
+      :title="$t('INBOX_MGMT.FINISH.TITLE')"
+      :message="message"
+      :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
+    >
       <div class="medium-12 columns text-center">
-        <router-link class="button success nice" :to="{ name: 'inbox_dashboard', params: { inboxId: this.$route.params.inbox_id }}">{{$t('INBOX_MGMT.FINISH.BUTTON_TEXT')}}</router-link>
+        <div class="website--code">
+          <woot-code v-if="$route.params.website_token" :script="websiteScript">
+          </woot-code>
+        </div>
+        <router-link
+          class="button success nice"
+          :to="{
+            name: 'inbox_dashboard',
+            params: { inboxId: this.$route.params.inbox_id },
+          }"
+        >
+          {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
+        </router-link>
       </div>
     </empty-state>
   </div>
 </template>
 
 <script>
+import { createWebsiteWidgetScript } from 'dashboard/helper/scriptGenerator';
 import EmptyState from '../../../../components/widgets/EmptyState';
 
 export default {
   components: {
     EmptyState,
   },
+  computed: {
+    message() {
+      if (!this.$route.params.website_token) {
+        return this.$t('INBOX_MGMT.FINISH.MESSAGE');
+      }
+      return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
+    },
+    websiteScript() {
+      return createWebsiteWidgetScript(this.$route.params.website_token);
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+
+.website--code {
+  margin: $space-normal auto;
+  max-width: 60%;
+}
+</style>

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

@@ -15,11 +15,7 @@
         <p class="sub-head">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
         </p>
-        <p class="code">
-          <code>
-            {{ messengerScript }}
-          </code>
-        </p>
+        <woot-code :script="messengerScript"></woot-code>
       </div>
       <div
         v-else-if="inbox.channelType === 'Channel::WebWidget'"
@@ -31,9 +27,7 @@
         <p class="sub-head">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
         </p>
-        <highlight-code lang="javascript">
-          {{ webWidgetScript }}
-        </highlight-code>
+        <woot-code :script="webWidgetScript"></woot-code>
       </div>
       <div class="agent-wrapper">
         <p class="title">
@@ -70,7 +64,10 @@
 /* eslint-disable no-useless-escape */
 /* global bus */
 import { mapGetters } from 'vuex';
-import 'highlight.js/styles/default.css';
+import {
+  createWebsiteWidgetScript,
+  createMessengerScript,
+} from 'dashboard/helper/scriptGenerator';
 
 export default {
   props: ['onClose', 'inbox', 'show'],
@@ -78,49 +75,18 @@ export default {
     return {
       selectedAgents: [],
       isUpdating: false,
-      messengerScript: `<script>
-        window.fbAsyncInit = function() {
-          FB.init({
-            appId: "${window.chatwootConfig.fbAppId}",
-            xfbml: true,
-            version: "v4.0"
-          });
-        };
-        (function(d, s, id){
-           var js, fjs = d.getElementsByTagName(s)[0];
-           if (d.getElementById(id)) { return; }
-           js = d.createElement(s); js.id = id;
-           js.src = "//connect.facebook.net/en_US/sdk.js";
-           fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'facebook-jssdk'));
-
-      <\/script>
-      <div class="fb-messengermessageus"
-        messenger_app_id="${window.chatwootConfig.fbAppId}"
-        page_id="${this.inbox.pageId}"
-        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: {
     ...mapGetters({
       agentList: 'getAgents',
     }),
+    webWidgetScript() {
+      return createWebsiteWidgetScript(this.inbox.websiteToken);
+    },
+    messengerScript() {
+      return createMessengerScript(this.inbox.pageId);
+    },
   },
   mounted() {
     this.$store.dispatch('fetchAgents').then(() => {

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

@@ -4,10 +4,11 @@
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
     />
-    <loading-state
+    <woot-loading-state
       v-if="isCreating"
       message="Creating Website Support Channel"
-    ></loading-state>
+    >
+    </woot-loading-state>
     <form v-if="!isCreating" class="row" @submit.prevent="createChannel()">
       <div class="medium-12 columns">
         <label>
@@ -61,10 +62,14 @@ export default {
     };
   },
   mounted() {
-    bus.$on('new_website_channel', ({ inboxId }) => {
+    bus.$on('new_website_channel', ({ inboxId, websiteToken }) => {
       router.replace({
         name: 'settings_inboxes_add_agents',
-        params: { page: 'new', inbox_id: inboxId },
+        params: {
+          page: 'new',
+          inbox_id: inboxId,
+          website_token: websiteToken,
+        },
       });
     });
   },