@aglyn/plugins-commerce 1.0.0-beta.290 → 1.0.0-beta.292

package/src/lib/components/product-options-field-body.js

@@ -0,0 +1,260 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { formFieldDataKey } from "../model/commerce-product-field.js";
+import { encodeProductFieldValue, productFieldLabel } from "../model/commerce-quote-request.js";
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormLabel from "@mui/material/FormLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+/** The most products the picker lists. */ const PICKER_LIMIT = 100;
+/** The variant whose options are exactly the ones picked, else none. */ export function variantForOptions(detail, picked) {
+    var _ref, _ref1;
+    var _detail_variants_;
+    if (!detail.options.length) return (_ref = (_detail_variants_ = detail.variants[0]) == null ? void 0 : _detail_variants_.id) != null ? _ref : null;
+    if (detail.options.some((option)=>!picked[option.name])) return null;
+    const match = detail.variants.find((variant)=>detail.options.every((option)=>{
+            var _variant_options;
+            return ((_variant_options = variant.options) == null ? void 0 : _variant_options[option.name]) === picked[option.name];
+        }));
+    return (_ref1 = match == null ? void 0 : match.id) != null ? _ref1 : null;
+}
+/**
+ * The Product and options field's body (AGL-4098): a picker of the store's
+ * products (or the one the author chose), then one picker per option. It
+ * posts the readable line under its name and the exact choice beside it; a
+ * real, invisible input carries the line, so a required field with nothing
+ * picked stops the form like any required field.
+ *
+ * On the canvas and in Preview it draws with the store's products but sends
+ * nothing, like every form field there.
+ */ const ProductOptionsFieldBody = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref, _ref1;
+    var _products_find;
+    const { name: rawName, label, productId: fixedProductId, required } = props, rest = _object_without_properties_loose(props, [
+        "name",
+        "label",
+        "productId",
+        "required"
+    ]);
+    const name = String(rawName != null ? rawName : '').trim() || 'product';
+    const { hostId } = Aglyn.useSite();
+    const inputId = useId();
+    const answerRef = useRef(null);
+    const [products, setProducts] = useState(null);
+    const [productId, setProductId] = useState(fixedProductId != null ? fixedProductId : '');
+    const [detail, setDetail] = useState(null);
+    const [picked, setPicked] = useState({});
+    // The store's products, or the one the author chose.
+    useEffect(()=>{
+        if (!hostId) return;
+        let active = true;
+        const query = new URLSearchParams(_extends({
+            hostId
+        }, fixedProductId ? {
+            ids: fixedProductId
+        } : {
+            sort: 'name',
+            limit: String(PICKER_LIMIT)
+        }));
+        void fetch(`/api/commerce/catalog?${query.toString()}`).then((response)=>response.ok ? response.json() : {
+                items: []
+            }).then((payload)=>{
+            var _ref;
+            var _items_;
+            if (!active) return;
+            const items = Array.isArray(payload == null ? void 0 : payload.items) ? payload.items : [];
+            setProducts(items);
+            if (fixedProductId) setProductId((_ref = (_items_ = items[0]) == null ? void 0 : _items_.id) != null ? _ref : '');
+        }).catch(()=>active && setProducts([]));
+        return ()=>{
+            active = false;
+        };
+    }, [
+        hostId,
+        fixedProductId
+    ]);
+    // The chosen product's options.
+    const slug = (_ref = products == null ? void 0 : (_products_find = products.find((product)=>product.id === productId)) == null ? void 0 : _products_find.slug) != null ? _ref : '';
+    useEffect(()=>{
+        setDetail(null);
+        setPicked({});
+        if (!hostId || !slug) return;
+        let active = true;
+        void fetch(`/api/commerce/product?hostId=${encodeURIComponent(hostId)}&slug=${encodeURIComponent(slug)}`).then((response)=>response.ok ? response.json() : null).then((payload)=>{
+            var _product_options, _product_variants;
+            if (!active || !(payload == null ? void 0 : payload.product)) return;
+            const product = payload.product;
+            setDetail(_extends({}, product, {
+                options: (_product_options = product.options) != null ? _product_options : [],
+                variants: (_product_variants = product.variants) != null ? _product_variants : []
+            }));
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    }, [
+        hostId,
+        slug
+    ]);
+    const variantId = detail ? variantForOptions(detail, picked) : null;
+    const complete = Boolean(detail && variantId);
+    const answer = complete && detail ? productFieldLabel(detail.name, picked) : '';
+    const value = complete && detail ? encodeProductFieldValue(_extends({
+        productId: detail.id
+    }, variantId && variantId !== 'default' ? {
+        variantId
+    } : {}, Object.keys(picked).length ? {
+        options: picked
+    } : {})) : '';
+    // Every change is announced, as a typed answer is, to anything listening on the form.
+    const announced = useRef(answer);
+    useEffect(()=>{
+        var _answerRef_current;
+        if (announced.current === answer) return;
+        announced.current = answer;
+        (_answerRef_current = answerRef.current) == null ? void 0 : _answerRef_current.dispatchEvent(new Event('change', {
+            bubbles: true
+        }));
+    }, [
+        answer
+    ]);
+    const listed = useMemo(()=>products != null ? products : [], [
+        products
+    ]);
+    // On the canvas there is no site to list from: it says what the visitor will pick from.
+    const placeholder = !hostId ? 'Your store’s products' : products === null ? 'Loading products…' : listed.length ? 'Choose a product' : 'No products to choose from yet';
+    return /*#__PURE__*/ _jsxs(FormControl, _extends({
+        ref: ref,
+        fullWidth: true,
+        required: Boolean(required)
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx(FormLabel, {
+                htmlFor: inputId,
+                children: label || 'Product'
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1.5,
+                sx: {
+                    mt: 1,
+                    position: 'relative'
+                },
+                children: [
+                    fixedProductId ? null : /*#__PURE__*/ _jsx(TextField, {
+                        id: inputId,
+                        select: true,
+                        size: "small",
+                        fullWidth: true,
+                        value: productId,
+                        onChange: (event)=>setProductId(event.target.value),
+                        disabled: !listed.length,
+                        slotProps: {
+                            select: {
+                                displayEmpty: true,
+                                renderValue: (selected)=>{
+                                    var _ref;
+                                    var _listed_find;
+                                    return (_ref = (_listed_find = listed.find((product)=>product.id === selected)) == null ? void 0 : _listed_find.name) != null ? _ref : /*#__PURE__*/ _jsx(Box, {
+                                        component: "span",
+                                        sx: {
+                                            color: 'text.secondary'
+                                        },
+                                        children: placeholder
+                                    });
+                                }
+                            }
+                        },
+                        children: listed.map((product)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: product.id,
+                                children: product.name
+                            }, product.id))
+                    }),
+                    fixedProductId && detail ? /*#__PURE__*/ _jsx(FormHelperText, {
+                        sx: {
+                            mx: 0
+                        },
+                        children: detail.name
+                    }) : null,
+                    ((_ref1 = detail == null ? void 0 : detail.options) != null ? _ref1 : []).map((option)=>{
+                        var _picked_option_name;
+                        return /*#__PURE__*/ _jsx(TextField, {
+                            select: true,
+                            size: "small",
+                            fullWidth: true,
+                            label: option.name,
+                            value: (_picked_option_name = picked[option.name]) != null ? _picked_option_name : '',
+                            onChange: (event)=>setPicked((current)=>_extends({}, current, {
+                                        [option.name]: event.target.value
+                                    })),
+                            children: option.values.map((choice)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: choice,
+                                    children: choice
+                                }, choice))
+                        }, option.name);
+                    }),
+                    detail && Object.keys(picked).length === detail.options.length && detail.options.length && !variantId ? /*#__PURE__*/ _jsx(FormHelperText, {
+                        error: true,
+                        sx: {
+                            mx: 0
+                        },
+                        children: 'That combination isn’t one we offer. Pick another.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "input",
+                        ref: answerRef,
+                        type: "text",
+                        name: name,
+                        value: answer,
+                        required: Boolean(required),
+                        onChange: ()=>undefined,
+                        tabIndex: -1,
+                        "aria-hidden": "true",
+                        autoComplete: "off",
+                        sx: {
+                            position: 'absolute',
+                            left: 0,
+                            bottom: 0,
+                            width: 1,
+                            height: '1px',
+                            p: 0,
+                            border: 0,
+                            opacity: 0,
+                            pointerEvents: 'none'
+                        }
+                    }),
+                    value ? /*#__PURE__*/ _jsx("input", {
+                        type: "hidden",
+                        name: formFieldDataKey(name),
+                        value: value,
+                        readOnly: true
+                    }) : null
+                ]
+            })
+        ]
+    }));
+});
+ProductOptionsFieldBody.displayName = 'AglynProductOptionsFieldBody';
+export default ProductOptionsFieldBody;
+
+//# sourceMappingURL=product-options-field-body.js.map

