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

@@ -0,0 +1,93 @@
+import axios from 'axios';
+import { actions } from '../../campaigns';
+import * as types from '../../../mutation-types';
+import campaignList 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: campaignList });
+      await actions.get({ commit }, { inboxId: 23 });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CAMPAIGNS, campaignList],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.get({ commit }, { inboxId: 23 });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: campaignList[0] });
+      await actions.create({ commit }, campaignList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_CAMPAIGN, campaignList[0]],
+        [types.default.SET_CAMPAIGN_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_CAMPAIGN_UI_FLAG, { isCreating: true }],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: campaignList[0] });
+      await actions.update({ commit }, campaignList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isUpdating: true }],
+        [types.default.EDIT_CAMPAIGN, campaignList[0]],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.update({ commit }, campaignList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isUpdating: true }],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: campaignList[0] });
+      await actions.delete({ commit }, campaignList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_CAMPAIGN, campaignList[0].id],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, campaignList[0].id)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,100 @@
+export default [
+  {
+    id: 1,
+    title: 'Welcome',
+    description: null,
+    account_id: 1,
+    campaign_type: 'ongoing',
+    message: 'Hey, What brings you today',
+    enabled: true,
+    trigger_rules: {
+      url: 'https://github.com',
+      time_on_page: 10,
+    },
+    inbox: {
+      id: 1,
+      channel_type: 'Channel::WebWidget',
+      name: 'Web Widget',
+    },
+    created_at: '2021-05-03T04:53:36.354Z',
+    updated_at: '2021-05-03T04:53:36.354Z',
+  },
+  {
+    id: 2,
+    title: 'Onboarding Campaign',
+    description: null,
+    account_id: 1,
+    campaign_type: 'one_off',
+    trigger_rules: {
+      url: 'https://chatwoot.com',
+      time_on_page: '20',
+    },
+    inbox: {
+      id: 2,
+      channel_type: 'Channel::TwilioSms',
+      name: 'Twilio SMS',
+    },
+    created_at: '2021-05-03T08:15:35.828Z',
+    updated_at: '2021-05-03T08:15:35.828Z',
+  },
+  {
+    id: 3,
+    title: 'Thanks',
+    description: null,
+    account_id: 1,
+    campaign_type: 'ongoing',
+    message: 'Thanks for coming to the show. How may I help you?',
+    enabled: false,
+    trigger_rules: {
+      url: 'https://noshow.com',
+      time_on_page: 10,
+    },
+    inbox: {
+      id: 3,
+      channel_type: 'Channel::WebWidget',
+      name: 'Web Widget 2',
+    },
+    created_at: '2021-05-03T10:22:51.025Z',
+    updated_at: '2021-05-03T10:22:51.025Z',
+  },
+  {
+    id: 4,
+    title: 'WhatsApp Campaign',
+    description: null,
+    account_id: 1,
+    campaign_type: 'one_off',
+    message: 'Hello {{name}}, your order is ready!',
+    enabled: true,
+    trigger_rules: {},
+    inbox: {
+      id: 4,
+      channel_type: 'Channel::Whatsapp',
+      name: 'WhatsApp Business',
+    },
+    template_params: {
+      name: 'order_ready',
+      namespace: 'business_namespace',
+      language: 'en_US',
+      processed_params: { name: 'John' },
+    },
+    created_at: '2021-05-03T12:15:35.828Z',
+    updated_at: '2021-05-03T12:15:35.828Z',
+  },
+  {
+    id: 5,
+    title: 'SMS Promotion',
+    description: null,
+    account_id: 1,
+    campaign_type: 'one_off',
+    message: 'Get 20% off your next order!',
+    enabled: true,
+    trigger_rules: {},
+    inbox: {
+      id: 5,
+      channel_type: 'Channel::Sms',
+      name: 'SMS Channel',
+    },
+    created_at: '2021-05-03T14:15:35.828Z',
+    updated_at: '2021-05-03T14:15:35.828Z',
+  },
+];

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

