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

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

@@ -37,8 +37,29 @@ import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { BUNDLE_ID } from "../constants/bundle-common.js";
 import { STOREFRONT_CATALOG_DECLARATION, STOREFRONT_CATALOG_HEADERS, STOREFRONT_CATALOG_OPTIONS } from "../constants/storefront-catalog-query.js";
 import { generatePresetId } from "../utils/generate-preset-id.js";
+import { addToCart } from "../utils/add-to-cart.js";
+import { ProductImagePlaceholder } from "./product-image-placeholder.js";
 // Component ids are persisted in screen documents; never rename.
 export const ID = 'product-grid';
+/** What a card's quick add offers for one product. */ export function quickAddAction(item) {
+    var _item_variantCount;
+    if (item.priceComingSoon || item.soldOut) return null;
+    if (item.defaultVariantId) return 'add';
+    if (((_item_variantCount = item.variantCount) != null ? _item_variantCount : 0) > 1) return 'options';
+    return null;
+}
+/**
+ * The chip and tag a browsing grid opens on, from the page's address:
+ * `?category=<slug>` and `?tag=<tag>`. Read after hydration only — the
+ * server renders the unfiltered first page and has no address to read.
+ */ export function browseParamsFromSearch(search) {
+    var _params_get, _params_get1;
+    const params = new URLSearchParams(search);
+    return {
+        categorySlug: ((_params_get = params.get('category')) != null ? _params_get : '').trim(),
+        tag: ((_params_get1 = params.get('tag')) != null ? _params_get1 : '').trim()
+    };
+}
 /** What a card says where a product listed before it has a price would show one (AGL-3676). */ const PRICE_COMING_SOON_LABEL = 'Price coming soon';
 const SAMPLE_ITEMS = [
     {
@@ -141,7 +162,7 @@ function priceLabel(item) {
  */ const ProductGrid = /*#__PURE__*/ forwardRef((props, ref)=>{
     var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
     var _site_pageData_commerce_grids, _site_pageData_commerce, _site_pageData;
-    const { source, collectionId, collectionSlug: collectionSlugProp, categoryId, categorySlug, tag, sort: sortProp, columns, maxItems, emptyText, emptyTitle, emptyActionLabel, emptyActionHref, showFilters, showSearch, showCategories, showSort, showTypeFilter, showPriceFilter, pageSize, cardStyle } = props, rest = _object_without_properties_loose(props, [
+    const { source, collectionId, collectionSlug: collectionSlugProp, categoryId, categorySlug, tag, sort: sortProp, columns, maxItems, emptyText, emptyTitle, emptyActionLabel, emptyActionHref, showFilters, showSearch, showCategories, showSort, showTypeFilter, showPriceFilter, pageSize, cardStyle, quickAdd } = props, rest = _object_without_properties_loose(props, [
         "source",
         "collectionId",
         "collectionSlug",
@@ -162,7 +183,8 @@ function priceLabel(item) {
         "showTypeFilter",
         "showPriceFilter",
         "pageSize",
-        "cardStyle"
+        "cardStyle",
+        "quickAdd"
     ]);
     const photoCards = cardStyle === 'photo';
     // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
@@ -170,7 +192,11 @@ function priceLabel(item) {
         props['sx']
     ];
     const site = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
     const { hostId } = site;
+    // Quick add (AGL-3676 follow-up): which card is adding, which just did.
+    const [quickAdding, setQuickAdding] = useState('');
+    const [quickAdded, setQuickAdded] = useState('');
     // Server-rendered first page (AGL-659). The site-page enricher ran this
     // grid's own query on the server and keyed the result by node id — two
     // grids on a page have different queries, so an unkeyed seed would put
@@ -208,6 +234,29 @@ function priceLabel(item) {
     const collectionSlug = source === 'collection' ? collectionSlugProp || collectionSlugFromLocation() : collectionSlugProp;
     const pageLimit = pageSize && Number(pageSize) > 0 ? Math.floor(Number(pageSize)) : 0;
     const pinnedCategoryId = source === 'category' ? categoryId != null ? categoryId : '' : '';
+    // A browsing grid opens on the address's `?category=` / `?tag=`: a shop
+    // page linked as /shop?category=candles shows that chip picked. Read in
+    // an effect, so the server and the first client render agree.
+    const [urlCategorySlug, setUrlCategorySlug] = useState('');
+    useEffect(()=>{
+        if (!hostId || typeof window === 'undefined') return;
+        const asked = browseParamsFromSearch(window.location.search);
+        if (showCategories && asked.categorySlug) setUrlCategorySlug(asked.categorySlug);
+        if (showFilters && asked.tag) setActiveTag(asked.tag);
+    // Once, on arrival: later chip picks are the visitor's.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hostId
+    ]);
+    useEffect(()=>{
+        if (!urlCategorySlug || !categories.length) return;
+        const match = categories.find((category)=>category.slug === urlCategorySlug);
+        if (match) setActiveCategoryId(match.id);
+        setUrlCategorySlug('');
+    }, [
+        urlCategorySlug,
+        categories
+    ]);
     // Debounce keystrokes so large catalogs aren't fetched per letter.
     useEffect(()=>{
         const timer = setTimeout(()=>setQuery(searchInput.trim()), 300);
@@ -663,90 +712,118 @@ function priceLabel(item) {
             const imageUrl = Aglyn.siteRelativeMediaSrc(item.imageUrl, {
                 hostId
             });
-            return /*#__PURE__*/ _jsx(Card, {
+            return /*#__PURE__*/ _jsxs(Card, {
                 variant: photoCards ? 'elevation' : 'outlined',
                 elevation: 0,
                 sx: photoCards ? {
                     bgcolor: 'transparent',
                     overflow: 'visible'
                 } : undefined,
-                children: /*#__PURE__*/ _jsxs(CardActionArea, {
-                    href: hostId ? `/products/${item.slug}` : undefined,
-                    disabled: !hostId,
-                    sx: photoCards ? {
-                        borderRadius: 2
-                    } : undefined,
-                    children: [
-                        imageUrl ? /*#__PURE__*/ _jsx(CardMedia, _extends({
-                            component: "img",
-                            image: imageUrl,
-                            alt: item.name,
-                            sx: photoCards ? {
-                                aspectRatio: '4 / 5',
-                                objectFit: 'cover',
-                                borderRadius: 2,
-                                // A storefront's photo answers the pointer (AGL-3676).
-                                transition: 'opacity 200ms ease',
-                                '.MuiCardActionArea-root:hover &': {
-                                    opacity: 0.88
+                children: [
+                    /*#__PURE__*/ _jsxs(CardActionArea, {
+                        href: hostId ? `/products/${item.slug}` : undefined,
+                        disabled: !hostId,
+                        sx: photoCards ? {
+                            borderRadius: 2
+                        } : undefined,
+                        children: [
+                            imageUrl ? /*#__PURE__*/ _jsx(CardMedia, _extends({
+                                component: "img",
+                                image: imageUrl,
+                                alt: item.name,
+                                sx: photoCards ? {
+                                    aspectRatio: '4 / 5',
+                                    objectFit: 'cover',
+                                    borderRadius: 2,
+                                    // A storefront's photo answers the pointer (AGL-3676).
+                                    transition: 'opacity 200ms ease',
+                                    '.MuiCardActionArea-root:hover &': {
+                                        opacity: 0.88
+                                    }
+                                } : {
+                                    height: 160,
+                                    objectFit: 'cover'
                                 }
-                            } : {
-                                height: 160,
-                                objectFit: 'cover'
-                            }
-                        }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES)) : /*#__PURE__*/ _jsx(Box, {
-                            sx: photoCards ? {
-                                aspectRatio: '4 / 5',
-                                bgcolor: 'action.hover',
-                                borderRadius: 2
-                            } : {
-                                height: 160,
-                                bgcolor: 'action.hover'
-                            }
-                        }),
-                        /*#__PURE__*/ _jsxs(CardContent, {
-                            sx: photoCards ? {
-                                px: 0.5,
-                                pt: 1.5,
-                                pb: 1
-                            } : undefined,
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: photoCards ? 'subtitle1' : 'subtitle2',
-                                    noWrap: true,
-                                    children: item.name
-                                }),
-                                /*#__PURE__*/ _jsxs(Box, {
-                                    sx: {
-                                        display: 'flex',
-                                        gap: 1,
-                                        alignItems: 'center'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(Typography, {
-                                            variant: "body2",
-                                            color: "text.secondary",
-                                            children: priceLabel(item)
-                                        }),
-                                        item.compareAtPriceUsd ? /*#__PURE__*/ _jsx(Typography, {
-                                            variant: "caption",
-                                            color: "text.disabled",
-                                            sx: {
-                                                textDecoration: 'line-through'
-                                            },
-                                            children: `$${item.compareAtPriceUsd}`
-                                        }) : null,
-                                        item.soldOut ? /*#__PURE__*/ _jsx(Chip, {
-                                            label: "Sold out",
-                                            size: "small",
-                                            variant: "outlined"
-                                        }) : null
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
+                            }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES)) : // Never a blank tile (AGL-3676 follow-up).
+                            /*#__PURE__*/ _jsx(ProductImagePlaceholder, {
+                                name: item.name,
+                                sx: photoCards ? {
+                                    aspectRatio: '4 / 5',
+                                    borderRadius: 2
+                                } : {
+                                    height: 160
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs(CardContent, {
+                                sx: photoCards ? {
+                                    px: 0.5,
+                                    pt: 1.5,
+                                    pb: 1
+                                } : undefined,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: photoCards ? 'subtitle1' : 'subtitle2',
+                                        noWrap: true,
+                                        children: item.name
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        sx: {
+                                            display: 'flex',
+                                            gap: 1,
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                color: "text.secondary",
+                                                children: priceLabel(item)
+                                            }),
+                                            item.compareAtPriceUsd ? /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.disabled",
+                                                sx: {
+                                                    textDecoration: 'line-through'
+                                                },
+                                                children: `$${item.compareAtPriceUsd}`
+                                            }) : null,
+                                            item.soldOut ? /*#__PURE__*/ _jsx(Chip, {
+                                                label: "Sold out",
+                                                size: "small",
+                                                variant: "outlined"
+                                            }) : null
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    quickAdd ? /*#__PURE__*/ _jsx(QuickAddButton, {
+                        item: item,
+                        inert: !hostId,
+                        busy: quickAdding === item.id,
+                        added: quickAdded === item.id,
+                        photoCards: photoCards,
+                        onAdd: async ()=>{
+                            if (!hostId || !item.defaultVariantId || quickAdding) return;
+                            setQuickAdding(item.id);
+                            const ok = await addToCart({
+                                hostId,
+                                siteFetch,
+                                productId: item.id,
+                                variantId: item.defaultVariantId,
+                                quantity: 1,
+                                item: {
+                                    item_id: item.id,
+                                    item_name: item.name,
+                                    price: item.priceUsd,
+                                    quantity: 1
+                                }
+                            });
+                            setQuickAdding('');
+                            if (ok) setQuickAdded(item.id);
+                        }
+                    }) : null
+                ]
             }, item.id);
         })
     });
@@ -834,6 +911,50 @@ function priceLabel(item) {
         ]
     }));
 });
+/**
+ * A card's quick add: outside the card's link, so a click never follows it.
+ * Sample cards on the canvas show the button inert.
+ */ function QuickAddButton({ item, inert, busy, added, photoCards, onAdd }) {
+    const action = inert ? 'add' : quickAddAction(item);
+    if (!action) return null;
+    const sx = photoCards ? {
+        mt: 0.5,
+        mx: 0.5,
+        mb: 1
+    } : {
+        mx: 2,
+        mb: 2
+    };
+    if (action === 'options') {
+        return /*#__PURE__*/ _jsx(Box, {
+            sx: sx,
+            children: /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "outlined",
+                fullWidth: true,
+                href: `/products/${item.slug}`,
+                onClick: (event)=>event.stopPropagation(),
+                children: 'Choose options'
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: sx,
+        children: /*#__PURE__*/ _jsx(Button, {
+            size: "small",
+            variant: "outlined",
+            fullWidth: true,
+            disabled: inert || busy,
+            "aria-label": `Add ${item.name} to cart`,
+            onClick: (event)=>{
+                event.preventDefault();
+                event.stopPropagation();
+                onAdd();
+            },
+            children: added ? 'Added ✓' : busy ? 'Adding…' : 'Add to cart'
+        })
+    });
+}
 ProductGrid.displayName = 'AglynProductGrid';
 export const schema = {
     $id: ID,
@@ -1025,6 +1146,13 @@ export const schema = {
                     value: 'photo'
                 }
             ]
+        },
+        {
+            // Off by default, so no existing grid changes shape on deploy.
+            name: 'quickAdd',
+            label: 'Quick add to cart',
+            description: 'An Add to cart button on each card for a product with one variant; ' + '"Choose options" for one with several.',
+            component: Aglyn.FieldComponentType.CHECKBOX
         }
     ]
 };