hedena_gold/apps/user-app/src/components/product/CartItem.vue

<!--
  Cart line item, restyled into the redesigned design language (see
  components/home/* and HomeView): LESS colour tokens, BEM class names,
  hairline borders, wine accent.

  Ported originally from legacy henza_pwa/src/components/product/cartItem.vue.
  Shows اجرت ریالی from selectedVariant.rial_pay when the variant has one;
  the server charges the same figure as OrderItem.flatRialCharge on checkout.

  All cart behaviour is unchanged: quantity increment/decrement, remove at
  qty 1, and the note affordance that opens the parent's drawer.
-->
<template>
  <article class="ci">
    <div class="ci__art">
      <img v-if="image" v-lazy="image" :alt="title" />
      <div v-else class="ci__artEmpty" aria-hidden="true">
        <Icon icon="vuesax-linear:diamonds" size="20" />
      </div>
    </div>

    <div class="ci__main">
      <h3 class="ci__title">{{ title }}</h3>

      <div class="ci__meta">
        <span class="ci__weight">{{ selectedVariant?.rashWeightGrams }} گرم</span>
        <span v-if="wage != null" class="ci__wage">اجرت {{ wageLabel }}٪</span>
      </div>
      <div v-if="rialPay > 0" class="ci__rial">اجرت ریالی {{ price(rialPay) }} ریال</div>

      <div class="ci__row">
        <div class="ci__qty">
          <button
            type="button"
            class="ci__qtyBtn"
            aria-label="افزودن"
            :disabled="!canIncrement"
            @click="increment"
          >
            <Icon icon="vuesax-linear:add" size="16" />
          </button>
          <span class="ci__qtyValue">{{ value.qty }}</span>
          <button
            v-if="value.qty === 1"
            type="button"
            class="ci__qtyBtn ci__qtyBtn--danger"
            aria-label="حذف"
            @click="cart.remove(value)"
          >
            <Icon icon="vuesax-linear:trash" size="16" />
          </button>
          <button v-else type="button" class="ci__qtyBtn" aria-label="کاهش" @click="decrement">
            <Icon icon="vuesax-linear:minus" size="16" />
          </button>
        </div>

        <button type="button" class="ci__note" @click="emit('note', index)">
          <Icon icon="vuesax-linear:note-text" size="15" />
          {{ !value.note || value.note === '' ? 'توضیحات' : 'ویرایش توضیحات' }}
        </button>
      </div>

      <p v-if="value.note" class="ci__noteText">{{ value.note }}</p>
    </div>
  </article>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Icon from '../icon/Icon.vue'
import { useProduct } from '../../composables/useProduct'
import { useCartStore, type CartItem } from '../../stores/cartStore'
import { price } from '../../utils/filters'

const props = defineProps<{ value: CartItem }>()
const emit = defineEmits<{ (e: 'note', value: number): void }>()

const cart = useCartStore()
const index = cart.find_index(props.value)

// Stock ceiling, same rule as the product page: uncapped for a pre-order
// variant, otherwise limited to what is on hand. The store clamps as well.
const maxQty = computed(() => cart.maxQty(props.value))
const canIncrement = computed(() => maxQty.value === null || props.value.qty < maxQty.value)

const increment = () => {
  if (!canIncrement.value) return
  cart.updateFeild(props.value.qty + 1, index, props.value, 'qty')
}
const decrement = () => {
  cart.updateFeild(props.value.qty - 1, index, props.value, 'qty')
}

const { image, title, selectedVariant, wage } = useProduct(props.value.product, cart.variant(props.value))

const wageLabel = computed(() => {
  const w = wage.value
  if (w == null) return ''
  return w % 1 === 0 ? String(w) : w.toFixed(2)
})

const rialPay = computed(() => {
  const n = selectedVariant.value?.rial_pay
  return n != null && Number(n) > 0 ? Number(n) : 0
})
</script>

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

.ci__art {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  overflow: hidden;
  background: @hairlineSoft;
}

.ci__art img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  object-position: center;
  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 .ci__art img {
  background: @photoMat;
  border-radius: 12px;
}

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

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

.ci__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: @ink;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 5px;
}

.ci__weight {
  font-size: 11.5px;
  font-weight: 700;
  color: @inkSoft;
}

.ci__wage {
  font-size: 10.5px;
  color: @inkFaint;
  padding-inline-start: 7px;
  border-inline-start: 1px solid @hairline;
}

.ci__rial {
  padding-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: @inkSoft;
}

.ci__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
}

.ci__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: @hairlineSoft;
  border: 1px solid @hairline;
}

.ci__qtyBtn {
  width: 27px;
  height: 27px;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: @inkSoft;
  background: @canvas;
  transition: transform 0.15s ease, color 0.15s ease;
}

.ci__qtyBtn--danger {
  color: @wine;
}

.ci__qtyBtn:active {
  transform: scale(0.9);
}

.ci__qtyValue {
  min-width: 22px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: @ink;
}

.ci__note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: @wine;
  white-space: nowrap;
}

.ci__noteText {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 11px;
  background: @hairlineSoft;
  font-size: 11.5px;
  line-height: 1.7;
  color: @inkMuted;
}
</style>