feat: Add multiline support for channel greeting message (#2952)

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

@@ -71,7 +71,6 @@
     }
 
     &.over {
-
       &::after {
         background: $color-woot;
       }
@@ -80,7 +79,7 @@
         background: $color-woot;
       }
 
-      &+.item {
+      & + .item {
         &::before {
           background: $color-woot;
         }
@@ -132,10 +131,13 @@
   @include padding($space-medium);
   @include border-light;
   @include full-height();
+
+  &.height-auto {
+    height: auto;
+  }
 }
 
 .inoboxes-list {
-
   .inbox-item {
     @include margin($space-normal);
     @include flex;
@@ -189,9 +191,9 @@
       align-self: center;
       color: $medium-gray;
       font-size: $font-size-small;
-      opacity: .7;
+      opacity: 0.7;
       transform: translateX(0);
-      transition: opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s;
+      transition: opacity 0.1s ease-in 0s, transform 0.2s ease-in 0.03s;
     }
   }
 }
@@ -226,7 +228,7 @@
     @include padding($space-medium);
   }
 
-  >a>img {
+  > a > img {
     width: $space-larger * 5;
   }
 }

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

@@ -102,11 +102,9 @@
             }}
           </p>
         </label>
-
-        <woot-input
+        <greetings-editor
           v-if="greetingEnabled"
           v-model.trim="greetingMessage"
-          class="medium-9 columns"
           :label="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
           "
@@ -115,8 +113,8 @@
               'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
             )
           "
+          :richtext="!textAreaChannels"
         />
-
         <label class="medium-9 columns">
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
           <select v-model="replyTime">
@@ -282,12 +280,12 @@
         </div>
       </div>
       <div v-else-if="isAPIInbox" class="settings--content">
-          <settings-section
-            :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
-            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
-          >
-            <woot-code :script="inbox.inbox_identifier"></woot-code>
-          </settings-section>
+        <settings-section
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
+        >
+          <woot-code :script="inbox.inbox_identifier"></woot-code>
+        </settings-section>
       </div>
       <div v-else-if="isAnEmailChannel">
         <div class="settings--content">
@@ -320,6 +318,7 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize';
 import PreChatFormSettings from './PreChatForm/Settings';
 import WeeklyAvailability from './components/WeeklyAvailability';
+import GreetingsEditor from 'shared/components/GreetingsEditor';
 
 export default {
   components: {
@@ -328,6 +327,7 @@ export default {
     FacebookReauthorize,
     PreChatFormSettings,
     WeeklyAvailability,
+    GreetingsEditor,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -436,7 +436,16 @@ export default {
         return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.PLACEHOLDER');
       }
       return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.PLACEHOLDER');
-    }
+    },
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
   },
   watch: {
     $route(to) {
@@ -475,8 +484,8 @@ export default {
         this.fetchAttachedAgents();
         this.avatarUrl = this.inbox.avatar_url;
         this.selectedInboxName = this.inbox.name;
-        this.greetingEnabled = this.inbox.greeting_enabled;
-        this.greetingMessage = this.inbox.greeting_message;
+        this.greetingEnabled = this.inbox.greeting_enabled || false;
+        this.greetingMessage = this.inbox.greeting_message || '';
         this.autoAssignment = this.inbox.enable_auto_assignment;
         this.emailCollectEnabled = this.inbox.enable_email_collect;
         this.csatSurveyEnabled = this.inbox.csat_survey_enabled;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body height-auto small-9 columns">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
@@ -99,23 +99,20 @@
           }}
         </p>
       </label>
-      <div v-if="greetingEnabled" class="medium-12 columns">
-        <label>
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
-          }}
-          <input
-            v-model.trim="greetingMessage"
-            type="text"
-            :placeholder="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
-              )
-            "
-          />
-        </label>
-      </div>
-
+      <greetings-editor
+        v-if="greetingEnabled"
+        v-model.trim="greetingMessage"
+        class="medium-12 columns"
+        :label="
+          $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
+        "
+        :placeholder="
+          $t(
+            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+          )
+        "
+        :richtext="!textAreaChannels"
+      />
       <div class="modal-footer">
         <div class="medium-12 columns">
           <woot-submit-button
@@ -133,10 +130,12 @@
 import { mapGetters } from 'vuex';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
+import GreetingsEditor from 'shared/components/GreetingsEditor';
 
 export default {
   components: {
     PageHeader,
+    GreetingsEditor,
   },
   data() {
     return {
@@ -153,6 +152,15 @@ export default {
     ...mapGetters({
       uiFlags: 'inboxes/getUIFlags',
     }),
+    textAreaChannels() {
+      if (
+        this.isATwilioChannel ||
+        this.isATwitterInbox ||
+        this.isAFacebookInbox
+      )
+        return true;
+      return false;
+    },
   },
   methods: {
     async createChannel() {

app/javascript/shared/components/GreetingsEditor.vue

@@ -0,0 +1,78 @@
+<template>
+  <section>
+    <label v-if="richtext" class="greetings--richtext">
+      <woot-message-editor
+        v-model="greetingsMessage"
+        :is-format-mode="true"
+        class="input"
+        :placeholder="placeholder"
+        :min-height="4"
+        @input="handleInput"
+      />
+    </label>
+    <resizable-text-area
+      v-else
+      v-model="greetingsMessage"
+      rows="4"
+      type="text"
+      class="medium-9 greetings--textarea"
+      :label="label"
+      :placeholder="placeholder"
+      @input="handleInput"
+    />
+  </section>
+</template>
+
+<script>
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
+
+export default {
+  components: {
+    WootMessageEditor,
+    ResizableTextArea,
+  },
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    richtext: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      greetingsMessage: this.value,
+    };
+  },
+  watch: {
+    value: function (newValue) {
+      this.greetingsMessage = newValue;
+    },
+  },
+  methods: {
+    handleInput() {
+      this.$emit('input', this.greetingsMessage);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.greetings--richtext {
+  padding: 0 var(--space-normal);
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  margin: 0 0 var(--space-normal);
+}
+</style>