Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/javascript/dashboard/mixins/fileUploadMixin.js

@@ -0,0 +1,111 @@
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
+import { DirectUpload } from 'activestorage';
+import {
+  DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE,
+  resolveMaximumFileUploadSize,
+} from 'shared/helpers/FileHelper';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+export default {
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+    }),
+    installationLimit() {
+      return resolveMaximumFileUploadSize(
+        this.globalConfig.maximumFileUploadSize
+      );
+    },
+  },
+
+  methods: {
+    maxSizeFor(mime) {
+      // Use default/installation limit for private notes
+      if (this.isOnPrivateNote) {
+        return this.installationLimit;
+      }
+
+      const channelType = this.inbox?.channel_type;
+
+      if (!channelType || channelType === INBOX_TYPES.WEB) {
+        return this.installationLimit;
+      }
+
+      const channelLimit = getMaxUploadSizeByChannel({
+        channelType,
+        medium: this.inbox?.medium, // e.g. 'sms' | 'whatsapp'
+        mime, // e.g. 'image/png'
+      });
+
+      if (channelLimit === DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE) {
+        return this.installationLimit;
+      }
+
+      return Math.min(channelLimit, this.installationLimit);
+    },
+    alertOverLimit(maxSizeMB) {
+      useAlert(
+        this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxSizeMB,
+        })
+      );
+    },
+    onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        this.onDirectFileUpload(file);
+      } else {
+        this.onIndirectFileUpload(file);
+      }
+    },
+
+    onDirectFileUpload(file) {
+      if (!file) return;
+
+      const mime = file.file?.type || file.type;
+      const maxSizeMB = this.maxSizeFor(mime);
+
+      if (!checkFileSizeLimit(file, maxSizeMB)) {
+        this.alertOverLimit(maxSizeMB);
+        return;
+      }
+
+      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) {
+          useAlert(error);
+        } else {
+          this.attachFile({ file, blob });
+        }
+      });
+    },
+
+    onIndirectFileUpload(file) {
+      if (!file) return;
+
+      const mime = file.file?.type || file.type;
+      const maxSizeMB = this.maxSizeFor(mime);
+
+      if (!checkFileSizeLimit(file, maxSizeMB)) {
+        this.alertOverLimit(maxSizeMB);
+        return;
+      }
+
+      this.attachFile({ file });
+    },
+  },
+};

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

@@ -0,0 +1,102 @@
+import { shallowMount } from '@vue/test-utils';
+import { useAlert } from 'dashboard/composables';
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { reactive } from 'vue';
+
+vi.mock('shared/helpers/FileHelper', () => ({
+  checkFileSizeLimit: vi.fn(),
+  resolveMaximumFileUploadSize: vi.fn(value => Number(value) || 40),
+  DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE: 40,
+}));
+
+vi.mock('activestorage', () => ({
+  DirectUpload: vi.fn().mockImplementation(() => ({
+    create: vi.fn(),
+  })),
+}));
+
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(),
+}));
+
+describe('FileUploadMixin', () => {
+  let wrapper;
+  let mockGlobalConfig;
+  let mockCurrentChat;
+  let mockCurrentUser;
+
+  beforeEach(() => {
+    mockGlobalConfig = reactive({
+      directUploadsEnabled: true,
+      maximumFileUploadSize: 40,
+    });
+
+    mockCurrentChat = reactive({
+      id: 456,
+    });
+
+    mockCurrentUser = reactive({
+      access_token: 'token',
+    });
+
+    wrapper = shallowMount({
+      mixins: [fileUploadMixin],
+      data() {
+        return {
+          globalConfig: mockGlobalConfig,
+          currentChat: mockCurrentChat,
+          currentUser: mockCurrentUser,
+          isATwilioSMSChannel: false,
+        };
+      },
+      methods: {
+        attachFile: vi.fn(),
+        showAlert: vi.fn(),
+        $t: msg => msg,
+      },
+      template: '<div />',
+    });
+  });
+
+  it('should call onDirectFileUpload when direct uploads are enabled', () => {
+    wrapper.vm.onDirectFileUpload = vi.fn();
+    wrapper.vm.onFileUpload({});
+    expect(wrapper.vm.onDirectFileUpload).toHaveBeenCalledWith({});
+  });
+
+  it('should call onIndirectFileUpload when direct uploads are disabled', () => {
+    wrapper.vm.globalConfig.directUploadsEnabled = false;
+    wrapper.vm.onIndirectFileUpload = vi.fn();
+    wrapper.vm.onFileUpload({});
+    expect(wrapper.vm.onIndirectFileUpload).toHaveBeenCalledWith({});
+  });
+
+  describe('onDirectFileUpload', () => {
+    it('returns early if no file is provided', () => {
+      const returnValue = wrapper.vm.onDirectFileUpload(null);
+      expect(returnValue).toBeUndefined();
+    });
+
+    it('shows an alert if the file size exceeds the maximum limit', () => {
+      const fakeFile = { size: 999999999 };
+      checkFileSizeLimit.mockReturnValue(false); // Mock exceeding file size
+      wrapper.vm.onDirectFileUpload(fakeFile);
+      expect(useAlert).toHaveBeenCalledWith(expect.any(String));
+    });
+  });
+
+  describe('onIndirectFileUpload', () => {
+    it('returns early if no file is provided', () => {
+      const returnValue = wrapper.vm.onIndirectFileUpload(null);
+      expect(returnValue).toBeUndefined();
+    });
+
+    it('shows an alert if the file size exceeds the maximum limit', () => {
+      const fakeFile = { size: 999999999 };
+      checkFileSizeLimit.mockReturnValue(false); // Mock exceeding file size
+      wrapper.vm.onIndirectFileUpload(fakeFile);
+      expect(useAlert).toHaveBeenCalledWith(expect.any(String));
+    });
+  });
+});