feat: Add send message, fix issues with message conditions (#4423)

Co-authored-by: Tejaswini <tejaswini@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
2022-04-14 13:36:55 +05:30
committed by GitHub
parent d4be268cc3
commit 337a74a10c
15 changed files with 231 additions and 86 deletions

View File

@@ -7,7 +7,7 @@
<select
v-model="action_name"
class="action__question"
:class="{ 'full-width': !inputType }"
:class="{ 'full-width': !showActionInput }"
@change="resetAction()"
>
<option
@@ -61,6 +61,18 @@
@click="removeAction"
/>
</div>
<automation-action-team-message-input
v-if="inputType === 'team_message'"
v-model="action_params"
:teams="dropdownValues"
/>
<textarea
v-if="inputType === 'textarea'"
v-model="action_params"
rows="4"
:placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
class="action-message"
></textarea>
<p
v-if="v.action_params.$dirty && v.action_params.$error"
class="filter-error"
@@ -71,7 +83,11 @@
</template>
<script>
import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
export default {
components: {
AutomationActionTeamMessageInput,
},
props: {
value: {
type: Object,
@@ -211,4 +227,7 @@ export default {
.multiselect {
margin-bottom: var(--space-zero);
}
.action-message {
margin: var(--space-small) 0 0;
}
</style>

View File

@@ -0,0 +1,62 @@
<template>
<div>
<div class="multiselect-wrap--small">
<multiselect
v-model="selectedTeams"
track-by="id"
label="name"
:placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
:multiple="true"
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
deselect-label=""
:max-height="160"
:options="teams"
:allow-empty="false"
@input="updateValue"
/>
<textarea
v-model="message"
rows="4"
:placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
@input="updateValue"
></textarea>
</div>
</div>
</template>
<script>
export default {
// The value types are dynamic, hence prop validation removed to work with our action schema
// eslint-disable-next-line vue/require-prop-types
props: ['teams', 'value'],
data() {
return {
selectedTeams: [],
message: '',
};
},
mounted() {
const { team_ids: teamIds } = this.value;
this.selectedTeams = teamIds;
this.message = this.value.message;
},
methods: {
updateValue() {
this.$emit('input', {
team_ids: this.selectedTeams.map(team => team.id),
message: this.message,
});
},
},
};
</script>
<style scoped>
.multiselect {
margin: var(--space-smaller) var(--space-zero);
}
textarea {
margin-bottom: var(--space-zero);
}
</style>

View File

@@ -89,7 +89,9 @@
"DELETE_MESSAGE": "You need to have atleast one condition to save"
},
"ACTION": {
"DELETE_MESSAGE": "You need to have atleast one action to save"
"DELETE_MESSAGE": "You need to have atleast one action to save",
"TEAM_MESSAGE_INPUT_PLACEHOLDER": "Enter your message here",
"TEAM_DROPDOWN_PLACEHOLDER": "Select teams"
},
"TOGGLE": {
"ACTIVATION_TITLE": "Activate Automation Rule",

View File

@@ -192,10 +192,11 @@ export default {
$each: {
action_params: {
required: requiredIf(prop => {
if (prop.action_name === 'send_email_to_team') return true;
return !(
prop.action_name === 'mute_conversation' ||
prop.action_name === 'snooze_conversation' ||
prop.action_name === 'resolve_convresation'
prop.action_name === 'resolve_conversation'
);
}),
},
@@ -361,6 +362,7 @@ export default {
getActionDropdownValues(type) {
switch (type) {
case 'assign_team':
case 'send_email_to_team':
return this.$store.getters['teams/getTeams'];
case 'add_label':
return this.$store.getters['labels/getLabels'].map(i => {
@@ -443,6 +445,8 @@ export default {
return true;
},
showActionInput(actionName) {
if (actionName === 'send_email_to_team' || actionName === 'send_message')
return false;
const type = AUTOMATION_ACTION_TYPES.find(
action => action.key === actionName
).inputType;

View File

@@ -199,7 +199,7 @@ export default {
return !(
prop.action_name === 'mute_conversation' ||
prop.action_name === 'snooze_conversation' ||
prop.action_name === 'resolve_convresation'
prop.action_name === 'resolve_conversation'
);
}),
},
@@ -360,6 +360,7 @@ export default {
getActionDropdownValues(type) {
switch (type) {
case 'assign_team':
case 'send_email_to_team':
return this.$store.getters['teams/getTeams'];
case 'add_label':
return this.$store.getters['labels/getLabels'].map(i => {
@@ -475,6 +476,15 @@ export default {
actionParams = [
...this.getActionDropdownValues(action.action_name),
].filter(item => [...action.action_params].includes(item.id));
} else if (inputType === 'team_message') {
actionParams = {
team_ids: [
...this.getActionDropdownValues(action.action_name),
].filter(item =>
[...action.action_params[0].team_ids].includes(item.id)
),
message: action.action_params[0].message,
};
} else actionParams = [...action.action_params];
}
return {
@@ -489,6 +499,8 @@ export default {
};
},
showActionInput(actionName) {
if (actionName === 'send_email_to_team' || actionName === 'send_message')
return false;
const type = AUTOMATION_ACTION_TYPES.find(
action => action.key === actionName
).inputType;

View File

@@ -253,7 +253,7 @@ export default {
: this.$t('AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION', {
automationName: automation.name,
});
// Check if uses confirms to proceed
// Check if user confirms to proceed
const ok = await this.$refs.confirmDialog.showConfirmation();
if (ok) {
await await this.$store.dispatch('automations/update', {

View File

@@ -76,11 +76,16 @@ export const AUTOMATIONS = {
name: 'Add a label',
attributeI18nKey: 'ADD_LABEL',
},
// {
// key: 'send_email_to_team',
// name: 'Send an email to team',
// attributeI18nKey: 'SEND_MESSAGE',
// },
{
key: 'send_email_to_team',
name: 'Send an email to team',
attributeI18nKey: 'SEND_EMAIL_TO_TEAM',
},
{
key: 'send_message',
name: 'Send a message',
attributeI18nKey: 'SEND_MESSAGE',
},
{
key: 'send_email_transcript',
name: 'Send an email transcript',
@@ -96,8 +101,9 @@ export const AUTOMATIONS = {
name: 'Snooze conversation',
attributeI18nKey: 'MUTE_CONVERSATION',
},
{
key: 'resolve_convresation',
key: 'resolve_conversation',
name: 'Resolve conversation',
attributeI18nKey: 'RESOLVE_CONVERSATION',
},
@@ -106,6 +112,11 @@ export const AUTOMATIONS = {
name: 'Send Webhook Event',
attributeI18nKey: 'SEND_WEBHOOK_EVENT',
},
// {
// key: 'send_attachment',
// name: 'Send Attachment',
// attributeI18nKey: 'SEND_ATTACHMENT',
// },
],
},
conversation_created: {
@@ -132,7 +143,7 @@ export const AUTOMATIONS = {
filterOperators: OPERATOR_TYPES_1,
},
{
key: 'referrer',
key: 'referer',
name: 'Referrer Link',
attributeI18nKey: 'REFERER_LINK',
inputType: 'plain_text',
@@ -150,11 +161,16 @@ export const AUTOMATIONS = {
name: 'Assign an agent',
attributeI18nKey: 'ASSIGN_AGENT',
},
// {
// key: 'send_email_to_team',
// name: 'Send an email to team',
// attributeI18nKey: 'SEND_MESSAGE',
// },
{
key: 'send_email_to_team',
name: 'Send an email to team',
attributeI18nKey: 'SEND_EMAIL_TO_TEAM',
},
{
key: 'send_message',
name: 'Send a message',
attributeI18nKey: 'SEND_MESSAGE',
},
{
key: 'send_email_transcript',
name: 'Send an email transcript',
@@ -171,7 +187,7 @@ export const AUTOMATIONS = {
attributeI18nKey: 'MUTE_CONVERSATION',
},
{
key: 'resolve_convresation',
key: 'resolve_conversation',
name: 'Resolve conversation',
attributeI18nKey: 'RESOLVE_CONVERSATION',
},
@@ -180,6 +196,11 @@ export const AUTOMATIONS = {
name: 'Send Webhook Event',
attributeI18nKey: 'SEND_WEBHOOK_EVENT',
},
// {
// key: 'send_attachment',
// name: 'Send Attachment',
// attributeI18nKey: 'SEND_ATTACHMENT',
// },
],
},
conversation_updated: {
@@ -238,11 +259,16 @@ export const AUTOMATIONS = {
name: 'Assign an agent',
attributeI18nKey: 'ASSIGN_AGENT',
},
// {
// key: 'send_email_to_team',
// name: 'Send an email to team',
// attributeI18nKey: 'SEND_MESSAGE',
// },
{
key: 'send_email_to_team',
name: 'Send an email to team',
attributeI18nKey: 'SEND_EMAIL_TO_TEAM',
},
{
key: 'send_message',
name: 'Send a message',
attributeI18nKey: 'SEND_MESSAGE',
},
{
key: 'send_email_transcript',
name: 'Send an email transcript',
@@ -259,7 +285,7 @@ export const AUTOMATIONS = {
attributeI18nKey: 'MUTE_CONVERSATION',
},
{
key: 'resolve_convresation',
key: 'resolve_conversation',
name: 'Resolve conversation',
attributeI18nKey: 'RESOLVE_CONVERSATION',
},
@@ -268,6 +294,11 @@ export const AUTOMATIONS = {
name: 'Send Webhook Event',
attributeI18nKey: 'SEND_WEBHOOK_EVENT',
},
// {
// key: 'send_attachment',
// name: 'Send Attachment',
// attributeI18nKey: 'SEND_ATTACHMENT',
// },
],
},
};
@@ -298,11 +329,11 @@ export const AUTOMATION_ACTION_TYPES = [
label: 'Add a label',
inputType: 'multi_select',
},
// {
// key: 'send_email_to_team',
// label: 'Send an email to team',
// inputType: 'multi_select',
// },
{
key: 'send_email_to_team',
label: 'Send an email to team',
inputType: 'team_message',
},
{
key: 'send_email_transcript',
label: 'Send an email transcript',
@@ -319,7 +350,7 @@ export const AUTOMATION_ACTION_TYPES = [
inputType: null,
},
{
key: 'resolve_convresation',
key: 'resolve_conversation',
label: 'Resolve conversation',
inputType: null,
},
@@ -328,4 +359,14 @@ export const AUTOMATION_ACTION_TYPES = [
label: 'Send Webhook Event',
inputType: 'url',
},
// {
// key: 'send_attachment',
// label: 'Send Attachment',
// inputType: 'file',
// },
{
key: 'send_message',
label: 'Send a message',
inputType: 'textarea',
},
];