@aglyn/plugins-ai 1.0.0-beta.270 → 1.0.0-beta.272

package/src/lib/components/ai-site-start-steps.component.js

@@ -15,17 +15,23 @@
  * limitations under the License.
  */ 'use client';
 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";
 import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
-import { mdiBookOpenPageVariant, mdiBriefcaseOutline, mdiCalendarHeart, mdiCreation, mdiHandHeart, mdiScaleBalance, mdiShopping, mdiSilverwareForkKnife, mdiViewGridOutline, mdiWrench } from "@aglyn/shared-data-mdi";
-import { HelpTip } from "@aglyn/shared-ui-jsx";
+import { mdiBookOpenPageVariant, mdiBriefcaseOutline, mdiCalendarHeart, mdiCheck, mdiChevronDown, mdiCreation, mdiHandHeart, mdiScaleBalance, mdiShopping, mdiSilverwareForkKnife, mdiViewGridOutline, mdiWrench } from "@aglyn/shared-data-mdi";
+import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
 import { OptionCardGrid } from "@aglyn/shared-ui-jsx/components/option-card-grid.component";
-import { Box, Divider, LinearProgress, List, ListItemButton, MenuItem, Stack, Step, StepButton, StepLabel, Stepper, TextField, Typography } from "@mui/material";
-import { Fragment, useId } from "react";
+import { BlockedControl } from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
+import { OpeningHoursPicker } from "@aglyn/shared-ui-jsx/components/weekly-hours-picker.component";
+import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, LinearProgress, List, ListItemButton, MenuItem, Stack, Step, StepButton, StepLabel, Stepper, TextField, Tooltip, Typography } from "@mui/material";
+import { Fragment, useId, useState } from "react";
+import { aiSiteHoursSentence, aiSiteServiceAreas, aiSiteSocialLinks } from "../model/ai-site-details.js";
 import { AI_SITE_FREE_PAGES_NOTE, AI_SITE_SUBMISSION_CHOICES } from "../model/ai-site-job.js";
 import { AI_SITE_KINDS } from "../model/ai-site-kinds.js";
