feat: Custom phone input in pre-chat form (#7275)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/shared/helpers/Validators.js

@@ -1,11 +1,22 @@
 export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
+
 export const isPhoneNumberValid = (value, dialCode) => {
   const number = value.replace(dialCode, '');
   return !!number.match(/^[0-9]{1,14}$/);
 };
+
 export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';
+
+export const isPhoneNumberValidWithDialCode = value => {
+  const number = value.replace(/^\+/, ''); // Remove the '+' sign
+  return !!number.match(/^[1-9]\d{4,}$/); // Validate the phone number with minimum 5 digits
+};
+
+export const startsWithPlus = value => value.startsWith('+');
+
 export const shouldBeUrl = (value = '') =>
   value ? value.startsWith('http') : true;
+
 export const isValidPassword = value => {
   const containsUppercase = /[A-Z]/.test(value);
   const containsLowercase = /[a-z]/.test(value);
@@ -20,7 +31,9 @@ export const isValidPassword = value => {
     containsSpecialCharacter
   );
 };
+
 export const isNumber = value => /^\d+$/.test(value);
+
 export const isDomain = value => {
   if (value !== '') {
     const domainRegex = /^([\p{L}0-9]+(-[\p{L}0-9]+)*\.)+[a-z]{2,}$/gmu;

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

@@ -1,12 +1,56 @@
-import { shouldBeUrl } from '../Validators';
-import { isValidPassword } from '../Validators';
-import { isNumber } from '../Validators';
-import { isDomain } from '../Validators';
+import {
+  shouldBeUrl,
+  isPhoneNumberValidWithDialCode,
+  isPhoneE164OrEmpty,
+  isPhoneE164,
+  startsWithPlus,
+  isValidPassword,
+  isPhoneNumberValid,
+  isNumber,
+  isDomain,
+} from '../Validators';
 
 describe('#shouldBeUrl', () => {
   it('should return correct url', () => {
     expect(shouldBeUrl('http')).toEqual(true);
   });
+  it('should return wrong url', () => {
+    expect(shouldBeUrl('')).toEqual(true);
+    expect(shouldBeUrl('abc')).toEqual(false);
+  });
+});
+
+describe('#isPhoneE164', () => {
+  it('should return correct phone number', () => {
+    expect(isPhoneE164('+1234567890')).toEqual(true);
+  });
+  it('should return wrong phone number', () => {
+    expect(isPhoneE164('1234567890')).toEqual(false);
+    expect(isPhoneE164('12345678A9')).toEqual(false);
+    expect(isPhoneE164('+12345678901234567890')).toEqual(false);
+  });
+});
+
+describe('#isPhoneE164OrEmpty', () => {
+  it('should return correct phone number', () => {
+    expect(isPhoneE164OrEmpty('+1234567890')).toEqual(true);
+    expect(isPhoneE164OrEmpty('')).toEqual(true);
+  });
+  it('should return wrong phone number', () => {
+    expect(isPhoneE164OrEmpty('1234567890')).toEqual(false);
+    expect(isPhoneE164OrEmpty('12345678A9')).toEqual(false);
+    expect(isPhoneE164OrEmpty('+12345678901234567890')).toEqual(false);
+  });
+});
+
+describe('#isPhoneNumberValid', () => {
+  it('should return correct phone number', () => {
+    expect(isPhoneNumberValid('1234567890', '+91')).toEqual(true);
+  });
+  it('should return wrong phone number', () => {
+    expect(isPhoneNumberValid('12345A67890', '+1')).toEqual(false);
+    expect(isPhoneNumberValid('12345A6789120', '+1')).toEqual(false);
+  });
 });
 
 describe('#isValidPassword', () => {
@@ -51,3 +95,23 @@ describe('#isDomain', () => {
     expect(isDomain('https://test.in')).toEqual(false);
   });
 });
+
+describe('#isPhoneNumberValidWithDialCode', () => {
+  it('should return correct phone number', () => {
+    expect(isPhoneNumberValidWithDialCode('+123456789')).toEqual(true);
+    expect(isPhoneNumberValidWithDialCode('+12345')).toEqual(true);
+  });
+  it('should return wrong phone number', () => {
+    expect(isPhoneNumberValidWithDialCode('+123')).toEqual(false);
+    expect(isPhoneNumberValidWithDialCode('+1234')).toEqual(false);
+  });
+});
+
+describe('#startsWithPlus', () => {
+  it('should return correct phone number', () => {
+    expect(startsWithPlus('+123456789')).toEqual(true);
+  });
+  it('should return wrong phone number', () => {
+    expect(startsWithPlus('123456789')).toEqual(false);
+  });
+});