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