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

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;
@@ -820,7 +856,7 @@ function SectionLabel({ children, help }) {
                                     width: '100%',
                                     mx: 'auto'
                                 },
-                                children: /*#__PURE__*/ _jsx(StartProgress, {
+                                children: importing ? null : /*#__PURE__*/ _jsx(StartProgress, {
                                     step: step,
                                     compact: compact,
                                     onStep: started ? undefined : goBackTo
@@ -856,7 +892,7 @@ function SectionLabel({ children, help }) {
                                                 sx: {
                                                     float: 'right'
                                                 }
-                                            }, START_HELP.choose)) : /*#__PURE__*/ _jsx(StepHelp, {
+                                            }, START_HELP.choose)) : importing ? null : /*#__PURE__*/ _jsx(StepHelp, {
                                                 step: step
                                             }),
                                             heading.lede
@@ -891,46 +927,84 @@ function SectionLabel({ children, help }) {
                                     pendingSite.fields
                                 ]
                             }) : null,
-                            choosing ? /*#__PURE__*/ _jsxs(Box, {
-                                "data-start-area": "choose-cards",
-                                sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: {
-                                        xs: '1fr',
-                                        sm: '1fr 1fr'
-                                    },
-                                    gap: 3
-                                },
+                            importing && orgId ? /*#__PURE__*/ _jsx(AiSiteImportStart, {
+                                orgId: orgId,
+                                orgSlug: orgSlug,
+                                hostId: hostId,
+                                host: host,
+                                user: user,
+                                pendingSite: pendingSite,
+                                onBack: ()=>setImporting(false),
+                                leave: leave
+                            }) : choosing ? /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 2,
                                 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,
+                                    /*#__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(Chip, {
-                                                size: "small",
-                                                color: "primary",
-                                                label: "Recommended"
+                                            /*#__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
                                             }),
-                                            freeTaste && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "text.secondary",
-                                                children: `Up to ${AI_SITE_FREE_PAGES.max} pages on the Free plan`
+                                            /*#__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",