Revert "feat: Custom fields in pre-chat form (#4135)" (#4182)

This reverts commit e730804b48.
2025-11-01 19:48:08 +00:00 · 2022-03-15 16:54:33 +05:30
parent 25876993ff
commit f405572e5c
16 changed files with 138 additions and 329 deletions
--- a/app/javascript/dashboard/components/buttons/ToggleButton.vue
+++ b/app/javascript/dashboard/components/buttons/ToggleButton.vue
@@ -1,65 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="toggle-button"
-    :class="{ active }"
-    role="switch"
-    :aria-checked="active.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active }"></span>
-  </button>
-</template>
-
-<script>
-export default {
-  props: {
-    active: { type: Boolean, default: false },
-  },
-
-  methods: {
-    onClick(e) {
-      this.$emit('click', e);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.toggle-button {
-  background-color: var(--s-200);
-  position: relative;
-  display: inline-flex;
-  height: 19px;
-  width: 34px;
-  border: 2px solid transparent;
-  border-radius: var(--border-radius-large);
-  cursor: pointer;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  flex-shrink: 0;
-}
-
-.toggle-button.active {
-  background-color: var(--w-500);
-}
-
-.toggle-button span {
-  --space-one-point-five: 1.5rem;
-  height: var(--space-one-point-five);
-  width: var(--space-one-point-five);
-  display: inline-block;
-  background-color: var(--white);
-  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
-    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  transform: translate(0, 0);
-  border-radius: 100%;
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-.toggle-button span.active {
-  transform: translate(var(--space-one-point-five), var(--space-zero));
-}
-</style>
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -187,7 +187,7 @@
          }
        }
      },
-      "WHATSAPP": {
+			"WHATSAPP": {
        "TITLE": "WhatsApp Channel",
        "DESC": "Start supporting your customers via WhatsApp.",
        "PROVIDERS": {
@@ -211,6 +211,7 @@
          "PLACEHOLDER": "API key",
          "APPLY_FOR_ACCESS": "Don't have any API key? Apply for access here",
          "ERROR": "Please enter a valid value."
+
        },
        "SUBMIT_BUTTON": "Create WhatsApp Channel",
        "API": {
@@ -431,11 +432,6 @@
    },
    "PRE_CHAT_FORM": {
      "DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
-      "SET_FIELDS": "Pre chat form fields",
-      "SET_FIELDS_HEADER": {
-        "FIELDS": "Fields",
-        "REQUIRED": "Required"
-      },
      "ENABLE": {
        "LABEL": "Enable pre chat form",
        "OPTIONS": {
@@ -468,7 +464,7 @@
        "VALIDATION_ERROR": "Starting time should be before closing time.",
        "CHOOSE": "Choose"
      },
-      "ALL_DAY": "All-Day"
+      "ALL_DAY":"All-Day"
    },
    "IMAP": {
      "TITLE": "IMAP",
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -34,10 +34,19 @@
              <td>{{ automation.name }}</td>
              <td>{{ automation.description }}</td>
              <td>
-                <toggle-button
-                  :active="automation.active"
+                <button
+                  type="button"
+                  class="toggle-button"
+                  :class="{ active: automation.active }"
+                  role="switch"
+                  :aria-checked="automation.active.toString()"
                  @click="toggleAutomation(automation, automation.active)"
-                />
+                >
+                  <span
+                    aria-hidden="true"
+                    :class="{ active: automation.active }"
+                  ></span>
+                </button>
              </td>
              <td>{{ readableTime(automation.created_on) }}</td>
              <td class="button-wrapper">
@@ -131,13 +140,11 @@ import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import timeMixin from 'dashboard/mixins/time';
-import ToggleButton from 'dashboard/components/buttons/ToggleButton';

 export default {
  components: {
    AddAutomationRule,
    EditAutomationRule,
-    ToggleButton,
  },
  mixins: [alertMixin, timeMixin],
  data() {
@@ -283,4 +290,41 @@ export default {
 .automation__status-checkbox {
  margin: 0;
 }
+.toggle-button {
+  background-color: var(--s-200);
+  position: relative;
+  display: inline-flex;
+  height: 19px;
+  width: 34px;
+  border: 2px solid transparent;
+  border-radius: var(--border-radius-large);
+  cursor: pointer;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  flex-shrink: 0;
+}
+
+.toggle-button.active {
+  background-color: var(--w-500);
+}
+
+.toggle-button span {
+  --space-one-point-five: 1.5rem;
+  height: var(--space-one-point-five);
+  width: var(--space-one-point-five);
+  display: inline-block;
+  background-color: var(--white);
+  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
+    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  transform: translate(0, 0);
+  border-radius: 100%;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.toggle-button span.active {
+  transform: translate(var(--space-one-point-five), var(--space-zero));
+}
 </style>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -15,57 +15,28 @@
          </option>
        </select>
      </label>
-      <div v-if="preChatFormEnabled">
-        <label class="medium-9">
-          {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
-          <textarea
-            v-model.trim="preChatMessage"
-            type="text"
-            :placeholder="
-              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
-            "
-          />
-        </label>
-        <label> {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }} </label>
-        <table class="table table-striped">
-          <thead class="thead-dark">
-            <tr>
-              <th scope="col"></th>
-              <th scope="col"></th>
-              <th scope="col">
-                {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.FIELDS') }}
-              </th>
-              <th scope="col">
-                {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED') }}
-              </th>
-            </tr>
-          </thead>
-          <draggable v-model="preChatFields" tag="tbody">
-            <tr v-for="(item, index) in preChatFields" :key="index">
-              <th scope="col"><fluent-icon icon="drag" /></th>
-              <td scope="row">
-                <toggle-button
-                  :active="item['enabled']"
-                  @click="handlePreChatFieldOptions($event, 'enabled', item)"
-                />
-              </td>
-              <td :class="{ 'disabled-text': !item['enabled'] }">
-                {{ item.label }}
-              </td>
-              <td>
-                <input
-                  v-model="item['required']"
-                  type="checkbox"
-                  :value="`${item.name}-required`"
-                  :disabled="!item['enabled']"
-                  @click="handlePreChatFieldOptions($event, 'required', item)"
-                />
-              </td>
-            </tr>
-          </draggable>
-        </table>
-      </div>

+      <label class="medium-9">
+        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
+        <textarea
+          v-model.trim="preChatMessage"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
+          "
+        />
+      </label>
+      <div>
+        <input
+          v-model="preChatFieldOptions"
+          type="checkbox"
+          value="requireEmail"
+          @input="handlePreChatFieldOptions"
+        />
+        <label for="requireEmail">
+          {{ $t('INBOX_MGMT.PRE_CHAT_FORM.REQUIRE_EMAIL.LABEL') }}
+        </label>
+      </div>
      <woot-submit-button
        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
        :loading="uiFlags.isUpdatingInbox"
@@ -76,13 +47,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
-import draggable from 'vuedraggable';
-import ToggleButton from 'dashboard/components/buttons/ToggleButton';
+
 export default {
-  components: {
-    draggable,
-    ToggleButton,
-  },
  mixins: [alertMixin],
  props: {
    inbox: {
@@ -95,7 +61,6 @@ export default {
      preChatFormEnabled: false,
      preChatMessage: '',
      preChatFieldOptions: [],
-      preChatFields: [],
    };
  },
  computed: {
@@ -116,19 +81,19 @@ export default {
        pre_chat_form_options: preChatFormOptions,
      } = this.inbox;
      this.preChatFormEnabled = preChatFormEnabled;
-      const {
-        pre_chat_message: preChatMessage,
-        pre_chat_fields: preChatFields,
-      } = preChatFormOptions || {};
+      const { pre_chat_message: preChatMessage, require_email: requireEmail } =
+        preChatFormOptions || {};
      this.preChatMessage = preChatMessage;
-      this.preChatFields = preChatFields;
+      if (requireEmail) {
+        this.preChatFieldOptions = ['requireEmail'];
+      }
    },
-    handlePreChatFieldOptions(event, type, item) {
-      this.preChatFields.forEach((field, index) => {
-        if (field.name === item.name) {
-          this.preChatFields[index][type] = !item[type];
-        }
-      });
+    handlePreChatFieldOptions(event) {
+      if (this.preChatFieldOptions.includes(event.target.value)) {
+        this.preChatFieldOptions = [];
+      } else {
+        this.preChatFieldOptions = [event.target.value];
+      }
    },
    async updateInbox() {
      try {
@@ -139,7 +104,7 @@ export default {
            pre_chat_form_enabled: this.preChatFormEnabled,
            pre_chat_form_options: {
              pre_chat_message: this.preChatMessage,
-              pre_chat_fields: this.preChatFields,
+              require_email: this.preChatFieldOptions.includes('requireEmail'),
            },
          },
        };
@@ -160,16 +125,4 @@ export default {
 .prechat--title {
  margin: var(--space-medium) 0 var(--space-slab);
 }
-
-.disabled-text {
-  font-size: var(--font-size-small);
-  color: var(--s-500);
-}
-
-table thead th {
-  text-transform: none;
-}
-checkbox {
-  margin: 0;
-}
 </style>