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

@@ -0,0 +1,151 @@
+import axios from 'axios';
+import { actions } from '../../macros';
+import * as types from '../../../mutation-types';
+import macrosList 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: { payload: macrosList } });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isFetching: true }],
+        [types.default.SET_MACROS, macrosList],
+        [types.default.SET_MACROS_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.default.SET_MACROS_UI_FLAG, { isFetching: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#getMacroById', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: { payload: macrosList[0] } });
+      await actions.getSingleMacro({ commit }, 22);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: true }],
+        [types.default.ADD_MACRO, macrosList[0]],
+        [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.getSingleMacro({ commit }, 22);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: { payload: macrosList[0] } });
+      await actions.create({ commit }, macrosList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_MACRO, macrosList[0]],
+        [types.default.SET_MACROS_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    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.default.SET_MACROS_UI_FLAG, { isCreating: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#execute', () => {
+    const macroId = 12;
+    const conversationIds = [1];
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: null });
+      await actions.execute(
+        { commit },
+        {
+          macroId,
+          conversationIds,
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isExecuting: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isExecuting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.execute(
+          { commit },
+          {
+            macroId,
+            conversationIds,
+          }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isExecuting: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isExecuting: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({
+        data: { payload: macrosList[0] },
+      });
+      await actions.update({ commit }, macrosList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isUpdating: true }],
+        [types.default.EDIT_MACRO, macrosList[0]],
+        [types.default.SET_MACROS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.update({ commit }, macrosList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isUpdating: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: macrosList[0] });
+      await actions.delete({ commit }, macrosList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_MACRO, macrosList[0].id],
+        [types.default.SET_MACROS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, macrosList[0].id)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_MACROS_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_MACROS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,135 @@
+export default [
+  {
+    id: 22,
+    name: 'Assign billing label and sales team and message user',
+    visibility: 'global',
+    created_by: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@acme.inc',
+      available_name: 'Fayaz Ahmed',
+      name: 'Fayaz Ahmed',
+      role: 'administrator',
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png',
+    },
+    updated_by: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@acme.inc',
+      available_name: 'Fayaz Ahmed',
+      name: 'Fayaz Ahmed',
+      role: 'administrator',
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png',
+    },
+    account_id: 1,
+    actions: [
+      {
+        action_name: 'add_label',
+        action_params: ['sales', 'billing'],
+      },
+      {
+        action_name: 'assign_team',
+        action_params: [1],
+      },
+      {
+        action_name: 'send_message',
+        action_params: [
+          "Thank you for reaching out, we're looking into this on priority and we'll get back to you asap.",
+        ],
+      },
+    ],
+  },
+  {
+    id: 23,
+    name: 'Assign label priority and send email to team',
+    visibility: 'global',
+    created_by: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@acme.inc',
+      available_name: 'Fayaz Ahmed',
+      name: 'Fayaz Ahmed',
+      role: 'administrator',
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png',
+    },
+    updated_by: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@acme.inc',
+      available_name: 'Fayaz Ahmed',
+      name: 'Fayaz Ahmed',
+      role: 'administrator',
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png',
+    },
+    account_id: 1,
+    actions: [
+      {
+        action_name: 'add_label',
+        action_params: ['priority'],
+      },
+      {
+        action_name: 'send_email_to_team',
+        action_params: [
+          {
+            message: 'Hello team,\n\nThis looks important, please take look.',
+            team_ids: [1],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 25,
+    name: 'Webhook',
+    visibility: 'global',
+    created_by: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@acme.inc',
+      available_name: 'Fayaz Ahmed',
+      name: 'Fayaz Ahmed',
+      role: 'administrator',
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png',
+    },
+    updated_by: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@acme.inc',
+      available_name: 'Fayaz Ahmed',
+      name: 'Fayaz Ahmed',
+      role: 'administrator',
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png',
+    },
+    account_id: 1,
+    actions: [
+      {
+        action_name: 'send_webhook_event',
+        action_params: ['https://google.com'],
+      },
+    ],
+  },
+];

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

@@ -0,0 +1,32 @@
+import { getters } from '../../macros';
+import macros from './fixtures';
+describe('#getters', () => {
+  it('getMacros', () => {
+    const state = { records: macros };
+    expect(getters.getMacros(state)).toEqual(macros);
+  });
+
+  it('getMacro', () => {
+    const state = { records: macros };
+    expect(getters.getMacro(state)(22)).toEqual(macros[0]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+        isExecuting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isCreating: false,
+      isUpdating: false,
+      isDeleting: false,
+      isExecuting: false,
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../macros';
+import macros from './fixtures';
+describe('#mutations', () => {
+  describe('#SET_MACROS', () => {
+    it('set macrtos records', () => {
+      const state = { records: [] };
+      mutations[types.SET_MACROS](state, macros);
+      expect(state.records).toEqual(macros);
+    });
+  });
+
+  describe('#ADD_MACRO', () => {
+    it('push newly created macro to the store', () => {
+      const state = { records: [macros[0]] };
+      mutations[types.ADD_MACRO](state, macros[1]);
+      expect(state.records).toEqual([macros[0], macros[1]]);
+    });
+  });
+
+  describe('#EDIT_MACRO', () => {
+    it('update macro record', () => {
+      const state = { records: [macros[0]] };
+      mutations[types.EDIT_MACRO](state, macros[0]);
+      expect(state.records[0].name).toEqual(
+        'Assign billing label and sales team and message user'
+      );
+    });
+  });
+
+  describe('#DELETE_MACRO', () => {
+    it('delete macro record', () => {
+      const state = { records: [macros[0]] };
+      mutations[types.DELETE_MACRO](state, 22);
+      expect(state.records).toEqual([]);
+    });
+  });
+});