feat: Add a pre-chat form on widget (#1769)

2021-02-16 00:14:13 +05:30
parent 5f2bf7dfd2
commit 037ffc7419
31 changed files with 604 additions and 200 deletions
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -3,27 +3,30 @@
    v-if="!conversationSize && isFetchingList"
    class="flex flex-1 items-center h-full bg-black-25 justify-center"
  >
-    <spinner size=""></spinner>
+    <spinner size="" />
  </div>
  <div v-else class="home">
-    <div class="header-wrap">
+    <div
+      class="header-wrap bg-white"
+      :class="{ expanded: !isHeaderCollapsed, collapsed: isHeaderCollapsed }"
+    >
      <transition
        enter-active-class="transition-all delay-200 duration-300 ease"
        leave-active-class="transition-all duration-200 ease-in"
-        enter-class="opacity-0 transform -translate-y-32"
-        enter-to-class="opacity-100 transform translate-y-0"
-        leave-class="opacity-100 transform translate-y-0"
-        leave-to-class="opacity-0 transform -translate-y-32"
+        enter-class="opacity-0 transform"
+        enter-to-class="opacity-100 transform"
+        leave-class="opacity-100 transform"
+        leave-to-class="opacity-0 transform"
      >
        <chat-header-expanded
-          v-if="!isOnMessageView"
-          :intro-heading="introHeading"
-          :intro-body="introBody"
+          v-if="!isHeaderCollapsed"
+          :intro-heading="channelConfig.welcomeTitle"
+          :intro-body="channelConfig.welcomeTagline"
          :avatar-url="channelConfig.avatarUrl"
          :show-popout-button="showPopoutButton"
        />
        <chat-header
-          v-if="isOnMessageView"
+          v-if="isHeaderCollapsed"
          :title="channelConfig.websiteName"
          :avatar-url="channelConfig.avatarUrl"
          :show-popout-button="showPopoutButton"
@@ -31,21 +34,33 @@
        />
      </transition>
    </div>
-    <conversation-wrap :grouped-messages="groupedMessages" />
+    <div class="flex flex-1 overflow-scroll">
+      <conversation-wrap
+        v-if="currentView === 'messageView'"
+        :grouped-messages="groupedMessages"
+      />
+      <pre-chat-form
+        v-if="currentView === 'preChatFormView'"
+        :options="preChatFormOptions"
+      />
+    </div>
    <div class="footer-wrap">
      <transition
        enter-active-class="transition-all delay-300 duration-300 ease"
        leave-active-class="transition-all duration-200 ease-in"
-        enter-class="opacity-0 transform translate-y-32"
+        enter-class="opacity-0 transform"
        enter-to-class="opacity-100 transform translate-y-0"
        leave-class="opacity-100 transform translate-y-0"
-        leave-to-class="opacity-0 transform translate-y-32 "
+        leave-to-class="opacity-0 transform "
      >
-        <div v-if="showInputTextArea && isOnMessageView" class="input-wrap">
+        <div
+          v-if="showInputTextArea && currentView === 'messageView'"
+          class="input-wrap"
+        >
          <chat-footer />
        </div>
        <team-availability
-          v-if="!isOnMessageView"
+          v-if="currentView === 'cardView'"
          :available-agents="availableAgents"
          @start-conversation="startConversation"
        />
@@ -65,7 +80,7 @@ import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
 import Spinner from 'shared/components/Spinner.vue';
 import { mapGetters } from 'vuex';
-
+import PreChatForm from '../components/PreChat/Form';
 export default {
  name: 'Home',
  components: {
@@ -74,45 +89,44 @@ export default {
    ChatHeader,
    ChatHeaderExpanded,
    ConversationWrap,
+    PreChatForm,
    Spinner,
    TeamAvailability,
  },
  mixins: [configMixin],
  props: {
-    groupedMessages: {
-      type: Array,
-      default: () => [],
-    },
-    conversationSize: {
-      type: Number,
-      default: 0,
-    },
-    availableAgents: {
-      type: Array,
-      default: () => [],
-    },
    hasFetched: {
      type: Boolean,
      default: false,
    },
-    conversationAttributes: {
-      type: Object,
-      default: () => {},
-    },
    showPopoutButton: {
      type: Boolean,
      default: false,
    },
  },
  data() {
-    return {
-      showMessageView: false,
-    };
+    return { isOnCollapsedView: false };
  },
  computed: {
    ...mapGetters({
+      availableAgents: 'agent/availableAgents',
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+      conversationSize: 'conversation/getConversationSize',
+      groupedMessages: 'conversation/getGroupedConversation',
      isFetchingList: 'conversation/getIsFetchingList',
    }),
+    currentView() {
+      if (this.isHeaderCollapsed) {
+        if (this.conversationSize) {
+          return 'messageView';
+        }
+        if (this.preChatFormEnabled) {
+          return 'preChatFormView';
+        }
+        return 'messageView';
+      }
+      return 'cardView';
+    },
    isOpen() {
      return this.conversationAttributes.status === 'open';
    },
@@ -125,31 +139,22 @@ export default {
      }
      return true;
    },
-    isOnMessageView() {
-      if (this.hideWelcomeHeader) {
+    isHeaderCollapsed() {
+      if (!this.hasIntroText || this.conversationSize) {
        return true;
      }
-      if (this.conversationSize === 0) {
-        return this.showMessageView;
-      }
-      return true;
+
+      return this.isOnCollapsedView;
    },
-    isHeaderExpanded() {
-      return this.conversationSize === 0;
-    },
-    introHeading() {
-      return this.channelConfig.welcomeTitle;
-    },
-    introBody() {
-      return this.channelConfig.welcomeTagline;
-    },
-    hideWelcomeHeader() {
-      return !(this.introHeading || this.introBody);
+    hasIntroText() {
+      return (
+        this.channelConfig.welcomeTitle || this.channelConfig.welcomeTagline
+      );
    },
  },
  methods: {
    startConversation() {
-      this.showMessageView = !this.showMessageView;
+      this.isOnCollapsedView = !this.isOnCollapsedView;
    },
  },
 };
@@ -157,6 +162,7 @@ export default {

 <style scoped lang="scss">
@import '~widget/assets/scss/variables';
+@import '~widget/assets/scss/mixins';

 .home {
  width: 100%;
@@ -168,9 +174,19 @@ export default {
  background: $color-background;

  .header-wrap {
+    border-radius: $space-normal $space-normal 0 0;
    flex-shrink: 0;
-    border-radius: $space-normal $space-normal $space-small $space-small;
+    transition: max-height 300ms;
    z-index: 99;
+    @include shadow-large;
+
+    &.expanded {
+      max-height: 16rem;
+    }
+
+    &.collapsed {
+      max-height: 4.5rem;
+    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
      border-radius: 0;
--- a/app/javascript/widget/views/Router.vue
+++ b/app/javascript/widget/views/Router.vue
@@ -10,21 +10,13 @@
  >
    <home
      v-if="!showUnreadView"
-      :grouped-messages="groupedMessages"
-      :conversation-size="conversationSize"
-      :available-agents="availableAgents"
      :has-fetched="hasFetched"
-      :conversation-attributes="conversationAttributes"
      :unread-message-count="unreadMessageCount"
      :show-popout-button="showPopoutButton"
    />
    <unread
      v-else
-      :unread-messages="unreadMessages"
-      :conversation-size="conversationSize"
-      :available-agents="availableAgents"
      :has-fetched="hasFetched"
-      :conversation-attributes="conversationAttributes"
      :unread-message-count="unreadMessageCount"
      :hide-message-bubble="hideMessageBubble"
    />
@@ -42,22 +34,6 @@ export default {
    Unread,
  },
  props: {
-    groupedMessages: {
-      type: Array,
-      default: () => [],
-    },
-    unreadMessages: {
-      type: Array,
-      default: () => [],
-    },
-    conversationSize: {
-      type: Number,
-      default: 0,
-    },
-    availableAgents: {
-      type: Array,
-      default: () => [],
-    },
    hasFetched: {
      type: Boolean,
      default: false,
@@ -78,10 +54,6 @@ export default {
      type: Boolean,
      default: false,
    },
-    conversationAttributes: {
-      type: Object,
-      default: () => {},
-    },
    unreadMessageCount: {
      type: Number,
      default: 0,
--- a/app/javascript/widget/views/Unread.vue
+++ b/app/javascript/widget/views/Unread.vue
@@ -35,6 +35,7 @@
 import { IFrameHelper } from 'widget/helpers/utils';
 import AgentBubble from 'widget/components/AgentMessageBubble.vue';
 import configMixin from '../mixins/configMixin';
+import { mapGetters } from 'vuex';

 export default {
  name: 'Unread',
@@ -43,26 +44,10 @@ export default {
  },
  mixins: [configMixin],
  props: {
-    unreadMessages: {
-      type: Array,
-      default: () => [],
-    },
-    conversationSize: {
-      type: Number,
-      default: 0,
-    },
-    availableAgents: {
-      type: Array,
-      default: () => [],
-    },
    hasFetched: {
      type: Boolean,
      default: false,
    },
-    conversationAttributes: {
-      type: Object,
-      default: () => {},
-    },
    unreadMessageCount: {
      type: Number,
      default: 0,
@@ -73,6 +58,9 @@ export default {
    },
  },
  computed: {
+    ...mapGetters({
+      unreadMessages: 'conversation/getUnreadTextMessages',
+    }),
    showCloseButton() {
      return this.unreadMessageCount && this.hideMessageBubble;
    },