merge0

2024-01-24 16:26:16 -08:00
parent 224b006ec2 d644edd3c4
commit 911cc8d16b
38 changed files with 7065 additions and 285 deletions
@@ -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);
+}
@@ -1,6 +1,13 @@
 import { parseDataSafe } from "../../../../lib/parseDataSafe";
 import { db } from "@/db/db";
-import { workflowRunOutputs, workflowRunsTable } from "@/db/schema";
+import {
+  userUsageTable,
+  workflowRunOutputs,
+  workflowRunsTable,
+  workflowTable,
+} from "@/db/schema";
+import { getCurrentPlan } from "@/server/getCurrentPlan";
+import { stripe } from "@/server/stripe";
 import { eq } from "drizzle-orm";
 import { NextResponse } from "next/server";
 import { z } from "zod";
@@ -27,8 +34,7 @@ export async function POST(request: Request) {
      data: output_data,
    });
  } else if (status) {
-    // console.log("status", status);
-    const workflow_run = await db
+    const [workflow_run] = await db
      .update(workflowRunsTable)
      .set({
        status: status,
@@ -37,6 +43,43 @@ export async function POST(request: Request) {
      })
      .where(eq(workflowRunsTable.id, run_id))
      .returning();
+
+    // 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 (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,
+            },
+          );
+        }
+      }
+    }
  }

  // const workflow_version = await db.query.workflowVersionTable.findFirst({
@@ -51,6 +94,6 @@ export async function POST(request: Request) {
    },
    {
      status: 200,
-    }
+    },
  );
 }
