From eaf18d991576771ccbc3975a6c7a9358b0da8de9 Mon Sep 17 00:00:00 2001 From: Frank Date: Tue, 13 Jan 2026 17:51:20 -0500 Subject: wip: black --- .../app/src/routes/api/black/setup-intent.ts | 30 -- .../console/app/src/routes/auth/[...callback].ts | 41 ++ packages/console/app/src/routes/auth/authorize.ts | 12 +- packages/console/app/src/routes/auth/callback.ts | 40 -- packages/console/app/src/routes/black.css | 79 ++++ packages/console/app/src/routes/black/common.tsx | 6 +- packages/console/app/src/routes/black/index.tsx | 2 +- .../console/app/src/routes/black/subscribe.tsx | 244 ------------ .../app/src/routes/black/subscribe/[plan].tsx | 437 +++++++++++++++++++++ 9 files changed, 565 insertions(+), 326 deletions(-) delete mode 100644 packages/console/app/src/routes/api/black/setup-intent.ts create mode 100644 packages/console/app/src/routes/auth/[...callback].ts delete mode 100644 packages/console/app/src/routes/auth/callback.ts delete mode 100644 packages/console/app/src/routes/black/subscribe.tsx create mode 100644 packages/console/app/src/routes/black/subscribe/[plan].tsx (limited to 'packages/console/app/src/routes') diff --git a/packages/console/app/src/routes/api/black/setup-intent.ts b/packages/console/app/src/routes/api/black/setup-intent.ts deleted file mode 100644 index eb5571616..000000000 --- a/packages/console/app/src/routes/api/black/setup-intent.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { APIEvent } from "@solidjs/start/server" -import { Billing } from "@opencode-ai/console-core/billing.js" - -export async function POST(event: APIEvent) { - try { - const body = (await event.request.json()) as { plan: string } - const plan = body.plan - - if (!plan || !["20", "100", "200"].includes(plan)) { - return Response.json({ error: "Invalid plan" }, { status: 400 }) - } - - const amount = parseInt(plan) * 100 - - const intent = await Billing.stripe().setupIntents.create({ - payment_method_types: ["card"], - metadata: { - plan, - amount: amount.toString(), - }, - }) - - return Response.json({ - clientSecret: intent.client_secret, - }) - } catch (error) { - console.error("Error creating setup intent:", error) - return Response.json({ error: "Internal server error" }, { status: 500 }) - } -} diff --git a/packages/console/app/src/routes/auth/[...callback].ts b/packages/console/app/src/routes/auth/[...callback].ts new file mode 100644 index 000000000..36a9c5194 --- /dev/null +++ b/packages/console/app/src/routes/auth/[...callback].ts @@ -0,0 +1,41 @@ +import { redirect } from "@solidjs/router" +import type { APIEvent } from "@solidjs/start/server" +import { AuthClient } from "~/context/auth" +import { useAuthSession } from "~/context/auth" + +export async function GET(input: APIEvent) { + const url = new URL(input.request.url) + + try { + const code = url.searchParams.get("code") + if (!code) throw new Error("No code found") + const result = await AuthClient.exchange(code, `${url.origin}${url.pathname}`) + if (result.err) throw new Error(result.err.message) + const decoded = AuthClient.decode(result.tokens.access, {} as any) + if (decoded.err) throw new Error(decoded.err.message) + const session = await useAuthSession() + const id = decoded.subject.properties.accountID + await session.update((value) => { + return { + ...value, + account: { + ...value.account, + [id]: { + id, + email: decoded.subject.properties.email, + }, + }, + current: id, + } + }) + return redirect(url.pathname === "/auth/callback" ? "/auth" : url.pathname.replace("/auth/callback", "")) + } catch (e: any) { + return new Response( + JSON.stringify({ + error: e.message, + cause: Object.fromEntries(url.searchParams.entries()), + }), + { status: 500 }, + ) + } +} diff --git a/packages/console/app/src/routes/auth/authorize.ts b/packages/console/app/src/routes/auth/authorize.ts index 6be94b146..0f0651ae3 100644 --- a/packages/console/app/src/routes/auth/authorize.ts +++ b/packages/console/app/src/routes/auth/authorize.ts @@ -3,12 +3,8 @@ import { AuthClient } from "~/context/auth" export async function GET(input: APIEvent) { const url = new URL(input.request.url) - // TODO - // input.request.url http://localhost:3001/auth/authorize?continue=/black/subscribe - const result = await AuthClient.authorize( - new URL("/callback/subscribe?foo=bar", input.request.url).toString(), - "code", - ) - // result.url https://auth.frank.dev.opencode.ai/authorize?client_id=app&redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fauth%2Fcallback&response_type=code&state=0d3fc834-bcbc-42dc-83ab-c25c2c43c7e3 - return Response.redirect(result.url + "&continue=" + url.searchParams.get("continue"), 302) + const cont = url.searchParams.get("continue") ?? "" + const callbackUrl = new URL(`./callback${cont}`, input.request.url) + const result = await AuthClient.authorize(callbackUrl.toString(), "code") + return Response.redirect(result.url, 302) } diff --git a/packages/console/app/src/routes/auth/callback.ts b/packages/console/app/src/routes/auth/callback.ts deleted file mode 100644 index 9b7296791..000000000 --- a/packages/console/app/src/routes/auth/callback.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { redirect } from "@solidjs/router" -import type { APIEvent } from "@solidjs/start/server" -import { AuthClient } from "~/context/auth" -import { useAuthSession } from "~/context/auth" - -export async function GET(input: APIEvent) { - const url = new URL(input.request.url) - try { - const code = url.searchParams.get("code") - if (!code) throw new Error("No code found") - const result = await AuthClient.exchange(code, `${url.origin}${url.pathname}`) - if (result.err) throw new Error(result.err.message) - const decoded = AuthClient.decode(result.tokens.access, {} as any) - if (decoded.err) throw new Error(decoded.err.message) - const session = await useAuthSession() - const id = decoded.subject.properties.accountID - await session.update((value) => { - return { - ...value, - account: { - ...value.account, - [id]: { - id, - email: decoded.subject.properties.email, - }, - }, - current: id, - } - }) - return redirect("/auth") - } catch (e: any) { - return new Response( - JSON.stringify({ - error: e.message, - cause: Object.fromEntries(url.searchParams.entries()), - }), - { status: 500 }, - ) - } -} diff --git a/packages/console/app/src/routes/black.css b/packages/console/app/src/routes/black.css index dfb188ed0..72bf7a657 100644 --- a/packages/console/app/src/routes/black.css +++ b/packages/console/app/src/routes/black.css @@ -460,6 +460,39 @@ font-weight: 400; } + [data-slot="tax-id-section"] { + display: flex; + flex-direction: column; + gap: 8px; + + [data-slot="label"] { + color: rgba(255, 255, 255, 0.59); + font-size: 14px; + } + + [data-slot="input"] { + width: 100%; + height: 44px; + padding: 0 12px; + background: #1a1a1a; + border: 1px solid rgba(255, 255, 255, 0.17); + border-radius: 4px; + color: #ffffff; + font-family: var(--font-mono); + font-size: 14px; + outline: none; + transition: border-color 0.15s ease; + + &::placeholder { + color: rgba(255, 255, 255, 0.39); + } + + &:focus { + border-color: rgba(255, 255, 255, 0.35); + } + } + } + [data-slot="checkout-form"] { display: flex; flex-direction: column; @@ -500,6 +533,52 @@ text-align: center; } + [data-slot="success"] { + display: flex; + flex-direction: column; + gap: 24px; + + [data-slot="title"] { + color: rgba(255, 255, 255, 0.92); + font-size: 18px; + font-weight: 400; + margin: 0; + } + + [data-slot="details"] { + display: flex; + flex-direction: column; + gap: 16px; + + > div { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 16px; + } + + dt { + color: rgba(255, 255, 255, 0.59); + font-size: 14px; + font-weight: 400; + } + + dd { + color: rgba(255, 255, 255, 0.92); + font-size: 14px; + font-weight: 400; + margin: 0; + text-align: right; + } + } + + [data-slot="charge-notice"] { + color: #d4a500; + font-size: 14px; + text-align: left; + } + } + [data-slot="loading"] { display: flex; justify-content: center; diff --git a/packages/console/app/src/routes/black/common.tsx b/packages/console/app/src/routes/black/common.tsx index c1184bd20..dd643bbc5 100644 --- a/packages/console/app/src/routes/black/common.tsx +++ b/packages/console/app/src/routes/black/common.tsx @@ -1,9 +1,9 @@ import { Match, Switch } from "solid-js" export const plans = [ - { id: "20", amount: 20, multiplier: null }, - { id: "100", amount: 100, multiplier: "6x more usage than Black 20" }, - { id: "200", amount: 200, multiplier: "21x more usage than Black 20" }, + { id: "20", multiplier: null }, + { id: "100", multiplier: "6x more usage than Black 20" }, + { id: "200", multiplier: "21x more usage than Black 20" }, ] as const export type Plan = (typeof plans)[number] diff --git a/packages/console/app/src/routes/black/index.tsx b/packages/console/app/src/routes/black/index.tsx index 2b452c812..57d27a793 100644 --- a/packages/console/app/src/routes/black/index.tsx +++ b/packages/console/app/src/routes/black/index.tsx @@ -62,7 +62,7 @@ export default function Black() { - + Continue diff --git a/packages/console/app/src/routes/black/subscribe.tsx b/packages/console/app/src/routes/black/subscribe.tsx deleted file mode 100644 index 00ce19ef6..000000000 --- a/packages/console/app/src/routes/black/subscribe.tsx +++ /dev/null @@ -1,244 +0,0 @@ -import { A, createAsync, query, redirect, useSearchParams } from "@solidjs/router" -import { Title } from "@solidjs/meta" -import { createEffect, createSignal, For, onMount, Show } from "solid-js" -import { loadStripe } from "@stripe/stripe-js" -import { Elements, PaymentElement, useStripe, useElements } from "solid-stripe" -import { config } from "~/config" -import { PlanIcon, plans } from "./common" -import { getActor } from "~/context/auth" -import { withActor } from "~/context/auth.withActor" -import { Actor } from "@opencode-ai/console-core/actor.js" -import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js" -import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js" -import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js" -import { createList } from "solid-list" -import { Modal } from "~/component/modal" - -const plansMap = Object.fromEntries(plans.map((p) => [p.id, p])) as Record - -const getWorkspaces = query(async () => { - "use server" - const actor = await getActor() - if (actor.type === "public") throw redirect("/auth/authorize?continue=/black/subscribe") - return withActor(async () => { - return Database.use((tx) => - tx - .select({ - id: WorkspaceTable.id, - name: WorkspaceTable.name, - slug: WorkspaceTable.slug, - }) - .from(UserTable) - .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id)) - .where( - and( - eq(UserTable.accountID, Actor.account()), - isNull(WorkspaceTable.timeDeleted), - isNull(UserTable.timeDeleted), - ), - ), - ) - }) -}, "black.subscribe.workspaces") - -function CheckoutForm(props: { plan: string; amount: number }) { - const stripe = useStripe() - const elements = useElements() - const [error, setError] = createSignal(null) - const [loading, setLoading] = createSignal(false) - - const handleSubmit = async (e: Event) => { - e.preventDefault() - if (!stripe() || !elements()) return - - setLoading(true) - setError(null) - - const result = await elements()!.submit() - if (result.error) { - setError(result.error.message ?? "An error occurred") - setLoading(false) - return - } - - const { error: confirmError } = await stripe()!.confirmSetup({ - elements: elements()!, - confirmParams: { - return_url: `${window.location.origin}/black/success?plan=${props.plan}`, - }, - }) - - if (confirmError) { - setError(confirmError.message ?? "An error occurred") - } - setLoading(false) - } - - return ( -
- - -

{error()}

- - -

You will only be charged when your subscription is activated

- - ) -} - -export default function BlackSubscribe() { - const workspaces = createAsync(() => getWorkspaces()) - const [selectedWorkspace, setSelectedWorkspace] = createSignal(null) - - const [params] = useSearchParams() - const plan = (params.plan as string) || "200" - const planData = plansMap[plan] || plansMap["200"] - - const [clientSecret, setClientSecret] = createSignal(null) - const [stripePromise] = createSignal(loadStripe(config.stripe.publishableKey)) - - // Auto-select if only one workspace - createEffect(() => { - const ws = workspaces() - if (ws?.length === 1 && !selectedWorkspace()) { - setSelectedWorkspace(ws[0].id) - } - }) - - // Keyboard navigation for workspace picker - const { active, setActive, onKeyDown } = createList({ - items: () => workspaces()?.map((w) => w.id) ?? [], - initialActive: null, - }) - - const handleSelectWorkspace = (id: string) => { - setSelectedWorkspace(id) - } - - onMount(async () => { - const response = await fetch("/api/black/setup-intent", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ plan }), - }) - const data = await response.json() - if (data.clientSecret) { - setClientSecret(data.clientSecret) - } - }) - - let listRef: HTMLUListElement | undefined - - // Show workspace picker if multiple workspaces and none selected - const showWorkspacePicker = () => { - const ws = workspaces() - return ws && ws.length > 1 && !selectedWorkspace() - } - - return ( - <> - Subscribe to OpenCode Black -
-
-
-

Subscribe to OpenCode Black

-
- -
-

- ${planData.amount} per month - - {planData.multiplier} - -

-
-
-

Add payment method

- -

Loading payment form...

-
- } - > - - - - -
- - {/* Workspace picker modal */} - {}} title="Select a workspace for this plan"> -
-
    { - if (e.key === "Enter" && active()) { - handleSelectWorkspace(active()!) - } else { - onKeyDown(e) - } - }} - > - - {(workspace) => ( -
  • setActive(workspace.id)} - onClick={() => handleSelectWorkspace(workspace.id)} - > - [*] - {workspace.name || workspace.slug} -
    • - )} -     -
