feat: Adds number validation for WhatsApp inbox at the creation step (#6043)

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

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

@@ -134,7 +134,7 @@
         "PHONE_NUMBER": {
           "LABEL": "Phone number",
           "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
-          "ERROR": "Please enter a valid value. Phone number should start with `+` sign."
+          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
         "API_CALLBACK": {
           "TITLE": "Callback URL",
@@ -185,7 +185,7 @@
           "PHONE_NUMBER": {
             "LABEL": "Phone number",
             "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
-            "ERROR": "Please enter a valid value. Phone number should start with `+` sign."
+            "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
           },
           "SUBMIT_BUTTON": "Create Bandwidth Channel",
           "API": {
@@ -214,7 +214,7 @@
         "PHONE_NUMBER": {
           "LABEL": "Phone number",
           "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
-          "ERROR": "Please enter a valid value. Phone number should start with `+` sign."
+         "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
         "PHONE_NUMBER_ID": {
           "LABEL": "Phone number ID",

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue

@@ -62,7 +62,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
 
-const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
 export default {
   mixins: [alertMixin],
@@ -78,7 +78,7 @@ export default {
   },
   validations: {
     inboxName: { required },
-    phoneNumber: { required, shouldStartWithPlusSign },
+    phoneNumber: { required, isPhoneE164OrEmpty },
     apiKey: { required },
   },
   methods: {

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

@@ -99,8 +99,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
-
-const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
 
 export default {
   mixins: [alertMixin],
@@ -118,10 +117,10 @@ export default {
   },
   validations: {
     inboxName: { required },
-    phoneNumber: { required, shouldStartWithPlusSign },
+    phoneNumber: { required, isPhoneE164OrEmpty },
     apiKey: { required },
-    phoneNumberId: { required },
-    businessAccountId: { required },
+    phoneNumberId: { required, isNumber },
+    businessAccountId: { required, isNumber },
   },
   methods: {
     async createChannel() {

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

@@ -110,8 +110,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
-
-const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
 export default {
   mixins: [alertMixin],
@@ -142,7 +141,7 @@ export default {
       return {
         channelName: { required },
         messagingServiceSID: {},
-        phoneNumber: { shouldStartWithPlusSign },
+        phoneNumber: { required, isPhoneE164OrEmpty },
         authToken: { required },
         accountSID: { required },
         medium: { required },

app/javascript/shared/helpers/Validators.js

@@ -16,3 +16,4 @@ export const isValidPassword = value => {
     containsSpecialCharacter
   );
 };
+export const isNumber = value => /^\d+$/.test(value);

app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js

@@ -1,5 +1,6 @@
 import { shouldBeUrl } from '../Validators';
 import { isValidPassword } from '../Validators';
+import { isNumber } from '../Validators';
 
 describe('#shouldBeUrl', () => {
   it('should return correct url', () => {
@@ -22,3 +23,15 @@ describe('#isValidPassword', () => {
     expect(isValidPassword('testPass!')).toEqual(false);
   });
 });
+
+describe('#isNumber', () => {
+  it('should return correct number', () => {
+    expect(isNumber('123')).toEqual(true);
+  });
+
+  it('should return wrong number', () => {
+    expect(isNumber('123-')).toEqual(false);
+    expect(isNumber('123./')).toEqual(false);
+    expect(isNumber('string')).toEqual(false);
+  });
+});