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/helpCenterArticles/specs/action.spec.js

@@ -0,0 +1,282 @@
+import axios from 'axios';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
+import * as types from '../../../mutation-types';
+import { actions } from '../actions';
+
+vi.mock('dashboard/helper/uploadHelper');
+
+const articleList = [
+  {
+    id: 1,
+    category_id: 1,
+    title: 'Documents are required to complete KYC',
+  },
+];
+
+const camelCasedArticle = {
+  id: 1,
+  categoryId: 1,
+  title: 'Documents are required to complete KYC',
+};
+
+const commit = vi.fn();
+const dispatch = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+describe('#actions', () => {
+  describe('#index', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          payload: articleList,
+          meta: {
+            current_page: '1',
+            articles_count: 5,
+          },
+        },
+      });
+      await actions.index(
+        { commit },
+        { pageNumber: 1, portalSlug: 'test', locale: 'en' }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isFetching: true }],
+        [types.default.CLEAR_ARTICLES],
+        [
+          types.default.ADD_MANY_ARTICLES,
+          [
+            {
+              id: 1,
+              categoryId: 1,
+              title: 'Documents are required to complete KYC',
+            },
+          ],
+        ],
+        [
+          types.default.SET_ARTICLES_META,
+          { currentPage: '1', articlesCount: 5 },
+        ],
+        [types.default.ADD_MANY_ARTICLES_ID, [1]],
+        [types.default.SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.index(
+          { commit },
+          { pageNumber: 1, portalSlug: 'test', locale: 'en' }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isFetching: true }],
+        [types.default.SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: { payload: camelCasedArticle } });
+      await actions.create({ commit, dispatch }, camelCasedArticle);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_ARTICLE, camelCasedArticle],
+        [types.default.ADD_ARTICLE_ID, 1],
+        [types.default.ADD_ARTICLE_FLAG, 1],
+        [types.default.SET_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.create({ commit }, articleList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isCreating: true }],
+        [types.default.SET_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: { payload: camelCasedArticle } });
+      await actions.update(
+        { commit },
+        {
+          portalSlug: 'room-rental',
+          articleId: 1,
+          title: 'Documents are required to complete KYC',
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: true }, articleId: 1 },
+        ],
+        [types.default.UPDATE_ARTICLE, camelCasedArticle],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: false }, articleId: 1 },
+        ],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.update(
+          { commit },
+          {
+            portalSlug: 'room-rental',
+            articleId: 1,
+            title: 'Documents are required to complete KYC',
+          }
+        )
+      ).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: true }, articleId: 1 },
+        ],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: false }, articleId: 1 },
+        ],
+      ]);
+    });
+  });
+
+  describe('#updateArticleMeta', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          payload: articleList,
+          meta: {
+            all_articles_count: 56,
+            archived_articles_count: 7,
+            articles_count: 56,
+            current_page: '1', // This is not needed, it cause pagination issues.
+            draft_articles_count: 24,
+            mine_articles_count: 44,
+            published_count: 25,
+          },
+        },
+      });
+      await actions.updateArticleMeta(
+        { commit },
+        { pageNumber: 1, portalSlug: 'test', locale: 'en' }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.SET_ARTICLES_META,
+          {
+            allArticlesCount: 56,
+            archivedArticlesCount: 7,
+            articlesCount: 56,
+            draftArticlesCount: 24,
+            mineArticlesCount: 44,
+            publishedCount: 25,
+          },
+        ],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: articleList[0] });
+      await actions.delete(
+        { commit },
+        { portalSlug: 'test', articleId: articleList[0].id }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: true }, articleId: 1 },
+        ],
+        [types.default.REMOVE_ARTICLE, articleList[0].id],
+        [types.default.REMOVE_ARTICLE_ID, articleList[0].id],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: false }, articleId: 1 },
+        ],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete(
+          { commit },
+          { portalSlug: 'test', articleId: articleList[0].id }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: true }, articleId: 1 },
+        ],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: false }, articleId: 1 },
+        ],
+      ]);
+    });
+  });
+
+  describe('attachImage', () => {
+    it('should upload the file and return the fileUrl', async () => {
+      const mockFile = new Blob(['test'], { type: 'image/png' });
+      mockFile.name = 'test.png';
+
+      const mockFileUrl = 'https://test.com/test.png';
+      uploadFile.mockResolvedValueOnce({ fileUrl: mockFileUrl });
+
+      const result = await actions.attachImage({}, { file: mockFile });
+
+      expect(uploadFile).toHaveBeenCalledWith(mockFile);
+      expect(result).toBe(mockFileUrl);
+    });
+
+    it('should throw an error if the upload fails', async () => {
+      const mockFile = new Blob(['test'], { type: 'image/png' });
+      mockFile.name = 'test.png';
+
+      const mockError = new Error('Upload failed');
+      uploadFile.mockRejectedValueOnce(mockError);
+
+      await expect(actions.attachImage({}, { file: mockFile })).rejects.toThrow(
+        'Upload failed'
+      );
+    });
+  });
+
+  describe('uploadExternalImage', () => {
+    it('should upload the image from external URL and return the fileUrl', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockFileUrl = 'https://uploaded.example.com/image.jpg';
+      uploadExternalImage.mockResolvedValueOnce({ fileUrl: mockFileUrl });
+
+      // When
+      const result = await actions.uploadExternalImage({}, { url: mockUrl });
+
+      // Then
+      expect(uploadExternalImage).toHaveBeenCalledWith(mockUrl);
+      expect(result).toBe(mockFileUrl);
+    });
+
+    it('should throw an error if the upload fails', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockError = new Error('Upload failed');
+      uploadExternalImage.mockRejectedValueOnce(mockError);
+
+      await expect(
+        actions.uploadExternalImage({}, { url: mockUrl })
+      ).rejects.toThrow('Upload failed');
+    });
+  });
+});

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

