tehran_tala/apps/user-app/src/components/product/OrderItemCard.vue

<!--
  One line of an order's contents, restyled into the redesigned design
  language (see components/home/* and HomeView). Ported originally from
  legacy henza_pwa/src/components/product/orderItem.vue.

  Adapted: product/variant title comes from a client-side lookup (see
  useOrderItemProduct.ts) since the real order-items response only carries
  productVariantId.

  DROPPED the "توضیحات: -" row the previous version rendered: our OrderItem
  schema has no note field (legacy's per-item note was a real column there;
  ours isn't), so it could only ever print a dash. An always-empty row is
  noise, not information.
-->
<template>
  <article class="oi">
    <div class="oi__art">
      <img v-if="lookup?.imageUrl" v-lazy="lookup.imageUrl" :alt="lookup?.productTitle ?? ''" />
      <div v-else class="oi__artEmpty" aria-hidden="true">
        <Icon icon="vuesax-linear:diamonds" size="18" />
      </div>
    </div>

    <div class="oi__main">
      <div class="oi__head">
        <h4 class="oi__title">{{ lookup?.productTitle ?? '—' }}</h4>
        <span v-if="lookup?.variantTitle" class="oi__variant">{{ lookup.variantTitle }}</span>
      </div>

      <div class="oi__figures">
        <span class="oi__figure">
          {{ value.quantity }}
          <i>عدد</i>
        </span>
        <span class="oi__figure">
          {{ value.computedWeightGrams }}
          <i>گرم</i>
        </span>
        <span class="oi__figure">
          {{ value.wagePercentSnapshot }}
          <i>٪ اجرت</i>
        </span>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Icon from '../icon/Icon.vue'
import { useOrderItemProduct, type VariantLookup } from '../../composables/useOrderItemProduct'
import type { OrderItemDetail } from '../../api/client'

const props = defineProps<{ value: OrderItemDetail }>()
const { lookup: lookupVariant } = useOrderItemProduct()
const lookup = ref<VariantLookup | undefined>()

onMounted(async () => {
  lookup.value = await lookupVariant(props.value.productVariantId)
})
</script>

<style scoped lang="less">
.oi {
  display: flex;
  gap: 11px;
  padding: 11px;
  background: @canvas;
  border: 1px solid @hairline;
  border-radius: 16px;
}

.oi__art {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: @hairlineSoft;
}

.oi__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

// Dark mode: product photos are shot on white, so they sit on a light mat
// instead of showing as white boxes on a dark card (@photoMat — transparent,
// i.e. no change, in light mode).
html.theme-dark .oi__art img {
  background: @photoMat;
  border-radius: 12px;
}

.oi__artEmpty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: @inkFaint;
}

.oi__main {
  flex: 1;
  min-width: 0;
}

.oi__head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.oi__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: @ink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oi__variant {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: @inkFaint;
}

.oi__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 9px;
}

.oi__figure {
  font-size: 12px;
  font-weight: 700;
  color: @inkSoft;
}
.oi__figure i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: @inkFaint;
  padding-inline-start: 2px;
}
</style>