feat: Ask to confirm with name before inbox/team deletion (#2370)

app/javascript/dashboard/components/index.js

@@ -6,6 +6,7 @@ import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
+import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import Input from './widgets/forms/Input.vue';
@@ -42,6 +43,7 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
+  ConfirmDeleteModal,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <modal :show.sync="show" :on-close="closeModal">
+    <woot-modal-header :header-title="title" :header-content="message" />
+    <form @submit.prevent="onConfirm">
+      <woot-input
+        v-model="value"
+        type="text"
+        :class="{ error: $v.value.$error }"
+        :placeholder="confirmPlaceHolderText"
+        @blur="$v.value.$touch"
+      />
+      <div class="button-wrapper">
+        <woot-button color-scheme="alert" :is-disabled="$v.value.$invalid">
+          {{ confirmText }}
+        </woot-button>
+        <woot-button class="clear" @click.prevent="closeModal">
+          {{ rejectText }}
+        </woot-button>
+      </div>
+    </form>
+  </modal>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+import Modal from '../../Modal';
+
+export default {
+  components: {
+    Modal,
+  },
+
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    message: {
+      type: String,
+      default: '',
+    },
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    rejectText: {
+      type: String,
+      default: '',
+    },
+    confirmValue: {
+      type: String,
+      default: '',
+    },
+    confirmPlaceHolderText: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      value: '',
+    };
+  },
+  validations: {
+    value: {
+      required,
+      isEqual(value) {
+        return value === this.confirmValue;
+      },
+    },
+  },
+  methods: {
+    closeModal() {
+      this.value = '';
+      this.$emit('on-close');
+    },
+    onConfirm() {
+      this.$emit('on-confirm');
+    },
+  },
+};
+</script>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -215,6 +215,7 @@
       "CONFIRM": {
         "TITLE": "Confirm Deletion",
         "MESSAGE": "Are you sure to delete ",
+        "PLACE_HOLDER": "Please type {inboxName} to confirm",
         "YES": "Yes, Delete ",
         "NO": "No, Keep "
       },

app/javascript/dashboard/i18n/locale/en/teamsSettings.json

@@ -17,7 +17,8 @@
         "TITLE": "Add agents to team - %{teamName}",
         "DESC": "Add Agents to your newly created team. This lets you collaborate as a team on conversations, get notified on new events in the same conversation."
       },
-      "WIZARD": [{
+      "WIZARD": [
+        {
           "title": "Create",
           "route": "settings_teams_new",
           "body": "Create a new team of agents."
@@ -45,7 +46,8 @@
         "TITLE": "Add agents to team - %{teamName}",
         "DESC": "Add Agents to your newly created team. All the added agents will be notified when a conversation is assigned to this team."
       },
-      "WIZARD": [{
+      "WIZARD": [
+        {
           "title": "Team details",
           "route": "settings_teams_edit",
           "body": "Change name, description and other details."
@@ -97,6 +99,7 @@
       },
       "CONFIRM": {
         "TITLE": "Are you sure want to delete - %{teamName}",
+        "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",
         "NO": "Cancel"

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -106,14 +106,16 @@
       :inbox="selectedInbox"
     />
 
-    <woot-delete-modal
+    <woot-confirm-delete-modal
       :show.sync="showDeletePopup"
-      :on-close="closeDelete"
-      :on-confirm="confirmDeletion"
       :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="deleteMessage"
+      :message="confirmDeleteMessage"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
+      :confirm-value="selectedInbox.name"
+      :confirm-place-holder-text="confirmPlaceHolderText"
+      @on-confirm="confirmDeletion"
+      @on-close="closeDelete"
     />
   </div>
 </template>
@@ -153,11 +155,16 @@ export default {
         this.selectedInbox.name
       }`;
     },
-    deleteMessage() {
+    confirmDeleteMessage() {
       return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
         this.selectedInbox.name
       } ?`;
     },
+    confirmPlaceHolderText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        inboxName: this.selectedInbox.name,
+      })}`;
+    },
   },
   methods: {
     openSettings(inbox) {

app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue

@@ -63,15 +63,16 @@
         />
       </div>
     </div>
-
-    <woot-delete-modal
+    <woot-confirm-delete-modal
       :show.sync="showDeletePopup"
-      :on-close="closeDelete"
-      :on-confirm="confirmDeletion"
-      :title="deleteTitle"
+      :title="confirmDeleteTitle"
       :message="$t('TEAMS_SETTINGS.DELETE.CONFIRM.MESSAGE')"
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
+      :confirm-value="selectedTeam.name"
+      :confirm-place-holder-text="confirmPlaceHolderText"
+      @on-confirm="confirmDeletion"
+      @on-close="closeDelete"
     />
   </div>
 </template>
@@ -105,11 +106,16 @@ export default {
     deleteRejectText() {
       return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
     },
-    deleteTitle() {
+    confirmDeleteTitle() {
       return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
         teamName: this.selectedTeam.name,
       });
     },
+    confirmPlaceHolderText() {
+      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
+        teamName: this.selectedTeam.name,
+      })}`;
+    },
   },
   methods: {
     async deleteTeam({ id }) {