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

@@ -0,0 +1,258 @@
+import axios from 'axios';
+import { actions } from '../../inboxes';
+import * as types from '../../../mutation-types';
+import inboxList 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 () => {
+      const mockedGet = vi.fn(url => {
+        if (url === '/api/v1/inboxes') {
+          return Promise.resolve({ data: { payload: inboxList } });
+        }
+        if (url === '/api/v1/accounts//cache_keys') {
+          return Promise.resolve({ data: { cache_keys: { inboxes: 0 } } });
+        }
+        // Return default value or throw an error for unexpected requests
+        return Promise.reject(new Error('Unexpected request: ' + url));
+      });
+
+      axios.get = mockedGet;
+
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isFetching: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isFetching: false }],
+        [types.default.SET_INBOXES, inboxList],
+      ]);
+    });
+    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_INBOXES_UI_FLAG, { isFetching: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#createWebsiteChannel', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: inboxList[0] });
+      await actions.createWebsiteChannel({ commit }, inboxList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_INBOXES, inboxList[0]],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.createWebsiteChannel({ commit })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#createVoiceChannel', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: inboxList[0] });
+      await actions.createVoiceChannel({ commit }, inboxList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_INBOXES, inboxList[0]],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.createVoiceChannel({ commit })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#createFBChannel', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: inboxList[0] });
+      await actions.createFBChannel({ commit }, inboxList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_INBOXES, inboxList[0]],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.createFBChannel({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#updateInbox', () => {
+    it('sends correct actions if API is success', async () => {
+      const updatedInbox = inboxList[0];
+      updatedInbox.enable_auto_assignment = false;
+
+      axios.patch.mockResolvedValue({ data: updatedInbox });
+      await actions.updateInbox(
+        { commit },
+        { id: updatedInbox.id, inbox: { enable_auto_assignment: false } }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
+        [types.default.EDIT_INBOXES, updatedInbox],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateInbox(
+          { commit },
+          { id: inboxList[0].id, inbox: { enable_auto_assignment: false } }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#updateInboxIMAP', () => {
+    it('sends correct actions if API is success', async () => {
+      const updatedInbox = inboxList[0];
+
+      axios.patch.mockResolvedValue({ data: updatedInbox });
+      await actions.updateInboxIMAP(
+        { commit },
+        { id: updatedInbox.id, inbox: { channel: { imap_enabled: true } } }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: true }],
+        [types.default.EDIT_INBOXES, updatedInbox],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateInboxIMAP(
+          { commit },
+          { id: inboxList[0].id, inbox: { channel: { imap_enabled: true } } }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false }],
+      ]);
+    });
+  });
+
+  describe('#updateInboxSMTP', () => {
+    it('sends correct actions if API is success', async () => {
+      const updatedInbox = inboxList[0];
+
+      axios.patch.mockResolvedValue({ data: updatedInbox });
+      await actions.updateInboxSMTP(
+        { commit },
+        { id: updatedInbox.id, inbox: { channel: { smtp_enabled: true } } }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: true }],
+        [types.default.EDIT_INBOXES, updatedInbox],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateInboxSMTP(
+          { commit },
+          { id: inboxList[0].id, inbox: { channel: { smtp_enabled: true } } }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: inboxList[0] });
+      await actions.delete({ commit }, inboxList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_INBOXES, inboxList[0].id],
+        [types.default.SET_INBOXES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.delete({ commit }, inboxList[0].id)).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('#deleteInboxAvatar', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue();
+      await expect(
+        actions.deleteInboxAvatar({}, inboxList[0].id)
+      ).resolves.toBe();
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.deleteInboxAvatar({}, inboxList[0].id)
+      ).rejects.toThrow(Error);
+    });
+  });
+
+  describe('#syncTemplates', () => {
+    it('sends correct API call when sync is successful', async () => {
+      axios.post.mockResolvedValue({
+        data: { message: 'Template sync initiated successfully' },
+      });
+
+      await actions.syncTemplates({ commit }, 123);
+
+      expect(axios.post).toHaveBeenCalledWith(
+        '/api/v1/inboxes/123/sync_templates'
+      );
+    });
+
+    it('throws error when API call fails', async () => {
+      const errorMessage =
+        'Template sync is only available for WhatsApp channels';
+      axios.post.mockRejectedValue(new Error(errorMessage));
+
+      await expect(actions.syncTemplates({ commit }, 123)).rejects.toThrow(
+        errorMessage
+      );
+    });
+  });
+});

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

