feat: pricing plan + usage page
This commit is contained in:
BennyKok
@@ -0,0 +1,175 @@
|
||||
import { auth, clerkClient } from "@clerk/nextjs";
|
||||
import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import { stripe } from "../../../../../server/stripe";
|
||||
import { NextResponse } from "next/server";
|
||||
import { db } from "@/db/db";
|
||||
import { subscriptionStatusTable } from "@/db/schema";
|
||||
import { eq } from "drizzle-orm";
|
||||
|
||||
const secret = process.env.STRIPE_WEBHOOK_SECRET || "";
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const body = await req.text();
|
||||
|
||||
const signature = headers().get("stripe-signature");
|
||||
|
||||
if (!signature)
|
||||
return new NextResponse("Signature not found.", {
|
||||
status: 500,
|
||||
});
|
||||
|
||||
const event = stripe.webhooks.constructEvent(body, signature, secret);
|
||||
|
||||
console.log(event);
|
||||
|
||||
if (event.type === "checkout.session.completed") {
|
||||
if (!event.data.object.customer_details?.email) {
|
||||
throw new Error(`missing user email, ${event.id}`);
|
||||
}
|
||||
|
||||
const userId = event.data.object.metadata?.userId;
|
||||
const plan = event.data.object.metadata?.plan;
|
||||
if (!userId) {
|
||||
throw new Error(`missing itinerary_id on metadata, ${event.id}`);
|
||||
}
|
||||
if (!plan) {
|
||||
throw new Error(`missing plan on metadata, ${event.id}`);
|
||||
}
|
||||
|
||||
const orgId = event.data.object.metadata?.orgId;
|
||||
|
||||
const customerId =
|
||||
typeof event.data.object.customer == "string"
|
||||
? event.data.object.customer
|
||||
: event.data.object.customer?.id;
|
||||
const subscriptionId =
|
||||
typeof event.data.object.subscription == "string"
|
||||
? event.data.object.subscription
|
||||
: event.data.object.subscription?.id;
|
||||
|
||||
if (!customerId) {
|
||||
throw new Error(`missing customerId, ${event.id}`);
|
||||
}
|
||||
if (!subscriptionId) {
|
||||
throw new Error(`missing subscriptionId, ${event.id}`);
|
||||
}
|
||||
|
||||
const items = await stripe.subscriptionItems.list({
|
||||
subscription: subscriptionId,
|
||||
limit: 5,
|
||||
});
|
||||
|
||||
// getting the subscription item id for the api plan
|
||||
const subscription_item_api_id = items.data.find(
|
||||
(x) => x.price.id === process.env.STRIPE_PR_API,
|
||||
)?.id;
|
||||
|
||||
// the plan could be either pro or enterprise
|
||||
const subscription_item_plan_id =
|
||||
items.data.find((x) => x.price.id === process.env.STRIPE_PR_PRO)?.id ??
|
||||
items.data.find((x) => x.price.id === process.env.STRIPE_PR_ENTERPRISE)
|
||||
?.id;
|
||||
|
||||
if (!subscription_item_api_id) {
|
||||
throw new Error(
|
||||
`missing plan on subscription_item_api_id, ${event.id}`,
|
||||
);
|
||||
}
|
||||
if (!subscription_item_plan_id) {
|
||||
throw new Error(
|
||||
`missing plan on subscription_item_plan_id, ${event.id}`,
|
||||
);
|
||||
}
|
||||
|
||||
console.log(items);
|
||||
|
||||
await db
|
||||
.insert(subscriptionStatusTable)
|
||||
.values({
|
||||
stripe_customer_id: customerId,
|
||||
org_id: orgId,
|
||||
user_id: userId,
|
||||
subscription_id: subscriptionId,
|
||||
plan: plan as "pro" | "enterprise" | "basic",
|
||||
status: "active",
|
||||
subscription_item_api_id: subscription_item_api_id,
|
||||
subscription_item_plan_id: subscription_item_plan_id,
|
||||
})
|
||||
.onConflictDoNothing();
|
||||
|
||||
// updateDatabase(event.data.object.metadata.itinerary_id);
|
||||
// sendEmail(event.data.object.customer_details.email);
|
||||
} else if (event.type === "customer.subscription.paused") {
|
||||
const customerId =
|
||||
typeof event.data.object.customer == "string"
|
||||
? event.data.object.customer
|
||||
: event.data.object.customer?.id;
|
||||
|
||||
if (!customerId) {
|
||||
throw new Error(`missing customerId, ${event.id}`);
|
||||
}
|
||||
|
||||
await db
|
||||
.update(subscriptionStatusTable)
|
||||
.set({ status: "paused" })
|
||||
.where(eq(subscriptionStatusTable.stripe_customer_id, customerId));
|
||||
} else if (event.type === "customer.subscription.resumed") {
|
||||
const customerId =
|
||||
typeof event.data.object.customer == "string"
|
||||
? event.data.object.customer
|
||||
: event.data.object.customer?.id;
|
||||
|
||||
if (!customerId) {
|
||||
throw new Error(`missing customerId, ${event.id}`);
|
||||
}
|
||||
|
||||
await db
|
||||
.update(subscriptionStatusTable)
|
||||
.set({ status: "active" })
|
||||
.where(eq(subscriptionStatusTable.stripe_customer_id, customerId));
|
||||
} else if (event.type === "customer.subscription.deleted") {
|
||||
const customerId =
|
||||
typeof event.data.object.customer == "string"
|
||||
? event.data.object.customer
|
||||
: event.data.object.customer?.id;
|
||||
|
||||
if (!customerId) {
|
||||
throw new Error(`missing customerId, ${event.id}`);
|
||||
}
|
||||
|
||||
await db
|
||||
.update(subscriptionStatusTable)
|
||||
.set({ status: "deleted" })
|
||||
.where(eq(subscriptionStatusTable.stripe_customer_id, customerId));
|
||||
} else if (event.type === "customer.subscription.updated") {
|
||||
const customerId =
|
||||
typeof event.data.object.customer == "string"
|
||||
? event.data.object.customer
|
||||
: event.data.object.customer?.id;
|
||||
|
||||
if (!customerId) {
|
||||
throw new Error(`missing customerId, ${event.id}`);
|
||||
}
|
||||
|
||||
const cancel_at_period_end = event.data.object.cancel_at_period_end;
|
||||
|
||||
await db
|
||||
.update(subscriptionStatusTable)
|
||||
.set({ cancel_at_period_end: cancel_at_period_end })
|
||||
.where(eq(subscriptionStatusTable.stripe_customer_id, customerId));
|
||||
}
|
||||
|
||||
return NextResponse.json({ result: event, ok: true });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json(
|
||||
{
|
||||
message: `Something went wrong: ${error}`,
|
||||
ok: false,
|
||||
},
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { stripe } from "@/server/stripe";
|
||||
import { createCheckout } from "@/server/linkToPricing";
|
||||
import { auth, clerkClient } from "@clerk/nextjs";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getUrlServerSide } from "@/server/getUrlServerSide";
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const { userId, orgId } = auth();
|
||||
|
||||
const plan = new URL(req.url).searchParams.get("plan");
|
||||
|
||||
if (!userId) return redirect("/");
|
||||
if (!plan) return redirect("/pricing");
|
||||
|
||||
const user = await clerkClient.users.getUser(userId);
|
||||
|
||||
const mapping = {
|
||||
pro: process.env.STRIPE_PR_PRO,
|
||||
enterprise: process.env.STRIPE_PR_ENTERPRISE,
|
||||
};
|
||||
|
||||
const api = process.env.STRIPE_PR_API;
|
||||
|
||||
const session = await stripe.checkout.sessions.create({
|
||||
success_url: getUrlServerSide(),
|
||||
line_items: [
|
||||
{
|
||||
price: mapping[plan as "pro" | "enterprise"],
|
||||
quantity: 1,
|
||||
},
|
||||
{
|
||||
price: api,
|
||||
},
|
||||
],
|
||||
metadata: {
|
||||
userId: userId,
|
||||
orgId: orgId ?? null,
|
||||
plan: plan,
|
||||
},
|
||||
client_reference_id: orgId ?? userId,
|
||||
customer_email: user.emailAddresses[0].emailAddress,
|
||||
mode: "subscription",
|
||||
});
|
||||
|
||||
if (session.url) redirect(session.url);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { stripe } from "@/server/stripe";
|
||||
import { createCheckout } from "@/server/linkToPricing";
|
||||
import { auth, clerkClient } from "@clerk/nextjs";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getUrlServerSide } from "@/server/getUrlServerSide";
|
||||
import { db } from "@/db/db";
|
||||
import { and, eq, isNull } from "drizzle-orm";
|
||||
import { subscriptionStatusTable } from "@/db/schema";
|
||||
import { getCurrentPlan } from "@/server/getCurrentPlan";
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const { userId, orgId } = auth();
|
||||
|
||||
if (!userId) return redirect("/");
|
||||
|
||||
const change = new URL(req.url).searchParams.get("change");
|
||||
|
||||
const sub = await getCurrentPlan({
|
||||
org_id: orgId,
|
||||
user_id: userId,
|
||||
});
|
||||
|
||||
if (!sub) return redirect("/pricing");
|
||||
|
||||
const session = await stripe.billingPortal.sessions.create({
|
||||
customer: sub.stripe_customer_id,
|
||||
return_url: getUrlServerSide() + "/pricing",
|
||||
// flow_data:
|
||||
// change === "true" && sub.subscription_id
|
||||
// ? {
|
||||
// type: "subscription_update",
|
||||
// subscription_update: {
|
||||
// subscription: sub.subscription_id,
|
||||
// },
|
||||
// }
|
||||
// : undefined,
|
||||
});
|
||||
|
||||
redirect(session.url);
|
||||
// if (session.url) redirect(session.url);
|
||||
}
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
workflowRunsTable,
|
||||
workflowTable,
|
||||
} from "@/db/schema";
|
||||
import { getDuration } from "@/lib/getRelativeTime";
|
||||
import { getSubscription, setUsage } from "@/server/linkToPricing";
|
||||
import { getCurrentPlan } from "@/server/getCurrentPlan";
|
||||
import { stripe } from "@/server/stripe";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { NextResponse } from "next/server";
|
||||
import { z } from "zod";
|
||||
@@ -34,21 +34,51 @@ export async function POST(request: Request) {
|
||||
data: output_data,
|
||||
});
|
||||
} else if (status) {
|
||||
const workflow_run = await db
|
||||
const [workflow_run] = await db
|
||||
.update(workflowRunsTable)
|
||||
.set({
|
||||
status: status,
|
||||
ended_at:
|
||||
status === "success" || status === "failed" ? new Date() : null,
|
||||
})
|
||||
.where(eq(workflowRunsTable.id, run_id));
|
||||
.where(eq(workflowRunsTable.id, run_id))
|
||||
.returning();
|
||||
|
||||
// get data from workflowRunsTable
|
||||
const userUsageTime = await importUserUsageData(run_id);
|
||||
// Need to filter out only comfy deploy serverless
|
||||
// Also multiply with the gpu selection
|
||||
if (workflow_run.machine_type == "comfy-deploy-serverless") {
|
||||
if (
|
||||
(status === "success" || status === "failed") &&
|
||||
workflow_run.user_id
|
||||
) {
|
||||
const sub = await getCurrentPlan({
|
||||
user_id: workflow_run.user_id,
|
||||
org_id: workflow_run.org_id,
|
||||
});
|
||||
|
||||
if (userUsageTime) {
|
||||
// get the usage_time from userUsage
|
||||
await addSubscriptionUnit(userUsageTime);
|
||||
if (sub && sub.subscription_item_api_id && workflow_run.ended_at) {
|
||||
let durationInSec = Math.abs(
|
||||
(workflow_run.ended_at.getTime() -
|
||||
workflow_run.created_at.getTime()) /
|
||||
1000,
|
||||
);
|
||||
durationInSec = Math.ceil(durationInSec);
|
||||
switch (workflow_run.gpu) {
|
||||
case "A100":
|
||||
durationInSec *= 7;
|
||||
break;
|
||||
case "A10G":
|
||||
durationInSec *= 4;
|
||||
break;
|
||||
}
|
||||
await stripe.subscriptionItems.createUsageRecord(
|
||||
sub.subscription_item_api_id,
|
||||
{
|
||||
quantity: durationInSec,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,50 +94,6 @@ export async function POST(request: Request) {
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async function addSubscriptionUnit(userUsageTime: number) {
|
||||
const subscription = await getSubscription();
|
||||
|
||||
// round up userUsageTime to the nearest integer
|
||||
const roundedUsageTime = Math.ceil(userUsageTime);
|
||||
|
||||
if (subscription) {
|
||||
const usage = await setUsage(
|
||||
subscription.data[0].attributes.first_subscription_item.id,
|
||||
roundedUsageTime
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function importUserUsageData(run_id: string) {
|
||||
const workflowRuns = await db.query.workflowRunsTable.findFirst({
|
||||
where: eq(workflowRunsTable.id, run_id),
|
||||
});
|
||||
|
||||
if (!workflowRuns?.workflow_id) return;
|
||||
|
||||
// find if workflowTable id column contains workflowRunsTable workflow_id
|
||||
const workflow = await db.query.workflowTable.findFirst({
|
||||
where: eq(workflowTable.id, workflowRuns.workflow_id),
|
||||
});
|
||||
|
||||
if (workflowRuns?.ended_at === null || workflow == null) return;
|
||||
|
||||
const usageTime = parseFloat(
|
||||
getDuration((workflowRuns?.ended_at - workflowRuns?.started_at) / 1000)
|
||||
);
|
||||
|
||||
// add data to userUsageTable
|
||||
const user_usage = await db.insert(userUsageTable).values({
|
||||
user_id: workflow.user_id,
|
||||
created_at: workflowRuns.ended_at,
|
||||
org_id: workflow.org_id,
|
||||
ended_at: workflowRuns.ended_at,
|
||||
usage_time: usageTime,
|
||||
});
|
||||
|
||||
return usageTime;
|
||||
}
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
const people = [
|
||||
{
|
||||
name: "Nvidia T4 GPU",
|
||||
gpu: "1x",
|
||||
ram: "16GB",
|
||||
price: "$0.000225/sec",
|
||||
},
|
||||
{
|
||||
name: "Nvidia A40 GPU",
|
||||
gpu: "1x",
|
||||
ram: "48GB",
|
||||
price: "$0.000575/sec",
|
||||
},
|
||||
];
|
||||
|
||||
export function GpuPricingPlan() {
|
||||
return (
|
||||
<div className="flex justify-center w-full py-8">
|
||||
<div className="w-full max-w-4xl">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
|
||||
>
|
||||
GPU
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
|
||||
>
|
||||
No.
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
|
||||
>
|
||||
RAM
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Price
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 bg-white">
|
||||
{people.map((person) => (
|
||||
<tr key={person.ram} className="even:bg-gray-50">
|
||||
<td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
|
||||
{person.name}
|
||||
<dl className="font-normal lg:hidden">
|
||||
<dt className="sr-only">No.</dt>
|
||||
<dd className="mt-1 truncate text-gray-700">
|
||||
{person.gpu}
|
||||
</dd>
|
||||
<dt className="sr-only sm:hidden">RAM</dt>
|
||||
<dd className="mt-1 truncate text-gray-500 sm:hidden">
|
||||
{person.ram}
|
||||
</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td className="hidden px-3 py-4 text-sm text-gray-500 lg:table-cell">
|
||||
{person.gpu}
|
||||
</td>
|
||||
<td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
|
||||
{person.ram}
|
||||
</td>
|
||||
<td className="px-3 py-4 text-sm text-gray-500">
|
||||
{person.price}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
import { checkMarkIcon, crossMarkIcon } from "../const/Icon";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getPricing } from "@/server/linkToPricing";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Tier = {
|
||||
name: string;
|
||||
id: string;
|
||||
href: string;
|
||||
priceMonthly: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
featured: boolean;
|
||||
priority?: TierPriority;
|
||||
};
|
||||
|
||||
enum TierPriority {
|
||||
Free = "free",
|
||||
Pro = "pro",
|
||||
Enterprise = "enterprise",
|
||||
}
|
||||
|
||||
export default function PricingList() {
|
||||
const [productTiers, setProductTiers] = useState<Tier[]>();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const product = await getPricing();
|
||||
|
||||
if (!product) return;
|
||||
|
||||
const newProductTiers: Tier[] = product.data.map((item) => {
|
||||
// Create a new DOMParser instance
|
||||
const parser = new DOMParser();
|
||||
// Parse the description HTML string to a new document
|
||||
const doc = parser.parseFromString(
|
||||
item.attributes.description,
|
||||
"text/html"
|
||||
);
|
||||
// Extract the description and features
|
||||
const description = doc.querySelector("p")?.textContent || "";
|
||||
const features = Array.from(doc.querySelectorAll("ul > li")).map(
|
||||
(li) => li.textContent || ""
|
||||
);
|
||||
|
||||
return {
|
||||
name: item.attributes.name,
|
||||
id: item.id,
|
||||
href: item.attributes.buy_now_url,
|
||||
priceMonthly:
|
||||
item.attributes.price_formatted.split("/")[0] == "Usage-based"
|
||||
? "$20.00"
|
||||
: item.attributes.price_formatted.split("/")[0],
|
||||
description: description,
|
||||
features: features,
|
||||
|
||||
// if name contains pro, it's featured
|
||||
featured: item.attributes.name.toLowerCase().includes("pro"),
|
||||
|
||||
// give priority if name contain in enum
|
||||
priority: Object.values(TierPriority).find((priority) =>
|
||||
item.attributes.name.toLowerCase().includes(priority)
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
// sort newProductTiers by priority
|
||||
newProductTiers.sort((a, b) => {
|
||||
if (!a.priority) return 1;
|
||||
if (!b.priority) return -1;
|
||||
return (
|
||||
Object.values(TierPriority).indexOf(a.priority) -
|
||||
Object.values(TierPriority).indexOf(b.priority)
|
||||
);
|
||||
});
|
||||
|
||||
setProductTiers(newProductTiers);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative isolate px-6 py-24 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
|
||||
<h2 className="text-base font-semibold leading-7 text-indigo-600">
|
||||
Pricing
|
||||
</h2>
|
||||
<p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
|
||||
The right price for you, whoever you are
|
||||
</p>
|
||||
</div>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
|
||||
Qui iusto aut est earum eos quae. Eligendi est at nam aliquid ad quo
|
||||
reprehenderit in aliquid fugiat dolorum voluptatibus.
|
||||
</p>
|
||||
<div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2 xl:max-w-6xl xl:grid-cols-3">
|
||||
{productTiers &&
|
||||
productTiers.map((tier, tierIdx) => (
|
||||
<div
|
||||
key={tier.id}
|
||||
className={cn(
|
||||
tier.featured
|
||||
? "relative bg-white shadow-2xl"
|
||||
: "bg-white/60 sm:mx-8 lg:mx-0",
|
||||
tier.featured
|
||||
? ""
|
||||
: tierIdx === 0
|
||||
? "rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl"
|
||||
: "sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none",
|
||||
"rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10"
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
id={tier.id}
|
||||
className="text-base font-semibold leading-7 text-indigo-600"
|
||||
>
|
||||
{tier.name}
|
||||
</h3>
|
||||
<p className="mt-4 flex items-baseline gap-x-2">
|
||||
<span className="text-5xl font-bold tracking-tight text-gray-900">
|
||||
{tier.priceMonthly}
|
||||
</span>
|
||||
<span className="text-base text-gray-500">/month</span>
|
||||
</p>
|
||||
<p className="mt-6 text-base leading-7 text-gray-600">
|
||||
{tier.description}
|
||||
</p>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-8 space-y-3 text-sm leading-6 text-gray-600 sm:mt-10"
|
||||
>
|
||||
{tier.features.map((feature) => (
|
||||
<li key={feature} className="flex gap-x-3">
|
||||
<div className="flex justify-center items-center">
|
||||
{feature.includes("[x]") ? crossMarkIcon : checkMarkIcon}
|
||||
</div>
|
||||
{feature.replace("[x]", "")}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a
|
||||
href={tier.href}
|
||||
aria-describedby={tier.id}
|
||||
className={cn(
|
||||
tier.featured
|
||||
? "bg-indigo-600 text-white shadow hover:bg-indigo-500"
|
||||
: "text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
|
||||
"mt-8 block rounded-md py-2.5 px-3.5 text-center text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10"
|
||||
)}
|
||||
>
|
||||
Get started today
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
export const checkMarkIcon = (
|
||||
<svg
|
||||
className="h-5 w-5 flex-shrink-0 text-green-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const crossMarkIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 48 48"
|
||||
>
|
||||
<path
|
||||
fill="#F44336"
|
||||
d="M21.5 4.5H26.501V43.5H21.5z"
|
||||
transform="rotate(45.001 24 24)"
|
||||
/>
|
||||
<path
|
||||
fill="#F44336"
|
||||
d="M21.5 4.5H26.5V43.501H21.5z"
|
||||
transform="rotate(135.008 24 24)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,13 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { GpuPricingPlan } from "@/app/(app)/pricing/components/gpuPricingTable";
|
||||
import PricingList from "@/app/(app)/pricing/components/pricePlanList";
|
||||
import PricingList from "@/components/PricingPlan";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<PricingList />
|
||||
<GpuPricingPlan />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
// app/providers.tsx
|
||||
'use client'
|
||||
import posthog from 'posthog-js'
|
||||
import { PostHogProvider } from 'posthog-js/react'
|
||||
"use client";
|
||||
import posthog from "posthog-js";
|
||||
import { PostHogProvider } from "posthog-js/react";
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
if (typeof window !== "undefined") {
|
||||
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
|
||||
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
|
||||
capture_pageview: false // Disable automatic pageview capture, as we capture manually
|
||||
})
|
||||
capture_pageview: false, // Disable automatic pageview capture, as we capture manually
|
||||
});
|
||||
}
|
||||
|
||||
export function PHProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <PostHogProvider client={posthog}>{children}</PostHogProvider>
|
||||
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { LoadingPageWrapper } from "@/components/LoadingWrapper";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function Loading() {
|
||||
const pathName = usePathname();
|
||||
return <LoadingPageWrapper className="h-full" tag={pathName.toLowerCase()} />;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import PricingList from "@/components/PricingPlan";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { getCurrentPlanWithAuth } from "@/server/getCurrentPlan";
|
||||
import { stripe } from "@/server/stripe";
|
||||
|
||||
const freeTierSeconds = 30000;
|
||||
|
||||
export default async function Home() {
|
||||
const sub = await getCurrentPlanWithAuth();
|
||||
|
||||
const data = sub?.subscription_item_api_id
|
||||
? await stripe.subscriptionItems.listUsageRecordSummaries(
|
||||
sub?.subscription_item_api_id,
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex items-center justify-center">
|
||||
<Card className="p-4 w-full max-w-[600px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Account Usage</CardTitle>
|
||||
<CardDescription>View you account usage</CardDescription>
|
||||
<Badge className="w-fit">{sub?.plan}</Badge>
|
||||
</CardHeader>
|
||||
{data && (
|
||||
<CardContent className="text-sm flex flex-col gap-2">
|
||||
<div className="flex justify-between gap-2">
|
||||
<span>Current free gpu usage:</span>
|
||||
{
|
||||
<div className="flex gap-2">
|
||||
<Badge>
|
||||
{data.data[0].total_usage}s /{Math.floor(freeTierSeconds)}s
|
||||
</Badge>
|
||||
<Badge>
|
||||
{Math.floor(data.data[0].total_usage / 60 / 60)}hr /
|
||||
{Math.floor(freeTierSeconds / 60 / 60)}hr
|
||||
</Badge>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Progress
|
||||
value={(data.data[0].total_usage / freeTierSeconds) * 100}
|
||||
></Progress>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user