Feat: Show notes panel on crm page (#2320)

* Feat: Show notes panel on CRM page

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/api/contactNotes.js

@@ -0,0 +1,9 @@
+import ApiClient from './ApiClient';
+
+class ContactNotes extends ApiClient {
+  constructor() {
+    super('contact_notes', { accountScoped: true });
+  }
+}
+
+export default new ContactNotes();

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -8,6 +8,7 @@
 }
 
 .card {
+  margin-bottom: var(--space-small);
   padding: var(--space-small);
 }
 

app/javascript/dashboard/modules/contact/components/ManageLayout.vue

@@ -4,27 +4,28 @@
       <contact-panel v-if="!uiFlags.isFetchingItem" :contact="contact" />
     </div>
     <div class="center"></div>
-    <div class="right"></div>
+    <div class="right">
+      <contact-notes :contact-id="Number(contactId)" />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import ContactPanel from './ContactPanel';
+import ContactNotes from 'dashboard/modules/notes/NotesOnContactPage';
 
 export default {
   components: {
     ContactPanel,
+    ContactNotes,
   },
   props: {
     contactId: {
       type: [String, Number],
-      default: 0,
+      required: true,
     },
   },
-  data() {
-    return {};
-  },
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
@@ -38,13 +39,12 @@ export default {
     },
   },
   mounted() {
-    this.getContactDetails();
+    this.fetchContactDetails();
   },
   methods: {
-    getContactDetails() {
-      if (this.contactId) {
-        this.$store.dispatch('contacts/show', { id: this.contactId });
-      }
+    fetchContactDetails() {
+      const { contactId: id } = this;
+      this.$store.dispatch('contacts/show', { id });
     },
   },
 };
@@ -67,4 +67,8 @@ export default {
   border-right: 1px solid var(--color-border);
   border-left: 1px solid var(--color-border);
 }
+
+.right {
+  padding: var(--space-normal);
+}
 </style>

app/javascript/dashboard/modules/notes/NotesOnContactPage.vue