@@ -0,0 +1,82 @@
+export default [
+  {
+    id: 1,
+    channel_id: 1,
+    name: 'Test FacebookPage 1',
+    channel_type: 'Channel::FacebookPage',
+    avatar_url: 'random_image.png',
+    page_id: '12345',
+    widget_color: null,
+    website_token: null,
+    enable_auto_assignment: true,
+    instagram_id: 123456789,
+  },
+  {
+    id: 2,
+    channel_id: 2,
+    name: 'Test Widget 1',
+    channel_type: 'Channel::WebWidget',
+    avatar_url: null,
+    page_id: null,
+    widget_color: '#7B64FF',
+    website_token: 'randomid123',
+    enable_auto_assignment: true,
+  },
+  {
+    id: 3,
+    channel_id: 3,
+    name: 'Test Widget 2',
+    channel_type: 'Channel::WebWidget',
+    avatar_url: null,
+    page_id: null,
+    widget_color: '#68BC00',
+    website_token: 'randomid124',
+    enable_auto_assignment: true,
+  },
+  {
+    id: 4,
+    channel_id: 4,
+    name: 'Test Widget 3',
+    channel_type: 'Channel::WebWidget',
+    avatar_url: null,
+    page_id: null,
+    widget_color: '#68BC00',
+    website_token: 'randomid125',
+    enable_auto_assignment: true,
+  },
+  {
+    id: 5,
+    channel_id: 5,
+    name: 'Test Widget 5',
+    channel_type: 'Channel::TwilioSms',
+    avatar_url: null,
+    medium: 'sms',
+    page_id: null,
+    widget_color: '#68BC00',
+    website_token: 'randomid125',
+    enable_auto_assignment: true,
+  },
+  {
+    id: 6,
+    channel_id: 6,
+    name: 'Test Widget 6',
+    channel_type: 'Channel::Sms',
+    provider: 'default',
+  },
+  {
+    id: 7,
+    channel_id: 7,
+    name: 'Test Instagram 1',
+    channel_type: 'Channel::Instagram',
+    instagram_id: 123456789,
+    provider: 'default',
+  },
+  {
+    id: 8,
+    channel_id: 8,
+    name: 'Test TikTok 1',
+    channel_type: 'Channel::Tiktok',
+    business_id: 123456789,
+    provider: 'default',
+  },
+];

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

