KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Fayaz Ahmed 2021-09-08 15:07:24 +05:30 committed by GitHub
parent 41314157c2
commit 2821777e93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 174 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/javascript/dashboard/assets/scss/views/settings/inbox.scss
View file

@ -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;
}
}

35
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View file

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

44
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
View file

@ -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() {

78
app/javascript/shared/components/GreetingsEditor.vue Normal file
View 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>

3
app/services/message_templates/hook_execution_service.rb
View file

@ -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

57
spec/services/message_templates/hook_execution_service_spec.rb
View file

@ -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)