Skip to content

Commit d6f2981

Browse files
jog1tjog1t
committed
feat(cloud): billing
1 parent 0500ffd commit d6f2981

26 files changed

+898
-83
lines changed

‎frontend/src/app.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,21 @@ function CloudApp() {
6464
return (
6565
<ClerkProvider
6666
Clerk={clerk}
67-
appearance={{ baseTheme: dark }}
67+
appearance={{
68+
baseTheme: dark,
69+
variables: {
70+
colorPrimary: "hsl(var(--primary))",
71+
colorPrimaryForeground: "hsl(var(--primary-foreground))",
72+
colorTextOnPrimaryBackground:
73+
"hsl(var(--primary-foreground))",
74+
colorBackground: "hsl(var(--background))",
75+
colorInput: "hsl(var(--input))",
76+
colorText: "hsl(var(--text))",
77+
colorTextSecondary: "hsl(var(--muted-foreground))",
78+
borderRadius: "var(--radius)",
79+
colorModalBackdrop: "rgb(0 0 0 / 0.8)",
80+
},
81+
}}
6882
publishableKey={cloudEnv().VITE_CLERK_PUBLISHABLE_KEY}
6983
>
7084
<RouterProvider router={router} />

‎frontend/src/app/billing/plan-card.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { faCheck, faPlus, Icon, type IconProp } from "@rivet-gg/icons";
2+
import type { ReactNode } from "react";
3+
import { Button, cn } from "@/components";
4+
5+
type PlanCardProps = {
6+
title: string;
7+
price: string;
8+
features: { icon: IconProp; label: ReactNode }[];
9+
usageBased?: boolean;
10+
custom?: boolean;
11+
current?: boolean;
12+
buttonProps?: React.ComponentProps<typeof Button>;
13+
} & React.ComponentProps<"div">;
14+
15+
function PlanCard({
16+
title,
17+
price,
18+
features,
19+
usageBased,
20+
current,
21+
custom,
22+
className,
23+
buttonProps,
24+
...props
25+
}: PlanCardProps) {
26+
return (
27+
<div
28+
className={cn(
29+
"border rounded-lg p-6 h-full flex flex-col hover:bg-secondary/20 transition-colors",
30+
current && "border-primary",
31+
className,
32+
)}
33+
{...props}
34+
>
35+
<h3 className="text-lg font-medium mb-2">{title}</h3>
36+
<div className="min-h-24">
37+
{usageBased ? (
38+
<p className="text-xs text-muted-foreground">From</p>
39+
) : null}
40+
<p className="">
41+
<span className="text-4xl font-bold">{price}</span>
42+
{custom ? null : (
43+
<span className="text-muted-foreground ml-1">/mo</span>
44+
)}
45+
</p>
46+
{usageBased ? (
47+
<p className="text-sm text-muted-foreground">+ Usage</p>
48+
) : null}
49+
</div>
50+
<div className="text-sm text-primary-foreground border-t pt-2 flex-1">
51+
<p>Includes:</p>
52+
<ul className="text-muted-foreground mt-2 space-y-1">
53+
{features?.map((feature, index) => (
54+
<li key={feature.label}>
55+
<Icon icon={feature.icon} /> {feature.label}
56+
</li>
57+
))}
58+
</ul>
59+
</div>
60+
{current ? (
61+
<Button
62+
variant="secondary"
63+
className="w-full mt-4"
64+
children="Current Plan"
65+
{...buttonProps}
66+
>
67+
</Button>
68+
) : (
69+
<Button className="w-full mt-4" children={<>{custom ? "Contact Us" : "Upgrade"}</>} {...buttonProps}/>
70+
)}
71+
</div>
72+
);
73+
}
74+
75+
export const CommunityPlan = (props: Partial<PlanCardProps>) => {
76+
return (
77+
<PlanCard
78+
title="Free"
79+
price="$0"
80+
features={[
81+
{ icon: faCheck, label: "5GB Limit" },
82+
{ icon: faCheck, label: "5 Million Writes /mo" },
83+
{ icon: faCheck, label: "200 Million Reads /mo" },
84+
{ icon: faCheck, label: "Community Support" },
85+
]}
86+
{...props}
87+
/>
88+
);
89+
};
90+
91+
export const ProPlan = (props: Partial<PlanCardProps>) => {
92+
return (
93+
<PlanCard
94+
title="Hobby"
95+
price="$5"
96+
usageBased
97+
features={[
98+
{
99+
icon: faPlus,
100+
label: "20 Billion Read /mo",
101+
},
102+
{
103+
icon: faPlus,
104+
label: "50 Million Read /mo",
105+
},
106+
{
107+
icon: faPlus,
108+
label: "5GB Storage",
109+
},
110+
{ icon: faCheck, label: "Unlimited Seats" },
111+
{ icon: faCheck, label: "Email Support" },
112+
]}
113+
{...props}
114+
/>
115+
);
116+
};
117+
118+
export const TeamPlan = (props: Partial<PlanCardProps>) => {
119+
return (
120+
<PlanCard
121+
title="Team"
122+
price="$200"
123+
usageBased
124+
features={[
125+
{ icon: faPlus, label: "25 Billion Reads /mo" },
126+
{ icon: faPlus, label: "50 Million Writes /mo" },
127+
{ icon: faPlus, label: "5GB Storage" },
128+
{ icon: faCheck, label: "Unlimited Seats" },
129+
{ icon: faCheck, label: "MFA" },
130+
{ icon: faCheck, label: "Slack Support" },
131+
]}
132+
{...props}
133+
/>
134+
);
135+
};
136+
137+
export const EnterprisePlan = (props: Partial<PlanCardProps>) => {
138+
return (
139+
<PlanCard
140+
title="Enterprise"
141+
price="Custom"
142+
custom
143+
features={[
144+
{ icon: faCheck, label: "Everything in Team" },
145+
{ icon: faCheck, label: "Priority Support" },
146+
{ icon: faCheck, label: "SLA" },
147+
{ icon: faCheck, label: "OIDC SSO provider" },
148+
{ icon: faCheck, label: "On-Prem Deployment" },
149+
{ icon: faCheck, label: "Audit logs" },
150+
{ icon: faCheck, label: "Custom Roles" },
151+
{ icon: faCheck, label: "Device Tracking" },
152+
]}
153+
{...props}
154+
/>
155+
);
156+
};

‎frontend/src/app/context-switcher.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ function Breadcrumbs() {
7676

7777
const matchProject = match({
7878
to: "/orgs/$organization/projects/$project",
79+
fuzzy: true,
7980
});
8081

8182
if (matchProject) {

‎frontend/src/app/data-providers/cloud-data-provider.tsx‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export const createOrganizationContext = ({
201201
const response = await client.projects.create({
202202
displayName: data.displayName,
203203
name: data.nameId,
204-
org: organization,
204+
organizationId: organization,
205205
});
206206

207207
return response;
@@ -236,10 +236,22 @@ export const createProjectContext = ({
236236
displayName: data.displayName,
237237
org: organization,
238238
});
239-
return response.namespace;
239+
return {
240+
id: response.namespace.id,
241+
name: response.namespace.name,
242+
displayName: response.namespace.displayName,
243+
createdAt: new Date(
244+
response.namespace.createdAt,
245+
).toISOString(),
246+
};
240247
},
241248
};
242249
},
250+
currentProjectQueryOptions: () => {
251+
return parent.currentOrgProjectQueryOptions({
252+
project,
253+
});
254+
},
243255
currentProjectNamespacesQueryOptions: () => {
244256
return parent.orgProjectNamespacesQueryOptions({
245257
organization,
@@ -258,18 +270,45 @@ export const createProjectContext = ({
258270
namespace: opts.namespace,
259271
});
260272
},
273+
currentProjectBillingDetailsQueryOptions() {
274+
return queryOptions({
275+
queryKey: [{ organization, project }, "billing-details"],
276+
queryFn: async ({ signal: abortSignal }) => {
277+
const response = await client.billing.details(
278+
project,
279+
{ org: organization },
280+
{ abortSignal },
281+
);
282+
return response;
283+
},
284+
});
285+
},
286+
changeCurrentProjectBillingPlanMutationOptions() {
287+
return {
288+
mutationKey: [{ organization, project }, "billing"],
289+
mutationFn: async (data: Rivet.BillingSetPlanRequest) => {
290+
const response = await client.billing.setPlan(project, {
291+
plan: data.plan,
292+
org: organization,
293+
});
294+
return response;
295+
},
296+
};
297+
},
261298
};
262299
};
263300

264301
export const createNamespaceContext = ({
265302
namespace,
266303
engineNamespaceName,
267304
engineNamespaceId,
305+
engineToken,
268306
...parent
269307
}: {
270308
namespace: string;
271309
engineNamespaceName: string;
272310
engineNamespaceId: string;
311+
engineToken?: (() => string) | string;
273312
} & ReturnType<typeof createProjectContext> &
274313
ReturnType<typeof createOrganizationContext> &
275314
ReturnType<typeof createGlobalContext>) => {
@@ -278,7 +317,9 @@ export const createNamespaceContext = ({
278317
...parent,
279318
namespace: engineNamespaceName,
280319
namespaceId: engineNamespaceId,
281-
client: createEngineClient(),
320+
client: createEngineClient(cloudEnv().VITE_APP_CLOUD_ENGINE_URL, {
321+
token: engineToken,
322+
}),
282323
}),
283324
namespaceQueryOptions() {
284325
return parent.currentProjectNamespaceQueryOptions({ namespace });

‎frontend/src/app/data-providers/engine-data-provider.tsx‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,12 @@ const shouldRetryAllExpect403 = (failureCount: number, error: Error) => {
3737
return true;
3838
};
3939

40-
export function createClient(opts: { token: (() => string) | string }) {
40+
export function createClient(
41+
baseUrl = engineEnv().VITE_APP_API_URL,
42+
opts: { token: (() => string) | string },
43+
) {
4144
return new RivetClient({
42-
baseUrl: () => engineEnv().VITE_APP_API_URL,
45+
baseUrl: () => baseUrl,
4346
environment: "",
4447
...opts,
4548
});
@@ -48,7 +51,9 @@ export function createClient(opts: { token: (() => string) | string }) {
4851
export const createGlobalContext = (opts: {
4952
engineToken: (() => string) | string;
5053
}) => {
51-
const client = createClient({ token: opts.engineToken });
54+
const client = createClient(engineEnv().VITE_APP_API_URL, {
55+
token: opts.engineToken,
56+
});
5257
return {
5358
client,
5459
namespacesQueryOptions() {
@@ -125,6 +130,10 @@ export const createNamespaceContext = ({
125130
statusQueryOptions() {
126131
return queryOptions({
127132
...def.statusQueryOptions(),
133+
queryKey: [
134+
{ namespace, namespaceId },
135+
...def.statusQueryOptions().queryKey,
136+
],
128137
enabled: true,
129138
queryFn: async () => {
130139
return true;
@@ -139,6 +148,10 @@ export const createNamespaceContext = ({
139148
return infiniteQueryOptions({
140149
...def.regionsQueryOptions(),
141150
enabled: true,
151+
queryKey: [
152+
{ namespace, namespaceId },
153+
...def.regionsQueryOptions().queryKey,
154+
],
142155
queryFn: async () => {
143156
const data = await client.datacenters.list();
144157
return {
@@ -158,7 +171,10 @@ export const createNamespaceContext = ({
158171
regionQueryOptions(regionId: string | undefined) {
159172
return queryOptions({
160173
...def.regionQueryOptions(regionId),
161-
queryKey: ["region", regionId],
174+
queryKey: [
175+
{ namespace, namespaceId },
176+
...def.regionQueryOptions(regionId).queryKey,
177+
],
162178
queryFn: async ({ client }) => {
163179
const regions = await client.ensureInfiniteQueryData(
164180
this.regionsQueryOptions(),
@@ -183,7 +199,10 @@ export const createNamespaceContext = ({
183199
actorQueryOptions(actorId) {
184200
return queryOptions({
185201
...def.actorQueryOptions(actorId),
186-
queryKey: [namespace, "actor", actorId],
202+
queryKey: [
203+
{ namespace, namespaceId },
204+
...def.actorQueryOptions(actorId).queryKey,
205+
],
187206
enabled: true,
188207
queryFn: async ({ signal: abortSignal }) => {
189208
const data = await client.actorsGet(
@@ -203,7 +222,10 @@ export const createNamespaceContext = ({
203222
actorsQueryOptions(opts) {
204223
return infiniteQueryOptions({
205224
...def.actorsQueryOptions(opts),
206-
queryKey: [namespace, "actors", opts],
225+
queryKey: [
226+
{ namespace, namespaceId },
227+
...def.actorsQueryOptions(opts).queryKey,
228+
],
207229
enabled: true,
208230
initialPageParam: undefined,
209231
queryFn: async ({
@@ -274,7 +296,10 @@ export const createNamespaceContext = ({
274296
buildsQueryOptions() {
275297
return infiniteQueryOptions({
276298
...def.buildsQueryOptions(),
277-
queryKey: [namespace, "builds"],
299+
queryKey: [
300+
{ namespace, namespaceId },
301+
...def.buildsQueryOptions().queryKey,
302+
],
278303
enabled: true,
279304
queryFn: async ({ signal: abortSignal, pageParam }) => {
280305
const data = await client.actorsListNames(
@@ -459,16 +484,14 @@ export const createNamespaceContext = ({
459484
initialPageParam: undefined as string | undefined,
460485
queryFn: async ({ signal: abortSignal, pageParam }) => {
461486
const response = await client.namespacesRunnerConfigs.list(
462-
namespaceId,
487+
namespace,
463488
{
464489
cursor: pageParam ?? undefined,
465490
limit: RECORDS_PER_PAGE,
466491
},
467492
{ abortSignal },
468493
);
469494

470-
console.log(response);
471-
472495
return response;
473496
},
474497

0 commit comments

Comments
 (0)