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

@@ -0,0 +1,441 @@
+import axios from 'axios';
+import Contacts from '../../contacts';
+import types from '../../../mutation-types';
+import contactList from './fixtures';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from '../../../../../shared/helpers/CustomErrors';
+import { filterApiResponse } from './filterApiResponse';
+
+const { actions } = Contacts;
+
+const filterQueryData = {
+  payload: [
+    {
+      attribute_key: 'email',
+      filter_operator: 'contains',
+      values: ['fayaz'],
+      query_operator: null,
+    },
+  ],
+};
+
+const commit = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: contactList, meta: { count: 100, current_page: 1 } },
+      });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetching: true }],
+        [types.CLEAR_CONTACTS],
+        [types.SET_CONTACTS, contactList],
+        [types.SET_CONTACT_META, { count: 100, current_page: 1 }],
+        [types.SET_CONTACT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct mutations if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetching: true }],
+        [types.SET_CONTACT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#show', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.get.mockResolvedValue({ data: { payload: contactList[0] } });
+      await actions.show({ commit }, { id: contactList[0].id });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
+        [types.SET_CONTACT_ITEM, contactList[0]],
+        [types.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+    it('sends correct mutations if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.show({ commit }, { id: contactList[0].id });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
+        [types.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+  });
+
+  describe('#active', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: contactList, meta: { count: 100, current_page: 1 } },
+      });
+      await actions.active({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetching: true }],
+        [types.CLEAR_CONTACTS],
+        [types.SET_CONTACTS, contactList],
+        [types.SET_CONTACT_META, { count: 100, current_page: 1 }],
+        [types.SET_CONTACT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct mutations if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.active({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetching: true }],
+        [types.SET_CONTACT_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: { payload: contactList[0] } });
+      await actions.update(
+        { commit },
+        {
+          id: contactList[0].id,
+          contactParams: contactList[0],
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.EDIT_CONTACT, contactList[0]],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.update({ commit }, contactList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+
+    it('sends correct actions if duplicate contact is found', async () => {
+      axios.patch.mockRejectedValue({
+        response: {
+          status: 422,
+          data: {
+            message: 'Incorrect header',
+            attributes: ['email'],
+          },
+        },
+      });
+      await expect(
+        actions.update(
+          { commit },
+          {
+            id: contactList[0].id,
+            contactParams: contactList[0],
+          }
+        )
+      ).rejects.toThrow(DuplicateContactException);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.post.mockResolvedValue({
+        data: { payload: { contact: contactList[0] } },
+      });
+      await actions.create(
+        { commit },
+        {
+          contactParams: contactList[0],
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isCreating: true }],
+        [types.SET_CONTACT_ITEM, contactList[0]],
+        [types.SET_CONTACT_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.create({ commit }, contactList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isCreating: true }],
+        [types.SET_CONTACT_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+
+    it('sends correct actions if email is already present', async () => {
+      axios.post.mockRejectedValue({
+        response: {
+          data: {
+            message: 'Email exists already',
+          },
+        },
+      });
+      await expect(
+        actions.create(
+          { commit },
+          {
+            contactParams: contactList[0],
+          }
+        )
+      ).rejects.toThrow(ExceptionWithMessage);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isCreating: true }],
+        [types.SET_CONTACT_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.delete.mockResolvedValue();
+      await actions.delete({ commit }, contactList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isDeleting: true }],
+        [types.SET_CONTACT_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, contactList[0].id)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isDeleting: true }],
+        [types.SET_CONTACT_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('#setContact', () => {
+    it('returns correct mutations', () => {
+      const data = { id: 1, name: 'john doe', availability_status: 'online' };
+      actions.setContact({ commit }, data);
+      expect(commit.mock.calls).toEqual([[types.SET_CONTACT_ITEM, data]]);
+    });
+  });
+
+  describe('#merge', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.post.mockResolvedValue({
+        data: contactList[0],
+      });
+      await actions.merge({ commit }, { childId: 0, parentId: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isMerging: true }],
+        [types.SET_CONTACT_ITEM, contactList[0]],
+        [types.SET_CONTACT_UI_FLAG, { isMerging: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.merge({ commit }, { childId: 0, parentId: 1 })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isMerging: true }],
+        [types.SET_CONTACT_UI_FLAG, { isMerging: false }],
+      ]);
+    });
+  });
+
+  describe('#deleteContactThroughConversations', () => {
+    it('returns correct mutations', () => {
+      actions.deleteContactThroughConversations({ commit }, contactList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.DELETE_CONTACT, contactList[0].id],
+        [types.CLEAR_CONTACT_CONVERSATIONS, contactList[0].id, { root: true }],
+        [
+          `contactConversations/${types.DELETE_CONTACT_CONVERSATION}`,
+          contactList[0].id,
+          { root: true },
+        ],
+      ]);
+    });
+  });
+
+  describe('#updateContact', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: { payload: contactList[0] } });
+      await actions.updateContact({ commit }, contactList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.EDIT_CONTACT, contactList[0]],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.update({ commit }, contactList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+  describe('#deleteCustomAttributes', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.post.mockResolvedValue({ data: { payload: contactList[0] } });
+      await actions.deleteCustomAttributes(
+        { commit },
+        { id: 1, customAttributes: ['cloud-customer'] }
+      );
+      expect(commit.mock.calls).toEqual([[types.EDIT_CONTACT, contactList[0]]]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.deleteCustomAttributes(
+          { commit },
+          { id: 1, customAttributes: ['cloud-customer'] }
+        )
+      ).rejects.toThrow(Error);
+    });
+  });
+
+  describe('#fetchFilteredContacts', () => {
+    it('fetches filtered conversations with a mock commit', async () => {
+      axios.post.mockResolvedValue({
+        data: filterApiResponse,
+      });
+      await actions.filter({ commit }, filterQueryData);
+      expect(commit).toHaveBeenCalledTimes(5);
+      expect(commit.mock.calls).toEqual([
+        ['SET_CONTACT_UI_FLAG', { isFetching: true }],
+        ['CLEAR_CONTACTS'],
+        ['SET_CONTACTS', filterApiResponse.payload],
+        ['SET_CONTACT_META', filterApiResponse.meta],
+        ['SET_CONTACT_UI_FLAG', { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#setContactsFilter', () => {
+    it('commits the correct mutation and sets filter state', () => {
+      const filters = [
+        {
+          attribute_key: 'email',
+          filter_operator: 'contains',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ];
+      actions.setContactFilters({ commit }, filters);
+      expect(commit.mock.calls).toEqual([[types.SET_CONTACT_FILTERS, filters]]);
+    });
+  });
+
+  describe('#clearContactFilters', () => {
+    it('commits the correct mutation and clears filter state', () => {
+      actions.clearContactFilters({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_CONTACT_FILTERS]]);
+    });
+  });
+
+  describe('#deleteAvatar', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: { payload: contactList[0] } });
+      await actions.deleteAvatar({ commit }, contactList[0].id);
+      expect(commit.mock.calls).toEqual([[types.EDIT_CONTACT, contactList[0]]]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.deleteAvatar({ commit }, contactList[0].id)
+      ).rejects.toThrow(Error);
+    });
+  });
+
+  describe('#initiateCall', () => {
+    const contactId = 123;
+    const inboxId = 456;
+
+    it('sends correct mutations if API is success', async () => {
+      const mockResponse = {
+        data: {
+          conversation_id: 789,
+          status: 'initiated',
+        },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+
+      const result = await actions.initiateCall(
+        { commit },
+        { contactId, inboxId }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+      expect(result).toEqual(mockResponse.data);
+    });
+
+    it('sends correct actions if API returns error with message', async () => {
+      const errorMessage = 'Failed to initiate call';
+      axios.post.mockRejectedValue({
+        response: {
+          data: {
+            message: errorMessage,
+          },
+        },
+      });
+
+      await expect(
+        actions.initiateCall({ commit }, { contactId, inboxId })
+      ).rejects.toThrow(ExceptionWithMessage);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+    });
+
+    it('sends correct actions if API returns error with error field', async () => {
+      const errorMessage = 'Call initiation error';
+      axios.post.mockRejectedValue({
+        response: {
+          data: {
+            error: errorMessage,
+          },
+        },
+      });
+
+      await expect(
+        actions.initiateCall({ commit }, { contactId, inboxId })
+      ).rejects.toThrow(ExceptionWithMessage);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+    });
+
+    it('sends correct actions if API returns generic error', async () => {
+      axios.post.mockRejectedValue({ message: 'Network error' });
+
+      await expect(
+        actions.initiateCall({ commit }, { contactId, inboxId })
+      ).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/contacts/filterApiResponse.js

@@ -0,0 +1,38 @@
+export const filterApiResponse = {
+  meta: {
+    count: {
+      all_count: 2,
+    },
+    current_page: '1',
+  },
+  payload: [
+    {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: 'fayaz@g.com',
+      id: 8,
+      name: 'fayaz',
+      phone_number: null,
+      identifier: null,
+      thumbnail:
+        'https://www.gravatar.com/avatar/f2e86d3a78353cdf51002f44cf6ea846?d=404',
+      custom_attributes: {},
+      conversations_count: 1,
+      last_activity_at: 1631081845,
+    },
+    {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: 'fayaz@gma.com',
+      id: 9,
+      name: 'fayaz',
+      phone_number: null,
+      identifier: null,
+      thumbnail:
+        'https://www.gravatar.com/avatar/792af86e3ad4591552e1025a6415baa6?d=404',
+      custom_attributes: {},
+      conversations_count: 1,
+      last_activity_at: 1631614585,
+    },
+  ],
+};

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

@@ -0,0 +1,30 @@
+export default [
+  {
+    id: 1,
+    name: 'Contact 1',
+    email: 'contact1@chatwoot.com',
+    phone_number: '9000000001',
+    thumbnail: 'contact1.png',
+  },
+  {
+    id: 2,
+    name: 'Contact 2',
+    email: 'contact2@chatwoot.com',
+    phone_number: '9000000002',
+    thumbnail: 'contact2.png',
+  },
+  {
+    id: 3,
+    name: 'Contact 3',
+    email: 'contact3@chatwoot.com',
+    phone_number: '9000000003',
+    thumbnail: 'contact3.png',
+  },
+  {
+    id: 4,
+    name: 'Contact 4',
+    email: 'contact4@chatwoot.com',
+    phone_number: '9000000004',
+    thumbnail: 'contact4.png',
+  },
+];

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

@@ -0,0 +1,53 @@
+import Contacts from '../../contacts';
+import contactList from './fixtures';
+
+const { getters } = Contacts;
+
+describe('#getters', () => {
+  it('getContacts', () => {
+    const state = {
+      records: { 1: contactList[0], 3: contactList[2] },
+      sortOrder: [3, 1],
+    };
+    expect(getters.getContacts(state)).toEqual([
+      contactList[2],
+      contactList[0],
+    ]);
+  });
+
+  it('getContact', () => {
+    const state = {
+      records: { 2: contactList[1] },
+    };
+    expect(getters.getContact(state)(2)).toEqual(contactList[1]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isFetchingItem: true,
+        isUpdating: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isFetchingItem: true,
+      isUpdating: false,
+    });
+  });
+  it('getAppliedContactFilters', () => {
+    const filters = [
+      {
+        attribute_key: 'email',
+        filter_operator: 'contains',
+        values: 'a',
+        query_operator: null,
+      },
+    ];
+    const state = {
+      appliedFilters: filters,
+    };
+    expect(getters.getAppliedContactFilters(state)).toEqual(filters);
+  });
+});

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

@@ -0,0 +1,105 @@
+import types from '../../../mutation-types';
+import Contacts from '../../contacts';
+const { mutations } = Contacts;
+
+describe('#mutations', () => {
+  describe('#SET_CONTACTS', () => {
+    it('set contact records', () => {
+      const state = { records: {} };
+      mutations[types.SET_CONTACTS](state, [
+        { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
+        { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+      ]);
+      expect(state.records).toEqual({
+        1: {
+          id: 1,
+          name: 'contact1',
+          email: 'contact1@chatwoot.com',
+        },
+        2: {
+          id: 2,
+          name: 'contact2',
+          email: 'contact2@chatwoot.com',
+        },
+      });
+      expect(state.sortOrder).toEqual([2, 1]);
+    });
+  });
+
+  describe('#SET_CONTACT_ITEM', () => {
+    it('push contact data to the store', () => {
+      const state = {
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
+        sortOrder: [1],
+      };
+      mutations[types.SET_CONTACT_ITEM](state, {
+        id: 2,
+        name: 'contact2',
+        email: 'contact2@chatwoot.com',
+      });
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        2: { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
+      expect(state.sortOrder).toEqual([1, 2]);
+    });
+  });
+
+  describe('#EDIT_CONTACT', () => {
+    it('update contact', () => {
+      const state = {
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
+      };
+      mutations[types.EDIT_CONTACT](state, {
+        id: 1,
+        name: 'contact2',
+        email: 'contact2@chatwoot.com',
+      });
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
+    });
+  });
+
+  describe('#SET_CONTACT_FILTERS', () => {
+    it('set contact filter', () => {
+      const appliedFilters = [
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ];
+      mutations[types.SET_CONTACT_FILTERS](appliedFilters);
+      expect(appliedFilters).toEqual([
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ]);
+    });
+  });
+  describe('#CLEAR_CONTACT_FILTERS', () => {
+    it('clears applied contact filters', () => {
+      const state = {
+        appliedFilters: [
+          {
+            attribute_key: 'name',
+            filter_operator: 'equal_to',
+            values: ['fayaz'],
+            query_operator: 'and',
+          },
+        ],
+      };
+      mutations[types.CLEAR_CONTACT_FILTERS](state);
+      expect(state.appliedFilters).toEqual([]);
+    });
+  });
+});