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/packs/widget.js

@@ -7,9 +7,14 @@ import store from '../widget/store';
 import App from '../widget/App.vue';
 import ActionCableConnector from '../widget/helpers/actionCable';
 import i18n from '../widget/i18n';
-import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+import {
+  startsWithPlus,
+  isPhoneNumberValidWithDialCode,
+} from 'shared/helpers/Validators';
 import router from '../widget/router';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
+const PhoneInput = () => import('../widget/components/Form/PhoneInput');
+
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -19,8 +24,18 @@ const i18nConfig = new VueI18n({
   messages: i18n,
 });
 Vue.use(VueFormulate, {
+  library: {
+    phoneInput: {
+      classification: 'number',
+      component: PhoneInput,
+      slotProps: {
+        component: ['placeholder', 'hasErrorInPhoneInput'],
+      },
+    },
+  },
   rules: {
-    isPhoneE164OrEmpty: ({ value }) => isPhoneE164OrEmpty(value),
+    startsWithPlus: ({ value }) => startsWithPlus(value),
+    isValidPhoneNumber: ({ value }) => isPhoneNumberValidWithDialCode(value),
   },
   classes: {
     outer: 'mb-4 wrapper',