|
|
@@ -1,79 +1,148 @@
|
|
|
import { A, useSearchParams } from "@solidjs/router"
|
|
|
import { Title } from "@solidjs/meta"
|
|
|
-import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js"
|
|
|
+import { createMemo, createSignal, For, onMount, Show } 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()))
|
|
|
+ const [mounted, setMounted] = createSignal(false)
|
|
|
+
|
|
|
+ onMount(() => {
|
|
|
+ requestAnimationFrame(() => setMounted(true))
|
|
|
+ })
|
|
|
+
|
|
|
+ const transition = (action: () => void) => {
|
|
|
+ if (mounted() && "startViewTransition" in document) {
|
|
|
+ ;(document as any).startViewTransition(action)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ action()
|
|
|
+ }
|
|
|
+
|
|
|
+ const select = (planId: string) => {
|
|
|
+ if (selected() === planId) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ transition(() => setSelected(planId))
|
|
|
+ }
|
|
|
+
|
|
|
+ const cancel = () => {
|
|
|
+ transition(() => setSelected(null))
|
|
|
+ }
|
|
|
|
|
|
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 data-slot="pricing">
|
|
|
+ <For each={plans}>
|
|
|
+ {(plan) => {
|
|
|
+ const isSelected = createMemo(() => selected() === plan.id)
|
|
|
+ const isCollapsed = createMemo(() => selected() !== null && selected() !== plan.id)
|
|
|
+
|
|
|
+ return (
|
|
|
+ <article
|
|
|
+ data-slot="pricing-card"
|
|
|
+ data-plan-id={plan.id}
|
|
|
+ data-selected={isSelected() ? "true" : "false"}
|
|
|
+ data-collapsed={isCollapsed() ? "true" : "false"}
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ data-slot="card-trigger"
|
|
|
+ onClick={() => select(plan.id)}
|
|
|
+ disabled={isSelected()}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ data-slot="plan-header"
|
|
|
+ style={{
|
|
|
+ "view-transition-name": `plan-header-${plan.id}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div data-slot="plan-icon">
|
|
|
+ <PlanIcon plan={plan.id} />
|
|
|
+ </div>
|
|
|
+ <p
|
|
|
+ data-slot="price"
|
|
|
+ style={{
|
|
|
+ "view-transition-name": `price-${plan.id}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ data-slot="amount"
|
|
|
+ style={{
|
|
|
+ "view-transition-name": `amount-${plan.id}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ ${plan.amount}
|
|
|
+ </span>
|
|
|
+ <Show when={!isSelected()}>
|
|
|
+ <span
|
|
|
+ data-slot="period"
|
|
|
+ style={{
|
|
|
+ "view-transition-name": `period-${plan.id}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ per month
|
|
|
+ </span>
|
|
|
+ </Show>
|
|
|
+
|
|
|
+ <Show when={isSelected()}>
|
|
|
+ <span
|
|
|
+ data-slot="billing"
|
|
|
+ style={{
|
|
|
+ "view-transition-name": `billing-${plan.id}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ per person billed monthly
|
|
|
+ </span>
|
|
|
+ </Show>
|
|
|
+ {plan.multiplier && (
|
|
|
+ <span
|
|
|
+ data-slot="multiplier"
|
|
|
+ style={{
|
|
|
+ "view-transition-name": `multiplier-${plan.id}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {plan.multiplier}
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <p data-slot="price">
|
|
|
- <span data-slot="amount">${plan.amount}</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().amount}</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=${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>
|
|
|
+
|
|
|
+ <Show when={isSelected()}>
|
|
|
+ <div data-slot="content">
|
|
|
+ <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={cancel} data-slot="cancel">
|
|
|
+ Cancel
|
|
|
+ </button>
|
|
|
+ <A href={`/black/subscribe?plan=${plan.id}`} data-slot="continue">
|
|
|
+ Continue
|
|
|
+ </A>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Show>
|
|
|
+ </article>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </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>
|
|
|
</section>
|
|
|
</>
|
|
|
)
|
Aaron Iker