@@ -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,9 @@
+import PricingList from "@/components/PricingPlan";
+
+export default function Home() {
+  return (
+    <div>
+      <PricingList />
+    </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>
+  );
+}
@@ -31,7 +31,7 @@ export function CreateShareButton({

 	const [isLoading, setIsLoading] = useState(false);
 	const workflow_version_id = workflow?.versions.find(
-		(x) => x.version === version,
+		(x) => x.version == version,
 	)?.id;

 	return (
@@ -22,6 +22,7 @@ import {
 } from "@clerk/nextjs";
 import { Github, Menu } from "lucide-react";
 import meta from "next-gen/config";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";

@@ -29,9 +30,13 @@ export function Navbar() {
  const { organization } = useOrganization();
  const _isDesktop = useMediaQuery("(min-width: 1024px)");
  const [isDesktop, setIsDesktop] = useState(true);
+
+  const pricingPlanFlagEnable = useFeatureFlagEnabled("pricing-plan");
+
  useEffect(() => {
    setIsDesktop(_isDesktop);
  }, [_isDesktop]);
+
  return (
    <>
      <div className="flex flex-row items-center gap-4">
@@ -85,6 +90,24 @@ export function Navbar() {
      </div>
      <div className="flex flex-row items-center gap-2">
        {isDesktop && <NavbarMenu />}
+        {pricingPlanFlagEnable && (
+          <>
+            <Button
+              asChild
+              variant="link"
+              className="rounded-full aspect-square p-2 mr-4"
+            >
+              <a href="/pricing">Pricing</a>
+            </Button>
+            <Button
+              asChild
+              variant="link"
+              className="rounded-full aspect-square p-2 mr-4"
+            >
+              <a href="/usage">Usage</a>
+            </Button>
+          </>
+        )}
        <Button
          asChild
          variant="link"
@@ -98,7 +121,11 @@ export function Navbar() {
          variant="outline"
          className="rounded-full aspect-square p-2"
        >
-          <a target="_blank" href="https://github.com/BennyKok/comfyui-deploy" rel="noreferrer">
+          <a
+            target="_blank"
+            href="https://github.com/BennyKok/comfyui-deploy"
+            rel="noreferrer"
+          >
            <Github />
          </a>
        </Button>
@@ -0,0 +1,381 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { Check, Info, Minus } from "lucide-react";
+
+import { Fragment } from "react";
+import { auth } from "@clerk/nextjs";
+import { subscriptionPlanStatus } from "@/db/schema";
+import { getCurrentPlan } from "../server/getCurrentPlan";
+
+const tiers = [
+  {
+    name: "Basic",
+    id: "basic",
+    // href: "/api/checkout?plan=basic",
+    href: "/workflows",
+    priceMonthly: "$0",
+    description: "Instant Comfy UI API",
+    mostPopular: false,
+  },
+  {
+    name: "Pro",
+    id: "pro",
+    href: "/api/stripe/checkout?plan=pro",
+    priceMonthly: "$20",
+    description: "Accelerate Comfy UI",
+    mostPopular: false,
+  },
+  {
+    name: "Enterprise",
+    id: "enterprise",
+    href: "/api/stripe/checkout?plan=enterprise",
+    priceMonthly: "$100",
+    description: "Scale your Products",
+    mostPopular: true,
+  },
+];
+const sections = [
+  {
+    name: "Features",
+    features: [
+      {
+        name: "GPU",
+        tiers: { Basic: "T4", Pro: "T4, A10G", Enterprise: "T4, A10G, A100" },
+      },
+      {
+        name: "Compute Credit",
+        tiers: {
+          Basic: (
+            <Tooltip>
+              <TooltipTrigger className="flex items-center justify-center gap-2">
+                30k secs free + usage <Info size={14} />
+              </TooltipTrigger>
+              <TooltipContent>
+                <ul className="flex flex-col items-start justify-start">
+                  GPU Price /s = $0.00015
+                  <li>- T4 Multiplier = x1</li>
+                </ul>
+              </TooltipContent>
+            </Tooltip>
+          ),
+          Pro: (
+            <Tooltip>
+              <TooltipTrigger className="flex items-center justify-center gap-2">
+                30k secs free + usage <Info size={14} />
+              </TooltipTrigger>
+              <TooltipContent>
+                <ul className="flex flex-col items-start justify-start">
+                  GPU Price /s = $0.00015
+                  <li>- T4 Multiplier = x1</li>
+                  <li>- A10G Multiplier = x4</li>
+                </ul>
+              </TooltipContent>
+            </Tooltip>
+          ),
+          Enterprise: (
+            <Tooltip>
+              <TooltipTrigger className="flex items-center justify-center gap-2">
+                30k secs free + usage <Info size={14} />
+              </TooltipTrigger>
+              <TooltipContent>
+                <ul className="flex flex-col items-start justify-start">
+                  GPU Price /s = $0.00015
+                  <li>- T4 Multiplier = x1</li>
+                  <li>- A10G Multiplier = x4</li>
+                  <li>- A100 Multiplier = x7</li>
+                </ul>
+              </TooltipContent>
+            </Tooltip>
+          ),
+        },
+      },
+      {
+        name: "Workflows",
+        tiers: { Basic: "2", Pro: "25", Enterprise: "Unlimited" },
+      },
+      {
+        name: "Serverless Machines",
+        tiers: { Basic: "2", Pro: "10", Enterprise: "Unlimited" },
+      },
+      {
+        name: "Outputs Storage",
+        tiers: { Basic: "2 GB", Pro: "10 GB", Enterprise: "Unlimited" },
+      },
+      {
+        name: "Dedicated Support",
+        tiers: { Enterprise: true },
+      },
+      {
+        name: "Private Model Hosting",
+        tiers: { Enterprise: "Coming Soon" },
+      },
+    ],
+  },
+];
+
+export default async function PricingList() {
+  const { userId, orgId } = auth();
+
+  if (!userId) {
+    return <>No user id</>;
+  }
+
+  const sub = await getCurrentPlan({ user_id: userId, org_id: orgId });
+
+  const getHrefFromTier = (tier: (typeof tiers)[0]) => {
+    if (sub?.status == "active") {
+      if (tier.id == sub?.plan) return "/api/stripe/dashboard";
+      // This is actually cancelled
+      if (sub.cancel_at_period_end) return tier.href;
+      return "/api/stripe/dashboard?change=true";
+    } else {
+      return tier.href;
+    }
+  };
+  const getNameFromTier = (tier: (typeof tiers)[0]) => {
+    if (tier.id == sub?.plan && sub.status == "active") {
+      return sub.cancel_at_period_end ? (
+        <>
+          Current <span className="text-2xs"> - Ending this period</span>
+        </>
+      ) : (
+        "Current"
+      );
+    }
+    if (sub?.status == "active") {
+      return "Get Started";
+    } else {
+      return "Get Started";
+    }
+  };
+
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-4xl text-center">
+          <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">
+            Turn any workflow into API
+          </p>
+        </div>
+        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
+          ComfyDeploy is now under technical preview.
+        </p>
+
+        {/* xs to lg */}
+        <div className="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
+          {tiers.map((tier) => (
+            <section
+              key={tier.id}
+              className={cn(
+                tier.mostPopular
+                  ? "rounded-xl bg-gray-400/5 ring-1 ring-inset ring-gray-200"
+                  : "",
+                "p-8",
+              )}
+            >
+              <h3
+                id={tier.id}
+                className="text-sm font-semibold leading-6 text-gray-900"
+              >
+                {tier.name}
+              </h3>
+              <p className="mt-2 flex items-baseline gap-x-1 text-gray-900">
+                <span className="text-4xl font-bold">{tier.priceMonthly}</span>
+                <span className="text-sm font-semibold">/month</span>
+              </p>
+              <br></br>
+              <div className="text-xl font-semibold">{tier.description}</div>
+              <a
+                href={getHrefFromTier(tier)}
+                aria-describedby={tier.id}
+                className={cn(
+                  tier.mostPopular
+                    ? "bg-indigo-600 text-white 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 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+                )}
+              >
+                {getNameFromTier(tier)}
+              </a>
+              <ul
+                role="list"
+                className="mt-10 space-y-4 text-sm leading-6 text-gray-900"
+              >
+                {sections.map((section) => (
+                  <li key={section.name}>
+                    <ul role="list" className="space-y-4">
+                      {section.features.map((feature) =>
+                        feature.tiers[tier.name] ? (
+                          <li key={feature.name} className="flex gap-x-3">
+                            <Check
+                              className="h-6 w-5 flex-none text-indigo-600"
+                              aria-hidden="true"
+                            />
+                            <span>
+                              {feature.name}{" "}
+                              {typeof feature.tiers[tier.name] === "string" ? (
+                                <span className="text-sm leading-6 text-gray-500">
+                                  ({feature.tiers[tier.name]})
+                                </span>
+                              ) : null}
+                            </span>
+                          </li>
+                        ) : null,
+                      )}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+
+        {/* lg+ */}
+        <div className="isolate mt-20 hidden lg:block border-gray-100 border p-6 shadow-md rounded-lg">
+          <div className="relative -mx-8">
+            {tiers.some((tier) => tier.mostPopular) ? (
+              <div className="absolute inset-x-4 inset-y-0 -z-10 flex">
+                <div
+                  className="flex w-1/4 px-4"
+                  aria-hidden="true"
+                  style={{
+                    marginLeft: `${
+                      (tiers.findIndex((tier) => tier.mostPopular) + 1) * 25
+                    }%`,
+                  }}
+                >
+                  <div className="w-full rounded-t-xl border-x border-t border-gray-900/10 bg-gray-400/5" />
+                </div>
+              </div>
+            ) : null}
+            <table className="w-full table-fixed border-separate border-spacing-x-8 text-left">
+              <caption className="sr-only">Pricing plan comparison</caption>
+              <colgroup>
+                <col className="w-1/4" />
+                <col className="w-1/4" />
+                <col className="w-1/4" />
+                <col className="w-1/4" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <td />
+                  {tiers.map((tier) => (
+                    <th
+                      key={tier.id}
+                      scope="col"
+                      className="px-6 pt-6 xl:px-8 xl:pt-8"
+                    >
+                      <div className="text-sm font-semibold leading-7 text-gray-900">
+                        {tier.name}
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">
+                    <span className="sr-only">Price</span>
+                  </th>
+                  {tiers.map((tier) => (
+                    <td key={tier.id} className="px-6 pt-2 xl:px-8">
+                      <div className="flex items-baseline gap-x-1 text-gray-900">
+                        <span className="text-4xl font-bold">
+                          {tier.priceMonthly}
+                        </span>
+                        <span className="text-sm font-semibold leading-6">
+                          /month
+                        </span>
+                      </div>
+                      <br></br>
+                      <div className="text-md font-semibold">
+                        {tier.description}
+                      </div>
+                      <a
+                        href={getHrefFromTier(tier)}
+                        className={cn(
+                          tier.mostPopular
+                            ? "bg-indigo-600 text-white 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 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+                        )}
+                      >
+                        {getNameFromTier(tier)}
+                      </a>
+                    </td>
+                  ))}
+                </tr>
+                {sections.map((section, sectionIdx) => (
+                  <Fragment key={section.name}>
+                    <tr>
+                      <th
+                        scope="colgroup"
+                        colSpan={4}
+                        className={cn(
+                          sectionIdx === 0 ? "pt-8" : "pt-16",
+                          "pb-4 text-sm font-semibold leading-6 text-gray-900",
+                        )}
+                      >
+                        {section.name}
+                        <div className="absolute inset-x-8 mt-4 h-px bg-gray-900/10" />
+                      </th>
+                    </tr>
+                    {section.features.map((feature) => (
+                      <tr key={feature.name}>
+                        <th
+                          scope="row"
+                          className="py-4 text-sm font-normal leading-6 text-gray-900"
+                        >
+                          {feature.name}
+                          <div className="absolute inset-x-8 mt-4 h-px bg-gray-900/5" />
+                        </th>
+                        {tiers.map((tier) => (
+                          <td key={tier.id} className="px-6 py-4 xl:px-8">
+                            {typeof feature.tiers[tier.name] === "string" ||
+                            typeof feature.tiers[tier.name] === "object" ? (
+                              <div className="flex items-center justify-center text-center text-sm leading-6 text-gray-500">
+                                {feature.tiers[tier.name]}
+                              </div>
+                            ) : (
+                              <>
+                                {feature.tiers[tier.name] === true ? (
+                                  <Check
+                                    className="mx-auto h-5 w-5 text-indigo-600"
+                                    aria-hidden="true"
+                                  />
+                                ) : (
+                                  <Minus
+                                    className="mx-auto h-5 w-5 text-gray-400"
+                                    aria-hidden="true"
+                                  />
+                                )}
+
+                                <span className="sr-only">
+                                  {feature.tiers[tier.name] === true
+                                    ? "Included"
+                                    : "Not included"}{" "}
+                                  in {tier.name}
+                                </span>
+                              </>
+                            )}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
@@ -9,6 +9,7 @@ import {
  text,
  timestamp,
  uuid,
+  real,
 } from "drizzle-orm/pg-core";
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
 import { z } from "zod";
@@ -82,6 +83,7 @@ export const workflowVersionTable = dbSchema.table("workflow_versions", {
  created_at: timestamp("created_at").defaultNow().notNull(),
  updated_at: timestamp("updated_at").defaultNow().notNull(),
 });
+
 export const workflowVersionSchema = createSelectSchema(workflowVersionTable);

 export const workflowVersionRelations = relations(
@@ -158,6 +160,10 @@ export const workflowRunsTable = dbSchema.table("workflow_runs", {
  ended_at: timestamp("ended_at"),
  created_at: timestamp("created_at").defaultNow().notNull(),
  started_at: timestamp("started_at"),
+  gpu: machineGPUOptions("gpu"),
+  machine_type: machinesType("machine_type"),
+  user_id: text("user_id"),
+  org_id: text("org_id"),
 });

 export const workflowRunRelations = relations(
@@ -335,6 +341,19 @@ export const apiKeyTable = dbSchema.table("api_keys", {
  updated_at: timestamp("updated_at").defaultNow().notNull(),
 });

+export const userUsageTable = dbSchema.table("user_usage", {
+  id: uuid("id").primaryKey().defaultRandom().notNull(),
+  org_id: text("org_id"),
+  user_id: text("user_id")
+    .references(() => usersTable.id, {
+      onDelete: "cascade",
+    })
+    .notNull(),
+  usage_time: real("usage_time").default(0).notNull(),
+  created_at: timestamp("created_at").defaultNow().notNull(),
+  ended_at: timestamp("ended_at").defaultNow().notNull(),
+});
+
 export const authRequestsTable = dbSchema.table("auth_requests", {
  request_id: text("request_id").primaryKey().notNull(),
  user_id: text("user_id"),
@@ -390,7 +409,32 @@ export const checkpointTable = dbSchema.table("checkpoints", {
  upload_machine_id: text("upload_machine_id"),
  upload_type: modelUploadType("upload_type").notNull(),
  error_log: text("error_log"),
+  created_at: timestamp("created_at").defaultNow().notNull(),
+  updated_at: timestamp("updated_at").defaultNow().notNull(),
+});

+export const subscriptionPlan = pgEnum("subscription_plan", [
+  "basic",
+  "pro",
+  "enterprise",
+]);
+
+export const subscriptionPlanStatus = pgEnum("subscription_plan_status", [
+  "active",
+  "deleted",
+  "paused",
+]);
+
+export const subscriptionStatusTable = dbSchema.table("subscription_status", {
+  stripe_customer_id: text("stripe_customer_id").primaryKey().notNull(),
+  user_id: text("user_id"),
+  org_id: text("org_id"),
+  plan: subscriptionPlan("plan").notNull(),
+  status: subscriptionPlanStatus("status").notNull(),
+  subscription_id: text("subscription_id"),
+  subscription_item_plan_id: text("subscription_item_plan_id"),
+  subscription_item_api_id: text("subscription_item_api_id"),
+  cancel_at_period_end: boolean("cancel_at_period_end").default(false),
  created_at: timestamp("created_at").defaultNow().notNull(),
  updated_at: timestamp("updated_at").defaultNow().notNull(),
 });
@@ -451,3 +495,4 @@ export type CheckpointType = InferSelectModel<typeof checkpointTable>;
 export type CheckpointVolumeType = InferSelectModel<
  typeof checkpointVolumeTable
 >;
+export type UserUsageType = InferSelectModel<typeof userUsageTable>;
@@ -3,7 +3,7 @@ import { z } from "zod";
 export const APIKeyBodyRequest = z.object({
  user_id: z.string().optional().nullable(),
  org_id: z.string().optional().nullable(),
-  iat: z.number(),
+  iat: z.number().optional(),
  exp: z.number().optional(),
 });

@@ -14,7 +14,7 @@ export const insertCustomMachineSchema = createInsertSchema(machinesTable, {
  gpu: (schema) => schema.gpu.default("T4"),
  snapshot: (schema) =>
    schema.snapshot.default({
-      comfyui: "8e3ee6468f4c2801c4736c139fd5632c25fbcab7",
+      comfyui: "d0165d819afe76bd4e6bdd710eb5f3e571b6a804",
      git_custom_nodes: {
        "https://github.com/BennyKok/comfyui-deploy.git": {
          hash: "43fe0a384aa5fa9e141d4a264b2ed40a73b817bc",
@@ -66,7 +66,12 @@ export const createRun = withServerPromise(
      throw new Error("Workflow version not found");
    }

-    if (apiUser)
+    let { userId, orgId } = auth();
+
+    // If is API user, check if they have access to the workflow
+    if (apiUser) {
+      userId = apiUser.user_id ?? null;
+      orgId = apiUser.org_id;
      if (apiUser.org_id) {
        // is org api call, check org only
        if (apiUser.org_id != workflow_version_data.workflow.org_id) {
@@ -81,6 +86,7 @@ export const createRun = withServerPromise(
          throw new Error("Workflow not found");
        }
      }
+    }

    const workflow_api = workflow_version_data.workflow_api;

@@ -114,6 +120,10 @@ export const createRun = withServerPromise(
        workflow_inputs: inputs,
        machine_id: machine.id,
        origin: runOrigin,
+        org_id: orgId,
+        user_id: userId,
+        gpu: machine.gpu,
+        machine_type: machine.type,
      })
      .returning();

@@ -6,16 +6,13 @@ import jwt from "jsonwebtoken";
 import { getOrgOrUserDisplayName } from "@/server/getOrgOrUserDisplayName";
 import { withServerPromise } from "@/server/withServerPromise";
 import "server-only";
-import { headers } from "next/headers";
+import { getUrlServerSide } from "./getUrlServerSide";

 export const editWorkflowOnMachine = withServerPromise(
  async (workflow_version_id: string, machine_id: string) => {
    const { userId, orgId } = auth();

-    const headersList = headers();
-    const host = headersList.get("host") || "";
-    const protocol = headersList.get("x-forwarded-proto") || "";
-    const domain = `${protocol}://${host}`;
+    const domain = getUrlServerSide();

    if (!userId) {
      throw new Error("No user id");
@@ -0,0 +1,32 @@
+import { db } from "@/db/db";
+import { and, desc, eq, isNull } from "drizzle-orm";
+import { subscriptionStatusTable } from "@/db/schema";
+import { APIKeyUserType } from "@/server/APIKeyBodyRequest";
+import { auth } from "@clerk/nextjs";
+
+export async function getCurrentPlanWithAuth() {
+  const { userId, orgId } = auth();
+
+  const sub = await getCurrentPlan({
+    org_id: orgId,
+    user_id: userId,
+  });
+
+  return sub;
+}
+
+export async function getCurrentPlan({ user_id, org_id }: APIKeyUserType) {
+  if (!user_id) throw new Error("No user id");
+
+  const sub = await db.query.subscriptionStatusTable.findFirst({
+    where: and(
+      eq(subscriptionStatusTable.user_id, user_id),
+      org_id
+        ? eq(subscriptionStatusTable.org_id, org_id)
+        : isNull(subscriptionStatusTable.org_id),
+    ),
+    orderBy: desc(subscriptionStatusTable.created_at),
+  });
+
+  return sub;
+}
@@ -0,0 +1,10 @@
+import { headers } from "next/headers";
+
+export function getUrlServerSide() {
+  const headersList = headers();
+  const host = headersList.get("host") || "";
+  const protocol = headersList.get("x-forwarded-proto") || "";
+  const domain = `${protocol}://${host}`;
+
+  return domain;
+}
@@ -0,0 +1,3 @@
+import Stripe from "stripe";
+
+export const stripe = new Stripe(process.env.STRIPE_API_KEY!);