package/src/lib/components/product-options-field-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/product-options-field-body.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 { formFieldDataKey } from '../model/commerce-product-field'\nimport { encodeProductFieldValue, productFieldLabel } from '../model/commerce-quote-request'\nimport Box from '@mui/material/Box'\nimport FormControl from '@mui/material/FormControl'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport FormLabel from '@mui/material/FormLabel'\nimport MenuItem from '@mui/material/MenuItem'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\nimport { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type { ProductOptionsFieldProps } from './product-options-field'\n\n/** A product as the store's public catalog lists it. */\ninterface ListedProduct {\n  id: string\n  name: string\n  slug: string\n}\n\n/** A product as its public page reads it: its options and the variants they make. */\ninterface ProductDetail {\n  id: string\n  name: string\n  options: Array<{ name: string; values: string[] }>\n  variants: Array<{ id: string; options?: Record<string, string> }>\n}\n\n/** The most products the picker lists. */\nconst PICKER_LIMIT = 100\n\n/** The variant whose options are exactly the ones picked, else none. */\nexport function variantForOptions(\n  detail: Pick<ProductDetail, 'variants' | 'options'>,\n  picked: Readonly<Record<string, string>>,\n): string | null {\n  if (!detail.options.length) return detail.variants[0]?.id ?? null\n  if (detail.options.some((option) => !picked[option.name])) return null\n  const match = detail.variants.find((variant) =>\n    detail.options.every((option) => variant.options?.[option.name] === picked[option.name]),\n  )\n  return match?.id ?? null\n}\n\n/**\n * The Product and options field's body (AGL-4098): a picker of the store's\n * products (or the one the author chose), then one picker per option. It\n * posts the readable line under its name and the exact choice beside it; a\n * real, invisible input carries the line, so a required field with nothing\n * picked stops the form like any required field.\n *\n * On the canvas and in Preview it draws with the store's products but sends\n * nothing, like every form field there.\n */\nconst ProductOptionsFieldBody = forwardRef<HTMLDivElement, ProductOptionsFieldProps>((props, ref) => {\n  const { name: rawName, label, productId: fixedProductId, required, ...rest } = props\n  const name = String(rawName ?? '').trim() || 'product'\n  const { hostId } = Aglyn.useSite()\n  const inputId = useId()\n  const answerRef = useRef<HTMLInputElement>(null)\n  const [products, setProducts] = useState<ListedProduct[] | null>(null)\n  const [productId, setProductId] = useState(fixedProductId ?? '')\n  const [detail, setDetail] = useState<ProductDetail | null>(null)\n  const [picked, setPicked] = useState<Record<string, string>>({})\n\n  // The store's products, or the one the author chose.\n  useEffect(() => {\n    if (!hostId) return\n    let active = true\n    const query = new URLSearchParams({\n      hostId,\n      ...(fixedProductId ? { ids: fixedProductId } : { sort: 'name', limit: String(PICKER_LIMIT) }),\n    })\n    void fetch(`/api/commerce/catalog?${query.toString()}`)\n      .then((response) => (response.ok ? response.json() : { items: [] }))\n      .then((payload) => {\n        if (!active) return\n        const items = Array.isArray(payload?.items) ? (payload.items as ListedProduct[]) : []\n        setProducts(items)\n        if (fixedProductId) setProductId(items[0]?.id ?? '')\n      })\n      .catch(() => active && setProducts([]))\n    return () => {\n      active = false\n    }\n  }, [hostId, fixedProductId])\n\n  // The chosen product's options.\n  const slug = products?.find((product) => product.id === productId)?.slug ?? ''\n  useEffect(() => {\n    setDetail(null)\n    setPicked({})\n    if (!hostId || !slug) return\n    let active = true\n    void fetch(`/api/commerce/product?hostId=${encodeURIComponent(hostId)}&slug=${encodeURIComponent(slug)}`)\n      .then((response) => (response.ok ? response.json() : null))\n      .then((payload) => {\n        if (!active || !payload?.product) return\n        const product = payload.product as ProductDetail\n        setDetail({ ...product, options: product.options ?? [], variants: product.variants ?? [] })\n      })\n      .catch(() => undefined)\n    return () => {\n      active = false\n    }\n  }, [hostId, slug])\n\n  const variantId = detail ? variantForOptions(detail, picked) : null\n  const complete = Boolean(detail && variantId)\n  const answer = complete && detail ? productFieldLabel(detail.name, picked) : ''\n  const value = complete && detail\n    ? encodeProductFieldValue({\n        productId: detail.id,\n        ...(variantId && variantId !== 'default' ? { variantId } : {}),\n        ...(Object.keys(picked).length ? { options: picked } : {}),\n        // Add-ons are chosen on the storefront from slice 8 on: they ride here as `modifiers`.\n      })\n    : ''\n\n  // Every change is announced, as a typed answer is, to anything listening on the form.\n  const announced = useRef(answer)\n  useEffect(() => {\n    if (announced.current === answer) return\n    announced.current = answer\n    answerRef.current?.dispatchEvent(new Event('change', { bubbles: true }))\n  }, [answer])\n\n  const listed = useMemo(() => products ?? [], [products])\n  // On the canvas there is no site to list from: it says what the visitor will pick from.\n  const placeholder = !hostId\n    ? 'Your store’s products'\n    : products === null\n      ? 'Loading products…'\n      : listed.length\n        ? 'Choose a product'\n        : 'No products to choose from yet'\n\n  return (\n    <FormControl ref={ref} fullWidth required={Boolean(required)} {...rest}>\n      <FormLabel htmlFor={inputId}>{label || 'Product'}</FormLabel>\n      <Stack spacing={1.5} sx={{ mt: 1, position: 'relative' }}>\n        {fixedProductId ? null : (\n          <TextField\n            id={inputId}\n            select\n            size=\"small\"\n            fullWidth\n            value={productId}\n            onChange={(event) => setProductId(event.target.value)}\n            disabled={!listed.length}\n            slotProps={{\n              select: {\n                displayEmpty: true,\n                renderValue: (selected: unknown) =>\n                  listed.find((product) => product.id === selected)?.name ?? (\n                    <Box component=\"span\" sx={{ color: 'text.secondary' }}>\n                      {placeholder}\n                    </Box>\n                  ),\n              },\n            }}\n          >\n            {listed.map((product) => (\n              <MenuItem key={product.id} value={product.id}>\n                {product.name}\n              </MenuItem>\n            ))}\n          </TextField>\n        )}\n        {fixedProductId && detail ? <FormHelperText sx={{ mx: 0 }}>{detail.name}</FormHelperText> : null}\n        {(detail?.options ?? []).map((option) => (\n          <TextField\n            key={option.name}\n            select\n            size=\"small\"\n            fullWidth\n            label={option.name}\n            value={picked[option.name] ?? ''}\n            onChange={(event) => setPicked((current) => ({ ...current, [option.name]: event.target.value }))}\n          >\n            {option.values.map((choice) => (\n              <MenuItem key={choice} value={choice}>\n                {choice}\n              </MenuItem>\n            ))}\n          </TextField>\n        ))}\n        {detail && Object.keys(picked).length === detail.options.length && detail.options.length && !variantId ? (\n          <FormHelperText error sx={{ mx: 0 }}>\n            {'That combination isn’t one we offer. Pick another.'}\n          </FormHelperText>\n        ) : null}\n        {/* The answer the form sends and the browser checks, and the exact choice beside it. */}\n        <Box\n          component=\"input\"\n          ref={answerRef}\n          type=\"text\"\n          name={name}\n          value={answer}\n          required={Boolean(required)}\n          onChange={() => undefined}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          autoComplete=\"off\"\n          sx={{ position: 'absolute', left: 0, bottom: 0, width: 1, height: '1px', p: 0, border: 0, opacity: 0, pointerEvents: 'none' }}\n        />\n        {value ? <input type=\"hidden\" name={formFieldDataKey(name)} value={value} readOnly /> : null}\n      </Stack>\n    </FormControl>\n  )\n})\nProductOptionsFieldBody.displayName = 'AglynProductOptionsFieldBody'\n\nexport default ProductOptionsFieldBody\n"],"names":["Aglyn","formFieldDataKey","encodeProductFieldValue","productFieldLabel","Box","FormControl","FormHelperText","FormLabel","MenuItem","Stack","TextField","forwardRef","useEffect","useId","useMemo","useRef","useState","PICKER_LIMIT","variantForOptions","detail","picked","options","length","variants","id","some","option","name","match","find","variant","every","ProductOptionsFieldBody","props","ref","products","rawName","label","productId","fixedProductId","required","rest","String","trim","hostId","useSite","inputId","answerRef","setProducts","setProductId","setDetail","setPicked","active","query","URLSearchParams","ids","sort","limit","fetch","toString","then","response","ok","json","items","payload","Array","isArray","catch","slug","product","encodeURIComponent","undefined","variantId","complete","Boolean","answer","value","Object","keys","announced","current","dispatchEvent","Event","bubbles","listed","placeholder","fullWidth","htmlFor","spacing","sx","mt","position","select","size","onChange","event","target","disabled","slotProps","displayEmpty","renderValue","selected","component","color","map","mx","values","choice","error","type","tabIndex","aria-hidden","autoComplete","left","bottom","width","height","p","border","opacity","pointerEvents","input","readOnly","displayName"],"mappings":"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"}

package/src/lib/components/product-options-field.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Aglyn from '@aglyn/aglyn';
+export declare const PRODUCT_OPTIONS_FIELD_ID: Aglyn.ComponentId;
+export interface ProductOptionsFieldProps {
+    /** What the product and options are sent as. */
+    name?: string;
+    /** The question, above the picker. */
+    label?: string;
+    /** One product to ask about; empty lets the person pick from the store. */
+    productId?: string;
+    required?: boolean;
+}
+/** A product and its options, picked from the store; sent in words. */
+declare const ProductOptionsField: import("react").ForwardRefExoticComponent<ProductOptionsFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<ProductOptionsFieldProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default ProductOptionsField;

package/src/lib/components/product-options-field.js

@@ -0,0 +1,128 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { mdiPackageVariantClosed } from "@aglyn/shared-data-mdi";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import { forwardRef, lazy, Suspense } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+/*
+ * THE PRODUCT AND OPTIONS FIELD (AGL-4098): a form field that asks which of
+ * the store's products, and which of its options, a person wants — on a
+ * "Request a quote" form, say.
+ *
+ * It lives in Commerce because the products are Commerce's, and it is a form
+ * field like any other: it knows nothing about the form around it and posts
+ * plain strings under its name. Its answer is the product and options in
+ * words (`Vinyl banner — 3 × 6 ft / Matte`); beside it, under `{name}__data`,
+ * it posts the exact product, variant and options for this plugin to read
+ * back when a quote is started from the request (`parseProductFieldValue`).
+ * The forms plugin keeps that value apart from the answers a person reads.
+ *
+ * This shell is what a page loads until the field draws; the picker is a
+ * chunk of its own. The component id is persisted in documents; never rename
+ * it. The core's form reader restates it (`FORM_PLUGIN_ANSWER_ELEMENTS`).
+ */ export const PRODUCT_OPTIONS_FIELD_ID = 'product-options-field';
+const ProductOptionsFieldBody = /*#__PURE__*/ lazy(()=>import("./product-options-field-body.js"));
+/** A product and its options, picked from the store; sent in words. */ const ProductOptionsField = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                py: 1
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {
+                size: 20,
+                "aria-label": "Loading the product field"
+            })
+        }),
+        children: /*#__PURE__*/ _jsx(ProductOptionsFieldBody, _extends({
+            ref: ref
+        }, props))
+    }));
+ProductOptionsField.displayName = 'AglynProductOptionsField';
+export const schema = {
+    $id: PRODUCT_OPTIONS_FIELD_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Product and options',
+    description: 'A form field: the person picks one of your products and its options, such as size and finish. It arrives with the submission, and a quote started from it begins with that product.',
+    category: Aglyn.ComponentCategory.FORMS,
+    icon: {
+        path: mdiPackageVariantClosed.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'label',
+            label: 'Label',
+            description: 'The question above the picker, such as “What would you like priced?”.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'name',
+            label: 'Field name',
+            description: 'The name the choice is listed under in the Inbox and exports.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'productId',
+            label: 'Product',
+            description: 'Ask about one product only: the person picks its options. Leave it empty to let them pick from your store.',
+            component: Aglyn.FieldComponentType.PRODUCT_SELECT
+        },
+        {
+            name: 'required',
+            label: 'Required?',
+            description: 'The form can’t be sent until a product (and each of its options) is picked.',
+            component: Aglyn.FieldComponentType.SWITCH
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(PRODUCT_OPTIONS_FIELD_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Product and options',
+        pluginId: BUNDLE_ID,
+        description: 'A product from your store and its options, for a quote request',
+        category: Aglyn.ComponentCategory.FORMS,
+        icon: {
+            path: mdiPackageVariantClosed.path,
+            sx: {
+                color: 'info.main'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: PRODUCT_OPTIONS_FIELD_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                name: 'product',
+                label: 'Product',
+                required: true
+            }
+        }
+    }
+];
+export default ProductOptionsField;
+
+//# sourceMappingURL=product-options-field.js.map

package/src/lib/components/product-options-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/product-options-field.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 { mdiPackageVariantClosed } from '@aglyn/shared-data-mdi'\nimport Box from '@mui/material/Box'\nimport CircularProgress from '@mui/material/CircularProgress'\nimport { forwardRef, lazy, Suspense } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n/*\n * THE PRODUCT AND OPTIONS FIELD (AGL-4098): a form field that asks which of\n * the store's products, and which of its options, a person wants — on a\n * \"Request a quote\" form, say.\n *\n * It lives in Commerce because the products are Commerce's, and it is a form\n * field like any other: it knows nothing about the form around it and posts\n * plain strings under its name. Its answer is the product and options in\n * words (`Vinyl banner — 3 × 6 ft / Matte`); beside it, under `{name}__data`,\n * it posts the exact product, variant and options for this plugin to read\n * back when a quote is started from the request (`parseProductFieldValue`).\n * The forms plugin keeps that value apart from the answers a person reads.\n *\n * This shell is what a page loads until the field draws; the picker is a\n * chunk of its own. The component id is persisted in documents; never rename\n * it. The core's form reader restates it (`FORM_PLUGIN_ANSWER_ELEMENTS`).\n */\nexport const PRODUCT_OPTIONS_FIELD_ID: Aglyn.ComponentId = 'product-options-field'\n\nexport interface ProductOptionsFieldProps {\n  /** What the product and options are sent as. */\n  name?: string\n  /** The question, above the picker. */\n  label?: string\n  /** One product to ask about; empty lets the person pick from the store. */\n  productId?: string\n  required?: boolean\n}\n\nconst ProductOptionsFieldBody = lazy(() => import('./product-options-field-body'))\n\n/** A product and its options, picked from the store; sent in words. */\nconst ProductOptionsField = forwardRef<HTMLDivElement, ProductOptionsFieldProps>((props, ref) => (\n  <Suspense\n    fallback={\n      <Box sx={{ py: 1 }}>\n        <CircularProgress size={20} aria-label=\"Loading the product field\" />\n      </Box>\n    }\n  >\n    <ProductOptionsFieldBody ref={ref} {...props} />\n  </Suspense>\n))\nProductOptionsField.displayName = 'AglynProductOptionsField'\n\nexport const schema: Aglyn.ComponentSchema<ProductOptionsFieldProps> = {\n  $id: PRODUCT_OPTIONS_FIELD_ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Product and options',\n  description:\n    'A form field: the person picks one of your products and its options, such as size and finish. It arrives with the submission, and a quote started from it begins with that product.',\n  category: Aglyn.ComponentCategory.FORMS,\n  icon: { path: mdiPackageVariantClosed.path, sx: { color: 'info.main' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'label',\n      label: 'Label',\n      description: 'The question above the picker, such as “What would you like priced?”.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'name',\n      label: 'Field name',\n      description: 'The name the choice is listed under in the Inbox and exports.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'productId',\n      label: 'Product',\n      description: 'Ask about one product only: the person picks its options. Leave it empty to let them pick from your store.',\n      component: Aglyn.FieldComponentType.PRODUCT_SELECT,\n    },\n    {\n      name: 'required',\n      label: 'Required?',\n      description: 'The form can’t be sent until a product (and each of its options) is picked.',\n      component: Aglyn.FieldComponentType.SWITCH,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(PRODUCT_OPTIONS_FIELD_ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Product and options',\n    pluginId: BUNDLE_ID,\n    description: 'A product from your store and its options, for a quote request',\n    category: Aglyn.ComponentCategory.FORMS,\n    icon: { path: mdiPackageVariantClosed.path, sx: { color: 'info.main' } },\n    data: {\n      $id: null,\n      componentId: PRODUCT_OPTIONS_FIELD_ID,\n      pluginId: BUNDLE_ID,\n      props: { name: 'product', label: 'Product', required: true },\n    },\n  },\n]\n\nexport default ProductOptionsField\n"],"names":["Aglyn","mdiPackageVariantClosed","Box","CircularProgress","forwardRef","lazy","Suspense","BUNDLE_ID","generatePresetId","PRODUCT_OPTIONS_FIELD_ID","ProductOptionsFieldBody","ProductOptionsField","props","ref","fallback","sx","py","size","aria-label","displayName","schema","$id","pluginId","description","category","ComponentCategory","FORMS","icon","path","color","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","label","component","FieldComponentType","TEXT_FIELD","PRODUCT_SELECT","SWITCH","presets","type","NodeType","PRESET","data","componentId","required"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,WAAW,eAAc;AACrC,SAASC,uBAAuB,QAAQ,yBAAwB;AAChE,OAAOC,SAAS,oBAAmB;AACnC,OAAOC,sBAAsB,iCAAgC;AAC7D,SAASC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,QAAO;AAClD,SAASC,SAAS,QAAQ,gCAA4B;AACtD,SAASC,gBAAgB,QAAQ,iCAA6B;AAE9D;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,2BAA8C,wBAAuB;AAYlF,MAAMC,wCAA0BL,KAAK,IAAM,MAAM,CAAC;AAElD,qEAAqE,GACrE,MAAMM,oCAAsBP,WAAqD,CAACQ,OAAOC,oBACvF,KAACP;QACCQ,wBACE,KAACZ;YAAIa,IAAI;gBAAEC,IAAI;YAAE;sBACf,cAAA,KAACb;gBAAiBc,MAAM;gBAAIC,cAAW;;;kBAI3C,cAAA,KAACR;YAAwBG,KAAKA;WAASD;;AAG3CD,oBAAoBQ,WAAW,GAAG;AAElC,OAAO,MAAMC,SAA0D;IACrEC,KAAKZ;IACLa,UAAUf;IACVY,aAAa;IACbI,aACE;IACFC,UAAUxB,MAAMyB,iBAAiB,CAACC,KAAK;IACvCC,MAAM;QAAEC,MAAM3B,wBAAwB2B,IAAI;QAAEb,IAAI;YAAEc,OAAO;QAAY;IAAE;IACvEC,OAAO;QAAEC,aAAa/B,MAAMgC,YAAY,CAACC,OAAO;IAAC;IACjDC,YAAY;QACV;YACEC,MAAM;YACNC,OAAO;YACPb,aAAa;YACbc,WAAWrC,MAAMsC,kBAAkB,CAACC,UAAU;QAChD;QACA;YACEJ,MAAM;YACNC,OAAO;YACPb,aAAa;YACbc,WAAWrC,MAAMsC,kBAAkB,CAACC,UAAU;QAChD;QACA;YACEJ,MAAM;YACNC,OAAO;YACPb,aAAa;YACbc,WAAWrC,MAAMsC,kBAAkB,CAACE,cAAc;QACpD;QACA;YACEL,MAAM;YACNC,OAAO;YACPb,aAAa;YACbc,WAAWrC,MAAMsC,kBAAkB,CAACG,MAAM;QAC5C;KACD;AACH,EAAC;AAED,OAAO,MAAMC,UAAgC;IAC3C;QACErB,KAAKb,iBAAiBC;QACtBkC,MAAM3C,MAAM4C,QAAQ,CAACC,MAAM;QAC3B1B,aAAa;QACbG,UAAUf;QACVgB,aAAa;QACbC,UAAUxB,MAAMyB,iBAAiB,CAACC,KAAK;QACvCC,MAAM;YAAEC,MAAM3B,wBAAwB2B,IAAI;YAAEb,IAAI;gBAAEc,OAAO;YAAY;QAAE;QACvEiB,MAAM;YACJzB,KAAK;YACL0B,aAAatC;YACba,UAAUf;YACVK,OAAO;gBAAEuB,MAAM;gBAAWC,OAAO;gBAAWY,UAAU;YAAK;QAC7D;IACF;CACD,CAAA;AAED,eAAerC,oBAAmB"}