feat: Ability to send attachment in new conversation (#7698)

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

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,44 @@
+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',
+    };
+  });
+
+  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({});
+  });
+});