@aglyn/plugins-commerce 1.0.0-beta.237 → 1.0.0-beta.238

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

@@ -31,6 +31,15 @@ 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';
+const EDITOR_HINT_SX = {
+    p: 3,
+    border: '1px dashed',
+    borderColor: 'divider',
+    borderRadius: 1,
+    color: 'text.secondary',
+    fontSize: 13,
+    fontFamily: 'system-ui, sans-serif'
+};
 async function resolveProductIdFromSlug(hostId) {
     var _ref;
     var _payload_product;
@@ -46,9 +55,218 @@ async function resolveProductIdFromSlug(hostId) {
  * 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, [
+    if (props.scope === 'store') return /*#__PURE__*/ _jsx(StoreReviews, _extends({
+        ref: ref
+    }, props));
+    return /*#__PURE__*/ _jsx(SingleProductReviews, _extends({
+        ref: ref
+    }, props));
+});
+ProductReviews.displayName = 'AglynProductReviews';
+/**
+ * The store-wide reviews band (`scope: 'store'`): the store's latest APPROVED
+ * reviews, read-only stars, the reviewer's first name and initial, a verified
+ * badge, and the product reviewed. Real reviews or nothing: with none it
+ * renders an empty, zero-height element — never sample reviews on a live page
+ * (sample testimonials presented as customers' would be fake reviews). The
+ * editor, which has no site, gets a dashed hint instead.
+ */ const StoreReviews = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { productId: _productId, heading, scope: _scope, maxItems, headingLevel } = props, rest = _object_without_properties_loose(props, [
+        "productId",
+        "heading",
+        "scope",
+        "maxItems",
+        "headingLevel"
+    ]);
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { hostId } = Aglyn.useSite();
+    const [payload, setPayload] = useState(null);
+    const limit = maxItems && Number(maxItems) > 0 ? Math.min(12, Math.floor(Number(maxItems))) : 6;
+    useEffect(()=>{
+        if (!hostId) return;
+        let active = true;
+        void fetch(`/api/commerce/reviews?hostId=${encodeURIComponent(hostId)}` + `&scope=store&limit=${limit}`).then((response)=>response.ok ? response.json() : null).then((body)=>{
+            var _body_aggregate;
+            if (!active || !body) return;
+            setPayload({
+                reviews: Array.isArray(body.reviews) ? body.reviews : [],
+                aggregate: (_body_aggregate = body.aggregate) != null ? _body_aggregate : {
+                    count: 0,
+                    average: 0
+                }
+            });
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    }, [
+        hostId,
+        limit
+    ]);
+    if (!hostId) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                EDITOR_HINT_SX,
+                ...nodeSx
+            ],
+            children: '★★★★★ Customer reviews appear here once shoppers review your products'
+        }));
+    }
+    // Loading, failed, or none approved: nothing at all — not the node's
+    // padding, not a heading over an empty band.
+    if (!payload || payload.reviews.length === 0) {
+        return /*#__PURE__*/ _jsx(Box, {
+            ref: ref,
+            "data-store-reviews-empty": "",
+            sx: {
+                display: 'none'
+            }
+        });
+    }
+    // A select may store the level as a string; read it as a number.
+    const asked = Number(headingLevel);
+    const level = asked === 3 || asked === 4 ? asked : 2;
+    const { aggregate } = payload;
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: [
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 3
+            },
+            ...nodeSx
+        ],
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 1,
+                    textAlign: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: level === 2 ? 'h4' : level === 3 ? 'h5' : 'h6',
+                        component: `h${level}`,
+                        children: heading || 'What customers say'
+                    }),
+                    aggregate.count > 0 ? /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Rating, {
+                                value: aggregate.average,
+                                precision: 0.1,
+                                readOnly: true,
+                                size: "small"
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: `${aggregate.average} out of 5 · ${aggregate.count} ${aggregate.count === 1 ? 'review' : 'reviews'}`
+                            })
+                        ]
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'grid',
+                    gap: 2,
+                    gridTemplateColumns: {
+                        xs: '1fr',
+                        sm: 'repeat(2, 1fr)',
+                        md: 'repeat(3, 1fr)'
+                    }
+                },
+                children: payload.reviews.map((review)=>/*#__PURE__*/ _jsxs(Box, {
+                        component: "figure",
+                        sx: {
+                            m: 0,
+                            p: 2.5,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 1,
+                            border: 1,
+                            borderColor: 'divider',
+                            borderRadius: 2,
+                            bgcolor: 'background.paper'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Rating, {
+                                value: review.rating,
+                                readOnly: true,
+                                size: "small"
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                component: "blockquote",
+                                variant: "body1",
+                                sx: {
+                                    m: 0,
+                                    flex: 1
+                                },
+                                children: review.body
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                component: "figcaption",
+                                sx: {
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    gap: 1,
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__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
+                                ]
+                            }),
+                            review.productName ? /*#__PURE__*/ _jsx(Typography, _extends({
+                                variant: "caption",
+                                color: "text.secondary",
+                                component: review.productSlug ? 'a' : 'span'
+                            }, review.productSlug ? {
+                                href: `/products/${review.productSlug}`
+                            } : {}, {
+                                sx: {
+                                    textDecoration: 'none'
+                                },
+                                children: review.productName
+                            })) : null
+                        ]
+                    }, review.id))
+            })
+        ]
+    }));
+});
+StoreReviews.displayName = 'AglynStoreReviews';
+const SingleProductReviews = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { productId: productIdProp, heading, scope: _scope, maxItems: _maxItems, headingLevel: _headingLevel } = props, rest = _object_without_properties_loose(props, [
         "productId",
-        "heading"
+        "heading",
+        "scope",
+        "maxItems",
+        "headingLevel"
     ]);
     // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
     const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
