[Enhancement] Select widget_color while creating inbox (#362)

* [Enhancement] Select widget_color while creating inbox

* Fix codeclimate issues

* Fix !important

.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
     'vue/max-attributes-per-line': ['error', {
-      'singleline': 3,
+      'singleline': 20,
       'multiline': {
         'max': 1,
         'allowFirstLine': false

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

@@ -5,7 +5,8 @@ class Api::V1::Widget::InboxesController < Api::BaseController
     ActiveRecord::Base.transaction do
       channel = web_widgets.create!(
         website_name: permitted_params[:website_name],
-        website_url: permitted_params[:website_url]
+        website_url: permitted_params[:website_url],
+        widget_color: permitted_params[:widget_color]
       )
       @inbox = inboxes.create!(name: permitted_params[:website_name], channel: channel)
     end
@@ -26,6 +27,6 @@ class Api::V1::Widget::InboxesController < Api::BaseController
   end
 
   def permitted_params
-    params.fetch(:website).permit(:website_name, :website_url)
+    params.fetch(:website).permit(:website_name, :website_url, :widget_color)
   end
 end

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -385,7 +385,7 @@ $helptext-font-size: $font-size-small;
 $helptext-font-style: italic;
 $input-prefix-color: $header-color;
 $input-prefix-background: $light-gray;
-$input-prefix-border: 1px solid $light-gray;
+$input-prefix-border: 1px solid $color-border;
 $input-prefix-padding: 1rem;
 $form-label-color: $header-color;
 $form-label-font-size: rem-calc(14);
@@ -402,7 +402,7 @@ $input-font-weight: $global-weight-normal;
 $input-background: $white;
 $input-background-focus: $white;
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $light-gray;
+$input-border: 1px solid $color-border;
 $input-border-focus: 1px solid lighten($primary-color, 15%);
 $input-shadow: 0;
 $input-shadow-focus: 0;

app/javascript/dashboard/assets/scss/_variables.scss

@@ -38,7 +38,7 @@ $font-weight-black: 700;
 $nav-bar-width: 23rem;
 $header-height: 5.6rem;
 
-$woot-logo-padding: $space-large $space-large $space-large $space-large;
+$woot-logo-padding: $space-large $space-two;
 
 // Colors
 $color-woot: #1f93ff;

app/javascript/dashboard/assets/scss/_woot.scss

@@ -3,25 +3,26 @@
 @import 'animations';
 
 @import 'foundation-custom';
-@import 'widgets/search-box';
+@import 'widgets/billing';
+@import 'widgets/buttons';
+@import 'widgets/colorpicker';
 @import 'widgets/conv-header';
-@import 'widgets/thumbnail';
 @import 'widgets/conversation-card';
 @import 'widgets/conversation-view';
-@import 'widgets/reply-box';
-@import 'widgets/tabs';
-@import 'widgets/login';
 @import 'widgets/emojiinput';
-@import 'widgets/woot-tables';
-@import 'widgets/sidemenu';
 @import 'widgets/forms';
-@import 'widgets/buttons';
+@import 'widgets/login';
-@import 'widgets/snackbar';
 @import 'widgets/modal';
-@import 'widgets/states';
+@import 'widgets/reply-box';
 @import 'widgets/report';
-@import 'widgets/billing';
+@import 'widgets/search-box';
+@import 'widgets/sidemenu';
+@import 'widgets/snackbar';
+@import 'widgets/states';
 @import 'widgets/status-bar';
+@import 'widgets/tabs';
+@import 'widgets/thumbnail';
+@import 'widgets/woot-tables';
 
 @import 'views/settings/inbox';
 @import 'views/settings/channel';

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -1,35 +1,37 @@
 .multiselect {
-  min-height: 38px;
   margin-bottom: $space-normal;
+  min-height: 38px;
 
   > .multiselect__tags {
-    padding-top: $zero;
-    min-height: 38px;
-    border-radius: 0;
-    border: 1px solid $light-gray;
     @include margin(0);
+    border: 1px solid $color-border;
+    min-height: 44px;
+    padding-top: $zero;
 
     .multiselect__placeholder {
       padding-top: $space-small;
     }
 
     .multiselect__tag {
-      margin-top: $space-smaller;
+      margin-top: $space-one;
     }
 
     .multiselect__input {
       @include ghost-input;
-      margin-bottom: $zero;
       @include padding($zero);
+
+      margin-bottom: $zero;
     }
 
     .multiselect__single {
-      @include padding($space-small);
+      @include padding($space-one);
+
       margin-bottom: 0;
     }
   }
 
   .multiselect__select {
+    min-height: 44px;
     padding: 0;
     right: 0;
     top: 0;

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -197,8 +197,9 @@
 }
 
 .settings-modal {
-  width: 60%;
   height: 80%;
+  max-width: 1040px;
+  width: 100%;
 
   .delete-wrapper {
     position: absolute;
@@ -214,7 +215,7 @@
     }
   }
 
-  .code-wrapper {
+  .settings--content {
     @include margin($space-medium);
 
     .title {

app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss

@@ -0,0 +1,13 @@
+@import '~dashboard/assets/scss/variables';
+
+.widget-color--selector.vc-compact {
+  border: 1px solid $color-border;
+  box-shadow: none;
+  margin-bottom: $space-normal;
+  width: 356px;
+
+  .vc-compact-color-item {
+    height: 24px;
+    width: 24px;
+  }
+}

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -1,35 +1,43 @@
 .modal-mask {
-    position: fixed;
-    z-index: 9990;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, .5);
-    @include flex;
-    @include flex-align(center, middle);
 
+  @include flex;
+  @include flex-align(center, middle);
+  background-color: $color-white;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9990;
+}
+
+.modal--close {
+  border-radius: 50%;
+  color: $color-heading;
+  cursor: pointer;
+  font-size: $font-size-big;
+  line-height: $space-normal;
+  padding: $space-normal $space-two;
+  position: absolute;
+  right: $space-large;
+  top: $space-large;
+
+  &:hover {
+    background: $color-background;
+  }
 }
 
 .modal-container {
-  width: 60rem;
+  background-color: $color-white;
+  border-radius: $space-small;
   max-height: 100%;
   overflow: scroll;
   position: relative;
-  background-color: $color-white;
+  width: 60rem;
-  border-radius: $space-small;
-
-  .modal--close {
-    font-size: $font-size-large;
-    position: absolute;
-    right: $space-normal;
-    top: $space-small;
-    cursor: pointer;
-    color: $color-heading;
-  }
 
   .page-top-bar {
-    @include padding($space-large $space-larger 0);
+    @include padding($zero $space-two);
+
     img {
       max-height: 6rem;
     }
@@ -56,7 +64,7 @@
 
   form {
     align-self: center;
-    @include padding($space-medium $space-larger $space-small);
+    @include padding($space-two);
     a {
       @include padding($space-normal);
     }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -18,7 +18,7 @@
   .logo {
     img {
       @include padding($woot-logo-padding);
-      max-height: 100px;
+      max-height: 108px;
     }
   }
 

app/javascript/dashboard/components/Modal.vue

@@ -1,8 +1,8 @@
 <template>
   <transition name="modal-fade">
-    <div class="modal-mask" @click="close" v-if="show" transition="modal">
+    <div v-if="show" class="modal-mask" transition="modal" @click="close">
+      <i class="ion-android-close modal--close" @click="close"></i>
       <div class="modal-container" :class="className" @click.stop>
-        <i class="ion-android-close modal--close" @click="close"></i>
         <slot></slot>
       </div>
     </div>
@@ -10,24 +10,23 @@
 </template>
 
 <script>
-
 export default {
   props: {
     show: Boolean,
     onClose: Function,
     className: String,
   },
-  methods: {
-    close() {
-      this.onClose();
-    },
-  },
   mounted() {
-    document.addEventListener('keydown', (e) => {
+    document.addEventListener('keydown', e => {
       if (this.show && e.keyCode === 27) {
         this.onClose();
       }
     });
   },
+  methods: {
+    close() {
+      this.onClose();
+    },
+  },
 };
 </script>

app/javascript/dashboard/components/SettingsFormHeader.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="row settings--form--header">
+    <div class="medium-8">
+      <p class="title">
+        {{ title }}
+      </p>
+      <p class="sub-head">
+        {{ subTitle }}
+      </p>
+    </div>
+    <div v-if="buttonText" class="medium-4 text-right">
+      <woot-submit-button
+        class="small"
+        :button-text="buttonText"
+        :loading="isUpdating"
+        @click="onClick()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    subTitle: {
+      type: String,
+      required: true,
+    },
+    buttonText: {
+      type: String,
+      required: true,
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('update');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~dashboard/assets/scss/variables';
+
+.settings--form--header {
+  border-bottom: 1px solid $color-border;
+  margin-bottom: $space-normal;
+  padding: $space-normal 0;
+}
+</style>

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -1,5 +1,10 @@
 <template>
-  <button type="submit" :disabled="disabled" :class="computedClass">
+  <button
+    type="submit"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
     <i v-if="!!iconClass" :class="iconClass" class="icon"></i>
     <span>{{ buttonText }}</span>
     <spinner v-if="loading" />
@@ -40,5 +45,10 @@ export default {
       return `button nice ${this.buttonClass || ' '}`;
     },
   },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
 };
 </script>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -26,6 +26,9 @@
           "LABEL": "Website Domain",
           "PLACEHOLDER": "Enter your website domain (eg: acme.com)"
         },
+        "WIDGET_COLOR": {
+          "LABEL": "Widget Color"
+        },
         "SUBMIT_BUTTON":"Create inbox"
       },
       "AUTH": {

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

@@ -7,35 +7,45 @@
       />
       <div
         v-if="inbox.channelType === 'Channel::FacebookPage'"
-        class="code-wrapper"
+        class="settings--content"
       >
-        <p class="title">
+        <settings-form-header
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-        </p>
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
-        <p class="sub-head">
+        >
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
+        </settings-form-header>
-        </p>
         <woot-code :script="messengerScript"></woot-code>
       </div>
-      <div
+      <div v-else-if="inbox.channelType === 'Channel::WebWidget'">
-        v-else-if="inbox.channelType === 'Channel::WebWidget'"
+        <div class="settings--content">
-        class="code-wrapper"
+          <settings-form-header
-      >
+            :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-        <p class="title">
+            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
+          >
-        </p>
+          </settings-form-header>
-        <p class="sub-head">
+          <woot-code :script="webWidgetScript"></woot-code>
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
+        </div>
-        </p>
+        <!-- <div class="settings--content">
-        <woot-code :script="webWidgetScript"></woot-code>
+          <settings-form-header
+            :title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
+            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+            :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+            :is-updating="isUpdating"
+            v-on:update="updateAgents"
+          >
+          </settings-form-header>
+          <Compact v-model="widgetColor" />
+        </div> -->
       </div>
-      <div class="agent-wrapper">
+      <div class="settings--content">
-        <p class="title">
+        <settings-form-header
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-        </p>
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
-        <p class="sub-head">
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT') }}
+          :is-updating="isUpdating"
-        </p>
+          @update="updateAgents"
+        >
+        </settings-form-header>
         <multiselect
           v-model="selectedAgents"
           :options="agentList"
@@ -48,12 +58,6 @@
           placeholder="Pick some"
           @select="$v.selectedAgents.$touch"
         />
-        <div @click="updateAgents()">
-          <woot-submit-button
-            :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-            :loading="isUpdating"
-          />
-        </div>
       </div>
     </div>
   </woot-modal>
@@ -68,13 +72,18 @@ import {
   createWebsiteWidgetScript,
   createMessengerScript,
 } from 'dashboard/helper/scriptGenerator';
+import SettingsFormHeader from '../../../../components/SettingsFormHeader.vue';
 
 export default {
+  components: {
+    SettingsFormHeader,
+  },
   props: ['onClose', 'inbox', 'show'],
   data() {
     return {
       selectedAgents: [],
       isUpdating: false,
+      widgetColor: { hex: this.inbox.widgetColor },
     };
   },
   computed: {

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

@@ -34,9 +34,18 @@
           />
         </label>
       </div>
+
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+          <compact v-model="widgetColor" class="widget-color--selector" />
+        </label>
+      </div>
+
       <div class="modal-footer">
         <div class="medium-12 columns">
           <woot-submit-button
+            :disabled="!websiteUrl || !websiteName"
             :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
           />
         </div>
@@ -47,17 +56,20 @@
 
 <script>
 /* global bus */
+import { Compact } from 'vue-color';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
 
 export default {
   components: {
     PageHeader,
+    Compact,
   },
   data() {
     return {
       websiteName: '',
       websiteUrl: '',
+      widgetColor: { hex: '#009CE0' },
       isCreating: false,
     };
   },
@@ -80,6 +92,7 @@ export default {
         website: {
           website_name: this.websiteName,
           website_url: this.websiteUrl,
+          widget_color: this.widgetColor.hex,
         },
       });
     },

app/javascript/dashboard/store/modules/sidebar.js

@@ -154,6 +154,7 @@ const mutations = {
       avatarUrl: item.avatar_url,
       pageId: item.page_id,
       websiteToken: item.website_token,
+      widgetColor: item.widget_color,
     }));
     // Identify menuItem to update
     // May have more than one object to update
@@ -174,6 +175,7 @@ const mutations = {
       avatarUrl: data.avatar_url === undefined ? null : data.avatar_url,
       pageId: data.page_id,
       websiteToken: data.website_token,
+      widgetColor: data.widget_color,
     });
   },
 

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

@@ -10,6 +10,7 @@ json.data do
       json.channel_type inbox.channel_type
       json.avatar_url inbox.channel.try(:avatar).try(:url)
       json.page_id inbox.channel.try(:page_id)
+      json.widget_color inbox.channel.try(:widget_color)
       json.website_token inbox.channel.try(:website_token)
     end
   end

package.json

@@ -40,6 +40,7 @@
     "vue-axios": "~1.2.2",
     "vue-chartjs": "^3.4.2",
     "vue-clickaway": "~2.1.0",
+    "vue-color": "^2.7.0",
     "vue-highlight.js": "^3.1.0",
     "vue-i18n": "~5.0.3",
     "vue-loader": "^15.7.0",

yarn.lock

@@ -2447,6 +2447,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+  integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -6250,6 +6255,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -6362,6 +6372,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.0.0:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9755,6 +9770,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10165,6 +10185,16 @@ vue-clickaway@~2.1.0:
   dependencies:
     loose-envify "^1.2.0"
 
+vue-color@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.7.0.tgz#31e898370a5786fd6c3007388cb7242db6ba6988"
+  integrity sha512-fak9oPRL3BsYtakTGmWIS2yNRppRYNlMgGGq78CMH34ipU8fLgi/bT9JiSPcscpdTNLGracuOFuZ8OFeml+SQQ==
+  dependencies:
+    clamp "^1.0.1"
+    lodash.throttle "^4.0.0"
+    material-colors "^1.0.0"
+    tinycolor2 "^1.1.2"
+
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"