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

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,
           {