chore: Moved file upload methods to mixin (#7987)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -159,12 +159,7 @@ import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/cons
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { AUDIO_FORMATS } from 'shared/constants/messages';
-import {
-  MAXIMUM_FILE_UPLOAD_SIZE,
-  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
-  AUDIO_FORMATS,
-} from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   getMessageVariables,
@@ -176,13 +171,13 @@ import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { DirectUpload } from 'activestorage';
 import { frontendURL } from '../../../helper/URLHelper';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import {
   appendSignature,
   removeSignature,
@@ -213,6 +208,7 @@ export default {
     alertMixin,
     messageFormatterMixin,
     rtlMixin,
+    fileUploadMixin,
   ],
   props: {
     selectedTweet: {
@@ -944,67 +940,6 @@ export default {
         isPrivate,
       });
     },
-    onFileUpload(file) {
-      if (this.globalConfig.directUploadsEnabled) {
-        this.onDirectFileUpload(file);
-      } else {
-        this.onIndirectFileUpload(file);
-      }
-    },
-    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_SUPPORTED_FILE_UPLOAD_SIZE)) {
-        const upload = new DirectUpload(
-          file.file,
-          `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
-          {
-            directUploadWillCreateBlobWithXHR: xhr => {
-              xhr.setRequestHeader(
-                'api_access_token',
-                this.currentUser.access_token
-              );
-            },
-          }
-        );
-
-        upload.create((error, blob) => {
-          if (error) {
-            this.showAlert(error);
-          } else {
-            this.attachFile({ file, blob });
-          }
-        });
-      } else {
-        this.showAlert(
-          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
-            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_SUPPORTED_FILE_UPLOAD_SIZE)) {
-        this.attachFile({ file });
-      } else {
-        this.showAlert(
-          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
-            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
-          })
-        );
-      }
-    },
     attachFile({ blob, file }) {
       const reader = new FileReader();
       reader.readAsDataURL(file.file);

app/javascript/dashboard/mixins/fileUploadMixin.js

@@ -0,0 +1,72 @@
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { DirectUpload } from 'activestorage';
+
+export default {
+  methods: {
+    onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        this.onDirectFileUpload(file);
+      } else {
+        this.onIndirectFileUpload(file);
+      }
+    },
+    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_SUPPORTED_FILE_UPLOAD_SIZE)) {
+        const upload = new DirectUpload(
+          file.file,
+          `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
+          {
+            directUploadWillCreateBlobWithXHR: xhr => {
+              xhr.setRequestHeader(
+                'api_access_token',
+                this.currentUser.access_token
+              );
+            },
+          }
+        );
+
+        upload.create((error, blob) => {
+          if (error) {
+            this.showAlert(error);
+          } else {
+            this.attachFile({ file, blob });
+          }
+        });
+      } else {
+        this.showAlert(
+          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+            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_SUPPORTED_FILE_UPLOAD_SIZE)) {
+        this.attachFile({ file });
+      } else {
+        this.showAlert(
+          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
+          })
+        );
+      }
+    },
+  },
+};

app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js

@@ -0,0 +1,75 @@
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
+import Vue from 'vue';
+
+jest.mock('shared/helpers/FileHelper', () => ({
+  checkFileSizeLimit: jest.fn(),
+}));
+
+jest.mock('activestorage', () => ({
+  DirectUpload: jest.fn().mockImplementation(() => ({
+    create: jest.fn(),
+  })),
+}));
+
+describe('FileUploadMixin', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = new Vue(fileUploadMixin);
+    vm.isATwilioSMSChannel = false;
+    vm.globalConfig = {
+      directUploadsEnabled: true,
+    };
+    vm.accountId = 123;
+    vm.currentChat = {
+      id: 456,
+    };
+    vm.currentUser = {
+      access_token: 'token',
+    };
+    vm.$t = jest.fn(message => message);
+    vm.showAlert = jest.fn();
+    vm.attachFile = jest.fn();
+  });
+
+  it('should call onDirectFileUpload when direct uploads are enabled', () => {
+    vm.onDirectFileUpload = jest.fn();
+    vm.onFileUpload({});
+    expect(vm.onDirectFileUpload).toHaveBeenCalledWith({});
+  });
+
+  it('should call onIndirectFileUpload when direct uploads are disabled', () => {
+    vm.globalConfig.directUploadsEnabled = false;
+    vm.onIndirectFileUpload = jest.fn();
+    vm.onFileUpload({});
+    expect(vm.onIndirectFileUpload).toHaveBeenCalledWith({});
+  });
+
+  describe('onDirectFileUpload', () => {
+    it('returns early if no file is provided', () => {
+      const returnValue = vm.onDirectFileUpload(null);
+      expect(returnValue).toBeUndefined();
+    });
+
+    it('shows an alert if the file size exceeds the maximum limit', () => {
+      const fakeFile = { size: 999999999 };
+      vm.showAlert = jest.fn();
+      vm.onDirectFileUpload(fakeFile);
+      expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
+    });
+  });
+
+  describe('onIndirectFileUpload', () => {
+    it('returns early if no file is provided', () => {
+      const returnValue = vm.onIndirectFileUpload(null);
+      expect(returnValue).toBeUndefined();
+    });
+
+    it('shows an alert if the file size exceeds the maximum limit', () => {
+      const fakeFile = { size: 999999999 };
+      vm.showAlert = jest.fn();
+      vm.onIndirectFileUpload(fakeFile);
+      expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
+    });
+  });
+});