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>
-
+        <greetings-editor
-        <woot-input
           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
+        <settings-section
-            :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
-            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
-          >
+        >
-            <woot-code :script="inbox.inbox_identifier"></woot-code>
+          <woot-code :script="inbox.inbox_identifier"></woot-code>
-          </settings-section>
+        </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.greetingEnabled = this.inbox.greeting_enabled || false;
-        this.greetingMessage = this.inbox.greeting_message;
+        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">
+      <greetings-editor
-        <label>
+        v-if="greetingEnabled"
-          {{
+        v-model.trim="greetingMessage"
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
+        class="medium-12 columns"
-          }}
+        :label="
-          <input
+          $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
-            v-model.trim="greetingMessage"
+        "
-            type="text"
+        :placeholder="
-            :placeholder="
+          $t(
-              $t(
+            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+          )
-              )
+        "
-            "
+        :richtext="!textAreaChannels"
-          />
+      />
-        </label>
-      </div>
-
       <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>

app/services/message_templates/hook_execution_service.rb

@@ -30,6 +30,9 @@ class MessageTemplates::HookExecutionService
   end
 
   def should_send_greeting?
+    # should not send if its a tweet message
+    return false if conversation.tweet?
+
     first_message_from_contact? && inbox.greeting_enabled? && inbox.greeting_message.present?
   end
 

spec/services/message_templates/hook_execution_service_spec.rb

@@ -1,6 +1,43 @@
 require 'rails_helper'
 
 describe ::MessageTemplates::HookExecutionService do
+  context 'when Greeting Message' do
+    it 'doesnot calls ::MessageTemplates::Template::Greeting if greeting_message is empty' do
+      contact = create(:contact, email: nil)
+      conversation = create(:conversation, contact: contact)
+      # ensure greeting hook is enabled
+      conversation.inbox.update(greeting_enabled: true, enable_email_collect: true)
+
+      email_collect_service = double
+
+      allow(::MessageTemplates::Template::EmailCollect).to receive(:new).and_return(email_collect_service)
+      allow(email_collect_service).to receive(:perform).and_return(true)
+      allow(::MessageTemplates::Template::Greeting).to receive(:new)
+
+      # described class gets called in message after commit
+      message = create(:message, conversation: conversation)
+
+      expect(::MessageTemplates::Template::Greeting).not_to have_received(:new)
+      expect(::MessageTemplates::Template::EmailCollect).to have_received(:new).with(conversation: message.conversation)
+      expect(email_collect_service).to have_received(:perform)
+    end
+
+    it 'will not call ::MessageTemplates::Template::CsatSurvey if its a tweet conversation' do
+      twitter_channel = create(:channel_twitter_profile)
+      twitter_inbox = create(:inbox, channel: twitter_channel)
+      # ensure greeting hook is enabled and greeting_message is present
+      twitter_inbox.update(greeting_enabled: true, greeting_message: 'Hi, this is a greeting message')
+
+      conversation = create(:conversation, inbox: twitter_inbox, additional_attributes: { type: 'tweet' })
+      greeting_service = double
+      allow(::MessageTemplates::Template::Greeting).to receive(:new).and_return(greeting_service)
+      allow(greeting_service).to receive(:perform).and_return(true)
+
+      message = create(:message, conversation: conversation)
+      expect(::MessageTemplates::Template::Greeting).not_to have_received(:new).with(conversation: message.conversation)
+    end
+  end
+
   context 'when it is a first message from web widget' do
     it 'calls ::MessageTemplates::Template::EmailCollect' do
       contact = create(:contact, email: nil)
@@ -51,26 +88,6 @@ describe ::MessageTemplates::HookExecutionService do
       expect(::MessageTemplates::Template::EmailCollect).not_to have_received(:new).with(conversation: message.conversation)
     end
 
-    it 'doesnot calls ::MessageTemplates::Template::Greeting if greeting_message is empty' do
-      contact = create(:contact, email: nil)
-      conversation = create(:conversation, contact: contact)
-      # ensure greeting hook is enabled
-      conversation.inbox.update(greeting_enabled: true, enable_email_collect: true)
-
-      email_collect_service = double
-
-      allow(::MessageTemplates::Template::EmailCollect).to receive(:new).and_return(email_collect_service)
-      allow(email_collect_service).to receive(:perform).and_return(true)
-      allow(::MessageTemplates::Template::Greeting).to receive(:new)
-
-      # described class gets called in message after commit
-      message = create(:message, conversation: conversation)
-
-      expect(::MessageTemplates::Template::Greeting).not_to have_received(:new)
-      expect(::MessageTemplates::Template::EmailCollect).to have_received(:new).with(conversation: message.conversation)
-      expect(email_collect_service).to have_received(:perform)
-    end
-
     it 'doesnot calls ::MessageTemplates::Template::EmailCollect when enable_email_collect form is disabled' do
       contact = create(:contact, email: nil)
       conversation = create(:conversation, contact: contact)