feat(v4): Compose new conversation

2024-11-15 02:06:20 +05:30
parent bf59285041
commit 9ea992fe45
22 changed files with 1544 additions and 62 deletions
@@ -44,8 +44,6 @@ const ROUTE_MAPPINGS = {
 };

 const onClickViewDetails = async () => {
-  await store.dispatch('contacts/show', { id: props.id });
-
  const dynamicRouteName =
    ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+// import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useAlert } from 'dashboard/composables';
+import camelcaseKeys from 'camelcase-keys';
+
+import ContactAPI from 'dashboard/api/contacts';
+import { debounce } from '@chatwoot/utils';
+
+import ComposeNewConversation from 'dashboard/components-next/NewConversation/ComposeNewConversation.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const contacts = ref([]);
+const isSearching = ref(false);
+const showComposeNewConversation = ref(false);
+
+const contactId = computed(() => route.params.contactId || null);
+
+const generateContactQuery = ({ query }) => {
+  return {
+    payload: [
+      {
+        attribute_key: 'email',
+        filter_operator: 'contains',
+        values: [query],
+        attribute_model: 'standard',
+        custom_attribute_type: '',
+      },
+    ],
+  };
+};
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    contacts.value = [];
+    try {
+      const {
+        data: { payload },
+      } = await ContactAPI.filter(
+        undefined,
+        'name',
+        generateContactQuery({ query })
+      );
+      contacts.value = camelcaseKeys(payload, { deep: true });
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const toggle = () => {
+  showComposeNewConversation.value = !showComposeNewConversation.value;
+};
+
+const closeCompose = () => {
+  showComposeNewConversation.value = false;
+};
+</script>
+
+<template>
+  <div class="relative">
+    <slot
+      name="trigger"
+      :is-open="showComposeNewConversation"
+      :toggle="toggle"
+    />
+
+    <ComposeNewConversation
+      v-if="showComposeNewConversation"
+      :contacts="contacts"
+      :contact-id="contactId"
+      :is-loading="isSearching"
+      @search-contacts="onContactSearch"
+      @discard="closeCompose"
+    />
+  </div>
+</template>
@@ -43,7 +43,7 @@ defineExpose({ dialogRef });
        <Button
          :label="t('DIALOG.BUTTONS.CANCEL')"
          variant="link"
-          class="h-10 hover:no-underline hover:text-n-brand"
+          class="h-10 hover:!no-underline hover:text-n-brand"
          @click="closeDialog"
        />
        <Button
@@ -9,6 +9,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ContactActions from 'dashboard/components-next/Contacts/ContactHeader/ContactActions.vue';
+import ComposeConversation from 'dashboard/components-next/Contacts/ContactsForm/ComposeConversation.vue';

 const props = defineProps({
  searchValue: {
@@ -168,7 +169,11 @@ const updateCurrentPage = page => {
                @more="emit('more')"
              />
              <div v-if="!isDetailView" class="w-px h-4 bg-n-strong" />
-              <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+              <ComposeConversation>
+                <template #trigger="{ toggle }">
+                  <Button :label="buttonLabel" size="sm" @click="toggle" />
+                </template>
+              </ComposeConversation>
            </div>
          </div>
        </div>