From 98bfef026e67d7f1ee07893e90b7de2839505412 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Fri, 16 Apr 2021 18:48:13 +0530
Subject: [PATCH] Chore: Add validation for contact phone field (#2105)

---
 .../dashboard/i18n/locale/en/contact.json     |  4 ++-
 .../conversation/contact/ContactForm.vue      | 33 +++++++++++++++----
 app/javascript/shared/helpers/Validators.js   |  2 ++
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/shared/helpers/Validators.js

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index d6cc103ca..55e5c0431 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -71,7 +71,9 @@
       },
       "PHONE_NUMBER": {
         "PLACEHOLDER": "Enter the phone number of the contact",
-        "LABEL": "Phone Number"
+        "LABEL": "Phone Number",
+        "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]",
+        "ERROR": "Phone number should be either empty or of E.164 format"
       },
       "LOCATION": {
         "PLACEHOLDER": "Enter the location 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 a1beaa13e..0fe9a1a4d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -35,12 +35,26 @@
       </label>
     </div>
     <div class="row">
-      <woot-input
-        v-model.trim="phoneNumber"
-        class="columns"
-        :label="$t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL')"
-        :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
-      />
+      <div class="medium-12 columns">
+        <label :class="{ error: $v.phoneNumber.$error }">
+          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
+          <input
+            v-model.trim="phoneNumber"
+            type="text"
+            :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
+            @input="$v.phoneNumber.$touch"
+          />
+          <span v-if="$v.phoneNumber.$error" class="message">
+            {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR') }}
+          </span>
+        </label>
+        <div
+          v-if="$v.phoneNumber.$error || !phoneNumber"
+          class="callout small warning"
+        >
+          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
+        </div>
+      </div>
     </div>
     <woot-input
       v-model.trim="companyName"
@@ -87,6 +101,8 @@ import {
 } from 'shared/helpers/CustomErrors';
 import { required } from 'vuelidate/lib/validators';
 
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+
 export default {
   mixins: [alertMixin],
   props: {
@@ -131,7 +147,9 @@ export default {
     description: {},
     email: {},
     companyName: {},
-    phoneNumber: {},
+    phoneNumber: {
+      isPhoneE164OrEmpty,
+    },
     bio: {},
   },
 
@@ -190,6 +208,7 @@ export default {
     async handleSubmit() {
       this.resetDuplicate();
       this.$v.$touch();
+
       if (this.$v.$invalid) {
         return;
       }
diff --git a/app/javascript/shared/helpers/Validators.js b/app/javascript/shared/helpers/Validators.js
new file mode 100644
index 000000000..57e5e0e58
--- /dev/null
+++ b/app/javascript/shared/helpers/Validators.js
@@ -0,0 +1,2 @@
+export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
+export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';