This reverts commit e730804b48.
This commit is contained in:
Muhsin Keloth
GitHub
parent
25876993ff
commit
f405572e5c
16 changed files with 138 additions and 329 deletions
|
|
@ -49,6 +49,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
|
|||
return if permitted_params(channel_attributes)[:channel].blank?
|
||||
|
||||
validate_email_channel(channel_attributes) if @inbox.inbox_type == 'Email'
|
||||
|
||||
@inbox.channel.update!(permitted_params(channel_attributes)[:channel])
|
||||
update_channel_feature_flags
|
||||
end
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class Api::V1::Widget::BaseController < ApplicationController
|
|||
mergee_contact: @contact
|
||||
).perform
|
||||
else
|
||||
@contact.update!(email: email, name: contact_name, phone_number: contact_phone_number)
|
||||
@contact.update!(email: email, name: contact_name)
|
||||
end
|
||||
end
|
||||
|
||||
|
|
@ -80,10 +80,6 @@ class Api::V1::Widget::BaseController < ApplicationController
|
|||
params[:contact][:name] || contact_email.split('@')[0]
|
||||
end
|
||||
|
||||
def contact_phone_number
|
||||
params[:contact][:phone_number]
|
||||
end
|
||||
|
||||
def browser_params
|
||||
{
|
||||
browser_name: browser.name,
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
|
|||
end
|
||||
|
||||
def permitted_params
|
||||
params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
|
||||
message: [:content, :referer_url, :timestamp, :echo_id])
|
||||
params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id])
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-button"
|
||||
:class="{ active }"
|
||||
role="switch"
|
||||
:aria-checked="active.toString()"
|
||||
@click="onClick"
|
||||
>
|
||||
<span aria-hidden="true" :class="{ active }"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
active: { type: Boolean, default: false },
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.toggle-button {
|
||||
background-color: var(--s-200);
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
height: 19px;
|
||||
width: 34px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--border-radius-large);
|
||||
cursor: pointer;
|
||||
transition-property: background-color;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-button.active {
|
||||
background-color: var(--w-500);
|
||||
}
|
||||
|
||||
.toggle-button span {
|
||||
--space-one-point-five: 1.5rem;
|
||||
height: var(--space-one-point-five);
|
||||
width: var(--space-one-point-five);
|
||||
display: inline-block;
|
||||
background-color: var(--white);
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
|
||||
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
|
||||
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
|
||||
transform: translate(0, 0);
|
||||
border-radius: 100%;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.toggle-button span.active {
|
||||
transform: translate(var(--space-one-point-five), var(--space-zero));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"WHATSAPP": {
|
||||
"WHATSAPP": {
|
||||
"TITLE": "WhatsApp Channel",
|
||||
"DESC": "Start supporting your customers via WhatsApp.",
|
||||
"PROVIDERS": {
|
||||
|
|
@ -211,6 +211,7 @@
|
|||
"PLACEHOLDER": "API key",
|
||||
"APPLY_FOR_ACCESS": "Don't have any API key? Apply for access here",
|
||||
"ERROR": "Please enter a valid value."
|
||||
|
||||
},
|
||||
"SUBMIT_BUTTON": "Create WhatsApp Channel",
|
||||
"API": {
|
||||
|
|
@ -431,11 +432,6 @@
|
|||
},
|
||||
"PRE_CHAT_FORM": {
|
||||
"DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
|
||||
"SET_FIELDS": "Pre chat form fields",
|
||||
"SET_FIELDS_HEADER": {
|
||||
"FIELDS": "Fields",
|
||||
"REQUIRED": "Required"
|
||||
},
|
||||
"ENABLE": {
|
||||
"LABEL": "Enable pre chat form",
|
||||
"OPTIONS": {
|
||||
|
|
@ -468,7 +464,7 @@
|
|||
"VALIDATION_ERROR": "Starting time should be before closing time.",
|
||||
"CHOOSE": "Choose"
|
||||
},
|
||||
"ALL_DAY": "All-Day"
|
||||
"ALL_DAY":"All-Day"
|
||||
},
|
||||
"IMAP": {
|
||||
"TITLE": "IMAP",
|
||||
|
|
|
|||
|
|
@ -34,10 +34,19 @@
|
|||
<td>{{ automation.name }}</td>
|
||||
<td>{{ automation.description }}</td>
|
||||
<td>
|
||||
<toggle-button
|
||||
:active="automation.active"
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-button"
|
||||
:class="{ active: automation.active }"
|
||||
role="switch"
|
||||
:aria-checked="automation.active.toString()"
|
||||
@click="toggleAutomation(automation, automation.active)"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="{ active: automation.active }"
|
||||
></span>
|
||||
</button>
|
||||
</td>
|
||||
<td>{{ readableTime(automation.created_on) }}</td>
|
||||
<td class="button-wrapper">
|
||||
|
|
@ -131,13 +140,11 @@ import AddAutomationRule from './AddAutomationRule.vue';
|
|||
import EditAutomationRule from './EditAutomationRule.vue';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import timeMixin from 'dashboard/mixins/time';
|
||||
import ToggleButton from 'dashboard/components/buttons/ToggleButton';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddAutomationRule,
|
||||
EditAutomationRule,
|
||||
ToggleButton,
|
||||
},
|
||||
mixins: [alertMixin, timeMixin],
|
||||
data() {
|
||||
|
|
@ -283,4 +290,41 @@ export default {
|
|||
.automation__status-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
.toggle-button {
|
||||
background-color: var(--s-200);
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
height: 19px;
|
||||
width: 34px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--border-radius-large);
|
||||
cursor: pointer;
|
||||
transition-property: background-color;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-button.active {
|
||||
background-color: var(--w-500);
|
||||
}
|
||||
|
||||
.toggle-button span {
|
||||
--space-one-point-five: 1.5rem;
|
||||
height: var(--space-one-point-five);
|
||||
width: var(--space-one-point-five);
|
||||
display: inline-block;
|
||||
background-color: var(--white);
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
|
||||
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
|
||||
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
|
||||
transform: translate(0, 0);
|
||||
border-radius: 100%;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.toggle-button span.active {
|
||||
transform: translate(var(--space-one-point-five), var(--space-zero));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,57 +15,28 @@
|
|||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div v-if="preChatFormEnabled">
|
||||
<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>
|
||||
<label> {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }} </label>
|
||||
<table class="table table-striped">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">
|
||||
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.FIELDS') }}
|
||||
</th>
|
||||
<th scope="col">
|
||||
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable v-model="preChatFields" tag="tbody">
|
||||
<tr v-for="(item, index) in preChatFields" :key="index">
|
||||
<th scope="col"><fluent-icon icon="drag" /></th>
|
||||
<td scope="row">
|
||||
<toggle-button
|
||||
:active="item['enabled']"
|
||||
@click="handlePreChatFieldOptions($event, 'enabled', item)"
|
||||
/>
|
||||
</td>
|
||||
<td :class="{ 'disabled-text': !item['enabled'] }">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-model="item['required']"
|
||||
type="checkbox"
|
||||
:value="`${item.name}-required`"
|
||||
:disabled="!item['enabled']"
|
||||
@click="handlePreChatFieldOptions($event, 'required', item)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
|
|
@ -76,13 +47,8 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import draggable from 'vuedraggable';
|
||||
import ToggleButton from 'dashboard/components/buttons/ToggleButton';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
ToggleButton,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
inbox: {
|
||||
|
|
@ -95,7 +61,6 @@ export default {
|
|||
preChatFormEnabled: false,
|
||||
preChatMessage: '',
|
||||
preChatFieldOptions: [],
|
||||
preChatFields: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -116,19 +81,19 @@ export default {
|
|||
pre_chat_form_options: preChatFormOptions,
|
||||
} = this.inbox;
|
||||
this.preChatFormEnabled = preChatFormEnabled;
|
||||
const {
|
||||
pre_chat_message: preChatMessage,
|
||||
pre_chat_fields: preChatFields,
|
||||
} = preChatFormOptions || {};
|
||||
const { pre_chat_message: preChatMessage, require_email: requireEmail } =
|
||||
preChatFormOptions || {};
|
||||
this.preChatMessage = preChatMessage;
|
||||
this.preChatFields = preChatFields;
|
||||
if (requireEmail) {
|
||||
this.preChatFieldOptions = ['requireEmail'];
|
||||
}
|
||||
},
|
||||
handlePreChatFieldOptions(event, type, item) {
|
||||
this.preChatFields.forEach((field, index) => {
|
||||
if (field.name === item.name) {
|
||||
this.preChatFields[index][type] = !item[type];
|
||||
}
|
||||
});
|
||||
handlePreChatFieldOptions(event) {
|
||||
if (this.preChatFieldOptions.includes(event.target.value)) {
|
||||
this.preChatFieldOptions = [];
|
||||
} else {
|
||||
this.preChatFieldOptions = [event.target.value];
|
||||
}
|
||||
},
|
||||
async updateInbox() {
|
||||
try {
|
||||
|
|
@ -139,7 +104,7 @@ export default {
|
|||
pre_chat_form_enabled: this.preChatFormEnabled,
|
||||
pre_chat_form_options: {
|
||||
pre_chat_message: this.preChatMessage,
|
||||
pre_chat_fields: this.preChatFields,
|
||||
require_email: this.preChatFieldOptions.includes('requireEmail'),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -160,16 +125,4 @@ export default {
|
|||
.prechat--title {
|
||||
margin: var(--space-medium) 0 var(--space-slab);
|
||||
}
|
||||
|
||||
.disabled-text {
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--s-500);
|
||||
}
|
||||
|
||||
table thead th {
|
||||
text-transform: none;
|
||||
}
|
||||
checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -126,6 +126,5 @@
|
|||
"brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
|
||||
"brand-github-outline": "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z",
|
||||
"add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
|
||||
"subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
|
||||
"drag-outline": "M15 3.707V8.5a.5.5 0 0 0 1 0V3.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.499.499 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L15 3.707ZM2 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm.5 4.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6ZM15 16.293V11.5a.5.5 0 0 1 1 0v4.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L15 16.293Z"
|
||||
"subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const createConversation = params => {
|
|||
contact: {
|
||||
name: params.fullName,
|
||||
email: params.emailAddress,
|
||||
phone_number: params.phoneNumber,
|
||||
},
|
||||
message: {
|
||||
content: params.message,
|
||||
|
|
|
|||
|
|
@ -9,40 +9,30 @@
|
|||
>
|
||||
{{ headerMessage }}
|
||||
</div>
|
||||
<div v-for="(item, index) in preChatFields" :key="index">
|
||||
<form-input
|
||||
v-if="isContactFieldVisible('fullName', item)"
|
||||
v-model="fullName"
|
||||
class="mt-5"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.FULL_NAME.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.FULL_NAME.PLACEHOLDER')"
|
||||
type="text"
|
||||
:error="
|
||||
$v.fullName && $v.fullName.$error
|
||||
? $t('PRE_CHAT_FORM.FIELDS.FULL_NAME.REQUIRED_ERROR')
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
<form-input
|
||||
v-if="isContactFieldVisible('emailAddress', item)"
|
||||
v-model="emailAddress"
|
||||
class="mt-5"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.PLACEHOLDER')"
|
||||
type="email"
|
||||
:error="$v.emailAddress && emailErrorMessage"
|
||||
/>
|
||||
<form-input
|
||||
v-if="isContactFieldVisible('phoneNumber', item)"
|
||||
v-model="phoneNumber"
|
||||
class="mt-5"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.PLACEHOLDER')"
|
||||
type="number"
|
||||
:error="$v.phoneNumber && phoneNumberErrorMessage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form-input
|
||||
v-if="areContactFieldsVisible"
|
||||
v-model="fullName"
|
||||
class="mt-5"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.FULL_NAME.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.FULL_NAME.PLACEHOLDER')"
|
||||
type="text"
|
||||
:error="
|
||||
$v.fullName.$error ? $t('PRE_CHAT_FORM.FIELDS.FULL_NAME.ERROR') : ''
|
||||
"
|
||||
/>
|
||||
<form-input
|
||||
v-if="areContactFieldsVisible"
|
||||
v-model="emailAddress"
|
||||
class="mt-5"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.PLACEHOLDER')"
|
||||
type="email"
|
||||
:error="
|
||||
$v.emailAddress.$error
|
||||
? $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.ERROR')
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
<form-text-area
|
||||
v-if="!hasActiveCampaign"
|
||||
v-model="message"
|
||||
|
|
@ -71,9 +61,7 @@ import FormTextArea from '../Form/TextArea';
|
|||
import Spinner from 'shared/components/Spinner';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
|
||||
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||
|
||||
import { isEmptyObject } from 'widget/helpers/utils';
|
||||
import routerMixin from 'widget/mixins/routerMixin';
|
||||
export default {
|
||||
|
|
@ -87,7 +75,7 @@ export default {
|
|||
props: {
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
default: () => ({}),
|
||||
},
|
||||
disableContactFields: {
|
||||
type: Boolean,
|
||||
|
|
@ -95,33 +83,15 @@ export default {
|
|||
},
|
||||
},
|
||||
validations() {
|
||||
let identityValidations = {};
|
||||
if (this.isContactFieldRequired('emailAddress')) {
|
||||
identityValidations = {
|
||||
...identityValidations,
|
||||
emailAddress: {
|
||||
required,
|
||||
email,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (this.isContactFieldRequired('phoneNumber')) {
|
||||
identityValidations = {
|
||||
...identityValidations,
|
||||
phoneNumber: {
|
||||
required,
|
||||
isPhoneE164OrEmpty,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (this.isContactFieldRequired('fullName')) {
|
||||
identityValidations = {
|
||||
...identityValidations,
|
||||
fullName: {
|
||||
required,
|
||||
},
|
||||
};
|
||||
}
|
||||
const identityValidations = {
|
||||
fullName: {
|
||||
required,
|
||||
},
|
||||
emailAddress: {
|
||||
required,
|
||||
email,
|
||||
},
|
||||
};
|
||||
|
||||
const messageValidation = {
|
||||
message: {
|
||||
|
|
@ -133,16 +103,18 @@ export default {
|
|||
if (this.hasActiveCampaign) {
|
||||
return identityValidations;
|
||||
}
|
||||
return {
|
||||
...identityValidations,
|
||||
...messageValidation,
|
||||
};
|
||||
if (this.areContactFieldsVisible) {
|
||||
return {
|
||||
...identityValidations,
|
||||
...messageValidation,
|
||||
};
|
||||
}
|
||||
return messageValidation;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullName: '',
|
||||
emailAddress: '',
|
||||
phoneNumber: '',
|
||||
message: '',
|
||||
};
|
||||
},
|
||||
|
|
@ -167,48 +139,11 @@ export default {
|
|||
}
|
||||
return this.options.preChatMessage;
|
||||
},
|
||||
preChatFields() {
|
||||
return this.options.preChatFields || [];
|
||||
},
|
||||
emailErrorMessage() {
|
||||
let errorMessage = '';
|
||||
if (!this.$v.emailAddress.$error) {
|
||||
errorMessage = '';
|
||||
} else if (!this.$v.emailAddress.required) {
|
||||
errorMessage = this.$t(
|
||||
'PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.REQUIRED_ERROR'
|
||||
);
|
||||
} else if (!this.$v.emailAddress.email) {
|
||||
errorMessage = this.$t(
|
||||
'PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'
|
||||
);
|
||||
}
|
||||
return errorMessage;
|
||||
},
|
||||
phoneNumberErrorMessage() {
|
||||
let errorMessage = '';
|
||||
if (!this.$v.phoneNumber.$error) {
|
||||
errorMessage = '';
|
||||
} else if (!this.$v.phoneNumber.required) {
|
||||
errorMessage = this.$t(
|
||||
'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.REQUIRED_ERROR'
|
||||
);
|
||||
} else if (!this.$v.phoneNumber.email) {
|
||||
errorMessage = this.$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR');
|
||||
}
|
||||
return errorMessage;
|
||||
areContactFieldsVisible() {
|
||||
return this.options.requireEmail && !this.disableContactFields;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isContactFieldVisible(field, item) {
|
||||
return (
|
||||
item.name === field &&
|
||||
this.preChatFields.find(option => option.name === field).enabled
|
||||
);
|
||||
},
|
||||
isContactFieldRequired(field) {
|
||||
return this.preChatFields.find(option => option.name === field).required;
|
||||
},
|
||||
onSubmit() {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) {
|
||||
|
|
@ -216,7 +151,6 @@ export default {
|
|||
}
|
||||
this.$emit('submit', {
|
||||
fullName: this.fullName,
|
||||
phoneNumber: this.phoneNumber,
|
||||
emailAddress: this.emailAddress,
|
||||
message: this.message,
|
||||
activeCampaignId: this.activeCampaign.id,
|
||||
|
|
|
|||
|
|
@ -43,19 +43,12 @@
|
|||
"FULL_NAME": {
|
||||
"LABEL": "Full Name",
|
||||
"PLACEHOLDER": "Please enter your full name",
|
||||
"REQUIRED_ERROR": "Full Name is required"
|
||||
"ERROR": "Full Name is required"
|
||||
},
|
||||
"EMAIL_ADDRESS": {
|
||||
"LABEL": "Email Address",
|
||||
"PLACEHOLDER": "Please enter your email address",
|
||||
"REQUIRED_ERROR": "Email Address is required",
|
||||
"VALID_ERROR": "Please enter a valid email address"
|
||||
},
|
||||
"PHONE_NUMBER": {
|
||||
"LABEL": "Phone Number",
|
||||
"PLACEHOLDER": "Please enter your phone number",
|
||||
"REQUIRED_ERROR": "Phone Number is required",
|
||||
"VALID_ERROR": "Phone number should be of E.164 format eg: +1415555555"
|
||||
"ERROR": "Invalid email address"
|
||||
},
|
||||
"MESSAGE": {
|
||||
"LABEL": "Message",
|
||||
|
|
|
|||
|
|
@ -24,15 +24,12 @@ export default {
|
|||
preChatFormOptions() {
|
||||
let requireEmail = false;
|
||||
let preChatMessage = '';
|
||||
let preChatFields = null;
|
||||
const options = window.chatwootWebChannel.preChatFormOptions || {};
|
||||
requireEmail = options.require_email;
|
||||
preChatMessage = options.pre_chat_message;
|
||||
preChatFields = options.pre_chat_fields;
|
||||
return {
|
||||
requireEmail,
|
||||
preChatMessage,
|
||||
preChatFields,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,20 +35,13 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
onSubmit({
|
||||
fullName,
|
||||
emailAddress,
|
||||
message,
|
||||
activeCampaignId,
|
||||
phoneNumber,
|
||||
}) {
|
||||
onSubmit({ fullName, emailAddress, message, activeCampaignId }) {
|
||||
if (activeCampaignId) {
|
||||
bus.$emit('execute-campaign', activeCampaignId);
|
||||
this.$store.dispatch('contacts/update', {
|
||||
user: {
|
||||
email: emailAddress,
|
||||
name: fullName,
|
||||
phone_number: phoneNumber,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
|
|
@ -56,7 +49,6 @@ export default {
|
|||
fullName: fullName,
|
||||
emailAddress: emailAddress,
|
||||
message: message,
|
||||
phoneNumber: phoneNumber,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,8 +32,7 @@ class Channel::WebWidget < ApplicationRecord
|
|||
self.table_name = 'channel_web_widgets'
|
||||
EDITABLE_ATTRS = [:website_url, :widget_color, :welcome_title, :welcome_tagline, :reply_time, :pre_chat_form_enabled,
|
||||
:continuity_via_email, :hmac_mandatory,
|
||||
{ pre_chat_form_options: [:pre_chat_message, :require_email,
|
||||
{ pre_chat_fields: [:label, :name, :enabled, :type, :enabled, :required] }] },
|
||||
{ pre_chat_form_options: [:pre_chat_message, :require_email] },
|
||||
{ selected_feature_flags: [] }].freeze
|
||||
|
||||
validates :website_url, presence: true
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
class AddCustomFieldsToPreChatForm < ActiveRecord::Migration[6.1]
|
||||
def change
|
||||
Channel::WebWidget.find_in_batches do |channels_batch|
|
||||
channels_batch.each do |channel|
|
||||
pre_chat_message = channel[:pre_chat_form_options]['pre_chat_message'] || 'Share your queries or comments here.'
|
||||
pre_chat_fields = pre_chat_fields?(channel)
|
||||
channel[:pre_chat_form_options] = {
|
||||
'pre_chat_message': pre_chat_message,
|
||||
'pre_chat_fields': pre_chat_fields
|
||||
}
|
||||
channel.save!
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def pre_chat_fields?(channel)
|
||||
email_enabled = channel[:pre_chat_form_options]['require_email'] || false
|
||||
[
|
||||
{
|
||||
'label': 'Email Id', 'name': 'emailAddress', 'type': 'email', 'required': true, 'enabled': email_enabled
|
||||
}, {
|
||||
'label': 'Full name', 'name': 'fullName', 'type': 'text', 'required': true, 'enabled': email_enabled
|
||||
}, {
|
||||
'label': 'Phone number', 'name': 'phoneNumber', 'type': 'number', 'required': true, 'enabled': false
|
||||
}
|
||||
]
|
||||
end
|
||||
end
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
#
|
||||
# It's strongly recommended that you check this file into your version control system.
|
||||
|
||||
ActiveRecord::Schema.define(version: 2022_03_09_103742) do
|
||||
ActiveRecord::Schema.define(version: 2022_02_18_120357) do
|
||||
|
||||
# These are extensions that must be enabled in order to support this database
|
||||
enable_extension "pg_stat_statements"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue