feat: Add pre_chat_form_settings in inbox settings page (#1776)

app/controllers/api/v1/accounts/inboxes_controller.rb

@@ -89,6 +89,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
                     :webhook_url,
                     :email,
                     :reply_time,
+                    :pre_chat_form_enabled,
+                    { pre_chat_form_options: [:pre_chat_message, :require_email] },
                     { selected_feature_flags: [] }
                   ])
   end

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -224,7 +224,8 @@
     "TABS": {
       "SETTINGS": "Settings",
       "COLLABORATORS": "Collaborators",
-      "CONFIGURATION": "Configuration"
+      "CONFIGURATION": "Configuration",
+      "PRE_CHAT_FORM": "Pre Chat Form"
     },
     "SETTINGS": "Settings",
     "FEATURES": {
@@ -250,6 +251,23 @@
       "SUBTITLE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
       "MESSAGE_SUCCESS": "Reconnection successful",
       "MESSAGE_ERROR": "There was an error, please try again"
+    },
+    "PRE_CHAT_FORM": {
+      "DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
+      "ENABLE": {
+        "LABEL": "Enable pre chat form",
+        "OPTIONS": {
+          "ENABLED": "Yes",
+          "DISABLED": "No"
+        }
+      },
+      "PRE_CHAT_MESSAGE": {
+        "LABEL": "Pre Chat Message",
+        "PLACEHOLDER": "This message would be visible to the users along with the form"
+      },
+      "REQUIRE_EMAIL": {
+        "LABEL": "Visitors should provide their name and email address before starting the chat"
+      }
     }
   }
 }

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

@@ -0,0 +1,128 @@
+<template>
+  <div class="settings--content">
+    <div class="prechat--title">
+      {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
+    </div>
+    <form class="medium-6" @submit.prevent="updateInbox">
+      <label class="medium-9 columns">
+        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
+        <select v-model="preChatFormEnabled">
+          <option :value="true">
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
+          </option>
+          <option :value="false">
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
+          </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') }}
+        </label>
+      </div>
+      <woot-submit-button
+        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :loading="uiFlags.isUpdatingInbox"
+      />
+    </form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      preChatFormEnabled: false,
+      preChatMessage: '',
+      preChatFieldOptions: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+  },
+  watch: {
+    inbox() {
+      this.setDefaults();
+    },
+  },
+  mounted() {
+    this.setDefaults();
+  },
+  methods: {
+    setDefaults() {
+      const {
+        pre_chat_form_enabled: preChatFormEnabled,
+        pre_chat_form_options: preChatFormOptions,
+      } = this.inbox;
+      this.preChatFormEnabled = preChatFormEnabled;
+      const { pre_chat_message: preChatMessage, require_email: requireEmail } =
+        preChatFormOptions || {};
+      this.preChatMessage = preChatMessage;
+      if (requireEmail) {
+        this.preChatFieldOptions = ['requireEmail'];
+      }
+    },
+    handlePreChatFieldOptions(event) {
+      if (this.preChatFieldOptions.includes(event.target.value)) {
+        this.preChatFieldOptions = [];
+      } else {
+        this.preChatFieldOptions = [event.target.value];
+      }
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            pre_chat_form_enabled: this.preChatFormEnabled,
+            pre_chat_form_options: {
+              pre_chat_message: this.preChatMessage,
+              require_email: this.preChatFieldOptions.includes('requireEmail'),
+            },
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.settings--content {
+  font-size: var(--font-size-default);
+}
+
+.prechat--title {
+  margin: var(--space-medium) 0 var(--space-slab);
+}
+</style>

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

@@ -251,6 +251,9 @@
         </div>
       </div>
     </div>
+    <div v-if="selectedTabKey === 'preChatForm'">
+      <pre-chat-form-settings :inbox="inbox" />
+    </div>
   </div>
 </template>
 
@@ -262,11 +265,13 @@ import alertMixin from 'shared/mixins/alertMixin';
 import SettingsSection from '../../../../components/SettingsSection';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize';
+import PreChatFormSettings from './PreChatForm/Settings';
 
 export default {
   components: {
     SettingsSection,
     FacebookReauthorize,
+    PreChatFormSettings,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -317,7 +322,21 @@ export default {
         },
       ];
 
-      if (this.isAWebWidgetInbox || this.isATwilioChannel) {
+      if (this.isAWebWidgetInbox) {
+        return [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'preChatForm',
+            name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
+          },
+          {
+            key: 'configuration',
+            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
+          },
+        ];
+      }
+
+      if (this.isATwilioChannel) {
         return [
           ...visibleToAllChannelTabs,
           {

app/javascript/dashboard/store/modules/inboxes.js

@@ -111,12 +111,15 @@ export const actions = {
       throw new Error(error);
     }
   },
-  updateInbox: async ({ commit }, { id, ...inboxParams }) => {
+  updateInbox: async ({ commit }, { id, formData = true, ...inboxParams }) => {
     commit(types.default.SET_INBOXES_UI_FLAG, {
       isUpdatingAutoAssignment: true,
     });
     try {
-      const response = await InboxesAPI.update(id, buildInboxData(inboxParams));
+      const response = await InboxesAPI.update(
+        id,
+        formData ? buildInboxData(inboxParams) : inboxParams
+      );
       commit(types.default.EDIT_INBOXES, response.data);
       commit(types.default.SET_INBOXES_UI_FLAG, {
         isUpdatingAutoAssignment: false,

app/javascript/widget/components/PreChat/Form.vue

@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-1 flex-col p-6 overflow-y-scroll"
+    class="flex flex-1 flex-col p-6 overflow-y-auto"
     @submit.prevent="onSubmit"
   >
     <div v-if="options.preChatMessage" class="text-black-800 text-sm leading-5">

app/javascript/widget/views/Home.vue

@@ -34,7 +34,7 @@
         />
       </transition>
     </div>
-    <div class="flex flex-1 overflow-scroll">
+    <div class="flex flex-1 overflow-auto">
       <conversation-wrap
         v-if="currentView === 'messageView'"
         :grouped-messages="groupedMessages"

app/views/api/v1/models/_inbox.json.jbuilder

@@ -18,4 +18,8 @@ json.phone_number resource.channel.try(:phone_number)
 json.selected_feature_flags resource.channel.try(:selected_feature_flags)
 json.reply_time resource.channel.try(:reply_time)
 json.reauthorization_required resource.channel.try(:reauthorization_required?) if resource.facebook?
-json.hmac_token resource.channel.try(:hmac_token) if resource.web_widget?
+if resource.web_widget?
+  json.hmac_token resource.channel.try(:hmac_token)
+  json.pre_chat_form_enabled resource.channel.try(:pre_chat_form_enabled)
+  json.pre_chat_form_options resource.channel.try(:pre_chat_form_options)
+end

app/views/widget_tests/index.html.erb

@@ -35,10 +35,12 @@ window.chatwootSettings = {
 
 window.addEventListener('chatwoot:ready', function() {
   console.log(window.$chatwoot);
-  window.$chatwoot.setUser('<%= user_id %>', {
+  if (window.location.search.includes('setUser')) {
-    identifier_hash: '<%= user_hash %>',
+    window.$chatwoot.setUser('<%= user_id %>', {
-    email: 'jane@example.com',
+      identifier_hash: '<%= user_hash %>',
-    name: 'Jane Doe'
+      email: 'jane@example.com',
-  });
+      name: 'Jane Doe'
+    });
+  }
 })
 </script>