From a2764e5c1dbd65abbf6e26d50d974d39d4bb1ffc Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Mon, 15 Nov 2021 14:56:35 +0530 Subject: [PATCH] chore: Update `deleteCustomAttribute` method in SDK (#3334) --- .../api/v1/widget/contacts_controller.rb | 7 ++++ .../dashboard/components/CustomAttribute.vue | 2 +- .../dashboard/helper/actionCable.js | 5 +++ .../dashboard/mixins/attributeMixin.js | 38 +++++++++++-------- .../mixins/specs/attributeMixin.spec.js | 33 ++++++++++++++-- .../store/modules/contacts/actions.js | 10 +++++ .../modules/specs/contacts/actions.spec.js | 23 ++++++++++- app/javascript/widget/App.vue | 7 ++-- app/javascript/widget/api/contacts.js | 7 +++- .../widget/store/modules/contacts.js | 13 +++++-- config/routes.rb | 2 +- .../api/v1/widget/contacts_controller_spec.rb | 21 ++++++++++ 12 files changed, 138 insertions(+), 30 deletions(-) diff --git a/app/controllers/api/v1/widget/contacts_controller.rb b/app/controllers/api/v1/widget/contacts_controller.rb index 983f12965..eafc220a3 100644 --- a/app/controllers/api/v1/widget/contacts_controller.rb +++ b/app/controllers/api/v1/widget/contacts_controller.rb @@ -11,6 +11,13 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController render json: contact_identify_action.perform end + # TODO : clean up this with proper routes delete contacts/custom_attributes + def destroy_custom_attributes + @contact.custom_attributes = @contact.custom_attributes.excluding(params[:custom_attributes]) + @contact.save! + render json: @contact + end + private def process_hmac diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue index 5fe724342..bdadc8c59 100644 --- a/app/javascript/dashboard/components/CustomAttribute.vue +++ b/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, }; }, diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js index e91f95372..2da5fcb4a 100644 --- a/app/javascript/dashboard/helper/actionCable.js +++ b/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 { diff --git a/app/javascript/dashboard/mixins/attributeMixin.js b/app/javascript/dashboard/mixins/attributeMixin.js index e9b4d40a3..d861ec059 100644 --- a/app/javascript/dashboard/mixins/attributeMixin.js +++ b/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'; }, }, }; diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js index a01f1b5f9..222b35838 100644 --- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js +++ b/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', () => { diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js index b6c2b4341..1cea2aad2 100644 --- a/app/javascript/dashboard/store/modules/contacts/actions.js +++ b/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 }); + } + }, }; diff --git a/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js index e0fdcf68c..486b3e203 100644 --- a/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js +++ b/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( diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue index bda48e2ec..81c4efcb0 100755 --- a/app/javascript/widget/App.vue +++ b/app/javascript/widget/App.vue @@ -262,9 +262,10 @@ export default { message.customAttributes ); } else if (message.event === 'delete-custom-attribute') { - this.$store.dispatch('contacts/setCustomAttributes', { - [message.customAttribute]: null, - }); + this.$store.dispatch( + 'contacts/deleteCustomAttribute', + message.customAttribute + ); } else if (message.event === 'set-locale') { this.setLocale(message.locale); this.setBubbleLabel(); diff --git a/app/javascript/widget/api/contacts.js b/app/javascript/widget/api/contacts.js index a246e6dc2..15edb07e9 100644 --- a/app/javascript/widget/api/contacts.js +++ b/app/javascript/widget/api/contacts.js @@ -12,9 +12,14 @@ export default { ...userObject, }); }, - setCustomAttibutes(customAttributes = {}) { + setCustomAttributes(customAttributes = {}) { return API.patch(buildUrl('widget/contact'), { custom_attributes: customAttributes, }); }, + deleteCustomAttribute(customAttribute) { + return API.post(buildUrl('widget/contact/destroy_custom_attributes'), { + custom_attributes: [customAttribute], + }); + }, }; diff --git a/app/javascript/widget/store/modules/contacts.js b/app/javascript/widget/store/modules/contacts.js index f1ef555e5..f02083873 100644 --- a/app/javascript/widget/store/modules/contacts.js +++ b/app/javascript/widget/store/modules/contacts.js @@ -43,14 +43,21 @@ export const actions = { refreshActionCableConnector(pubsubToken); } catch (error) { - // Ingore error + // Ignore error } }, setCustomAttributes: async (_, customAttributes = {}) => { try { - await ContactsAPI.setCustomAttibutes(customAttributes); + await ContactsAPI.setCustomAttributes(customAttributes); } catch (error) { - // Ingore error + // Ignore error + } + }, + deleteCustomAttribute: async (_, customAttribute) => { + try { + await ContactsAPI.deleteCustomAttribute(customAttribute); + } catch (error) { + // Ignore error } }, }; diff --git a/config/routes.rb b/config/routes.rb index d50079cce..8cb8b4fb9 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -186,7 +186,7 @@ Rails.application.routes.draw do end resource :contact, only: [:show, :update] do collection do - delete :destroy_custom_attributes + post :destroy_custom_attributes end end resources :inbox_members, only: [:index] diff --git a/spec/controllers/api/v1/widget/contacts_controller_spec.rb b/spec/controllers/api/v1/widget/contacts_controller_spec.rb index c8da290e5..854f2ab24 100644 --- a/spec/controllers/api/v1/widget/contacts_controller_spec.rb +++ b/spec/controllers/api/v1/widget/contacts_controller_spec.rb @@ -87,4 +87,25 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do end end end + + describe 'POST /api/v1/widget/destroy_custom_attributes' do + let(:params) { { website_token: web_widget.website_token, identifier: 'test', custom_attributes: ['test'] } } + + context 'with invalid website token' do + it 'returns unauthorized' do + post '/api/v1/widget/destroy_custom_attributes', params: { website_token: '' } + expect(response).to have_http_status(:not_found) + end + end + + context 'with correct website token' do + it 'calls destroy custom attributes' do + post '/api/v1/widget/destroy_custom_attributes', + params: params, + headers: { 'X-Auth-Token' => token }, + as: :json + expect(contact.reload.custom_attributes).to eq({}) + end + end + end end