[credits] Finish the credits page

Author: swashata

src/app/credits/credits.tsx

@@ -1,14 +1,22 @@
 'use client';
 
+import { Subscribe } from '@/react-starter/components/subscribe';
+import { Topup } from '@/react-starter/components/topup';
 import { formatNumber } from '@/react-starter/utils/formatter';
 
-export default function Credits(props: { credits?: number }) {
-    const { credits } = props;
+export default function Credits(props: { credits?: number; hasSubscription: boolean }) {
+    const { credits, hasSubscription } = props;
 
-    return (
+    const info = (
         <div className="text-center">
             <h2 className="text-lg font-medium">You have {formatNumber(credits ?? 0)} credits</h2>
             <p className="mb-10 text-muted-foreground">You can purchase more credits below.</p>
         </div>
     );
+
+    if (hasSubscription) {
+        return <Topup>{info}</Topup>;
+    }
+
+    return <Subscribe>{info}</Subscribe>;
 }

src/app/credits/page.tsx

@@ -1,10 +1,12 @@
 import AppMain, { AppContent } from '@/components/app-main';
 import { auth } from '@/lib/auth';
-import { getCredits } from '@/lib/user-entitlement';
+import { getCredits, getUserEntitlement } from '@/lib/user-entitlement';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { ErrorBoundary } from '@/components/error';
 import Credits from './credits';
+import { freemius } from '@/lib/freemius';
+import FSCheckoutProvider from '@/components/fs-checkout';
 
 export default async function CreditsPage() {
     const session = await auth.api.getSession({
@@ -15,13 +17,21 @@ export default async function CreditsPage() {
         redirect('/login');
     }
 
+    const entitlement = await getUserEntitlement(session.user.id);
     const credits = await getCredits(session.user.id);
 
+    const checkout = await freemius.checkout.create({
+        user: session?.user,
+        isSandbox: process.env.NODE_ENV !== 'production',
+    });
+
     return (
         <AppMain title="Credits & Topups" isLoggedIn={true}>
             <AppContent>
                 <ErrorBoundary>
-                    <Credits credits={credits} />
+                    <FSCheckoutProvider checkout={checkout.serialize()}>
+                        <Credits credits={credits} hasSubscription={!!entitlement} />
+                    </FSCheckoutProvider>
                 </ErrorBoundary>
             </AppContent>
         </AppMain>

src/components/fs-checkout.tsx

@@ -5,17 +5,26 @@ import { CheckoutSerialized } from '@freemius/sdk';
 import { IconCircleCheck } from '@tabler/icons-react';
 import * as React from 'react';
 import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
 
 const handlePurchase = () => {
     toast.success(`Purchase successful`, {
         icon: <IconCircleCheck className="w-6 h-6 text-grow" />,
         description: 'You can now use the feature you just purchased.',
     });
 };
+
 export default function FSCheckoutProvider(props: { children: React.ReactNode; checkout: CheckoutSerialized }) {
+    const router = useRouter();
+
+    const onAfterSync = React.useCallback(() => {
+        handlePurchase();
+        router.refresh();
+    }, [router]);
+
     return (
         <CheckoutProvider
-            onAfterSync={handlePurchase}
+            onAfterSync={onAfterSync}
             checkout={props.checkout}
             endpoint={process.env.NEXT_PUBLIC_APP_URL! + '/api/checkout'}
         >