chore: Update deleteCustomAttribute method in SDK (#3334)

app/javascript/dashboard/components/CustomAttribute.vue

@@ -99,7 +99,7 @@ export default {
       isEditing: false,
       editedValue:
         this.attributeType === 'date'
-          ? format(new Date(this.value), DATE_FORMAT)
+          ? format(new Date(this.value || new Date()), DATE_FORMAT)
           : this.value,
     };
   },

app/javascript/dashboard/helper/actionCable.js

@@ -20,6 +20,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.contact_changed': this.onConversationContactChange,
       'presence.update': this.onPresenceUpdate,
       'contact.deleted': this.onContactDelete,
+      'contact.updated': this.onContactUpdate,
     };
   }
 
@@ -124,6 +125,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     );
     this.fetchConversationStats();
   };
+
+  onContactUpdate = data => {
+    this.app.$store.dispatch('contacts/updateContact', data);
+  };
 }
 
 export default {

app/javascript/dashboard/mixins/attributeMixin.js

@@ -29,6 +29,7 @@ export default {
     conversationId() {
       return this.currentChat.id;
     },
+
     filteredAttributes() {
       return Object.keys(this.customAttributes).map(key => {
         const item = this.attributes.find(
@@ -38,15 +39,17 @@ export default {
           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_display_type: this.attributeDisplayType(
+            this.customAttributes[key]
+          ),
           attribute_key: key,
           attribute_model: this.attributeType,
           id: Math.random(),
@@ -55,21 +58,24 @@ export default {
     },
   },
   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';
+    isAttributeNumber(attributeValue) {
+      return (
+        Number.isInteger(Number(attributeValue)) && Number(attributeValue) > 0
+      );
+    },
+    isAttributeLink(attributeValue) {
+      /* eslint-disable no-useless-escape */
+      const URL_REGEX = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
+      return URL_REGEX.test(attributeValue);
+    },
+    attributeDisplayType(attributeValue) {
+      if (this.isAttributeNumber(attributeValue)) {
+        return 'number';
       }
+      if (this.isAttributeLink(attributeValue)) {
+        return 'link';
+      }
+      return 'text';
     },
   },
 };

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

@@ -27,7 +27,7 @@ describe('attributeMixin', () => {
       }),
       getCurrentAccountId: () => 1,
       attributeType: () => 'conversation_attribute',
-     };
+    };
     store = new Vuex.Store({ actions, getters });
   });
 
@@ -78,15 +78,40 @@ describe('attributeMixin', () => {
     ]);
   });
 
-  it('return icon if attribute type passed correctly', () => {
+  it('return display type if attribute passed', () => {
     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');
+    expect(wrapper.vm.attributeDisplayType('date')).toBe('text');
+    expect(
+      wrapper.vm.attributeDisplayType('https://www.chatwoot.com/pricing')
+    ).toBe('link');
+    expect(wrapper.vm.attributeDisplayType(9988)).toBe('number');
+  });
+
+  it('return true if link is passed', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.isAttributeLink('https://www.chatwoot.com/pricing')).toBe(
+      true
+    );
+  });
+
+  it('return true if number is passed', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [attributeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.isAttributeNumber(9988)).toBe(true);
   });
 
   it('returns currently selected contact', () => {

app/javascript/dashboard/store/modules/contacts/actions.js

@@ -169,4 +169,14 @@ export const actions = {
       root: true,
     });
   },
+
+  updateContact: async ({ commit }, updateObj) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isUpdating: true });
+    try {
+      commit(types.EDIT_CONTACT, updateObj);
+      commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
+    } catch (error) {
+      commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
+    }
+  },
 };

app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js

@@ -207,7 +207,28 @@ describe('#actions', () => {
     });
   });
 
-  describe('#deleteCustomAttributes', () => {
+  describe('#updateContact', () => {
+    it('sends correct mutations if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: { payload: contactList[0] } });
+      await actions.updateContact({ commit }, contactList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.EDIT_CONTACT, contactList[0]],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.update({ commit }, contactList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
+        [types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+   describe('#deleteCustomAttributes', () => {
     it('sends correct mutations if API is success', async () => {
       axios.post.mockResolvedValue({ data: { payload: contactList[0] } });
       await actions.deleteCustomAttributes(