@@ -0,0 +1,88 @@
+import { getters } from '../../campaigns';
+import campaigns from './fixtures';
+
+describe('#getters', () => {
+  it('get ongoing campaigns', () => {
+    const state = { records: campaigns };
+    expect(getters.getCampaigns(state)('ongoing')).toEqual([
+      campaigns[0],
+      campaigns[2],
+    ]);
+  });
+
+  it('get one_off campaigns', () => {
+    const state = { records: campaigns };
+    expect(getters.getCampaigns(state)('one_off')).toEqual([
+      campaigns[1],
+      campaigns[3],
+      campaigns[4],
+    ]);
+  });
+
+  it('get campaigns by channel type', () => {
+    const state = { records: campaigns };
+    expect(
+      getters.getCampaigns(state)('one_off', ['Channel::Whatsapp'])
+    ).toEqual([campaigns[3]]);
+  });
+
+  it('get campaigns by multiple channel types', () => {
+    const state = { records: campaigns };
+    expect(
+      getters.getCampaigns(state)('one_off', [
+        'Channel::TwilioSms',
+        'Channel::Sms',
+      ])
+    ).toEqual([campaigns[1], campaigns[4]]);
+  });
+
+  it('get SMS campaigns', () => {
+    const state = { records: campaigns };
+    const mockGetters = {
+      getCampaigns: getters.getCampaigns(state),
+    };
+    expect(getters.getSMSCampaigns(state, mockGetters)).toEqual([
+      campaigns[1],
+      campaigns[4],
+    ]);
+  });
+
+  it('get WhatsApp campaigns', () => {
+    const state = { records: campaigns };
+    const mockGetters = {
+      getCampaigns: getters.getCampaigns(state),
+    };
+    expect(getters.getWhatsAppCampaigns(state, mockGetters)).toEqual([
+      campaigns[3],
+    ]);
+  });
+
+  it('get Live Chat campaigns', () => {
+    const state = { records: campaigns };
+    const mockGetters = {
+      getCampaigns: getters.getCampaigns(state),
+    };
+    expect(getters.getLiveChatCampaigns(state, mockGetters)).toEqual([
+      campaigns[0],
+      campaigns[2],
+    ]);
+  });
+
+  it('get all campaigns', () => {
+    const state = { records: campaigns };
+    expect(getters.getAllCampaigns(state)).toEqual(campaigns);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isCreating: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isCreating: false,
+    });
+  });
+});

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

@@ -0,0 +1,41 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../campaigns';
+import campaigns from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_CAMPAIGNS', () => {
+    it('set campaigns records', () => {
+      const state = { records: [] };
+      mutations[types.SET_CAMPAIGNS](state, campaigns);
+      expect(state.records).toEqual(campaigns);
+    });
+  });
+
+  describe('#ADD_CAMPAIGN', () => {
+    it('push newly created campaigns to the store', () => {
+      const state = { records: [campaigns[0]] };
+      mutations[types.ADD_CAMPAIGN](state, campaigns[1]);
+      expect(state.records).toEqual([campaigns[0], campaigns[1]]);
+    });
+  });
+  describe('#EDIT_CAMPAIGN', () => {
+    it('update campaign record', () => {
+      const state = { records: [campaigns[0]] };
+      mutations[types.EDIT_CAMPAIGN](state, {
+        id: 1,
+        title: 'Welcome',
+        account_id: 1,
+        message: 'Hey, What brings you today',
+      });
+      expect(state.records[0].message).toEqual('Hey, What brings you today');
+    });
+  });
+
+  describe('#DELETE_LABEL', () => {
+    it('delete campaign record', () => {
+      const state = { records: [campaigns[0]] };
+      mutations[types.DELETE_CAMPAIGN](state, 1);
+      expect(state.records).toEqual([]);
+    });
+  });
+});