@@ -0,0 +1,57 @@
+export default {
+  meta: {
+    count: 123,
+    currentPage: 2,
+  },
+  articles: {
+    byId: {
+      1: {
+        id: 1,
+        category_id: 1,
+        title: 'Documents are required to complete KYC',
+        content:
+          'The submission of the following documents is mandatory to complete registration, ID proof - PAN Card, Address proof',
+        description: 'Documents are required to complete KYC',
+        status: 'draft',
+        account_id: 1,
+        views: 122,
+        author: {
+          id: 5,
+          account_id: 1,
+          email: 'tom@furrent.com',
+          available_name: 'Tom',
+          name: 'Tom Jose',
+        },
+      },
+      2: {
+        id: 2,
+        category_id: 1,
+        title:
+          'How do I change my registered email address and/or phone number?',
+        content:
+          'Kindly login to your Furrent account to chat with us or submit a request and we would be glad to help you update the contact details on your account.',
+        description: 'Change my registered email address and/or phone number',
+        status: 'draft',
+        account_id: 1,
+        views: 121,
+        author: {
+          id: 5,
+          account_id: 1,
+          email: 'tom@furrent.com',
+          available_name: 'Tom',
+          name: 'Tom Jose',
+        },
+      },
+    },
+    allIds: [1, 2],
+    uiFlags: {
+      byId: {
+        1: { isFetching: false, isUpdating: true, isDeleting: false },
+      },
+    },
+  },
+  uiFlags: {
+    allFetched: false,
+    isFetching: true,
+  },
+};

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

@@ -0,0 +1,44 @@
+import { getters } from '../getters';
+import articles from './fixtures';
+describe('#getters', () => {
+  let state = {};
+  beforeEach(() => {
+    state = articles;
+  });
+  it('uiFlags', () => {
+    expect(getters.uiFlags(state)(1)).toEqual({
+      isFetching: false,
+      isUpdating: true,
+      isDeleting: false,
+    });
+  });
+
+  it('articleById', () => {
+    expect(getters.articleById(state)(1)).toEqual({
+      id: 1,
+      category_id: 1,
+      title: 'Documents are required to complete KYC',
+      content:
+        'The submission of the following documents is mandatory to complete registration, ID proof - PAN Card, Address proof',
+      description: 'Documents are required to complete KYC',
+      status: 'draft',
+      account_id: 1,
+      views: 122,
+      author: {
+        id: 5,
+        account_id: 1,
+        email: 'tom@furrent.com',
+        available_name: 'Tom',
+        name: 'Tom Jose',
+      },
+    });
+  });
+
+  it('articleStatus', () => {
+    expect(getters.articleStatus(state)(1)).toEqual('draft');
+  });
+
+  it('isFetchingArticles', () => {
+    expect(getters.isFetching(state)).toEqual(true);
+  });
+});

app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js

