From e8bc30e3c6a44908f7f80253ed11102cd321d7ff Mon Sep 17 00:00:00 2001
From: substr <36285899+substr2837@users.noreply.github.com>
Date: Mon, 28 Mar 2022 15:49:12 +0700
Subject: [PATCH] feat: Add a confirmation note before deleting a note about a
 contact (#4294)

Co-authored-by: Richardo <richardokusuma.sali@medirecords.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../dashboard/i18n/locale/en/contact.json     |  8 ++++++
 .../modules/notes/components/ContactNote.vue  | 28 +++++++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 037f6f769..002e834cb 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -70,6 +70,14 @@
     "SUCCESS_MESSAGE": "Contacts saved successfully",
     "ERROR_MESSAGE": "There was an error, please try again"
   },
+  "DELETE_NOTE": {
+    "CONFIRM":{
+      "TITLE": "Confirm Deletion",
+      "MESSAGE": "Are you want sure to delete this note?",
+      "YES": "Yes, Delete it",
+      "NO": "No, Keep it"
+    }
+  },
   "DELETE_CONTACT": {
     "BUTTON_LABEL": "Delete Contact",
     "TITLE": "Delete contact",
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index d29c5e7b0..b781d9639 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -21,9 +21,19 @@
           size="tiny"
           icon="delete"
           color-scheme="secondary"
-          @click="onDelete"
+          @click="toggleDeleteModal"
         />
       </div>
+      <woot-delete-modal
+        v-if="showDeleteModal"
+        :show.sync="showDeleteModal"
+        :on-close="closeDelete"
+        :on-confirm="confirmDeletion"
+        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
+        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
+        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
+        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
+      />
     </div>
     <p class="note__content" v-html="formatMessage(note || '')" />
   </div>
@@ -59,7 +69,11 @@ export default {
       default: 0,
     },
   },
-
+  data() {
+    return {
+      showDeleteModal: false,
+    };
+  },
   computed: {
     readableTime() {
       return this.dynamicTime(this.createdAt);
@@ -73,9 +87,19 @@ export default {
   },
 
   methods: {
+    toggleDeleteModal() {
+      this.showDeleteModal = !this.showDeleteModal;
+    },
     onDelete() {
       this.$emit('delete', this.id);
     },
+    confirmDeletion() {
+      this.onDelete();
+      this.closeDelete();
+    },
+    closeDelete() {
+      this.showDeleteModal = false;
+    },
   },
 };
 </script>