scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 12:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add pre_chat_form_settings in inbox settings page (#1776)

Browse Source
This commit is contained in:
Pranav Raj S
2021-02-16 00:58:57 +05:30
committed by GitHub
parent 3ade7d4445
commit 1706199a0e
9 changed files with 188 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/controllers/api/v1/accounts/inboxes_controller.rb
View File

@@ -89,6 +89,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
:webhook_url,
:email,
:reply_time,
:pre_chat_form_enabled,
{ pre_chat_form_options: [:pre_chat_message, :require_email] },
{ selected_feature_flags: [] }
])
end

20
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
View File

@@ -224,7 +224,8 @@
"TABS": {
"SETTINGS": "Settings",
"COLLABORATORS": "Collaborators",
"CONFIGURATION": "Configuration"
"CONFIGURATION": "Configuration",
"PRE_CHAT_FORM": "Pre Chat Form"
},
"SETTINGS": "Settings",
"FEATURES": {
@@ -250,6 +251,23 @@
"SUBTITLE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
"MESSAGE_SUCCESS": "Reconnection successful",
"MESSAGE_ERROR": "There was an error, please try again"
},
"PRE_CHAT_FORM": {
"DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
"ENABLE": {
"LABEL": "Enable pre chat form",
"OPTIONS": {
"ENABLED": "Yes",
"DISABLED": "No"
}
},
"PRE_CHAT_MESSAGE": {
"LABEL": "Pre Chat Message",
"PLACEHOLDER": "This message would be visible to the users along with the form"
},
"REQUIRE_EMAIL": {
"LABEL": "Visitors should provide their name and email address before starting the chat"
}
}
}
}

128
app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<div class="settings--content">
<div class="prechat--title">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
</div>
<form class="medium-6" @submit.prevent="updateInbox">
<label class="medium-9 columns">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
<select v-model="preChatFormEnabled">
<option :value="true">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
</option>
</select>
</label>
<label class="medium-9">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
<textarea
v-model.trim="preChatMessage"
type="text"
:placeholder="
$t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
"
/>
</label>
<div>
<input
v-model="preChatFieldOptions"
type="checkbox"
value="requireEmail"
@input="handlePreChatFieldOptions"
/>
<label for="requireEmail">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.REQUIRE_EMAIL.LABEL') }}
</label>
</div>
<woot-submit-button
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="uiFlags.isUpdatingInbox"
/>
</form>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
export default {
mixins: [alertMixin],
props: {
inbox: {
type: Object,
default: () => ({}),
},
},
data() {
return {
preChatFormEnabled: false,
preChatMessage: '',
preChatFieldOptions: [],
};
},
computed: {
...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
},
watch: {
inbox() {
this.setDefaults();
},
},
mounted() {
this.setDefaults();
},
methods: {
setDefaults() {
const {
pre_chat_form_enabled: preChatFormEnabled,
pre_chat_form_options: preChatFormOptions,
} = this.inbox;
this.preChatFormEnabled = preChatFormEnabled;
const { pre_chat_message: preChatMessage, require_email: requireEmail } =
preChatFormOptions || {};
this.preChatMessage = preChatMessage;
if (requireEmail) {
this.preChatFieldOptions = ['requireEmail'];
}
},
handlePreChatFieldOptions(event) {
if (this.preChatFieldOptions.includes(event.target.value)) {
this.preChatFieldOptions = [];
} else {
this.preChatFieldOptions = [event.target.value];
}
},
async updateInbox() {
try {
const payload = {
id: this.inbox.id,
formData: false,
channel: {
pre_chat_form_enabled: this.preChatFormEnabled,
pre_chat_form_options: {
pre_chat_message: this.preChatMessage,
require_email: this.preChatFieldOptions.includes('requireEmail'),
},
},
};
await this.$store.dispatch('inboxes/updateInbox', payload);
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
}
},
},
};
</script>
<style scoped>
.settings--content {
font-size: var(--font-size-default);
}
.prechat--title {
margin: var(--space-medium) 0 var(--space-slab);
}
</style>

