fix: File validations for Twilio WhatsApp Channel (#5294)

Fixes: #5289 #2971

- Removed unsupported attachment file format from Twilio WhatsApp Channel. https://www.twilio.com/docs/whatsapp/guidance-whatsapp-media-messages

- Added 5 MB attachment file limit for Twilio SMS Channel.

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -136,7 +136,10 @@ import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 
-import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import {
+  ALLOWED_FILE_TYPES,
+  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
+} from 'shared/constants/messages';
 
 import { REPLY_EDITOR_MODES } from './constants';
 export default {
@@ -257,6 +260,9 @@ export default {
       return this.showAudioRecorder && this.isRecordingAudio;
     },
     allowedFileTypes() {
+      if (this.isATwilioWhatsappChannel) {
+        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
+      }
       return ALLOWED_FILE_TYPES;
     },
     audioRecorderPlayStopIcon() {

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -144,7 +144,10 @@ import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import {
@@ -671,10 +674,14 @@ export default {
       }
     },
     onDirectFileUpload(file) {
+      const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel
+        ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+        : MAXIMUM_FILE_UPLOAD_SIZE;
+
       if (!file) {
         return;
       }
-      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+      if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
         const upload = new DirectUpload(
           file.file,
           `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
@@ -698,21 +705,24 @@ export default {
       } else {
         this.showAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
-            MAXIMUM_FILE_UPLOAD_SIZE,
+            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
           })
         );
       }
     },
     onIndirectFileUpload(file) {
+      const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel
+        ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+        : MAXIMUM_FILE_UPLOAD_SIZE;
       if (!file) {
         return;
       }
-      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+      if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
         this.attachFile({ file });
       } else {
         this.showAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
-            MAXIMUM_FILE_UPLOAD_SIZE,
+            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
           })
         );
       }

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -137,7 +137,7 @@
     "ASSIGN_LABEL_SUCCESFUL": "Label assigned successfully",
     "ASSIGN_LABEL_FAILED": "Label assignment failed",
     "CHANGE_TEAM": "Conversation team changed",
-    "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
+    "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
     "MESSAGE_ERROR": "Unable to send this message, please try again later",
     "SENT_BY": "Sent by:",
     "BOT": "Bot",

app/javascript/shared/constants/messages.js

@@ -12,6 +12,7 @@ export const MESSAGE_TYPE = {
 };
 // Size in mega bytes
 export const MAXIMUM_FILE_UPLOAD_SIZE = 40;
+export const MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL = 5;
 
 export const ALLOWED_FILE_TYPES =
   'image/*,' +
@@ -24,6 +25,12 @@ export const ALLOWED_FILE_TYPES =
   'application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,' +
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document,';
 
+export const ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP =
+  'image/png, image/jpeg,' +
+  'audio/mpeg, audio/opus, audio/ogg, audio/amr,' +
+  'video/mp4,' +
+  'application/pdf,';
+
 export const CSAT_RATINGS = [
   {
     key: 'disappointed',