@hanzo/ui 8.27.26 → 8.27.32

package/dist/onboarding/ChatOnboarding.cjs

@@ -0,0 +1,107 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatOnboarding = ChatOnboarding;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const button_1 = require("../backends/gui/button.cjs");
+const field_1 = require("../backends/gui/field.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const layout_1 = require("../backends/gui/layout.cjs");
+const select_1 = require("../backends/gui/select.cjs");
+const switch_1 = require("../backends/gui/switch.cjs");
+const api_1 = require("./api.cjs");
+const frame_1 = require("./frame.cjs");
+const screens_1 = require("./screens.cjs");
+const hooks_1 = require("./hooks.cjs");
+const roles_1 = require("./roles.cjs");
+const state_1 = require("./state.cjs");
+const ICONS = {
+    binoculars: lucide_icons_2_1.Binoculars,
+    books: lucide_icons_2_1.Library,
+    bulb: lucide_icons_2_1.Lightbulb,
+    calendar: lucide_icons_2_1.Calendar,
+    cap: lucide_icons_2_1.GraduationCap,
+    chart: lucide_icons_2_1.ChartLine,
+    chat: lucide_icons_2_1.MessageSquare,
+    clock: lucide_icons_2_1.Clock,
+    code: lucide_icons_2_1.Code,
+    dna: lucide_icons_2_1.Dna,
+    doc: lucide_icons_2_1.FileText,
+    gavel: lucide_icons_2_1.Gavel,
+    grid: lucide_icons_2_1.LayoutGrid,
+    palette: lucide_icons_2_1.Palette,
+    pencil: lucide_icons_2_1.Pencil,
+    person: lucide_icons_2_1.User,
+    slides: lucide_icons_2_1.Presentation,
+};
+function ChatOnboarding({ site = 'Hanzo', api = api_1.API, track, onDone, privacyPath = '/settings/privacy', safeguards = false }) {
+    const session = (0, hooks_1.useSession)(api);
+    const [role, setRole] = (0, react_1.useState)('');
+    const [name, setName] = (0, react_1.useState)('');
+    const [train, setTrain] = (0, react_1.useState)(true);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const announced = (0, react_1.useRef)(false);
+    const at = session.loading ? null : (0, state_1.chatStep)(session.progress, Boolean(session.name));
+    (0, react_1.useEffect)(() => {
+        if (at !== 'done' || announced.current)
+            return;
+        announced.current = true;
+        // A person who finished every step opens the chat as they left it.
+        onDone({ role: session.progress.role });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [at]);
+    if (!at || at === 'done')
+        return (0, jsx_runtime_1.jsx)(frame_1.Page, { site: site, title: "", busy: true });
+    if (at === 'notice') {
+        return ((0, jsx_runtime_1.jsxs)(frame_1.Page, { site: site, title: "Before your first chat", lede: "A few things to know, plus one setting to review", center: true, width: 512, children: [(0, jsx_runtime_1.jsxs)(frame_1.Panel, { label: "Before your first chat", children: [(0, jsx_runtime_1.jsxs)(Row, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Binoculars, { size: 20 }), children: [(0, jsx_runtime_1.jsx)("b", { children: "Ad-free chats:" }), " We won\u2019t show you ads or let advertisers influence what ", site, " says."] }), safeguards ? ((0, jsx_runtime_1.jsxs)(Row, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, { size: 20 }), children: [(0, jsx_runtime_1.jsx)("b", { children: "Built to help, not harm:" }), " Automated safeguards protect your chats from violent, abusive, or deceptive content."] })) : null, (0, jsx_runtime_1.jsxs)(Row, { icon: (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: train, onCheckedChange: setTrain, "aria-label": "Help improve our AI models" }), children: [(0, jsx_runtime_1.jsx)("b", { children: "Help improve our AI models:" }), " Allow the use of your chats and coding sessions to train and improve Zen models. Change anytime in privacy settings.", ' ', (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: "Learn more" })] })] }), (0, jsx_runtime_1.jsx)(screens_1.Primary, { disabled: busy, onClick: async () => {
+                        setBusy(true);
+                        await session.setTrain(train).catch(() => undefined);
+                        track?.('first_chat_notice_accepted', { train_opt_in: train });
+                        await session.save({ notice: true });
+                        setBusy(false);
+                    }, children: "Continue" })] }));
+    }
+    if (at === 'name') {
+        const submit = async (e) => {
+            e?.preventDefault();
+            if (!name.trim() || busy)
+                return;
+            setBusy(true);
+            try {
+                await session.setName(name.trim());
+                track?.('name_set', {});
+            }
+            finally {
+                setBusy(false);
+            }
+        };
+        return ((0, jsx_runtime_1.jsx)(frame_1.Page, { site: site, title: "What\u2019s your name?", lede: `So ${site} knows what to call you.`, center: true, children: (0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: submit, noValidate: true }), gap: "$4", items: "stretch", children: [(0, jsx_runtime_1.jsx)(field_1.Field, { gap: "$2", children: (0, jsx_runtime_1.jsx)(input_1.Input, { name: "name", autoComplete: "name", "aria-label": "Your name", value: name, onChangeText: setName, placeholder: "Your name", height: 48, autoFocus: true }) }), (0, jsx_runtime_1.jsx)(screens_1.Primary, { type: "submit", disabled: !name.trim() || busy, children: "Continue" })] }) }));
+    }
+    const chosen = roles_1.ROLES.find((r) => r.role === role);
+    const pick = async (prompt) => {
+        if (busy || !chosen)
+            return;
+        setBusy(true);
+        await session.save({ role: chosen.role });
+        onDone({ prompt, role: chosen.role });
+    };
+    return ((0, jsx_runtime_1.jsxs)(frame_1.Page, { site: site, title: roles_1.ROLES_TITLE, lede: roles_1.ROLES_SUBTITLE, center: true, width: 450, children: [(0, jsx_runtime_1.jsxs)(select_1.Select, { value: role, onValueChange: (v) => {
+                    setRole(v);
+                    track?.('role_selected', { role: v });
+                }, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { "aria-label": "Your role", height: 48, children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: roles_1.ROLES_PLACEHOLDER }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: roles_1.ROLES.map((r) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: r.role, children: r.role }, r.role))) })] }), chosen ? ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { gap: "$3", children: [chosen.prompts.map((p) => {
+                        const Icon = ICONS[p.icon];
+                        return ((0, jsx_runtime_1.jsxs)(button_1.Button, { type: "button", variant: "secondary", disabled: busy, minH: 68, px: "$5", rounded: "$3", justify: "flex-start", gap: "$4", onClick: () => {
+                                track?.('starter_prompt_used', { role: chosen.role, prompt: p.label });
+                                void pick(p.prompt);
+                            }, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 20 }), p.label] }, p.label));
+                    }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "link", size: "lg", disabled: busy, self: "center", onClick: () => {
+                            track?.('own_topic_chosen', { role: chosen.role });
+                            void pick(undefined);
+                        }, children: roles_1.OWN_TOPIC })] })) : null] }));
+}
+/** One line of the notice: a mark or a switch, then the words. */
+function Row({ icon, children }) {
+    return ((0, jsx_runtime_1.jsxs)(layout_1.XStack, { gap: "$4", items: "flex-start", children: [(0, jsx_runtime_1.jsx)(layout_1.XStack, { width: 40, justify: "center", pt: "$0.5", children: icon }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$2", color: "$ink", flex: 1, m: 0, children: children })] }));
+}

package/dist/onboarding/ChatOnboarding.d.ts

@@ -0,0 +1,25 @@
+import { type Track } from './hooks.js';
+/**
+ * Before a person's first chat: what to know, then a name, then a role with
+ * three starter prompts. ONE component for every chat surface (hanzo.chat,
+ * hanzo.ai/chat, hanzo.app, the desktop app); each finished step is saved on the
+ * IAM user, so nobody sees a step twice.
+ *
+ * `onDone` receives what the person chose to open the chat with: a starter's full
+ * prompt, or nothing for an empty chat.
+ */
+export interface ChatOnboardingProps {
+    site?: string;
+    api?: string;
+    track?: Track;
+    onDone: (start: {
+        prompt?: string;
+        role?: string;
+    }) => void;
+    /** Where "Learn more" about training goes. */
+    privacyPath?: string;
+    /** Show the safeguards row. Only a host whose router really runs a guard on chats may say so. */
+    safeguards?: boolean;
+}
+export declare function ChatOnboarding({ site, api, track, onDone, privacyPath, safeguards }: ChatOnboardingProps): import("react").JSX.Element;
+//# sourceMappingURL=ChatOnboarding.d.ts.map

package/dist/onboarding/ChatOnboarding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatOnboarding.d.ts","sourceRoot":"","sources":["../../src/onboarding/ChatOnboarding.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAIhD;;;;;;;;GAQG;AAEH,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3D,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iGAAiG;IACjG,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAsBD,wBAAgB,cAAc,CAAC,EAAE,IAAc,EAAE,GAAS,EAAE,KAAK,EAAE,MAAM,EAAE,WAAiC,EAAE,UAAkB,EAAE,EAAE,mBAAmB,+BAsJtJ"}

package/dist/onboarding/ChatOnboarding.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Binoculars, Calendar, ChartLine, Clock, Code, Dna, FileText, Gavel, GraduationCap, LayoutGrid, Library, Lightbulb, MessageSquare, Palette, Pencil, Presentation, User } from '@hanzogui/lucide-icons-2';
+import { Button } from '../backends/gui/button.js';
+import { Field } from '../backends/gui/field.js';
+import { Input } from '../backends/gui/input.js';
+import { Anchor, Paragraph, XStack, YStack } from '../backends/gui/layout.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../backends/gui/select.js';
+import { Switch } from '../backends/gui/switch.js';
+import { API } from './api.js';
+import { Page, Panel } from './frame.js';
+import { Primary } from './screens.js';
+import { useSession } from './hooks.js';
+import { OWN_TOPIC, ROLES, ROLES_PLACEHOLDER, ROLES_SUBTITLE, ROLES_TITLE } from './roles.js';
+import { chatStep } from './state.js';
+const ICONS = {
+    binoculars: Binoculars,
+    books: Library,
+    bulb: Lightbulb,
+    calendar: Calendar,
+    cap: GraduationCap,
+    chart: ChartLine,
+    chat: MessageSquare,
+    clock: Clock,
+    code: Code,
+    dna: Dna,
+    doc: FileText,
+    gavel: Gavel,
+    grid: LayoutGrid,
+    palette: Palette,
+    pencil: Pencil,
+    person: User,
+    slides: Presentation,
+};
+export function ChatOnboarding({ site = 'Hanzo', api = API, track, onDone, privacyPath = '/settings/privacy', safeguards = false }) {
+    const session = useSession(api);
+    const [role, setRole] = useState('');
+    const [name, setName] = useState('');
+    const [train, setTrain] = useState(true);
+    const [busy, setBusy] = useState(false);
+    const announced = useRef(false);
+    const at = session.loading ? null : chatStep(session.progress, Boolean(session.name));
+    useEffect(() => {
+        if (at !== 'done' || announced.current)
+            return;
+        announced.current = true;
+        // A person who finished every step opens the chat as they left it.
+        onDone({ role: session.progress.role });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [at]);
+    if (!at || at === 'done')
+        return _jsx(Page, { site: site, title: "", busy: true });
+    if (at === 'notice') {
+        return (_jsxs(Page, { site: site, title: "Before your first chat", lede: "A few things to know, plus one setting to review", center: true, width: 512, children: [_jsxs(Panel, { label: "Before your first chat", children: [_jsxs(Row, { icon: _jsx(Binoculars, { size: 20 }), children: [_jsx("b", { children: "Ad-free chats:" }), " We won\u2019t show you ads or let advertisers influence what ", site, " says."] }), safeguards ? (_jsxs(Row, { icon: _jsx(User, { size: 20 }), children: [_jsx("b", { children: "Built to help, not harm:" }), " Automated safeguards protect your chats from violent, abusive, or deceptive content."] })) : null, _jsxs(Row, { icon: _jsx(Switch, { checked: train, onCheckedChange: setTrain, "aria-label": "Help improve our AI models" }), children: [_jsx("b", { children: "Help improve our AI models:" }), " Allow the use of your chats and coding sessions to train and improve Zen models. Change anytime in privacy settings.", ' ', _jsx(Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: "Learn more" })] })] }), _jsx(Primary, { disabled: busy, onClick: async () => {
+                        setBusy(true);
+                        await session.setTrain(train).catch(() => undefined);
+                        track?.('first_chat_notice_accepted', { train_opt_in: train });
+                        await session.save({ notice: true });
+                        setBusy(false);
+                    }, children: "Continue" })] }));
+    }
+    if (at === 'name') {
+        const submit = async (e) => {
+            e?.preventDefault();
+            if (!name.trim() || busy)
+                return;
+            setBusy(true);
+            try {
+                await session.setName(name.trim());
+                track?.('name_set', {});
+            }
+            finally {
+                setBusy(false);
+            }
+        };
+        return (_jsx(Page, { site: site, title: "What\u2019s your name?", lede: `So ${site} knows what to call you.`, center: true, children: _jsxs(YStack, { render: _jsx("form", { onSubmit: submit, noValidate: true }), gap: "$4", items: "stretch", children: [_jsx(Field, { gap: "$2", children: _jsx(Input, { name: "name", autoComplete: "name", "aria-label": "Your name", value: name, onChangeText: setName, placeholder: "Your name", height: 48, autoFocus: true }) }), _jsx(Primary, { type: "submit", disabled: !name.trim() || busy, children: "Continue" })] }) }));
+    }
+    const chosen = ROLES.find((r) => r.role === role);
+    const pick = async (prompt) => {
+        if (busy || !chosen)
+            return;
+        setBusy(true);
+        await session.save({ role: chosen.role });
+        onDone({ prompt, role: chosen.role });
+    };
+    return (_jsxs(Page, { site: site, title: ROLES_TITLE, lede: ROLES_SUBTITLE, center: true, width: 450, children: [_jsxs(Select, { value: role, onValueChange: (v) => {
+                    setRole(v);
+                    track?.('role_selected', { role: v });
+                }, children: [_jsx(SelectTrigger, { "aria-label": "Your role", height: 48, children: _jsx(SelectValue, { placeholder: ROLES_PLACEHOLDER }) }), _jsx(SelectContent, { children: ROLES.map((r) => (_jsx(SelectItem, { value: r.role, children: r.role }, r.role))) })] }), chosen ? (_jsxs(YStack, { gap: "$3", children: [chosen.prompts.map((p) => {
+                        const Icon = ICONS[p.icon];
+                        return (_jsxs(Button, { type: "button", variant: "secondary", disabled: busy, minH: 68, px: "$5", rounded: "$3", justify: "flex-start", gap: "$4", onClick: () => {
+                                track?.('starter_prompt_used', { role: chosen.role, prompt: p.label });
+                                void pick(p.prompt);
+                            }, children: [_jsx(Icon, { size: 20 }), p.label] }, p.label));
+                    }), _jsx(Button, { type: "button", variant: "link", size: "lg", disabled: busy, self: "center", onClick: () => {
+                            track?.('own_topic_chosen', { role: chosen.role });
+                            void pick(undefined);
+                        }, children: OWN_TOPIC })] })) : null] }));
+}
+/** One line of the notice: a mark or a switch, then the words. */
+function Row({ icon, children }) {
+    return (_jsxs(XStack, { gap: "$4", items: "flex-start", children: [_jsx(XStack, { width: 40, justify: "center", pt: "$0.5", children: icon }), _jsx(Paragraph, { size: "$2", color: "$ink", flex: 1, m: 0, children: children })] }));
+}
+//# sourceMappingURL=ChatOnboarding.js.map

package/dist/onboarding/ChatOnboarding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatOnboarding.js","sourceRoot":"","sources":["../../src/onboarding/ChatOnboarding.tsx"],"names":[],"mappings":"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"}

package/dist/onboarding/Checkout.cjs

@@ -0,0 +1,150 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkout = Checkout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const pay_1 = require("@hanzo/pay");
+const web_1 = require("@hanzo/pay/web");
+const checkbox_1 = require("../backends/gui/checkbox.cjs");
+const field_1 = require("../backends/gui/field.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const layout_1 = require("../backends/gui/layout.cjs");
+const select_1 = require("../backends/gui/select.cjs");
+const api_1 = require("./api.cjs");
+const frame_1 = require("./frame.cjs");
+const screens_1 = require("./screens.cjs");
+const plans_1 = require("./plans.cjs");
+const COUNTRIES = [
+    ['US', 'United States'], ['CA', 'Canada'], ['GB', 'United Kingdom'], ['AU', 'Australia'], ['DE', 'Germany'], ['FR', 'France'], ['ES', 'Spain'], ['IT', 'Italy'], ['NL', 'Netherlands'], ['SE', 'Sweden'], ['IE', 'Ireland'], ['CH', 'Switzerland'], ['JP', 'Japan'], ['SG', 'Singapore'], ['IN', 'India'], ['BR', 'Brazil'], ['MX', 'Mexico'], ['NZ', 'New Zealand'], ['ZA', 'South Africa'], ['AE', 'United Arab Emirates'],
+];
+const key = () => (typeof crypto !== 'undefined' && 'randomUUID' in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`);
+const renews = (interval) => {
+    const d = new Date();
+    if (interval === 'annual')
+        d.setFullYear(d.getFullYear() + 1);
+    else
+        d.setMonth(d.getMonth() + 1);
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'numeric', day: 'numeric' });
+};
+function Checkout({ site = 'Hanzo', api = api_1.API, org, plan, seats = 1, interval, setInterval, track, termsPath = '/terms', back, onPaid }) {
+    const offer = plans_1.OFFERS[plan];
+    const l = (0, react_1.useMemo)(() => (0, plans_1.lines)(plan, interval, seats), [plan, interval, seats]);
+    const scope = (0, react_1.useMemo)(() => (org ? { 'X-Org-Id': org } : undefined), [org]);
+    const [settings, setSettings] = (0, react_1.useState)(null);
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [wrong, setWrong] = (0, react_1.useState)(null);
+    const [agree, setAgree] = (0, react_1.useState)(false);
+    const [form, setForm] = (0, react_1.useState)({ name: '', country: 'US', address: '', invoice: '' });
+    const card = (0, react_1.useRef)(null);
+    const attempt = (0, react_1.useRef)(key());
+    const started = (0, react_1.useRef)(false);
+    // The billing form is shown with a total: checkout has started.
+    (0, react_1.useEffect)(() => {
+        if (started.current)
+            return;
+        started.current = true;
+        track?.('plan_selected', { plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [(0, plans_1.item)(plan, interval, seats)] });
+        track?.('checkout_started', { plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [(0, plans_1.item)(plan, interval, seats)] });
+        // Once per mount.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let live = true;
+        (0, api_1.call)(api, '/v1/billing/settings', { headers: scope })
+            .then((s) => live && setSettings(s))
+            .catch((e) => live && setWrong(e instanceof Error ? e.message : 'Payments are not available right now.'));
+        return () => {
+            live = false;
+        };
+    }, [api, scope]);
+    // The Square card field, drawn once the settings say which application it is.
+    (0, react_1.useEffect)(() => {
+        if (!settings)
+            return;
+        let cancelled = false;
+        const theme = document.documentElement.classList.contains('light') ? 'light' : 'dark';
+        (0, web_1.pin)(pay_1.PALETTE[theme]);
+        void (async () => {
+            try {
+                await (0, web_1.load)((settings.environment ?? 'production').toLowerCase() === 'production' ? web_1.PRODUCTION : web_1.SANDBOX);
+                const square = window.Square;
+                if (cancelled || !square)
+                    return;
+                const payments = await square.payments(settings.applicationId, settings.locationId);
+                const c = await payments.card({ style: (0, web_1.style)(pay_1.PALETTE[theme]) });
+                if (cancelled) {
+                    await c.destroy();
+                    return;
+                }
+                await c.attach('#hanzo-square');
+                card.current = c;
+                setReady(true);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setWrong(e instanceof Error ? e.message : 'The card form did not load.');
+            }
+        })();
+        return () => {
+            cancelled = true;
+            const c = card.current;
+            card.current = null;
+            setReady(false);
+            if (c)
+                void c.destroy().catch(() => undefined);
+        };
+    }, [settings]);
+    const fail = (0, react_1.useCallback)((reason, say) => {
+        track?.('checkout_failed', { reason, plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD' });
+        setWrong(say);
+        setBusy(false);
+    }, [track, plan, interval, l.seats, l.subtotal]);
+    async function submit(e) {
+        e.preventDefault();
+        if (busy || !agree || !ready || !card.current)
+            return;
+        if (!form.name.trim() || !form.address.trim()) {
+            setWrong('Enter your full name and address.');
+            return;
+        }
+        setBusy(true);
+        setWrong(null);
+        try {
+            // The catalog is the price. If it disagrees with the screen, nobody is charged.
+            const plans = await (0, api_1.call)(api, '/v1/billing/plans', { headers: scope });
+            const row = (Array.isArray(plans) ? plans : plans.plans).find((p) => p.slug === plans_1.SLUG[plan]);
+            const cents = Math.round((0, plans_1.period)(plan, interval) * 100);
+            const listed = interval === 'annual' ? row?.annualTotal : row?.price;
+            if (!row || listed !== cents) {
+                fail('catalog', 'This plan’s price is being updated, so we have not charged you. Please try again shortly.');
+                return;
+            }
+            const result = await card.current.tokenize();
+            if (result.status !== 'OK' || !result.token) {
+                fail('card', result.errors?.[0]?.message ?? 'The card could not be read. Check the details and try again.');
+                return;
+            }
+            track?.('payment_info_added', { plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [(0, plans_1.item)(plan, interval, seats)] });
+            const paid = await (0, api_1.call)(api, '/v1/billing/subscribe/card', {
+                method: 'POST',
+                headers: { ...scope, 'X-Idempotency-Key': attempt.current },
+                body: JSON.stringify({ sourceId: result.token, planId: plans_1.SLUG[plan], quantity: l.seats, ...(interval === 'annual' ? { interval: 'year' } : {}) }),
+            });
+            track?.('order_completed', { order_id: paid.invoiceId, plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [(0, plans_1.item)(plan, interval, seats)] });
+            onPaid({ orderId: paid.invoiceId });
+        }
+        catch (err) {
+            attempt.current = key();
+            fail('declined', err instanceof api_1.ApiError ? err.message : 'The payment did not go through. You have not been charged.');
+        }
+    }
+    const per = interval === 'annual' ? 'year' : 'month';
+    const label = offer.category === 'team' ? `${l.seats} ${offer.name.toLowerCase()}s` : offer.name;
+    const every = interval === 'annual' ? 'yearly' : 'monthly';
+    return ((0, jsx_runtime_1.jsx)(frame_1.Page, { site: site, title: "Configure your plan", back: back, width: 1000, start: true, children: (0, jsx_runtime_1.jsxs)(layout_1.XStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: submit, noValidate: true }), flexWrap: "wrap", gap: "$7", items: "flex-start", width: "100%", children: [(0, jsx_runtime_1.jsxs)(layout_1.YStack, { flex: 1, flexBasis: 360, minW: 0, gap: "$4", children: [(0, jsx_runtime_1.jsx)(screens_1.IntervalChoice, { interval: interval, setInterval: (i) => {
+                                track?.('plan_changed', { from: interval, to: i, field: 'interval', plan });
+                                setInterval(i);
+                            }, price: (i) => `${offer.name} ${i === 'annual' ? 'annual' : 'monthly'} · USD ${(0, plans_1.usd)((0, plans_1.lines)(plan, i, seats).subtotal)} · billed ${i === 'annual' ? 'yearly' : 'monthly'}` }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", mt: "$4", m: 0, children: "Billing information" }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-bill-name", children: "Full name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-bill-name", name: "name", autoComplete: "name", value: form.name, onChangeText: (v) => setForm((f) => ({ ...f, name: v })) })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-bill-country", children: "Country or region" }), (0, jsx_runtime_1.jsxs)(select_1.Select, { value: form.country, onValueChange: (v) => setForm((f) => ({ ...f, country: v })), children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { id: "hanzo-bill-country", "aria-label": "Country or region", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, {}) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: COUNTRIES.map(([c, n]) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: c, children: n }, c))) })] })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-bill-address", children: "Address" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-bill-address", name: "address", autoComplete: "street-address", value: form.address, onChangeText: (v) => setForm((f) => ({ ...f, address: v })) })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-bill-invoice", children: "Use a different name on invoices (optional)" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-bill-invoice", name: "invoice", value: form.invoice, onChangeText: (v) => setForm((f) => ({ ...f, invoice: v })) })] }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", mt: "$4", m: 0, children: "Payment method" }), (0, jsx_runtime_1.jsx)(layout_1.YStack, { id: "hanzo-square", "aria-label": "Card details", minH: 90 }), !ready && !wrong ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", m: 0, children: "Loading the card form\u2026" })) : null] }), (0, jsx_runtime_1.jsx)(layout_1.YStack, { flex: 1, flexBasis: 360, minW: 0, children: (0, jsx_runtime_1.jsxs)(frame_1.Panel, { label: "Order summary", children: [(0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: offer.category === 'team' ? 'Team plan' : `${offer.name} plan` }), (0, jsx_runtime_1.jsx)(frame_1.Line, { muted: true, label: `${label} ${interval === 'annual' ? 'annual' : 'monthly'}`, value: (0, plans_1.usd)(l.subtotal) }), (0, jsx_runtime_1.jsx)(frame_1.Line, { muted: true, label: "Subtotal", value: (0, plans_1.usd)(l.subtotal) }), (0, jsx_runtime_1.jsx)(frame_1.Line, { muted: true, label: "Tax", value: "Calculated at payment" }), (0, jsx_runtime_1.jsx)(frame_1.Line, { strong: true, label: "Total due today", value: (0, plans_1.usd)(l.subtotal) }), (0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$2", color: "$ink", m: 0, p: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: ["Your subscription will auto-renew on ", renews(interval), ". You will be charged ", (0, plans_1.usd)(l.subtotal), "/", per, offer.category === 'team' ? ` (${l.seats} seats × ${(0, plans_1.usd)((0, plans_1.unit)(plan, interval))}/seat/month${interval === 'annual' ? ', billed yearly' : ''})` : '', ". Cancel any time in Settings \u2192 Billing."] }), (0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "flex-start", gap: "$3", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { id: "hanzo-consent", checked: agree, onCheckedChange: (v) => setAgree(v === true), mt: "$1", "aria-label": "Agree to recurring charges" }), (0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { render: "label", htmlFor: "hanzo-consent", size: "$2", color: "$ink", flex: 1, m: 0, children: ["You agree that ", site, " will charge your card in the amount above now and on a recurring ", every, " basis until you cancel in accordance with our", ' ', (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: "terms" }), ". You can cancel at any time in your account settings."] })] }), wrong ? (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: wrong }) : null, (0, jsx_runtime_1.jsx)(screens_1.Primary, { type: "submit", disabled: !agree || !ready || busy, children: busy ? 'One moment…' : 'Subscribe' })] }) })] }) }));
+}

package/dist/onboarding/Checkout.d.ts

@@ -0,0 +1,30 @@
+import type { Track } from './hooks.js';
+import { type Interval, type PlanId } from './plans.js';
+/**
+ * THE checkout: one component for the personal path, the team path and every
+ * in-app Upgrade entry. Commerce prices the plan (POST /v1/billing/subscribe/card
+ * names a catalog plan, never an amount); the card is a Square Web Payments
+ * field mounted here, so no card data touches this page or this code.
+ *
+ * Before it charges, it reads the catalog and refuses if the catalog's price is
+ * not the one on screen, so a person is never billed a different amount than the
+ * one they agreed to.
+ */
+export interface CheckoutProps {
+    site?: string;
+    api?: string;
+    /** The IAM org the plan is bought for; omitted, the caller's own. */
+    org?: string;
+    plan: PlanId;
+    seats?: number;
+    interval: Interval;
+    setInterval: (i: Interval) => void;
+    track?: Track;
+    termsPath?: string;
+    back?: () => void;
+    onPaid: (r: {
+        orderId: string;
+    }) => void;
+}
+export declare function Checkout({ site, api, org, plan, seats, interval, setInterval, track, termsPath, back, onPaid }: CheckoutProps): import("react").JSX.Element;
+//# sourceMappingURL=Checkout.d.ts.map

package/dist/onboarding/Checkout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/onboarding/Checkout.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAgD,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAElG;;;;;;;;;GASG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,CAAC,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACzC;AA0BD,wBAAgB,QAAQ,CAAC,EAAE,IAAc,EAAE,GAAS,EAAE,GAAG,EAAE,IAAI,EAAE,KAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAoB,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,aAAa,+BA6M5J"}

package/dist/onboarding/Checkout.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PALETTE } from '@hanzo/pay';
+import { load, pin, PRODUCTION, SANDBOX, style } from '@hanzo/pay/web';
+import { Checkbox } from '../backends/gui/checkbox.js';
+import { Field, FieldError, FieldLabel } from '../backends/gui/field.js';
+import { Input } from '../backends/gui/input.js';
+import { Anchor, Heading, Paragraph, XStack, YStack } from '../backends/gui/layout.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../backends/gui/select.js';
+import { ApiError, API, call } from './api.js';
+import { Line, Page, Panel } from './frame.js';
+import { IntervalChoice, Primary } from './screens.js';
+import { item, lines, OFFERS, period, SLUG, unit, usd } from './plans.js';
+const COUNTRIES = [
+    ['US', 'United States'], ['CA', 'Canada'], ['GB', 'United Kingdom'], ['AU', 'Australia'], ['DE', 'Germany'], ['FR', 'France'], ['ES', 'Spain'], ['IT', 'Italy'], ['NL', 'Netherlands'], ['SE', 'Sweden'], ['IE', 'Ireland'], ['CH', 'Switzerland'], ['JP', 'Japan'], ['SG', 'Singapore'], ['IN', 'India'], ['BR', 'Brazil'], ['MX', 'Mexico'], ['NZ', 'New Zealand'], ['ZA', 'South Africa'], ['AE', 'United Arab Emirates'],
+];
+const key = () => (typeof crypto !== 'undefined' && 'randomUUID' in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`);
+const renews = (interval) => {
+    const d = new Date();
+    if (interval === 'annual')
+        d.setFullYear(d.getFullYear() + 1);
+    else
+        d.setMonth(d.getMonth() + 1);
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'numeric', day: 'numeric' });
+};
+export function Checkout({ site = 'Hanzo', api = API, org, plan, seats = 1, interval, setInterval, track, termsPath = '/terms', back, onPaid }) {
+    const offer = OFFERS[plan];
+    const l = useMemo(() => lines(plan, interval, seats), [plan, interval, seats]);
+    const scope = useMemo(() => (org ? { 'X-Org-Id': org } : undefined), [org]);
+    const [settings, setSettings] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [wrong, setWrong] = useState(null);
+    const [agree, setAgree] = useState(false);
+    const [form, setForm] = useState({ name: '', country: 'US', address: '', invoice: '' });
+    const card = useRef(null);
+    const attempt = useRef(key());
+    const started = useRef(false);
+    // The billing form is shown with a total: checkout has started.
+    useEffect(() => {
+        if (started.current)
+            return;
+        started.current = true;
+        track?.('plan_selected', { plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [item(plan, interval, seats)] });
+        track?.('checkout_started', { plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [item(plan, interval, seats)] });
+        // Once per mount.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        let live = true;
+        call(api, '/v1/billing/settings', { headers: scope })
+            .then((s) => live && setSettings(s))
+            .catch((e) => live && setWrong(e instanceof Error ? e.message : 'Payments are not available right now.'));
+        return () => {
+            live = false;
+        };
+    }, [api, scope]);
+    // The Square card field, drawn once the settings say which application it is.
+    useEffect(() => {
+        if (!settings)
+            return;
+        let cancelled = false;
+        const theme = document.documentElement.classList.contains('light') ? 'light' : 'dark';
+        pin(PALETTE[theme]);
+        void (async () => {
+            try {
+                await load((settings.environment ?? 'production').toLowerCase() === 'production' ? PRODUCTION : SANDBOX);
+                const square = window.Square;
+                if (cancelled || !square)
+                    return;
+                const payments = await square.payments(settings.applicationId, settings.locationId);
+                const c = await payments.card({ style: style(PALETTE[theme]) });
+                if (cancelled) {
+                    await c.destroy();
+                    return;
+                }
+                await c.attach('#hanzo-square');
+                card.current = c;
+                setReady(true);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setWrong(e instanceof Error ? e.message : 'The card form did not load.');
+            }
+        })();
+        return () => {
+            cancelled = true;
+            const c = card.current;
+            card.current = null;
+            setReady(false);
+            if (c)
+                void c.destroy().catch(() => undefined);
+        };
+    }, [settings]);
+    const fail = useCallback((reason, say) => {
+        track?.('checkout_failed', { reason, plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD' });
+        setWrong(say);
+        setBusy(false);
+    }, [track, plan, interval, l.seats, l.subtotal]);
+    async function submit(e) {
+        e.preventDefault();
+        if (busy || !agree || !ready || !card.current)
+            return;
+        if (!form.name.trim() || !form.address.trim()) {
+            setWrong('Enter your full name and address.');
+            return;
+        }
+        setBusy(true);
+        setWrong(null);
+        try {
+            // The catalog is the price. If it disagrees with the screen, nobody is charged.
+            const plans = await call(api, '/v1/billing/plans', { headers: scope });
+            const row = (Array.isArray(plans) ? plans : plans.plans).find((p) => p.slug === SLUG[plan]);
+            const cents = Math.round(period(plan, interval) * 100);
+            const listed = interval === 'annual' ? row?.annualTotal : row?.price;
+            if (!row || listed !== cents) {
+                fail('catalog', 'This plan’s price is being updated, so we have not charged you. Please try again shortly.');
+                return;
+            }
+            const result = await card.current.tokenize();
+            if (result.status !== 'OK' || !result.token) {
+                fail('card', result.errors?.[0]?.message ?? 'The card could not be read. Check the details and try again.');
+                return;
+            }
+            track?.('payment_info_added', { plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [item(plan, interval, seats)] });
+            const paid = await call(api, '/v1/billing/subscribe/card', {
+                method: 'POST',
+                headers: { ...scope, 'X-Idempotency-Key': attempt.current },
+                body: JSON.stringify({ sourceId: result.token, planId: SLUG[plan], quantity: l.seats, ...(interval === 'annual' ? { interval: 'year' } : {}) }),
+            });
+            track?.('order_completed', { order_id: paid.invoiceId, plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [item(plan, interval, seats)] });
+            onPaid({ orderId: paid.invoiceId });
+        }
+        catch (err) {
+            attempt.current = key();
+            fail('declined', err instanceof ApiError ? err.message : 'The payment did not go through. You have not been charged.');
+        }
+    }
+    const per = interval === 'annual' ? 'year' : 'month';
+    const label = offer.category === 'team' ? `${l.seats} ${offer.name.toLowerCase()}s` : offer.name;
+    const every = interval === 'annual' ? 'yearly' : 'monthly';
+    return (_jsx(Page, { site: site, title: "Configure your plan", back: back, width: 1000, start: true, children: _jsxs(XStack, { render: _jsx("form", { onSubmit: submit, noValidate: true }), flexWrap: "wrap", gap: "$7", items: "flex-start", width: "100%", children: [_jsxs(YStack, { flex: 1, flexBasis: 360, minW: 0, gap: "$4", children: [_jsx(IntervalChoice, { interval: interval, setInterval: (i) => {
+                                track?.('plan_changed', { from: interval, to: i, field: 'interval', plan });
+                                setInterval(i);
+                            }, price: (i) => `${offer.name} ${i === 'annual' ? 'annual' : 'monthly'} · USD ${usd(lines(plan, i, seats).subtotal)} · billed ${i === 'annual' ? 'yearly' : 'monthly'}` }), _jsx(Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", mt: "$4", m: 0, children: "Billing information" }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-bill-name", children: "Full name" }), _jsx(Input, { id: "hanzo-bill-name", name: "name", autoComplete: "name", value: form.name, onChangeText: (v) => setForm((f) => ({ ...f, name: v })) })] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-bill-country", children: "Country or region" }), _jsxs(Select, { value: form.country, onValueChange: (v) => setForm((f) => ({ ...f, country: v })), children: [_jsx(SelectTrigger, { id: "hanzo-bill-country", "aria-label": "Country or region", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: COUNTRIES.map(([c, n]) => (_jsx(SelectItem, { value: c, children: n }, c))) })] })] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-bill-address", children: "Address" }), _jsx(Input, { id: "hanzo-bill-address", name: "address", autoComplete: "street-address", value: form.address, onChangeText: (v) => setForm((f) => ({ ...f, address: v })) })] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-bill-invoice", children: "Use a different name on invoices (optional)" }), _jsx(Input, { id: "hanzo-bill-invoice", name: "invoice", value: form.invoice, onChangeText: (v) => setForm((f) => ({ ...f, invoice: v })) })] }), _jsx(Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", mt: "$4", m: 0, children: "Payment method" }), _jsx(YStack, { id: "hanzo-square", "aria-label": "Card details", minH: 90 }), !ready && !wrong ? (_jsx(Paragraph, { size: "$1", color: "$quiet", m: 0, children: "Loading the card form\u2026" })) : null] }), _jsx(YStack, { flex: 1, flexBasis: 360, minW: 0, children: _jsxs(Panel, { label: "Order summary", children: [_jsx(Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: offer.category === 'team' ? 'Team plan' : `${offer.name} plan` }), _jsx(Line, { muted: true, label: `${label} ${interval === 'annual' ? 'annual' : 'monthly'}`, value: usd(l.subtotal) }), _jsx(Line, { muted: true, label: "Subtotal", value: usd(l.subtotal) }), _jsx(Line, { muted: true, label: "Tax", value: "Calculated at payment" }), _jsx(Line, { strong: true, label: "Total due today", value: usd(l.subtotal) }), _jsxs(Paragraph, { size: "$2", color: "$ink", m: 0, p: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: ["Your subscription will auto-renew on ", renews(interval), ". You will be charged ", usd(l.subtotal), "/", per, offer.category === 'team' ? ` (${l.seats} seats × ${usd(unit(plan, interval))}/seat/month${interval === 'annual' ? ', billed yearly' : ''})` : '', ". Cancel any time in Settings \u2192 Billing."] }), _jsxs(XStack, { items: "flex-start", gap: "$3", children: [_jsx(Checkbox, { id: "hanzo-consent", checked: agree, onCheckedChange: (v) => setAgree(v === true), mt: "$1", "aria-label": "Agree to recurring charges" }), _jsxs(Paragraph, { render: "label", htmlFor: "hanzo-consent", size: "$2", color: "$ink", flex: 1, m: 0, children: ["You agree that ", site, " will charge your card in the amount above now and on a recurring ", every, " basis until you cancel in accordance with our", ' ', _jsx(Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: "terms" }), ". You can cancel at any time in your account settings."] })] }), wrong ? _jsx(FieldError, { children: wrong }) : null, _jsx(Primary, { type: "submit", disabled: !agree || !ready || busy, children: busy ? 'One moment…' : 'Subscribe' })] }) })] }) }));
+}
+//# sourceMappingURL=Checkout.js.map