feat: Display reply time in widget (#1349)

Fixes #1132
versedpro · Oct 18, 2020 · 85514ca · 85514ca
1 parent bd11b2e
commit 85514ca
Show file tree

Hide file tree

Showing 43 changed files with 707 additions and 345 deletions.
diff --git a/app/controllers/api/v1/accounts/inboxes_controller.rb b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -79,7 +79,7 @@ def update_channel_feature_flags
 
   def permitted_params
     params.permit(:id, :avatar, :name, :greeting_message, :greeting_enabled, channel:
-      [:type, :website_url, :widget_color, :welcome_title, :welcome_tagline, :webhook_url, :email])
+      [:type, :website_url, :widget_color, :welcome_title, :welcome_tagline, :webhook_url, :email, :reply_time])
   end
 
   def inbox_update_params
@@ -91,6 +91,7 @@ def inbox_update_params
                     :welcome_tagline,
                     :webhook_url,
                     :email,
+                    :reply_time,
                     { selected_feature_flags: [] }
                   ])
   end

diff --git a/app/controllers/api/v1/widget/base_controller.rb b/app/controllers/api/v1/widget/base_controller.rb
@@ -4,10 +4,12 @@ class Api::V1::Widget::BaseController < ApplicationController
 
   private
 
+  def conversations
+    @conversations = @contact_inbox.conversations.where(inbox_id: auth_token_params[:inbox_id])
+  end
+
   def conversation
-    @conversation ||= @contact_inbox.conversations.where(
-      inbox_id: auth_token_params[:inbox_id]
-    ).last
+    @conversation ||= conversations.last
   end
 
   def auth_token_params

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -1,3 +1,4 @@
+
 .button {
   font-family: $body-font-family;
   font-weight: $font-weight-medium;

diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss
@@ -14,5 +14,4 @@
 @import '~bourbon/core/bourbon';
 
 @include foundation-everything($flex: true);
-
 @import 'woot';
diff --git a/app/javascript/dashboard/components/widgets/Label.vue b/app/javascript/dashboard/components/widgets/Label.vue
@@ -10,6 +10,7 @@
   </div>
 </template>
 <script>
+import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
 export default {
   props: {
     title: {
@@ -43,12 +44,7 @@ export default {
   },
   computed: {
     textColor() {
-      const color = this.bgColor.replace('#', '');
-      const r = parseInt(color.slice(0, 2), 16);
-      const g = parseInt(color.slice(2, 4), 16);
-      const b = parseInt(color.slice(4, 6), 16);
-      // http://stackoverflow.com/a/3943023/112731
-      return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
+      return getContrastingTextColor(this.bgColor);
     },
     labelClass() {
       return `label ${this.small ? 'small' : ''}`;

diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -73,6 +73,13 @@
           "ENABLED": "Enabled",
           "DISABLED": "Disabled"
         },
+        "REPLY_TIME": {
+          "TITLE": "Set Reply time",
+          "IN_A_FEW_MINUTES": "In a few minutes",
+          "IN_A_FEW_HOURS": "In a few hours",
+          "IN_A_DAY": "In a day",
+          "HELP_TEXT": "This reply time will be displayed on the live chat widget"
+        },
         "WIDGET_COLOR": {
           "LABEL": "Widget Color",
           "PLACEHOLDER": "Update the widget color used in widget"

diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -78,8 +78,6 @@
 </template>
 
 <script>
-/* global bus */
-
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
 import { mapGetters } from 'vuex';

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -8,7 +8,7 @@
       <div class="medium-12 columns text-center">
         <div class="website--code">
           <woot-code
-            v-if="currentInbox.website_token"
+            v-if="currentInbox.web_widget_script"
             :script="currentInbox.web_widget_script"
           >
           </woot-code>
@@ -75,7 +75,7 @@ export default {
         return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
       }
 
-      if (!this.currentInbox.website_token) {
+      if (!this.currentInbox.web_widget_script) {
         return this.$t('INBOX_MGMT.FINISH.MESSAGE');
       }
       return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -103,6 +103,7 @@
             }}
           </p>
         </label>
+
         <woot-input
           v-if="greetingEnabled"
           v-model.trim="greetingMessage"
@@ -116,6 +117,30 @@
             )
           "
         />
+
+        <label class="medium-9 columns">
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
+          <select v-model="replyTime">
+            <option key="in_a_few_minutes" value="in_a_few_minutes">
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
+              }}
+            </option>
+            <option key="in_a_few_hours" value="in_a_few_hours">
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
+              }}
+            </option>
+            <option key="in_a_day" value="in_a_day">
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
+            </option>
+          </select>
+
+          <p class="help-text">
+            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
+          </p>
+        </label>
+
         <label class="medium-9 columns">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
           <select v-model="autoAssignment">
