From b5534d1fd5395488cf7d6ca03918cb7356834161 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 27 Jan 2026 12:49:19 +0700
Subject: [PATCH] feat(catalog): add KYC profile modal on click

---
 app/pages/catalog/index.vue | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 5d03303..ea1a38f 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -54,6 +54,7 @@
         @add-to-filter="onInfoAddToFilter"
         @open-info="onInfoOpenRelated"
         @select-product="onInfoSelectProduct"
+        @open-kyc="onOpenKyc"
       />
 
       <!-- Quote results: show offers after search -->
@@ -65,6 +66,19 @@
       />
     </template>
   </CatalogPage>
+
+  <!-- KYC Profile Modal -->
+  <dialog ref="kycModalRef" class="modal">
+    <div class="modal-box max-w-2xl bg-base-100">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+      </form>
+      <KycProfileCard :kyc-profile-uuid="kycProfileUuid" />
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
 </template>
 
 <script setup lang="ts">
@@ -346,6 +360,10 @@ const offers = ref<OfferResult[]>([])
 const offersLoading = ref(false)
 const showQuoteResults = ref(false)
 
+// KYC Modal
+const kycModalRef = ref<HTMLDialogElement | null>(null)
+const kycProfileUuid = ref<string | null>(null)
+
 // Watch for search trigger from topnav
 const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
 watch(searchTrigger, () => {
@@ -492,6 +510,13 @@ const onInfoSelectProduct = (uuid: string | null) => {
   setInfoProduct(uuid)
 }
 
+// Handle KYC profile open - show modal with full profile
+const onOpenKyc = (uuid: string | undefined) => {
+  if (!uuid) return
+  kycProfileUuid.value = uuid
+  kycModalRef.value?.showModal()
+}
+
 // Search for offers
 const onSearch = async () => {
   if (!canSearch.value) return