@aglyn/plugins-ai 1.0.0-beta.271 → 1.0.0-beta.273

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

@@ -19,9 +19,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lockdownRefusalText, parseLockdownRefusal, PLATFORM_BRAND_NAME } from "@aglyn/aglyn";
 import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
 import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
-import { mdiCreation, mdiPageLayoutHeaderFooter } from "@aglyn/shared-data-mdi";
+import { mdiCreation, mdiPageLayoutHeaderFooter, mdiWebSync } from "@aglyn/shared-data-mdi";
 import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
 import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
+import BlockedControl from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
 import { Alert, AppBar, Box, Button, Card, CardActionArea, Chip, CircularProgress, Container, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, Toolbar, Typography, useMediaQuery } from "@mui/material";
@@ -44,6 +46,8 @@ import { useAiModelChoice } from "./use-ai-model-choice.js";
 import { aiCreditsBillingHref, aiSiteBuildHref } from "./ai-job-links.js";
 import { publishAiJob } from "./ai-jobs-store.js";
 import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-site-start-handoff.js";
+import { AiSiteImportStart } from "./ai-site-import-start.component.js";
+import { aiSiteImportOfferOf } from "../model/ai-site-import-view.js";
 /** Labels the dialog for a reader, from its own heading. */ const TITLE_ID = 'ai-site-start-title';
 /**
  * The takeover's surface, for its paper, its bar and its footer alike: the
@@ -72,7 +76,7 @@ import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-sit
 /**
  * One way to start, as a card the whole of which is the button. Its accessible
  * name is its title; its description describes it.
- */ function ChoiceCard({ accent, icon, iconId, title, description, busy = false, onChoose, children }) {
+ */ function ChoiceCard({ accent, icon, iconId, title, description, busy = false, blocked = null, onChoose, children }) {
     const id = useId();
     return /*#__PURE__*/ _jsx(Card, {
         variant: "outlined",
@@ -98,52 +102,57 @@ import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-sit
                     }
                 }
             }),
