Unify offers UI to OfferResultCard and require price

app/components/catalog/CatalogOffersSection.vue

@@ -14,24 +14,27 @@
 
       <Grid :cols="1" :md="2" :lg="3" :gap="4">
         <OfferResultCard
-          v-for="(offer, index) in offers"
+          v-for="(offer, index) in offersWithPrice"
           :key="offer.uuid ?? index"
           :location-name="offer.locationName"
           :product-name="offer.title || undefined"
+          :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+          :currency="offer.currency"
+          :unit="offer.unit"
           :stages="[]"
         />
       </Grid>
 
       <Stack v-if="totalOffers > 0" direction="row" align="center" justify="between">
         <Text tone="muted">
-          {{ t('common.pagination.showing', { shown: offers.length, total: totalOffers }) }}
+          {{ t('common.pagination.showing', { shown: offersWithPrice.length, total: totalOffers }) }}
         </Text>
         <Button v-if="canLoadMore" variant="outline" @click="loadMore">
           {{ t('common.actions.load_more') }}
         </Button>
       </Stack>
 
-      <Stack v-if="offers.length === 0" align="center" gap="2">
+      <Stack v-if="offersWithPrice.length === 0" align="center" gap="2">
         <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
       </Stack>
     </Stack>
@@ -51,6 +54,9 @@ interface Offer {
   status?: string | null
   validUntil?: string | null
   lines?: (OfferLine | null)[] | null
+  pricePerUnit?: number | string | null
+  currency?: string | null
+  unit?: string | null
 }
 
 const props = defineProps<{
@@ -63,7 +69,10 @@ const props = defineProps<{
 const localePath = useLocalePath()
 const { t } = useI18n()
 
-const totalOffers = computed(() => props.total ?? props.offers.length)
+const offersWithPrice = computed(() =>
+  (props.offers || []).filter(o => o?.pricePerUnit != null)
+)
+const totalOffers = computed(() => props.total ?? offersWithPrice.value.length)
 const canLoadMore = computed(() => props.canLoadMore ?? false)
 const loadMore = () => {
   props.onLoadMore?.()