From f39c10395afb4e73baaf9b4c546d135ec95e6a4b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 23 Jun 2022 19:22:31 +0530
Subject: [PATCH] fix: Add email validation in the email field of the new
 contact form (#4909)

---
 .../dashboard/i18n/locale/en/contact.json       |  5 +++--
 .../conversation/contact/ContactForm.vue        | 17 +++++++++++++----
 .../dashboard/settings/inbox/channels/Email.vue |  6 ++----
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 002e834cb..fa6bb6ce7 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/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",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 11e0fb675..44b0f442c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/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 || '';
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index b17273d44..f9c69b587 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/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() {