diff --git a/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb b/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
index 3840644ce981..69df99e14c2b 100644
--- a/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
+++ b/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
@@ -39,6 +39,8 @@ def permitted_payload
:attribute_display_type,
:attribute_key,
:attribute_model,
+ :regex_pattern,
+ :regex_cue,
attribute_values: []
)
end
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index 9b145c1f2aae..c4846bcbce73 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -126,18 +126,26 @@ import { required, url } from 'vuelidate/lib/validators';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
import { isValidURL } from '../helper/URLHelper';
+import customAttributeMixin from '../mixins/customAttributeMixin';
const DATE_FORMAT = 'yyyy-MM-dd';
export default {
components: {
MultiselectDropdown,
},
+ mixins: [customAttributeMixin],
props: {
label: { type: String, required: true },
values: { type: Array, default: () => [] },
value: { type: [String, Number, Boolean], default: '' },
showActions: { type: Boolean, default: false },
attributeType: { type: String, default: 'text' },
+ attributeRegex: {
+ type: String,
+ default: null,
+ },
+ regexCue: { type: String, default: null },
+ regexEnabled: { type: Boolean, default: false },
attributeKey: { type: String, required: true },
contactId: { type: Number, default: null },
},
@@ -204,6 +212,11 @@ export default {
if (this.$v.editedValue.url) {
return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
}
+ if (!this.$v.editedValue.regexValidation) {
+ return this.regexCue
+ ? this.regexCue
+ : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
+ }
return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
},
},
@@ -221,7 +234,15 @@ export default {
};
}
return {
- editedValue: { required },
+ editedValue: {
+ required,
+ regexValidation: value => {
+ return !(
+ this.attributeRegex &&
+ !this.getRegexp(this.attributeRegex).test(value)
+ );
+ },
+ },
};
},
mounted() {
diff --git a/app/javascript/dashboard/helper/preChat.js b/app/javascript/dashboard/helper/preChat.js
index 14d062707bd3..ec415820516a 100644
--- a/app/javascript/dashboard/helper/preChat.js
+++ b/app/javascript/dashboard/helper/preChat.js
@@ -47,6 +47,8 @@ export const getCustomFields = ({ standardFields, customAttributes }) => {
type: attribute.attribute_display_type,
values: attribute.attribute_values,
field_type: attribute.attribute_model,
+ regex_pattern: attribute.regex_pattern,
+ regex_cue: attribute.regex_cue,
required: false,
enabled: false,
});
diff --git a/app/javascript/dashboard/helper/specs/inboxFixture.js b/app/javascript/dashboard/helper/specs/inboxFixture.js
index 6622a6de20b7..4a83464ef0f9 100644
--- a/app/javascript/dashboard/helper/specs/inboxFixture.js
+++ b/app/javascript/dashboard/helper/specs/inboxFixture.js
@@ -44,4 +44,18 @@ export default {
created_at: '2021-11-29T10:20:04.563Z',
},
],
+ customAttributesWithRegex: [
+ {
+ id: 2,
+ attribute_description: 'Test contact Attribute',
+ attribute_display_name: 'Test contact Attribute',
+ attribute_display_type: 'text',
+ attribute_key: 'test_contact_attribute',
+ attribute_model: 'contact_attribute',
+ attribute_values: Array(0),
+ created_at: '2023-09-20T10:20:04.563Z',
+ regex_pattern: '^w+$',
+ regex_cue: 'It should be a combination of alphabets and numbers',
+ },
+ ],
};
diff --git a/app/javascript/dashboard/helper/specs/preChat.spec.js b/app/javascript/dashboard/helper/specs/preChat.spec.js
index 74f3e72f5c25..cec255f05cb6 100644
--- a/app/javascript/dashboard/helper/specs/preChat.spec.js
+++ b/app/javascript/dashboard/helper/specs/preChat.spec.js
@@ -5,7 +5,8 @@ import {
} from '../preChat';
import inboxFixture from './inboxFixture';
-const { customFields, customAttributes } = inboxFixture;
+const { customFields, customAttributes, customAttributesWithRegex } =
+ inboxFixture;
describe('#Pre chat Helpers', () => {
describe('getPreChatFields', () => {
it('should return correct pre-chat fields form options passed', () => {
@@ -27,7 +28,6 @@ describe('#Pre chat Helpers', () => {
placeholder: 'Please enter your email address',
type: 'email',
field_type: 'standard',
-
required: false,
enabled: false,
},
@@ -71,6 +71,26 @@ describe('#Pre chat Helpers', () => {
values: [],
},
]);
+
+ expect(
+ getCustomFields({
+ standardFields: { pre_chat_fields: customFields.pre_chat_fields },
+ customAttributes: customAttributesWithRegex,
+ })
+ ).toEqual([
+ {
+ enabled: false,
+ label: 'Test contact Attribute',
+ placeholder: 'Test contact Attribute',
+ name: 'test_contact_attribute',
+ required: false,
+ field_type: 'contact_attribute',
+ type: 'text',
+ values: [],
+ regex_pattern: '^w+$',
+ regex_cue: 'It should be a combination of alphabets and numbers',
+ },
+ ]);
});
});
});
diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
index 7cf58059eb5f..a2f7386dcc86 100644
--- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -39,6 +39,17 @@
"PLACEHOLDER": "Enter custom attribute key",
"ERROR": "Key is required",
"IN_VALID": "Invalid key"
+ },
+ "REGEX_PATTERN": {
+ "LABEL": "Regex Pattern",
+ "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+ },
+ "REGEX_CUE": {
+ "LABEL": "Regex Cue",
+ "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+ },
+ "ENABLE_REGEX": {
+ "LABEL": "Enable regex validation"
}
},
"API": {
@@ -88,6 +99,17 @@
"EMPTY_RESULT": {
"404": "There are no custom attributes created",
"NOT_FOUND": "There are no custom attributes configured"
+ },
+ "REGEX_PATTERN": {
+ "LABEL": "Regex Pattern",
+ "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+ },
+ "REGEX_CUE": {
+ "LABEL": "Regex Cue",
+ "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+ },
+ "ENABLE_REGEX": {
+ "LABEL": "Enable regex validation"
}
}
}
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 7ad18b7927ea..594e34c4f955 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -339,7 +339,8 @@
},
"VALIDATIONS": {
"REQUIRED": "Valid value is required",
- "INVALID_URL": "Invalid URL"
+ "INVALID_URL": "Invalid URL",
+ "INVALID_INPUT": "Invalid Input"
}
},
"MERGE_CONTACTS": {
diff --git a/app/javascript/dashboard/mixins/customAttributeMixin.js b/app/javascript/dashboard/mixins/customAttributeMixin.js
new file mode 100644
index 000000000000..a0617685d15b
--- /dev/null
+++ b/app/javascript/dashboard/mixins/customAttributeMixin.js
@@ -0,0 +1,11 @@
+export default {
+ methods: {
+ getRegexp(regexPatternValue) {
+ let lastSlash = regexPatternValue.lastIndexOf('/');
+ return new RegExp(
+ regexPatternValue.slice(1, lastSlash),
+ regexPatternValue.slice(lastSlash + 1)
+ );
+ },
+ },
+};
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index f038e3a42f76..ca721d4d88b0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -11,6 +11,8 @@
emoji=""
:value="attribute.value"
:show-actions="true"
+ :attribute-regex="attribute.regex_pattern"
+ :regex-cue="attribute.regex_cue"
:class="attributeClass"
@update="onUpdate"
@delete="onDelete"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index eeceaf743f0f..e517651d39ed 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -86,6 +86,30 @@
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
+
+
+ {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+
+
+
+
+
+ {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+
+
+
@@ -88,9 +112,10 @@ import { mapGetters } from 'vuex';
import { required, minLength } from 'vuelidate/lib/validators';
import { ATTRIBUTE_TYPES } from './constants';
import alertMixin from 'shared/mixins/alertMixin';
+import customAttributeMixin from '../../../../mixins/customAttributeMixin';
export default {
components: {},
- mixins: [alertMixin],
+ mixins: [alertMixin, customAttributeMixin],
props: {
selectedAttribute: {
type: Object,
@@ -106,6 +131,9 @@ export default {
displayName: '',
description: '',
attributeType: 0,
+ regexPattern: null,
+ regexCue: null,
+ regexEnabled: false,
types: ATTRIBUTE_TYPES,
show: true,
attributeKey: '',
@@ -152,6 +180,7 @@ export default {
this.isAttributeTypeList && this.isTouched && this.values.length === 0
);
},
+
pageTitle() {
return `${this.$t('ATTRIBUTES_MGMT.EDIT.TITLE')} - ${
this.selectedAttribute.attribute_display_name
@@ -173,6 +202,12 @@ export default {
isAttributeTypeList() {
return this.attributeType === 6;
},
+ isAttributeTypeText() {
+ return this.attributeType === 0;
+ },
+ isRegexEnabled() {
+ return this.regexEnabled;
+ },
},
mounted() {
this.setFormValues();
@@ -189,10 +224,16 @@ export default {
this.$refs.tagInput.$el.focus();
},
setFormValues() {
+ const regexPattern = this.selectedAttribute.regex_pattern
+ ? this.getRegexp(this.selectedAttribute.regex_pattern).source
+ : null;
this.displayName = this.selectedAttribute.attribute_display_name;
this.description = this.selectedAttribute.attribute_description;
this.attributeType = this.selectedAttributeType;
this.attributeKey = this.selectedAttribute.attribute_key;
+ this.regexPattern = regexPattern;
+ this.regexCue = this.selectedAttribute.regex_cue;
+ this.regexEnabled = regexPattern != null;
this.values = this.setAttributeListValue;
},
async editAttributes() {
@@ -200,14 +241,21 @@ export default {
if (this.$v.$invalid) {
return;
}
+ if (!this.regexEnabled) {
+ this.regexPattern = null;
+ this.regexCue = null;
+ }
try {
await this.$store.dispatch('attributes/update', {
id: this.selectedAttribute.id,
attribute_description: this.description,
attribute_display_name: this.displayName,
attribute_values: this.updatedAttributeListValues,
+ regex_pattern: this.regexPattern
+ ? new RegExp(this.regexPattern).toString()
+ : null,
+ regex_cue: this.regexCue,
});
-
this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
this.onClose();
} catch (error) {
@@ -218,6 +266,9 @@ export default {
this.showAlert(this.alertMessage);
}
},
+ toggleRegexEnabled() {
+ this.regexEnabled = !this.regexEnabled;
+ },
},
};
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 50c4a22c4c98..394b338d5c37 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -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') {
diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json
index 3a1f51ccffed..83b442e5139c 100644
--- a/app/javascript/widget/i18n/locale/en.json
+++ b/app/javascript/widget/i18n/locale/en.json
@@ -80,7 +80,8 @@
},
"CAMPAIGN_HEADER": "Please provide your name and email before starting the conversation",
"IS_REQUIRED": "is required",
- "REQUIRED": "Required"
+ "REQUIRED": "Required",
+ "REGEX_ERROR": "Please provide a valid input"
},
"FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
"CHAT_FORM": {
diff --git a/app/jobs/inboxes/update_widget_pre_chat_custom_fields_job.rb b/app/jobs/inboxes/update_widget_pre_chat_custom_fields_job.rb
index b17ecdf55235..3f3326633ee2 100644
--- a/app/jobs/inboxes/update_widget_pre_chat_custom_fields_job.rb
+++ b/app/jobs/inboxes/update_widget_pre_chat_custom_fields_job.rb
@@ -12,7 +12,9 @@ def perform(account, custom_attribute)
pre_chat_field.deep_merge({
'label' => custom_attribute['attribute_display_name'],
'placeholder' => custom_attribute['attribute_display_name'],
- 'values' => custom_attribute['attribute_values']
+ 'values' => custom_attribute['attribute_values'],
+ 'regex_pattern' => custom_attribute['regex_pattern'],
+ 'regex_cue' => custom_attribute['regex_cue']
})
end
web_widget.save!
diff --git a/app/models/channel/web_widget.rb b/app/models/channel/web_widget.rb
index a75e979b97f4..2efe74881106 100644
--- a/app/models/channel/web_widget.rb
+++ b/app/models/channel/web_widget.rb
@@ -35,7 +35,7 @@ class Channel::WebWidget < ApplicationRecord
{ pre_chat_form_options: [:pre_chat_message, :require_email,
{ pre_chat_fields:
[:field_type, :label, :placeholder, :name, :enabled, :type, :enabled, :required,
- :locale, { values: [] }] }] },
+ :locale, { values: [] }, :regex_pattern, :regex_cue] }] },
{ selected_feature_flags: [] }].freeze
before_validation :validate_pre_chat_options
diff --git a/app/models/custom_attribute_definition.rb b/app/models/custom_attribute_definition.rb
index 71aab06f8069..7d7b36e42567 100644
--- a/app/models/custom_attribute_definition.rb
+++ b/app/models/custom_attribute_definition.rb
@@ -10,6 +10,8 @@
# attribute_model :integer default("conversation_attribute")
# attribute_values :jsonb
# default_value :integer
+# regex_cue :string
+# regex_pattern :string
# created_at :datetime not null
# updated_at :datetime not null
# account_id :bigint
diff --git a/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder b/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder
index 0a1036903438..8a1010d45bef 100644
--- a/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder
+++ b/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder
@@ -3,6 +3,8 @@ json.attribute_display_name resource.attribute_display_name
json.attribute_display_type resource.attribute_display_type
json.attribute_description resource.attribute_description
json.attribute_key resource.attribute_key
+json.regex_pattern resource.regex_pattern
+json.regex_cue resource.regex_cue
json.attribute_values resource.attribute_values
json.attribute_model resource.attribute_model
json.default_value resource.default_value
diff --git a/db/migrate/20230905060223_add_regex_to_custom_attribute_definition.rb b/db/migrate/20230905060223_add_regex_to_custom_attribute_definition.rb
new file mode 100644
index 000000000000..dccca8cb5f54
--- /dev/null
+++ b/db/migrate/20230905060223_add_regex_to_custom_attribute_definition.rb
@@ -0,0 +1,6 @@
+class AddRegexToCustomAttributeDefinition < ActiveRecord::Migration[7.0]
+ def change
+ add_column :custom_attribute_definitions, :regex_pattern, :string
+ add_column :custom_attribute_definitions, :regex_cue, :string
+ end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 1fdf2688280c..2d7debe09075 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -501,6 +501,8 @@
t.datetime "updated_at", null: false
t.text "attribute_description"
t.jsonb "attribute_values", default: []
+ t.string "regex_pattern"
+ t.string "regex_cue"
t.index ["account_id"], name: "index_custom_attribute_definitions_on_account_id"
t.index ["attribute_key", "attribute_model", "account_id"], name: "attribute_key_model_index", unique: true
end
diff --git a/spec/jobs/inboxes/update_widget_pre_chat_custom_fields_job_spec.rb b/spec/jobs/inboxes/update_widget_pre_chat_custom_fields_job_spec.rb
index 284a0de70306..a33b2c7bd154 100644
--- a/spec/jobs/inboxes/update_widget_pre_chat_custom_fields_job_spec.rb
+++ b/spec/jobs/inboxes/update_widget_pre_chat_custom_fields_job_spec.rb
@@ -11,7 +11,9 @@
pre_chat_message = 'Share your queries here.'
custom_attribute = {
'attribute_key' => 'developer_id',
- 'attribute_display_name' => 'Developer Number'
+ 'attribute_display_name' => 'Developer Number',
+ 'regex_pattern' => '^[0-9]*',
+ 'regex_cue' => 'It should be only digits'
}
let!(:account) { create(:account) }
let!(:web_widget) do
@@ -23,7 +25,8 @@
described_class.perform_now(account, custom_attribute)
expect(web_widget.reload.pre_chat_form_options['pre_chat_fields']).to eq [
{ 'label' => 'Developer Number', 'name' => 'developer_id', 'placeholder' => 'Developer Number',
- 'values' => nil }, { 'label' => 'Full Name', 'name' => 'full_name' }
+ 'values' => nil, 'regex_pattern' => '^[0-9]*', 'regex_cue' => 'It should be only digits' },
+ { 'label' => 'Full Name', 'name' => 'full_name' }
]
end
end