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>

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",

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>