21
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View File

@@ -251,6 +251,9 @@
</div>
</div>
</div>
<div v-if="selectedTabKey === 'preChatForm'">
<pre-chat-form-settings :inbox="inbox" />
</div>
</div>
</template>
@@ -262,11 +265,13 @@ import alertMixin from 'shared/mixins/alertMixin';
import SettingsSection from '../../../../components/SettingsSection';
import inboxMixin from 'shared/mixins/inboxMixin';
import FacebookReauthorize from './facebook/Reauthorize';
import PreChatFormSettings from './PreChatForm/Settings';
export default {
components: {
SettingsSection,
FacebookReauthorize,
PreChatFormSettings,
},
mixins: [alertMixin, configMixin, inboxMixin],
data() {
@@ -317,7 +322,21 @@ export default {
},
];
if (this.isAWebWidgetInbox || this.isATwilioChannel) {
if (this.isAWebWidgetInbox) {
return [
...visibleToAllChannelTabs,
{
key: 'preChatForm',
name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
},
{
key: 'configuration',
name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
},
];
}
if (this.isATwilioChannel) {
return [
...visibleToAllChannelTabs,
{

7
app/javascript/dashboard/store/modules/inboxes.js
View File

@@ -111,12 +111,15 @@ export const actions = {
throw new Error(error);
}
},
updateInbox: async ({ commit }, { id, ...inboxParams }) => {
updateInbox: async ({ commit }, { id, formData = true, ...inboxParams }) => {
commit(types.default.SET_INBOXES_UI_FLAG, {
isUpdatingAutoAssignment: true,
});
try {
const response = await InboxesAPI.update(id, buildInboxData(inboxParams));
const response = await InboxesAPI.update(
id,
formData ? buildInboxData(inboxParams) : inboxParams
);
commit(types.default.EDIT_INBOXES, response.data);
commit(types.default.SET_INBOXES_UI_FLAG, {
isUpdatingAutoAssignment: false,

2
app/javascript/widget/components/PreChat/Form.vue
View File

@@ -1,6 +1,6 @@
<template>
<form
class="flex flex-1 flex-col p-6 overflow-y-scroll"
class="flex flex-1 flex-col p-6 overflow-y-auto"
@submit.prevent="onSubmit"
>
<div v-if="options.preChatMessage" class="text-black-800 text-sm leading-5">

2
app/javascript/widget/views/Home.vue
View File

@@ -34,7 +34,7 @@
/>
</transition>
</div>
<div class="flex flex-1 overflow-scroll">
<div class="flex flex-1 overflow-auto">
<conversation-wrap
v-if="currentView === 'messageView'"
:grouped-messages="groupedMessages"

6
app/views/api/v1/models/_inbox.json.jbuilder
View File

@@ -18,4 +18,8 @@ json.phone_number resource.channel.try(:phone_number)
json.selected_feature_flags resource.channel.try(:selected_feature_flags)
json.reply_time resource.channel.try(:reply_time)
json.reauthorization_required resource.channel.try(:reauthorization_required?) if resource.facebook?
json.hmac_token resource.channel.try(:hmac_token) if resource.web_widget?
if resource.web_widget?
json.hmac_token resource.channel.try(:hmac_token)
json.pre_chat_form_enabled resource.channel.try(:pre_chat_form_enabled)
json.pre_chat_form_options resource.channel.try(:pre_chat_form_options)
end

2
app/views/widget_tests/index.html.erb
View File

@@ -35,10 +35,12 @@ window.chatwootSettings = {
window.addEventListener('chatwoot:ready', function() {
console.log(window.$chatwoot);
if (window.location.search.includes('setUser')) {
window.$chatwoot.setUser('<%= user_id %>', {
identifier_hash: '<%= user_hash %>',
email: 'jane@example.com',
name: 'Jane Doe'
});
}
})
</script>