From 5d2efdc7fc6011e833fdcd5be295717cd3dbb71d Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Tue, 26 Nov 2019 00:10:27 +0530
Subject: [PATCH] Update widget colors based on the widgetConfig (#276)

---
 .eslintrc.js                                  |  1 +
 app/javascript/packs/sdk.js                   | 35 ++++++++++---------
 app/javascript/widget/App.vue                 |  3 ++
 .../widget/components/ChatHeaderExpanded.vue  |  9 ++++-
 .../widget/components/UserMessageBubble.vue   | 13 +++++--
 app/javascript/widget/store/index.js          |  2 ++
 .../widget/store/modules/appConfig.js         | 29 +++++++++++++++
 app/javascript/widget/store/types.js          |  1 +
 app/views/widgets/index.html.erb              |  5 ++-
 ...24091232_add_widget_color_to_web_widget.rb |  5 +++
 db/schema.rb                                  |  3 +-
 11 files changed, 85 insertions(+), 21 deletions(-)
 create mode 100644 app/javascript/widget/store/modules/appConfig.js
 create mode 100644 app/javascript/widget/store/types.js
 create mode 100644 db/migrate/20191124091232_add_widget_color_to_web_widget.rb

diff --git a/.eslintrc.js b/.eslintrc.js
index 8afa4fbe0..b61be8bb6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,6 +9,7 @@ module.exports = {
   rules: {
     'prettier/prettier': ['error'],
     camelcase: 'off',
+    'no-param-reassign': 'off',
     'import/no-extraneous-dependencies': 'off',
     'import/prefer-default-export': 'off',
     'import/no-named-as-default': 'off',
diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 8d98a82ad..7fc33ad91 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -153,11 +153,11 @@ const IFrameHelper = {
       if (message.event === 'loaded') {
         Cookies.set('cw_conversation', message.config.authToken);
         IFrameHelper.sendMessage('config-set', {});
-        IFrameHelper.onLoad();
+        IFrameHelper.onLoad(message.config.channelConfig);
       }
     };
   },
-  onLoad: () => {
+  onLoad: ({ widget_color: widgetColor }) => {
     const iframe = IFrameHelper.getAppFrame();
     iframe.style.visibility = '';
     iframe.setAttribute('id', `chatwoot_live_chat_widget`);
@@ -167,20 +167,23 @@ const IFrameHelper = {
     loadCSS();
     createBubbleHolder();
 
-    bubbleHolder.appendChild(
-      createBubbleIcon({
-        className: 'woot-widget-bubble',
-        src: bubbleImg,
-        target: chatBubble,
-      })
-    );
-    bubbleHolder.appendChild(
-      createBubbleIcon({
-        className: 'woot-widget-bubble woot--close woot--hide',
-        src: closeImg,
-        target: closeBubble,
-      })
-    );
+    const chatIcon = createBubbleIcon({
+      className: 'woot-widget-bubble',
+      src: bubbleImg,
+      target: chatBubble,
+    });
+
+    const closeIcon = createBubbleIcon({
+      className: 'woot-widget-bubble woot--close woot--hide',
+      src: closeImg,
+      target: closeBubble,
+    });
+
+    chatIcon.style.background = widgetColor;
+    closeIcon.style.background = widgetColor;
+
+    bubbleHolder.appendChild(chatIcon);
+    bubbleHolder.appendChild(closeIcon);
     bubbleHolder.appendChild(createNotificationBubble());
     onClickChatBubble();
   },
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index f5d031279..43bfb10b9 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -22,6 +22,7 @@ export default {
   name: 'App',
 
   methods: {
+    ...mapActions('appConfig', ['setWidgetColor']),
     ...mapActions('conversation', ['fetchOldConversations']),
     scrollConversationToBottom() {
       const container = this.$el.querySelector('.conversation-wrap');
@@ -35,10 +36,12 @@ export default {
         event: 'loaded',
         config: {
           authToken: window.authToken,
+          channelConfig: window.chatwootWebChannel,
         },
       });
       setHeader('X-Auth-Token', window.authToken);
     }
+    this.setWidgetColor(window.chatwootWebChannel);
 
     window.addEventListener('message', e => {
       if (
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 15ff35ae8..1b30dc37d 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="header-expanded">
+  <header class="header-expanded" :style="{ background: widgetColor }">
     <div>
       <h2 class="title">
         {{ introHeading }}
@@ -12,8 +12,15 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'ChatHeaderExpanded',
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
   props: {
     introHeading: {
       type: String,
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 2a570bfdc..977d78eff 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -1,12 +1,22 @@
 <template>
-  <div class="chat-bubble user" v-html="formatMessage(message)"></div>
+  <div
+    class="chat-bubble user"
+    :style="{ background: widgetColor }"
+    v-html="formatMessage(message)"
+  ></div>
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'UserMessageBubble',
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
   mixins: [messageFormatterMixin],
   props: {
     message: String,
@@ -14,7 +24,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
diff --git a/app/javascript/widget/store/index.js b/app/javascript/widget/store/index.js
index b417696ca..91f6877ef 100755
--- a/app/javascript/widget/store/index.js
+++ b/app/javascript/widget/store/index.js
@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import conversation from 'widget/store/modules/conversation';
+import appConfig from 'widget/store/modules/appConfig';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
+    appConfig,
     conversation,
   },
 });
diff --git a/app/javascript/widget/store/modules/appConfig.js b/app/javascript/widget/store/modules/appConfig.js
new file mode 100644
index 000000000..8907cafa4
--- /dev/null
+++ b/app/javascript/widget/store/modules/appConfig.js
@@ -0,0 +1,29 @@
+import { SET_WIDGET_COLOR } from '../types';
+
+const state = {
+  widgetColor: '',
+};
+
+const getters = {
+  getWidgetColor: $state => $state.widgetColor,
+};
+
+const actions = {
+  setWidgetColor({ commit }, data) {
+    commit(SET_WIDGET_COLOR, data);
+  },
+};
+
+const mutations = {
+  [SET_WIDGET_COLOR]($state, data) {
+    $state.widgetColor = data.widget_color;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/app/javascript/widget/store/types.js b/app/javascript/widget/store/types.js
new file mode 100644
index 000000000..e6f66e31f
--- /dev/null
+++ b/app/javascript/widget/store/types.js
@@ -0,0 +1 @@
+export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';
diff --git a/app/views/widgets/index.html.erb b/app/views/widgets/index.html.erb
index 35a7ff1a3..bb008b9dd 100644
--- a/app/views/widgets/index.html.erb
+++ b/app/views/widgets/index.html.erb
@@ -5,7 +5,10 @@
     <%= csrf_meta_tags %>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
     <script>
-      window.chatwootWebChannel = '<%= @web_widget.website_name %>'
+      window.chatwootWebChannel = {
+        website_name: '<%= @web_widget.website_name %>',
+        widget_color: '<%= @web_widget.widget_color %>'
+      }
       window.chatwootPubsubToken = '<%= @contact.pubsub_token %>'
       window.authToken = '<%= @token %>'
     </script>
diff --git a/db/migrate/20191124091232_add_widget_color_to_web_widget.rb b/db/migrate/20191124091232_add_widget_color_to_web_widget.rb
new file mode 100644
index 000000000..e0ac830ce
--- /dev/null
+++ b/db/migrate/20191124091232_add_widget_color_to_web_widget.rb
@@ -0,0 +1,5 @@
+class AddWidgetColorToWebWidget < ActiveRecord::Migration[6.1]
+  def change
+    add_column :channel_web_widgets, :widget_color, :string, default: '#1f93ff'
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index e1c6bad99..9e16ab19f 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_11_16_073924) do
+ActiveRecord::Schema.define(version: 2019_11_24_091232) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -62,6 +62,7 @@ ActiveRecord::Schema.define(version: 2019_11_16_073924) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.string "website_token"
+    t.string "widget_color", default: "#1f93ff"
     t.index ["website_token"], name: "index_channel_web_widgets_on_website_token", unique: true
   end