@@ -0,0 +1,407 @@
+import { getters } from '../../inboxes';
+import inboxList from './fixtures';
+import { templates } from './templateFixtures';
+
+describe('#getters', () => {
+  it('getInboxes', () => {
+    const state = {
+      records: inboxList,
+    };
+    expect(getters.getInboxes(state)).toEqual(inboxList);
+  });
+
+  it('getWebsiteInboxes', () => {
+    const state = { records: inboxList };
+    expect(getters.getWebsiteInboxes(state).length).toEqual(3);
+  });
+
+  it('getTwilioInboxes', () => {
+    const state = { records: inboxList };
+    expect(getters.getTwilioInboxes(state).length).toEqual(1);
+  });
+
+  it('getSMSInboxes', () => {
+    const state = { records: inboxList };
+    expect(getters.getSMSInboxes(state).length).toEqual(2);
+  });
+
+  it('dialogFlowEnabledInboxes', () => {
+    const state = { records: inboxList };
+    expect(getters.dialogFlowEnabledInboxes(state).length).toEqual(8);
+  });
+
+  it('getInbox', () => {
+    const state = {
+      records: inboxList,
+    };
+    expect(getters.getInbox(state)(1)).toEqual({
+      id: 1,
+      channel_id: 1,
+      name: 'Test FacebookPage 1',
+      channel_type: 'Channel::FacebookPage',
+      avatar_url: 'random_image.png',
+      page_id: '12345',
+      widget_color: null,
+      website_token: null,
+      enable_auto_assignment: true,
+      instagram_id: 123456789,
+    });
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isFetchingItem: false,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isFetchingItem: false,
+      isCreating: false,
+      isUpdating: false,
+      isDeleting: false,
+    });
+  });
+
+  it('getFacebookInboxByInstagramId', () => {
+    const state = { records: inboxList };
+    expect(getters.getFacebookInboxByInstagramId(state)(123456789)).toEqual({
+      id: 1,
+      channel_id: 1,
+      name: 'Test FacebookPage 1',
+      channel_type: 'Channel::FacebookPage',
+      avatar_url: 'random_image.png',
+      page_id: '12345',
+      widget_color: null,
+      website_token: null,
+      enable_auto_assignment: true,
+      instagram_id: 123456789,
+    });
+  });
+
+  it('getInstagramInboxByInstagramId', () => {
+    const state = { records: inboxList };
+    expect(getters.getInstagramInboxByInstagramId(state)(123456789)).toEqual({
+      id: 7,
+      channel_id: 7,
+      name: 'Test Instagram 1',
+      channel_type: 'Channel::Instagram',
+      instagram_id: 123456789,
+      provider: 'default',
+    });
+  });
+
+  it('getTiktokInboxByBusinessId', () => {
+    const state = { records: inboxList };
+    expect(getters.getTiktokInboxByBusinessId(state)(123456789)).toEqual({
+      id: 8,
+      channel_id: 8,
+      name: 'Test TikTok 1',
+      channel_type: 'Channel::Tiktok',
+      business_id: 123456789,
+      provider: 'default',
+    });
+  });
+
+  describe('getFilteredWhatsAppTemplates', () => {
+    it('returns empty array when inbox not found', () => {
+      const state = { records: [] };
+      expect(getters.getFilteredWhatsAppTemplates(state)(999)).toEqual([]);
+    });
+
+    it('returns empty array when templates is null or undefined', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: null,
+            additional_attributes: { message_templates: undefined },
+          },
+        ],
+      };
+      expect(getters.getFilteredWhatsAppTemplates(state)(1)).toEqual([]);
+    });
+
+    it('returns empty array when templates is not an array', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: 'invalid',
+            additional_attributes: {},
+          },
+        ],
+      };
+      expect(getters.getFilteredWhatsAppTemplates(state)(1)).toEqual([]);
+    });
+
+    it('filters out templates without required properties', () => {
+      const invalidTemplates = [
+        { name: 'incomplete_template' }, // missing status and components
+        { status: 'approved' }, // missing name and components
+        { name: 'another_incomplete', status: 'approved' }, // missing components
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: invalidTemplates,
+          },
+        ],
+      };
+      expect(getters.getFilteredWhatsAppTemplates(state)(1)).toEqual([]);
+    });
+
+    it('filters out non-approved templates', () => {
+      const mixedStatusTemplates = [
+        {
+          name: 'pending_template',
+          status: 'pending',
+          components: [{ type: 'BODY', text: 'Test' }],
+        },
+        {
+          name: 'rejected_template',
+          status: 'rejected',
+          components: [{ type: 'BODY', text: 'Test' }],
+        },
+        {
+          name: 'approved_template',
+          status: 'approved',
+          components: [{ type: 'BODY', text: 'Test' }],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: mixedStatusTemplates,
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('approved_template');
+    });
+
+    it('filters out interactive templates (LIST, PRODUCT, CATALOG)', () => {
+      const interactiveTemplates = [
+        {
+          name: 'list_template',
+          status: 'approved',
+          components: [
+            { type: 'BODY', text: 'Choose an option' },
+            { type: 'LIST', sections: [] },
+          ],
+        },
+        {
+          name: 'product_template',
+          status: 'approved',
+          components: [
+            { type: 'BODY', text: 'Product info' },
+            { type: 'PRODUCT', catalog_id: '123' },
+          ],
+        },
+        {
+          name: 'catalog_template',
+          status: 'approved',
+          components: [
+            { type: 'BODY', text: 'Catalog' },
+            { type: 'CATALOG', thumbnail_product_retailer_id: '123' },
+          ],
+        },
+        {
+          name: 'regular_template',
+          status: 'approved',
+          components: [{ type: 'BODY', text: 'Regular message' }],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: interactiveTemplates,
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('regular_template');
+    });
+
+    it('filters out location templates', () => {
+      const locationTemplates = [
+        {
+          name: 'location_template',
+          status: 'approved',
+          components: [
+            { type: 'HEADER', format: 'LOCATION' },
+            { type: 'BODY', text: 'Location message' },
+          ],
+        },
+        {
+          name: 'regular_template',
+          status: 'approved',
+          components: [
+            { type: 'HEADER', format: 'TEXT', text: 'Header' },
+            { type: 'BODY', text: 'Regular message' },
+          ],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: locationTemplates,
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('regular_template');
+    });
+
+    it('filters out authentication templates', () => {
+      const authenticationTemplates = [
+        {
+          name: 'auth_template',
+          status: 'approved',
+          category: 'AUTHENTICATION',
+          components: [
+            { type: 'BODY', text: 'Your verification code is {{1}}' },
+          ],
+        },
+        {
+          name: 'regular_template',
+          status: 'approved',
+          category: 'MARKETING',
+          components: [{ type: 'BODY', text: 'Regular message' }],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: authenticationTemplates,
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('regular_template');
+    });
+
+    it('returns valid templates from fixture data', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: templates,
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+
+      // All templates in fixtures should be approved and valid
+      expect(result.length).toBeGreaterThan(0);
+
+      // Verify all returned templates are approved
+      result.forEach(template => {
+        expect(template.status).toBe('approved');
+        expect(template.components).toBeDefined();
+        expect(Array.isArray(template.components)).toBe(true);
+      });
+
+      // Verify specific templates from fixtures are included
+      const templateNames = result.map(t => t.name);
+      expect(templateNames).toContain('sample_flight_confirmation');
+      expect(templateNames).toContain('sample_issue_resolution');
+      expect(templateNames).toContain('sample_shipping_confirmation');
+      expect(templateNames).toContain('no_variable_template');
+      expect(templateNames).toContain('order_confirmation');
+    });
+
+    it('prioritizes message_templates over additional_attributes.message_templates', () => {
+      const primaryTemplates = [
+        {
+          name: 'primary_template',
+          status: 'approved',
+          components: [{ type: 'BODY', text: 'Primary' }],
+        },
+      ];
+
+      const fallbackTemplates = [
+        {
+          name: 'fallback_template',
+          status: 'approved',
+          components: [{ type: 'BODY', text: 'Fallback' }],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: primaryTemplates,
+            additional_attributes: {
+              message_templates: fallbackTemplates,
+            },
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('primary_template');
+    });
+
+    it('falls back to additional_attributes.message_templates when message_templates is null', () => {
+      const fallbackTemplates = [
+        {
+          name: 'fallback_template',
+          status: 'approved',
+          components: [{ type: 'BODY', text: 'Fallback' }],
+        },
+      ];
+
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_type: 'Channel::Whatsapp',
+            message_templates: null,
+            additional_attributes: {
+              message_templates: fallbackTemplates,
+            },
+          },
+        ],
+      };
+
+      const result = getters.getFilteredWhatsAppTemplates(state)(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('fallback_template');
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+import * as types from '../../../mutation-types';
+import { mutations } from '../../inboxes';
+import inboxList from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_INBOXES', () => {
+    it('set inbox records', () => {
+      const state = { records: [] };
+      mutations[types.default.SET_INBOXES](state, inboxList);
+      expect(state.records).toEqual(inboxList);
+    });
+  });
+
+  describe('#SET_INBOXES_ITEM', () => {
+    it('push inbox if inbox doesnot exist to the store', () => {
+      const state = {
+        records: [],
+      };
+      mutations[types.default.SET_INBOXES_ITEM](state, inboxList[0]);
+      expect(state.records).toEqual([inboxList[0]]);
+    });
+
+    it('update inbox if it exists to the store', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_id: 1,
+            name: 'Test FacebookPage',
+            channel_type: 'Channel::FacebookPage',
+            avatar_url: 'random_image1.png',
+            page_id: '1235',
+            widget_color: null,
+            website_token: null,
+          },
+        ],
+      };
+      mutations[types.default.SET_INBOXES_ITEM](state, inboxList[0]);
+      expect(state.records).toEqual([inboxList[0]]);
+    });
+  });
+
+  describe('#ADD_INBOXES', () => {
+    it('push new record in the inbox store', () => {
+      const state = {
+        records: [],
+      };
+      mutations[types.default.ADD_INBOXES](state, inboxList[0]);
+      expect(state.records).toEqual([inboxList[0]]);
+    });
+  });
+  describe('#EDIT_INBOXES', () => {
+    it('update inbox in the store', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            channel_id: 1,
+            name: 'Test FacebookPage',
+            channel_type: 'Channel::FacebookPage',
+            avatar_url: 'random_image1.png',
+            page_id: '1235',
+            widget_color: null,
+            website_token: null,
+          },
+        ],
+      };
+      mutations[types.default.EDIT_INBOXES](state, inboxList[0]);
+      expect(state.records).toEqual([inboxList[0]]);
+    });
+  });
+
+  describe('#DELETE_INBOXES', () => {
+    it('delete inbox from store', () => {
+      const state = {
+        records: [inboxList[0]],
+      };
+      mutations[types.default.DELETE_INBOXES](state, 1);
+      expect(state.records).toEqual([]);
+    });
+  });
+
+  describe('#DELETE_INBOXES', () => {
+    it('delete inbox from store', () => {
+      const state = {
+        uiFlags: { isFetchingItem: false },
+      };
+      mutations[types.default.SET_INBOXES_UI_FLAG](state, {
+        isFetchingItem: true,
+      });
+      expect(state.uiFlags).toEqual({ isFetchingItem: true });
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/inboxes/templateFixtures.js

@@ -0,0 +1,544 @@
+export const templates = [
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'Esta é a sua confirmação de voo para {{1}}-{{2}} em {{3}}.',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Oi, {{1}}. Nós conseguimos resolver o problema que você estava enfrentando?',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Sim', type: 'QUICK_REPLY' },
+          { text: 'Não', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'es',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hola, {{1}}. ¿Pudiste solucionar el problema que tenías?',
+        type: 'BODY',
+      },
+      {
+        text: 'Este mensaje proviene de un negocio no verificado.',
+        type: 'FOOTER',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Sí', type: 'QUICK_REPLY' },
+          { text: 'No', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'id',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Halo {{1}}, apakah kami bisa mengatasi masalah yang sedang Anda hadapi?',
+        type: 'BODY',
+      },
+      {
+        text: 'Pesan ini berasal dari bisnis yang tidak terverifikasi.',
+        type: 'FOOTER',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Ya', type: 'QUICK_REPLY' },
+          { text: 'Tidak', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Seu pacote foi enviado. Ele será entregue em {{1}} dias úteis.',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'id',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Paket Anda sudah dikirim. Paket akan sampai dalam {{1}} hari kerja.',
+        type: 'BODY',
+      },
+      {
+        text: 'Pesan ini berasal dari bisnis yang tidak terverifikasi.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'es',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'ó tu paquete. La entrega se realizará en {{1}} dí.',
+        type: 'BODY',
+      },
+      {
+        text: 'Este mensaje proviene de un negocio no verificado.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'id',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'Ini merupakan konfirmasi penerbangan Anda untuk {{1}}-{{2}} di {{3}}.',
+        type: 'BODY',
+      },
+      {
+        text: 'Pesan ini berasal dari bisnis yang tidak terverifikasi.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hi {{1}}, were we able to solve the issue that you were facing?',
+        type: 'BODY',
+      },
+      { text: 'This message is from an unverified business.', type: 'FOOTER' },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Yes', type: 'QUICK_REPLY' },
+          { text: 'No', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'es',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'Confirmamos tu vuelo a {{1}}-{{2}} para el {{3}}.',
+        type: 'BODY',
+      },
+      {
+        text: 'Este mensaje proviene de un negocio no verificado.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'This is your flight confirmation for {{1}}-{{2}} on {{3}}.',
+        type: 'BODY',
+      },
+      { text: 'This message is from an unverified business.', type: 'FOOTER' },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Your package has been shipped. It will be delivered in {{1}} business days.',
+        type: 'BODY',
+      },
+      { text: 'This message is from an unverified business.', type: 'FOOTER' },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'no_variable_template',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'DOCUMENT',
+      },
+      {
+        text: 'This is a test whatsapp template',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'order_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://example.com/shoes.jpg'],
+        },
+      },
+      {
+        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'technician_visit',
+    status: 'approved',
+    category: 'UTILITY',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Technician visit',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: "Hi {{1}}, we're scheduling a technician visit to {{2}} on {{3}} between {{4}} and {{5}}. Please confirm if this time slot works for you.",
+        type: 'BODY',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Confirm',
+            type: 'QUICK_REPLY',
+          },
+          {
+            text: 'Reschedule',
+            type: 'QUICK_REPLY',
+          },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'event_invitation_static',
+    status: 'approved',
+    category: 'MARKETING',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
+        type: 'BODY',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://events.example.com/register',
+            text: 'Visit website',
+            type: 'URL',
+          },
+          {
+            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
+            text: 'Get Directions',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'purchase_receipt',
+    status: 'approved',
+    category: 'UTILITY',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'DOCUMENT',
+      },
+      {
+        text: 'Thank you for using your {{1}} card at {{2}}. Your {{3}} is attached as a PDF.',
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'discount_coupon',
+    status: 'approved',
+    category: 'MARKETING',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: '🎉 Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        type: 'BODY',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Copy offer code',
+            type: 'COPY_CODE',
+          },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'support_callback',
+    status: 'approved',
+    category: 'UTILITY',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hello {{name}}, our support team will call you regarding ticket # {{ticket_id}}.',
+        type: 'BODY',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Call Support',
+            type: 'PHONE_NUMBER',
+            phone_number: '+16506677566',
+          },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'training_video',
+    status: 'approved',
+    category: 'MARKETING',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'VIDEO',
+      },
+      {
+        text: "Hi {{name}}, here's your training video. Please watch by{{date}}.",
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'product_launch',
+    status: 'approved',
+    category: 'MARKETING',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+      },
+      {
+        text: 'New arrival! Our stunning coat now available in {{color}} color.',
+        type: 'BODY',
+      },
+      {
+        text: 'Free shipping on orders over $100. Limited time offer.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'greet',
+    status: 'approved',
+    category: 'MARKETING',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hey {{customer_name}} how may I help you?',
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'hello_world',
+    status: 'approved',
+    category: 'UTILITY',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hello World',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+        type: 'BODY',
+      },
+      {
+        text: 'WhatsApp Business Platform sample message',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'feedback_request',
+    status: 'approved',
+    category: 'MARKETING',
+    language: 'en',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: "Hey {{name}}, how was your experience with Puma? We'd love your feedback!",
+        type: 'BODY',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://feedback.example.com/survey',
+            text: 'Leave Feedback',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'address_update',
+    status: 'approved',
+    category: 'UTILITY',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Address update',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Hi {{1}}, your delivery address has been successfully updated to {{2}}. Contact {{3}} for any inquiries.',
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'delivery_confirmation',
+    status: 'approved',
+    category: 'UTILITY',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: '{{1}}, your order was successfully delivered on {{2}}.\n\nThank you for your purchase.\n',
+        type: 'BODY',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+];