Use offer result cards in catalog and compute routes for supplier offers

app/components/catalog/InfoPanel.vue

@@ -141,12 +141,15 @@
             {{ $t('catalog.empty.noOffers') }}
           </div>
           <div v-else-if="!loadingOffers" class="flex flex-col gap-2">
-            <OfferCard
+            <OfferResultCard
               v-for="(offer, index) in relatedOffers"
               :key="offer.uuid ?? index"
-              :offer="offer"
-              compact
-              selectable
+              :location-name="offer.locationName || offer.locationCountry || offer.locationName"
+              :product-name="offer.productName"
+              :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+              :currency="offer.currency"
+              :unit="offer.unit"
+              :stages="getOfferStages(offer)"
               @select="onOfferSelect(offer)"
             />
           </div>
@@ -217,6 +220,7 @@ import type {
   InfoSupplierItem,
   InfoOfferItem
 } from '~/composables/useCatalogInfo'
+import type { RouteStageType } from '~/composables/graphql/public/geo-generated'
 
 const props = defineProps<{
   entityType: InfoEntityType
@@ -344,4 +348,15 @@ const onSupplierSelect = (supplier: InfoSupplierItem) => {
     emit('open-info', 'supplier', supplier.uuid)
   }
 }
+
+const getOfferStages = (offer: InfoOfferItem) => {
+  const route = offer.routes?.[0]
+  if (!route?.stages) return []
+  return route.stages
+    .filter((stage): stage is NonNullable<RouteStageType> => stage !== null)
+    .map(stage => ({
+      transportType: stage.transportType,
+      distanceKm: stage.distanceKm
+    }))
+}
 </script>