feat: Conversation transcript in widget (#2549)

app/javascript/widget/components/Banner.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
+    <span>
+      {{ bannerMessage }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
+export default {
+  data() {
+    return {
+      showBannerMessage: false,
+      bannerMessage: '',
+      bannerType: 'error',
+    };
+  },
+  mounted() {
+    bus.$on(BUS_EVENTS.SHOW_ALERT, ({ message, type = 'error' }) => {
+      this.bannerMessage = message;
+      this.bannerType = type;
+      this.showBannerMessage = true;
+      setTimeout(() => {
+        this.showBannerMessage = false;
+      }, 3000);
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+.banner {
+  color: $color-white;
+  font-size: $font-size-default;
+  font-weight: $font-weight-bold;
+  padding: $space-slab;
+  text-align: center;
+  &.success {
+    background: $color-success;
+  }
+  &.error {
+    background: $color-error;
+  }
+}
+</style>

app/javascript/widget/components/ChatAttachment.vue

@@ -29,6 +29,11 @@ export default {
   data() {
     return { isUploading: false };
   },
+  computed: {
+    fileUploadSizeLimit() {
+      return MAXIMUM_FILE_UPLOAD_SIZE;
+    },
+  },
   methods: {
     getFileType(fileType) {
       return fileType.includes('image') ? 'image' : 'file';
@@ -47,7 +52,11 @@ export default {
             thumbUrl,
           });
         } else {
-          window.bus.$emit(BUS_EVENTS.ATTACHMENT_SIZE_CHECK_ERROR);
+          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('FILE_SIZE_LIMIT', {
+              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
+            }),
+          });
         }
       } catch (error) {
         // Error

app/javascript/widget/components/ChatFooter.vue

@@ -1,20 +1,31 @@
 <template>
-  <footer v-if="!hideReplyBox" class="footer">
-    <ChatInputWrap
-      :on-send-message="handleSendMessage"
-      :on-send-attachment="handleSendAttachment"
-    />
-  </footer>
-  <custom-button
-    v-else
-    class="font-medium"
-    block
-    :bg-color="widgetColor"
-    :text-color="textColor"
-    @click="startNewConversation"
-  >
-    {{ $t('START_NEW_CONVERSATION') }}
-  </custom-button>
+  <div>
+    <footer v-if="!hideReplyBox" class="footer">
+      <ChatInputWrap
+        :on-send-message="handleSendMessage"
+        :on-send-attachment="handleSendAttachment"
+      />
+    </footer>
+    <div v-else>
+      <custom-button
+        class="font-medium"
+        block
+        :bg-color="widgetColor"
+        :text-color="textColor"
+        @click="startNewConversation"
+      >
+        {{ $t('START_NEW_CONVERSATION') }}
+      </custom-button>
+      <custom-button
+        v-if="showEmailTranscriptButton"
+        type="clear"
+        class="font-normal"
+        @click="sendTranscript"
+      >
+        {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
+      </custom-button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -23,6 +34,7 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 import CustomButton from 'shared/components/Button';
 import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { sendEmailTranscript } from 'widget/api/conversation';
 
 export default {
   components: {
@@ -40,6 +52,7 @@ export default {
       conversationAttributes: 'conversationAttributes/getConversationParams',
       widgetColor: 'appConfig/getWidgetColor',
       getConversationSize: 'conversation/getConversationSize',
+      currentUser: 'contacts/getCurrentUser',
     }),
     textColor() {
       return getContrastingTextColor(this.widgetColor);
@@ -49,6 +62,9 @@ export default {
       const { status } = this.conversationAttributes;
       return csatSurveyEnabled && status === 'resolved';
     },
+    showEmailTranscriptButton() {
+      return this.currentUser && this.currentUser.email;
+    },
   },
   methods: {
     ...mapActions('conversation', [
@@ -78,6 +94,24 @@ export default {
       this.clearConversationAttributes();
       window.bus.$emit(BUS_EVENTS.START_NEW_CONVERSATION);
     },
+    async sendTranscript() {
+      const { email } = this.currentUser;
+      if (email) {
+        try {
+          await sendEmailTranscript({
+            email,
+          });
+          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'),
+            type: 'success',
+          });
+        } catch (error) {
+          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'),
+          });
+        }
+      }
+    },
   },
 };
 </script>