@aglyn/plugins-commerce 1.0.0-beta.143

package/src/lib/components/product-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/product-grid.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport { mdiMagnify, mdiViewGridOutline } from '@aglyn/shared-data-mdi'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardActionArea from '@mui/material/CardActionArea'\nimport CardContent from '@mui/material/CardContent'\nimport CardMedia from '@mui/material/CardMedia'\nimport Chip from '@mui/material/Chip'\nimport InputAdornment from '@mui/material/InputAdornment'\nimport MenuItem from '@mui/material/MenuItem'\nimport Skeleton from '@mui/material/Skeleton'\nimport Slider from '@mui/material/Slider'\nimport SvgIcon from '@mui/material/SvgIcon'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'product-grid'\n\nexport interface ProductGridProps {\n  /** Filter source; 'all' lists the whole active catalog. */\n  source?: 'all' | 'collection' | 'category' | 'tag'\n  /** Collection id when source = collection (rename-safe, AGL-343). */\n  collectionId?: string\n  /** Legacy collection slug; used only when no collectionId is set.\n   * Blank follows the /collections/{slug} URL (AGL-298). */\n  collectionSlug?: string\n  /** Faceted controls above the grid: tags, availability, sort. */\n  showFilters?: boolean\n  /** Debounced visitor search box above the grid (server-side, AGL-561). */\n  showSearch?: boolean\n  /** Category filter chips from the host's categories (AGL-561). */\n  showCategories?: boolean\n  /** Sort select: newest, name, price low→high / high→low (AGL-561). */\n  showSort?: boolean\n  /** Physical / digital / services filter chips (AGL-561). */\n  showTypeFilter?: boolean\n  /** Price range slider bounded by the catalog's prices (AGL-564). */\n  showPriceFilter?: boolean\n  /** Products per page; shows a Load more button while more remain. */\n  pageSize?: number\n  /** Category id when source = category (rename-safe, AGL-343). */\n  categoryId?: string\n  /** Legacy category slug; used only when no categoryId is set. */\n  categorySlug?: string\n  /** Tag when source = tag. */\n  tag?: string\n  sort?: 'name' | 'price-asc' | 'price-desc' | 'newest'\n  /** Grid columns on desktop (1-6); mobile always stacks to 2/1. */\n  columns?: number\n  maxItems?: number\n  /** Empty-state copy when nothing matches. */\n  emptyText?: string\n}\n\ninterface CatalogItem {\n  id: string\n  name: string\n  slug: string\n  priceUsd: number\n  maxPriceUsd: number\n  compareAtPriceUsd?: number\n  imageUrl?: string\n  soldOut: boolean\n  tags?: string[]\n}\n\ninterface CatalogCategory {\n  id: string\n  name: string\n  slug: string\n}\n\n/** Price facet from the catalog handler, in cents (AGL-564). */\ninterface CatalogPriceBounds {\n  minCents: number\n  maxCents: number\n}\n\n/**\n * This grid's first page, resolved server-side by the commerce site-page\n * enricher (AGL-659). Same shape the catalog endpoint returns, because both\n * go through `queryPublicCatalog`.\n */\ninterface CatalogSeed {\n  items?: CatalogItem[]\n  categories?: CatalogCategory[]\n  priceBounds?: CatalogPriceBounds\n  nextOffset?: number\n}\n\nconst SAMPLE_ITEMS: CatalogItem[] = [\n  { id: 's1', name: 'Sample product', slug: '#', priceUsd: 29, maxPriceUsd: 29, soldOut: false },\n  { id: 's2', name: 'Another product', slug: '#', priceUsd: 49, maxPriceUsd: 59, compareAtPriceUsd: 79, soldOut: false },\n  { id: 's3', name: 'Third product', slug: '#', priceUsd: 12, maxPriceUsd: 12, soldOut: true },\n]\n\n/** Inert chips shown on the besigner canvas when categories are on. */\nconst SAMPLE_CATEGORIES: CatalogCategory[] = [\n  { id: 'sc1', name: 'Apparel', slug: 'apparel' },\n  { id: 'sc2', name: 'Accessories', slug: 'accessories' },\n]\n\n/** Inert slider bounds on the canvas, matching the sample cards. */\nconst SAMPLE_PRICE_BOUNDS: CatalogPriceBounds = {\n  minCents: 1200,\n  maxCents: 4900,\n}\n\nconst TYPE_OPTIONS = [\n  { value: 'physical', label: 'Physical' },\n  { value: 'digital', label: 'Digital' },\n  { value: 'service', label: 'Services' },\n] as const\n\nconst SORT_OPTIONS = [\n  { value: 'newest', label: 'Newest' },\n  { value: 'name', label: 'Name' },\n  { value: 'price-asc', label: 'Price: low to high' },\n  { value: 'price-desc', label: 'Price: high to low' },\n] as const\n\nfunction collectionSlugFromLocation(): string {\n  if (typeof window === 'undefined') return ''\n  const match = window.location.pathname.match(/\\/collections\\/([^/?#]+)/)\n  return match ? decodeURIComponent(match[1]) : ''\n}\n\nfunction priceLabel(item: CatalogItem): string {\n  return item.priceUsd === item.maxPriceUsd\n    ? `$${item.priceUsd}`\n    : `From $${item.priceUsd}`\n}\n\n/**\n * Product grid / PLP block (AGL-291): active catalog items from the\n * public listing API, filterable by collection/category/tag, designable\n * in besigner with sample cards (no SiteContext = inert canvas, same\n * convention as the mui Product block). Cards navigate to\n * `/products/{slug}` (PDP routes, AGL-292). Catalog UX (AGL-561):\n * optional debounced search, category chips, type chips, a sort\n * select, and Load more paging — all resolved server-side by the\n * catalog handler so large catalogs stay cheap.\n */\nconst ProductGrid = forwardRef<HTMLDivElement, ProductGridProps>(\n  (props, ref) => {\n    const {\n      source,\n      collectionId,\n      collectionSlug: collectionSlugProp,\n      categoryId,\n      categorySlug,\n      tag,\n      sort: sortProp,\n      columns,\n      maxItems,\n      emptyText,\n      showFilters,\n      showSearch,\n      showCategories,\n      showSort,\n      showTypeFilter,\n      showPriceFilter,\n      pageSize,\n      ...rest\n    } = props\n    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [props['sx']]\n    const site = Aglyn.useSite()\n    const { hostId } = site\n    // Server-rendered first page (AGL-659). The site-page enricher ran this\n    // grid's own query on the server and keyed the result by node id — two\n    // grids on a page have different queries, so an unkeyed seed would put\n    // the wrong products in one of them. Absent in the besigner and preview,\n    // where there is no pageData at all and the effect below still fetches.\n    const nodeId = Aglyn.useNodeId()\n    const seed = (\n      site.pageData as\n        | { commerce?: { grids?: Record<string, CatalogSeed> } }\n        | undefined\n    )?.commerce?.grids?.[nodeId]\n\n    const [items, setItems] = useState<CatalogItem[] | null>(\n      seed?.items ?? null,\n    )\n    const [sort, setSort] = useState(sortProp)\n    const [inStockOnly, setInStockOnly] = useState(false)\n    const [activeTag, setActiveTag] = useState('')\n    // Catalog UX state (AGL-561): the search box debounces into\n    // `query`; a chip pick overrides any pinned category ('*' = All);\n    // paging appends via `nextOffset` from the catalog handler.\n    const [searchInput, setSearchInput] = useState('')\n    const [query, setQuery] = useState('')\n    const [activeCategoryId, setActiveCategoryId] = useState('')\n    const [activeType, setActiveType] = useState('')\n    const [categories, setCategories] = useState<CatalogCategory[]>(\n      seed?.categories ?? [],\n    )\n    // Price filter (AGL-564): the slider drags into `priceInput` (whole\n    // dollars) and debounces into `priceFilter`, which drives the query;\n    // null = untouched (no price params sent). Bounds come from the\n    // handler's price facets.\n    const [priceBounds, setPriceBounds] = useState<CatalogPriceBounds | null>(\n      seed?.priceBounds ?? null,\n    )\n    const [priceInput, setPriceInput] = useState<number[] | null>(null)\n    const [priceFilter, setPriceFilter] = useState<number[] | null>(null)\n    const [nextOffset, setNextOffset] = useState<number | null>(\n      seed?.nextOffset ?? null,\n    )\n    const [loadingMore, setLoadingMore] = useState(false)\n    const fetchSeq = useRef(0)\n    const collectionSlug =\n      source === 'collection'\n        ? collectionSlugProp || collectionSlugFromLocation()\n        : collectionSlugProp\n    const pageLimit =\n      pageSize && Number(pageSize) > 0 ? Math.floor(Number(pageSize)) : 0\n    const pinnedCategoryId = source === 'category' ? categoryId ?? '' : ''\n\n    // Debounce keystrokes so large catalogs aren't fetched per letter.\n    useEffect(() => {\n      const timer = setTimeout(() => setQuery(searchInput.trim()), 300)\n      return () => clearTimeout(timer)\n    }, [searchInput])\n\n    // Debounce slider drags the same way (AGL-564): one fetch per\n    // settled range, not one per pixel of thumb movement.\n    useEffect(() => {\n      const timer = setTimeout(() => setPriceFilter(priceInput), 300)\n      return () => clearTimeout(timer)\n    }, [priceInput])\n\n    const loadPage = useCallback(\n      async (offset: number): Promise<void> => {\n        if (!hostId) return\n        const seq = ++fetchSeq.current\n        const params = new URLSearchParams({ hostId })\n        // Ids first (rename-safe, AGL-343); slugs remain as the legacy path.\n        if (source === 'collection') {\n          if (collectionId) params.set('collectionId', collectionId)\n          else if (collectionSlug) params.set('collection', collectionSlug)\n        }\n        const effectiveCategoryId =\n          activeCategoryId === '*' ? '' : activeCategoryId || pinnedCategoryId\n        if (effectiveCategoryId) {\n          params.set('categoryId', effectiveCategoryId)\n        } else if (!activeCategoryId && source === 'category' && categorySlug) {\n          params.set('category', categorySlug)\n        }\n        if (source === 'tag' && tag) params.set('tag', tag)\n        if (query) params.set('q', query)\n        if (activeType) params.set('type', activeType)\n        // Slider dollars → API cents (AGL-564).\n        if (priceFilter) {\n          params.set('minPriceCents', String(priceFilter[0] * 100))\n          params.set('maxPriceCents', String(priceFilter[1] * 100))\n        }\n        if (sort) params.set('sort', sort)\n        const limit = pageLimit || maxItems\n        if (limit) params.set('limit', String(limit))\n        if (offset) params.set('offset', String(offset))\n        if ((showCategories || showPriceFilter) && offset === 0) {\n          params.set('facets', '1')\n        }\n        try {\n          const response = await fetch(\n            `/api/commerce/catalog?${params.toString()}`,\n          )\n          const payload = await response.json()\n          if (seq !== fetchSeq.current) return\n          const pageItems: CatalogItem[] = payload?.items ?? []\n          setItems((prev) =>\n            offset && prev ? [...prev, ...pageItems] : pageItems,\n          )\n          setNextOffset(\n            typeof payload?.nextOffset === 'number' ? payload.nextOffset : null,\n          )\n          if (Array.isArray(payload?.categories)) {\n            setCategories(payload.categories)\n          }\n          const bounds = payload?.priceBounds\n          if (\n            typeof bounds?.minCents === 'number' &&\n            typeof bounds?.maxCents === 'number'\n          ) {\n            setPriceBounds(bounds)\n          }\n        } catch {\n          if (seq !== fetchSeq.current) return\n          if (!offset) setItems([])\n          setNextOffset(null)\n        }\n      },\n      [\n        hostId,\n        source,\n        collectionId,\n        collectionSlug,\n        categorySlug,\n        tag,\n        sort,\n        maxItems,\n        query,\n        activeCategoryId,\n        activeType,\n        priceFilter,\n        pageLimit,\n        pinnedCategoryId,\n        showCategories,\n        showPriceFilter,\n      ],\n    )\n\n    // A seeded grid already holds exactly what `loadPage(0)` would return,\n    // so the first pass skips the fetch (AGL-659) — every later run, after\n    // a filter or sort change, goes to the API as before.\n    const seededRef = useRef(Boolean(seed))\n    useEffect(() => {\n      if (!hostId) return\n      if (seededRef.current) {\n        seededRef.current = false\n        return\n      }\n      void loadPage(0)\n      // Invalidate any in-flight request on dep change or unmount.\n      return () => {\n        fetchSeq.current++\n      }\n    }, [hostId, loadPage])\n\n    const desktopColumns = Math.min(6, Math.max(1, columns ?? 3))\n    const gridSx = {\n      display: 'grid',\n      gap: 2,\n      gridTemplateColumns: {\n        xs: 'repeat(1, 1fr)',\n        sm: 'repeat(2, 1fr)',\n        md: `repeat(${desktopColumns}, 1fr)`,\n      },\n    }\n    let visible = hostId ? items : SAMPLE_ITEMS\n    if (visible && showFilters) {\n      if (inStockOnly) visible = visible.filter((item) => !item.soldOut)\n      if (activeTag) {\n        visible = visible.filter((item) =>\n          (item.tags ?? []).includes(activeTag),\n        )\n      }\n    }\n    const facetTags = showFilters\n      ? [...new Set((items ?? []).flatMap((item) => item.tags ?? []))].slice(\n          0,\n          12,\n        )\n      : []\n\n    if (hostId && items === null) {\n      return (\n        // MERGE, never replace (AGL-1450). The skeleton branch replaced the\n        // node's sx outright, so an authored grid flashed unstyled for as\n        // long as the first fetch took and then snapped into place.\n        <Box ref={ref} {...rest} sx={[gridSx, ...nodeSx]}>\n          {Array.from({ length: desktopColumns }, (_item, index) => (\n            <Card key={index} variant=\"outlined\">\n              <Skeleton variant=\"rectangular\" height={160} />\n              <CardContent>\n                <Skeleton width=\"70%\" />\n                <Skeleton width=\"30%\" />\n              </CardContent>\n            </Card>\n          ))}\n        </Box>\n      )\n    }\n\n    // Catalog controls (AGL-561): search on top, category/type chips\n    // under it with the sort select right-aligned — the layout every\n    // mainstream commerce PLP uses. Server-side; sample data inert.\n    const chipCategories = categories.length\n      ? categories\n      : !hostId && showCategories\n        ? SAMPLE_CATEGORIES\n        : []\n    const selectedCategoryId =\n      activeCategoryId === '*' ? '' : activeCategoryId || pinnedCategoryId\n    const hasCatalogControls = Boolean(\n      showSearch || showCategories || showSort || showTypeFilter ||\n        showPriceFilter,\n    )\n    // Price slider bounds (AGL-564), widened to whole dollars so both\n    // ends stay reachable; sample bounds keep the canvas designable.\n    const sliderBounds = hostId ? priceBounds : SAMPLE_PRICE_BOUNDS\n    const sliderMin = sliderBounds ? Math.floor(sliderBounds.minCents / 100) : 0\n    const sliderMax = sliderBounds ? Math.ceil(sliderBounds.maxCents / 100) : 0\n    const showSlider = Boolean(showPriceFilter && sliderMin < sliderMax)\n    const controls = hasCatalogControls ? (\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 2 }}>\n        {showSearch ? (\n          <TextField\n            value={searchInput}\n            onChange={(event) => setSearchInput(event.target.value)}\n            placeholder=\"Search products…\"\n            size=\"small\"\n            fullWidth\n            slotProps={{\n              input: {\n                startAdornment: (\n                  <InputAdornment position=\"start\">\n                    <SvgIcon fontSize=\"small\" color=\"disabled\">\n                      <path d={mdiMagnify.path} />\n                    </SvgIcon>\n                  </InputAdornment>\n                ),\n              },\n              htmlInput: { 'aria-label': 'Search products', type: 'search' },\n            }}\n          />\n        ) : null}\n        {showCategories || showTypeFilter || showSort ? (\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 1,\n              flexWrap: 'wrap',\n              alignItems: 'center',\n            }}\n          >\n            {showCategories && chipCategories.length ? (\n              <>\n                <Chip\n                  label=\"All\"\n                  size=\"small\"\n                  variant={selectedCategoryId ? 'outlined' : 'filled'}\n                  color={selectedCategoryId ? 'default' : 'primary'}\n                  onClick={() => setActiveCategoryId('*')}\n                />\n                {chipCategories.map((category) => (\n                  <Chip\n                    key={category.id}\n                    label={category.name}\n                    size=\"small\"\n                    variant={\n                      selectedCategoryId === category.id ? 'filled' : 'outlined'\n                    }\n                    color={\n                      selectedCategoryId === category.id\n                        ? 'secondary'\n                        : 'default'\n                    }\n                    onClick={() =>\n                      setActiveCategoryId((prev) =>\n                        (prev || pinnedCategoryId) === category.id\n                          ? '*'\n                          : category.id,\n                      )\n                    }\n                  />\n                ))}\n              </>\n            ) : null}\n            {showTypeFilter\n              ? TYPE_OPTIONS.map((option) => (\n                  <Chip\n                    key={option.value}\n                    label={option.label}\n                    size=\"small\"\n                    variant={activeType === option.value ? 'filled' : 'outlined'}\n                    color={\n                      activeType === option.value ? 'secondary' : 'default'\n                    }\n                    onClick={() =>\n                      setActiveType((prev) =>\n                        prev === option.value ? '' : option.value,\n                      )\n                    }\n                  />\n                ))\n              : null}\n            {showSort ? (\n              <>\n                <Box sx={{ flex: 1 }} />\n                <TextField\n                  select\n                  size=\"small\"\n                  value={\n                    SORT_OPTIONS.some((option) => option.value === sort)\n                      ? sort\n                      : 'name'\n                  }\n                  onChange={(event) =>\n                    setSort(event.target.value as ProductGridProps['sort'])\n                  }\n                  sx={{ minWidth: 180 }}\n                  slotProps={{\n                    htmlInput: { 'aria-label': 'Sort products' },\n                  }}\n                >\n                  {SORT_OPTIONS.map((option) => (\n                    <MenuItem key={option.value} value={option.value}>\n                      {option.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              </>\n            ) : null}\n          </Box>\n        ) : null}\n        {showSlider ? (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 1.5,\n              maxWidth: 360,\n              px: 1,\n            }}\n          >\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              sx={{ whiteSpace: 'nowrap' }}\n            >\n              {`$${sliderMin}`}\n            </Typography>\n            <Slider\n              size=\"small\"\n              value={priceInput ?? [sliderMin, sliderMax]}\n              min={sliderMin}\n              max={sliderMax}\n              step={1}\n              disableSwap\n              disabled={!hostId}\n              onChange={(_event, value) =>\n                setPriceInput(Array.isArray(value) ? value : [value, value])\n              }\n              valueLabelDisplay=\"auto\"\n              valueLabelFormat={(value) => `$${value}`}\n              getAriaLabel={(index) =>\n                index === 0 ? 'Minimum price' : 'Maximum price'\n              }\n            />\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              sx={{ whiteSpace: 'nowrap' }}\n            >\n              {`$${sliderMax}`}\n            </Typography>\n          </Box>\n        ) : null}\n      </Box>\n    ) : null\n\n    if (visible && visible.length === 0 && !hasCatalogControls) {\n      return (\n        <Box ref={ref} {...rest} sx={[{ p: 3, textAlign: 'center' }, ...nodeSx]}>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {emptyText || 'No products here yet — check back soon.'}\n          </Typography>\n        </Box>\n      )\n    }\n    // With controls visible the empty state renders inline, so a\n    // no-result search still leaves the box available to clear.\n    const emptyState = (\n      <Box sx={{ p: 3, textAlign: 'center' }}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {query || activeType || selectedCategoryId || priceFilter\n            ? 'No products match — try clearing a filter.'\n            : emptyText || 'No products here yet — check back soon.'}\n        </Typography>\n      </Box>\n    )\n    const loadMore =\n      hostId && pageLimit && nextOffset != null ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>\n          <Button\n            variant=\"outlined\"\n            disabled={loadingMore}\n            onClick={async () => {\n              if (nextOffset == null || loadingMore) return\n              setLoadingMore(true)\n              await loadPage(nextOffset)\n              setLoadingMore(false)\n            }}\n          >\n            {loadingMore ? 'Loading…' : 'Load more'}\n          </Button>\n        </Box>\n      ) : null\n\n    const grid = (\n      <Box sx={gridSx}>\n        {(visible ?? []).map((item) => {\n          // AGL-1726: resolved BEFORE the guard, so a stored value that is\n          // truthy but resolves to nothing renders the placeholder rather\n          // than an `<img>` with no `src`.\n          const imageUrl = Aglyn.siteRelativeMediaSrc(item.imageUrl, { hostId })\n          return (\n          <Card key={item.id} variant=\"outlined\">\n            <CardActionArea\n              href={hostId ? `/products/${item.slug}` : undefined}\n              disabled={!hostId}\n            >\n              {imageUrl ? (\n                <CardMedia\n                  component=\"img\"\n                  image={imageUrl}\n                  alt={item.name}\n                  sx={{ height: 160, objectFit: 'cover' }}\n                  // Deferred (AGL-2486), and this is the worst offender of\n                  // the set: a grid renders one image PER PRODUCT, all of\n                  // them previously unhinted, so a storefront section below\n                  // the fold opened N eager default-priority fetches that\n                  // outranked everything above it.\n                  {...Aglyn.DEFERRED_IMAGE_ATTRIBUTES}\n                />\n              ) : (\n                <Box sx={{ height: 160, bgcolor: 'action.hover' }} />\n              )}\n              <CardContent>\n                <Typography variant=\"subtitle2\" noWrap>\n                  {item.name}\n                </Typography>\n                <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>\n                  <Typography variant=\"body2\" color=\"text.secondary\">\n                    {priceLabel(item)}\n                  </Typography>\n                  {item.compareAtPriceUsd ? (\n                    <Typography\n                      variant=\"caption\"\n                      color=\"text.disabled\"\n                      sx={{ textDecoration: 'line-through' }}\n                    >\n                      {`$${item.compareAtPriceUsd}`}\n                    </Typography>\n                  ) : null}\n                  {item.soldOut ? (\n                    <Chip label=\"Sold out\" size=\"small\" variant=\"outlined\" />\n                  ) : null}\n                </Box>\n              </CardContent>\n            </CardActionArea>\n          </Card>\n          )\n        })}\n      </Box>\n    )\n\n    const body = visible && visible.length === 0 ? emptyState : grid\n    if (!showFilters) {\n      return (\n        <Box ref={ref} {...rest}>\n          {controls}\n          {body}\n          {loadMore}\n        </Box>\n      )\n    }\n    return (\n      <Box ref={ref} {...rest}>\n        {controls}\n        <Box\n          sx={{\n            display: 'flex',\n            gap: 1,\n            flexWrap: 'wrap',\n            alignItems: 'center',\n            mb: 2,\n          }}\n        >\n          <Chip\n            label=\"In stock\"\n            size=\"small\"\n            variant={inStockOnly ? 'filled' : 'outlined'}\n            color={inStockOnly ? 'primary' : 'default'}\n            onClick={() => setInStockOnly((prev) => !prev)}\n          />\n          {facetTags.map((facetTag) => (\n            <Chip\n              key={facetTag}\n              label={facetTag}\n              size=\"small\"\n              variant={activeTag === facetTag ? 'filled' : 'outlined'}\n              color={activeTag === facetTag ? 'primary' : 'default'}\n              onClick={() =>\n                setActiveTag((prev) => (prev === facetTag ? '' : facetTag))\n              }\n            />\n          ))}\n          <Box sx={{ flex: 1 }} />\n          <Chip\n            label={\n              sort === 'price-asc'\n                ? 'Price ↑'\n                : sort === 'price-desc'\n                  ? 'Price ↓'\n                  : 'A–Z'\n            }\n            size=\"small\"\n            variant=\"outlined\"\n            onClick={() =>\n              setSort((prev) =>\n                prev === 'price-asc'\n                  ? 'price-desc'\n                  : prev === 'price-desc'\n                    ? 'name'\n                    : 'price-asc',\n              )\n            }\n          />\n        </Box>\n        {body}\n        {loadMore}\n      </Box>\n    )\n  },\n)\nProductGrid.displayName = 'AglynProductGrid'\n\nexport const schema: Aglyn.ComponentSchema<ProductGridProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Product grid',\n  description:\n    'Your catalog as a grid, with optional search, category chips, sort and paging.',\n  category: Aglyn.ComponentCategory.COMMERCE,\n  icon: { path: mdiViewGridOutline.path, sx: { color: '#2e7d32' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'source',\n      label: 'Show',\n      description: 'Which products to list.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { label: 'All products', value: 'all' },\n        { label: 'A collection', value: 'collection' },\n        { label: 'A category', value: 'category' },\n        { label: 'A tag', value: 'tag' },\n      ],\n    },\n    {\n      name: 'collectionId',\n      label: 'Collection',\n      description:\n        'Pick the collection — stored by id, so renaming it never breaks ' +\n        'this grid. Leave empty on collection template screens to follow ' +\n        'the /collections/{slug} URL.',\n      component: Aglyn.FieldComponentType.COLLECTION_SELECT,\n    },\n    {\n      name: 'collectionSlug',\n      label: 'Collection slug (legacy)',\n      description: 'Used only when no collection is picked above.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'categoryId',\n      label: 'Category',\n      description:\n        'Pick the category — stored by id, rename-safe.',\n      component: Aglyn.FieldComponentType.CATEGORY_SELECT,\n    },\n    {\n      name: 'categorySlug',\n      label: 'Category slug (legacy)',\n      description: 'Used only when no category is picked above.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'tag',\n      label: 'Tag',\n      description: 'Products tagged with this value.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'sort',\n      label: 'Sort',\n      description: 'Listing order.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { label: 'Name', value: 'name' },\n        { label: 'Price (low → high)', value: 'price-asc' },\n        { label: 'Price (high → low)', value: 'price-desc' },\n        { label: 'Newest', value: 'newest' },\n      ],\n    },\n    {\n      name: 'columns',\n      label: 'Columns',\n      description: 'Desktop columns (1-6).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n    {\n      name: 'maxItems',\n      label: 'Max items',\n      description: 'Cap the number of cards.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n    {\n      name: 'emptyText',\n      label: 'Empty text',\n      description: 'Copy when nothing matches.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'showFilters',\n      label: 'Show filters',\n      description: 'Tag chips, in-stock toggle, and price sort above the grid.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'showSearch',\n      label: 'Search box',\n      description:\n        'Visitor search box above the grid — matches product names, ' +\n        'descriptions, and tags (server-side).',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'showCategories',\n      label: 'Category chips',\n      description:\n        'Filter chips built from your product categories, with an All chip.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'showSort',\n      label: 'Sort select',\n      description:\n        'Visitor sort: newest, name, price low→high, price high→low.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'showTypeFilter',\n      label: 'Type filter',\n      description: 'Physical / digital / services chips.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'showPriceFilter',\n      label: 'Price filter',\n      description:\n        'Price range slider between your lowest and highest product prices.',\n      component: Aglyn.FieldComponentType.CHECKBOX,\n    },\n    {\n      name: 'pageSize',\n      label: 'Page size',\n      description:\n        'Products per page with a Load more button; blank loads once ' +\n        '(capped by Max items).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Product grid',\n    pluginId: BUNDLE_ID,\n    description: 'Responsive grid of catalog products',\n    category: Aglyn.ComponentCategory.COMMERCE,\n    icon: { path: mdiViewGridOutline.path, sx: { color: '#2e7d32' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { source: 'all', sort: 'name', columns: 3 },\n    },\n  },\n  {\n    // Full shop page (AGL-561): the grid with every catalog control on\n    // — search, category chips, sort, and Load more paging.\n    $id: generatePresetId(ID, 'shop'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Shop catalog',\n    pluginId: BUNDLE_ID,\n    description: 'Product grid with search, category chips, sort, and paging',\n    category: Aglyn.ComponentCategory.COMMERCE,\n    icon: { path: mdiViewGridOutline.path, sx: { color: '#2e7d32' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        source: 'all',\n        sort: 'newest',\n        columns: 3,\n        showSearch: true,\n        showCategories: true,\n        showSort: true,\n        pageSize: 12,\n      },\n    },\n  },\n]\n\nexport default ProductGrid\n"],"names":["Aglyn","mdiMagnify","mdiViewGridOutline","Box","Button","Card","CardActionArea","CardContent","CardMedia","Chip","InputAdornment","MenuItem","Skeleton","Slider","SvgIcon","TextField","Typography","forwardRef","useCallback","useEffect","useRef","useState","BUNDLE_ID","generatePresetId","ID","SAMPLE_ITEMS","id","name","slug","priceUsd","maxPriceUsd","soldOut","compareAtPriceUsd","SAMPLE_CATEGORIES","SAMPLE_PRICE_BOUNDS","minCents","maxCents","TYPE_OPTIONS","value","label","SORT_OPTIONS","collectionSlugFromLocation","window","match","location","pathname","decodeURIComponent","priceLabel","item","ProductGrid","props","ref","site","source","collectionId","collectionSlug","collectionSlugProp","categoryId","categorySlug","tag","sort","sortProp","columns","maxItems","emptyText","showFilters","showSearch","showCategories","showSort","showTypeFilter","showPriceFilter","pageSize","rest","nodeSx","Array","isArray","useSite","hostId","nodeId","useNodeId","seed","pageData","commerce","grids","items","setItems","setSort","inStockOnly","setInStockOnly","activeTag","setActiveTag","searchInput","setSearchInput","query","setQuery","activeCategoryId","setActiveCategoryId","activeType","setActiveType","categories","setCategories","priceBounds","setPriceBounds","priceInput","setPriceInput","priceFilter","setPriceFilter","nextOffset","setNextOffset","loadingMore","setLoadingMore","fetchSeq","pageLimit","Number","Math","floor","pinnedCategoryId","timer","setTimeout","trim","clearTimeout","loadPage","offset","seq","current","params","URLSearchParams","set","effectiveCategoryId","String","limit","response","fetch","toString","payload","json","pageItems","prev","bounds","seededRef","Boolean","desktopColumns","min","max","gridSx","display","gap","gridTemplateColumns","xs","sm","md","visible","filter","tags","includes","facetTags","Set","flatMap","slice","sx","from","length","_item","index","variant","height","width","chipCategories","selectedCategoryId","hasCatalogControls","sliderBounds","sliderMin","sliderMax","ceil","showSlider","controls","flexDirection","mb","onChange","event","target","placeholder","size","fullWidth","slotProps","input","startAdornment","position","fontSize","color","path","d","htmlInput","type","flexWrap","alignItems","onClick","map","category","option","flex","select","some","minWidth","maxWidth","px","whiteSpace","step","disableSwap","disabled","_event","valueLabelDisplay","valueLabelFormat","getAriaLabel","p","textAlign","emptyState","loadMore","justifyContent","mt","grid","imageUrl","siteRelativeMediaSrc","href","undefined","component","image","alt","objectFit","DEFERRED_IMAGE_ATTRIBUTES","bgcolor","noWrap","textDecoration","body","facetTag","displayName","schema","$id","pluginId","description","ComponentCategory","COMMERCE","icon","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","FieldComponentType","SELECT","options","COLLECTION_SELECT","TEXT_FIELD","CATEGORY_SELECT","CHECKBOX","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/product-reviews.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+export declare const ID: Aglyn.ComponentId;
+export interface ProductReviewsProps {
+    /** Product id; blank resolves from the /products/{slug} page product. */
+    productId?: string;
+    heading?: string;
+}
+/**
+ * Product reviews block (AGL-324): approved reviews with verified-buyer
+ * badges, seller replies, an aggregate summary (emitted as JSON-LD
+ * AggregateRating), and a submit form feeding the moderation queue.
+ */
+declare const ProductReviews: import("react").ForwardRefExoticComponent<ProductReviewsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<ProductReviewsProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default ProductReviews;

package/src/lib/components/product-reviews.js

@@ -0,0 +1,349 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiStarOutline } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import Divider from "@mui/material/Divider";
+import Rating from "@mui/material/Rating";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { forwardRef, useEffect, useState } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'product-reviews';
+async function resolveProductIdFromSlug(hostId) {
+    var _ref;
+    var _payload_product;
+    const match = window.location.pathname.match(/\/products\/([^/?#]+)/);
+    if (!match) return '';
+    const response = await fetch(`/api/commerce/product?hostId=${encodeURIComponent(hostId)}` + `&slug=${encodeURIComponent(decodeURIComponent(match[1]))}`).catch(()=>null);
+    if (!(response == null ? void 0 : response.ok)) return '';
+    const payload = await response.json().catch(()=>({}));
+    return String((_ref = payload == null ? void 0 : (_payload_product = payload.product) == null ? void 0 : _payload_product.id) != null ? _ref : '');
+}
+/**
+ * Product reviews block (AGL-324): approved reviews with verified-buyer
+ * badges, seller replies, an aggregate summary (emitted as JSON-LD
+ * AggregateRating), and a submit form feeding the moderation queue.
+ */ const ProductReviews = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { productId: productIdProp, heading } = props, rest = _object_without_properties_loose(props, [
+        "productId",
+        "heading"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { hostId } = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
+    const [productId, setProductId] = useState(productIdProp != null ? productIdProp : '');
+    const [reviews, setReviews] = useState(null);
+    const [aggregate, setAggregate] = useState({
+        count: 0,
+        average: 0
+    });
+    const [form, setForm] = useState({
+        rating: 5,
+        body: '',
+        authorName: '',
+        authorEmail: ''
+    });
+    const [state, setState] = useState('idle');
+    useEffect(()=>{
+        if (!hostId) return;
+        let active = true;
+        void (async ()=>{
+            var _ref, _ref1;
+            const resolved = productIdProp || await resolveProductIdFromSlug(hostId);
+            if (!active || !resolved) return;
+            setProductId(resolved);
+            const response = await fetch(`/api/commerce/reviews?hostId=${encodeURIComponent(hostId)}` + `&productId=${encodeURIComponent(resolved)}`).catch(()=>null);
+            if (!active || !(response == null ? void 0 : response.ok)) return;
+            const payload = await response.json().catch(()=>({}));
+            setReviews((_ref = payload == null ? void 0 : payload.reviews) != null ? _ref : []);
+            setAggregate((_ref1 = payload == null ? void 0 : payload.aggregate) != null ? _ref1 : {
+                count: 0,
+                average: 0
+            });
+        })();
+        return ()=>{
+            active = false;
+        };
+    }, [
+        hostId,
+        productIdProp
+    ]);
+    const handleSubmit = async ()=>{
+        if (!hostId || !productId || state === 'busy') return;
+        setState('busy');
+        try {
+            const response = await siteFetch('/api/commerce/reviews', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(_extends({
+                    hostId,
+                    productId
+                }, form))
+            });
+            setState(response.ok ? 'done' : 'error');
+        } catch (unused) {
+            setState('error');
+        }
+    };
+    if (!hostId) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: 3,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    color: 'text.secondary',
+                    fontSize: 13,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: '★★★★★ Product reviews render here'
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: [
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1.5
+            },
+            ...nodeSx
+        ],
+        children: [
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "h6",
+                children: [
+                    heading || 'Reviews',
+                    aggregate.count > 0 ? ` (${aggregate.average} ★ · ${aggregate.count})` : ''
+                ]
+            }),
+            (reviews != null ? reviews : []).map((review)=>/*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                gap: 1,
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Rating, {
+                                    value: review.rating,
+                                    size: "small",
+                                    readOnly: true
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    sx: {
+                                        fontWeight: 600
+                                    },
+                                    children: review.authorName
+                                }),
+                                review.verified ? /*#__PURE__*/ _jsx(Chip, {
+                                    label: "Verified buyer",
+                                    size: "small",
+                                    variant: "outlined",
+                                    color: "success"
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            sx: {
+                                mt: 0.5
+                            },
+                            children: review.body
+                        }),
+                        review.reply ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            sx: {
+                                display: 'block',
+                                pl: 2,
+                                mt: 0.5,
+                                borderLeft: 2,
+                                borderColor: 'divider'
+                            },
+                            children: `Seller: ${review.reply}`
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Divider, {
+                            sx: {
+                                mt: 1.5
+                            }
+                        })
+                    ]
+                }, review.id)),
+            reviews && reviews.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'No reviews yet — be the first.'
+            }) : null,
+            state === 'done' ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "success",
+                children: 'Thanks — your review is awaiting moderation.'
+            }) : /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1,
+                    maxWidth: 480
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle2",
+                        children: 'Write a review'
+                    }),
+                    /*#__PURE__*/ _jsx(Rating, {
+                        value: form.rating,
+                        onChange: (_event, value)=>setForm((prev)=>_extends({}, prev, {
+                                    rating: value != null ? value : 5
+                                }))
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        placeholder: "What did you think?",
+                        value: form.body,
+                        onChange: (event)=>setForm((prev)=>_extends({}, prev, {
+                                    body: event.target.value
+                                })),
+                        size: "small",
+                        multiline: true,
+                        minRows: 2
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                placeholder: "Name",
+                                value: form.authorName,
+                                onChange: (event)=>setForm((prev)=>_extends({}, prev, {
+                                            authorName: event.target.value
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                placeholder: "Email (verifies your purchase)",
+                                type: "email",
+                                value: form.authorEmail,
+                                onChange: (event)=>setForm((prev)=>_extends({}, prev, {
+                                            authorEmail: event.target.value
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1.4
+                                }
+                            })
+                        ]
+                    }),
+                    state === 'error' ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "error",
+                        children: 'Could not submit — check the fields.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        size: "small",
+                        disabled: state === 'busy' || !form.body.trim() || !form.authorEmail.trim(),
+                        onClick: handleSubmit,
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        children: 'Submit review'
+                    })
+                ]
+            })
+        ]
+    }));
+});
+ProductReviews.displayName = 'AglynProductReviews';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Product reviews',
+    description: 'Approved reviews with verified-buyer badges, and a form to add one.',
+    category: Aglyn.ComponentCategory.COMMERCE,
+    icon: {
+        path: mdiStarOutline.path,
+        sx: {
+            color: '#2e7d32'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'productId',
+            label: 'Product id',
+            description: 'Whose reviews these are. Blank reads the product from the URL, ' + 'which is what you want on a product template; naming one pins the ' + 'block to that product wherever it is placed.',
+            component: Aglyn.FieldComponentType.PRODUCT_SELECT
+        },
+        {
+            name: 'heading',
+            label: 'Heading',
+            description: 'Defaults to "Reviews".',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Product reviews',
+        pluginId: BUNDLE_ID,
+        description: 'Verified-buyer reviews with a submit form',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiStarOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+export default ProductReviews;
+
+//# sourceMappingURL=product-reviews.js.map

package/src/lib/components/product-reviews.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/product-reviews.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport { mdiStarOutline } from '@aglyn/shared-data-mdi'\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Chip from '@mui/material/Chip'\nimport Divider from '@mui/material/Divider'\nimport Rating from '@mui/material/Rating'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'product-reviews'\n\nexport interface ProductReviewsProps {\n  /** Product id; blank resolves from the /products/{slug} page product. */\n  productId?: string\n  heading?: string\n}\n\ninterface ReviewView {\n  id: string\n  rating: number\n  body: string\n  authorName: string\n  verified: boolean\n  reply?: string | null\n  createdAtMs: number\n}\n\nasync function resolveProductIdFromSlug(hostId: string): Promise<string> {\n  const match = window.location.pathname.match(/\\/products\\/([^/?#]+)/)\n  if (!match) return ''\n  const response = await fetch(\n    `/api/commerce/product?hostId=${encodeURIComponent(hostId)}` +\n      `&slug=${encodeURIComponent(decodeURIComponent(match[1]))}`,\n  ).catch(() => null)\n  if (!response?.ok) return ''\n  const payload = await response.json().catch(() => ({}))\n  return String(payload?.product?.id ?? '')\n}\n\n/**\n * Product reviews block (AGL-324): approved reviews with verified-buyer\n * badges, seller replies, an aggregate summary (emitted as JSON-LD\n * AggregateRating), and a submit form feeding the moderation queue.\n */\nconst ProductReviews = forwardRef<HTMLDivElement, ProductReviewsProps>(\n  (props, ref) => {\n    const { productId: productIdProp, heading, ...rest } = props\n    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [props['sx']]\n    const { hostId } = Aglyn.useSite()\n    const siteFetch = Aglyn.useSiteFetch()\n    const [productId, setProductId] = useState(productIdProp ?? '')\n    const [reviews, setReviews] = useState<ReviewView[] | null>(null)\n    const [aggregate, setAggregate] = useState({ count: 0, average: 0 })\n    const [form, setForm] = useState({\n      rating: 5,\n      body: '',\n      authorName: '',\n      authorEmail: '',\n    })\n    const [state, setState] = useState<'idle' | 'busy' | 'done' | 'error'>(\n      'idle',\n    )\n\n    useEffect(() => {\n      if (!hostId) return\n      let active = true\n      void (async () => {\n        const resolved =\n          productIdProp || (await resolveProductIdFromSlug(hostId))\n        if (!active || !resolved) return\n        setProductId(resolved)\n        const response = await fetch(\n          `/api/commerce/reviews?hostId=${encodeURIComponent(hostId)}` +\n            `&productId=${encodeURIComponent(resolved)}`,\n        ).catch(() => null)\n        if (!active || !response?.ok) return\n        const payload = await response.json().catch(() => ({}))\n        setReviews(payload?.reviews ?? [])\n        setAggregate(payload?.aggregate ?? { count: 0, average: 0 })\n      })()\n      return () => {\n        active = false\n      }\n    }, [hostId, productIdProp])\n\n    const handleSubmit = async () => {\n      if (!hostId || !productId || state === 'busy') return\n      setState('busy')\n      try {\n        const response = await siteFetch('/api/commerce/reviews', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ hostId, productId, ...form }),\n        })\n        setState(response.ok ? 'done' : 'error')\n      } catch {\n        setState('error')\n      }\n    }\n\n    if (!hostId) {\n      return (\n        <Box\n          ref={ref}\n          {...rest}\n          sx={[\n            {\n              p: 3,\n              border: '1px dashed',\n              borderColor: 'divider',\n              borderRadius: 1,\n              color: 'text.secondary',\n              fontSize: 13,\n              fontFamily: 'system-ui, sans-serif',\n            },\n            ...nodeSx,\n          ]}\n        >\n          {'★★★★★ Product reviews render here'}\n        </Box>\n      )\n    }\n\n    return (\n      <Box ref={ref} {...rest} sx={[{ display: 'flex', flexDirection: 'column', gap: 1.5 }, ...nodeSx]}>\n        {/* No JSON-LD here any more (AGL-686). This block used to emit a\n            free-standing `AggregateRating` node, which schema.org ignores —\n            a rating has to be a PROPERTY of the Product it rates. The PDP's\n            server-rendered Product node now carries `aggregateRating`,\n            built from the same `readProductReviews` reader this block's API\n            uses, so the structured data and the visible stars cannot\n            disagree. It also removes the one call site that was primed to\n            become stored XSS the moment a reviewer name went into it. */}\n        <Typography variant=\"h6\">\n          {heading || 'Reviews'}\n          {aggregate.count > 0 ? ` (${aggregate.average} ★ · ${aggregate.count})` : ''}\n        </Typography>\n        {(reviews ?? []).map((review) => (\n          <Box key={review.id}>\n            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>\n              <Rating value={review.rating} size=\"small\" readOnly />\n              <Typography variant=\"body2\" sx={{ fontWeight: 600 }}>\n                {review.authorName}\n              </Typography>\n              {review.verified ? (\n                <Chip label=\"Verified buyer\" size=\"small\" variant=\"outlined\" color=\"success\" />\n              ) : null}\n            </Box>\n            <Typography variant=\"body2\" sx={{ mt: 0.5 }}>\n              {review.body}\n            </Typography>\n            {review.reply ? (\n              <Typography\n                variant=\"caption\"\n                color=\"text.secondary\"\n                sx={{ display: 'block', pl: 2, mt: 0.5, borderLeft: 2, borderColor: 'divider' }}\n              >\n                {`Seller: ${review.reply}`}\n              </Typography>\n            ) : null}\n            <Divider sx={{ mt: 1.5 }} />\n          </Box>\n        ))}\n        {reviews && reviews.length === 0 ? (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {'No reviews yet — be the first.'}\n          </Typography>\n        ) : null}\n        {state === 'done' ? (\n          <Alert severity=\"success\">\n            {'Thanks — your review is awaiting moderation.'}\n          </Alert>\n        ) : (\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, maxWidth: 480 }}>\n            <Typography variant=\"subtitle2\">{'Write a review'}</Typography>\n            <Rating\n              value={form.rating}\n              onChange={(_event, value) =>\n                setForm((prev) => ({ ...prev, rating: value ?? 5 }))\n              }\n            />\n            <TextField\n              placeholder=\"What did you think?\"\n              value={form.body}\n              onChange={(event) =>\n                setForm((prev) => ({ ...prev, body: event.target.value }))\n              }\n              size=\"small\"\n              multiline\n              minRows={2}\n            />\n            <Box sx={{ display: 'flex', gap: 1 }}>\n              <TextField\n                placeholder=\"Name\"\n                value={form.authorName}\n                onChange={(event) =>\n                  setForm((prev) => ({ ...prev, authorName: event.target.value }))\n                }\n                size=\"small\"\n                sx={{ flex: 1 }}\n              />\n              <TextField\n                placeholder=\"Email (verifies your purchase)\"\n                type=\"email\"\n                value={form.authorEmail}\n                onChange={(event) =>\n                  setForm((prev) => ({ ...prev, authorEmail: event.target.value }))\n                }\n                size=\"small\"\n                sx={{ flex: 1.4 }}\n              />\n            </Box>\n            {state === 'error' ? (\n              <Alert severity=\"error\">{'Could not submit — check the fields.'}</Alert>\n            ) : null}\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={state === 'busy' || !form.body.trim() || !form.authorEmail.trim()}\n              onClick={handleSubmit}\n              sx={{ alignSelf: 'flex-start' }}\n            >\n              {'Submit review'}\n            </Button>\n          </Box>\n        )}\n      </Box>\n    )\n  },\n)\nProductReviews.displayName = 'AglynProductReviews'\n\nexport const schema: Aglyn.ComponentSchema<ProductReviewsProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Product reviews',\n  description:\n    'Approved reviews with verified-buyer badges, and a form to add one.',\n  category: Aglyn.ComponentCategory.COMMERCE,\n  icon: { path: mdiStarOutline.path, sx: { color: '#2e7d32' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'productId',\n      label: 'Product id',\n      description:\n        'Whose reviews these are. Blank reads the product from the URL, ' +\n        'which is what you want on a product template; naming one pins the ' +\n        'block to that product wherever it is placed.',\n      component: Aglyn.FieldComponentType.PRODUCT_SELECT,\n    },\n    {\n      name: 'heading',\n      label: 'Heading',\n      description: 'Defaults to \"Reviews\".',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Product reviews',\n    pluginId: BUNDLE_ID,\n    description: 'Verified-buyer reviews with a submit form',\n    category: Aglyn.ComponentCategory.COMMERCE,\n    icon: { path: mdiStarOutline.path, sx: { color: '#2e7d32' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {},\n    },\n  },\n]\n\nexport default ProductReviews\n"],"names":["Aglyn","mdiStarOutline","Alert","Box","Button","Chip","Divider","Rating","TextField","Typography","forwardRef","useEffect","useState","BUNDLE_ID","generatePresetId","ID","resolveProductIdFromSlug","hostId","payload","match","window","location","pathname","response","fetch","encodeURIComponent","decodeURIComponent","catch","ok","json","String","product","id","ProductReviews","props","ref","productId","productIdProp","heading","rest","nodeSx","Array","isArray","useSite","siteFetch","useSiteFetch","setProductId","reviews","setReviews","aggregate","setAggregate","count","average","form","setForm","rating","body","authorName","authorEmail","state","setState","active","resolved","handleSubmit","method","headers","JSON","stringify","sx","p","border","borderColor","borderRadius","color","fontSize","fontFamily","display","flexDirection","gap","variant","map","review","alignItems","value","size","readOnly","fontWeight","verified","label","mt","reply","pl","borderLeft","length","severity","maxWidth","onChange","_event","prev","placeholder","event","target","multiline","minRows","flex","type","disabled","trim","onClick","alignSelf","displayName","schema","$id","pluginId","description","category","ComponentCategory","COMMERCE","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","component","FieldComponentType","PRODUCT_SELECT","TEXT_FIELD","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/related-products.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+export declare const ID: Aglyn.ComponentId;
+export interface RelatedProductsProps {
+    /** Anchor product id; blank follows the /products/{slug} page. */
+    productId?: string;
+    heading?: string;
+    maxItems?: number;
+}
+/**
+ * Related products / upsell strip (AGL-325): the product's manual list,
+ * else "frequently bought together" from recent orders, else tag and
+ * category neighbors — resolved server-side, rendered as cards.
+ */
+declare const RelatedProducts: import("react").ForwardRefExoticComponent<RelatedProductsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<RelatedProductsProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default RelatedProducts;