Chore: Add web_widget_script in the Inboxes API (#615)

* Chore: Add web_widget_script in the Inboxes API

app/controllers/api/v1/accounts/inboxes_controller.rb

@@ -6,15 +6,15 @@ class Api::V1::Accounts::InboxesController < Api::BaseController
     @inboxes = policy_scope(current_account.inboxes)
   end
 
+  def update
+    @inbox.update(inbox_update_params)
+  end
+
   def destroy
     @inbox.destroy
     head :ok
   end
 
-  def update
-    @inbox.update(inbox_update_params)
-  end
-
   private
 
   def fetch_inbox

app/javascript/dashboard/helper/scriptGenerator.js

@@ -1,20 +1,3 @@
-export const createWebsiteWidgetScript = websiteToken => `
-<script>
-(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: '${websiteToken}',
-      baseUrl: BASE_URL
-    })
-  }
-})(document,"script");
-</script>
-`;
-
 export const createMessengerScript = pageId => `
 <script>
   window.fbAsyncInit = function() {

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

@@ -7,7 +7,10 @@
     >
       <div class="medium-12 columns text-center">
         <div class="website--code">
-          <woot-code v-if="currentInbox.website_token" :script="websiteScript">
+          <woot-code
+            v-if="currentInbox.website_token"
+            :script="currentInbox.web_widget_script"
+          >
           </woot-code>
         </div>
         <router-link
@@ -25,7 +28,6 @@
 </template>
 
 <script>
-import { createWebsiteWidgetScript } from 'dashboard/helper/scriptGenerator';
 import EmptyState from '../../../../components/widgets/EmptyState';
 
 export default {
@@ -44,9 +46,6 @@ export default {
       }
       return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
     },
-    websiteScript() {
-      return createWebsiteWidgetScript(this.currentInbox.website_token);
-    },
   },
 };
 </script>

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

@@ -22,7 +22,7 @@
           :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
         >
         </settings-form-header>
-        <woot-code :script="webWidgetScript"></woot-code>
+        <woot-code :script="inbox.web_widget_script"></woot-code>
       </div>
       <div class="settings--content">
         <settings-form-header
@@ -70,8 +70,12 @@
       >
       </settings-form-header>
       <select v-model="autoAssignment">
-        <option value="true">{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}</option>
-        <option value="false">{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}</option>
+        <option value="true">
+          {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
+        </option>
+        <option value="false">
+          {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
+        </option>
       </select>
     </div>
   </div>
@@ -81,10 +85,7 @@
 /* eslint no-console: 0 */
 /* global bus */
 import { mapGetters } from 'vuex';
-import {
-  createWebsiteWidgetScript,
-  createMessengerScript,
-} from 'dashboard/helper/scriptGenerator';
+import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
 import { Compact } from 'vue-color';
 import SettingsFormHeader from '../../../../components/SettingsFormHeader.vue';
 
@@ -112,9 +113,6 @@ export default {
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
     },
-    webWidgetScript() {
-      return createWebsiteWidgetScript(this.inbox.website_token);
-    },
     messengerScript() {
       return createMessengerScript(this.inbox.page_id);
     },
@@ -196,9 +194,13 @@ export default {
             enable_auto_assignment: this.autoAssignment,
           },
         });
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE'));
+        this.showAlert(
+          this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE')
+        );
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE'));
+        this.showAlert(
+          this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE')
+        );
       }
     },
     getWidgetColor() {

app/javascript/packs/sdk.js

@@ -213,7 +213,6 @@ const IFrameHelper = {
     });
   },
   toggleCloseButton: () => {
-    console.log(window.matchMedia('(max-width: 668px)'));
     if (window.matchMedia('(max-width: 668px)').matches) {
       IFrameHelper.sendMessage('toggle-close-button', { showClose: true });
     } else {

app/models/channel/web_widget.rb

@@ -31,6 +31,23 @@ class Channel::WebWidget < ApplicationRecord
     'Website'
   end
 
+  def web_widget_script
+    "<script>
+      (function(d,t) {
+        var BASE_URL = \"#{ENV.fetch('FRONTEND_URL', '')}\";
+        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: '#{website_token}',
+            baseUrl: BASE_URL
+          })
+        }
+      })(document,\"script\");
+    </script>"
+  end
+
   def create_contact_inbox
     ActiveRecord::Base.transaction do
       contact = inbox.account.contacts.create!(name: ::Haikunator.haikunate(1000))

app/views/api/v1/accounts/inboxes/index.json.jbuilder

@@ -9,5 +9,6 @@ json.payload do
     json.widget_color inbox.channel.try(:widget_color)
     json.website_token inbox.channel.try(:website_token)
     json.enable_auto_assignment inbox.enable_auto_assignment
+    json.web_widget_script inbox.channel.try(:web_widget_script)
   end
 end

app/views/api/v1/accounts/widget/inboxes/create.json.jbuilder

@@ -4,3 +4,4 @@ json.name @inbox.name
 json.channel_type @inbox.channel_type
 json.website_token @inbox.channel.try(:website_token)
 json.widget_color @inbox.channel.try(:widget_color)
+json.web_widget_script @inbox.channel.try(:web_widget_script)

app/views/api/v1/accounts/widget/inboxes/update.json.jbuilder

@@ -4,3 +4,4 @@ json.name @inbox.name
 json.channel_type @inbox.channel_type
 json.website_token @inbox.channel.website_token
 json.widget_color @inbox.channel.widget_color
+json.web_widget_script @inbox.channel.try(:web_widget_script)

swagger/definitions/resource/inbox.yml

@@ -18,3 +18,6 @@ properties:
   enable_auto_assignment:
     type: boolean
     description: The flag which shows whether Auto Assignment is enabled or not
+  web_widget_script:
+    type: string
+    description: Script used to load the website widget

swagger/swagger.json

@@ -930,6 +930,10 @@
         "enable_auto_assignment": {
           "type": "boolean",
           "description": "The flag which shows whether Auto Assignment is enabled or not"
+        },
+        "web_widget_script": {
+          "type": "string",
+          "description": "Script used to load the website widget"
         }
       }
     },