-import { AI_SITE_START_TYPES, aiSiteStartKind } from "../model/ai-site-start.js";
-import { AI_SITE_START_STEP_LABELS, AI_SITE_START_STEPS, aiSiteStartStepIndex } from "../model/ai-site-start-steps.js";
+import { AI_SITE_INSPIRATION_LIMITS, AI_SITE_INSPIRATION_MAX, AI_SITE_INSPIRATION_PAID_NOTE, aiSiteInspirationHost } from "../model/ai-site-inspiration.js";
+import { AI_SITE_START_TYPES, aiSiteStartInspirationTyped, aiSiteStartKind } from "../model/ai-site-start.js";
+import { AI_SITE_START_MORE_FIELDS, AI_SITE_START_STEP_LABELS, AI_SITE_START_STEPS, aiSiteStartStepIndex } from "../model/ai-site-start-steps.js";
 import { aiSiteStylePreview } from "./ai-site-style-previews.js";
 /**
  * The guided start's question steps (AGL-3898), one decision each. Each step
@@ -52,7 +58,7 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
     }),
     details: pluginDocsHelp('aiStart', {
         anchor: '#details',
-        excerpt: 'Where contact form messages go, how many pages to write, and on paid plans whether to draft a welcome email. All can be changed later.'
+        excerpt: 'Your phone number and email, which your pages show, where contact form messages go, how many pages to write, and on paid plans whether to draft a welcome email. All can be changed later.'
     })
 };
 /** The icon on each kind-of-site card: the icon of the style that answer picks. */ const START_TYPE_ICONS = {
@@ -210,12 +216,12 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
  * Step: the style, from cards that show it. "Pick for me" leaves the kind
  * unset, which is what the single form's unpicked state was: the kind the
  * first answer suggests is the one used, and the card says which.
- */ export function StyleStep({ answers, answer, tracker }) {
+ */ export function StyleStep({ answers, answer, tracker, errors, fieldRef, inspiration }) {
     var _answers_kind;
     const suggested = aiSiteStartKind(_extends({}, answers, {
         kind: null
     }));
-    return /*#__PURE__*/ _jsx(OptionCardGrid, {
+    const cards = /*#__PURE__*/ _jsx(OptionCardGrid, {
         label: "Style of site",
         "data-start-area": "style-cards",
         columns: {
@@ -249,13 +255,165 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
             tracker.fieldPicked('kind');
         }
     });
+    if (!inspiration) return cards;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 4,
+        children: [
+            cards,
+            /*#__PURE__*/ _jsx(InspirationFields, {
+                answers: answers,
+                answer: answer,
+                tracker: tracker,
+                errors: errors,
+                fieldRef: fieldRef,
+                offer: inspiration
+            })
+        ]
+    });
+}
+/** Why a Free workspace's second and third site fields are locked. */ export const AI_SITE_INSPIRATION_LOCKED_REASON = `A Free workspace names ${AI_SITE_INSPIRATION_LIMITS.free} site you like. Paid plans name up to ${AI_SITE_INSPIRATION_MAX}.`;
+/**
+ * Sites I like (AGL-3975): up to three addresses under the style cards. A
+ * Free workspace's fields past its one are shown disabled with the reason
+ * and an upgrade link, never hidden, so the person sees what a paid plan adds.
+ */ function InspirationFields({ answers, answer, tracker, errors, fieldRef, offer }) {
+    var _answers_inspiration;
+    const values = (_answers_inspiration = answers.inspiration) != null ? _answers_inspiration : [];
+    const change = (index, value)=>{
+        const next = Array.from({
+            length: offer.limit
+        }, (_, at)=>{
+            var _values_at;
+            return (_values_at = values[at]) != null ? _values_at : '';
+        });
+        next[index] = value;
+        answer({
+            inspiration: next
+        });
+        tracker.fieldChanged('inspiration');
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        "data-start-area": "field-inspiration",
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                color: "text.secondary",
+                component: "h2",
+                children: 'Sites you like (optional)'
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'We take only how they are laid out and styled: the order of sections, colors, type, buttons and motion. Never their words, photos or logos, so your site stays your own.'
+            }),
+            Array.from({
+                length: AI_SITE_INSPIRATION_MAX
+            }, (_, index)=>{
+                var _values_index;
+                const locked = index >= offer.limit;
+                const field = /*#__PURE__*/ _jsx(TextField, _extends({
+                    fullWidth: true,
+                    type: "url",
+                    inputMode: "url",
+                    label: `Site ${index + 1}`,
+                    placeholder: "https://example.com",
+                    value: locked ? '' : (_values_index = values[index]) != null ? _values_index : '',
+                    onChange: (event)=>change(index, event.target.value),
+                    onBlur: ()=>tracker.fieldLeft('inspiration')
+                }, index === 0 ? {
+                    inputRef: fieldRef('inspiration')
+                } : {}, {
+                    error: index === 0 && Boolean(errors.inspiration)
+                }, index === 0 && errors.inspiration ? {
+                    helperText: errors.inspiration.message
+                } : {}));
+                return locked ? /*#__PURE__*/ _jsx(BlockedControl, {
+                    blocked: true,
+                    reason: AI_SITE_INSPIRATION_LOCKED_REASON,
+                    fullWidth: true,
+                    children: field
+                }, index) : /*#__PURE__*/ _jsx(Box, {
+                    children: field
+                }, index);
+            }),
+            offer.limit < AI_SITE_INSPIRATION_MAX && /*#__PURE__*/ _jsx(PrerequisiteNotice, _extends({}, offer.upgradeHref ? {
+                href: offer.upgradeHref
+            } : {}, {
+                actionLabel: "Upgrade",
+                children: AI_SITE_INSPIRATION_PAID_NOTE
+            }))
+        ]
+    });
 }
 /** Step: where leads go, how many pages, and on a paid plan the welcome email. */ export function DetailsStep({ answers, answer, tracker, errors, fieldRef, freeTaste, band }) {
-    var _ref, _ref1;
-    var _errors_submissions, _errors_pages;
+    var _ref, _ref1, _ref2, _ref3;
+    var _errors_phone, _errors_email, _errors_submissions, _errors_pages;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 3,
         children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        "data-start-area": "field-phone",
+                        sx: {
+                            flex: 1
+                        },
+                        children: /*#__PURE__*/ _jsx(TextField, _extends({
+                            fullWidth: true,
+                            type: "tel",
+                            inputRef: fieldRef('phone'),
+                            label: "Business phone",
+                            placeholder: "(512) 555-0142",
+                            autoComplete: "tel",
+                            value: answers.phone,
+                            onChange: (event)=>{
+                                answer({
+                                    phone: event.target.value
+                                });
+                                tracker.fieldChanged('phone');
+                            }
+                        }, typed(tracker, 'phone'), {
+                            error: Boolean(errors.phone),
+                            helperText: (_ref = (_errors_phone = errors.phone) == null ? void 0 : _errors_phone.message) != null ? _ref : 'Optional. Shown on your site so customers can call.',
+                            slotProps: {
+                                htmlInput: {
+                                    inputMode: 'tel'
+                                }
+                            }
+                        }))
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        "data-start-area": "field-email",
+                        sx: {
+                            flex: 1
+                        },
+                        children: /*#__PURE__*/ _jsx(TextField, _extends({
+                            fullWidth: true,
+                            type: "email",
+                            inputRef: fieldRef('email'),
+                            label: "Business email",
+                            placeholder: "hello@yourbusiness.com",
+                            autoComplete: "email",
+                            value: answers.email,
+                            onChange: (event)=>{
+                                answer({
+                                    email: event.target.value
+                                });
+                                tracker.fieldChanged('email');
+                            }
+                        }, typed(tracker, 'email'), {
+                            error: Boolean(errors.email),
+                            helperText: (_ref1 = (_errors_email = errors.email) == null ? void 0 : _errors_email.message) != null ? _ref1 : 'Optional. Shown on your site so customers can write.'
+                        }))
+                    })
+                ]
+            }),
             /*#__PURE__*/ _jsx(Box, {
                 "data-start-area": "field-submissions",
                 children: /*#__PURE__*/ _jsx(TextField, {
@@ -271,7 +429,7 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
                         tracker.fieldPicked('submissions');
                     },
                     error: Boolean(errors.submissions),
-                    helperText: (_ref = (_errors_submissions = errors.submissions) == null ? void 0 : _errors_submissions.message) != null ? _ref : 'You can change this on the form itself afterwards.',
+                    helperText: (_ref2 = (_errors_submissions = errors.submissions) == null ? void 0 : _errors_submissions.message) != null ? _ref2 : 'You can change this on the form itself afterwards.',
                     children: AI_SITE_SUBMISSION_CHOICES.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
                             value: option.id,
                             children: `${option.label} — ${option.blurb}`
@@ -303,7 +461,7 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
                                 tracker.fieldPicked('pages');
                             },
                             error: Boolean(errors.pages),
-                            helperText: (_ref1 = (_errors_pages = errors.pages) == null ? void 0 : _errors_pages.message) != null ? _ref1 : freeTaste ? AI_SITE_FREE_PAGES_NOTE : undefined,
+                            helperText: (_ref3 = (_errors_pages = errors.pages) == null ? void 0 : _errors_pages.message) != null ? _ref3 : freeTaste ? AI_SITE_FREE_PAGES_NOTE : undefined,
                             children: Array.from({
                                 length: band.max - band.min + 1
                             }, (_, index)=>band.min + index).map((count)=>/*#__PURE__*/ _jsx(MenuItem, {
@@ -345,6 +503,474 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
         ]
     });
 }
+/**
+ * The brand colors "More details" offers on the Style step (AGL-3979), by
+ * name: picking one makes it the site's primary color, held to contrast by
+ * the look like any brand color; none leaves the style to choose. Picked,
+ * never typed: a color code is not something a site owner should need.
+ */ export const AI_SITE_START_BRAND_COLORS = [
+    {
+        label: 'Red',
+        hex: '#c62828'
+    },
+    {
+        label: 'Orange',
+        hex: '#e65100'
+    },
+    {
+        label: 'Gold',
+        hex: '#b28704'
+    },
+    {
+        label: 'Green',
+        hex: '#2e7d32'
+    },
+    {
+        label: 'Teal',
+        hex: '#00796b'
+    },
+    {
+        label: 'Blue',
+        hex: '#1565c0'
+    },
+    {
+        label: 'Navy',
+        hex: '#1a237e'
+    },
+    {
+        label: 'Purple',
+        hex: '#6a1b9a'
+    },
+    {
+        label: 'Pink',
+        hex: '#ad1457'
+    },
+    {
+        label: 'Brown',
+        hex: '#5d4037'
+    },
+    {
+        label: 'Charcoal',
+        hex: '#37474f'
+    }
+];
+/** The price ranges offered, as a search listing writes them. */ const PRICE_RANGES = [
+    {
+        value: '$',
+        label: '$ — budget'
+    },
+    {
+        value: '$$',
+        label: '$$ — moderate'
+    },
+    {
+        value: '$$$',
+        label: '$$$ — premium'
+    },
+    {
+        value: '$$$$',
+        label: '$$$$ — luxury'
+    }
+];
+/** What each step's "More details" says it holds, under its title. */ const MORE_SUMMARY = {
+    kind: 'Optional: a tagline and the year you started',
+    audience: 'Optional: areas you serve, price range and languages',
+    style: 'Optional: your brand color',
+    details: 'Optional: address, opening hours and social profiles'
+};
+/** A typed extra's field. */ function ExtraText({ field, answers, answer, tracker, errors, fieldRef, label, placeholder, helper, autoComplete = 'off', multiline = false, inputMode }) {
+    var _ref;
+    const error = errors[field];
+    return /*#__PURE__*/ _jsx(Box, {
+        "data-start-area": `field-${field}`,
+        sx: {
+            flex: 1,
+            minWidth: 0
+        },
+        children: /*#__PURE__*/ _jsx(TextField, _extends({
+            fullWidth: true,
+            inputRef: fieldRef(field),
+            label: label,
+            placeholder: placeholder,
+            autoComplete: autoComplete,
+            multiline: multiline,
+            minRows: multiline ? 2 : undefined,
+            value: answers[field],
+            onChange: (event)=>{
+                answer({
+                    [field]: event.target.value
+                });
+                tracker.fieldChanged(field);
+            }
+        }, typed(tracker, field), {
+            error: Boolean(error),
+            helperText: (_ref = error == null ? void 0 : error.message) != null ? _ref : helper,
+            slotProps: inputMode ? {
+                htmlInput: {
+                    inputMode
+                }
+            } : undefined
+        }))
+    });
+}
+/** The price range, picked from how search results show one. */ function PriceRangeField({ answers, answer, tracker, errors, fieldRef }) {
+    var _ref;
+    var _errors_priceRange;
+    const own = answers.priceRange && !PRICE_RANGES.some((option)=>option.value === answers.priceRange);
+    const options = own ? [
+        ...PRICE_RANGES,
+        {
+            value: answers.priceRange,
+            label: answers.priceRange
+        }
+    ] : PRICE_RANGES;
+    return /*#__PURE__*/ _jsx(Box, {
+        "data-start-area": "field-priceRange",
+        sx: {
+            flex: 1,
+            minWidth: 0
+        },
+        children: /*#__PURE__*/ _jsxs(TextField, {
+            select: true,
+            fullWidth: true,
+            inputRef: fieldRef('priceRange'),
+            label: "Price range",
+            value: answers.priceRange,
+            onChange: (event)=>{
+                answer({
+                    priceRange: event.target.value
+                });
+                tracker.fieldPicked('priceRange');
+            },
+            error: Boolean(errors.priceRange),
+            helperText: (_ref = (_errors_priceRange = errors.priceRange) == null ? void 0 : _errors_priceRange.message) != null ? _ref : 'How your prices compare, as search results show it.',
+            children: [
+                /*#__PURE__*/ _jsx(MenuItem, {
+                    value: "",
+                    children: 'Not said'
+                }),
+                options.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: option.value,
+                        children: option.label
+                    }, option.value))
+            ]
+        })
+    });
+}
+/** The brand color, picked from named swatches. */ function BrandField({ answers, answer, tracker }) {
+    const labelId = useId();
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        "data-start-area": "field-brand",
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                id: labelId,
+                children: 'Brand color'
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                role: "radiogroup",
+                "aria-labelledby": labelId,
+                sx: {
+                    flexWrap: 'wrap',
+                    gap: 1
+                },
+                children: [
+                    {
+                        label: 'Let the style choose',
+                        hex: ''
+                    },
+                    ...AI_SITE_START_BRAND_COLORS
+                ].map((color)=>{
+                    const picked = (answers.brand || '') === color.hex;
+                    return /*#__PURE__*/ _jsx(Tooltip, {
+                        title: color.label,
+                        children: /*#__PURE__*/ _jsx(Box, {
+                            component: "button",
+                            type: "button",
+                            role: "radio",
+                            "aria-checked": picked,
+                            "aria-label": color.label,
+                            onClick: ()=>{
+                                answer({
+                                    brand: color.hex
+                                });
+                                tracker.fieldPicked('brand');
+                            },
+                            sx: {
+                                width: 36,
+                                height: 36,
+                                p: 0,
+                                borderRadius: '50%',
+                                border: 2,
+                                borderColor: picked ? 'text.primary' : 'divider',
+                                bgcolor: color.hex || 'background.paper',
+                                color: color.hex ? 'common.white' : 'text.secondary',
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: 'pointer'
+                            },
+                            children: picked ? /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiCheck.path,
+                                fontSize: "small"
+                            }) : null
+                        })
+                    }, color.label);
+                })
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'Picked, it is your site’s main color, kept readable everywhere it is used.'
+            })
+        ]
+    });
+}
+/** The opening hours, picked a day at a time: the same editor as Setup → SEO. */ function HoursField({ answers, answer, tracker, errors }) {
+    var _ref;
+    var _errors_hours;
+    return /*#__PURE__*/ _jsx(Box, {
+        "data-start-area": "field-hours",
+        children: /*#__PURE__*/ _jsx(OpeningHoursPicker, {
+            label: "Opening hours",
+            value: answers.hours,
+            onChange: (hours)=>{
+                answer({
+                    hours
+                });
+                tracker.fieldPicked('hours');
+            },
+            helperText: (_ref = (_errors_hours = errors.hours) == null ? void 0 : _errors_hours.message) != null ? _ref : 'Leave every day closed if you work by appointment.'
+        })
+    });
+}
+/** One extra's field, as "More details" draws it. */ function ExtraField(_0) {
+    let { field } = _0, props = _object_without_properties_loose(_0, [
+        "field"
+    ]);
+    switch(field){
+        case 'tagline':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Tagline",
+                placeholder: "Calm, gentle grooming your dog will love",
+                helper: "A short line about the business, in your words."
+            }));
+        case 'founded':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Year founded",
+                placeholder: "2015",
+                inputMode: "numeric"
+            }));
+        case 'serviceArea':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Areas you serve",
+                placeholder: 'Austin\nRound Rock',
+                helper: "Cities, towns or neighborhoods, one a line.",
+                multiline: true
+            }));
+        case 'priceRange':
+            return /*#__PURE__*/ _jsx(PriceRangeField, _extends({}, props));
+        case 'languages':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Languages you serve customers in",
+                placeholder: "English, Spanish"
+            }));
+        case 'brand':
+            return /*#__PURE__*/ _jsx(BrandField, _extends({}, props));
+        case 'street':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Street address",
+                placeholder: "214 Main Street",
+                autoComplete: "street-address"
+            }));
+        case 'city':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "City or town",
+                placeholder: "Austin",
+                autoComplete: "address-level2"
+            }));
+        case 'region':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "State or region",
+                placeholder: "TX",
+                autoComplete: "address-level1"
+            }));
+        case 'postalCode':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "ZIP or postal code",
+                placeholder: "78701",
+                autoComplete: "postal-code"
+            }));
+        case 'country':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Country",
+                placeholder: "United States",
+                autoComplete: "country-name"
+            }));
+        case 'hours':
+            return /*#__PURE__*/ _jsx(HoursField, _extends({}, props));
+        case 'social':
+            return /*#__PURE__*/ _jsx(ExtraText, _extends({}, props, {
+                field: field,
+                label: "Social profiles",
+                placeholder: "instagram.com/yourbusiness",
+                helper: "One link a line. Your site links them, and its search listing names them as yours.",
+                multiline: true,
+                inputMode: "url"
+            }));
+        default:
+            return null;
+    }
+}
+/** Fields "More details" draws side by side. */ const PAIRS = [
+    [
+        'tagline',
+        'founded'
+    ],
+    [
+        'priceRange',
+        'languages'
+    ],
+    [
+        'city',
+        'region'
+    ],
+    [
+        'postalCode',
+        'country'
+    ]
+];
+/**
+ * A step's "More details" (AGL-3979): a collapsed section of optional extras
+ * that fit the step, so a person who wants the site to say more can, and one
+ * who does not never has to open it. Open from the start where something in
+ * it is already filled in (a start reopened on its answers), and opened by a
+ * Next refused on one of its fields.
+ */ export function MoreDetails(_0) {
+    let { step } = _0, props = _object_without_properties_loose(_0, [
+        "step"
+    ]);
+    const fields = AI_SITE_START_MORE_FIELDS[step];
+    const { answers, errors, tracker } = props;
+    const [open, setOpen] = useState(()=>fields.some((field)=>{
+            var _answers_field;
+            return ((_answers_field = answers[field]) != null ? _answers_field : '').trim() !== '';
+        }));
+    if (!fields.length) return null;
+    const expanded = open || fields.some((field)=>errors[field]);
+    const rows = [];
+    for (const field of fields){
+        if (rows.some((row)=>row.includes(field))) continue;
+        const pair = PAIRS.find((entry)=>entry[0] === field && fields.includes(entry[1]));
+        rows.push(pair != null ? pair : [
+            field
+        ]);
+    }
+    return /*#__PURE__*/ _jsxs(Accordion, {
+        disableGutters: true,
+        variant: "outlined",
+        // The same outlined, rounded section as the build page's plan.
+        sx: {
+            borderRadius: 2,
+            '&::before': {
+                display: 'none'
+            }
+        },
+        expanded: expanded,
+        onChange: (_, next)=>{
+            setOpen(next);
+            if (next) tracker.moreDetails();
+        },
+        "data-start-area": "more-details",
+        children: [
+            /*#__PURE__*/ _jsx(AccordionSummary, {
+                expandIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiChevronDown.path
+                }),
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.25,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle2",
+                            component: "span",
+                            children: 'More details'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            component: "span",
+                            children: MORE_SUMMARY[step]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(AccordionDetails, {
+                children: /*#__PURE__*/ _jsx(Stack, {
+                    spacing: 2.5,
+                    children: rows.map((row)=>row.length > 1 ? /*#__PURE__*/ _jsx(Stack, {
+                            direction: {
+                                xs: 'column',
+                                sm: 'row'
+                            },
+                            spacing: 2,
+                            children: row.map((field)=>/*#__PURE__*/ _jsx(ExtraField, _extends({
+                                    field: field
+                                }, props), field))
+                        }, row.join('-')) : /*#__PURE__*/ _jsx(ExtraField, _extends({
+                            field: row[0]
+                        }, props), row[0]))
+                })
+            })
+        ]
+    });
+}
+/** The extras on the review, each as a person reads it, with the step that asks it. */ export function aiSiteStartExtraRows(answers) {
+    var _ref, _aiSiteSocialLinks;
+    const rows = [];
+    const add = (label, value, step)=>{
+        if (value.trim()) rows.push({
+            label,
+            value: value.trim(),
+            step
+        });
+    };
+    add('Phone', answers.phone, 'details');
+    add('Email', answers.email, 'details');
+    add('Tagline', answers.tagline, 'kind');
+    add('Year founded', answers.founded, 'kind');
+    add('Areas you serve', aiSiteServiceAreas(answers.serviceArea).join(', '), 'audience');
+    add('Price range', answers.priceRange, 'audience');
+    add('Languages', answers.languages, 'audience');
+    const brand = AI_SITE_START_BRAND_COLORS.find((color)=>color.hex === answers.brand);
+    add('Brand color', (_ref = brand == null ? void 0 : brand.label) != null ? _ref : answers.brand, 'style');
+    const regional = [
+        answers.region,
+        answers.postalCode
+    ].map((part)=>part.trim()).filter(Boolean).join(' ');
+    const address = [
+        answers.street,
+        answers.city,
+        regional,
+        answers.country
+    ].map((part)=>part.trim()).filter(Boolean).join(', ');
+    add('Address', address, 'details');
+    add('Opening hours', aiSiteHoursSentence(answers.hours), 'details');
+    const links = (_aiSiteSocialLinks = aiSiteSocialLinks(answers.social)) != null ? _aiSiteSocialLinks : [];
+    add('Social profiles', links.map((link)=>link.replace(/^https:\/\//, '')).join(', '), 'details');
+    return rows;
+}
 /**
  * One answer on the review, as one button back to the step that asks it. The
  * whole row is the target, not only "Edit" at its end: people clicked the
@@ -405,8 +1031,9 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
         ]
     });
 }
-/** Step: every answer, each with Edit, before "Plan my site". */ export function ReviewStep({ answers, freeTaste, onEdit, children }) {
+/** Step: every answer, each with Edit, before "Plan my site". */ export function ReviewStep({ answers, freeTaste, onEdit, children, inspiration = false }) {
     var _ref;
+    const liked = aiSiteStartInspirationTyped(answers);
     const kind = aiSiteStartKind(answers);
     const submissions = AI_SITE_SUBMISSION_CHOICES.find((option)=>option.id === answers.submissions);
     const rows = [
@@ -425,6 +1052,13 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
             value: answers.kind ? kind.label : `${kind.label}, picked for you`,
             step: 'style'
         },
+        ...inspiration ? [
+            {
+                label: 'Sites you like',
+                value: liked.length ? liked.map(aiSiteInspirationHost).join(', ') : 'None',
+                step: 'style'
+            }
+        ] : [],
         {
             label: 'Form submissions',
             value: (_ref = submissions == null ? void 0 : submissions.label) != null ? _ref : answers.submissions,
@@ -441,7 +1075,9 @@ import { aiSiteStylePreview } from "./ai-site-style-previews.js";
                 value: answers.welcomeEmail ? 'Draft one' : 'No',
                 step: 'details'
             }
-        ]
+        ],
+        // Everything "More details" and the contact fields were given (AGL-3979), each with Edit.
+        ...aiSiteStartExtraRows(answers)
     ];
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 3,