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

Fixes: #2744
2025-11-01 19:48:08 +00:00 · 2022-03-14 15:06:56 +05:30
parent 578414d788
commit e730804b48
16 changed files with 328 additions and 137 deletions
--- a/app/javascript/dashboard/components/buttons/ToggleButton.vue
+++ b/app/javascript/dashboard/components/buttons/ToggleButton.vue
@@ -0,0 +1,65 @@
+<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,7 +211,6 @@
          "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": {
@@ -432,6 +431,11 @@
    },
    "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": {
@@ -464,7 +468,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,19 +34,10 @@
              <td>{{ automation.name }}</td>
              <td>{{ automation.description }}</td>
              <td>
-                <button
-                  type="button"
-                  class="toggle-button"
-                  :class="{ active: automation.active }"
-                  role="switch"
-                  :aria-checked="automation.active.toString()"
+                <toggle-button
+                  :active="automation.active"
                  @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">
@@ -140,11 +131,13 @@ 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() {
@@ -290,41 +283,4 @@ 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,28 +15,57 @@
          </option>
        </select>
      </label>
-
-      <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') }}
+      <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>
+
      <woot-submit-button
        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
        :loading="uiFlags.isUpdatingInbox"
@@ -47,8 +76,13 @@
 <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: {
@@ -61,6 +95,7 @@ export default {
      preChatFormEnabled: false,
      preChatMessage: '',
      preChatFieldOptions: [],
+      preChatFields: [],
    };
  },
  computed: {
@@ -81,19 +116,19 @@ export default {
        pre_chat_form_options: preChatFormOptions,
      } = this.inbox;
      this.preChatFormEnabled = preChatFormEnabled;
-      const { pre_chat_message: preChatMessage, require_email: requireEmail } =
-        preChatFormOptions || {};
+      const {
+        pre_chat_message: preChatMessage,
+        pre_chat_fields: preChatFields,
+      } = preChatFormOptions || {};
      this.preChatMessage = preChatMessage;
-      if (requireEmail) {
-        this.preChatFieldOptions = ['requireEmail'];
-      }
+      this.preChatFields = preChatFields;
    },
-    handlePreChatFieldOptions(event) {
-      if (this.preChatFieldOptions.includes(event.target.value)) {
-        this.preChatFieldOptions = [];
-      } else {
-        this.preChatFieldOptions = [event.target.value];
-      }
+    handlePreChatFieldOptions(event, type, item) {
+      this.preChatFields.forEach((field, index) => {
+        if (field.name === item.name) {
+          this.preChatFields[index][type] = !item[type];
+        }
+      });
    },
    async updateInbox() {
      try {
@@ -104,7 +139,7 @@ export default {
            pre_chat_form_enabled: this.preChatFormEnabled,
            pre_chat_form_options: {
              pre_chat_message: this.preChatMessage,
-              require_email: this.preChatFieldOptions.includes('requireEmail'),
+              pre_chat_fields: this.preChatFields,
            },
          },
        };
@@ -125,4 +160,16 @@ 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>