Revert "chore: update conversation sidebar interactions (#13988)"

This reverts commit 787fcc4a95.

app/javascript/dashboard/modules/contact/ContactDeleteModal.vue

@@ -1,94 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Popover from 'dashboard/components-next/popover/Popover.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-  getConversationDashboardRoute,
-} from 'dashboard/helper/routeHelpers';
-
-const props = defineProps({
-  contact: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['close', 'deleted']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const uiFlags = useMapGetter('contacts/getUIFlags');
-
-const confirmMessage = computed(
-  () => `${t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${props.contact.name}?`
-);
-
-const onDelete = async hide => {
-  try {
-    await store.dispatch('contacts/delete', props.contact.id);
-    useAlert(t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
-    hide();
-    emit('deleted');
-    emit('close');
-
-    if (isAConversationRoute(route.name)) {
-      router.push({ name: getConversationDashboardRoute(route.name) });
-    } else if (isAInboxViewRoute(route.name)) {
-      router.push({ name: 'inbox_view' });
-    } else if (route.name !== 'contacts_dashboard') {
-      router.push({ name: 'contacts_dashboard' });
-    }
-  } catch (error) {
-    useAlert(error.message || t('DELETE_CONTACT.API.ERROR_MESSAGE'));
-  }
-};
-</script>
-
-<template>
-  <Popover @hide="$emit('close')">
-    <slot name="trigger" />
-    <template #content="{ hide }">
-      <div
-        class="w-full md:w-80 p-6 flex flex-col gap-4 border-0 md:border rounded-xl md:border-n-strong"
-      >
-        <div class="flex flex-col gap-2">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{ $t('DELETE_CONTACT.CONFIRM.TITLE') }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-11">
-            {{ confirmMessage }}
-          </p>
-        </div>
-        <div class="flex items-center justify-end gap-2">
-          <Button
-            faded
-            slate
-            sm
-            :label="$t('DELETE_CONTACT.CONFIRM.NO')"
-            @click="hide"
-          />
-          <Button
-            ruby
-            sm
-            :label="$t('DELETE_CONTACT.CONFIRM.YES')"
-            :is-loading="uiFlags.isDeleting"
-            :disabled="uiFlags.isDeleting"
-            @click="onDelete(hide)"
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -5,8 +5,8 @@ import { useStore } from 'vuex';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useMapGetter } from 'dashboard/composables/store';
 
-import Popover from 'dashboard/components-next/popover/Popover.vue';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ContactAPI from 'dashboard/api/contacts';
 import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 
@@ -23,6 +23,7 @@ const { t } = useI18n();
 const store = useStore();
 const uiFlags = useMapGetter('contacts/getUIFlags');
 
+const dialogRef = ref(null);
 const isSearching = ref(false);
 const searchResults = ref([]);
 
@@ -34,6 +35,21 @@ watch(
   }
 );
 
+const open = () => {
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+defineExpose({ open, close });
+
+const onClose = () => {
+  close();
+  emit('close');
+};
+
 const onContactSearch = async query => {
   isSearching.value = true;
   searchResults.value = [];
@@ -52,7 +68,7 @@ const onContactSearch = async query => {
   }
 };
 
-const onMergeContacts = async (parentContactId, hide) => {
+const onMergeContacts = async parentContactId => {
   useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
   try {
     await store.dispatch('contacts/merge', {
@@ -60,7 +76,7 @@ const onMergeContacts = async (parentContactId, hide) => {
       parentId: parentContactId,
     });
     useAlert(t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
-    hide();
+    close();
     emit('close');
   } catch (error) {
     useAlert(t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
@@ -69,31 +85,24 @@ const onMergeContacts = async (parentContactId, hide) => {
 </script>
 
 <template>
-  <Popover @hide="$emit('close')">
-    <slot name="trigger" />
-    <template #content="{ hide }">
-      <div
-        class="w-full md:w-96 p-6 flex flex-col gap-4 border-0 md:border rounded-xl md:border-n-strong"
-      >
-        <div class="flex flex-col gap-2">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{ $t('MERGE_CONTACTS.TITLE') }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-11">
-            {{ $t('MERGE_CONTACTS.DESCRIPTION') }}
-          </p>
-        </div>
-        <MergeContact
-          :key="primaryContact.id"
-          :primary-contact="primaryContact"
-          :is-searching="isSearching"
-          :is-merging="uiFlags.isMerging"
-          :search-results="searchResults"
-          @search="onContactSearch"
-          @cancel="hide"
-          @submit="id => onMergeContacts(id, hide)"
-        />
-      </div>
-    </template>
-  </Popover>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    width="2xl"
+    :title="$t('MERGE_CONTACTS.TITLE')"
+    :description="$t('MERGE_CONTACTS.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <MergeContact
+      :key="primaryContact.id"
+      :primary-contact="primaryContact"
+      :is-searching="isSearching"
+      :is-merging="uiFlags.isMerging"
+      :search-results="searchResults"
+      @search="onContactSearch"
+      @cancel="onClose"
+      @submit="onMergeContacts"
+    />
+  </Dialog>
 </template>