-
- -

- Prices shown don't include applicable tax · Terms of Service -

-
- - ) -} diff --git a/packages/console/app/src/routes/black/subscribe/[plan].tsx b/packages/console/app/src/routes/black/subscribe/[plan].tsx new file mode 100644 index 000000000..e0992a1e2 --- /dev/null +++ b/packages/console/app/src/routes/black/subscribe/[plan].tsx @@ -0,0 +1,437 @@ +import { A, action, createAsync, query, redirect, useParams } from "@solidjs/router" +import { Title } from "@solidjs/meta" +import { createEffect, createSignal, For, Show } from "solid-js" +import { type Stripe, type PaymentMethod, loadStripe } from "@stripe/stripe-js" +import { Elements, PaymentElement, useStripe, useElements, AddressElement } from "solid-stripe" +import { PlanIcon, plans } from "../common" +import { getActor, useAuthSession } from "~/context/auth" +import { withActor } from "~/context/auth.withActor" +import { Actor } from "@opencode-ai/console-core/actor.js" +import { and, Database, eq, isNull } from "@opencode-ai/console-core/drizzle/index.js" +import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.js" +import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js" +import { createList } from "solid-list" +import { Modal } from "~/component/modal" +import { BillingTable } from "@opencode-ai/console-core/schema/billing.sql.js" +import { Billing } from "@opencode-ai/console-core/billing.js" + +const plansMap = Object.fromEntries(plans.map((p) => [p.id, p])) as Record +const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY!) + +const getWorkspaces = query(async () => { + "use server" + const actor = await getActor() + if (actor.type === "public") throw redirect("/auth/authorize?continue=/black/subscribe") + return withActor(async () => { + return Database.use((tx) => + tx + .select({ + id: WorkspaceTable.id, + name: WorkspaceTable.name, + slug: WorkspaceTable.slug, + billing: { + customerID: BillingTable.customerID, + paymentMethodID: BillingTable.paymentMethodID, + paymentMethodType: BillingTable.paymentMethodType, + paymentMethodLast4: BillingTable.paymentMethodLast4, + }, + }) + .from(UserTable) + .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id)) + .innerJoin(BillingTable, eq(WorkspaceTable.id, BillingTable.workspaceID)) + .where( + and( + eq(UserTable.accountID, Actor.account()), + isNull(WorkspaceTable.timeDeleted), + isNull(UserTable.timeDeleted), + ), + ), + ) + }) +}, "black.subscribe.workspaces") + +const createSetupIntent = action(async (input: { plan: string; workspaceID: string }) => { + "use server" + const { plan, workspaceID } = input + + if (!plan || !["20", "100", "200"].includes(plan)) { + return { error: "Invalid plan" } + } + + if (!workspaceID) { + return { error: "Workspace ID is required" } + } + + const actor = await getActor() + if (actor.type === "public") { + return { error: "Unauthorized" } + } + + const session = await useAuthSession() + const account = session.data.account?.[session.data.current ?? ""] + const email = account?.email + + const stripe = Billing.stripe() + + let customerID = await Database.use((tx) => + tx + .select({ customerID: BillingTable.customerID }) + .from(BillingTable) + .where(eq(BillingTable.workspaceID, workspaceID)) + .then((rows) => rows[0].customerID), + ) + if (!customerID) { + const customer = await stripe.customers.create({ + email, + metadata: { + workspaceID, + }, + }) + customerID = customer.id + } + + const intent = await stripe.setupIntents.create({ + customer: customerID, + payment_method_types: ["card"], + metadata: { + workspaceID, + }, + }) + + return { clientSecret: intent.client_secret } +}) + +const bookSubscription = action( + async (input: { + workspaceID: string + paymentMethodID: string + paymentMethodType: string + paymentMethodLast4?: string + }) => { + "use server" + const actor = await getActor() + if (actor.type === "public") { + return { error: "Unauthorized" } + } + + await Database.use((tx) => + tx + .update(BillingTable) + .set({ + paymentMethodID: input.paymentMethodID, + paymentMethodType: input.paymentMethodType, + paymentMethodLast4: input.paymentMethodLast4, + timeSubscriptionBooked: new Date(), + }) + .where(eq(BillingTable.workspaceID, input.workspaceID)), + ) + + return { success: true } + }, +) + +interface SuccessData { + plan: string + paymentMethodType: string + paymentMethodLast4?: string +} + +function PaymentSuccess(props: SuccessData) { + return ( +
+

You're on the OpenCode Black waitlist

+
+
+
Subscription plan
+
OpenCode Black {props.plan}
+
+
+
Amount
+
${props.plan} per month
+
+
+
Payment method
+
+ {props.paymentMethodType}}> + + {props.paymentMethodType} - {props.paymentMethodLast4} + + +
+
+
+
Date joined
+
{new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
+
+
+

Your card will be charged when your subscription is activated

+
+ ) +} + +function PaymentForm(props: { plan: string; workspaceID: string; onSuccess: (data: SuccessData) => void }) { + const stripe = useStripe() + const elements = useElements() + const [error, setError] = createSignal(null) + const [loading, setLoading] = createSignal(false) + + const handleSubmit = async (e: Event) => { + e.preventDefault() + if (!stripe() || !elements()) return + + setLoading(true) + setError(null) + + const result = await elements()!.submit() + if (result.error) { + setError(result.error.message ?? "An error occurred") + setLoading(false) + return + } + + const { error: confirmError, setupIntent } = await stripe()!.confirmSetup({ + elements: elements()!, + confirmParams: { + expand: ["setup_intent.payment_method"], + payment_method_data: { + allow_redisplay: "always", + }, + }, + redirect: "if_required", + }) + + if (confirmError) { + setError(confirmError.message ?? "An error occurred") + setLoading(false) + return + } + + if (setupIntent?.status === "succeeded") { + const pm = setupIntent.payment_method as PaymentMethod + + await bookSubscription({ + workspaceID: props.workspaceID, + paymentMethodID: pm.id, + paymentMethodType: pm.type, + paymentMethodLast4: pm.card?.last4, + }) + + props.onSuccess({ + plan: props.plan, + paymentMethodType: pm.type, + paymentMethodLast4: pm.card?.last4, + }) + } + + setLoading(false) + } + + return ( +
+ + + +

{error()}

+ + +

You will only be charged when your subscription is activated

+ + ) +} + +export default function BlackSubscribe() { + const workspaces = createAsync(() => getWorkspaces()) + const [selectedWorkspace, setSelectedWorkspace] = createSignal(null) + const [success, setSuccess] = createSignal(null) + + const params = useParams() + const plan = params.plan || "200" + const planData = plansMap[plan] || plansMap["200"] + + const [clientSecret, setClientSecret] = createSignal(null) + const [setupError, setSetupError] = createSignal(null) + const [stripe, setStripe] = createSignal(null) + + // Resolve stripe promise once + createEffect(() => { + stripePromise.then((s) => { + if (s) setStripe(s) + }) + }) + + // Auto-select if only one workspace + createEffect(() => { + const ws = workspaces() + if (ws?.length === 1 && !selectedWorkspace()) { + setSelectedWorkspace(ws[0].id) + } + }) + + // Fetch setup intent when workspace is selected (unless workspace already has payment method) + createEffect(() => { + const id = selectedWorkspace() + if (!id) return + + const ws = workspaces()?.find((w) => w.id === id) + if (ws?.billing.paymentMethodID) { + setSuccess({ + plan, + paymentMethodType: ws.billing.paymentMethodType!, + paymentMethodLast4: ws.billing.paymentMethodLast4 ?? undefined, + }) + return + } + + setClientSecret(null) + setSetupError(null) + + createSetupIntent({ plan, workspaceID: id }) + .then((data) => { + if (data.clientSecret) { + setClientSecret(data.clientSecret) + } else if (data.error) { + setSetupError(data.error) + } + }) + .catch(() => setSetupError("Failed to initialize payment")) + }) + + // Keyboard navigation for workspace picker + const { active, setActive, onKeyDown } = createList({ + items: () => workspaces()?.map((w) => w.id) ?? [], + initialActive: null, + }) + + const handleSelectWorkspace = (id: string) => { + setSelectedWorkspace(id) + } + + let listRef: HTMLUListElement | undefined + + // Show workspace picker if multiple workspaces and none selected + const showWorkspacePicker = () => { + const ws = workspaces() + return ws && ws.length > 1 && !selectedWorkspace() + } + + return ( + <> + Subscribe to OpenCode Black +
+
+ +
+

Subscribe to OpenCode Black

+
+ +
+

+ ${planData.id} per month + + {planData.multiplier} + +

+
+
+

Payment method

+ + +

{setupError()}

+ + + +

{selectedWorkspace() ? "Loading payment form..." : "Select a workspace to continue"}

+
+ } + > + + + + + + } + > + {(data) => } + +
+ + {/* Workspace picker modal */} + {}} title="Select a workspace for this plan"> +
+
    { + if (e.key === "Enter" && active()) { + handleSelectWorkspace(active()!) + } else { + onKeyDown(e) + } + }} + > + + {(workspace) => ( +
  • setActive(workspace.id)} + onClick={() => handleSelectWorkspace(workspace.id)} + > + [*] + {workspace.name || workspace.slug} +
    • + )} +     +
+
+ +

+ Prices shown don't include applicable tax · Terms of Service +

+
+ + ) +} -- cgit v1.2.3