Update widget colors based on the widgetConfig (#276)

.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',

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(
+    const chatIcon = createBubbleIcon({
-      createBubbleIcon({
       className: 'woot-widget-bubble',
       src: bubbleImg,
       target: chatBubble,
-      })
+    });
-    );
+
-    bubbleHolder.appendChild(
+    const closeIcon = createBubbleIcon({
-      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();
   },

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 (

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,

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';

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,
   },
 });

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,
+};

app/javascript/widget/store/types.js

@@ -0,0 +1 @@
+export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';

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>

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

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