72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { NewUserSection } from "./new-user-section"
|
|
import { UsageSection } from "./usage-section"
|
|
import { ModelSection } from "./model-section"
|
|
import { ProviderSection } from "./provider-section"
|
|
import { IconLogo } from "~/component/icon"
|
|
import { createAsync, useParams, useAction, useSubmission } from "@solidjs/router"
|
|
import { querySessionInfo, queryBillingInfo, createCheckoutUrl } from "../common"
|
|
import { Show, createMemo } from "solid-js"
|
|
|
|
export default function () {
|
|
const params = useParams()
|
|
const userInfo = createAsync(() => querySessionInfo(params.id))
|
|
const billingInfo = createAsync(() => queryBillingInfo(params.id))
|
|
const createCheckoutUrlAction = useAction(createCheckoutUrl)
|
|
const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
|
|
|
|
const balanceAmount = createMemo(() => {
|
|
return ((billingInfo()?.balance ?? 0) / 100000000).toFixed(2)
|
|
})
|
|
|
|
return (
|
|
<div data-page="workspace-[id]">
|
|
<section data-component="header-section">
|
|
<IconLogo />
|
|
<p>
|
|
<span>
|
|
Reliable optimized models for coding agents.{" "}
|
|
<a target="_blank" href="/docs/zen">
|
|
Learn more
|
|
</a>
|
|
.
|
|
</span>
|
|
<span data-slot="billing-info">
|
|
<Show
|
|
when={billingInfo()?.reload}
|
|
fallback={
|
|
<button
|
|
data-color="primary"
|
|
data-size="sm"
|
|
disabled={createCheckoutUrlSubmission.pending}
|
|
onClick={async () => {
|
|
const baseUrl = window.location.href
|
|
const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
|
|
if (checkoutUrl) {
|
|
window.location.href = checkoutUrl
|
|
}
|
|
}}
|
|
>
|
|
{createCheckoutUrlSubmission.pending ? "Loading..." : "Enable billing"}
|
|
</button>
|
|
}
|
|
>
|
|
<span data-slot="balance">
|
|
Current balance: <b>${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b>
|
|
</span>
|
|
</Show>
|
|
</span>
|
|
</p>
|
|
</section>
|
|
|
|
<div data-slot="sections">
|
|
<NewUserSection />
|
|
<ModelSection />
|
|
<Show when={userInfo()?.isAdmin}>
|
|
<ProviderSection />
|
|
</Show>
|
|
<UsageSection />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|