feat: Render contact custom attributes in contact/conversation sidebar (#3310)

app/javascript/dashboard/mixins/attributeMixin.js

@@ -8,31 +8,50 @@ export default {
     }),
     attributes() {
       return this.$store.getters['attributes/getAttributesByModel'](
-        'conversation_attribute'
+        this.attributeType
       );
     },
     customAttributes() {
-      return this.currentChat.custom_attributes || {};
+      if (this.attributeType === 'conversation_attribute')
+        return this.currentChat.custom_attributes || {};
+      return this.contact.custom_attributes || {};
+    },
+    contactIdentifier() {
+      return (
+        this.currentChat.meta?.sender?.id ||
+        this.$route.params.contactId ||
+        this.contactId
+      );
+    },
+    contact() {
+      return this.$store.getters['contacts/getContact'](this.contactIdentifier);
     },
     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 Object.keys(this.customAttributes).map(key => {
+        const item = this.attributes.find(
+          attribute => attribute.attribute_key === key
+        );
+        if (item) {
           return {
             ...item,
             value: this.customAttributes[key],
             icon: this.attributeIcon(item.attribute_display_type),
           };
-        });
+        }
+        return {
+          ...item,
+          value: this.customAttributes[key],
+          attribute_description: key,
+          attribute_display_name: key,
+          attribute_display_type: 'text',
+          attribute_key: key,
+          attribute_model: this.attributeType,
+          id: Math.random(),
+        };
+      });
     },
   },
   methods: {

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

@@ -19,24 +19,18 @@ describe('attributeMixin', () => {
         custom_attributes: {
           product_id: 2021,
         },
+        meta: {
+          sender: {
+            id: 1212,
+          },
+        },
       }),
       getCurrentAccountId: () => 1,
-    };
+      attributeType: () => 'conversation_attribute',
+     };
     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() {},
@@ -56,6 +50,14 @@ describe('attributeMixin', () => {
         attributes() {
           return attributeFixtures;
         },
+        contact() {
+          return {
+            id: 7165,
+            custom_attributes: {
+              product_id: 2021,
+            },
+          };
+        },
       },
     };
     const wrapper = shallowMount(Component, { store, localVue });
@@ -86,4 +88,83 @@ describe('attributeMixin', () => {
     expect(wrapper.vm.attributeIcon('date')).toBe('ion-calendar');
     expect(wrapper.vm.attributeIcon()).toBe('ion-edit');
   });
+
+  it('returns currently selected contact', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+      computed: {
+        contact() {
+          return {
+            id: 7165,
+            custom_attributes: {
+              product_id: 2021,
+            },
+          };
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.contact).toEqual({
+      id: 7165,
+      custom_attributes: {
+        product_id: 2021,
+      },
+    });
+  });
+
+  it('returns currently selected contact id', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.contactIdentifier).toEqual(1212);
+  });
+
+  it('returns currently selected conversation custom attributes', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+      computed: {
+        contact() {
+          return {
+            id: 7165,
+            custom_attributes: {
+              product_id: 2021,
+            },
+          };
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.customAttributes).toEqual({
+      product_id: 2021,
+    });
+  });
+
+  it('returns currently selected contact custom attributes', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+      computed: {
+        contact() {
+          return {
+            id: 7165,
+            custom_attributes: {
+              cloudCustomer: true,
+            },
+          };
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.customAttributes).toEqual({
+      cloudCustomer: true,
+    });
+  });
 });