Marketplace

interface ProductFilterState {
  q: string;
  category: string;      // "" = all
  subCategory: string;   // "" = all
  type: "" | "DIGITAL" | "PHYSICAL";
  sort: "newest" | "price_asc" | "price_desc" | "name";
  price: "" | "free" | "paid";
  seller: "" | "community" | "member";
  minPrice: number | null; // smallest currency unit
  maxPrice: number | null;
}

// app/shop/page.tsx (server component)
import { fromProductSearchParams, toProductQuery, toProductFacetsQuery } from "@cobuntu/embed-react/products";
import { cobuntu } from "@/lib/cobuntu";
import { ShopBrowser } from "./ShopBrowser";
 
export default async function ShopPage({ searchParams }: { searchParams: Promise<Record<string, string>> }) {
  const state = fromProductSearchParams(await searchParams);
  const [list, facets] = await Promise.all([
    cobuntu.products.list({ ...toProductQuery(state), limit: 24 }),
    cobuntu.products.facets(toProductFacetsQuery(state)),
  ]);
  return <ShopBrowser initial={state} list={list} facets={facets} />;
}

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { ProductFilters, ProductGrid, toProductSearchParams, type ProductFilterState } from "@cobuntu/embed-react";
 
export function ShopBrowser({ initial, list, facets }) {
  const router = useRouter();
  const [state, setState] = useState<ProductFilterState>(initial);
  const update = (next: ProductFilterState) => {
    setState(next);
    const qs = toProductSearchParams(next, window.location.search).toString();
    router.replace(qs ? `?${qs}` : "?", { scroll: false });
  };
  return (
    <>
      <ProductFilters value={state} onChange={update} facets={facets} resultCount={list.pagination.total} />
      <ProductGrid products={list.products} href={(p) => `/shop/${p.sku ?? p.id}`} />
    </>
  );
}

"use client";
import { ProductView, type ProductSelection } from "@cobuntu/embed-react";
 
export function ProductPage({ product }) {
  const addToBasket = (s: ProductSelection) => basket.add({
    key: `${s.product.id}:${s.tierId ?? ""}`, productId: s.product.id, tierId: s.tierId,
    quantity: s.quantity, customAmount: s.customAmount, name: s.product.name,
    variantName: s.variant?.name, unitPrice: s.variant?.product?.price ?? s.product.price, currency: s.product.currency,
  });
  const buyNow = async (s: ProductSelection) => {
    const res = await fetch("/api/checkout", { method: "POST", body: JSON.stringify({ items: [{ productId: s.product.id, tierId: s.tierId ?? undefined, quantity: s.quantity, customAmount: s.customAmount }] }) });
    const { checkoutUrl } = await res.json();
    if (checkoutUrl) window.location.href = checkoutUrl;
  };
  return <ProductView product={product} onAddToBasket={addToBasket} onBuyNow={buyNow} />;
}

<Basket
  lines={lines}
  onQuantityChange={(key, qty) => basket.setQuantity(key, qty)}
  onRemove={(key) => basket.remove(key)}
  quote={(items) => fetch("/api/quote", { method: "POST", body: JSON.stringify({ items }) }).then((r) => r.json())}
  onCheckout={(items) => startCheckout(items)}
/>

basket.add({
  key: `ticket:${event.slug}:${tier.id}`,
  kind: "ticket",
  tierId: tier.id,
  eventId: event.id,
  eventName: event.name,
  eventDate: event.startDate,
  name: event.name,
  variantName: tier.name,
  quantity: 2,
  unitPrice: tier.price,
  currency: tier.currency,
  attendees: [{}, { name: "Sam Lee", email: "sam@example.com" }],
});

<CheckoutSummary quote={quote} fallbackSubtotal={localSubtotal} currency="EUR" />

const [taxId, setTaxId] = useState<CbTaxId | null>(null);
<VatInput value={taxId} onChange={setTaxId} locale="en" />
// at checkout: taxId: toTaxId(taxId)

const steps = splitBasket(items, quote.groups); // MAIN first
await startCheckout(steps[0].items);           // keep the rest for later

<PurchasesList
  purchases={purchases}
  onDownload={async (p, d) => {
    const { url } = await fetch(`/api/download/${p.saleId}/${d.attachmentId}`).then((r) => r.json());
    window.location.href = url;
  }}
  invoiceHref={(p) => `/api/invoice/${p.saleId}`}
  receiptHref={(p) => `/api/receipt/${p.saleId}`}
  onRefund={(p) => openRefundDialog(p)}
/>