[NEW][ENTERPRISE] Support for custom Livechat registration form fields (#17581)
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>pull/17715/head
Renato Becker
5 years ago
committed by
GitHub
parent
bf5af0da0b
commit
4aed76deba
@ -0,0 +1,22 @@ |
||||
<template name="visitorEditCustomField"> |
||||
<div class="rc-input rc-form-group rc-form-group--small"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{label}}</div> |
||||
{{#if $eq type 'select'}} |
||||
<div class="rc-select"> |
||||
<select name="{{name}}" class="rc-select__element" data-visitorLivechatData="{{$eq scope 'visitor'}}" data-roomLivechatData="{{$eq scope 'room'}}" disabled="{{disabled}}"> |
||||
<option value=""></option> |
||||
{{#each optionsList}} |
||||
<option value="{{.}}" selected="{{selectedField . ..}}">{{.}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{> icon block="rc-select__arrow" icon="arrow-down" }} |
||||
</div> |
||||
{{else}} |
||||
<div class="rc-input__wrapper"> |
||||
<input class="rc-input__element" type="text" name="{{name}}" autocomplete="off" data-visitorLivechatData="{{$eq scope 'visitor'}}" data-roomLivechatData="{{$eq scope 'room'}}" disabled="{{disabled}}" value="{{value}}"> |
||||
</div> |
||||
{{/if}} |
||||
</label> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,17 @@ |
||||
import { Template } from 'meteor/templating'; |
||||
|
||||
import './visitorEditCustomField.html'; |
||||
|
||||
Template.visitorEditCustomField.helpers({ |
||||
optionsList() { |
||||
if (!this.options) { |
||||
return []; |
||||
} |
||||
|
||||
return this.options.split(','); |
||||
}, |
||||
selectedField(current) { |
||||
const { fieldData: { value } } = Template.currentData(); |
||||
return value.trim() === current.trim(); |
||||
}, |
||||
}); |
||||
@ -0,0 +1,42 @@ |
||||
<template name="livechatCustomFieldsAdditionalForm"> |
||||
<div class="input-line"> |
||||
<label>{{_ "Required"}}</label> |
||||
<div> |
||||
<select name="required" class="rc-input__element additional-field"> |
||||
<option value="false" selected="{{$eq customField.required false}}">{{_ "No"}}</option> |
||||
<option value="true" selected="{{$eq customField.required true}}">{{_ "Yes"}}</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="input-line"> |
||||
<label>{{_ "Type"}}</label> |
||||
<div> |
||||
<select name="type" class="rc-input__element additional-field"> |
||||
<option value="input" selected="{{$eq customField.type 'input'}}">{{_ "Input"}}</option> |
||||
<option value="select" selected="{{$eq customField.type 'select'}}">{{_ "Select"}}</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="input-line"> |
||||
<label>{{_ "Default_value"}}</label> |
||||
<div> |
||||
<input type="text" class="rc-input__element additional-field" name="defaultValue" value="{{customField.defaultValue}}" placeholder="{{_ "Default_value"}}" /> |
||||
</div> |
||||
</div> |
||||
<div class="input-line"> |
||||
<label>{{_ "Options"}}</label> |
||||
<div> |
||||
<input type="text" class="rc-input__element additional-field" name="options" disabled="{{$neq customField.type 'select'}}" value="{{customField.options}}" placeholder="{{_ "Livechat_custom_fields_options_placeholder"}}" /> |
||||
</div> |
||||
</div> |
||||
<div class="input-line"> |
||||
<label>{{_ "Public"}}</label> |
||||
<div> |
||||
<select name="public" class="rc-input__element additional-field" disabled="{{$eq customField.visibility 'hidden'}}"> |
||||
<option value="false" selected="{{$eq customField.public false}}">{{_ "No"}}</option> |
||||
<option value="true" selected="{{$eq customField.public true}}">{{_ "Yes"}}</option> |
||||
</select> |
||||
</div> |
||||
<div class="settings-description secondary-font-color">{{{_ "Livechat_custom_fields_public_description"}}}</div> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,37 @@ |
||||
import { ReactiveVar } from 'meteor/reactive-var'; |
||||
import { Template } from 'meteor/templating'; |
||||
import toastr from 'toastr'; |
||||
|
||||
import './livechatCustomFieldsAdditionalForm.html'; |
||||
import { t } from '../../../../../../../app/utils/client'; |
||||
|
||||
Template.livechatCustomFieldsAdditionalForm.helpers({ |
||||
customField() { |
||||
return Template.instance().customField.get(); |
||||
}, |
||||
}); |
||||
|
||||
Template.livechatCustomFieldsAdditionalForm.onCreated(function() { |
||||
this.customField = new ReactiveVar({}); |
||||
|
||||
this.autorun(() => { |
||||
// To make this template reactive we expect a ReactiveVar through the data property,
|
||||
// because the parent form may not be rerender, only the dynamic template data
|
||||
this.customField.set({ ...this.data.get() }); |
||||
}); |
||||
}); |
||||
|
||||
Template.livechatCustomFieldsAdditionalForm.events({ |
||||
'change .additional-field'(e, instance) { |
||||
const { target: { name, value } } = e; |
||||
instance.customField.set({ ...instance.customField.get(), [name]: value }); |
||||
}, |
||||
|
||||
'blur [name="options"]'(e) { |
||||
const { currentTarget: { value } } = e; |
||||
if (value.trim() !== '' && !/^([a-zA-Z0-9-_ ]+)(,\s*[a-zA-Z0-9-_ ]+)*$/i.test(value)) { |
||||
toastr.error(t('error-invalid-value')); |
||||
e.currentTarget.focus(); |
||||
} |
||||
}, |
||||
}); |
||||
@ -1,12 +1,14 @@ |
||||
import { addCustomFormTemplate } from '../../../../../../app/livechat/client/views/app/customTemplates/register'; |
||||
import './customTemplates/livechatCustomFieldsAdditionalForm'; |
||||
import './customTemplates/livechatDepartmentCustomFieldsForm'; |
||||
import './customTemplates/livechatAgentEditCustomFieldsForm'; |
||||
import './customTemplates/livechatAgentInfoCustomFieldsForm'; |
||||
import './customTemplates/visitorEditCustomFieldsForm'; |
||||
import './customTemplates/visitorInfoCustomForm'; |
||||
|
||||
addCustomFormTemplate('livechatDepartmentForm', 'livechatDepartmentCustomFieldsForm'); |
||||
addCustomFormTemplate('livechatAgentEditForm', 'livechatAgentEditCustomFieldsForm'); |
||||
addCustomFormTemplate('livechatAgentInfoForm', 'livechatAgentInfoCustomFieldsForm'); |
||||
addCustomFormTemplate('livechatCustomFieldsAdditionalForm', 'livechatCustomFieldsAdditionalForm'); |
||||
addCustomFormTemplate('livechatDepartmentForm', 'livechatDepartmentCustomFieldsForm'); |
||||
addCustomFormTemplate('livechatVisitorEditForm', 'visitorEditCustomFieldsForm'); |
||||
addCustomFormTemplate('livechatVisitorInfo', 'visitorInfoCustomForm'); |
||||
|
||||
@ -0,0 +1,17 @@ |
||||
import './addDepartmentAncestors'; |
||||
import './afterForwardChatToDepartment'; |
||||
import './beforeListTags'; |
||||
import './setPredictedVisitorAbandonmentTime'; |
||||
import './beforeForwardRoomToDepartment'; |
||||
import './afterRemoveDepartment'; |
||||
import './onLoadForwardDepartmentRestrictions'; |
||||
import './afterTakeInquiry'; |
||||
import './beforeNewInquiry'; |
||||
import './beforeNewRoom'; |
||||
import './beforeRoutingChat'; |
||||
import './checkAgentBeforeTakeInquiry'; |
||||
import './onCheckRoomParamsApi'; |
||||
import './onLoadConfigApi'; |
||||
import './onSetUserStatusLivechat'; |
||||
import './onCloseLivechat'; |
||||
import './onSaveVisitorInfo'; |
||||
@ -1,35 +1,16 @@ |
||||
import { callbacks } from '../../../../../app/callbacks'; |
||||
import { settings } from '../../../../../app/settings'; |
||||
import { LivechatInquiry } from '../../../../../app/models/server'; |
||||
import { normalizeQueueInfo } from '../lib/Helper'; |
||||
import { getLivechatQueueInfo, getLivechatCustomFields } from '../lib/Helper'; |
||||
|
||||
callbacks.add('livechat.onLoadConfigApi', async (room) => { |
||||
if (!room) { |
||||
return null; |
||||
} |
||||
callbacks.add('livechat.onLoadConfigApi', async (options = {}) => { |
||||
const { room } = options; |
||||
|
||||
if (!settings.get('Livechat_waiting_queue')) { |
||||
return null; |
||||
} |
||||
const queueInfo = await getLivechatQueueInfo(room); |
||||
const customFields = getLivechatCustomFields(); |
||||
|
||||
const { _id: rid } = room; |
||||
const inquiry = LivechatInquiry.findOneByRoomId(rid); |
||||
if (!inquiry) { |
||||
return null; |
||||
} |
||||
const config = { |
||||
...queueInfo && { queueInfo }, |
||||
...customFields && { customFields }, |
||||
}; |
||||
|
||||
const { _id, status } = inquiry; |
||||
if (status !== 'queued') { |
||||
return null; |
||||
} |
||||
|
||||
const [inq] = await LivechatInquiry.getCurrentSortedQueueAsync({ _id }); |
||||
|
||||
let queueInfo; |
||||
if (inq) { |
||||
const { position, department } = inq; |
||||
queueInfo = await normalizeQueueInfo({ position, department }); |
||||
} |
||||
|
||||
return { queueInfo }; |
||||
return Object.assign({ config }, options); |
||||
}, callbacks.priority.MEDIUM, 'livechat-on-load-config-api'); |
||||
|
||||
Loading…
Reference in new issue