fix: Check uploaded file size in widget and dashboard (#1975)

* File size check logic in widget

* set maxium file size

* update locale texts

* file size check in dashboard

* dynamincally set file size limit error message

* code climate review fixes

* add alert mixin

* move attahcment bus event to constants

* Move file size check logic to helper

* add specs for file size limit check helper

* changes as per review

app/javascript/widget/views/Home.vue

@@ -34,6 +34,15 @@
         />
       </transition>
     </div>
+    <div v-if="showAttachmentError" class="banner">
+      <span>
+        {{
+          $t('FILE_SIZE_LIMIT', {
+            MAXIMUM_FILE_UPLOAD_SIZE: fileUploadSizeLimit,
+          })
+        }}
+      </span>
+    </div>
     <div class="flex flex-1 overflow-auto">
       <conversation-wrap
         v-if="currentView === 'messageView'"
@@ -80,6 +89,8 @@ import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
 import Spinner from 'shared/components/Spinner.vue';
 import { mapGetters } from 'vuex';
+import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import PreChatForm from '../components/PreChat/Form';
 export default {
   name: 'Home',
@@ -105,7 +116,7 @@ export default {
     },
   },
   data() {
-    return { isOnCollapsedView: false };
+    return { isOnCollapsedView: false, showAttachmentError: false };
   },
   computed: {
     ...mapGetters({
@@ -132,6 +143,9 @@ export default {
     isOpen() {
       return this.conversationAttributes.status === 'open';
     },
+    fileUploadSizeLimit() {
+      return MAXIMUM_FILE_UPLOAD_SIZE;
+    },
     showInputTextArea() {
       if (this.hideInputForBotConversations) {
         if (this.isOpen) {
@@ -154,6 +168,14 @@ export default {
       );
     },
   },
+  mounted() {
+    bus.$on(BUS_EVENTS.ATTACHMENT_SIZE_CHECK_ERROR, () => {
+      this.showAttachmentError = true;
+      setTimeout(() => {
+        this.showAttachmentError = false;
+      }, 3000);
+    });
+  },
   methods: {
     startConversation() {
       this.isOnCollapsedView = !this.isOnCollapsedView;
@@ -221,5 +243,13 @@ export default {
   .input-wrap {
     padding: 0 $space-normal;
   }
+  .banner {
+    background: $color-error;
+    color: $color-white;
+    font-size: $font-size-default;
+    font-weight: $font-weight-bold;
+    padding: $space-slab;
+    text-align: center;
+  }
 }
 </style>