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/agentBots/agentBots.spec.js

@@ -0,0 +1,190 @@
+import axios from 'axios';
+import { actions } from '../../agentBots';
+import types from '../../../mutation-types';
+import { agentBotRecords, agentBotData } from './fixtures';
+
+const commit = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: agentBotRecords });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetching: true }],
+        [types.SET_AGENT_BOTS, agentBotRecords],
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetching: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: agentBotRecords[0] });
+      await actions.create({ commit }, agentBotData);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: true }],
+        [types.ADD_AGENT_BOT, agentBotRecords[0]],
+        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: false }],
+      ]);
+
+      expect(axios.post.mock.calls.length).toBe(1);
+      const formDataArg = axios.post.mock.calls[0][1];
+      expect(formDataArg instanceof FormData).toBe(true);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.create({ commit }, {})).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: agentBotRecords[0] });
+      await actions.update(
+        { commit },
+        {
+          id: agentBotRecords[0].id,
+          data: agentBotData,
+        }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
+        [types.EDIT_AGENT_BOT, agentBotRecords[0]],
+        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false }],
+      ]);
+
+      expect(axios.patch.mock.calls.length).toBe(1);
+      const formDataArg = axios.patch.mock.calls[0][1];
+      expect(formDataArg instanceof FormData).toBe(true);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.update({ commit }, { id: 1, data: {} })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: agentBotRecords[0] });
+      await actions.delete({ commit }, agentBotRecords[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_AGENT_BOT, agentBotRecords[0].id],
+        [types.SET_AGENT_BOT_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, agentBotRecords[0].id)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isDeleting: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+  describe('#setAgentBotInbox', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: {} });
+      await actions.setAgentBotInbox({ commit }, { inboxId: 2, botId: 3 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isSettingAgentBot: true }],
+        [types.SET_AGENT_BOT_INBOX, { inboxId: 2, agentBotId: 3 }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isSettingAgentBot: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.setAgentBotInbox({ commit }, { inboxId: 2, botId: 3 })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isSettingAgentBot: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isSettingAgentBot: false }],
+      ]);
+    });
+  });
+  describe('#fetchAgentBotInbox', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: { agent_bot: { id: 3 } } });
+      await actions.fetchAgentBotInbox({ commit }, 2);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetchingAgentBot: true }],
+        [types.SET_AGENT_BOT_INBOX, { inboxId: 2, agentBotId: 3 }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetchingAgentBot: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.fetchAgentBotInbox({ commit }, { inboxId: 2, agentBotId: 3 })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetchingAgentBot: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isFetchingAgentBot: false }],
+      ]);
+    });
+  });
+  describe('#disconnectBot', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: {} });
+      await actions.disconnectBot({ commit }, { inboxId: 2 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: true }],
+        [types.SET_AGENT_BOT_INBOX, { inboxId: 2, agentBotId: '' }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.disconnectBot({ commit }, { inboxId: 2, agentBotId: '' })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false }],
+      ]);
+    });
+  });
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { ...agentBotRecords[0], access_token: 'new_token_123' },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken(
+        { commit },
+        agentBotRecords[0].id
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.EDIT_AGENT_BOT, mockResponse.data],
+      ]);
+      expect(result).toBe(mockResponse.data);
+    });
+  });
+});

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

@@ -0,0 +1,35 @@
+export const agentBotRecords = [
+  {
+    account_id: 1,
+    id: 11,
+    name: 'Agent Bot 11',
+    description: 'Agent Bot Description',
+    bot_type: 'webhook',
+    thumbnail: 'https://example.com/thumbnail.jpg',
+    bot_config: {},
+    outgoing_url: 'https://example.com/outgoing',
+    access_token: 'hN8QwG769RqBXmme',
+    system_bot: false,
+  },
+
+  {
+    account_id: 1,
+    id: 12,
+    name: 'Agent Bot 12',
+    description: 'Agent Bot Description 12',
+    bot_type: 'webhook',
+    thumbnail: 'https://example.com/thumbnail.jpg',
+    bot_config: {},
+    outgoing_url: 'https://example.com/outgoing',
+    access_token: 'hN8QwG769RqBXmme',
+    system_bot: false,
+  },
+];
+
+export const agentBotData = {
+  name: 'Test Bot',
+  description: 'Test Description',
+  outgoing_url: 'https://test.com',
+  bot_type: 'webhook',
+  avatar: new File([''], 'filename'),
+};

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

@@ -0,0 +1,31 @@
+import { getters } from '../../agentBots';
+import { agentBotRecords } from './fixtures';
+
+describe('#getters', () => {
+  it('getBots', () => {
+    const state = { records: agentBotRecords };
+    expect(getters.getBots(state)).toEqual(agentBotRecords);
+  });
+
+  it('getBot', () => {
+    const state = { records: agentBotRecords };
+    expect(getters.getBot(state)(11)).toEqual(agentBotRecords[0]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isCreating: false,
+      isUpdating: false,
+      isDeleting: false,
+    });
+  });
+});

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

@@ -0,0 +1,66 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../agentBots';
+import { agentBotRecords } from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_AGENT_BOT_UI_FLAG', () => {
+    it('set uiFlags', () => {
+      const state = { uiFlags: { isFetchingItem: false } };
+      mutations[types.SET_AGENT_BOT_UI_FLAG](state, { isFetchingItem: true });
+      expect(state.uiFlags.isFetchingItem).toEqual(true);
+    });
+  });
+  describe('#SET_AGENT_BOTS', () => {
+    it('set agent bot records', () => {
+      const state = { records: [] };
+      mutations[types.SET_AGENT_BOTS](state, agentBotRecords);
+      expect(state.records).toEqual(agentBotRecords);
+    });
+  });
+  describe('#ADD_AGENT_BOT', () => {
+    it('push newly created bot to the store', () => {
+      const state = { records: [agentBotRecords[0]] };
+      mutations[types.ADD_AGENT_BOT](state, agentBotRecords[1]);
+      expect(state.records).toEqual([agentBotRecords[0], agentBotRecords[1]]);
+    });
+  });
+  describe('#EDIT_AGENT_BOT', () => {
+    it('update agent bot record', () => {
+      const state = { records: [agentBotRecords[0]] };
+      mutations[types.EDIT_AGENT_BOT](state, {
+        id: 11,
+        name: 'agent-bot-11',
+      });
+      expect(state.records[0].name).toEqual('agent-bot-11');
+    });
+  });
+  describe('#DELETE_AGENT_BOT', () => {
+    it('delete agent bot record', () => {
+      const state = { records: [agentBotRecords[0]] };
+      mutations[types.DELETE_AGENT_BOT](state, agentBotRecords[0]);
+      expect(state.records).toEqual([agentBotRecords[0]]);
+    });
+  });
+  describe('#SET_AGENT_BOT_INBOX', () => {
+    it('set agent bot in the object', () => {
+      const state = { agentBotInbox: {} };
+      mutations[types.SET_AGENT_BOT_INBOX](state, {
+        agentBotId: 2,
+        inboxId: 3,
+      });
+      expect(state.agentBotInbox).toEqual({ 3: 2 });
+    });
+  });
+  describe('#UPDATE_AGENT_BOT_AVATAR', () => {
+    it('update agent bot avatar', () => {
+      const state = { records: [agentBotRecords[0]] };
+      mutations[types.UPDATE_AGENT_BOT_AVATAR](state, {
+        id: 11,
+        thumbnail: 'https://example.com/thumbnail.jpg',
+      });
+      expect(state.records[0].thumbnail).toEqual(
+        'https://example.com/thumbnail.jpg'
+      );
+    });
+  });
+});