@@ -117,15 +335,7 @@ async function resolveProductIdFromSlug(hostId) {
             ref: ref
         }, rest, {
             sx: [
-                {
-                    p: 3,
-                    border: '1px dashed',
-                    borderColor: 'divider',
-                    borderRadius: 1,
-                    color: 'text.secondary',
-                    fontSize: 13,
-                    fontFamily: 'system-ui, sans-serif'
-                },
+                EDITOR_HINT_SX,
                 ...nodeSx
             ],
             children: '★★★★★ Product reviews render here'
@@ -291,7 +501,7 @@ async function resolveProductIdFromSlug(hostId) {
         ]
     }));
 });
-ProductReviews.displayName = 'AglynProductReviews';
+SingleProductReviews.displayName = 'AglynSingleProductReviews';
 export const schema = {
     $id: ID,
     pluginId: BUNDLE_ID,
@@ -317,8 +527,52 @@ export const schema = {
         {
             name: 'heading',
             label: 'Heading',
-            description: 'Defaults to "Reviews".',
+            description: 'Defaults to "Reviews" ("What customers say" store-wide).',
             component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            // Default `product`, so a page that already places this block keeps it.
+            name: 'scope',
+            label: 'Show',
+            description: 'One product’s reviews with a form, or the store’s latest approved ' + 'reviews across every product. Store-wide shows nothing until a ' + 'shopper’s review is approved.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    label: 'This product',
+                    value: 'product'
+                },
+                {
+                    label: 'Whole store',
+                    value: 'store'
+                }
+            ]
+        },
+        {
+            name: 'maxItems',
+            label: 'Max reviews',
+            description: 'Store-wide: how many to show (default 6, at most 12).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        },
+        {
+            name: 'headingLevel',
+            label: 'Heading level',
+            description: 'Store-wide: the heading’s level on the page (default H2).',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    label: 'H2',
+                    value: '2'
+                },
+                {
+                    label: 'H3',
+                    value: '3'
+                },
+                {
+                    label: 'H4',
+                    value: '4'
+                }
+            ]
         }
     ]
 };

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

