feat: Add multiline support for channel greeting message (#2952)
This commit is contained in:
parent
41314157c2
commit
2821777e93
6 changed files with 174 additions and 57 deletions
|
@ -71,7 +71,6 @@
|
|||
}
|
||||
|
||||
&.over {
|
||||
|
||||
&::after {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
<greetings-editor
|
||||
v-if="greetingEnabled"
|
||||
v-model.trim="greetingMessage"
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</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() {
|
||||
|
|
78
app/javascript/shared/components/GreetingsEditor.vue
Normal file
78
app/javascript/shared/components/GreetingsEditor.vue
Normal file
|
@ -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>
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue