feat(mall): run the transaction chain against the live API

Wave 3 of replacing the fixed-data mock adapter: cart, orders, shipments and
invoices flip together, so one purchase runs end to end against the backend.

- cart: CartItemView carries the line's shop and the SKU's stock, so the cart
  keeps grouping per shop and the quantity stepper caps at real stock instead
  of a hard-coded 999
- contract: Shipment.items is optional and Invoice.invoice_no nullable, both
  matching what the API actually returns. Invoice was declared twice in
  types.ts and TypeScript merges duplicate interfaces, so the duplicate had to
  go for the change to take effect at all
- an anonymous add-to-cart redirects to /login?redirect=..., and sign-in
  honours only same-origin paths
- the fixed-data adapter learns the new cart fields, and its persisted state
  key moves to v2 because a cart saved by an older build is no longer valid
- order surfaces drop their storeById lookups and keep the generic store label
  until the public store read arrives

Verified end to end: two-shop cart grouping with live shop names, stock caps
read from the API, checkout, payment, shipment, delivery confirmation and an
issued invoice. Rollback re-verified with every domain on fixed data and the
backend stopped.

Also checks off Wave 3 in docs/TBD-migrate-wave.md and re-points that file at
the mock content that remains.

OpenSpec change: openspec/changes/replace-mock-api-wave-3

apps/mall/pages/checkout/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { t as pick } from "@vmall/shared";
-import type { Address, CartItem } from "@vmall/shared";
-import { MOCK_ADDRESSES, productById, storeById } from "~/mock/data";
+import type { Address, CartItem, LocalizedText } from "@vmall/shared";
+import { MOCK_ADDRESSES } from "~/mock/data";
 import type { MockAddress } from "~/mock/data";
 
 type CheckoutGroup = {
   shopId: string;
-  store: ReturnType<typeof storeById>;
+  shopName: LocalizedText;
   items: CartItem[];
 };
 
@@ -37,19 +37,19 @@ const selectedAddress = computed<MockAddress | null>(
   () => MOCK_ADDRESSES.find((address) => address.id === selectedAddressId.value) ?? null,
 );
 
+// Grouped by the cart line's own shop, which the cart API returns.
 const groups = computed<CheckoutGroup[]>(() => {
-  const grouped = new Map<string, CartItem[]>();
+  const grouped = new Map<string, CheckoutGroup>();
   for (const item of items.value) {
-    const shopId = productById(item.product_id)?.shop_id ?? "unknown";
-    const groupItems = grouped.get(shopId) ?? [];
-    groupItems.push(item);
-    grouped.set(shopId, groupItems);
+    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 Array.from(grouped, ([shopId, groupItems]) => ({
-    shopId,
-    store: shopId === "unknown" ? null : storeById(shopId),
-    items: groupItems,
-  }));
+  return [...grouped.values()];
 });
 
 const sourceCurrency = computed(() => items.value[0]?.currency ?? currency.value);
@@ -58,7 +58,7 @@ const totalMinor = computed(() =>
 );
 
 function imageFor(item: CartItem): string {
-  return productById(item.product_id)?.images[0] ?? item.image ?? "/mock/product-1.svg";
+  return item.image ?? "/mock/product-1.svg";
 }
 
 function toAddress(address: MockAddress): Address {
@@ -144,8 +144,7 @@ onMounted(() => void loadCart());
           <h2 class="section-title">{{ t("checkout.orderPreview") }}</h2>
           <div v-for="group in groups" :key="group.shopId" class="order-group">
             <header class="shop-heading">
-              <img v-if="group.store" :src="group.store.logo" :alt="pick(group.store.name, locale)" />
-              <span>{{ group.store ? pick(group.store.name, locale) : t("checkout.shop") }}</span>
+              <span>{{ pick(group.shopName, locale) || t("checkout.shop") }}</span>
             </header>
             <div v-for="item in group.items" :key="item.sku_id" class="order-item">
               <img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />

apps/mall/pages/checkout/pay.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { t as pick } from "@vmall/shared";
 import type { Order } from "@vmall/shared";
-import { storeById } from "~/mock/data";
 
 definePageMeta({ middleware: "auth" });
 
@@ -37,11 +36,6 @@ function imageFor(image: string | null): string {
   return image ?? "/mock/product-1.svg";
 }
 
-function storeName(shopId: string): string {
-  const store = storeById(shopId);
-  return store ? pick(store.name, locale.value) : t("checkout.shop");
-}
-
 async function loadOrders(): Promise<void> {
   loading.value = true;
   error.value = "";
@@ -91,7 +85,8 @@ onMounted(() => void loadOrders());
           <article v-for="order in orders" :key="order.id" class="mpanel order-card">
             <header class="order-heading">
               <span>{{ t("checkout.orderNo") }}: {{ order.order_no }}</span>
-              <span class="shop-name">{{ storeName(order.shop_id) }}</span>
+              <!-- Store names need the public store read; see docs/TBD-migrate-wave.md. -->
+              <span class="shop-name">{{ t("checkout.shop") }}</span>
             </header>
             <div v-for="item in order.items" :key="item.id" class="order-item">
               <img :src="imageFor(item.image)" :alt="pick(item.product_name, locale)" />