From ab3fee82f457bbfde2012a9f97d7917350b4d62c Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:12:40 +0700
Subject: [PATCH] fix: stabilize quote flow header and step cards

---
 app/components/navigation/MainNavigation.vue |  8 +++++---
 app/pages/catalog/destination.vue            | 19 +++----------------
 app/pages/catalog/product.vue                |  9 +++------
 app/pages/catalog/quantity.vue               | 14 --------------
 4 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 01893cf..43769c1 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -34,7 +34,7 @@
           <nav class="flex items-center gap-1">
             <button
               class="px-3 py-1 text-sm font-medium rounded-full transition-colors"
-              :class="showActiveMode && catalogMode === 'explore' && !isClientArea
+              :class="showActiveMode && isExploreModeActive && !isClientArea
                 ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
                 : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
               @click="$emit('set-catalog-mode', 'explore')"
@@ -44,7 +44,7 @@
             <NuxtLink
               :to="localePath('/catalog/product')"
               class="px-3 py-1 text-sm font-medium rounded-full transition-colors"
-              :class="isQuoteStepPage
+              :class="isQuoteModeActive
                 ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
                 : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
             >
@@ -134,7 +134,7 @@
         </template>
 
         <!-- Quote mode: Step-based capsule navigation (like logistics) -->
-        <template v-else-if="catalogMode === 'quote'">
+        <template v-else-if="isQuoteModeActive">
           <div
             class="flex items-center rounded-full pill-glass overflow-hidden"
             :class="searchCapsuleClass"
@@ -456,6 +456,8 @@ const isQuoteStepPage = computed(() => {
     path.includes('/catalog/quantity') ||
     path.includes('/catalog/results')
 })
+const isQuoteModeActive = computed(() => isQuoteStepPage.value || props.catalogMode === 'quote')
+const isExploreModeActive = computed(() => !isQuoteStepPage.value && props.catalogMode === 'explore')
 
 // Navigate to search results (quote mode step flow)
 const navigateToSearch = () => {
diff --git a/app/pages/catalog/destination.vue b/app/pages/catalog/destination.vue
index a0a878c..c1f64b3 100644
--- a/app/pages/catalog/destination.vue
+++ b/app/pages/catalog/destination.vue
@@ -28,20 +28,9 @@
             <div class="w-10 h-1 bg-base-300 rounded-full" />
           </div>
 
-          <div class="flex items-center justify-between mb-1">
-            <div>
-              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 2 }) }}</p>
-              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectDestination') }}</h2>
-            </div>
-            <span class="badge badge-neutral">{{ hubs.length }}</span>
-          </div>
-
-          <!-- Selected product chip -->
-          <div v-if="productName" class="flex items-center gap-2 mt-2 mb-1">
-            <span class="badge badge-warning gap-1">
-              <Icon name="lucide:package" size="12" />
-              {{ productName }}
-            </span>
+          <div class="mb-1">
+            <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 2 }) }}</p>
+            <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectDestination') }}</h2>
           </div>
 
           <!-- Search input -->
@@ -105,8 +94,6 @@ const searchQuery = ref('')
 
 // Get product from query
 const productUuid = computed(() => route.query.product as string | undefined)
-const productName = computed(() => route.query.productName as string | undefined)
-
 // Load hubs (filtered by product if available)
 const { items: hubs, isLoading, init: initHubs, setProductFilter } = useCatalogHubs()
 
diff --git a/app/pages/catalog/product.vue b/app/pages/catalog/product.vue
index 86acb01..0fdf2f0 100644
--- a/app/pages/catalog/product.vue
+++ b/app/pages/catalog/product.vue
@@ -30,12 +30,9 @@
             <div class="w-10 h-1 bg-base-300 rounded-full" />
           </div>
 
-          <div class="flex items-center justify-between mb-1">
-            <div>
-              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 1 }) }}</p>
-              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectProduct') }}</h2>
-            </div>
-            <span class="badge badge-neutral">{{ products.length }}</span>
+          <div class="mb-1">
+            <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 1 }) }}</p>
+            <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectProduct') }}</h2>
           </div>
 
           <!-- Search input -->
diff --git a/app/pages/catalog/quantity.vue b/app/pages/catalog/quantity.vue
index 425f721..1bc5420 100644
--- a/app/pages/catalog/quantity.vue
+++ b/app/pages/catalog/quantity.vue
@@ -31,19 +31,6 @@
           <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 3 }) }}</p>
           <h2 class="text-2xl font-black tracking-tight text-base-content mb-4">{{ $t('catalog.steps.setQuantity') }}</h2>
 
-          <!-- Selected product + hub chips -->
-          <div class="flex flex-wrap items-center gap-2 mb-6">
-            <span v-if="productName" class="badge badge-warning gap-1">
-              <Icon name="lucide:package" size="12" />
-              {{ productName }}
-            </span>
-            <Icon name="lucide:arrow-right" size="14" class="text-base-content/30" />
-            <span v-if="hubName" class="badge badge-success gap-1">
-              <Icon name="lucide:warehouse" size="12" />
-              {{ hubName }}
-            </span>
-          </div>
-
           <!-- Quantity input -->
           <div class="form-control w-full max-w-xs">
             <label class="label">
@@ -92,7 +79,6 @@ const mapRef = ref(null)
 const qty = ref('100')
 
 const productUuid = computed(() => route.query.product as string | undefined)
-const productName = computed(() => route.query.productName as string | undefined)
 const hubUuid = computed(() => route.query.hub as string | undefined)
 const hubName = computed(() => route.query.hubName as string | undefined)