vmall/apps/mall/pages/collective.vue

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

const { locale, t } = useI18n();
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("");
const workingId = ref("");
const selectedGroup = reactive<Record<string, string>>({});

const breadcrumb = computed(() => [
  { label: t("stores.breadcrumbHome"), to: "/" },
  { label: t("marketing.collectiveBreadcrumb") },
]);

async function load(): Promise<void> {
  loading.value = true;
  try {
    activities.value = await $api.listGroupBuyingActivities();
  } catch {
    activities.value = [];
  } finally {
    loading.value = false;
  }
}

function chosenGroup(activityId: string): string {
  return selectedGroup[activityId] ?? "";
}

function joined(activity: GroupBuyingActivityView, groupId: string): string {
  const group = activity.open_groups.find((entry) => entry.id === groupId);
  return group ? `${group.paid_member_count}/${group.required_members}` : "";
}

// Opening or joining both add the activity SKU to the cart and stash the
// intent; the server prices and validates it at checkout.
async function start(activity: GroupBuyingActivityView, open: boolean): Promise<void> {
  if (!session.isLoggedIn) {
    await signInThenReturn();
    return;
  }
  error.value = "";
  const groupId = open ? null : chosenGroup(activity.id);
  if (!open && !groupId) {
    error.value = t("marketing.chooseGroup");
    return;
  }
  workingId.value = activity.id;
  try {
    await $api.addCartItem(activity.sku_id, 1);
    // The intent is quantity-1 only, so normalise in case the SKU was already in
    // the cart or a previous attempt failed.
    await $api.updateCartItem(activity.sku_id, 1);
    await cart.refresh();
    useState<GroupBuyIntent | null>("checkout-group-intent", () => null).value = {
      activity_id: activity.id,
      sku_id: activity.sku_id,
      group_id: groupId,
    };
    await router.push("/checkout");
  } catch (err: unknown) {
    error.value = err instanceof ApiError ? err.message : t("marketing.groupFailed");
  } finally {
    workingId.value = "";
  }
}

onMounted(() => {
  session.hydrate();
  void load();
});
</script>

<template>
  <div class="bg-bg text-text min-h-screen pb-14 font-sans">
    <UiBreadcrumb :items="breadcrumb" />
    <section class="max-w-mall bg-surface mx-auto px-4">
      <img
        class="h-[350px] w-full object-cover"
        src="/mock/collective-banner.svg"
        :alt="t('marketing.collectiveBannerAlt')"
      />
      <header class="border-border bg-bg mt-5 border px-4 py-3.5">
        <h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-[17px] font-medium">
          {{ t("marketing.collectiveTitle") }}
        </h1>
      </header>
      <p
        v-if="error"
        class="border-danger/30 bg-danger/10 text-danger my-4 border px-3.5 py-2.5"
        role="alert"
      >
        {{ error }}
      </p>
      <div v-if="loading" class="text-muted py-6">{{ t("common.loading") }}</div>
      <div
        v-else-if="activities.length"
        class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
      >
        <VCard
          v-for="activity in activities"
          :key="activity.id"
          :padded="false"
          class="min-w-0 overflow-hidden"
        >
          <NuxtLink
            :to="`/goods/${activity.product_slug}`"
            class="bg-bg flex h-52 items-center justify-center"
          >
            <img
              class="h-full w-full object-contain"
              :src="activity.image || '/mock/product-1.svg'"
              :alt="pick(activity.product_name, locale)"
              loading="lazy"
            />
          </NuxtLink>
          <div class="p-3.5">
            <NuxtLink
              :to="`/goods/${activity.product_slug}`"
              class="hover:text-primary line-clamp-2 font-medium"
              >{{ pick(activity.name, locale) }}</NuxtLink
            >
            <div class="mt-2 flex items-center justify-between gap-2">
              <span class="text-primary text-lg font-semibold"
                ><PriceText
                  :amount-minor="activity.group_price_minor"
                  :currency="activity.currency" /></span
              ><VBadge tone="red">{{
                t("marketing.peopleGroup", { n: activity.required_members })
              }}</VBadge>
            </div>
            <p class="text-muted my-2 text-sm">
              <s
                ><PriceText
                  :amount-minor="activity.original_price_minor"
                  :currency="activity.original_currency"
              /></s>
            </p>
            <div v-if="activity.open_groups.length" class="grid gap-2">
              <label
                v-for="group in activity.open_groups"
                :key="group.id"
                class="border-border has-[:checked]:border-primary has-[:checked]:bg-primary-soft flex cursor-pointer items-center gap-2 rounded-md border p-2 text-xs"
              >
                <input
                  v-model="selectedGroup[activity.id]"
                  class="accent-primary h-4 w-4"
                  type="radio"
                  :name="`group-${activity.id}`"
                  :value="group.id"
                />
                <span class="flex-1">{{
                  t("marketing.paidMembers", {
                    n: group.paid_member_count,
                    total: group.required_members,
                  })
                }}</span>
                <span class="text-muted">{{
                  group.expires_at.slice(5, 16).replace("T", " ")
                }}</span>
              </label>
            </div>
            <p v-else class="text-muted my-2 text-sm">{{ t("marketing.noOpenGroups") }}</p>
            <div class="mt-3 flex gap-2">
              <VBtn
                class="flex-1"
                variant="primary"
                type="button"
                :disabled="workingId === activity.id"
                @click="start(activity, true)"
                >{{ t("marketing.openGroup") }}</VBtn
              ><VBtn
                class="flex-1"
                type="button"
                :disabled="workingId === activity.id || !chosenGroup(activity.id)"
                @click="start(activity, false)"
                >{{ t("marketing.joinGroup") }}</VBtn
              >
            </div>
            <p v-if="chosenGroup(activity.id)" class="text-muted mt-2 text-sm">
              {{ joined(activity, chosenGroup(activity.id)) }}
            </p>
          </div>
        </VCard>
      </div>
      <UiEmptyState v-else :text="t('marketing.noCollectiveProducts')" />
    </section>
  </div>
</template>