[paywall] [checkout] Create checkout and paywall

Author: swashata

src/app/api/ai/route.ts

@@ -1,6 +1,6 @@
 import { headers } from 'next/headers';
 import { auth } from '@/lib/auth';
-import { deductCredits } from '@/lib/user-entitlement';
+import { deductCredits, getUserEntitlement, hasCredits } from '@/lib/user-entitlement';
 import { getAiResponse } from '@/lib/ai';
 
 export async function POST(request: Request) {
@@ -18,6 +18,28 @@ export async function POST(request: Request) {
         );
     }
 
+    const entitlement = await getUserEntitlement(session.user.id);
+
+    if (!entitlement) {
+        return Response.json(
+            {
+                code: 'no_active_purchase',
+                message: 'You do not have an active license to use this feature.',
+            },
+            { status: 403 }
+        );
+    }
+
+    if (!(await hasCredits(session.user.id, 100))) {
+        return Response.json(
+            {
+                code: 'insufficient_credits',
+                message: 'You do not have enough credits to use this feature.',
+            },
+            { status: 403 }
+        );
+    }
+
     /**
      * Here you would implement the AI asset generation and credit consumption logic.
      * For demonstration, we will just return a dummy response and deduct 100 credits.

src/app/chat/ai-app.tsx

@@ -3,20 +3,28 @@
 import { useState } from 'react';
 import LoginModal from '@/components/login-modal';
 import { AIChat } from '@/components/ai-chat';
+import { Paywall, usePaywall } from '@/react-starter/components/paywall';
 
 export default function AiApp(props: { examples: string[] }) {
     const { examples } = props;
     const [isShowingLogin, setIsShowingLogin] = useState<boolean>(false);
+    const { hidePaywall, state, showNoActivePurchase, showInsufficientCredits } = usePaywall();
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleApiError = (data: any) => {
         if (data.code === 'unauthenticated') {
             setIsShowingLogin(true);
+        } else if (data.code === 'no_active_purchase') {
+            showNoActivePurchase();
+        } else if (data.code === 'insufficient_credits') {
+            showInsufficientCredits();
         }
     };
 
     return (
         <>
+            <Paywall state={state} hidePaywall={hidePaywall} />
+
             <LoginModal isShowing={isShowingLogin} onClose={() => setIsShowingLogin(false)} />
 
             <AIChat examples={examples} onApiError={handleApiError} />

src/app/chat/page.tsx

@@ -3,15 +3,24 @@ import { auth } from '@/lib/auth';
 import { headers } from 'next/headers';
 import { examples } from '@/lib/ai';
 import AiApp from './ai-app';
+import { freemius } from '@/lib/freemius';
+import FSCheckoutProvider from '@/components/fs-checkout';
 
 export default async function Dashboard() {
     const session = await auth.api.getSession({
         headers: await headers(),
     });
 
+    const checkout = await freemius.checkout.create({
+        user: session?.user,
+        isSandbox: process.env.NODE_ENV !== 'production',
+    });
+
     return (
         <AppMain title="New Chat" isLoggedIn={!!session}>
-            <AiApp examples={examples} />
+            <FSCheckoutProvider checkout={checkout.serialize()}>
+                <AiApp examples={examples} />
+            </FSCheckoutProvider>
         </AppMain>
     );
 }

src/components/fs-checkout.tsx

@@ -2,7 +2,7 @@
 
 import { CheckoutProvider } from '@/react-starter/components/checkout-provider';
 import { CheckoutSerialized } from '@freemius/sdk';
-import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react';
+import { IconCircleCheck } from '@tabler/icons-react';
 import * as React from 'react';
 import { toast } from 'sonner';