webapp/app/components/catalog/SupplierCard.vue

<template>
  <component
    :is="linkable ? NuxtLink : 'div'"
    :to="linkable ? localePath(`/catalog?supplier=${supplier.uuid}`) : undefined"
    class="block"
    :class="{ 'cursor-pointer': selectable }"
    @click="selectable && $emit('select')"
  >
    <Card
      padding="small"
      :interactive="linkable || selectable"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
      <div class="flex flex-col gap-3">
        <!-- Top row: Info + Logo (logo on right) -->
        <div class="flex gap-3 items-start">
          <!-- Info (left) -->
          <div class="min-w-0 flex-1">
            <!-- Name with verified badge -->
            <div class="flex items-center gap-1.5">
              <span v-if="supplier.isVerified" class="text-primary text-sm">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                  <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
                </svg>
              </span>
              <Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
            </div>
            <!-- Country -->
            <Text tone="muted" size="sm">
              {{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
            </Text>
          </div>

          <!-- Logo (right) -->
          <div v-if="supplier.logo" class="w-12 h-12 shrink-0">
            <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
          </div>
          <div v-else class="w-12 h-12 shrink-0 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg">
            {{ supplier.name?.charAt(0) }}
          </div>
        </div>

        <!-- Bottom row: Badges/Chips -->
        <div class="flex flex-wrap gap-1">
          <span v-if="reliabilityLabel" class="badge badge-neutral badge-sm">
            {{ reliabilityLabel }}
          </span>
        </div>
      </div>
    </Card>
  </component>
</template>

<script setup lang="ts">
import { NuxtLink } from '#components'

interface Supplier {
  uuid?: string | null
  teamUuid?: string | null
  name?: string | null
  country?: string | null
  countryCode?: string | null
  logo?: string | null
  onTimeRate?: number | null
  offersCount?: number | null
  isVerified?: boolean | null
}

const props = defineProps<{
  supplier: Supplier
  selectable?: boolean
  isSelected?: boolean
}>()

defineEmits<{
  (e: 'select'): void
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const linkable = computed(() => !props.selectable && !!props.supplier.uuid)

const reliabilityLabel = computed(() => {
  if (props.supplier.onTimeRate !== undefined && props.supplier.onTimeRate !== null) {
    return t('catalogSupplier.labels.on_time', { percent: Math.round(props.supplier.onTimeRate * 100) })
  }
  if (props.supplier.isVerified) {
    return t('catalogSupplier.labels.trusted_partner')
  }
  return t('catalogSupplier.labels.on_time_default')
})

// ISO code to emoji flag
const isoToEmoji = (code: string): string => {
  return code.toUpperCase().split('').map(char => String.fromCodePoint(0x1F1E6 - 65 + char.charCodeAt(0))).join('')
}

const countryFlag = computed(() => {
  if (props.supplier.countryCode) {
    return isoToEmoji(props.supplier.countryCode)
  }
  return '🌍'
})
</script>