feat: persist customer product and shop favorites through the live API

Replace mall fixture favorites with customer-scoped endpoints, and send signed-out shoppers back to the page they left after sign-in.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/mall/pages/collective.vue

@@ -7,6 +7,7 @@ const { $api } = useNuxtApp();
 const session = useSessionStore();
 const cart = useCartStore();
 const router = useRouter();
+const signInThenReturn = useSignInRedirect();
 const activities = ref<GroupBuyingActivityView[]>([]);
 const loading = ref(true);
 const error = ref("");
@@ -42,7 +43,7 @@ function joined(activity: GroupBuyingActivityView, groupId: string): string {
 // intent; the server prices and validates it at checkout.
 async function start(activity: GroupBuyingActivityView, open: boolean): Promise<void> {
   if (!session.isLoggedIn) {
-    await navigateTo("/login");
+    await signInThenReturn();
     return;
   }
   error.value = "";

apps/mall/pages/goods/[id].vue

@@ -14,6 +14,7 @@ const { locale, t } = useI18n();
 const { $api } = useNuxtApp();
 const cart = useCartStore();
 const session = useSessionStore();
+const signInThenReturn = useSignInRedirect();
 
 const routeId = computed(() => {
   const value = route.params.id;
@@ -72,7 +73,7 @@ const claimedIds = ref<Set<string>>(new Set());
 
 async function claim(coupon: CouponTemplate): Promise<void> {
   if (!session.isLoggedIn) {
-    await navigateTo("/login");
+    await signInThenReturn();
     return;
   }
   claimingId.value = coupon.id;
@@ -92,6 +93,10 @@ const selectedAttributes = reactive<Record<string, string>>({});
 const quantity = ref(1);
 const galleryIndex = ref(0);
 const favorite = ref(false);
+const favoriteLoading = ref(false);
+const favoriteBusy = ref(false);
+const favoriteError = ref("");
+let favoriteRequestVersion = 0;
 const cartSuccess = ref(false);
 const activeTab = ref("detail");
 
@@ -116,7 +121,6 @@ watch(
     if (initial) Object.assign(selectedAttributes, initial.attributes);
     quantity.value = 1;
     galleryIndex.value = 0;
-    favorite.value = false;
     cartSuccess.value = false;
     activeTab.value = "detail";
   },
@@ -176,7 +180,7 @@ const addToCart = async (): Promise<boolean> => {
   } catch (error) {
     // A live cart needs a token; send a signed-out shopper to sign in and back.
     if (error instanceof ApiError && error.status === 401) {
-      await router.push(`/login?redirect=${encodeURIComponent(route.fullPath)}`);
+      await signInThenReturn();
       return false;
     }
     throw error;
@@ -198,6 +202,66 @@ const addCart = async (): Promise<void> => {
   }
 };
 
+watch(
+  () => [product.value?.id, session.isLoggedIn] as const,
+  async ([id, loggedIn]) => {
+    const version = ++favoriteRequestVersion;
+    favorite.value = false;
+    favoriteLoading.value = Boolean(id && loggedIn);
+    favoriteBusy.value = false;
+    favoriteError.value = "";
+    if (!id || !loggedIn) return;
+    try {
+      const page = await $api.listFavorites({ kind: "product", target_id: id, per_page: 1 });
+      if (version === favoriteRequestVersion && product.value?.id === id) {
+        favorite.value = page.items.length > 0;
+      }
+    } catch {
+      if (version === favoriteRequestVersion && product.value?.id === id) {
+        favoriteError.value = t("product.favoriteLoadFailed");
+      }
+    } finally {
+      if (version === favoriteRequestVersion) favoriteLoading.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+const toggleFavorite = async (): Promise<void> => {
+  const current = product.value;
+  if (!current || favoriteLoading.value || favoriteBusy.value) return;
+  if (!session.isLoggedIn) {
+    await signInThenReturn();
+    return;
+  }
+  const version = ++favoriteRequestVersion;
+  favoriteBusy.value = true;
+  favoriteError.value = "";
+  try {
+    if (favorite.value) {
+      await $api.removeProductFavorite(current.id);
+      if (version === favoriteRequestVersion && product.value?.id === current.id) {
+        favorite.value = false;
+      }
+    } else {
+      await $api.addProductFavorite(current.id);
+      if (version === favoriteRequestVersion && product.value?.id === current.id) {
+        favorite.value = true;
+      }
+    }
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) {
+      await signInThenReturn();
+      return;
+    }
+    if (version === favoriteRequestVersion && product.value?.id === current.id) {
+      favoriteError.value = t("product.favoriteFailed");
+    }
+  } finally {
+    if (version === favoriteRequestVersion) favoriteBusy.value = false;
+  }
+};
+
 // No reviews tab: there is no reviews capability, and the mall will not present
 // invented reviewers and ratings as fact. See the wave-6 design.
 const tabs = computed(() => [
@@ -256,10 +320,12 @@ const detailImages = computed(() => product.value?.images ?? []);
               type="button"
               class="favorite"
               :class="{ active: favorite }"
+              :disabled="favoriteLoading || favoriteBusy"
               :aria-label="favorite ? t('product.unfavorite') : t('product.favorite')"
-              @click="favorite = !favorite"
+              @click="toggleFavorite"
             >{{ favorite ? "♥" : "♡" }}</button>
           </div>
+          <p v-if="favoriteError" class="favorite-error">{{ favoriteError }}</p>
           <div class="price-panel">
             <span class="price-label">{{ t("product.currentPrice") }}</span>
             <strong v-if="matchedSku" class="price"><PriceText :amount-minor="matchedSku.price_minor" :currency="matchedSku.currency" /></strong>
@@ -489,9 +555,14 @@ h1 {
   padding: 13px 0;
 }
 .summary-meta .soldout,
-.stock-warning {
+.stock-warning,
+.favorite-error {
   color: var(--mall-red);
 }
+.favorite-error {
+  margin: 6px 0 0;
+  font-size: 12px;
+}
 .coupon-row,
 .attribute-row,
 .quantity-row {

apps/mall/pages/integral.vue

@@ -11,6 +11,7 @@ import { ApiError, t as pick } from "@vmall/shared";
 const { locale, t } = useI18n();
 const { $api } = useNuxtApp();
 const session = useSessionStore();
+const signInThenReturn = useSignInRedirect();
 const stats = ref<AccountSummary | null>(null);
 const products = ref<IntegralProduct[]>([]);
 const redemptions = ref<IntegralOrder[]>([]);
@@ -85,7 +86,7 @@ function addressForRedemption(): Address | null {
 
 async function redeem(product: IntegralProduct): Promise<void> {
   if (!session.isLoggedIn) {
-    await navigateTo("/login");
+    await signInThenReturn();
     return;
   }
   const address = addressForRedemption();

apps/mall/pages/stores/[id].vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import { ApiError } from "@vmall/shared";
 import { t as pick } from "@vmall/shared";
 import type { Paged, Product } from "@vmall/shared";
 import { lowestSku } from "~/utils/product";
+import { useSessionStore } from "~/stores/session";
 
 const route = useRoute();
 const { locale, t } = useI18n();
 const { $api } = useNuxtApp();
+const session = useSessionStore();
+const signInThenReturn = useSignInRedirect();
 
 const slug = computed(() => {
   const raw = route.params.id;
@@ -21,6 +25,10 @@ const { data: shop } = await useAsyncData("shop-profile", () => $api.getShop(slu
 const store = computed(() => shop.value);
 
 const favorite = ref(false);
+const favoriteLoading = ref(false);
+const favoriteBusy = ref(false);
+const favoriteError = ref("");
+let favoriteRequestVersion = 0;
 // Only sorts the catalog model can answer; sales and comments have no model.
 const sortMode = ref<"default" | "price">("default");
 const sortOrder = ref<"asc" | "desc">("desc");
@@ -80,6 +88,67 @@ function chooseSort(mode: "default" | "price"): void {
   }
   page.value = 1;
 }
+
+watch(
+  () => [store.value?.id, session.isLoggedIn] as const,
+  async ([id, loggedIn]) => {
+    const version = ++favoriteRequestVersion;
+    favorite.value = false;
+    favoriteLoading.value = Boolean(id && loggedIn);
+    favoriteBusy.value = false;
+    favoriteError.value = "";
+    if (!id || !loggedIn) return;
+    try {
+      const result = await $api.listFavorites({ kind: "shop", target_id: id, per_page: 1 });
+      if (version === favoriteRequestVersion && store.value?.id === id) {
+        favorite.value = result.items.length > 0;
+      }
+    } catch {
+      if (version === favoriteRequestVersion && store.value?.id === id) {
+        favoriteError.value = t("stores.favoriteLoadFailed");
+      }
+    } finally {
+      if (version === favoriteRequestVersion) favoriteLoading.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+const toggleFavorite = async (): Promise<void> => {
+  const current = store.value;
+  if (!current || favoriteLoading.value || favoriteBusy.value) return;
+  if (!session.isLoggedIn) {
+    await signInThenReturn();
+    return;
+  }
+  const version = ++favoriteRequestVersion;
+  favoriteBusy.value = true;
+  favoriteError.value = "";
+  try {
+    if (favorite.value) {
+      await $api.removeShopFavorite(current.id);
+      if (version === favoriteRequestVersion && store.value?.id === current.id) {
+        favorite.value = false;
+      }
+    } else {
+      await $api.addShopFavorite(current.id);
+      if (version === favoriteRequestVersion && store.value?.id === current.id) {
+        favorite.value = true;
+      }
+    }
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) {
+      await signInThenReturn();
+      return;
+    }
+    if (version === favoriteRequestVersion && store.value?.id === current.id) {
+      favoriteError.value = t("stores.favoriteFailed");
+    }
+  } finally {
+    if (version === favoriteRequestVersion) favoriteBusy.value = false;
+  }
+};
+
 </script>
 
 <template>
@@ -112,9 +181,16 @@ function chooseSort(mode: "default" | "price"): void {
               <div v-if="store.region"><dt>{{ t("stores.region") }}</dt><dd>{{ store.region }}</dd></div>
               <div v-if="store.address"><dt>{{ t("stores.address") }}</dt><dd>{{ pick(store.address, locale) }}</dd></div>
             </dl>
-            <button type="button" class="mbtn favorite-button" :class="{ selected: favorite }" @click="favorite = !favorite">
+            <button
+              type="button"
+              class="mbtn favorite-button"
+              :class="{ selected: favorite }"
+              :disabled="favoriteLoading || favoriteBusy"
+              @click="toggleFavorite"
+            >
               {{ favorite ? t("stores.favorited") : t("stores.favorite") }}
             </button>
+            <p v-if="favoriteError" class="favorite-error">{{ favoriteError }}</p>
           </section>
 
           <section v-if="store.notice || store.after_sale" class="mpanel notice-card">
@@ -253,6 +329,11 @@ function chooseSort(mode: "default" | "price"): void {
   border-color: var(--mall-red);
   color: var(--mall-red);
 }
+.favorite-error {
+  margin: 6px 0 0;
+  color: var(--mall-red);
+  font-size: 12px;
+}
 .rail-title {
   margin: 0 0 12px;
   border-left: 3px solid var(--mall-red);

apps/mall/pages/user/favorites.vue

@@ -1,69 +1,117 @@
 <script setup lang="ts">
-import type { Product } from "@vmall/shared";
+import type { Favorite, Paged, ProductFavorite, ShopFavorite } from "@vmall/shared";
 import { t as pick } from "@vmall/shared";
-import { MOCK_FAVORITES, lowestSku, productById, storeById } from "~/mock/data";
 
 definePageMeta({ middleware: "auth" });
 
 const { locale, t } = useI18n();
+const { $api } = useNuxtApp();
 
-const activeTab = ref<"product" | "store">("product");
-const favorites = ref(MOCK_FAVORITES.map((item) => ({ ...item })));
+const activeTab = ref<"product" | "shop">("product");
+const page = ref(1);
+const perPage = 12;
+const loading = ref(true);
+const error = ref("");
+const removingId = ref("");
+const emptyPage: Paged<Favorite> = { items: [], total: 0, page: 1, per_page: perPage };
+const result = ref<Paged<Favorite>>({ ...emptyPage });
+let loadVersion = 0;
 
 const tabs = computed(() => [
   { key: "product", label: t("user.favoriteProductsTab") },
-  { key: "store", label: t("user.favoriteStoresTab") },
+  { key: "shop", label: t("user.favoriteStoresTab") },
 ]);
 
 const productRows = computed(() =>
-  favorites.value
-    .filter((favorite) => favorite.kind === "product")
-    .map((favorite) => productById(favorite.refId))
-    .filter((product): product is Product => product !== null)
-    .map((product) => {
-      const sku = lowestSku(product);
-      return {
-        product,
-        amountMinor: sku?.price_minor ?? null,
-        currency: sku?.currency ?? null,
-      };
-    }),
+  result.value.items.filter((row): row is ProductFavorite => row.kind === "product"),
 );
-
 const storeRows = computed(() =>
-  favorites.value
-    .filter((favorite) => favorite.kind === "store")
-    .map((favorite) => storeById(favorite.refId))
-    .filter((store): store is NonNullable<ReturnType<typeof storeById>> => store !== null),
+  result.value.items.filter((row): row is ShopFavorite => row.kind === "shop"),
 );
 
-function removeProductFavorite(productId: string): void {
-  favorites.value = favorites.value.filter((item) => !(item.kind === "product" && item.refId === productId));
+async function load(): Promise<Paged<Favorite> | null> {
+  const version = ++loadVersion;
+  const requestedKind = activeTab.value;
+  const requestedPage = page.value;
+  loading.value = true;
+  error.value = "";
+  try {
+    const next = await $api.listFavorites({
+      kind: requestedKind,
+      page: requestedPage,
+      per_page: perPage,
+    });
+    if (version !== loadVersion || activeTab.value !== requestedKind || page.value !== requestedPage) {
+      return null;
+    }
+    result.value = next;
+    return next;
+  } catch {
+    if (version === loadVersion && activeTab.value === requestedKind && page.value === requestedPage) {
+      error.value = t("user.favoriteLoadFailed");
+      result.value = { ...emptyPage };
+    }
+    return null;
+  } finally {
+    if (version === loadVersion) loading.value = false;
+  }
 }
 
-function removeStoreFavorite(storeId: string): void {
-  favorites.value = favorites.value.filter((item) => !(item.kind === "store" && item.refId === storeId));
+watch(activeTab, () => {
+  page.value = 1;
+});
+
+watch([activeTab, page], () => {
+  void load();
+}, { immediate: true });
+
+async function removeProductFavorite(productId: string): Promise<void> {
+  if (removingId.value) return;
+  removingId.value = productId;
+  try {
+    await $api.removeProductFavorite(productId);
+    const next = await load();
+    if (next) page.value = Math.min(page.value, Math.max(1, Math.ceil(next.total / next.per_page)));
+  } catch {
+    error.value = t("user.favoriteRemoveFailed");
+  } finally {
+    removingId.value = "";
+  }
 }
 
-
+async function removeStoreFavorite(storeId: string): Promise<void> {
+  if (removingId.value) return;
+  removingId.value = storeId;
+  try {
+    await $api.removeShopFavorite(storeId);
+    const next = await load();
+    if (next) page.value = Math.min(page.value, Math.max(1, Math.ceil(next.total / next.per_page)));
+  } catch {
+    error.value = t("user.favoriteRemoveFailed");
+  } finally {
+    removingId.value = "";
+  }
+}
 </script>
 
 <template>
   <section class="mpanel favorites-panel">
     <h1 class="mpanel-title">{{ t("user.favoritesTitle") }}</h1>
+    <p v-if="error" class="muted">{{ error }}</p>
     <UiTabs v-model="activeTab" :tabs="tabs">
       <template #default>
-        <div v-if="activeTab === 'product'">
+        <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+        <div v-else-if="activeTab === 'product'">
           <UiEmptyState v-if="productRows.length === 0" :text="t('user.noFavorites')" />
           <div v-else class="product-grid">
-            <article v-for="item in productRows" :key="item.product.id" class="product-card hover-lift">
+            <article v-for="item in productRows" :key="item.id" class="product-card hover-lift">
               <NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
-                <img :src="item.product.images[0] || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
+                <img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
               </NuxtLink>
               <div class="content">
                 <NuxtLink :to="`/goods/${item.product.slug}`" class="name">{{ pick(item.product.name, locale) }}</NuxtLink>
-                <PriceText v-if="item.amountMinor !== null && item.currency" :amount-minor="item.amountMinor" :currency="item.currency" />
-                <button class="mbtn" type="button" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
+                <PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
+                <button class="mbtn" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
               </div>
             </article>
           </div>
@@ -72,19 +120,27 @@ function removeStoreFavorite(storeId: string): void {
         <div v-else>
           <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
           <div v-else class="store-list">
-            <article v-for="store in storeRows" :key="store.id" class="store-row">
-              <img :src="store.logo" :alt="pick(store.name, locale)" />
+            <article v-for="item in storeRows" :key="item.id" class="store-row">
+              <img v-if="item.shop.logo" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
+              <span v-else class="store-logo-placeholder">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
               <div class="store-main">
-                <strong>{{ pick(store.name, locale) }}</strong>
-                <span>{{ store.company }}</span>
+                <strong>{{ pick(item.shop.name, locale) }}</strong>
+                <span>{{ item.shop.company }}</span>
               </div>
               <div class="store-actions">
-                <NuxtLink class="mbtn" :to="`/stores/${store.slug}`">{{ t("user.enterStore") }}</NuxtLink>
-                <button class="mbtn" type="button" @click="removeStoreFavorite(store.id)">{{ t("user.removeFavorite") }}</button>
+                <NuxtLink class="mbtn" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
+                <button class="mbtn" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</button>
               </div>
             </article>
           </div>
         </div>
+        <UiPagination
+          v-if="!loading && result.total > result.per_page"
+          :page="result.page"
+          :total="result.total"
+          :per-page="result.per_page"
+          @change="page = $event"
+        />
       </template>
     </UiTabs>
   </section>
@@ -147,13 +203,22 @@ function removeStoreFavorite(storeId: string): void {
 .store-row:last-child {
   margin-bottom: 0;
 }
-.store-row img {
+.store-row img,
+.store-logo-placeholder {
   width: 56px;
   height: 56px;
   border: 1px solid var(--mall-line);
   border-radius: 4px;
   object-fit: cover;
 }
+.store-logo-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+  color: var(--mall-muted);
+  font-size: 18px;
+}
 .store-main {
   display: flex;
   flex: 1;

apps/mall/pages/user/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { AccountSummary, Order, Product } from "@vmall/shared";
+import type { AccountSummary, Order, ProductFavorite } from "@vmall/shared";
 import { t as pick } from "@vmall/shared";
-import { MOCK_FAVORITES, lowestSku, productById } from "~/mock/data";
 
 definePageMeta({ middleware: "auth" });
 
@@ -9,6 +8,8 @@ const { locale, t } = useI18n();
 const { $api } = useNuxtApp();
 const orders = ref<Order[]>([]);
 const stats = ref<AccountSummary | null>(null);
+const favoriteProducts = ref<ProductFavorite[]>([]);
+const favoriteProductTotal = ref(0);
 const loading = ref(true);
 
 async function loadOrders(): Promise<void> {
@@ -30,9 +31,23 @@ async function loadStats(): Promise<void> {
   }
 }
 
+async function loadFavorites(): Promise<void> {
+  try {
+    const page = await $api.listFavorites({ kind: "product", page: 1, per_page: 8 });
+    favoriteProducts.value = page.items.filter(
+      (row): row is ProductFavorite => row.kind === "product",
+    );
+    favoriteProductTotal.value = page.total;
+  } catch {
+    favoriteProducts.value = [];
+    favoriteProductTotal.value = 0;
+  }
+}
+
 onMounted(() => {
   void loadOrders();
   void loadStats();
+  void loadFavorites();
 });
 
 const counts = computed(() => ({
@@ -50,20 +65,6 @@ const statusLinks = computed(() => [
   { key: "completed", label: t("user.completed"), count: counts.value.completed, to: "/user/orders?status=completed" },
   { key: "afterSale", label: t("user.afterSale"), count: counts.value.afterSale, to: "/user/orders?status=after-sale" },
 ]);
-
-const favoriteProducts = computed(() =>
-  MOCK_FAVORITES.filter((favorite) => favorite.kind === "product")
-    .map((favorite) => productById(favorite.refId))
-    .filter((product): product is Product => product !== null)
-    .map((product) => {
-      const sku = lowestSku(product);
-      return {
-        product,
-        amountMinor: sku?.price_minor ?? null,
-        currency: sku?.currency ?? null,
-      };
-    }),
-);
 </script>
 
 <template>
@@ -123,13 +124,13 @@ const favoriteProducts = computed(() =>
     </section>
 
     <section class="mpanel">
-      <h2 class="mpanel-title">{{ t("user.favoriteProducts") }}</h2>
+      <h2 class="mpanel-title">{{ t("user.favoriteProducts") }} ({{ favoriteProductTotal }})</h2>
       <UiEmptyState v-if="favoriteProducts.length === 0" :text="t('user.noFavorites')" />
       <div v-else class="favorite-grid">
-        <NuxtLink v-for="item in favoriteProducts" :key="item.product.id" :to="`/goods/${item.product.slug}`" class="favorite-card hover-lift">
-          <img :src="item.product.images[0] || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
+        <NuxtLink v-for="item in favoriteProducts" :key="item.id" :to="`/goods/${item.product.slug}`" class="favorite-card hover-lift">
+          <img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
           <span>{{ pick(item.product.name, locale) }}</span>
-          <PriceText v-if="item.amountMinor !== null && item.currency" :amount-minor="item.amountMinor" :currency="item.currency" />
+          <PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
         </NuxtLink>
       </div>
     </section>