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/widget/components/PreChat/Form.vue

@@ -22,10 +22,14 @@
       :label-class="context => labelClass(context)"
       :input-class="context => inputClass(context)"
       :validation-messages="{
-        isPhoneE164OrEmpty: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
+        startsWithPlus: $t(
+          'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
+        ),
+        isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
         email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
         required: $t('PRE_CHAT_FORM.REQUIRED'),
       }"
+      :has-error-in-phone-input="hasErrorInPhoneInput"
     />
     <FormulateInput
       v-if="!hasActiveCampaign"
@@ -64,6 +68,7 @@ import { isEmptyObject } from 'widget/helpers/utils';
 import routerMixin from 'widget/mixins/routerMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 import configMixin from 'widget/mixins/configMixin';
+
 export default {
   components: {
     CustomButton,
@@ -79,6 +84,7 @@ export default {
   data() {
     return {
       locale: this.$root.$i18n.locale,
+      hasErrorInPhoneInput: false,
       message: '',
       formValues: {},
       labels: {
@@ -143,7 +149,10 @@ export default {
         .filter(field => field.enabled)
         .map(field => ({
           ...field,
-          type: this.findFieldType(field.type),
+          type:
+            field.name === 'phoneNumber'
+              ? 'phoneInput'
+              : this.findFieldType(field.type),
         }));
     },
     conversationCustomAttributes() {
@@ -202,6 +211,9 @@ export default {
       if (classification === 'box' && type === 'checkbox') {
         return '';
       }
+      if (type === 'phoneInput') {
+        this.hasErrorInPhoneInput = hasErrors;
+      }
       if (!hasErrors) {
         return `${this.inputStyles} hover:border-black-300 focus:border-black-300 ${this.isInputDarkOrLightMode} ${this.inputBorderColor}`;
       }
@@ -224,12 +236,9 @@ export default {
       return this.formValues[name] || null;
     },
     getValidation({ type, name }) {
-      if (!this.isContactFieldRequired(name)) {
-        return '';
-      }
       const validations = {
         emailAddress: 'email',
-        phoneNumber: 'isPhoneE164OrEmpty',
+        phoneNumber: 'startsWithPlus|isValidPhoneNumber',
         url: 'url',
         date: 'date',
         text: null,
@@ -238,11 +247,17 @@ export default {
         checkbox: false,
       };
       const validationKeys = Object.keys(validations);
-      const validation = 'bail|required';
+      const isRequired = this.isContactFieldRequired(name);
+      const validation = isRequired ? 'bail|required' : 'bail|optional';
+
       if (validationKeys.includes(name) || validationKeys.includes(type)) {
         const validationType = validations[type] || validations[name];
-        return validationType ? `${validation}|${validationType}` : validation;
+        const validationString = validationType
+          ? `${validation}|${validationType}`
+          : validation;
+        return validationString;
       }
+
       return '';
     },
     findFieldType(type) {