vmall/apps/mall/pages/cart.vue

<script setup lang="ts">
import { t as pick } from "@vmall/shared";
import type { CartItem, LocalizedText } from "@vmall/shared";

type CartGroup = {
  shopId: string;
  shopName: LocalizedText;
  items: CartItem[];
};

const { $api } = useNuxtApp();
const { locale, t } = useI18n();
const { currency } = usePrefs();
const cartStore = useCartStore();
const router = useRouter();

const items = ref<CartItem[]>([]);
const selected = reactive<Record<string, boolean>>({});
const loading = ref(true);
const mutating = ref(false);
const error = ref("");

const stepLabels = computed(() => [
  t("cart.steps.cart"),
  t("cart.steps.order"),
  t("cart.steps.payment"),
  t("cart.steps.complete"),
]);

// Grouped by the line's own shop, which the cart API returns; the fixed-data
// catalog is no longer consulted for shop or stock.
const groups = computed<CartGroup[]>(() => {
  const grouped = new Map<string, CartGroup>();
  for (const item of items.value) {
    const group = grouped.get(item.shop_id) ?? {
      shopId: item.shop_id,
      shopName: item.shop_name,
      items: [],
    };
    group.items.push(item);
    grouped.set(item.shop_id, group);
  }
  return [...grouped.values()];
});

const selectedItems = computed(() => items.value.filter((item) => selected[item.sku_id]));
const allSelected = computed(
  () => items.value.length > 0 && items.value.every((item) => selected[item.sku_id]),
);
const selectedCurrency = computed(() => selectedItems.value[0]?.currency ?? currency.value);
const selectedTotalMinor = computed(() =>
  selectedItems.value.reduce((total, item) => total + item.unit_price_minor * item.qty, 0),
);

function imageFor(item: CartItem): string {
  return item.image ?? "/mock/product-1.svg";
}

function maxFor(item: CartItem): number {
  // Advisory stock from the cart line; checkout is what actually enforces it.
  return Math.max(1, item.stock);
}

async function loadCart(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    const snapshot = await $api.getCart();
    const previous = { ...selected };
    for (const skuId of Object.keys(selected)) delete selected[skuId];
    items.value = snapshot.items;
    for (const item of items.value) selected[item.sku_id] = previous[item.sku_id] ?? true;
  } catch {
    error.value = t("cart.loadError");
  } finally {
    loading.value = false;
  }
}

function setAllSelected(checked: boolean): void {
  for (const item of items.value) selected[item.sku_id] = checked;
}

function onSelectionChange(skuId: string, event: Event): void {
  selected[skuId] = (event.target as HTMLInputElement).checked;
}

async function updateQuantity(item: CartItem, qty: number): Promise<void> {
  mutating.value = true;
  error.value = "";
  try {
    await $api.updateCartItem(item.sku_id, qty);
    await loadCart();
    await cartStore.refresh();
  } catch {
    error.value = t("cart.updateError");
  } finally {
    mutating.value = false;
  }
}

async function removeItem(item: CartItem): Promise<void> {
  mutating.value = true;
  error.value = "";
  try {
    await $api.removeCartItem(item.sku_id);
    await loadCart();
    await cartStore.refresh();
  } catch {
    error.value = t("cart.updateError");
  } finally {
    mutating.value = false;
  }
}

async function goToCheckout(): Promise<void> {
  if (selectedItems.value.length === 0) return;
  await router.push("/checkout");
}

onMounted(() => void loadCart());
</script>

<template>
  <div class="min-h-screen bg-bg font-sans text-text">
    <div class="mx-auto max-w-mall px-4 py-6">
      <UiStepBar :steps="stepLabels" :active="0" />
      <header class="mb-4 flex items-center">
        <h1 class="m-0 text-xl font-medium">{{ t("cart.title") }}</h1>
      </header>

      <p v-if="error" class="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
      <template v-if="!loading && items.length > 0">
        <VCard v-for="group in groups" :key="group.shopId" :padded="false" class="mb-4 overflow-hidden">
          <header class="flex items-center gap-2 border-b border-border px-4 py-3 text-sm">
            <span class="text-muted">{{ t("cart.shop") }}</span>
            <strong>{{ pick(group.shopName, locale) || t("cart.unknownStore") }}</strong>
          </header>
          <VTable>
            <thead>
              <tr>
                <th class="w-10" />
                <th>{{ t("cart.product") }}</th>
                <th>{{ t("cart.spec") }}</th>
                <th>{{ t("cart.unitPrice") }}</th>
                <th>{{ t("cart.quantity") }}</th>
                <th>{{ t("cart.subtotal") }}</th>
                <th>{{ t("cart.actions") }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in group.items" :key="item.sku_id">
                <td>
                  <input
                    :checked="Boolean(selected[item.sku_id])"
                    class="h-4 w-4 accent-primary"
                    type="checkbox"
                    :aria-label="pick(item.product_name, locale)"
                    @change="onSelectionChange(item.sku_id, $event)"
                  />
                </td>
                <td>
                  <div class="flex items-center gap-3">
                    <img class="h-14 w-14 shrink-0 object-cover" :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
                    <span>{{ pick(item.product_name, locale) }}</span>
                  </div>
                </td>
                <td class="text-muted">{{ item.sku_code }}</td>
                <td><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></td>
                <td>
                  <UiQtyStepper
                    :model-value="item.qty"
                    :max="maxFor(item)"
                    @update:model-value="updateQuantity(item, $event)"
                  />
                </td>
                <td class="font-semibold text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></td>
                <td>
                  <button type="button" class="cursor-pointer text-sm text-primary hover:text-primary-hover disabled:opacity-50" :disabled="mutating" @click="removeItem(item)">
                    {{ t("cart.remove") }}
                  </button>
                </td>
              </tr>
            </tbody>
          </VTable>
        </VCard>

        <footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
          <label class="flex items-center gap-2 text-sm">
            <input :checked="allSelected" class="h-4 w-4 accent-primary" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
            <span>{{ t("cart.selectAll") }}</span>
          </label>
          <span class="text-sm text-muted">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
          <span class="text-sm">{{ t("cart.subtotal") }}:</span>
          <strong class="text-lg text-primary"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
          <VBtn variant="primary" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">{{ t("cart.checkout") }}</VBtn>
        </footer>
      </template>

      <VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
        <UiEmptyState :text="t('cart.empty')" />
        <NuxtLink class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/">{{ t("cart.continueShopping") }}</NuxtLink>
      </VCard>
      <div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
    </div>
  </div>
</template>