-        children: /*#__PURE__*/ _jsx(CardActionArea, {
-            onClick: onChoose,
-            disabled: busy,
-            "aria-labelledby": `${id}-title`,
-            "aria-describedby": `${id}-description`,
-            "aria-busy": busy || undefined,
-            sx: {
-                height: '100%',
-                p: {
-                    xs: 3,
-                    sm: 4
-                }
-            },
-            children: /*#__PURE__*/ _jsxs(Stack, {
-                spacing: 2,
+        children: /*#__PURE__*/ _jsx(BlockedControl, {
+            blocked: Boolean(blocked),
+            reason: blocked != null ? blocked : '',
+            fullWidth: true,
+            children: /*#__PURE__*/ _jsx(CardActionArea, {
+                onClick: onChoose,
+                disabled: busy,
+                "aria-labelledby": `${id}-title`,
+                "aria-describedby": `${id}-description`,
+                "aria-busy": busy || undefined,
                 sx: {
-                    alignItems: 'center',
-                    textAlign: 'center'
+                    height: '100%',
+                    p: {
+                        xs: 3,
+                        sm: 4
+                    }
                 },
-                children: [
-                    /*#__PURE__*/ _jsx(IconBadge, {
-                        accent: accent,
-                        children: busy ? /*#__PURE__*/ _jsx(CircularProgress, {
-                            size: "1em",
-                            color: accent,
-                            "aria-label": `${title}…`
-                        }) : /*#__PURE__*/ _jsx(MdiIcon, {
-                            path: icon,
-                            "data-icon": iconId,
-                            "aria-hidden": true
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Typography, {
-                        id: `${id}-title`,
-                        variant: "h6",
-                        component: "h2",
-                        children: title
-                    }),
-                    /*#__PURE__*/ _jsx(Typography, {
-                        id: `${id}-description`,
-                        variant: "body2",
-                        color: "text.secondary",
-                        children: description
-                    }),
-                    children
-                ]
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    sx: {
+                        alignItems: 'center',
+                        textAlign: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(IconBadge, {
+                            accent: accent,
+                            children: busy ? /*#__PURE__*/ _jsx(CircularProgress, {
+                                size: "1em",
+                                color: accent,
+                                "aria-label": `${title}…`
+                            }) : /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: icon,
+                                "data-icon": iconId,
+                                "aria-hidden": true
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            id: `${id}-title`,
+                            variant: "h6",
+                            component: "h2",
+                            children: title
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            id: `${id}-description`,
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: description
+                        }),
+                        children
+                    ]
+                })
             })
         })
     });
@@ -263,12 +272,19 @@ function SectionLabel({ children, help }) {
     const creating = Boolean(pendingSite) && !(pendingSite == null ? void 0 : pendingSite.created);
     // The funnel (AGL-3898): each step drawn, left and abandoned, and where people struggle.
     const tracker = useAiSiteStartTracking(step, verdict === 'ready');
+    // "Bring my site" (AGL-3976): asked of its own door, absent while its flag
+    // is off, drawn disabled with the reason where the workspace can change it.
+    const [importAvailability, setImportAvailability] = useState({
+        state: 'checking'
+    });
+    const [importing, setImporting] = useState(false);
     useEffect(()=>{
         if (!orgId || !uid) return;
         let active = true;
         void (async ()=>{
             try {
-                const response = await authorizedFetch(userRef.current, `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=1`);
+                const response = await authorizedFetch(userRef.current, // `siteImport=1`: whether "Bring my site" is offered here (AGL-3976), on the same read.
+                `/api/ai/jobs?orgId=${encodeURIComponent(orgId)}&limit=1&siteImport=1`);
                 const payload = response.ok ? await response.json().catch(()=>null) : null;
                 if (active) {
                     var // "Create site" shows its own dialog when this one will not draw.
@@ -285,6 +301,7 @@ function SectionLabel({ children, help }) {
                             }));
                     }
                     const shown = response.status !== 404 && response.status !== 403;
+                    setImportAvailability(aiSiteImportOfferOf(payload == null ? void 0 : payload.siteImport));
                     setVerdict(shown ? 'ready' : 'hidden');
                     (_pendingRef_current = pendingRef.current) == null ? void 0 : _pendingRef_current.ready(shown);
                     (_clientBuildRef_current = clientBuildRef.current) == null ? void 0 : (_clientBuildRef_current_ready = _clientBuildRef_current.ready) == null ? void 0 : _clientBuildRef_current_ready.call(_clientBuildRef_current, shown);
@@ -377,8 +394,9 @@ function SectionLabel({ children, help }) {
                         hostId: siteId,
                         kind: 'site',
                         // A client build's intake rides along (AGL-3958): the name and
-                        // towns as the inputs the questions leave empty, and how to reach
-                        // the business, its hours and the owner's words in the brief.
+                        // towns as the inputs the questions leave empty (the towns only
+                        // while no address is given, AGL-3995), and how to reach the
+                        // business, its hours and the owner's words in the brief.
                         brief: [
                             aiSiteStartBrief(asked),
                             clientIntake ? aiSiteStartClientBrief(clientIntake) : ''
@@ -388,7 +406,7 @@ function SectionLabel({ children, help }) {
                         // The sites they like go only while the start asks for them (AGL-3975).
                         inputs: _extends({}, aiSiteStartInputs(siteInspiration ? asked : _extends({}, asked, {
                             inspiration: []
-                        })), clientIntake ? aiSiteStartClientInputs(clientIntake) : {}, {
+                        })), clientIntake ? aiSiteStartClientInputs(clientIntake, asked) : {}, {
                             [AI_JOB_AUTO_CONFIRM_INPUT]: true
                         })
                     }, pickedModel ? {
@@ -533,6 +551,19 @@ function SectionLabel({ children, help }) {
         runStartBlank,
         tracker
     ]);
+    const chooseImport = useCallback(()=>{
+        if (importAvailability.state !== 'ready') return;
+        if (pendingSite && !pendingSite.created && !pendingSite.check()) return;
+        trackEvent('site_start_choice', {
+            choice: 'import'
+        });
+        tracker.complete();
+        setImporting(true);
+    }, [
+        importAvailability.state,
+        pendingSite,
+        tracker
+    ]);
     const chooseAi = useCallback(()=>{
         if (pendingSite && !pendingSite.created && !pendingSite.check()) return;
         trackEvent('site_start_choice', {
@@ -671,9 +702,11 @@ function SectionLabel({ children, help }) {
     // A Free start quotes what is LEFT (AGL-3660), shared across the owner's
     // Free workspaces — never the month's whole allowance as if none were spent.
     const estimateText = freeTaste ? freeCredits ? `${aiCreditRangeText(estimate)}. You have ${freeCredits.left.toLocaleString('en-US')} of your ${freeCredits.total.toLocaleString('en-US')} free AI credits left this month, until ${aiFreeCreditsResetLabel(freeCredits.resetsOn)}` : `${aiCreditRangeText(estimate)}, of the ${FREE_AI_TASTE_CREDITS_PER_MONTH} AI credits you get free each month` : `${aiCreditRangeText(estimate)}, estimated`;
-    const choosing = step === 'choose' && !started;
-    const reviewing = step === 'review' && !started;
-    const asking = step !== 'choose' && !started;
+    // The card is drawn wherever the workspace could use it, disabled where it cannot yet.
+    const showsImport = importAvailability.state === 'ready' || importAvailability.state === 'blocked';
+    const choosing = step === 'choose' && !started && !importing;
+    const reviewing = step === 'review' && !started && !importing;
+    const asking = step !== 'choose' && !started && !importing;
     // Each answer's reason not to go forward, shown on a step once Next was refused there.
     const fieldErrors = aiSiteStartFieldErrors(answers, {
         freeTaste
@@ -717,7 +750,10 @@ function SectionLabel({ children, help }) {
             lede: started ? `${PLATFORM_BRAND_NAME} AI is on it.` : `${PLATFORM_BRAND_NAME} AI plans and writes your pages from these answers, then publishes your site.`
         }
     };
-    const heading = HEADINGS[step];
+    const heading = importing ? {
+        title: 'Bring my site',
+        lede: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: its pages, words and photos. First, prove it is yours.`
+    } : HEADINGS[step];
     // Enter in a text answer is Next. A select, a card or a button keeps its own Enter.
     const onStepKeyDown = (event)=>{
         if (event.key !== 'Enter' || event.nativeEvent.isComposing || !asking || reviewing) return;
@@ -794,7 +830,7 @@ function SectionLabel({ children, help }) {
                     ]
                 })
             }),
-            /*#__PURE__*/ _jsx(DialogContent, {
+            /*#__PURE__*/ _jsxs(DialogContent, {
                 sx: {
                     px: {
                         xs: 2,
@@ -802,209 +838,250 @@ function SectionLabel({ children, help }) {
                     }
                 },
                 onKeyDown: onStepKeyDown,
-                children: /*#__PURE__*/ _jsx(Container, {
-                    maxWidth: choosing || step === 'kind' || step === 'style' ? 'md' : 'sm',
-                    disableGutters: true,
-                    sx: {
-                        py: {
-                            xs: 3,
-                            sm: 5
-                        }
-                    },
-                    children: /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: 4,
-                        children: [
-                            /*#__PURE__*/ _jsx(Box, {
-                                sx: {
-                                    maxWidth: (t)=>t.spacing(80),
-                                    width: '100%',
-                                    mx: 'auto'
-                                },
-                                children: /*#__PURE__*/ _jsx(StartProgress, {
-                                    step: step,
-                                    compact: compact,
-                                    onStep: started ? undefined : goBackTo
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 1,
-                                sx: {
-                                    textAlign: choosing ? 'center' : 'left'
-                                },
-                                "data-start-area": "heading",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        ref: headingRef,
-                                        tabIndex: -1,
-                                        variant: "h4",
-                                        component: "h1",
-                                        sx: {
-                                            '&:focus': {
-                                                outline: 'none'
-                                            },
-                                            '&:focus-visible': {
-                                                outline: 'none'
-                                            }
-                                        },
-                                        children: heading.title
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Typography, {
-                                        variant: "body1",
-                                        color: "text.secondary",
-                                        children: [
-                                            choosing ? /*#__PURE__*/ _jsx(HelpTip, _extends({
-                                                sx: {
-                                                    float: 'right'
-                                                }
-                                            }, START_HELP.choose)) : /*#__PURE__*/ _jsx(StepHelp, {
-                                                step: step
-                                            }),
-                                            heading.lede
-                                        ]
-                                    })
-                                ]
-                            }),
-                            notice && /*#__PURE__*/ _jsx(Alert, {
-                                severity: "info",
-                                "data-start-area": "notice",
-                                children: notice
-                            }),
-                            asking && noneLeft && freeCredits && /*#__PURE__*/ _jsx(Alert, {
-                                severity: "warning",
-                                "data-start-area": "notice",
-                                action: orgSlug ? /*#__PURE__*/ _jsx(Button, {
-                                    color: "inherit",
-                                    size: "small",
-                                    href: aiCreditsBillingHref(orgSlug),
-                                    children: 'Upgrade'
-                                }) : undefined,
-                                children: aiFreeCreditsNoneLeftText(freeCredits.resetsOn)
-                            }),
-                            choosing && creating && pendingSite ? /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                component: "section",
-                                "aria-label": "Your site",
-                                children: [
-                                    /*#__PURE__*/ _jsx(SectionLabel, {
-                                        children: 'Your site'
-                                    }),
-                                    pendingSite.fields
-                                ]
-                            }) : null,
-                            choosing ? /*#__PURE__*/ _jsxs(Box, {
-                                "data-start-area": "choose-cards",
-                                sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: {
-                                        xs: '1fr',
-                                        sm: '1fr 1fr'
+                children: [
+                    importing ? null : /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            pt: {
+                                xs: 3,
+                                sm: 4
+                            }
+                        },
+                        children: /*#__PURE__*/ _jsx(StartProgress, {
+                            step: step,
+                            compact: compact,
+                            onStep: started ? undefined : goBackTo
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Container, {
+                        maxWidth: choosing || step === 'kind' || step === 'style' ? 'md' : 'sm',
+                        disableGutters: true,
+                        sx: {
+                            py: {
+                                xs: 3,
+                                sm: 5
+                            }
+                        },
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 4,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    sx: {
+                                        textAlign: choosing ? 'center' : 'left'
                                     },
-                                    gap: 3
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(ChoiceCard, {
-                                        accent: "secondary",
-                                        icon: mdiPageLayoutHeaderFooter.path,
-                                        iconId: "page-layout-header-footer",
-                                        title: "Start from the starter site",
-                                        description: "A ready-made home page with a header, footer and contact form you can edit.",
-                                        busy: startingStarter,
-                                        onChoose: chooseStarter
-                                    }),
-                                    /*#__PURE__*/ _jsxs(ChoiceCard, {
-                                        accent: "primary",
-                                        icon: mdiCreation.path,
-                                        iconId: "creation",
-                                        title: "Start with AI",
-                                        description: `Answer a few questions and ${PLATFORM_BRAND_NAME} AI plans your pages.`,
-                                        onChoose: chooseAi,
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Chip, {
-                                                size: "small",
-                                                color: "primary",
-                                                label: "Recommended"
-                                            }),
-                                            freeTaste && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "text.secondary",
-                                                children: `Up to ${AI_SITE_FREE_PAGES.max} pages on the Free plan`
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }) : started && orgId ? /*#__PURE__*/ _jsx(Card, {
-                                variant: "outlined",
-                                sx: {
-                                    borderRadius: 2,
-                                    p: {
-                                        xs: 2,
-                                        sm: 3
-                                    }
-                                },
-                                children: /*#__PURE__*/ _jsx(AiJobFollow, {
-                                    job: started,
+                                    "data-start-area": "heading",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            ref: headingRef,
+                                            tabIndex: -1,
+                                            variant: "h4",
+                                            component: "h1",
+                                            sx: {
+                                                '&:focus': {
+                                                    outline: 'none'
+                                                },
+                                                '&:focus-visible': {
+                                                    outline: 'none'
+                                                }
+                                            },
+                                            children: heading.title
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            variant: "body1",
+                                            color: "text.secondary",
+                                            children: [
+                                                choosing ? /*#__PURE__*/ _jsx(HelpTip, _extends({
+                                                    sx: {
+                                                        float: 'right'
+                                                    }
+                                                }, START_HELP.choose)) : importing ? null : /*#__PURE__*/ _jsx(StepHelp, {
+                                                    step: step
+                                                }),
+                                                heading.lede
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                notice && /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "info",
+                                    "data-start-area": "notice",
+                                    children: notice
+                                }),
+                                asking && noneLeft && freeCredits && /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "warning",
+                                    "data-start-area": "notice",
+                                    action: orgSlug ? /*#__PURE__*/ _jsx(Button, {
+                                        color: "inherit",
+                                        size: "small",
+                                        href: aiCreditsBillingHref(orgSlug),
+                                        children: 'Upgrade'
+                                    }) : undefined,
+                                    children: aiFreeCreditsNoneLeftText(freeCredits.resetsOn)
+                                }),
+                                choosing && creating && pendingSite ? /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 2,
+                                    component: "section",
+                                    "aria-label": "Your site",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SectionLabel, {
+                                            children: 'Your site'
+                                        }),
+                                        pendingSite.fields
+                                    ]
+                                }) : null,
+                                importing && orgId ? /*#__PURE__*/ _jsx(AiSiteImportStart, {
                                     orgId: orgId,
                                     orgSlug: orgSlug,
+                                    hostId: hostId,
+                                    host: host,
                                     user: user,
-                                    intro: 'Your site is being planned. It is then built and published for you, with ' + 'nothing to approve. You can edit or unpublish it afterwards.',
-                                    // Full screen: AI jobs opens in the panel this dialog covers.
-                                    onOpenJobs: exit
-                                })
-                            }) : /*#__PURE__*/ _jsxs(Box, {
-                                component: "section",
-                                children: [
-                                    step === 'kind' && /*#__PURE__*/ _jsx(KindStep, _extends({}, stepProps)),
-                                    step === 'audience' && /*#__PURE__*/ _jsx(AudienceStep, _extends({}, stepProps)),
-                                    step === 'style' && /*#__PURE__*/ _jsx(StyleStep, _extends({}, stepProps, {
-                                        inspiration: siteInspiration ? {
-                                            limit: aiSiteInspirationLimit(freeTaste),
-                                            upgradeHref: orgSlug ? aiCreditsBillingHref(orgSlug) : null
-                                        } : null
-                                    })),
-                                    step === 'details' && /*#__PURE__*/ _jsx(DetailsStep, _extends({}, stepProps, {
-                                        freeTaste: freeTaste,
-                                        band: band
-                                    })),
-                                    step !== 'review' && /*#__PURE__*/ _jsx(Box, {
-                                        sx: {
-                                            mt: 3
-                                        },
-                                        children: /*#__PURE__*/ _jsx(MoreDetails, _extends({
-                                            step: step
-                                        }, stepProps), step)
-                                    }),
-                                    step === 'review' && /*#__PURE__*/ _jsxs(ReviewStep, {
-                                        answers: answers,
-                                        freeTaste: freeTaste,
-                                        onEdit: edit,
-                                        inspiration: siteInspiration,
-                                        children: [
-                                            clientIntake && /*#__PURE__*/ _jsx(Alert, {
-                                                severity: "info",
-                                                variant: "outlined",
-                                                "data-start-area": "client-intake",
-                                                children: aiSiteStartClientNote(clientIntake)
-                                            }),
-                                            !noneLeft && prompt && /*#__PURE__*/ _jsx(AiCreditsPromptNotice, {
-                                                prompt: prompt,
-                                                noun: "site",
-                                                orgSlug: orgSlug,
-                                                busy: busy,
-                                                onBuildWhatFits: ()=>void plan({
-                                                        creditsConfirmed: true
-                                                    }),
-                                                onSmaller: ()=>void plan({
-                                                        creditsConfirmed: true,
-                                                        pages: 1
-                                                    })
-                                            })
-                                        ]
+                                    pendingSite: pendingSite,
+                                    onBack: ()=>setImporting(false),
+                                    leave: leave
+                                }) : choosing ? /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 2,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Box, {
+                                            "data-start-area": "choose-cards",
+                                            sx: {
+                                                display: 'grid',
+                                                gridTemplateColumns: showsImport ? {
+                                                    xs: '1fr',
+                                                    sm: '1fr 1fr',
+                                                    md: '1fr 1fr 1fr'
+                                                } : {
+                                                    xs: '1fr',
+                                                    sm: '1fr 1fr'
+                                                },
+                                                gap: 3
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(ChoiceCard, {
+                                                    accent: "secondary",
+                                                    icon: mdiPageLayoutHeaderFooter.path,
+                                                    iconId: "page-layout-header-footer",
+                                                    title: "Start from the starter site",
+                                                    description: "A ready-made home page with a header, footer and contact form you can edit.",
+                                                    busy: startingStarter,
+                                                    onChoose: chooseStarter
+                                                }),
+                                                /*#__PURE__*/ _jsxs(ChoiceCard, {
+                                                    accent: "primary",
+                                                    icon: mdiCreation.path,
+                                                    iconId: "creation",
+                                                    title: "Start with AI",
+                                                    description: `Answer a few questions and ${PLATFORM_BRAND_NAME} AI plans your pages.`,
+                                                    onChoose: chooseAi,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Chip, {
+                                                            size: "small",
+                                                            color: "primary",
+                                                            label: "Recommended"
+                                                        }),
+                                                        freeTaste && /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "caption",
+                                                            color: "text.secondary",
+                                                            children: `Up to ${AI_SITE_FREE_PAGES.max} pages on the Free plan`
+                                                        })
+                                                    ]
+                                                }),
+                                                showsImport && /*#__PURE__*/ _jsx(ChoiceCard, {
+                                                    accent: "secondary",
+                                                    icon: mdiWebSync.path,
+                                                    iconId: "web-sync",
+                                                    title: "Bring my site",
+                                                    description: `Bring the website you have now into ${PLATFORM_BRAND_NAME}: its pages, words and photos, rewritten in your new design.`,
+                                                    blocked: importAvailability.state === 'blocked' ? importAvailability.message : null,
+                                                    onChoose: chooseImport,
+                                                    children: importAvailability.state === 'blocked' && importAvailability.reason === 'plan' ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        label: "Paid plans"
+                                                    }) : null
+                                                })
+                                            ]
+                                        }),
+                                        importAvailability.state === 'blocked' ? /*#__PURE__*/ _jsx(PrerequisiteNotice, _extends({}, importAvailability.reason === 'plan' && orgSlug ? {
+                                            href: aiCreditsBillingHref(orgSlug),
+                                            actionLabel: 'Upgrade'
+                                        } : {}, {
+                                            children: importAvailability.message
+                                        })) : null
+                                    ]
+                                }) : started && orgId ? /*#__PURE__*/ _jsx(Card, {
+                                    variant: "outlined",
+                                    sx: {
+                                        borderRadius: 2,
+                                        p: {
+                                            xs: 2,
+                                            sm: 3
+                                        }
+                                    },
+                                    children: /*#__PURE__*/ _jsx(AiJobFollow, {
+                                        job: started,
+                                        orgId: orgId,
+                                        orgSlug: orgSlug,
+                                        user: user,
+                                        intro: 'Your site is being planned. It is then built and published for you, with ' + 'nothing to approve. You can edit or unpublish it afterwards.',
+                                        // Full screen: AI jobs opens in the panel this dialog covers.
+                                        onOpenJobs: exit
                                     })
-                                ]
-                            })
-                        ]
+                                }) : /*#__PURE__*/ _jsxs(Box, {
+                                    component: "section",
+                                    children: [
+                                        step === 'kind' && /*#__PURE__*/ _jsx(KindStep, _extends({}, stepProps)),
+                                        step === 'audience' && /*#__PURE__*/ _jsx(AudienceStep, _extends({}, stepProps)),
+                                        step === 'style' && /*#__PURE__*/ _jsx(StyleStep, _extends({}, stepProps, {
+                                            inspiration: siteInspiration ? {
+                                                limit: aiSiteInspirationLimit(freeTaste),
+                                                upgradeHref: orgSlug ? aiCreditsBillingHref(orgSlug) : null
+                                            } : null
+                                        })),
+                                        step === 'details' && /*#__PURE__*/ _jsx(DetailsStep, _extends({}, stepProps, {
+                                            freeTaste: freeTaste,
+                                            band: band
+                                        })),
+                                        step !== 'review' && /*#__PURE__*/ _jsx(Box, {
+                                            sx: {
+                                                mt: 3
+                                            },
+                                            children: /*#__PURE__*/ _jsx(MoreDetails, _extends({
+                                                step: step
+                                            }, stepProps), step)
+                                        }),
+                                        step === 'review' && /*#__PURE__*/ _jsxs(ReviewStep, {
+                                            answers: answers,
+                                            freeTaste: freeTaste,
+                                            onEdit: edit,
+                                            inspiration: siteInspiration,
+                                            children: [
+                                                clientIntake && /*#__PURE__*/ _jsx(Alert, {
+                                                    severity: "info",
+                                                    variant: "outlined",
+                                                    "data-start-area": "client-intake",
+                                                    children: aiSiteStartClientNote(clientIntake)
+                                                }),
+                                                !noneLeft && prompt && /*#__PURE__*/ _jsx(AiCreditsPromptNotice, {
+                                                    prompt: prompt,
+                                                    noun: "site",
+                                                    orgSlug: orgSlug,
+                                                    busy: busy,
+                                                    onBuildWhatFits: ()=>void plan({
+                                                            creditsConfirmed: true
+                                                        }),
+                                                    onSmaller: ()=>void plan({
+                                                            creditsConfirmed: true,
+                                                            pages: 1
+                                                        })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
                     })
-                })
+                ]
             }),
             asking && /* The footer stays put while the questions scroll. It wraps, because
            the estimate, the reason and the buttons are wider than a phone. */ /*#__PURE__*/ _jsxs(DialogActions, {