feat: Custom fields in pre-chat form (#4189)

app/javascript/packs/widget.js

@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
+import VueFormulate from '@braid/vue-formulate';
 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 router from '../widget/router';
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
@@ -14,7 +15,15 @@ const i18nConfig = new VueI18n({
   locale: 'en',
   messages: i18n,
 });
-
+Vue.use(VueFormulate, {
+  rules: {
+    isPhoneE164OrEmpty: ({ value }) => isPhoneE164OrEmpty(value),
+  },
+  classes: {
+    outer: 'mb-4 wrapper',
+    error: 'text-red-400 mt-2 text-xs font-medium',
+  },
+});
 // Event Bus
 window.bus = new Vue();