feat: Add the ability to disable the credit billing system

Author: LubomirGeorgiev

src/actions/credits.action.ts

@@ -9,7 +9,7 @@ import {
 } from "@/utils/credits";
 import { CREDIT_TRANSACTION_TYPE } from "@/db/schema";
 import { getStripe } from "@/lib/stripe";
-import { MAX_TRANSACTIONS_PER_PAGE, CREDITS_EXPIRATION_YEARS } from "@/constants";
+import { MAX_TRANSACTIONS_PER_PAGE, CREDITS_EXPIRATION_YEARS, DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants";
 import ms from "ms";
 import { withRateLimit, RATE_LIMITS } from "@/utils/with-rate-limit";
 import { updateAllSessionsOfUser } from "@/utils/kv-session";
@@ -68,6 +68,10 @@ export async function getTransactions({ page, limit = MAX_TRANSACTIONS_PER_PAGE
 
 export async function createPaymentIntent({ packageId }: CreatePaymentIntentInput) {
   return withRateLimit(async () => {
+    if (DISABLE_CREDIT_BILLING_SYSTEM) {
+      throw new Error("Credit billing system is disabled");
+    }
+
     const session = await requireVerifiedEmail();
     if (!session) {
       throw new Error("Unauthorized");
@@ -103,6 +107,10 @@ export async function createPaymentIntent({ packageId }: CreatePaymentIntentInpu
 
 export async function confirmPayment({ packageId, paymentIntentId }: PurchaseCreditsInput) {
   return withRateLimit(async () => {
+    if (DISABLE_CREDIT_BILLING_SYSTEM) {
+      throw new Error("Credit billing system is disabled");
+    }
+
     const session = await requireVerifiedEmail();
     if (!session) {
       throw new Error("Unauthorized");

src/app/(dashboard)/dashboard/billing/_components/transaction-history.tsx

@@ -18,6 +18,7 @@ import { format, isPast } from "date-fns";
 import { Badge } from "@/components/ui/badge";
 import { useTransactionStore } from "@/state/transaction";
 import { useQueryState } from "nuqs";
+import { DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants";
 
 type TransactionData = Awaited<ReturnType<typeof getTransactions>>
 
@@ -51,6 +52,10 @@ export function TransactionHistory() {
     setPage(newPage.toString());
   };
 
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return null;
+  }
+
   if (isLoading) {
     return (
       <Card>

src/app/(dashboard)/dashboard/billing/page.tsx

@@ -4,6 +4,8 @@ import { PageHeader } from "@/components/page-header";
 import { TransactionHistory } from "./_components/transaction-history";
 import { CreditPackages } from "./_components/credit-packages";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants";
+import { CreditSystemDisabled } from "@/components/credit-system-disabled";
 
 export default async function BillingPage() {
   const session = await getSessionFromCookie();
@@ -27,12 +29,18 @@ export default async function BillingPage() {
         ]}
       />
       <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-        <CreditPackages />
-        <div className="mt-4">
-          <NuqsAdapter>
-            <TransactionHistory />
-          </NuqsAdapter>
-        </div>
+        {DISABLE_CREDIT_BILLING_SYSTEM ? (
+          <CreditSystemDisabled />
+        ) : (
+          <>
+            <CreditPackages />
+            <div className="mt-4">
+              <NuqsAdapter>
+                <TransactionHistory />
+              </NuqsAdapter>
+            </div>
+          </>
+        )}
       </div>
     </>
   );

src/app/(dashboard)/dashboard/marketplace/page.tsx

@@ -4,6 +4,8 @@ import { COMPONENTS } from "./components-catalog"
 import { MarketplaceCard } from "@/components/marketplace-card"
 import { getSessionFromCookie } from "@/utils/auth"
 import { getUserPurchasedItems } from "@/utils/credits"
+import { DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants"
+import { CreditSystemDisabled } from "@/components/credit-system-disabled"
 
 export default async function MarketplacePage() {
   const session = await getSessionFromCookie();
@@ -20,33 +22,39 @@ export default async function MarketplacePage() {
         ]}
       />
       <div className="container mx-auto px-5 pb-12">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold mt-4">Component Marketplace</h1>
-          <p className="text-muted-foreground mt-2">
-            Purchase and use our premium components using your credits
-          </p>
-        </div>
+        {DISABLE_CREDIT_BILLING_SYSTEM ? (
+          <CreditSystemDisabled />
+        ) : (
+          <>
+            <div className="mb-8">
+              <h1 className="text-4xl font-bold mt-4">Component Marketplace</h1>
+              <p className="text-muted-foreground mt-2">
+                Purchase and use our premium components using your credits
+              </p>
+            </div>
 
-        <Alert
-          color="warning"
-          title="Demo Template Feature"
-          description="This marketplace page demonstrates how to implement a credit-based billing system in your SaaS application. Feel free to use this as a starting point and customize it for your specific needs."
-          className="mb-6"
-        />
-
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {COMPONENTS.map((component) => (
-            <MarketplaceCard
-              key={component.id}
-              id={component.id}
-              name={component.name}
-              description={component.description}
-              credits={component.credits}
-              containerClass={component.containerClass}
-              isPurchased={purchasedItems.has(`COMPONENT:${component.id}`)}
+            <Alert
+              color="warning"
+              title="Demo Template Feature"
+              description="This marketplace page demonstrates how to implement a credit-based billing system in your SaaS application. Feel free to use this as a starting point and customize it for your specific needs."
+              className="mb-6"
             />
-          ))}
-        </div>
+
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {COMPONENTS.map((component) => (
+                <MarketplaceCard
+                  key={component.id}
+                  id={component.id}
+                  name={component.name}
+                  description={component.description}
+                  credits={component.credits}
+                  containerClass={component.containerClass}
+                  isPurchased={purchasedItems.has(`COMPONENT:${component.id}`)}
+                />
+              ))}
+            </div>
+          </>
+        )}
       </div>
     </>
   )

src/app/(dashboard)/dashboard/marketplace/purchase.action.ts

@@ -9,6 +9,7 @@ import { getDB } from "@/db";
 import { purchasedItemsTable, PURCHASABLE_ITEM_TYPE } from "@/db/schema";
 import { and, eq } from "drizzle-orm";
 import { COMPONENTS } from "@/app/(dashboard)/dashboard/marketplace/components-catalog";
+import { DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants";
 
 const purchaseSchema = z.object({
   itemId: z.string(),
@@ -20,6 +21,13 @@ export const purchaseAction = createServerAction()
   .handler(async ({ input }) => {
     return withRateLimit(
       async () => {
+        if (DISABLE_CREDIT_BILLING_SYSTEM) {
+          throw new ZSAError(
+            "INSUFFICIENT_CREDITS",
+            "Marketplace is not available when credit billing is disabled"
+          );
+        }
+
         const session = await getSessionFromCookie();
 
         if (!session) {
@@ -45,19 +53,6 @@ export const purchaseAction = createServerAction()
           );
         }
 
-        // Check if user has enough credits
-        const hasCredits = await hasEnoughCredits({
-          userId: session.userId,
-          requiredCredits: itemDetails.credits,
-        });
-
-        if (!hasCredits) {
-          throw new ZSAError(
-            "INSUFFICIENT_CREDITS",
-            "You don't have enough credits to purchase this item"
-          );
-        }
-
         const db = getDB();
 
         // Check if user already owns the item
@@ -76,14 +71,27 @@ export const purchaseAction = createServerAction()
           );
         }
 
-        // Use credits first
+        // Check if user has enough credits
+        const hasCredits = await hasEnoughCredits({
+          userId: session.userId,
+          requiredCredits: itemDetails.credits,
+        });
+
+        if (!hasCredits) {
+          throw new ZSAError(
+            "INSUFFICIENT_CREDITS",
+            "You don't have enough credits to purchase this item"
+          );
+        }
+
+        // Use credits
         await consumeCredits({
           userId: session.userId,
           amount: itemDetails.credits,
           description: `Purchased ${input.itemType.toLowerCase()}: ${itemDetails.name}`,
         });
 
-        // Then add item to user's purchased items
+        // Add item to user's purchased items
         await db.insert(purchasedItemsTable).values({
           userId: session.userId,
           itemType: input.itemType,

src/components/app-sidebar.tsx

@@ -27,6 +27,7 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar"
 import { useSessionStore } from "@/state/session"
+import { DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants"
 
 export type NavItem = {
   title: string
@@ -94,11 +95,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         url: "/dashboard/teams" as Route,
         icon: Users,
       },
-      {
+      ...(!DISABLE_CREDIT_BILLING_SYSTEM ? [{
         title: "Marketplace",
-        url: "/dashboard/marketplace",
+        url: "/dashboard/marketplace" as Route,
         icon: ShoppingCart,
-      },
+      }] : []),
       {
         title: "Billing",
         url: "/dashboard/billing",

src/components/credit-system-disabled.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Coins } from "lucide-react";
+
+export function CreditSystemDisabled() {
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-center justify-center py-16 px-4">
+        <div className="text-center space-y-4 max-w-md">
+          <div className="flex justify-center">
+            <Coins className="h-16 w-16 text-muted-foreground/50" />
+          </div>
+          <h2 className="text-2xl font-semibold">Credit System Disabled</h2>
+          <p className="text-muted-foreground">
+            The credit billing system is currently disabled. All features are available without credit restrictions.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/constants.ts

@@ -15,14 +15,14 @@ export const SESSION_COOKIE_NAME = "session";
 export const GOOGLE_OAUTH_STATE_COOKIE_NAME = "google-oauth-state";
 export const GOOGLE_OAUTH_CODE_VERIFIER_COOKIE_NAME = "google-oauth-code-verifier";
 
+export const DISABLE_CREDIT_BILLING_SYSTEM = false;
 export const CREDIT_PACKAGES = [
   { id: "package-1", credits: 500, price: 5 },
   { id: "package-2", credits: 1200, price: 10 },
   { id: "package-3", credits: 3000, price: 20 },
 ] as const;
-
 export const CREDITS_EXPIRATION_YEARS = 2;
-
 export const FREE_MONTHLY_CREDITS = CREDIT_PACKAGES[0].credits * 0.1;
+
 export const MAX_TRANSACTIONS_PER_PAGE = 10;
 export const REDIRECT_AFTER_SIGN_IN = "/dashboard" as Route;

src/utils/credits.ts

@@ -3,7 +3,7 @@ import { eq, sql, desc, and, lt, isNull, gt, or, asc } from "drizzle-orm";
 import { getDB } from "@/db";
 import { userTable, creditTransactionTable, CREDIT_TRANSACTION_TYPE, purchasedItemsTable } from "@/db/schema";
 import { updateAllSessionsOfUser, KVSession } from "./kv-session";
-import { CREDIT_PACKAGES, FREE_MONTHLY_CREDITS } from "@/constants";
+import { CREDIT_PACKAGES, FREE_MONTHLY_CREDITS, DISABLE_CREDIT_BILLING_SYSTEM } from "@/constants";
 
 export type CreditPackage = typeof CREDIT_PACKAGES[number];
 
@@ -26,6 +26,10 @@ function shouldRefreshCredits(session: KVSession, currentTime: Date): boolean {
 }
 
 async function processExpiredCredits(userId: string, currentTime: Date) {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return;
+  }
+
   const db = getDB();
   // Find all expired transactions that haven't been processed and have remaining credits
   // Order by type to process MONTHLY_REFRESH first, then by creation date
@@ -82,6 +86,10 @@ async function processExpiredCredits(userId: string, currentTime: Date) {
 }
 
 export async function addUserCredits(userId: string, creditsToAdd: number) {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return;
+  }
+
   const db = getDB();
   await db
     .update(userTable)
@@ -106,6 +114,10 @@ export async function logTransaction({
   expirationDate?: Date;
   paymentIntentId?: string;
 }) {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return;
+  }
+
   const db = getDB();
   await db.insert(creditTransactionTable).values({
     userId,
@@ -119,6 +131,10 @@ export async function logTransaction({
 }
 
 export async function addFreeMonthlyCreditsIfNeeded(session: KVSession): Promise<number> {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return 0;
+  }
+
   const currentTime = new Date();
 
   // Check if it's been at least a month since last refresh
@@ -203,6 +219,10 @@ export async function addFreeMonthlyCreditsIfNeeded(session: KVSession): Promise
 }
 
 export async function hasEnoughCredits({ userId, requiredCredits }: { userId: string; requiredCredits: number }) {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return true;
+  }
+
   const user = await getDB().query.userTable.findFirst({
     where: eq(userTable.id, userId),
     columns: {
@@ -215,6 +235,10 @@ export async function hasEnoughCredits({ userId, requiredCredits }: { userId: st
 }
 
 export async function consumeCredits({ userId, amount, description }: { userId: string; amount: number; description: string }) {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return 0;
+  }
+
   const db = getDB();
 
   // First check if user has enough credits
@@ -322,6 +346,17 @@ export async function getCreditTransactions({
   page?: number;
   limit?: number;
 }) {
+  if (DISABLE_CREDIT_BILLING_SYSTEM) {
+    return {
+      transactions: [],
+      pagination: {
+        total: 0,
+        pages: 0,
+        current: page,
+      },
+    };
+  }
+
   const db = getDB();
   const transactions = await db.query.creditTransactionTable.findMany({
     where: eq(creditTransactionTable.userId, userId),