feat: Display reply time in widget (#1349)

Fixes #1132

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

@@ -1,3 +1,4 @@
+
 .button {
   font-family: $body-font-family;
   font-weight: $font-weight-medium;

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

@@ -14,5 +14,4 @@
 @import '~bourbon/core/bourbon';
 
 @include foundation-everything($flex: true);
-
 @import 'woot';

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' : ''}`;

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"

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

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

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: {