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

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

@@ -18,18 +18,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * limitations under the License.
  */ import { advertisingConsentField } from "@aglyn/aglyn/app-utils/advertising-consent";
 import * as Aglyn from "@aglyn/aglyn";
-import { buildAddToCartParams, buildBeginCheckoutParams, trackEvent, trackEventBeforeNavigation } from "@aglyn/aglyn/app-utils/analytics-events";
-import { recordSiteJourneyStep } from "@aglyn/aglyn/app-utils/site-journey";
+import { buildBeginCheckoutParams, trackEvent, trackEventBeforeNavigation } from "@aglyn/aglyn/app-utils/analytics-events";
 import { isPaymentsNotConfigured } from "@aglyn/aglyn/app-utils/payments-configured";
 import { storefrontPaymentsNotConfiguredText } from "../constants/storefront-payments.js";
 import * as CommerceModel from "../model/index.js";
-import { mdiTagOutline } from "@aglyn/shared-data-mdi";
+import { mdiChevronDown, mdiTagOutline } from "@aglyn/shared-data-mdi";
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
 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 MenuItem from "@mui/material/MenuItem";
 import Skeleton from "@mui/material/Skeleton";
+import SvgIcon from "@mui/material/SvgIcon";
 import TextField from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -38,7 +41,7 @@ import { Suspense, forwardRef, lazy, useEffect, useMemo, useRef, useState } from
 import { BUNDLE_ID } from "../constants/bundle-common.js";
 import { generatePresetId } from "../utils/generate-preset-id.js";
 import { useStorefrontPurchaseEvent } from "../utils/use-storefront-purchase-event.js";
-import { CART_UPDATED_EVENT } from "./cart.js";
+import { addToCart } from "../utils/add-to-cart.js";
 import { CartFulfillmentChoice, useCartFulfillment } from "./cart-fulfillment.js";
 import { ID as PRODUCT_REVIEWS_ID } from "./product-reviews.js";
 import { ID as RELATED_PRODUCTS_ID } from "./related-products.js";
@@ -120,6 +123,84 @@ const SAMPLE = {
         quantity
     };
 }
