fix: Add email validation in the email field of the new contact form (#4909)

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -71,7 +71,7 @@
     "ERROR_MESSAGE": "There was an error, please try again"
   },
   "DELETE_NOTE": {
-    "CONFIRM":{
+    "CONFIRM": {
       "TITLE": "Confirm Deletion",
       "MESSAGE": "Are you want sure to delete this note?",
       "YES": "Yes, Delete it",
@@ -111,7 +111,8 @@
       "EMAIL_ADDRESS": {
         "PLACEHOLDER": "Enter the email address of the contact",
         "LABEL": "Email Address",
-        "DUPLICATE": "This email address is in use for another contact."
+        "DUPLICATE": "This email address is in use for another contact.",
+        "ERROR": "Please enter a valid email address."
       },
       "PHONE_NUMBER": {
         "PLACEHOLDER": "Enter the phone number of the contact",

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -20,6 +20,9 @@
             :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
             @input="$v.email.$touch"
           />
+          <span v-if="$v.email.$error" class="message">
+            {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
+          </span>
         </label>
       </div>
     </div>
@@ -99,7 +102,7 @@ import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
-import { required } from 'vuelidate/lib/validators';
+import { required, email } from 'vuelidate/lib/validators';
 
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
@@ -145,7 +148,9 @@ export default {
       required,
     },
     description: {},
-    email: {},
+    email: {
+      email,
+    },
     companyName: {},
     phoneNumber: {
       isPhoneE164OrEmpty,
@@ -169,11 +174,15 @@ export default {
       this.$emit('success');
     },
     setContactObject() {
-      const { email: email, phone_number: phoneNumber, name } = this.contact;
+      const {
+        email: emailAddress,
+        phone_number: phoneNumber,
+        name,
+      } = this.contact;
       const additionalAttributes = this.contact.additional_attributes || {};
 
       this.name = name || '';
-      this.email = email || '';
+      this.email = emailAddress || '';
       this.phoneNumber = phoneNumber || '';
       this.companyName = additionalAttributes.company_name || '';
       this.description = additionalAttributes.description || '';

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue

@@ -50,12 +50,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { required, email } from 'vuelidate/lib/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
 
-const validEmail = (value = '') => value.includes('@');
-
 export default {
   components: {
     PageHeader,
@@ -74,7 +72,7 @@ export default {
   },
   validations: {
     channelName: { required },
-    email: { required, validEmail },
+    email: { required, email },
   },
   methods: {
     async createChannel() {