81 lines
3.4 KiB
TypeScript
81 lines
3.4 KiB
TypeScript
import { A, useSearchParams } from "@solidjs/router"
|
|
import { Title } from "@solidjs/meta"
|
|
import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js"
|
|
import { PlanIcon, plans } from "./common"
|
|
|
|
export default function Black() {
|
|
const [params] = useSearchParams()
|
|
const [selected, setSelected] = createSignal<string | null>((params.plan as string) || null)
|
|
const selectedPlan = createMemo(() => plans.find((p) => p.id === selected()))
|
|
|
|
return (
|
|
<>
|
|
<Title>opencode</Title>
|
|
<section data-slot="cta">
|
|
<Switch>
|
|
<Match when={!selected()}>
|
|
<div data-slot="pricing">
|
|
<For each={plans}>
|
|
{(plan) => (
|
|
<button type="button" onClick={() => setSelected(plan.id)} data-slot="pricing-card">
|
|
<div data-slot="icon">
|
|
<PlanIcon plan={plan.id} />
|
|
</div>
|
|
<p data-slot="price">
|
|
<span data-slot="amount">${plan.id}</span> <span data-slot="period">per month</span>
|
|
<Show when={plan.multiplier}>
|
|
<span data-slot="multiplier">{plan.multiplier}</span>
|
|
</Show>
|
|
</p>
|
|
</button>
|
|
)}
|
|
</For>
|
|
</div>
|
|
<p data-slot="fine-print">
|
|
Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A>
|
|
</p>
|
|
</Match>
|
|
<Match when={selectedPlan()}>
|
|
{(plan) => (
|
|
<div data-slot="selected-plan">
|
|
<div data-slot="selected-card">
|
|
<div data-slot="icon">
|
|
<PlanIcon plan={plan().id} />
|
|
</div>
|
|
<p data-slot="price">
|
|
<span data-slot="amount">${plan().id}</span>{" "}
|
|
<span data-slot="period">per person billed monthly</span>
|
|
<Show when={plan().multiplier}>
|
|
<span data-slot="multiplier">{plan().multiplier}</span>
|
|
</Show>
|
|
</p>
|
|
<ul data-slot="terms">
|
|
<li>Your subscription will not start immediately</li>
|
|
<li>You will be added to the waitlist and activated soon</li>
|
|
<li>Your card will be only charged when your subscription is activated</li>
|
|
<li>Usage limits apply, heavily automated use may reach limits sooner</li>
|
|
<li>Subscriptions for individuals, contact Enterprise for teams</li>
|
|
<li>Limits may be adjusted and plans may be discontinued in the future</li>
|
|
<li>Cancel your subscription at anytime</li>
|
|
</ul>
|
|
<div data-slot="actions">
|
|
<button type="button" onClick={() => setSelected(null)} data-slot="cancel">
|
|
Cancel
|
|
</button>
|
|
<a href={`/black/subscribe/${plan().id}`} data-slot="continue">
|
|
Continue
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p data-slot="fine-print">
|
|
Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</Match>
|
|
</Switch>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|