LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Support Regex validation for custom attributes (#7856)

Browse Source 
This allows a user to add/update a custom regex and a cue while defining custom attributes(Only applicable for type- text).
While adding/editing custom attributes, the values are validated against the attribute definition regex, and if it is incorrect, a cue message or default error message is shown and restricts invalid values from being saved.

Fixes: #6866
This commit is contained in:
Surabhi Suman
2024-01-23 19:31:57 +05:30
committed by GitHub
parent 834c219b9b
commit 4b40c61201
20 changed files with 247 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,9 @@
isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
required: $t('PRE_CHAT_FORM.REQUIRED'),
matches: item.regex_cue
? item.regex_cue
: $t('PRE_CHAT_FORM.REGEX_ERROR'),
}"
:has-error-in-phone-input="hasErrorInPhoneInput"
/>
@@ -68,13 +71,20 @@ import { isEmptyObject } from 'widget/helpers/utils';
import routerMixin from 'widget/mixins/routerMixin';
import darkModeMixin from 'widget/mixins/darkModeMixin';
import configMixin from 'widget/mixins/configMixin';
import customAttributeMixin from '../../../dashboard/mixins/customAttributeMixin';
export default {
components: {
CustomButton,
Spinner,
},
mixins: [routerMixin, darkModeMixin, messageFormatterMixin, configMixin],
mixins: [
routerMixin,
darkModeMixin,
messageFormatterMixin,
configMixin,
customAttributeMixin,
],
props: {
options: {
type: Object,
@@ -235,30 +245,37 @@ export default {
}
return this.formValues[name] || null;
},
getValidation({ type, name }) {
getValidation({ type, name, field_type, regex_pattern }) {
let regex = regex_pattern ? this.getRegexp(regex_pattern) : null;
const validations = {
emailAddress: 'email',
phoneNumber: 'startsWithPlus|isValidPhoneNumber',
phoneNumber: ['startsWithPlus', 'isValidPhoneNumber'],
url: 'url',
date: 'date',
text: null,
select: null,
number: null,
checkbox: false,
contact_attribute: regex ? [['matches', regex]] : null,
conversation_attribute: regex ? [['matches', regex]] : null,
};
const validationKeys = Object.keys(validations);
const isRequired = this.isContactFieldRequired(name);
const validation = isRequired ? 'bail|required' : 'bail|optional';
const validation = isRequired
? ['bail', 'required']
: ['bail', 'optional'];
if (validationKeys.includes(name) || validationKeys.includes(type)) {
const validationType = validations[type] || validations[name];
const validationString = validationType
? `${validation}|${validationType}`
: validation;
return validationString;
if (
validationKeys.includes(name) ||
validationKeys.includes(type) ||
validationKeys.includes(field_type)
) {
const validationType =
validations[type] || validations[name] || validations[field_type];
return validationType ? validation.concat(validationType) : validation;
}
return '';
return [];
},
findFieldType(type) {
if (type === 'link') {