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/store/modules/specs/integrations/actions.spec.js

@@ -0,0 +1,136 @@
+import axios from 'axios';
+import { actions } from '../../integrations';
+import types from '../../../mutation-types';
+import integrationsList from './fixtures';
+
+const commit = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+const errorMessage = { message: 'Incorrect header' };
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: integrationsList });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
+        [types.SET_INTEGRATIONS, integrationsList.payload],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue(errorMessage);
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#connectSlack:', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { hooks: [{ id: 'slack', enabled: false }] };
+      axios.post.mockResolvedValue({ data: data });
+      await actions.connectSlack({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingSlack: true }],
+        [types.ADD_INTEGRATION, data],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingSlack: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue(errorMessage);
+      await expect(actions.connectSlack({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingSlack: true }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingSlack: false }],
+      ]);
+    });
+  });
+
+  describe('#updateSlack', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { hooks: [{ id: 'slack', enabled: false }] };
+      axios.patch.mockResolvedValue({ data: data });
+      await actions.updateSlack({ commit }, { referenceId: '12345' });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isUpdatingSlack: true }],
+        [types.ADD_INTEGRATION, data],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isUpdatingSlack: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue(errorMessage);
+      await expect(actions.updateSlack({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isUpdatingSlack: true }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isUpdatingSlack: false }],
+      ]);
+    });
+  });
+
+  describe('#deleteIntegration:', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { id: 'slack', enabled: false };
+      axios.delete.mockResolvedValue({ data: data });
+      await actions.deleteIntegration({ commit }, data.id);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_INTEGRATION, data],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue(errorMessage);
+      await actions.deleteIntegration({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('#createHooks', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { id: 'slack', enabled: false };
+      axios.post.mockResolvedValue({ data: data });
+      await actions.createHook({ commit }, data);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: true }],
+        [types.ADD_INTEGRATION_HOOKS, data],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue(errorMessage);
+      await expect(actions.createHook({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: true }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isCreatingHook: false }],
+      ]);
+    });
+  });
+
+  describe('#deleteHook', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { appId: 'dialogflow', hookId: 2 };
+      axios.delete.mockResolvedValue({ data });
+      await actions.deleteHook({ commit }, data);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: true }],
+        [types.DELETE_INTEGRATION_HOOKS, { appId: 'dialogflow', hookId: 2 }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue(errorMessage);
+      await expect(actions.deleteHook({ commit }, {})).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: true }],
+        [types.SET_INTEGRATIONS_UI_FLAG, { isDeletingHook: false }],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/integrations/fixtures.js

@@ -0,0 +1,16 @@
+export default {
+  payload: [
+    {
+      id: 1,
+      name: 'test1',
+      logo: 'test',
+      enabled: true,
+    },
+    {
+      id: 2,
+      name: 'test2',
+      logo: 'test',
+      enabled: true,
+    },
+  ],
+};

app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js

@@ -0,0 +1,51 @@
+import { getters } from '../../integrations';
+
+describe('#getters', () => {
+  it('getAppIntegrations', () => {
+    const state = {
+      records: [
+        {
+          id: 'dyte',
+          name: 'dyte',
+          logo: 'test',
+          enabled: true,
+        },
+        {
+          id: 'dialogflow',
+          name: 'test2',
+          logo: 'test',
+          enabled: true,
+        },
+      ],
+    };
+    expect(getters.getAppIntegrations(state)).toEqual([
+      {
+        id: 'dyte',
+        name: 'dyte',
+        logo: 'test',
+        enabled: true,
+      },
+      {
+        id: 'dialogflow',
+        name: 'test2',
+        logo: 'test',
+        enabled: true,
+      },
+    ]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isFetchingItem: false,
+        isUpdating: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isFetchingItem: false,
+      isUpdating: false,
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/integrations/mutations.spec.js

@@ -0,0 +1,81 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../integrations';
+
+describe('#mutations', () => {
+  describe('#GET_INTEGRATIONS', () => {
+    it('set integrations records', () => {
+      const state = { records: [] };
+      mutations[types.SET_INTEGRATIONS](state, [
+        {
+          id: 1,
+          name: 'test1',
+          logo: 'test',
+          enabled: true,
+        },
+      ]);
+      expect(state.records).toEqual([
+        {
+          id: 1,
+          name: 'test1',
+          logo: 'test',
+          enabled: true,
+        },
+      ]);
+    });
+  });
+
+  describe('#ADD_INTEGRATION_HOOKS', () => {
+    it('set integrations hook records', () => {
+      const state = { records: [{ id: 'dialogflow', hooks: [] }] };
+      const hookRecord = {
+        id: 1,
+        app_id: 'dialogflow',
+        status: false,
+        inbox: { id: 1, name: 'Chatwoot' },
+        account_id: 1,
+        hook_type: 'inbox',
+        settings: { project_id: 'test', credentials: {} },
+      };
+      mutations[types.ADD_INTEGRATION_HOOKS](state, hookRecord);
+      expect(state.records).toEqual([
+        {
+          id: 'dialogflow',
+          hooks: [hookRecord],
+        },
+      ]);
+    });
+  });
+
+  describe('#DELETE_INTEGRATION_HOOKS', () => {
+    it('delete integrations hook record', () => {
+      const state = {
+        records: [
+          {
+            id: 'dialogflow',
+            hooks: [
+              {
+                id: 1,
+                app_id: 'dialogflow',
+                status: false,
+                inbox: { id: 1, name: 'Chatwoot' },
+                account_id: 1,
+                hook_type: 'inbox',
+                settings: { project_id: 'test', credentials: {} },
+              },
+            ],
+          },
+        ],
+      };
+      mutations[types.DELETE_INTEGRATION_HOOKS](state, {
+        appId: 'dialogflow',
+        hookId: 1,
+      });
+      expect(state.records).toEqual([
+        {
+          id: 'dialogflow',
+          hooks: [],
+        },
+      ]);
+    });
+  });
+});