feat: Render conversation custom attributes (#3065)

app/javascript/dashboard/mixins/attributeMixin.js

@@ -0,0 +1,56 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      accountId: 'getCurrentAccountId',
+    }),
+    attributes() {
+      return this.$store.getters['attributes/getAttributesByModel'](
+        'conversation_attribute'
+      );
+    },
+    customAttributes() {
+      return this.currentChat.custom_attributes || {};
+    },
+    conversationId() {
+      return this.currentChat.id;
+    },
+    // Select only custom attribute which are already defined
+    filteredAttributes() {
+      return Object.keys(this.customAttributes)
+        .filter(key => {
+          return this.attributes.find(item => item.attribute_key === key);
+        })
+        .map(key => {
+          const item = this.attributes.find(
+            attribute => attribute.attribute_key === key
+          );
+          return {
+            ...item,
+            value: this.customAttributes[key],
+            icon: this.attributeIcon(item.attribute_display_type),
+          };
+        });
+    },
+  },
+  methods: {
+    attributeIcon(attributeType) {
+      switch (attributeType) {
+        case 'date':
+          return 'ion-calendar';
+        case 'link':
+          return 'ion-link';
+        case 'currency':
+          return 'ion-social-usd';
+        case 'number':
+          return 'ion-calculator';
+        case 'percent':
+          return 'ion-calculator';
+        default:
+          return 'ion-edit';
+      }
+    },
+  },
+};

app/javascript/dashboard/mixins/specs/attributeFixtures.js

@@ -0,0 +1,26 @@
+export default [
+  {
+    attribute_description: 'Product name',
+    attribute_display_name: 'Product name',
+    attribute_display_type: 'text',
+    attribute_key: 'product_name',
+    attribute_model: 'conversation_attribute',
+    created_at: '2021-09-03T10:45:09.587Z',
+    default_value: null,
+    id: 6,
+    updated_at: '2021-09-22T10:40:42.511Z',
+  },
+  {
+    attribute_description: 'Product identifier',
+    attribute_display_name: 'Product id',
+    attribute_display_type: 'number',
+    attribute_key: 'product_id',
+    attribute_model: 'conversation_attribute',
+    created_at: '2021-09-16T13:06:47.329Z',
+    default_value: null,
+    icon: 'ion-calculator',
+    id: 10,
+    updated_at: '2021-09-22T10:42:25.873Z',
+    value: 2021,
+  },
+];

app/javascript/dashboard/mixins/specs/attributeMixin.spec.js

@@ -0,0 +1,89 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import attributeMixin from '../attributeMixin';
+import Vuex from 'vuex';
+import attributeFixtures from './attributeFixtures';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('attributeMixin', () => {
+  let getters;
+  let actions;
+  let store;
+
+  beforeEach(() => {
+    actions = { updateUISettings: jest.fn(), toggleSidebarUIState: jest.fn() };
+    getters = {
+      getSelectedChat: () => ({
+        id: 7165,
+        custom_attributes: {
+          product_id: 2021,
+        },
+      }),
+      getCurrentAccountId: () => 1,
+    };
+    store = new Vuex.Store({ actions, getters });
+  });
+
+  it('returns currently selected conversation custom attributes', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.customAttributes).toEqual({
+      product_id: 2021,
+    });
+  });
+
+  it('returns currently selected conversation id', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.conversationId).toEqual(7165);
+  });
+
+  it('returns filtered attributes from conversation custom attributes', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+      computed: {
+        attributes() {
+          return attributeFixtures;
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.filteredAttributes).toEqual([
+      {
+        attribute_description: 'Product identifier',
+        attribute_display_name: 'Product id',
+        attribute_display_type: 'number',
+        attribute_key: 'product_id',
+        attribute_model: 'conversation_attribute',
+        created_at: '2021-09-16T13:06:47.329Z',
+        default_value: null,
+        icon: 'ion-calculator',
+        id: 10,
+        updated_at: '2021-09-22T10:42:25.873Z',
+        value: 2021,
+      },
+    ]);
+  });
+
+  it('return icon if attribute type passed correctly', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.attributeIcon('date')).toBe('ion-calendar');
+    expect(wrapper.vm.attributeIcon()).toBe('ion-edit');
+  });
+});