@@ -1 +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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"}
+{"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   * `product` (default): one product's reviews with the submit form.\n   * `store`: the store's latest approved reviews across every product, with\n   * the average and count, and no form — for a storefront home. In store\n   * scope the block draws its own heading (`heading`, default \"What\n   * customers say\") and draws NOTHING when there are no approved reviews,\n   * so a page never shows an empty reviews band.\n   */\n  scope?: 'product' | 'store'\n  /** Store scope: how many reviews to show (default 6, at most 12). */\n  maxItems?: number\n  /** Store scope: the heading's level, 2–4 (default 2). */\n  headingLevel?: 2 | 3 | 4 | '2' | '3' | '4'\n}\n\ninterface StoreReviewView {\n  id: string\n  rating: number\n  body: string\n  authorName: string\n  verified: boolean\n  createdAtMs: number\n  productName?: string\n  productSlug?: string\n}\n\nconst EDITOR_HINT_SX = {\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} as const\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    if (props.scope === 'store') return <StoreReviews ref={ref} {...props} />\n    return <SingleProductReviews ref={ref} {...props} />\n  },\n)\nProductReviews.displayName = 'AglynProductReviews'\n\n/**\n * The store-wide reviews band (`scope: 'store'`): the store's latest APPROVED\n * reviews, read-only stars, the reviewer's first name and initial, a verified\n * badge, and the product reviewed. Real reviews or nothing: with none it\n * renders an empty, zero-height element — never sample reviews on a live page\n * (sample testimonials presented as customers' would be fake reviews). The\n * editor, which has no site, gets a dashed hint instead.\n */\nconst StoreReviews = forwardRef<HTMLDivElement, ProductReviewsProps>(\n  (props, ref) => {\n    const {\n      productId: _productId,\n      heading,\n      scope: _scope,\n      maxItems,\n      headingLevel,\n      ...rest\n    } = props\n    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [props['sx']]\n    const { hostId } = Aglyn.useSite()\n    const [payload, setPayload] = useState<{\n      reviews: StoreReviewView[]\n      aggregate: { count: number; average: number }\n    } | null>(null)\n    const limit = maxItems && Number(maxItems) > 0 ? Math.min(12, Math.floor(Number(maxItems))) : 6\n\n    useEffect(() => {\n      if (!hostId) return\n      let active = true\n      void fetch(\n        `/api/commerce/reviews?hostId=${encodeURIComponent(hostId)}` +\n          `&scope=store&limit=${limit}`,\n      )\n        .then((response) => (response.ok ? response.json() : null))\n        .then((body) => {\n          if (!active || !body) return\n          setPayload({\n            reviews: Array.isArray(body.reviews) ? body.reviews : [],\n            aggregate: body.aggregate ?? { count: 0, average: 0 },\n          })\n        })\n        .catch(() => undefined)\n      return () => {\n        active = false\n      }\n    }, [hostId, limit])\n\n    if (!hostId) {\n      return (\n        <Box ref={ref} {...rest} sx={[EDITOR_HINT_SX, ...nodeSx]}>\n          {'★★★★★ Customer reviews appear here once shoppers review your products'}\n        </Box>\n      )\n    }\n    // Loading, failed, or none approved: nothing at all — not the node's\n    // padding, not a heading over an empty band.\n    if (!payload || payload.reviews.length === 0) {\n      return <Box ref={ref} data-store-reviews-empty=\"\" sx={{ display: 'none' }} />\n    }\n    // A select may store the level as a string; read it as a number.\n    const asked = Number(headingLevel)\n    const level = asked === 3 || asked === 4 ? asked : 2\n    const { aggregate } = payload\n    return (\n      <Box\n        ref={ref}\n        {...rest}\n        sx={[{ display: 'flex', flexDirection: 'column', gap: 3 }, ...nodeSx]}\n      >\n        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, textAlign: 'center' }}>\n          <Typography variant={level === 2 ? 'h4' : level === 3 ? 'h5' : 'h6'} component={`h${level}`}>\n            {heading || 'What customers say'}\n          </Typography>\n          {aggregate.count > 0 ? (\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n              <Rating value={aggregate.average} precision={0.1} readOnly size=\"small\" />\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                {`${aggregate.average} out of 5 · ${aggregate.count} ${aggregate.count === 1 ? 'review' : 'reviews'}`}\n              </Typography>\n            </Box>\n          ) : null}\n        </Box>\n        <Box\n          sx={{\n            display: 'grid',\n            gap: 2,\n            gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },\n          }}\n        >\n          {payload.reviews.map((review) => (\n            <Box\n              key={review.id}\n              component=\"figure\"\n              sx={{\n                m: 0,\n                p: 2.5,\n                display: 'flex',\n                flexDirection: 'column',\n                gap: 1,\n                border: 1,\n                borderColor: 'divider',\n                borderRadius: 2,\n                bgcolor: 'background.paper',\n              }}\n            >\n              <Rating value={review.rating} readOnly size=\"small\" />\n              <Typography component=\"blockquote\" variant=\"body1\" sx={{ m: 0, flex: 1 }}>\n                {review.body}\n              </Typography>\n              <Box component=\"figcaption\" sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>\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              {review.productName ? (\n                <Typography\n                  variant=\"caption\"\n                  color=\"text.secondary\"\n                  component={review.productSlug ? 'a' : 'span'}\n                  {...(review.productSlug ? { href: `/products/${review.productSlug}` } : {})}\n                  sx={{ textDecoration: 'none' }}\n                >\n                  {review.productName}\n                </Typography>\n              ) : null}\n            </Box>\n          ))}\n        </Box>\n      </Box>\n    )\n  },\n)\nStoreReviews.displayName = 'AglynStoreReviews'\n\nconst SingleProductReviews = forwardRef<HTMLDivElement, ProductReviewsProps>(\n  (props, ref) => {\n    const {\n      productId: productIdProp,\n      heading,\n      scope: _scope,\n      maxItems: _maxItems,\n      headingLevel: _headingLevel,\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 { 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 ref={ref} {...rest} sx={[EDITOR_HINT_SX, ...nodeSx]}>\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)\nSingleProductReviews.displayName = 'AglynSingleProductReviews'\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\" (\"What customers say\" store-wide).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      // Default `product`, so a page that already places this block keeps it.\n      name: 'scope',\n      label: 'Show',\n      description:\n        'One product’s reviews with a form, or the store’s latest approved ' +\n        'reviews across every product. Store-wide shows nothing until a ' +\n        'shopper’s review is approved.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { label: 'This product', value: 'product' },\n        { label: 'Whole store', value: 'store' },\n      ],\n    },\n    {\n      name: 'maxItems',\n      label: 'Max reviews',\n      description: 'Store-wide: how many to show (default 6, at most 12).',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      type: 'number',\n    },\n    {\n      name: 'headingLevel',\n      label: 'Heading level',\n      description: 'Store-wide: the heading’s level on the page (default H2).',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { label: 'H2', value: '2' },\n        { label: 'H3', value: '3' },\n        { label: 'H4', value: '4' },\n      ],\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","EDITOR_HINT_SX","p","border","borderColor","borderRadius","color","fontSize","fontFamily","resolveProductIdFromSlug","hostId","payload","match","window","location","pathname","response","fetch","encodeURIComponent","decodeURIComponent","catch","ok","json","String","product","id","ProductReviews","props","ref","scope","StoreReviews","SingleProductReviews","displayName","productId","_productId","heading","_scope","maxItems","headingLevel","rest","nodeSx","Array","isArray","useSite","setPayload","limit","Number","Math","min","floor","active","then","body","reviews","aggregate","count","average","undefined","sx","length","data-store-reviews-empty","display","asked","level","flexDirection","gap","alignItems","textAlign","variant","component","value","precision","readOnly","size","gridTemplateColumns","xs","sm","md","map","review","m","bgcolor","rating","flex","flexWrap","fontWeight","authorName","verified","label","productName","productSlug","href","textDecoration","productIdProp","_maxItems","_headingLevel","siteFetch","useSiteFetch","setProductId","setReviews","setAggregate","form","setForm","authorEmail","state","setState","resolved","handleSubmit","method","headers","JSON","stringify","mt","reply","pl","borderLeft","severity","maxWidth","onChange","_event","prev","placeholder","event","target","multiline","minRows","type","disabled","trim","onClick","alignSelf","schema","$id","pluginId","description","category","ComponentCategory","COMMERCE","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","FieldComponentType","PRODUCT_SELECT","TEXT_FIELD","SELECT","options","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

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

@@ -21,6 +21,12 @@ export interface RelatedProductsProps {
     productId?: string;
     heading?: string;
     maxItems?: number;
+    /**
+     * How the items are drawn: `strip`, the default, a scrolling row of small
+     * cards; `grid`, tall photo cards (4:5) with the name and price under
+     * them in a grid of up to four across — the product grid's photo look.
+     */
+    layout?: 'strip' | 'grid';
 }
 /**
  * Related products / upsell strip (AGL-325): the product's manual list,

package/src/lib/components/related-products.js

@@ -27,6 +27,7 @@ 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";
+import { ProductImagePlaceholder } from "./product-image-placeholder.js";
 // Component ids are persisted in screen documents; never rename.
 export const ID = 'related-products';
 /**
@@ -34,23 +35,29 @@ export const ID = 'related-products';
  * else "frequently bought together" from recent orders, else tag and
  * category neighbors — resolved server-side, rendered as cards.
  */ const RelatedProducts = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { productId: productIdProp, heading, maxItems } = props, rest = _object_without_properties_loose(props, [
+    var _site_pageData_commerce_product, _site_pageData_commerce, _site_pageData;
+    const { productId: productIdProp, heading, maxItems, layout } = props, rest = _object_without_properties_loose(props, [
         "productId",
         "heading",
-        "maxItems"
+        "maxItems",
+        "layout"
     ]);
     // 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 site = Aglyn.useSite();
+    const { hostId } = site;
+    // The page's product, when the server seeded it (AGL-659): its id is the
+    // anchor, so the rail skips a product lookup the page already made.
+    const seededProductId = (_site_pageData = site.pageData) == null ? void 0 : (_site_pageData_commerce = _site_pageData.commerce) == null ? void 0 : (_site_pageData_commerce_product = _site_pageData_commerce.product) == null ? void 0 : _site_pageData_commerce_product.id;
     const [items, setItems] = useState(null);
     useEffect(()=>{
         if (!hostId) return;
         let active = true;
         void (async ()=>{
             var _ref, _ref1;
-            let anchor = productIdProp != null ? productIdProp : '';
+            let anchor = productIdProp || seededProductId || '';
             if (!anchor) {
                 var _ref2;
                 var _payload_product;
@@ -74,7 +81,8 @@ export const ID = 'related-products';
         };
     }, [
         hostId,
-        productIdProp
+        productIdProp,
+        seededProductId
     ]);
     if (!hostId) {
         return /*#__PURE__*/ _jsx(Box, _extends({
@@ -98,17 +106,29 @@ export const ID = 'related-products';
     if (!items || items.length === 0) return /*#__PURE__*/ _jsx(Box, _extends({
         ref: ref
     }, rest));
+    const grid = layout === 'grid';
     return /*#__PURE__*/ _jsxs(Box, _extends({
         ref: ref
     }, rest, {
         children: [
             /*#__PURE__*/ _jsx(Typography, {
-                variant: "h6",
+                variant: grid ? 'h5' : 'h6',
+                component: "h2",
                 gutterBottom: true,
+                sx: grid ? {
+                    mb: 2
+                } : undefined,
                 children: heading || 'You may also like'
             }),
             /*#__PURE__*/ _jsx(Box, {
-                sx: {
+                sx: grid ? {
+                    display: 'grid',
+                    gap: 2,
+                    gridTemplateColumns: {
+                        xs: 'repeat(2, 1fr)',
+                        md: 'repeat(4, 1fr)'
+                    }
+                } : {
                     display: 'flex',
                     gap: 1.5,
                     overflowX: 'auto',
@@ -120,40 +140,56 @@ export const ID = 'related-products';
                     const imageUrl = Aglyn.siteRelativeMediaSrc(item.imageUrl, {
                         hostId
                     });
+                    const mediaSx = grid ? {
+                        aspectRatio: '4 / 5',
+                        borderRadius: 2
+                    } : {
+                        height: 110
+                    };
                     return /*#__PURE__*/ _jsx(Card, {
-                        variant: "outlined",
-                        sx: {
+                        variant: grid ? 'elevation' : 'outlined',
+                        elevation: 0,
+                        sx: grid ? {
+                            bgcolor: 'transparent',
+                            overflow: 'visible'
+                        } : {
                             minWidth: 160
                         },
                         children: /*#__PURE__*/ _jsxs(CardActionArea, {
                             href: `/products/${item.slug}`,
+                            sx: grid ? {
+                                borderRadius: 2
+                            } : undefined,
                             children: [
                                 imageUrl ? /*#__PURE__*/ _jsx(CardMedia, _extends({
                                     component: "img",
                                     image: imageUrl,
                                     alt: item.name,
-                                    sx: {
-                                        height: 110,
+                                    sx: _extends({}, mediaSx, {
                                         objectFit: 'cover'
-                                    }
-                                }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES)) : /*#__PURE__*/ _jsx(Box, {
-                                    sx: {
-                                        height: 110,
-                                        bgcolor: 'action.hover'
-                                    }
+                                    })
+                                }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES)) : // Never a blank tile: a product with no photo yet says
+                                // so, in the theme's colours (AGL-3676 follow-up).
+                                /*#__PURE__*/ _jsx(ProductImagePlaceholder, {
+                                    name: item.name,
+                                    sx: mediaSx
                                 }),
                                 /*#__PURE__*/ _jsxs(CardContent, {
-                                    sx: {
+                                    sx: grid ? {
+                                        px: 0.5,
+                                        pt: 1.5,
+                                        pb: 1
+                                    } : {
                                         py: 1
                                     },
                                     children: [
                                         /*#__PURE__*/ _jsx(Typography, {
-                                            variant: "body2",
+                                            variant: grid ? 'subtitle1' : 'body2',
                                             noWrap: true,
                                             children: item.name
                                         }),
                                         /*#__PURE__*/ _jsx(Typography, {
-                                            variant: "caption",
+                                            variant: grid ? 'body2' : 'caption',
                                             color: "text.secondary",
                                             children: item.priceComingSoon ? 'Price coming soon' : `$${item.priceUsd}`
                                         })
@@ -202,6 +238,23 @@ export const schema = {
             description: 'Cap the strip (default 6).',
             component: Aglyn.FieldComponentType.TEXT_FIELD,
             type: 'number'
+        },
+        {
+            // Default `strip`, so a page that already places this block keeps it.
+            name: 'layout',
+            label: 'Layout',
+            description: 'A scrolling strip of small cards, or a grid of tall photo cards.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    label: 'Strip',
+                    value: 'strip'
+                },
+                {
+                    label: 'Photo grid',
+                    value: 'grid'
+                }
+            ]
         }
     ]
 };