@@ -0,0 +1,43 @@
+<template>
+  <note-list :notes="notes" @add="onAdd" @delete="onDelete" />
+</template>
+
+<script>
+import NoteList from './components/NoteList';
+
+export default {
+  components: {
+    NoteList,
+  },
+  props: {
+    contactId: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    notes() {
+      return this.$store.getters['contactNotes/getAllNotesByContact'](
+        this.contactId
+      );
+    },
+  },
+  mounted() {
+    this.fetchContactNotes();
+  },
+  methods: {
+    fetchContactNotes() {
+      const { contactId } = this;
+      if (contactId) this.$store.dispatch('contactNotes/get', { contactId });
+    },
+    onAdd(content) {
+      const { contactId } = this;
+      this.$store.dispatch('contactNotes/create', { content, contactId });
+    },
+    onDelete(noteId) {
+      const { contactId } = this;
+      this.$store.dispatch('contactNotes/delete', { noteId, contactId });
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/contacts/components/NoteList.vue → app/javascript/dashboard/modules/notes/components/NoteList.vue

@@ -17,7 +17,7 @@
         @delete="onDeleteNote"
       />
       <div class="button-wrap">
-        <woot-button variant="clear link" class="button" @click="onclick">
+        <woot-button variant="link" @click="onclick">
           {{ $t('NOTES.FOOTER.BUTTON') }}
           <i class="ion-arrow-right-c" />
         </woot-button>
@@ -48,13 +48,13 @@ export default {
       this.$emit('show');
     },
     onAddNote(value) {
-      this.$emit('addNote', value);
+      this.$emit('add', value);
     },
     onEditNote(value) {
-      this.$emit('editNote', value);
+      this.$emit('edit', value);
     },
     onDeleteNote(value) {
-      this.$emit('deleteNote', value);
+      this.$emit('delete', value);
     },
   },
 };

app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.stories.js → app/javascript/dashboard/modules/notes/stories/AddNote.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import AddNote from './AddNote.vue';
+import AddNote from '../components/AddNote.vue';
 
 export default {
   title: 'Components/Notes/Add',

app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.stories.js → app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import ContactNote from './ContactNote.vue';
+import ContactNote from '../components/ContactNote.vue';
 
 export default {
   title: 'Components/Notes/Note',

app/javascript/dashboard/routes/dashboard/contacts/components/NoteList.stories.js → app/javascript/dashboard/modules/notes/stories/NoteList.stories.js

@@ -1,15 +1,15 @@
 import { action } from '@storybook/addon-actions';
-import noteList from './NoteList';
+import NoteList from '../components/NoteList';
 
 export default {
   title: 'Components/Notes/List',
-  component: noteList,
+  component: NoteList,
   argTypes: {},
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { noteList },
+  components: { NoteList },
   template:
     '<note-list v-bind="$props" @addNote="onAddNote" @editNote="onEditNote" @deleteNote="onDeleteNote" @show="onClick"></note-list>',
 });

app/javascript/dashboard/store/index.js

@@ -27,6 +27,7 @@ import webhooks from './modules/webhooks';
 import teams from './modules/teams';
 import teamMembers from './modules/teamMembers';
 import campaigns from './modules/campaigns';
+import contactNotes from './modules/contactNotes';
 
 Vue.use(Vuex);
 export default new Vuex.Store({
@@ -57,5 +58,6 @@ export default new Vuex.Store({
     teams,
     teamMembers,
     campaigns,
+    contactNotes,
   },
 });

app/javascript/dashboard/store/modules/contactNotes.js

@@ -0,0 +1,107 @@
+import * as types from '../mutation-types';
+import Vue from 'vue';
+import ContactNotesAPI from '../../api/contactNotes';
+
+export const state = {
+  records: {},
+  uiFlags: {
+    isFetching: false,
+    isCreating: false,
+    isDeleting: false,
+  },
+};
+
+export const getters = {
+  getAllNotesByContact: _state => contactId => {
+    return _state.records[contactId] || [];
+  },
+  getUIFlags(_state) {
+    return _state.uiFlags;
+  },
+};
+
+export const actions = {
+  async get({ commit }, { contactId }) {
+    commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
+      isFetching: true,
+    });
+    try {
+      const { data } = await ContactNotesAPI.get(contactId);
+      commit(types.default.SET_CONTACT_NOTES, { contactId, data });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
+        isFetching: false,
+      });
+    }
+  },
+
+  async create({ commit }, { contactId, content }) {
+    commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
+      isCreating: true,
+    });
+    try {
+      const { data } = await ContactNotesAPI.create({
+        content,
+        contactId,
+      });
+      commit(types.default.ADD_CONTACT_NOTE, {
+        contactId,
+        data,
+      });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
+        isCreating: false,
+      });
+    }
+  },
+
+  async delete({ commit }, { noteId, contactId }) {
+    commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
+      isDeleting: true,
+    });
+    try {
+      await ContactNotesAPI.delete(contactId, noteId);
+      commit(types.default.DELETE_CONTACT_NOTE, { contactId, noteId });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
+        isDeleting: false,
+      });
+    }
+  },
+};
+
+export const mutations = {
+  [types.default.SET_CONTACT_NOTES_UI_FLAG](_state, data) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...data,
+    };
+  },
+
+  [types.default.SET_CONTACT_NOTES]($state, { data, contactId }) {
+    Vue.set($state.records, contactId, data);
+  },
+  [types.default.ADD_CONTACT_NOTE]($state, { data, contactId }) {
+    const contactNotes = $state.records[contactId] || [];
+    $state.records[contactId] = [...contactNotes, data];
+  },
+  [types.default.DELETE_CONTACT_NOTE]($state, { noteId, contactId }) {
+    const contactNotes = $state.records[contactId];
+    const withoutDeletedNote = contactNotes.filter(note => note.id !== noteId);
+    $state.records[contactId] = [...withoutDeletedNote];
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -0,0 +1,78 @@
+import axios from 'axios';
+import { actions } from '../../contactNotes';
+import * as types from '../../../mutation-types';
+import notesData from './fixtures';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: notesData });
+      await actions.get({ commit }, { contactId: 23 });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CONTACT_NOTES, { contactId: 23, data: notesData }],
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.get({ commit }, { contactId: 23 })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: { id: 2, content: 'hi' } });
+      await actions.create({ commit }, { contactId: 1, content: 'hi' });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true }],
+        [
+          types.default.ADD_CONTACT_NOTE,
+          { contactId: 1, data: { id: 2, content: 'hi' } },
+        ],
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.create({ commit }, { contactId: 1, content: 'hi' })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true }],
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: notesData[0] });
+      await actions.delete({ commit }, { contactId: 1, noteId: 2 });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_CONTACT_NOTE, { contactId: 1, noteId: 2 }],
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, { contactId: 1, noteId: 2 })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+});