From 8e6ce3a8139c87f5261a6ff05f21d3c23bbec5e3 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Mon, 25 Oct 2021 18:35:58 +0530
Subject: [PATCH] feat: Add notes for Contacts (#3273)

Fixes #2275
---
 .../v1/accounts/contacts/notes_controller.rb  |   2 +-
 app/javascript/dashboard/api/contactNotes.js  |  22 ++-
 .../assets/scss/_foundation-custom.scss       |   2 +-
 .../assets/scss/_helper-classes.scss          |   6 +-
 .../assets/scss/_utility-helpers.scss         |  41 ++++++
 .../dashboard/assets/scss/_woot.scss          |   2 +-
 .../assets/scss/widgets/_reports.scss         |   4 -
 .../components/widgets/BackButton.vue         |   6 +-
 .../components/widgets/WootWriter/Editor.vue  |   5 +
 .../dashboard/i18n/locale/en/contact.json     |  14 +-
 .../dashboard/i18n/locale/en/settings.json    |   3 +-
 .../dashboard/i18n/sidebarItems/contacts.js   |   2 +-
 .../contact/components/ManageLayout.vue       |  74 ----------
 .../modules/notes/NotesOnContactPage.vue      |   9 +-
 .../modules/notes/components/AddNote.vue      |  57 ++++---
 .../modules/notes/components/ContactNote.vue  |  62 ++++----
 .../modules/notes/components/NoteList.vue     |  59 ++++----
 .../contacts/components/ContactInfoPanel.vue  |  20 ++-
 .../contacts/components/ContactsTable.vue     |  33 ++++-
 .../contacts/pages/ContactManageView.vue      | 139 ++++++++++++------
 .../routes/dashboard/contacts/routes.js       |   2 +-
 .../dashboard/conversation/ContactPanel.vue   |  13 +-
 .../conversation/contact/ContactInfo.vue      |  31 +++-
 .../dashboard/settings/SettingsHeader.vue     |  13 +-
 .../dashboard/store/modules/contactNotes.js   |  51 +++----
 .../shared/helpers/KeyboardHelpers.js         |   4 +
 app/models/note.rb                            |   2 +
 app/views/api/v1/models/_note.json.jbuilder   |  10 +-
 yarn.lock                                     |   6 +-
 29 files changed, 416 insertions(+), 278 deletions(-)
 delete mode 100644 app/javascript/dashboard/modules/contact/components/ManageLayout.vue

diff --git a/app/controllers/api/v1/accounts/contacts/notes_controller.rb b/app/controllers/api/v1/accounts/contacts/notes_controller.rb
index d49f3b838..fb9f3c5c3 100644
--- a/app/controllers/api/v1/accounts/contacts/notes_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts/notes_controller.rb
@@ -2,7 +2,7 @@ class Api::V1::Accounts::Contacts::NotesController < Api::V1::Accounts::Contacts
   before_action :note, except: [:index, :create]
 
   def index
-    @notes = @contact.notes.includes(:user)
+    @notes = @contact.notes.latest.includes(:user)
   end
 
   def create
diff --git a/app/javascript/dashboard/api/contactNotes.js b/app/javascript/dashboard/api/contactNotes.js
index 9508ea9dc..5be33784a 100644
--- a/app/javascript/dashboard/api/contactNotes.js
+++ b/app/javascript/dashboard/api/contactNotes.js
@@ -2,7 +2,27 @@ import ApiClient from './ApiClient';
 
 class ContactNotes extends ApiClient {
   constructor() {
-    super('contact_notes', { accountScoped: true });
+    super('notes', { accountScoped: true });
+    this.contactId = null;
+  }
+
+  get url() {
+    return `${this.baseUrl()}/contacts/${this.contactId}/notes`;
+  }
+
+  get(contactId) {
+    this.contactId = contactId;
+    return super.get();
+  }
+
+  create(contactId, content) {
+    this.contactId = contactId;
+    return super.create({ content });
+  }
+
+  delete(contactId, id) {
+    this.contactId = contactId;
+    return super.delete(id);
   }
 }
 
diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 0e2329b66..50b78bf50 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -9,7 +9,7 @@
 
 .card {
   margin-bottom: var(--space-small);
-  padding: var(--space-small);
+  padding: var(--space-normal);
 }
 
 .button-wrapper .button.link.grey-btn {
diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss
index 416ec0185..a8a5a0b93 100644
--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss
@@ -55,6 +55,10 @@
   justify-content: space-between;
 }
 
-.w-100 {
+.w-full {
   width: 100%;
 }
+
+.h-full {
+  height: 100%;
+}
diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index 60fecb994..8785f1313 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@@ -1,3 +1,44 @@
 .margin-right-small {
   margin-right: var(--space-small);
 }
+
+.fs-small {
+  font-size: var(--font-size-small);
+}
+
+.fs-default {
+  font-size: var(--font-size-default);
+}
+
+.fw-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.p-normal {
+  padding: var(--space-normal);
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+
+.border-right {
+  border-right: 1px solid var(--color-border);
+}
+
+.border-left {
+  border-left: 1px solid var(--color-border);
+}
+
+.bg-white {
+  background-color: var(--white);
+}
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 7debac956..e709327dc 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -14,7 +14,6 @@
 @import 'helper-classes';
 @import 'formulate';
 @import 'date-picker';
-@import 'utility-helpers';
 
 @import 'foundation-sites/scss/foundation';
 @import '~bourbon/core/bourbon';
@@ -50,3 +49,4 @@
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
 @import '~shared/assets/stylesheets/ionicons';
+@import 'utility-helpers';
diff --git a/app/javascript/dashboard/assets/scss/widgets/_reports.scss b/app/javascript/dashboard/assets/scss/widgets/_reports.scss
index 7280b6d4d..eeb958ff3 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_reports.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reports.scss
@@ -21,10 +21,6 @@
   border: 1px solid var(--color-border);
 }
 
-.margin-right-small {
-  margin-right: var(--space-small);
-}
-
 .display-flex {
   display: flex;
 }
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 9bf87d131..758fd7ae2 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
-    {{ $t('GENERAL_SETTINGS.BACK') }}
+    {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </span>
 </template>
 <script>
@@ -12,6 +12,10 @@ export default {
       type: [String, Object],
       default: '',
     },
+    buttonLabel: {
+      type: String,
+      default: '',
+    },
   },
   methods: {
     goBack() {
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index e00b0c22f..b4627cc17 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -64,6 +64,7 @@ export default {
     placeholder: { type: String, default: '' },
     isPrivate: { type: Boolean, default: false },
     isFormatMode: { type: Boolean, default: false },
+    enableSuggestions: { type: Boolean, default: true },
   },
   data() {
     return {
@@ -78,6 +79,10 @@ export default {
   },
   computed: {
     plugins() {
+      if (!this.enableSuggestions) {
+        return [];
+      }
+
       return [
         suggestionsPlugin({
           matcher: triggerCharacters('@'),
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 0f2096b14..dd1af9e9e 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -7,6 +7,7 @@
     "COMPANY": "Company",
     "LOCATION": "Location",
     "CONVERSATION_TITLE": "Conversation Details",
+    "VIEW_PROFILE": "View Profile",
     "BROWSER": "Browser",
     "OS": "Operating System",
     "INITIATED_FROM": "Initiated from",
@@ -188,6 +189,10 @@
       "VIEW_DETAILS": "View details"
     }
   },
+  "CONTACT_PROFILE": {
+    "BACK_BUTTON": "Contacts",
+    "LOADING": "Loading contact profile..."
+  },
   "REMINDER": {
     "ADD_BUTTON": {
       "BUTTON": "Add",
@@ -199,16 +204,21 @@
     }
   },
   "NOTES": {
+    "FETCHING_NOTES": "Fetching notes...",
+    "NOT_AVAILABLE": "There are no notes created for this contact",
     "HEADER": {
       "TITLE": "Notes"
     },
+    "LIST": {
+      "LABEL": "added a note"
+    },
     "ADD": {
       "BUTTON": "Add",
       "PLACEHOLDER": "Add a note",
       "TITLE": "Shift + Enter to create a note"
     },
-    "FOOTER": {
-      "BUTTON": "View all notes"
+    "CONTENT_HEADER": {
+      "DELETE": "Delete note"
     }
   },
   "EVENTS": {
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index aae345c88..f63ad6171 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -103,7 +103,8 @@
   },
   "APP_GLOBAL": {
     "TRIAL_MESSAGE": "days trial remaining.",
-    "TRAIL_BUTTON": "Buy Now"
+    "TRAIL_BUTTON": "Buy Now",
+    "DELETED_USER": "Deleted User"
   },
   "COMPONENTS": {
     "CODE": {
diff --git a/app/javascript/dashboard/i18n/sidebarItems/contacts.js b/app/javascript/dashboard/i18n/sidebarItems/contacts.js
index de858d5db..a1ecf4a7a 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/contacts.js
@@ -3,7 +3,7 @@ import { frontendURL } from '../../helper/URLHelper';
 const contacts = accountId => ({
   routes: [
     'contacts_dashboard',
-    'contacts_dashboard_manage',
+    'contact_profile_dashboard',
     'contacts_labels_dashboard',
   ],
   menuItems: {
diff --git a/app/javascript/dashboard/modules/contact/components/ManageLayout.vue b/app/javascript/dashboard/modules/contact/components/ManageLayout.vue
deleted file mode 100644
index 239a190f1..000000000
--- a/app/javascript/dashboard/modules/contact/components/ManageLayout.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="left">
-      <contact-panel v-if="!uiFlags.isFetchingItem" :contact="contact" />
-    </div>
-    <div class="center"></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],
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    showEmptySearchResult() {
-      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
-      return hasEmptyResults;
-    },
-    contact() {
-      return this.$store.getters['contacts/getContact'](this.contactId);
-    },
-  },
-  mounted() {
-    this.fetchContactDetails();
-  },
-  methods: {
-    fetchContactDetails() {
-      const { contactId: id } = this;
-      this.$store.dispatch('contacts/show', { id });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/mixins';
-
-.wrap {
-  @include three-column-grid(27.2rem);
-  min-height: 0;
-
-  background: var(--color-background-light);
-  border-top: 1px solid var(--color-border);
-}
-.left {
-  overflow: auto;
-}
-.center {
-  border-right: 1px solid var(--color-border);
-  border-left: 1px solid var(--color-border);
-}
-
-.right {
-  padding: var(--space-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
index 256f9435e..6ce3d9c1a 100644
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
@@ -1,8 +1,14 @@
 <template>
-  <note-list :notes="notes" @add="onAdd" @delete="onDelete" />
+  <note-list
+    :is-fetching="uiFlags.isFetching"
+    :notes="notes"
+    @add="onAdd"
+    @delete="onDelete"
+  />
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import NoteList from './components/NoteList';
 
 export default {
@@ -16,6 +22,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({ uiFlags: 'contactNotes/getUIFlags' }),
     notes() {
       return this.$store.getters['contactNotes/getAllNotesByContact'](
         this.contactId
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index 2fe918924..86f046a13 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -1,45 +1,64 @@
 <template>
   <div class="card">
-    <textarea
-      v-model="inputText"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+    <woot-message-editor
+      v-model="noteContent"
       class="input--note"
-      @keydown.enter.shift.exact="onAdd"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      :enable-suggestions="false"
     />
     <div class="footer">
       <woot-button
-        size="tiny"
         color-scheme="warning"
         :title="$t('NOTES.ADD.TITLE')"
         :is-disabled="buttonDisabled"
         @click="onAdd"
       >
-        {{ $t('NOTES.ADD.BUTTON') }}
+        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
       </woot-button>
     </div>
   </div>
 </template>
 
 <script>
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import { hasPressedCommandAndEnter } from 'shared/helpers/KeyboardHelpers';
 export default {
+  components: {
+    WootMessageEditor,
+  },
+
   data() {
     return {
-      inputText: '',
+      noteContent: '',
     };
   },
 
   computed: {
     buttonDisabled() {
-      return this.inputText === '';
+      return this.noteContent === '';
     },
   },
 
+  mounted() {
+    document.addEventListener('keydown', this.onMetaEnter);
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onMetaEnter);
+  },
+
   methods: {
-    onAdd() {
-      if (this.inputText !== '') {
-        this.$emit('add', this.inputText);
+    onMetaEnter(e) {
+      if (hasPressedCommandAndEnter(e)) {
+        e.preventDefault();
+        this.onAdd();
       }
-      this.inputText = '';
+    },
+    onAdd() {
+      if (this.noteContent !== '') {
+        this.$emit('add', this.noteContent);
+      }
+      this.noteContent = '';
     },
   },
 };
@@ -47,12 +66,14 @@ export default {
 
 <style lang="scss" scoped>
 .input--note {
-  font-size: var(--font-size-mini);
-  border-color: transparent;
-  margin-bottom: var(--space-small);
-  padding: 0;
-  resize: none;
-  min-height: var(--space-larger);
+  &::v-deep .ProseMirror-menubar {
+    padding: 0;
+    margin-top: var(--space-minus-small);
+  }
+
+  &::v-deep .ProseMirror-woot-style {
+    max-height: 36rem;
+  }
 }
 
 .footer {
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index 715b4e375..93c9c656b 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -1,26 +1,22 @@
 <template>
   <div class="card note-wrap">
-    <p class="note__content">
-      {{ note }}
-    </p>
-    <div class="footer">
+    <div class="header">
       <div class="meta">
-        <div :title="userName">
-          <thumbnail :src="thumbnail" :username="userName" size="16px" />
-        </div>
+        <thumbnail
+          :title="noteAuthorName"
+          :src="noteAuthor.thumbnail"
+          :username="noteAuthorName"
+          size="20px"
+        />
         <div class="date-wrap">
-          <span>{{ readableTime }}</span>
+          <span class="fw-medium"> {{ noteAuthorName }} </span>
+          <span> {{ $t('NOTES.LIST.LABEL') }} </span>
+          <span class="fw-medium"> {{ readableTime }} </span>
         </div>
       </div>
       <div class="actions">
         <woot-button
-          variant="smooth"
-          size="tiny"
-          icon="ion-compose"
-          color-scheme="secondary"
-          @click="onEdit"
-        />
-        <woot-button
+          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
           icon="ion-trash-b"
@@ -29,19 +25,21 @@
         />
       </div>
     </div>
+    <p class="note__content" v-html="formatMessage(note || '')" />
   </div>
 </template>
 
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import timeMixin from 'dashboard/mixins/time';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
   components: {
     Thumbnail,
   },
 
-  mixins: [timeMixin],
+  mixins: [timeMixin, messageFormatterMixin],
 
   props: {
     id: {
@@ -52,30 +50,29 @@ export default {
       type: String,
       default: '',
     },
-    userName: {
-      type: String,
-      default: '',
+    user: {
+      type: Object,
+      default: () => {},
     },
-    timeStamp: {
+    createdAt: {
       type: Number,
       default: 0,
     },
-    thumbnail: {
-      type: String,
-      default: '',
-    },
   },
 
   computed: {
     readableTime() {
-      return this.dynamicTime(this.timeStamp);
+      return this.dynamicTime(this.createdAt);
+    },
+    noteAuthor() {
+      return this.user || {};
+    },
+    noteAuthorName() {
+      return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
     },
   },
 
   methods: {
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
     onDelete() {
       this.$emit('delete', this.id);
     },
@@ -85,24 +82,23 @@ export default {
 
 <style lang="scss" scoped>
 .note__content {
-  font-size: var(--font-size-mini);
-  margin-bottom: var(--space-smaller);
+  margin-top: var(--space-normal);
 }
 
-.footer {
+.header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  font-size: var(--font-size-mini);
 
   .meta {
     display: flex;
-    padding: var(--space-smaller) 0;
+    align-items: center;
 
     .date-wrap {
       margin-left: var(--space-smaller);
       padding: var(--space-micro);
       color: var(--color-body);
-      font-size: var(--font-size-micro);
     }
   }
   .actions {
diff --git a/app/javascript/dashboard/modules/notes/components/NoteList.vue b/app/javascript/dashboard/modules/notes/components/NoteList.vue
index 656ee3a35..fe094bd76 100644
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -1,39 +1,37 @@
 <template>
   <div>
-    <div class="notelist-wrap">
-      <h3 class="block-title">
-        {{ $t('NOTES.HEADER.TITLE') }}
-      </h3>
-      <add-note @add="onAddNote" />
-      <contact-note
-        v-for="note in notes"
-        :id="note.id"
-        :key="note.id"
-        :note="note.content"
-        :user-name="note.user.name"
-        :time-stamp="note.created_at"
-        :thumbnail="note.user.thumbnail"
-        @edit="onEditNote"
-        @delete="onDeleteNote"
-      />
-      <div class="button-wrap">
-        <woot-button variant="link" @click="onclick">
-          {{ $t('NOTES.FOOTER.BUTTON') }}
-          <i class="ion-arrow-right-c" />
-        </woot-button>
-      </div>
+    <add-note @add="onAddNote" />
+    <contact-note
+      v-for="note in notes"
+      :id="note.id"
+      :key="note.id"
+      :note="note.content"
+      :user="note.user"
+      :created-at="note.created_at"
+      @edit="onEditNote"
+      @delete="onDeleteNote"
+    />
+
+    <div v-if="isFetching" class="text-center p-normal fs-default">
+      <spinner size="" />
+      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
+    </div>
+    <div v-else-if="!notes.length" class="text-center p-normal fs-default">
+      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
     </div>
   </div>
 </template>
 
 <script>
-import ContactNote from './ContactNote';
 import AddNote from './AddNote';
+import ContactNote from './ContactNote';
+import Spinner from 'shared/components/Spinner';
 
 export default {
   components: {
-    ContactNote,
     AddNote,
+    ContactNote,
+    Spinner,
   },
 
   props: {
@@ -41,12 +39,13 @@ export default {
       type: Array,
       default: () => [],
     },
+    isFetching: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {
-    onclick() {
-      this.$emit('show');
-    },
     onAddNote(value) {
       this.$emit('add', value);
     },
@@ -59,9 +58,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.button-wrap {
-  margin-top: var(--space-one);
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 041052a09..3c32b7212 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -1,9 +1,17 @@
 <template>
-  <div class="medium-3 bg-white contact--panel">
-    <span class="close-button" @click="onClose">
+  <div
+    class="small-12 medium-3 bg-white contact--panel"
+    :class="{ 'border-left': showAvatar }"
+  >
+    <span v-if="showAvatar" class="close-button" @click="onClose">
       <i class="ion-android-close close-icon" />
     </span>
-    <contact-info show-new-message :contact="contact" @panel-close="onClose" />
+    <contact-info
+      :show-avatar="showAvatar"
+      show-new-message
+      :contact="contact"
+      @panel-close="onClose"
+    />
     <accordion-item
       :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CUSTOM_ATTRIBUTES')"
       :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
@@ -61,6 +69,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    showAvatar: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     hasContactAttributes() {
@@ -85,7 +97,7 @@ export default {
   overflow-y: auto;
   overflow: auto;
   position: relative;
-  border-left: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
 }
 
 .close-button {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 0cc41d17e..4612c99be 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -28,6 +28,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
+import flag from 'country-code-emoji';
 
 import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -94,10 +95,10 @@ export default {
           ...item,
           phone_number: item.phone_number || '---',
           company: additional.company_name || '---',
-          location: additional.location || '---',
           profiles: additional.social_profiles || {},
           city: additional.city || '---',
-          country: additional.country || '---',
+          country: additional.country,
+          countryCode: additional.country_code,
           conversationsCount: item.conversations_count || '---',
           last_activity_at: lastActivityAt
             ? this.dynamicTime(lastActivityAt)
@@ -128,12 +129,17 @@ export default {
                   status={row.availability_status}
                 />
                 <div class="user-block">
-                  <h6 class="sub-block-title user-name text-truncate">
-                    {row.name}
+                  <h6 class="sub-block-title text-truncate">
+                    <router-link
+                      to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
+                      class="user-name"
+                    >
+                      {row.name}
+                    </router-link>
                   </h6>
-                  <span class="button clear small link">
+                  <button class="button clear small link view-details--button">
                     {this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
-                  </span>
+                  </button>
                 </div>
               </div>
             </woot-button>
@@ -186,6 +192,16 @@ export default {
           key: 'country',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
           align: 'left',
+          renderBodyCell: ({ row }) => {
+            if (row.country) {
+              return (
+                <div class="text-truncate">
+                  {`${flag(row.countryCode)} ${row.country}`}
+                </div>
+              );
+            }
+            return '---';
+          },
         },
         {
           field: 'profiles',
@@ -281,10 +297,15 @@ export default {
 
     .user-name {
       font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
       margin: 0;
       text-transform: capitalize;
     }
 
+    .view-details--button {
+      color: var(--color-body);
+    }
+
     .user-email {
       margin: 0;
     }
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index a94068801..cc4eaf4b6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,81 +1,136 @@
 <template>
-  <div class="contact-manage-view">
-    <contacts-header
-      :search-query="searchQuery"
-      :on-search-submit="onSearchSubmit"
-      :on-input-search="onInputSearch"
-      :on-toggle-create="onToggleCreate"
-    />
-    <manage-layout :contact-id="contactId" />
+  <div class="view-box columns bg-white">
+    <settings-header
+      button-route="new"
+      :header-title="contact.name"
+      show-back-button
+      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
+      :back-url="backUrl"
+      :show-new-button="false"
+    >
+      <thumbnail
+        v-if="contact.thumbnail"
+        :src="contact.thumbnail"
+        :username="contact.name"
+        size="32px"
+        class="margin-right-small"
+      />
+    </settings-header>
 
-    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
+    <div
+      v-if="uiFlags.isFetchingItem"
+      class="text-center p-normal fs-default h-full"
+    >
+      <spinner size="" />
+      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
+    </div>
+    <div
+      v-else-if="contact.id"
+      class="overflow-hidden column contact--dashboard-content"
+    >
+      <div class="row h-full">
+        <contact-info-panel :show-avatar="false" :contact="contact" />
+        <div class="small-12 medium-9 h-full">
+          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+            <woot-tabs-item
+              v-for="tab in tabs"
+              :key="tab.key"
+              :name="tab.name"
+              :show-badge="false"
+            />
+          </woot-tabs>
+          <div class="tab-content overflow-auto">
+            <contact-notes
+              v-if="selectedTabIndex === 0"
+              :contact-id="Number(contactId)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import ContactsHeader from '../components/Header';
-import ManageLayout from 'dashboard/modules/contact/components/ManageLayout';
-import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
+import ContactInfoPanel from '../components/ContactInfoPanel.vue';
+import ContactNotes from 'dashboard/modules/notes/NotesOnContactPage';
+import SettingsHeader from '../../settings/SettingsHeader.vue';
+import Spinner from 'shared/components/Spinner';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 
 export default {
   components: {
-    ContactsHeader,
-    CreateContact,
-    ManageLayout,
+    ContactInfoPanel,
+    ContactNotes,
+    SettingsHeader,
+    Spinner,
+    Thumbnail,
   },
   props: {
     contactId: {
       type: [String, Number],
-      default: 0,
+      required: true,
     },
   },
   data() {
     return {
-      searchQuery: '',
-      showCreateModal: false,
+      selectedTabIndex: 0,
     };
   },
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
     }),
+    tabs() {
+      return [
+        {
+          key: 0,
+          name: this.$t('NOTES.HEADER.TITLE'),
+        },
+      ];
+    },
     showEmptySearchResult() {
       const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
       return hasEmptyResults;
     },
+    contact() {
+      return this.$store.getters['contacts/getContact'](this.contactId);
+    },
+    backUrl() {
+      return `/app/accounts/${this.$route.params.accountId}/contacts`;
+    },
+  },
+  mounted() {
+    this.fetchContactDetails();
   },
-  mounted() {},
   methods: {
-    onInputSearch(event) {
-      const newQuery = event.target.value;
-      const refetchAllContacts = !!this.searchQuery && newQuery === '';
-      if (refetchAllContacts) {
-        this.$store.dispatch('contacts/get', { page: 1 });
-      }
-      this.searchQuery = newQuery;
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
     },
-    onSearchSubmit() {
-      this.selectedContactId = '';
-      if (this.searchQuery) {
-        this.$store.dispatch('contacts/search', {
-          search: this.searchQuery,
-          page: 1,
-        });
-      }
-    },
-    onToggleCreate() {
-      this.showCreateModal = !this.showCreateModal;
+    fetchContactDetails() {
+      const { contactId: id } = this;
+      this.$store.dispatch('contacts/show', { id });
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.contact-manage-view {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex: 1 1 0;
+@import '~dashboard/assets/scss/mixins';
+
+.left {
+  border-right: 1px solid var(--color-border);
+  overflow: auto;
+}
+
+.right {
+  padding: var(--space-normal);
+}
+
+.tab-content {
+  background: var(--color-background-light);
+  height: calc(100% - 40px);
+  padding: var(--space-normal);
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index b8b129435..054b16d7c 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -21,7 +21,7 @@ export const routes = [
   },
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
-    name: 'contacts_dashboard_manage',
+    name: 'contact_profile_dashboard',
     roles: ['administrator', 'agent'],
     component: ContactManageView,
     props: route => {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 8d30ac944..8f7bbc91e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -222,9 +222,8 @@ export default {
       return this.additionalAttributes.initiated_at;
     },
     browserName() {
-      return `${this.browser.browser_name || ''} ${
-        this.browser.browser_version || ''
-      }`;
+      return `${this.browser.browser_name || ''} ${this.browser
+        .browser_version || ''}`;
     },
     contactAdditionalAttributes() {
       return this.contact.additional_attributes || {};
@@ -248,8 +247,10 @@ export default {
       return `${cityAndCountry} ${countryFlag}`;
     },
     platformName() {
-      const { platform_name: platformName, platform_version: platformVersion } =
-        this.browser;
+      const {
+        platform_name: platformName,
+        platform_version: platformVersion,
+      } = this.browser;
       return `${platformName || ''} ${platformVersion || ''}`;
     },
     channelType() {
@@ -403,7 +404,7 @@ export default {
 ::v-deep {
   .contact--profile {
     padding-bottom: var(--space-slab);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border);
   }
   .conversation--actions .multiselect-wrap--small {
     .multiselect {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 829b28e18..8800a6fc7 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -2,6 +2,7 @@
   <div class="contact--profile">
     <div class="contact--info">
       <thumbnail
+        v-if="showAvatar"
         :src="contact.thumbnail"
         size="56px"
         :username="contact.name"
@@ -9,8 +10,16 @@
       />
 
       <div class="contact--details">
-        <h3 class="sub-block-title contact--name">
-          {{ contact.name }}
+        <h3 v-if="showAvatar" class="sub-block-title contact--name">
+          <a
+            :href="contactProfileLink"
+            class="fs-default"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+          >
+            {{ contact.name }}
+            <i class="ion-android-open open-link--icon" />
+          </a>
         </h3>
         <p v-if="additionalAttributes.description" class="contact--bio">
           {{ additionalAttributes.description }}
@@ -25,7 +34,6 @@
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
             show-copy
           />
-
           <contact-info-row
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
@@ -161,6 +169,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showAvatar: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -172,6 +184,9 @@ export default {
   },
   computed: {
     ...mapGetters({ uiFlags: 'contacts/getUIFlags' }),
+    contactProfileLink() {
+      return `/app/accounts/${this.$route.params.accountId}/contacts/${this.contact.id}`;
+    },
     additionalAttributes() {
       return this.contact.additional_attributes || {};
     },
@@ -266,6 +281,16 @@ export default {
 .contact--name {
   text-transform: capitalize;
   white-space: normal;
+
+  a {
+    color: var(--color-body);
+  }
+
+  .open-link--icon {
+    color: var(--color-body);
+    font-size: var(--font-size-small);
+    margin-left: var(--space-smaller);
+  }
 }
 
 .contact--metadata {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index c43577a96..2f91e7087 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -2,8 +2,13 @@
   <div class="settings-header">
     <h1 class="page-title">
       <woot-sidemenu-icon></woot-sidemenu-icon>
-      <back-button v-if="showBackButton" :back-url="backUrl"></back-button>
-      <i :class="iconClass"></i>
+      <back-button
+        v-if="showBackButton"
+        :button-label="backButtonLabel"
+        :back-url="backUrl"
+      />
+      <i v-if="icon" :class="iconClass"></i>
+      <slot></slot>
       <span>{{ headerTitle }}</span>
     </h1>
     <router-link
@@ -51,6 +56,10 @@ export default {
       type: [String, Object],
       default: '',
     },
+    backButtonLabel: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     ...mapGetters({
diff --git a/app/javascript/dashboard/store/modules/contactNotes.js b/app/javascript/dashboard/store/modules/contactNotes.js
index da4555e0d..c7e61ac52 100644
--- a/app/javascript/dashboard/store/modules/contactNotes.js
+++ b/app/javascript/dashboard/store/modules/contactNotes.js
@@ -1,4 +1,4 @@
-import * as types from '../mutation-types';
+import types from '../mutation-types';
 import Vue from 'vue';
 import ContactNotesAPI from '../../api/contactNotes';
 
@@ -13,7 +13,8 @@ export const state = {
 
 export const getters = {
   getAllNotesByContact: _state => contactId => {
-    return _state.records[contactId] || [];
+    const records = _state.records[contactId] || [];
+    return records.sort((r1, r2) => r2.id - r1.id);
   },
   getUIFlags(_state) {
     return _state.uiFlags;
@@ -22,76 +23,58 @@ export const getters = {
 
 export const actions = {
   async get({ commit }, { contactId }) {
-    commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
-      isFetching: true,
-    });
+    commit(types.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true });
     try {
       const { data } = await ContactNotesAPI.get(contactId);
-      commit(types.default.SET_CONTACT_NOTES, { contactId, data });
+      commit(types.SET_CONTACT_NOTES, { contactId, data });
     } catch (error) {
       throw new Error(error);
     } finally {
-      commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
-        isFetching: false,
-      });
+      commit(types.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false });
     }
   },
 
   async create({ commit }, { contactId, content }) {
-    commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
-      isCreating: true,
-    });
+    commit(types.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true });
     try {
-      const { data } = await ContactNotesAPI.create({
-        content,
-        contactId,
-      });
-      commit(types.default.ADD_CONTACT_NOTE, {
-        contactId,
-        data,
-      });
+      const { data } = await ContactNotesAPI.create(contactId, content);
+      commit(types.ADD_CONTACT_NOTE, { contactId, data });
     } catch (error) {
       throw new Error(error);
     } finally {
-      commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
-        isCreating: false,
-      });
+      commit(types.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false });
     }
   },
 
   async delete({ commit }, { noteId, contactId }) {
-    commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
-      isDeleting: true,
-    });
+    commit(types.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true });
     try {
       await ContactNotesAPI.delete(contactId, noteId);
-      commit(types.default.DELETE_CONTACT_NOTE, { contactId, noteId });
+      commit(types.DELETE_CONTACT_NOTE, { contactId, noteId });
     } catch (error) {
       throw new Error(error);
     } finally {
-      commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
-        isDeleting: false,
-      });
+      commit(types.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false });
     }
   },
 };
 
 export const mutations = {
-  [types.default.SET_CONTACT_NOTES_UI_FLAG](_state, data) {
+  [types.SET_CONTACT_NOTES_UI_FLAG](_state, data) {
     _state.uiFlags = {
       ..._state.uiFlags,
       ...data,
     };
   },
 
-  [types.default.SET_CONTACT_NOTES]($state, { data, contactId }) {
+  [types.SET_CONTACT_NOTES]($state, { data, contactId }) {
     Vue.set($state.records, contactId, data);
   },
-  [types.default.ADD_CONTACT_NOTE]($state, { data, contactId }) {
+  [types.ADD_CONTACT_NOTE]($state, { data, contactId }) {
     const contactNotes = $state.records[contactId] || [];
     $state.records[contactId] = [...contactNotes, data];
   },
-  [types.default.DELETE_CONTACT_NOTE]($state, { noteId, contactId }) {
+  [types.DELETE_CONTACT_NOTE]($state, { noteId, contactId }) {
     const contactNotes = $state.records[contactId];
     const withoutDeletedNote = contactNotes.filter(note => note.id !== noteId);
     $state.records[contactId] = [...withoutDeletedNote];
diff --git a/app/javascript/shared/helpers/KeyboardHelpers.js b/app/javascript/shared/helpers/KeyboardHelpers.js
index f5ff556c6..c9a6c6233 100644
--- a/app/javascript/shared/helpers/KeyboardHelpers.js
+++ b/app/javascript/shared/helpers/KeyboardHelpers.js
@@ -10,6 +10,10 @@ export const hasPressedShift = e => {
   return e.shiftKey;
 };
 
+export const hasPressedCommandAndEnter = e => {
+  return e.metaKey && e.keyCode === 13;
+};
+
 export const hasPressedCommandAndForwardSlash = e => {
   return e.metaKey && e.keyCode === 191;
 };
diff --git a/app/models/note.rb b/app/models/note.rb
index fff7d3780..114a6fdbb 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -33,6 +33,8 @@ class Note < ApplicationRecord
   belongs_to :contact
   belongs_to :user
 
+  scope :latest, -> { order(created_at: :desc) }
+
   private
 
   def ensure_account_id
diff --git a/app/views/api/v1/models/_note.json.jbuilder b/app/views/api/v1/models/_note.json.jbuilder
index 93a6a615e..3640bbc2c 100644
--- a/app/views/api/v1/models/_note.json.jbuilder
+++ b/app/views/api/v1/models/_note.json.jbuilder
@@ -2,8 +2,10 @@ json.id resource.id
 json.content resource.content
 json.account_id json.account_id
 json.contact_id json.contact_id
-json.user do
-  json.partial! 'api/v1/models/agent.json.jbuilder', resource: resource.user
+if resource.user.present?
+  json.user do
+    json.partial! 'api/v1/models/agent.json.jbuilder', resource: resource.user
+  end
 end
-json.created_at resource.created_at
-json.updated_at resource.updated_at
+json.created_at resource.created_at.to_i
+json.updated_at resource.updated_at.to_i
diff --git a/yarn.lock b/yarn.lock
index e68f62084..8750fafe6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4309,9 +4309,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001214:
-  version "1.0.30001219"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
-  integrity sha512-c0yixVG4v9KBc/tQ2rlbB3A/bgBFRvl8h8M4IeUbqCca4gsiCfvtaheUssbnux/Mb66Vjz7x8yYjDgYcNQOhyQ==
+  version "1.0.30001271"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz"
+  integrity sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==
 
 capture-exit@^2.0.0:
   version "2.0.0"