@@ -220,7 +245,6 @@
 </template>
 
 <script>
-/* eslint no-console: 0 */
 import { mapGetters } from 'vuex';
 import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
 import configMixin from 'shared/mixins/configMixin';
@@ -249,6 +273,7 @@ export default {
       channelWelcomeTitle: '',
       channelWelcomeTagline: '',
       selectedFeatureFlags: [],
+      replyTime: '',
       autoAssignmentOptions: [
         {
           value: true,
@@ -352,6 +377,7 @@ export default {
         this.channelWelcomeTitle = this.inbox.welcome_title;
         this.channelWelcomeTagline = this.inbox.welcome_tagline;
         this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
+        this.replyTime = this.inbox.reply_time;
       });
     },
     async fetchAttachedAgents() {
@@ -364,7 +390,7 @@ export default {
         } = response;
         this.selectedAgents = inboxMembers;
       } catch (error) {
-        console.log(error);
+        //  Handle error
       }
     },
     async updateAgents() {
@@ -395,6 +421,7 @@ export default {
             welcome_title: this.channelWelcomeTitle || '',
             welcome_tagline: this.channelWelcomeTagline || '',
             selectedFeatureFlags: this.selectedFeatureFlags,
+            reply_time: this.replyTime || 'in_a_few_minutes',
           },
         };
         if (this.avatarFile) {
@@ -409,7 +436,6 @@ export default {
     handleImageUpload({ file, url }) {
       this.avatarFile = file;
       this.avatarUrl = url;
-      console.log(this.avatarUrl);
     },
   },
   validations: {

diff --git a/app/javascript/shared/assets/fonts/widget_fonts.scss b/app/javascript/shared/assets/fonts/widget_fonts.scss
@@ -6,3 +6,12 @@
   src: url('~shared/assets/fonts/Inter-Regular.woff2?v=3.11') format('woff2'),
        url('~shared/assets/fonts/Inter-Regular.woff?v=3.11') format('woff');
 }
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Medium.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Medium.woff?v=3.11') format('woff');
+}
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
@@ -0,0 +1,54 @@
+<template>
+  <button :class="buttonClassName" :style="buttonStyles" @click="onClick">
+    <slot></slot>
+  </button>
+</template>
+<script>
+export default {
+  props: {
+    block: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'blue',
+    },
+    bgColor: {
+      type: String,
+      default: '',
+    },
+    textColor: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    buttonClassName() {
+      let className = 'text-white py-3 px-4 rounded shadow-sm';
+      if (this.type === 'blue' && !Object.keys(this.buttonStyles).length) {
+        className = `${className} bg-woot-500 hover:bg-woot-700`;
+      }
+      if (this.block) {
+        className = `${className} w-full`;
+      }
+      return className;
+    },
+    buttonStyles() {
+      const styles = {};
+      if (this.bgColor) {
+        styles.backgroundColor = this.bgColor;
+      }
+      if (this.textColor) {
+        styles.color = this.textColor;
+      }
+      return styles;
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
@@ -22,7 +22,7 @@ export default {
     },
     minHeight: {
       type: Number,
-      default: 3.2,
+      default: 2,
     },
   },
   watch: {

diff --git a/app/javascript/shared/helpers/ColorHelper.js b/app/javascript/shared/helpers/ColorHelper.js
@@ -0,0 +1,8 @@
+export const getContrastingTextColor = bgColor => {
+  const color = bgColor.replace('#', '');
+  const r = parseInt(color.slice(0, 2), 16);
+  const g = parseInt(color.slice(2, 4), 16);
+  const b = parseInt(color.slice(4, 6), 16);
+  // http://stackoverflow.com/a/3943023/112731
+  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
+};
diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss
@@ -1,31 +1,30 @@
 // Font sizes
-$font-size-nano: 0.8rem;
-$font-size-micro: 0.8rem;
-$font-size-mini: 1rem;
-$font-size-small: 1.2rem;
-$font-size-default: 1.4rem;
-$font-size-medium: 1.6rem;
-$font-size-large: 2rem;
-$font-size-big: 2.4rem;
-$font-size-bigger: 3.2rem;
-$font-size-mega: 4rem;
-$font-size-giga: 5.6rem;
+$font-size-micro: 0.5rem;
+$font-size-mini: 0.625rem;
+$font-size-small: 0.75rem;
+$font-size-default: 0.875rem;
+$font-size-medium: 1rem;
+$font-size-large: 1.25rem;
+$font-size-big: 1.5rem;
+$font-size-bigger: 2rem;
+$font-size-mega: 2.5rem;
+$font-size-giga: 3.5rem;
 
 // spaces
 $zero: 0;
-$space-micro: 0.2rem;
-$space-smaller: 0.4rem;
-$space-small: 0.8rem;
-$space-one: 1rem;
-$space-slab: 1.2rem;
-$space-normal: 1.6rem;
-$space-two: 2rem;
-$space-medium: 2.4rem;
-$space-large: 3.2rem;
-$space-larger: 4.8rem;
-$space-big: 6.4rem;
-$space-jumbo: 8rem;
-$space-mega: 10rem;
+$space-micro: 0.125rem;
+$space-smaller: 0.25rem;
+$space-small: 0.5rem;
+$space-one: 0.625rem;
+$space-slab: 0.75rem;
+$space-normal: 1rem;
+$space-two: 1.25rem;
+$space-medium: 1.5rem;
+$space-large: 2rem;
+$space-larger: 3rem;
+$space-big: 4rem;
+$space-jumbo: 5rem;
+$space-mega: 6.25rem;
 
 // font-weight
 $font-weight-feather: 100;
@@ -35,15 +34,6 @@ $font-weight-medium: 500;
 $font-weight-bold: 600;
 $font-weight-black: 700;
 
-//Navbar
-$nav-bar-width: 23rem;
-$header-height: 5.6rem;
-
-// Woot Logo
-$woot-logo-width: 20rem;
-$woot-logo-height: 8rem;
-$woot-logo-padding: $space-large $space-large $space-large $space-large;
-
 // Colors
 $color-woot: #1f93ff;
 $color-primary: $color-woot;
@@ -65,20 +55,6 @@ $color-error: #ff382d;
 $color-primary-light: #c7e3ff;
 $color-primary-dark: darken($color-woot, 20%);
 
-
-// Thumbnail
-$thumbnail-radius: 4rem;
-
-// chat-header
-$conv-header-height: 4rem;
-
-// login
-
-// Inbox List
-
-$inbox-thumb-size: 4.8rem;
-
-
 // Spinner
 $spinkit-spinner-color: $color-white !default;
 $spinkit-spinner-margin: 0 0 0 1.6rem !default;
@@ -92,7 +68,7 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
 
-$border-radius: 3px;
+$border-radius: 0.1875px;
 $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
@@ -109,10 +85,6 @@ Arial,
 sans-serif;
 $ionicons-font-path: '~ionicons/fonts';
 
-$spinkit-spinner-color: $color-white !default;
-$spinkit-spinner-margin: 0 0 0 1.6rem !default;
-$spinkit-size: 1.6rem !default;
-
 // Break points
 $break-point-medium: 667px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,5 +14,4 @@
		@import '~bourbon/core/bourbon';

		@include foundation-everything($flex: true);

		@import 'woot';