+/**
+ * Which options are a CHOICE (AGL-3676 follow-up). A select with one entry —
+ * or with entries no variant carries — is not a choice, and on a live store
+ * it read as a broken control: an AI-built candle listed a "Scent" select
+ * that offered nothing to pick. Decided from the variants, which are what is
+ * sold: an option's values count only where a variant carries them, and only
+ * when no variant names the option at all do its listed values stand in —
+ * and then as a choice only when there are several variants to choose among.
+ */ export function optionPresentation(options, variants) {
+    return options.map((option)=>{
+        var _option_values;
+        const listed = [
+            ...new Set(((_option_values = option.values) != null ? _option_values : []).map((value)=>String(value).trim()).filter(Boolean))
+        ];
+        const carried = new Set(variants.map((variant)=>{
+            var _variant_options;
+            return (_variant_options = variant.options) == null ? void 0 : _variant_options[option.name];
+        }).filter((value)=>typeof value === 'string' && value.trim() !== ''));
+        const values = carried.size ? [
+            ...listed.filter((value)=>carried.has(value)),
+            ...[
+                ...carried
+            ].filter((value)=>!listed.includes(value))
+        ] : variants.length > 1 || listed.length === 1 ? listed : [];
+        return {
+            name: option.name,
+            values,
+            mode: values.length >= 2 ? 'select' : values.length === 1 ? 'text' : 'hidden'
+        };
+    });
+}
+/** The selections a page opens on: the first variant on sale, else the first. */ function initialSelections(product) {
+    var _ref, _ref1;
+    const first = (_ref = product == null ? void 0 : product.variants.find((variant)=>!variant.soldOut)) != null ? _ref : product == null ? void 0 : product.variants[0];
+    return _extends({}, (_ref1 = first == null ? void 0 : first.options) != null ? _ref1 : {});
+}
+/** What the Details panel lists: only facts the product record holds. */ export function productDetailFacts(product, variant, presented) {
+    var _product_tags;
+    const facts = [];
+    if (product.type === 'digital') facts.push({
+        label: 'Format',
+        value: 'Digital product'
+    });
+    if (product.type === 'service') facts.push({
+        label: 'Format',
+        value: 'Service'
+    });
+    for (const option of presented){
+        if (option.mode !== 'hidden') {
+            facts.push({
+                label: option.name,
+                value: option.values.join(', ')
+            });
+        }
+    }
+    if (variant == null ? void 0 : variant.sku) facts.push({
+        label: 'SKU',
+        value: variant.sku
+    });
+    if ((_product_tags = product.tags) == null ? void 0 : _product_tags.length) facts.push({
+        label: 'Tags',
+        value: product.tags.join(', ')
+    });
+    return facts;
+}
+/**
+ * What the Shipping & returns panel says, from the product's kind and the
+ * store's own return settings — never a policy the store has not set.
+ */ export function productShippingLines(product, returns) {
+    const lines = [];
+    if (product.type === 'digital') lines.push('Delivered digitally after purchase — nothing ships.');
+    else if (product.type === 'service') lines.push('A service — nothing ships.');
+    else lines.push('Shipping is calculated at checkout.');
+    if (returns && returns.windowDays > 0) {
+        lines.push(`Returns accepted within ${returns.windowDays} ` + `${returns.windowDays === 1 ? 'day' : 'days'} of shipping — ` + 'request one from your order status page.');
+    }
+    return lines;
+}
 function slugFromLocation() {
     if (typeof window === 'undefined') return '';
     const match = window.location.pathname.match(/\/products\/([^/?#]+)/);
@@ -133,12 +214,14 @@ function slugFromLocation() {
  * slug prop pins it; sample data on the inert canvas.
  */ const ProductDetail = /*#__PURE__*/ forwardRef((props, ref)=>{
     var _ref, _ref1, _ref2;
-    var _site_pageData_commerce, _site_pageData;
-    const { slug: slugProp, buyLabel, hideDescription, showCoupon } = props, rest = _object_without_properties_loose(props, [
+    var _site_pageData;
+    const { slug: slugProp, buyLabel, hideDescription, showCoupon, showDetails, showShipping } = props, rest = _object_without_properties_loose(props, [
         "slug",
         "buyLabel",
         "hideDescription",
-        "showCoupon"
+        "showCoupon",
+        "showDetails",
+        "showShipping"
     ]);
     // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
     const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
@@ -157,12 +240,19 @@ function slugFromLocation() {
     // emitted a <Skeleton> and the crawler got a product page with no
     // product in it. Absent in the besigner/preview, where the effect below
     // still fetches — so this is an optimisation, not a new requirement.
-    const seededProduct = (_site_pageData = site.pageData) == null ? void 0 : (_site_pageData_commerce = _site_pageData.commerce) == null ? void 0 : _site_pageData_commerce.product;
+    const seededCommerce = (_site_pageData = site.pageData) == null ? void 0 : _site_pageData.commerce;
+    const seededProduct = seededCommerce == null ? void 0 : seededCommerce.product;
+    // The store's return window, seeded with the built-in product page only
+    // when the store takes returns of this product's kind.
+    const seededReturns = seededCommerce == null ? void 0 : seededCommerce.returns;
     const [detail, setDetail] = useState(seededProduct != null ? seededProduct : null);
-    const [selections, setSelections] = useState({});
+    // Opened on the first variant on sale. A seeded page skips the fetch that
+    // used to set this, so it opened with nothing selected — an empty select.
+    const [selections, setSelections] = useState(()=>initialSelections(seededProduct));
     const [quantity, setQuantity] = useState(1);
     /** A discount or coupon code typed on the product page. */ const [coupon, setCoupon] = useState('');
-    const [activeImage, setActiveImage] = useState(0);
+    // A thumbnail the shopper picked; null follows the variant's own photo.
+    const [activeImage, setActiveImage] = useState(null);
     // `unconfigured` is not an `error` with softer words (AGL-2019). A store
     // with no Stripe key answers 501, and rendering that at `severity="error"`
     // tells a shopper their payment failed when nothing was ever attempted —
@@ -215,7 +305,6 @@ function slugFromLocation() {
             const product = payload == null ? void 0 : payload.product;
             setDetail(product != null ? product : 'missing');
             if (product) {
-                var _product_variants_find, _ref;
                 // GA4 ecommerce mirror (AGL-327), through the shared taxonomy
                 // since AGL-1591 rather than raw gtag — same consent gate, same
                 // sanitizer, and the name is now checked by the compiler.
@@ -227,8 +316,7 @@ function slugFromLocation() {
                         }
                     ]
                 });
-                const first = (_product_variants_find = product.variants.find((variant)=>!variant.soldOut)) != null ? _product_variants_find : product.variants[0];
-                setSelections((_ref = first == null ? void 0 : first.options) != null ? _ref : {});
+                setSelections(initialSelections(product));
             }
         }).catch(()=>{
             if (active) setDetail('missing');
@@ -256,36 +344,20 @@ function slugFromLocation() {
     const handleAddToCart = async ()=>{
         if (!hostId || !resolved || !variant) return;
         setAdded(false);
-        const response = await siteFetch('/api/commerce/cart', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                hostId,
-                action: 'add',
-                productId: resolved.id,
-                variantId: variant.id,
-                quantity
-            })
-        }).catch(()=>null);
-        if (response == null ? void 0 : response.ok) {
-            setAdded(true);
-            // A funnel step (AGL-3605): the product, by its id.
-            recordSiteJourneyStep('cart', resolved.id);
-            // Priced (AGL-1591's shape, completed): the resolved variant's price
-            // and the chosen quantity are both known here and both come from the
-            // server's product payload, so GA4's "value added to cart" is a real
-            // number rather than the empty column an items-only hit leaves. The
-            // `value` describes what was JUST ADDED, not the cart's new total —
-            // see `buildAddToCartParams`.
-            trackEvent('add_to_cart', buildAddToCartParams({
-                items: [
-                    buyItem(resolved, variant, quantity)
-                ]
-            }));
-            window.dispatchEvent(new Event(CART_UPDATED_EVENT));
-        }
+        // Priced (AGL-1591's shape, completed): the resolved variant's price
+        // and the chosen quantity both come from the server's product payload,
+        // so GA4's "value added to cart" is a real number. The funnel step
+        // (AGL-3605) and the badge refresh ride the same shared helper the
+        // product grid's quick add uses.
+        const ok = await addToCart({
+            hostId,
+            siteFetch,
+            productId: resolved.id,
+            variantId: variant.id,
+            quantity,
+            item: buyItem(resolved, variant, quantity)
+        });
+        if (ok) setAdded(true);
     };
     /**
      * Idempotency key for ONE buy-now attempt (AGL-1697).
@@ -501,9 +573,12 @@ function slugFromLocation() {
     // schema.org `image` array below is read out of band by a crawler, where
     // an absolute URL is the point. That one wants `absoluteMediaSrc` with
     // the site's own origin, which is the tenant page's job (AGL-1725).
-    const galleryImage = Aglyn.siteRelativeMediaSrc((_ref1 = (_ref2 = variant == null ? void 0 : variant.imageUrl) != null ? _ref2 : resolved.mediaUrls[activeImage]) != null ? _ref1 : resolved.mediaUrls[0], {
+    const galleryImage = Aglyn.siteRelativeMediaSrc((_ref1 = (_ref2 = activeImage !== null ? resolved.mediaUrls[activeImage] : undefined) != null ? _ref2 : variant == null ? void 0 : variant.imageUrl) != null ? _ref1 : resolved.mediaUrls[0], {
         hostId
     });
+    const presentedOptions = optionPresentation(resolved.options, resolved.variants);
+    const detailFacts = showDetails ? productDetailFacts(resolved, variant, presentedOptions) : [];
+    const shippingLines = showShipping ? productShippingLines(resolved, (seededProduct == null ? void 0 : seededProduct.id) === resolved.id ? seededReturns : undefined) : [];
     // Subscription framing (AGL-545): subscription-only products price as
     // $X/mo|/yr with a "Subscribe" button; subscriptionOptional products
     // surface the one-time/subscribe toggle instead. Same price either way
@@ -608,13 +683,13 @@ function slugFromLocation() {
                                 alt: "",
                                 onClick: ()=>setActiveImage(index),
                                 sx: {
-                                    width: 56,
-                                    height: 56,
+                                    width: 64,
+                                    height: 64,
                                     objectFit: 'cover',
                                     borderRadius: 1,
                                     cursor: 'pointer',
                                     border: 2,
-                                    borderColor: index === activeImage ? 'primary.main' : 'transparent'
+                                    borderColor: index === (activeImage != null ? activeImage : 0) ? 'primary.main' : 'transparent'
                                 }
                             }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES), `${url}-${index}`))
                     }) : null
@@ -711,14 +786,25 @@ function slugFromLocation() {
                             })
                         ]
                     }) : null,
-                    resolved.options.map((option)=>{
+                    presentedOptions.map((option)=>{
                         var _selections_option_name;
-                        return /*#__PURE__*/ _jsx(TextField, {
+                        return option.mode === 'hidden' ? null : option.mode === 'text' ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            sx: {
+                                mb: 1.5
+                            },
+                            children: `${option.name}: ${option.values[0]}`
+                        }, option.name) : /*#__PURE__*/ _jsx(TextField, {
                             label: option.name,
-                            value: (_selections_option_name = selections[option.name]) != null ? _selections_option_name : '',
-                            onChange: (event)=>setSelections((prev)=>_extends({}, prev, {
+                            value: option.values.includes((_selections_option_name = selections[option.name]) != null ? _selections_option_name : '') ? selections[option.name] : '',
+                            onChange: (event)=>{
+                                // A new variant shows its own photo, not the last thumbnail.
+                                setActiveImage(null);
+                                setSelections((prev)=>_extends({}, prev, {
                                         [option.name]: event.target.value
-                                    })),
+                                    }));
+                            },
                             size: "small",
                             select: true,
                             fullWidth: true,
@@ -937,7 +1023,65 @@ function slugFromLocation() {
                     !hideDescription && resolved.description ? /*#__PURE__*/ _jsx(Typography, {
                         variant: "body1",
                         color: "text.secondary",
+                        sx: {
+                            whiteSpace: 'pre-line'
+                        },
                         children: resolved.description
+                    }) : null,
+                    detailFacts.length || shippingLines.length ? /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            mt: 3
+                        },
+                        children: [
+                            detailFacts.length ? /*#__PURE__*/ _jsx(ProductDetailPanel, {
+                                title: "Details",
+                                children: /*#__PURE__*/ _jsx(Box, {
+                                    component: "dl",
+                                    sx: {
+                                        m: 0,
+                                        display: 'grid',
+                                        gridTemplateColumns: 'auto 1fr',
+                                        columnGap: 2,
+                                        rowGap: 0.75
+                                    },
+                                    children: detailFacts.map((fact)=>/*#__PURE__*/ _jsxs(Box, {
+                                            sx: {
+                                                display: 'contents'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    component: "dt",
+                                                    variant: "body2",
+                                                    sx: {
+                                                        fontWeight: 600
+                                                    },
+                                                    children: fact.label
+                                                }),
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    component: "dd",
+                                                    variant: "body2",
+                                                    color: "text.secondary",
+                                                    sx: {
+                                                        m: 0
+                                                    },
+                                                    children: fact.value
+                                                })
+                                            ]
+                                        }, fact.label))
+                                })
+                            }) : null,
+                            shippingLines.length ? /*#__PURE__*/ _jsx(ProductDetailPanel, {
+                                title: "Shipping & returns",
+                                children: shippingLines.map((line)=>/*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        sx: {
+                                            mb: 0.75
+                                        },
+                                        children: line
+                                    }, line))
+                            }) : null
+                        ]
                     }) : null
                 ]
             })
@@ -945,6 +1089,55 @@ function slugFromLocation() {
     }));
 });
 ProductDetail.displayName = 'AglynProductDetail';
+/**
+ * One fold of the panels under the buy box: a flat, divided accordion in the
+ * theme's own colours — the way a designer storefront stacks Details and
+ * Shipping under the description.
+ */ function ProductDetailPanel({ title, children }) {
+    return /*#__PURE__*/ _jsxs(Accordion, {
+        disableGutters: true,
+        elevation: 0,
+        square: true,
+        sx: {
+            bgcolor: 'transparent',
+            borderTop: 1,
+            borderColor: 'divider',
+            '&:last-of-type': {
+                borderBottom: 1,
+                borderColor: 'divider'
+            },
+            '&::before': {
+                display: 'none'
+            }
+        },
+        children: [
+            /*#__PURE__*/ _jsx(AccordionSummary, {
+                expandIcon: /*#__PURE__*/ _jsx(SvgIcon, {
+                    fontSize: "small",
+                    children: /*#__PURE__*/ _jsx("path", {
+                        d: mdiChevronDown.path
+                    })
+                }),
+                sx: {
+                    px: 0
+                },
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    variant: "subtitle1",
+                    component: "h2",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ _jsx(AccordionDetails, {
+                sx: {
+                    px: 0,
+                    pt: 0,
+                    pb: 2
+                },
+                children: children
+            })
+        ]
+    });
+}
 export const schema = {
     $id: ID,
     pluginId: BUNDLE_ID,
@@ -988,6 +1181,19 @@ export const schema = {
             label: 'Show discount code field',
             description: 'Lets a buyer enter a discount or coupon code before buying.',
             component: Aglyn.FieldComponentType.CHECKBOX
+        },
+        {
+            // Off by default, so no existing page changes shape on deploy.
+            name: 'showDetails',
+            label: 'Show details panel',
+            description: 'A Details fold under the description with the facts the product ' + 'holds: its options, SKU, tags, and whether it is digital or a service.',
+            component: Aglyn.FieldComponentType.CHECKBOX
+        },
+        {
+            name: 'showShipping',
+            label: 'Show shipping & returns panel',
+            description: 'A Shipping & returns fold: shipping priced at checkout (or digital ' + 'delivery), and your return window when your store takes returns.',
+            component: Aglyn.FieldComponentType.CHECKBOX
         }
     ]
 };