Restructure omni services and add Chatwoot research snapshot

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

@@ -0,0 +1,108 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
+
+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';
+
+const props = defineProps({
+  primaryContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+const store = useStore();
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const dialogRef = ref(null);
+const isSearching = ref(false);
+const searchResults = ref([]);
+
+watch(
+  () => props.primaryContact.id,
+  () => {
+    isSearching.value = false;
+    searchResults.value = [];
+  }
+);
+
+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 = [];
+
+  try {
+    const {
+      data: { payload },
+    } = await ContactAPI.search(query);
+    searchResults.value = payload.filter(
+      contact => contact.id !== props.primaryContact.id
+    );
+  } catch (error) {
+    useAlert(t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
+  } finally {
+    isSearching.value = false;
+  }
+};
+
+const onMergeContacts = async parentContactId => {
+  useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
+  try {
+    await store.dispatch('contacts/merge', {
+      childId: props.primaryContact.id,
+      parentId: parentContactId,
+    });
+    useAlert(t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
+    close();
+    emit('close');
+  } catch (error) {
+    useAlert(t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <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>

research/chatwoot/app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
+
+import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
+import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  primaryContact: {
+    type: Object,
+    required: true,
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  isMerging: {
+    type: Boolean,
+    default: false,
+  },
+  searchResults: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['search', 'submit', 'cancel']);
+
+const { t } = useI18n();
+
+const parentContactId = ref(null);
+
+const validationRules = {
+  parentContactId: { required },
+};
+
+const v$ = useVuelidate(validationRules, { parentContactId });
+
+const parentContact = computed(() => {
+  if (!parentContactId.value) return null;
+  return props.searchResults.find(
+    contact => contact.id === parentContactId.value
+  );
+});
+
+const parentContactName = computed(() => {
+  return parentContact.value ? parentContact.value.name : '';
+});
+
+const primaryContactList = computed(() => {
+  return props.searchResults.map(contact => ({
+    id: contact.id,
+    label: contact.name,
+    value: contact.id,
+    meta: {
+      thumbnail: contact.thumbnail,
+      email: contact.email,
+      phoneNumber: contact.phone_number,
+    },
+  }));
+});
+
+const hasValidationError = computed(() => v$.value.parentContactId.$error);
+const validationErrorMessage = computed(() => {
+  if (v$.value.parentContactId.$error) {
+    return t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR');
+  }
+  return '';
+});
+
+const onSearch = query => {
+  emit('search', query);
+};
+
+const onSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+  emit('submit', parentContactId.value);
+};
+
+const onCancel = () => {
+  emit('cancel');
+};
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <ContactMergeForm
+      :selected-contact="primaryContact"
+      :primary-contact-id="parentContactId"
+      :primary-contact-list="primaryContactList"
+      :is-searching="isSearching"
+      :has-error="hasValidationError"
+      :error-message="validationErrorMessage"
+      @update:primary-contact-id="parentContactId = $event"
+      @search="onSearch"
+    />
+    <MergeContactSummary
+      :primary-contact-name="primaryContact.name"
+      :parent-contact-name="parentContactName"
+    />
+    <div class="flex justify-end gap-2 mt-6">
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('MERGE_CONTACTS.FORM.CANCEL')"
+        @click.prevent="onCancel"
+      />
+      <NextButton
+        type="submit"
+        :is-loading="isMerging"
+        :label="$t('MERGE_CONTACTS.FORM.SUBMIT')"
+      />
+    </div>
+  </form>
+</template>

research/chatwoot/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue

@@ -0,0 +1,49 @@
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    parentContactName: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div
+    v-if="parentContactName"
+    class="my-4 relative p-2.5 border rounded-[4px] text-n-slate-12 border-n-weak bg-n-background"
+  >
+    <h5 class="text-base font-medium text-n-slate-12">
+      {{ $t('MERGE_CONTACTS.SUMMARY.TITLE') }}
+    </h5>
+    <ul class="ml-0 list-none">
+      <li>
+        <span class="inline-block mr-1">❌</span>
+        <span
+          v-dompurify-html="
+            $t('MERGE_CONTACTS.SUMMARY.DELETE_WARNING', {
+              primaryContactName,
+            })
+          "
+        />
+      </li>
+      <li>
+        <span class="inline-block mr-1">✅</span>
+        <span
+          v-dompurify-html="
+            $t('MERGE_CONTACTS.SUMMARY.ATTRIBUTE_WARNING', {
+              primaryContactName,
+              parentContactName,
+            })
+          "
+        />
+      </li>
+    </ul>
+  </div>
+</template>