[Feature] Email collect message hooks (#331)

- Add email collect hook on creating conversation
- Merge contact if it already exist

app/javascript/widget/components/AgentMessage.vue

@@ -9,7 +9,13 @@
       />
     </div>
     <div class="message-wrap">
-      <AgentMessageBubble :message="message" />
+      <AgentMessageBubble
+        :content-type="contentType"
+        :message-content-attributes="messageContentAttributes"
+        :message-id="messageId"
+        :message-type="messageType"
+        :message="message"
+      />
       <p v-if="showAvatar" class="agent-name">
         {{ agentName }}
       </p>
@@ -32,7 +38,22 @@ export default {
     avatarUrl: String,
     agentName: String,
     showAvatar: Boolean,
-    createdAt: Number,
+    contentType: {
+      type: String,
+      default: '',
+    },
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+    messageType: {
+      type: Number,
+      default: 1,
+    },
+    messageId: {
+      type: Number,
+      default: 0,
+    },
   },
 };
 </script>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,20 +1,42 @@
 <template>
-  <div class="chat-bubble agent" v-html="formatMessage(message)"></div>
+  <div class="chat-bubble agent">
+    <span v-html="formatMessage(message)"></span>
+    <email-input
+      v-if="shouldShowInput"
+      :message-id="messageId"
+      :message-content-attributes="messageContentAttributes"
+    />
+  </div>
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import EmailInput from './template/EmailInput';
 
 export default {
   name: 'AgentMessageBubble',
+  components: {
+    EmailInput,
+  },
   mixins: [messageFormatterMixin],
   props: {
     message: String,
+    contentType: String,
+    messageType: Number,
+    messageId: Number,
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    shouldShowInput() {
+      return this.contentType === 'input_email' && this.messageType === 3;
+    },
   },
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
 @import '~widget/assets/scss/variables.scss';
 

app/javascript/widget/components/ChatMessage.vue

@@ -7,9 +7,13 @@
   <AgentMessage
     v-else
     :agent-name="agentName"
+    :avatar-url="avatarUrl"
+    :content-type="message.content_type"
+    :message-content-attributes="message.content_attributes"
+    :message-id="message.id"
+    :message-type="message.message_type"
     :message="message.content"
     :show-avatar="message.showAvatar"
-    :avatar-url="avatarUrl"
   />
 </template>
 
@@ -32,9 +36,18 @@ export default {
       return this.message.message_type === MESSAGE_TYPE.INCOMING;
     },
     agentName() {
+      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
+        return 'Bot';
+      }
+
       return this.message.sender ? this.message.sender.name : '';
     },
     avatarUrl() {
+      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
+        // eslint-disable-next-line
+        return require('dashboard/assets/images/chatwoot_bot.png');
+      }
+
       return this.message.sender ? this.message.sender.avatar_url : '';
     },
   },

app/javascript/widget/components/ChatSendButton.vue

@@ -6,7 +6,7 @@
     @click="onClick"
   >
     <span v-if="!loading" class="icon-holder">
-      <img src="~widget/assets/images/message-send.svg" />
+      <i class="ion-android-send" />
     </span>
     <spinner v-else size="small" />
   </button>
@@ -51,6 +51,7 @@ export default {
     align-items: center;
     justify-content: center;
     fill: $color-white;
+    font-size: $font-size-big;
     font-weight: $font-weight-medium;
   }
 }

app/javascript/widget/components/template/EmailInput.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <form
+      v-if="!hasSubmitted"
+      class="email-input-group"
+      @submit.prevent="onSubmit()"
+    >
+      <input
+        v-model.trim="email"
+        class="form-input small"
+        placeholder="Please enter your email"
+        :class="{ error: $v.email.$error }"
+        @input="$v.email.$touch"
+      />
+      <button
+        class="button"
+        :disabled="$v.email.$invalid"
+        :style="{ background: widgetColor, borderColor: widgetColor }"
+      >
+        <i v-if="!uiFlags.isUpdating" class="ion-android-arrow-forward" />
+        <spinner v-else />
+      </button>
+    </form>
+    <span v-else>
+      <i>{{ messageContentAttributes.submitted_email }}</i>
+    </span>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Spinner from 'shared/components/Spinner';
+import { required, email } from 'vuelidate/lib/validators';
+
+export default {
+  components: {
+    Spinner,
+  },
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      email: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'contact/getUIFlags',
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    hasSubmitted() {
+      return (
+        this.messageContentAttributes &&
+        this.messageContentAttributes.submitted_email
+      );
+    },
+  },
+  validations: {
+    email: {
+      required,
+      email,
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$store.dispatch('contact/updateContactAttributes', {
+        email: this.email,
+        messageId: this.messageId,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.email-input-group {
+  display: flex;
+  margin: $space-small 0;
+  min-width: 200px;
+
+  input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &.error {
+      border-color: $color-error;
+    }
+  }
+
+  .button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    font-size: $font-size-large;
+    height: auto;
+    margin-left: -1px;
+
+    .spinner {
+      display: block;
+      padding: 0;
+      height: auto;
+      width: auto;
+    }
+  }
+}
+</style>