@hanzo/ui 8.29.45 → 8.30.3

package/dist/onboarding/ChatOnboarding.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatOnboarding = ChatOnboarding;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("@hanzo/i18n/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");
@@ -13,9 +14,9 @@ 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 screens_1 = require("./screens.cjs");
 const state_1 = require("./state.cjs");
 const ICONS = {
     binoculars: lucide_icons_2_1.Binoculars,
@@ -37,6 +38,7 @@ const ICONS = {
     slides: lucide_icons_2_1.Presentation,
 };
 function ChatOnboarding({ site = 'Hanzo', api = api_1.API, track, onDone, privacyPath = '/settings/privacy', safeguards = false }) {
+    const { t } = (0, react_2.useI18n)();
     const session = (0, hooks_1.useSession)(api);
     const [role, setRole] = (0, react_1.useState)('');
     const [name, setName] = (0, react_1.useState)('');
@@ -55,13 +57,13 @@ function ChatOnboarding({ site = 'Hanzo', api = api_1.API, track, onDone, privac
     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.EyeOff, { 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.HeartHandshake, { 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 () => {
+        return ((0, jsx_runtime_1.jsxs)(frame_1.Page, { site: site, title: t('Before your first chat'), lede: t('A few things to know, plus one setting to review'), center: true, width: 512, children: [(0, jsx_runtime_1.jsxs)(frame_1.Panel, { label: t('Before your first chat'), children: [(0, jsx_runtime_1.jsxs)(Row, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.EyeOff, { size: 20 }), children: [(0, jsx_runtime_1.jsx)("b", { children: t('Ad-free chats:') }), ` ${t('We won’t show you ads or let advertisers influence what {site} says.', { site })}`] }), safeguards ? ((0, jsx_runtime_1.jsxs)(Row, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.HeartHandshake, { size: 20 }), children: [(0, jsx_runtime_1.jsx)("b", { children: t('Built to help, not harm:') }), ` ${t('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": t('Help improve our AI models') }), children: [(0, jsx_runtime_1.jsx)("b", { children: t('Help improve our AI models:') }), ` ${t('Allow the use of your chats and coding sessions to train and improve Zen models.')} ${t('Change anytime in privacy settings.')} `, (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: t('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" })] }));
+                    }, children: t('Continue') })] }));
     }
     if (at === 'name') {
         const submit = async (e) => {
@@ -77,30 +79,33 @@ function ChatOnboarding({ site = 'Hanzo', api = api_1.API, track, onDone, privac
                 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" })] }) }));
+        return ((0, jsx_runtime_1.jsx)(frame_1.Page, { site: site, title: t('What’s your name?'), lede: t('So {site} knows what to call you.', { site }), 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": t('Your name'), value: name, onChangeText: setName, placeholder: t('Your name'), height: 48, autoFocus: true }) }), (0, jsx_runtime_1.jsx)(screens_1.Primary, { type: "submit", disabled: !name.trim() || busy, children: t('Continue') })] }) }));
     }
     const chosen = roles_1.ROLES.find((r) => r.role === role);
     const pick = async (prompt) => {
         if (busy || !chosen)
             return;
         setBusy(true);
-        track?.('usage_selected', { use: session.progress.use ?? 'personal', role: chosen.role });
+        track?.('usage_selected', {
+            use: session.progress.use ?? 'personal',
+            role: chosen.role,
+        });
         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) => {
+    return ((0, jsx_runtime_1.jsxs)(frame_1.Page, { site: site, title: t(roles_1.ROLES_TITLE), lede: t(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) => {
+                }, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { "aria-label": t('Your role'), height: 48, children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: t(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: t(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));
+                                void pick(t(p.prompt));
+                            }, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 20 }), t(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] }));
+                        }, children: t(roles_1.OWN_TOPIC) })] })) : null] }));
 }
 /** One line of the notice: a mark or a switch, then the words. */
 function Row({ icon, children }) {

package/dist/onboarding/ChatOnboarding.d.ts

@@ -6,7 +6,9 @@ import { type Track } from './hooks.js';
  * 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.
+ * prompt, or nothing for an empty chat. Its words are the reader's language
+ * (@hanzo/i18n `t`); a starter's prompt is the one in the words pressed, while
+ * the role it saves and the events it sends stay in English.
  */
 export interface ChatOnboardingProps {
     site?: string;

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

@@ -1 +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,+BAuJtJ"}
+{"version":3,"file":"ChatOnboarding.d.ts","sourceRoot":"","sources":["../../src/onboarding/ChatOnboarding.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAKhD;;;;;;;;;;GAUG;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,+BA8JtJ"}

package/dist/onboarding/ChatOnboarding.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { useI18n } from '@hanzo/i18n/react';
 import { Binoculars, Calendar, ChartLine, Clock, Code, Dna, EyeOff, FileText, Gavel, GraduationCap, HeartHandshake, 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';
@@ -10,9 +11,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 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 { Primary } from './screens.js';
 import { chatStep } from './state.js';
 const ICONS = {
     binoculars: Binoculars,
@@ -34,6 +35,7 @@ const ICONS = {
     slides: Presentation,
 };
 export function ChatOnboarding({ site = 'Hanzo', api = API, track, onDone, privacyPath = '/settings/privacy', safeguards = false }) {
+    const { t } = useI18n();
     const session = useSession(api);
     const [role, setRole] = useState('');
     const [name, setName] = useState('');
@@ -52,13 +54,13 @@ export function ChatOnboarding({ site = 'Hanzo', api = API, track, onDone, priva
     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(EyeOff, { 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(HeartHandshake, { 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 () => {
+        return (_jsxs(Page, { site: site, title: t('Before your first chat'), lede: t('A few things to know, plus one setting to review'), center: true, width: 512, children: [_jsxs(Panel, { label: t('Before your first chat'), children: [_jsxs(Row, { icon: _jsx(EyeOff, { size: 20 }), children: [_jsx("b", { children: t('Ad-free chats:') }), ` ${t('We won’t show you ads or let advertisers influence what {site} says.', { site })}`] }), safeguards ? (_jsxs(Row, { icon: _jsx(HeartHandshake, { size: 20 }), children: [_jsx("b", { children: t('Built to help, not harm:') }), ` ${t('Automated safeguards protect your chats from violent, abusive, or deceptive content.')}`] })) : null, _jsxs(Row, { icon: _jsx(Switch, { checked: train, onCheckedChange: setTrain, "aria-label": t('Help improve our AI models') }), children: [_jsx("b", { children: t('Help improve our AI models:') }), ` ${t('Allow the use of your chats and coding sessions to train and improve Zen models.')} ${t('Change anytime in privacy settings.')} `, _jsx(Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: t('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" })] }));
+                    }, children: t('Continue') })] }));
     }
     if (at === 'name') {
         const submit = async (e) => {
@@ -74,30 +76,33 @@ export function ChatOnboarding({ site = 'Hanzo', api = API, track, onDone, priva
                 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" })] }) }));
+        return (_jsx(Page, { site: site, title: t('What’s your name?'), lede: t('So {site} knows what to call you.', { site }), 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": t('Your name'), value: name, onChangeText: setName, placeholder: t('Your name'), height: 48, autoFocus: true }) }), _jsx(Primary, { type: "submit", disabled: !name.trim() || busy, children: t('Continue') })] }) }));
     }
     const chosen = ROLES.find((r) => r.role === role);
     const pick = async (prompt) => {
         if (busy || !chosen)
             return;
         setBusy(true);
-        track?.('usage_selected', { use: session.progress.use ?? 'personal', role: chosen.role });
+        track?.('usage_selected', {
+            use: session.progress.use ?? 'personal',
+            role: chosen.role,
+        });
         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) => {
+    return (_jsxs(Page, { site: site, title: t(ROLES_TITLE), lede: t(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) => {
+                }, children: [_jsx(SelectTrigger, { "aria-label": t('Your role'), height: 48, children: _jsx(SelectValue, { placeholder: t(ROLES_PLACEHOLDER) }) }), _jsx(SelectContent, { children: ROLES.map((r) => (_jsx(SelectItem, { value: r.role, children: t(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));
+                                void pick(t(p.prompt));
+                            }, children: [_jsx(Icon, { size: 20 }), t(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] }));
+                        }, children: t(OWN_TOPIC) })] })) : null] }));
 }
 /** One line of the notice: a mark or a switch, then the words. */
 function Row({ icon, children }) {

package/dist/onboarding/ChatOnboarding.js.map

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

package/dist/onboarding/Checkout.cjs

@@ -5,24 +5,25 @@ exports.Checkout = Checkout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const event_1 = require("@hanzo/event");
+const i18n_1 = require("@hanzo/i18n");
+const react_2 = require("@hanzo/i18n/react");
 const pay_1 = require("@hanzo/pay");
 const web_1 = require("@hanzo/pay/web");
+const session_1 = require("../auth/session.cjs");
 const checkbox_1 = require("../backends/gui/checkbox.cjs");
+const choice_1 = require("../backends/gui/choice.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 session_1 = require("../auth/session.cjs");
 const api_1 = require("./api.cjs");
 const attempt_1 = require("./attempt.cjs");
 const catalog_1 = require("./catalog.cjs");
 const frame_1 = require("./frame.cjs");
-const screens_1 = require("./screens.cjs");
-const choice_1 = require("../backends/gui/choice.cjs");
-const layout_2 = require("../backends/gui/layout.cjs");
 const plans_1 = require("./plans.cjs");
+const screens_1 = require("./screens.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'],
+    ['US', (0, i18n_1.phrase)('United States')], ['CA', (0, i18n_1.phrase)('Canada')], ['GB', (0, i18n_1.phrase)('United Kingdom')], ['AU', (0, i18n_1.phrase)('Australia')], ['DE', (0, i18n_1.phrase)('Germany')], ['FR', (0, i18n_1.phrase)('France')], ['ES', (0, i18n_1.phrase)('Spain')], ['IT', (0, i18n_1.phrase)('Italy')], ['NL', (0, i18n_1.phrase)('Netherlands')], ['SE', (0, i18n_1.phrase)('Sweden')], ['IE', (0, i18n_1.phrase)('Ireland')], ['CH', (0, i18n_1.phrase)('Switzerland')], ['JP', (0, i18n_1.phrase)('Japan')], ['SG', (0, i18n_1.phrase)('Singapore')], ['IN', (0, i18n_1.phrase)('India')], ['BR', (0, i18n_1.phrase)('Brazil')], ['MX', (0, i18n_1.phrase)('Mexico')], ['NZ', (0, i18n_1.phrase)('New Zealand')], ['ZA', (0, i18n_1.phrase)('South Africa')], ['AE', (0, i18n_1.phrase)('United Arab Emirates')],
 ];
 const renews = (interval) => {
     const d = new Date();
@@ -30,17 +31,23 @@ const renews = (interval) => {
         d.setFullYear(d.getFullYear() + 1);
     else
         d.setMonth(d.getMonth() + 1);
-    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'numeric', day: 'numeric' });
+    return d.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+    });
 };
 function Checkout(props) {
+    const { t } = (0, react_2.useI18n)();
     const loaded = (0, catalog_1.useCatalog)(props.api ?? api_1.API);
     if (loaded === null)
         return (0, jsx_runtime_1.jsx)(frame_1.Page, { site: props.site ?? 'Hanzo', title: "", busy: true });
     if (!loaded)
-        return (0, jsx_runtime_1.jsx)(frame_1.Page, { site: props.site ?? 'Hanzo', title: "Plans could not be loaded just now", lede: "That is ours to fix. Reload to try again.", center: true });
+        return (0, jsx_runtime_1.jsx)(frame_1.Page, { site: props.site ?? 'Hanzo', title: t('Plans could not be loaded just now'), lede: `${t('That is ours to fix.')} ${t('Reload to try again.')}`, center: true });
     return (0, jsx_runtime_1.jsx)(CheckoutForm, { ...props });
 }
 function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken, plan, seats = 1, interval, setInterval, setPlan, track, termsPath = '/terms', back, onPaid }) {
+    const { t } = (0, react_2.useI18n)();
     const o = (0, plans_1.offer)(plan);
     const l = (0, react_1.useMemo)(() => (0, plans_1.lines)(plan, interval, seats), [plan, interval, seats]);
     const activeOrg = org || (0, session_1.currentOrg)() || undefined;
@@ -52,7 +59,12 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
     const [busy, setBusy] = (0, react_1.useState)(false);
     const [wrong, setWrong] = (0, react_1.useState)(null);
     const [agree, setAgree] = (0, react_1.useState)(true);
-    const [form, setForm] = (0, react_1.useState)({ name: '', country: 'US', address: '', invoice: '' });
+    const [form, setForm] = (0, react_1.useState)({
+        name: '',
+        country: 'US',
+        address: '',
+        invoice: '',
+    });
     const card = (0, react_1.useRef)(null);
     const started = (0, react_1.useRef)(false);
     // The billing form is shown with a total: checkout has started.
@@ -60,8 +72,22 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
         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)] });
+        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
     }, []);
@@ -69,7 +95,7 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
         let live = true;
         (0, api_1.call)(api, '/v1/billing/settings', { headers: scope }, token)
             .then((s) => live && setSettings(s))
-            .catch((e) => live && setWrong(e instanceof Error ? e.message : 'Payments are not available right now.'));
+            .catch((e) => live && setWrong(e instanceof Error ? e.message : t('Payments are not available right now.')));
         return () => {
             live = false;
         };
@@ -99,7 +125,7 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
             }
             catch (e) {
                 if (!cancelled)
-                    setWrong(e instanceof Error ? e.message : 'The card form did not load.');
+                    setWrong(e instanceof Error ? e.message : t('The card form did not load.'));
             }
         })();
         return () => {
@@ -112,7 +138,14 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
         };
     }, [settings]);
     const fail = (0, react_1.useCallback)((reason, say) => {
-        track?.('checkout_failed', { reason, plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD' });
+        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]);
@@ -122,11 +155,11 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
         if (busy || !ready || !card.current)
             return;
         if (!agree) {
-            setWrong('Please agree to recurring charges to continue.');
+            setWrong(t('Please agree to recurring charges to continue.'));
             return;
         }
         if (!form.name.trim() || !form.address.trim()) {
-            setWrong('Enter your full name and address.');
+            setWrong(t('Enter your full name and address.'));
             return;
         }
         setBusy(true);
@@ -142,7 +175,7 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
             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.');
+                fail('catalog', `${t('This plan’s price is being updated, so we have not charged you.')} ${t('Please try again shortly.')}`);
                 return;
             }
             let result = await card.current.tokenize();
@@ -152,36 +185,86 @@ function CheckoutForm({ site = 'Hanzo', api = api_1.API, org, token: propToken,
             }
             if (result.status !== 'OK' || !result.token) {
                 (0, attempt_1.settle)(sale);
-                fail('card', result.errors?.[0]?.message ?? 'The card could not be read. Check the details and try again.');
+                fail('card', result.errors?.[0]?.message ?? `${t('The card could not be read.')} ${t('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)] });
+            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': (0, attempt_1.keyFor)(sale) },
                 // The visitor's choice rides the sale: cloud sends the sale to an ad platform only under it.
-                body: JSON.stringify({ sourceId: result.token, planId: plans_1.SLUG[plan], quantity: l.seats, consent: (0, event_1.renderConsent)((0, event_1.readConsent)()), ...(interval === 'annual' ? { interval: 'year' } : {}) }),
+                body: JSON.stringify({
+                    sourceId: result.token,
+                    planId: plans_1.SLUG[plan],
+                    quantity: l.seats,
+                    consent: (0, event_1.renderConsent)((0, event_1.readConsent)()),
+                    ...(interval === 'annual' ? { interval: 'year' } : {}),
+                }),
             }, token);
             (0, attempt_1.settle)(sale);
-            track?.('order_completed', { ...(paid.eventId ? { event_id: paid.eventId } : {}), order_id: paid.invoiceId || paid.subscriptionId, plan, interval, seats: l.seats, value: l.subtotal, currency: 'USD', items: [(0, plans_1.item)(plan, interval, seats)] });
+            track?.('order_completed', {
+                ...(paid.eventId ? { event_id: paid.eventId } : {}),
+                order_id: paid.invoiceId || paid.subscriptionId,
+                plan,
+                interval,
+                seats: l.seats,
+                value: l.subtotal,
+                currency: 'USD',
+                items: [(0, plans_1.item)(plan, interval, seats)],
+            });
             onPaid({ orderId: paid.invoiceId || paid.subscriptionId });
         }
         catch (err) {
             (0, attempt_1.settle)(sale);
-            fail('declined', err instanceof Error ? err.message : 'We could not confirm the payment. Check Billing before you try again.');
+            fail('declined', err instanceof Error ? err.message : `${t('We could not confirm the payment.')} ${t('Check Billing before you try again.')}`);
         }
     }
-    const per = interval === 'annual' ? 'year' : 'month';
-    const label = o.category === 'team' ? `${l.seats} ${o.name.toLowerCase()}s` : o.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: [setPlan && plan.startsWith('max') ? ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { gap: "$3", width: "100%", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", m: 0, children: "Plan" }), (0, jsx_runtime_1.jsx)(frame_1.IntervalToggle, { interval: interval, onChange: (i) => {
-                                                track?.('plan_changed', { from: interval, to: i, field: 'interval', plan });
+    const annual = interval === 'annual';
+    const team = o.category === 'team';
+    const label = team ? (plan === 'team_premium' ? t('{n} premium seats', { n: l.seats }) : t('{n} standard seats', { n: l.seats })) : o.name;
+    const charged = (0, plans_1.usd)(l.subtotal);
+    const seat = (0, plans_1.usd)((0, plans_1.unit)(plan, interval));
+    const terms = ((0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: t('terms') }));
+    return ((0, jsx_runtime_1.jsx)(frame_1.Page, { site: site, title: t('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: [setPlan && plan.startsWith('max') ? ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { gap: "$3", width: "100%", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", m: 0, children: t('Plan') }), (0, jsx_runtime_1.jsx)(frame_1.IntervalToggle, { interval: interval, onChange: (i) => {
+                                                track?.('plan_changed', {
+                                                    from: interval,
+                                                    to: i,
+                                                    field: 'interval',
+                                                    plan,
+                                                });
                                                 setInterval(i);
-                                            }, name: o.name, save: (0, plans_1.saving)(plan) })] }), (0, jsx_runtime_1.jsx)(choice_1.ChoiceGroup, { label: "Plan", flexWrap: "wrap", children: ['max_5x', 'max_20x'].map((t) => ((0, jsx_runtime_1.jsxs)(choice_1.ChoiceCard, { selected: plan === t, onSelect: () => {
-                                            track?.('plan_changed', { from: plan, to: t, field: 'plan' });
-                                            setPlan(t);
-                                        }, flex: 1, flexBasis: 200, children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(layout_2.SizableText, { size: "$3", fontWeight: "600", color: "$ink", children: (0, plans_1.offer)(t).name }), (0, jsx_runtime_1.jsx)(choice_1.RadioCircle, { selected: plan === t })] }), (0, jsx_runtime_1.jsx)(layout_2.SizableText, { size: "$2", color: "$ink", children: `${(0, plans_1.money)((0, plans_1.unit)(t, interval))}/month${interval === 'annual' ? ' · billed yearly' : ''}` })] }, t))) })] })) : ((0, jsx_runtime_1.jsx)(screens_1.IntervalChoice, { save: (0, plans_1.saving)(plan), interval: interval, setInterval: (i) => {
-                                track?.('plan_changed', { from: interval, to: i, field: 'interval', plan });
+                                            }, name: o.name, save: (0, plans_1.saving)(plan) })] }), (0, jsx_runtime_1.jsx)(choice_1.ChoiceGroup, { label: t('Plan'), flexWrap: "wrap", children: ['max_5x', 'max_20x'].map((tier) => ((0, jsx_runtime_1.jsxs)(choice_1.ChoiceCard, { selected: plan === tier, onSelect: () => {
+                                            track?.('plan_changed', { from: plan, to: tier, field: 'plan' });
+                                            setPlan(tier);
+                                        }, flex: 1, flexBasis: 200, children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$3", fontWeight: "600", color: "$ink", children: (0, plans_1.offer)(tier).name }), (0, jsx_runtime_1.jsx)(choice_1.RadioCircle, { selected: plan === tier })] }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$ink", children: annual ? t('{price}/month · billed yearly', { price: (0, plans_1.money)((0, plans_1.unit)(tier, interval)) }) : t('{price}/month', { price: (0, plans_1.money)((0, plans_1.unit)(tier, interval)) }) })] }, tier))) })] })) : ((0, jsx_runtime_1.jsx)(screens_1.IntervalChoice, { save: (0, plans_1.saving)(plan), interval: interval, setInterval: (i) => {
+                                track?.('plan_changed', {
+                                    from: interval,
+                                    to: i,
+                                    field: 'interval',
+                                    plan,
+                                });
                                 setInterval(i);
-                            }, price: (i) => `${(0, plans_1.usd)((0, plans_1.lines)(plan, i, seats).subtotal)} / ${i === 'annual' ? 'year' : 'month'}${i === 'annual' ? ' · billed yearly' : ''}` })), (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: o.category === 'team' ? 'Team plan' : `${o.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, o.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: "button", disabled: !ready || busy, onClick: () => void submit(), onPress: () => void submit(), children: busy ? 'One moment…' : 'Subscribe' })] }) })] }) }));
+                            }, price: (i) => {
+                                const price = (0, plans_1.usd)((0, plans_1.lines)(plan, i, seats).subtotal);
+                                return i === 'annual' ? t('{price} / year · billed yearly', { price }) : t('{price} / month', { price });
+                            } })), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$4", fontWeight: "600", color: "$ink", mt: "$4", m: 0, children: t('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: t('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: t('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": t('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: t(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: t('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: t('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: t('Payment method') }), (0, jsx_runtime_1.jsx)(layout_1.YStack, { id: "hanzo-square", "aria-label": t('Card details'), minH: 90 }), !ready && !wrong ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", m: 0, children: t('Loading the card form…') })) : 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: t('Order summary'), children: [(0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: team ? t('Team plan') : t('{plan} plan', { plan: o.name }) }), (0, jsx_runtime_1.jsx)(frame_1.Line, { muted: true, label: annual ? t('{item} annual', { item: label }) : t('{item} monthly', { item: label }), value: charged }), (0, jsx_runtime_1.jsx)(frame_1.Line, { muted: true, label: t('Subtotal'), value: charged }), (0, jsx_runtime_1.jsx)(frame_1.Line, { muted: true, label: t('Tax'), value: t('Calculated at payment') }), (0, jsx_runtime_1.jsx)(frame_1.Line, { strong: true, label: t('Total due today'), value: charged }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$2", color: "$ink", m: 0, p: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: [
+                                    t('Your subscription will auto-renew on {date}.', { date: renews(interval) }),
+                                    team
+                                        ? annual
+                                            ? t('You will be charged {price}/year ({n} seats × {seat}/seat/month, billed yearly).', { price: charged, n: l.seats, seat })
+                                            : t('You will be charged {price}/month ({n} seats × {seat}/seat/month).', { price: charged, n: l.seats, seat })
+                                        : annual
+                                            ? t('You will be charged {price}/year.', { price: charged })
+                                            : t('You will be charged {price}/month.', { price: charged }),
+                                    t('Cancel any time in Settings → Billing.'),
+                                ].join(' ') }), (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": t('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: [annual
+                                                ? t('You agree that {site} will charge your card in the amount above now and on a recurring yearly basis until you cancel in accordance with our {terms}.', { site, terms })
+                                                : t('You agree that {site} will charge your card in the amount above now and on a recurring monthly basis until you cancel in accordance with our {terms}.', { site, terms }), ` ${t('You can cancel at any time in your account settings.')}`] })] }), wrong ? (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: t(wrong) }) : null, (0, jsx_runtime_1.jsx)(screens_1.Primary, { type: "button", disabled: !ready || busy, onClick: () => void submit(), onPress: () => void submit(), children: busy ? t('One moment…') : t('Subscribe') })] }) })] }) }));
 }

package/dist/onboarding/Checkout.d.ts

@@ -9,6 +9,9 @@ import { type Interval, type PlanId } from './plans.js';
  * 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.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); amounts and the renewal
+ * date are formatted as before, and the events it sends stay in English.
  */
 export interface CheckoutProps {
     site?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/onboarding/Checkout.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,EAA8D,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhH;;;;;;;;;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,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,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,8FAA8F;IAC9F,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,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;AAyBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAK5C"}
+{"version":3,"file":"Checkout.d.ts","sourceRoot":"","sources":["../../src/onboarding/Checkout.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAA8D,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAGhH;;;;;;;;;;;;GAYG;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,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,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,8FAA8F;IAC9F,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,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;AA6BD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAM5C"}