fix: Pre chat custom fields drag and drop (#4530)

app/javascript/dashboard/components/ui/Switch.vue

@@ -17,12 +17,8 @@ export default {
     value: { type: Boolean, default: false },
   },
   methods: {
-    onClick(event) {
-      if (event.pointerId === -1) {
-        event.preventDefault();
-      } else {
-        this.$emit('input', !this.value);
-      }
+    onClick() {
+      this.$emit('input', !this.value);
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue

@@ -1,6 +1,6 @@
 <template>
-  <draggable v-model="preChatFields" tag="tbody">
-    <tr v-for="(item, index) in preChatFields" :key="index">
+  <draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
+    <tr v-for="(item, index) in preChatFieldOptions" :key="index">
       <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
       <td class="pre-chat-field">
         <woot-switch
@@ -51,15 +51,27 @@ export default {
       type: Array,
       default: () => [],
     },
-    handlePreChatFieldOptions: {
-      type: Function,
-      default: () => {},
+  },
+  data() {
+    return {
+      preChatFieldOptions: this.preChatFields,
+    };
+  },
+  watch: {
+    preChatFields() {
+      this.preChatFieldOptions = this.preChatFields;
     },
   },
   methods: {
     isFieldEditable(item) {
       return !!standardFieldKeys[item.name] || !item.enabled;
     },
+    handlePreChatFieldOptions(event, type, item) {
+      this.$emit('update', event, type, item);
+    },
+    onDragEnd() {
+      this.$emit('drag-end', this.preChatFieldOptions);
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue

@@ -26,8 +26,8 @@
             "
           />
         </label>
-        <label class="medium-8 columns">
-          {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}
+        <div class="medium-8 columns">
+          <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
           <table class="table table-striped w-full">
             <thead class="thead-dark">
               <tr>
@@ -58,10 +58,11 @@
             </thead>
             <pre-chat-fields
               :pre-chat-fields="preChatFields"
-              :handle-pre-chat-field-options="handlePreChatFieldOptions"
+              @update="handlePreChatFieldOptions"
+              @drag-end="changePreChatFieldFieldsOrder"
             />
           </table>
-        </label>
+        </div>
       </div>
 
       <woot-submit-button
@@ -138,6 +139,10 @@ export default {
       });
     },
 
+    changePreChatFieldFieldsOrder(updatedPreChatFieldOptions) {
+      this.preChatFields = updatedPreChatFieldOptions;
+    },
+
     async updateInbox() {
       try {
         const payload = {