@@ -0,0 +1,157 @@
+import { mutations } from '../mutations';
+import article from './fixtures';
+import types from '../../../mutation-types';
+
+describe('#mutations', () => {
+  let state = {};
+  beforeEach(() => {
+    state = article;
+  });
+
+  describe('#SET_UI_FLAG', () => {
+    it('It returns default flags if empty object passed', () => {
+      mutations[types.SET_UI_FLAG](state, {});
+      expect(state.uiFlags).toEqual({
+        allFetched: false,
+        isFetching: true,
+      });
+    });
+    it('Update flags when flag passed as parameters', () => {
+      mutations[types.SET_UI_FLAG](state, { isFetching: true });
+      expect(state.uiFlags).toEqual({
+        allFetched: false,
+        isFetching: true,
+      });
+    });
+  });
+
+  describe('#ADD_ARTICLE', () => {
+    it('add valid article to state', () => {
+      mutations[types.ADD_ARTICLE](state, {
+        id: 3,
+        category_id: 1,
+        title:
+          'How do I change my registered email address and/or phone number?',
+      });
+      expect(state.articles.byId[3]).toEqual({
+        id: 3,
+        category_id: 1,
+        title:
+          'How do I change my registered email address and/or phone number?',
+      });
+    });
+    it('does not add article with empty data passed', () => {
+      mutations[types.ADD_ARTICLE](state, {});
+      expect(state).toEqual(article);
+    });
+  });
+
+  describe('#ARTICLES_META', () => {
+    beforeEach(() => {
+      state.meta = {};
+    });
+
+    it('add meta to state', () => {
+      mutations[types.SET_ARTICLES_META](state, {
+        articles_count: 3,
+        current_page: 1,
+      });
+      expect(state.meta).toEqual({
+        articles_count: 3,
+        current_page: 1,
+      });
+    });
+
+    it('preserves existing meta values and updates only provided keys', () => {
+      state.meta = {
+        all_articles_count: 56,
+        archived_articles_count: 5,
+        articles_count: 56,
+        current_page: '1',
+        draft_articles_count: 26,
+        published_count: 25,
+      };
+
+      mutations[types.SET_ARTICLES_META](state, {
+        articles_count: 3,
+        draft_articles_count: 27,
+      });
+
+      expect(state.meta).toEqual({
+        all_articles_count: 56,
+        archived_articles_count: 5,
+        current_page: '1',
+        articles_count: 3,
+        draft_articles_count: 27,
+        published_count: 25,
+      });
+    });
+  });
+
+  describe('#ADD_ARTICLE_ID', () => {
+    it('add valid article id to state', () => {
+      mutations[types.ADD_ARTICLE_ID](state, 3);
+      expect(state.articles.allIds).toEqual([1, 2, 3]);
+    });
+    it('Does not invalid article with empty data passed', () => {
+      mutations[types.ADD_ARTICLE_ID](state, {});
+      expect(state).toEqual(article);
+    });
+  });
+
+  describe('#UPDATE_ARTICLE', () => {
+    it('does not update if empty object is passed', () => {
+      mutations[types.UPDATE_ARTICLE](state, {});
+      expect(state).toEqual(article);
+    });
+
+    it('does not update if object id is not present in the state', () => {
+      mutations[types.UPDATE_ARTICLE](state, { id: 5 });
+      expect(state).toEqual(article);
+    });
+
+    it('updates if object with id is already present in the state', () => {
+      const updatedArticle = {
+        id: 2,
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].title).toEqual('Updated Title');
+      expect(state.articles.byId[2].content).toEqual('Updated Content');
+    });
+
+    it('preserves the original position when updating an article', () => {
+      const originalPosition = state.articles.byId[2].position;
+      const updatedArticle = {
+        id: 2,
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].position).toEqual(originalPosition);
+    });
+  });
+
+  describe('#REMOVE_ARTICLE', () => {
+    it('does not remove object entry if no id is passed', () => {
+      mutations[types.REMOVE_ARTICLE](state, undefined);
+      expect(state).toEqual({ ...article });
+    });
+    it('removes article if valid article id passed', () => {
+      mutations[types.REMOVE_ARTICLE](state, 2);
+      expect(state.articles.byId[2]).toEqual(undefined);
+    });
+  });
+
+  describe('#CLEAR_ARTICLES', () => {
+    it('clears articles', () => {
+      mutations[types.CLEAR_ARTICLES](state);
+      expect(state.articles.allIds).toEqual([]);
+      expect(state.articles.byId).toEqual({});
+      expect(state.articles.uiFlags).toEqual({
+        byId: {},
+      });
+    });
+  });
+});