[webhook] Beautify the webhook listener code

Author: swashata

src/app/billing/page.tsx

@@ -3,7 +3,7 @@ import { freemius } from '@/lib/freemius';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { CustomerPortal } from '@/react-starter/components/customer-portal';
-import FSCheckoutProvider from '@/components/fs-checkout';
+import AppCheckoutProvider from '@/components/app-checkout-provider';
 import AppMain, { AppContent } from '@/components/app-main';
 
 export default async function Billing() {
@@ -23,9 +23,9 @@ export default async function Billing() {
     return (
         <AppMain title="Billing" isLoggedIn={true}>
             <AppContent>
-                <FSCheckoutProvider checkout={checkout.serialize()}>
+                <AppCheckoutProvider checkout={checkout.serialize()}>
                     <CustomerPortal endpoint={process.env.NEXT_PUBLIC_APP_URL! + '/api/portal'} />
-                </FSCheckoutProvider>
+                </AppCheckoutProvider>
             </AppContent>
         </AppMain>
     );

src/app/chat/page.tsx

@@ -4,7 +4,7 @@ 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';
+import AppCheckoutProvider from '@/components/app-checkout-provider';
 
 export default async function Dashboard() {
     const session = await auth.api.getSession({
@@ -18,9 +18,9 @@ export default async function Dashboard() {
 
     return (
         <AppMain title="New Chat" isLoggedIn={!!session}>
-            <FSCheckoutProvider checkout={checkout.serialize()}>
+            <AppCheckoutProvider checkout={checkout.serialize()}>
                 <AiApp examples={examples} />
-            </FSCheckoutProvider>
+            </AppCheckoutProvider>
         </AppMain>
     );
 }

src/app/credits/credits.tsx

@@ -1,7 +1,6 @@
 '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; hasSubscription: boolean }) {
@@ -14,9 +13,5 @@ export default function Credits(props: { credits?: number; hasSubscription: bool
         </div>
     );
 
-    if (hasSubscription) {
-        return <Topup>{info}</Topup>;
-    }
-
     return <Subscribe>{info}</Subscribe>;
 }

src/app/credits/page.tsx

@@ -6,7 +6,7 @@ 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';
+import AppCheckoutProvider from '@/components/app-checkout-provider';
 
 export default async function CreditsPage() {
     const session = await auth.api.getSession({
@@ -29,9 +29,9 @@ export default async function CreditsPage() {
         <AppMain title="Credits & Topups" isLoggedIn={true}>
             <AppContent>
                 <ErrorBoundary>
-                    <FSCheckoutProvider checkout={checkout.serialize()}>
+                    <AppCheckoutProvider checkout={checkout.serialize()}>
                         <Credits credits={credits} hasSubscription={!!entitlement} />
-                    </FSCheckoutProvider>
+                    </AppCheckoutProvider>
                 </ErrorBoundary>
             </AppContent>
         </AppMain>

src/app/webhook/route.ts

@@ -1,24 +1,24 @@
 import { freemius } from '@/lib/freemius';
 import { deleteEntitlement, renewCreditsFromWebhook, syncEntitlementFromWebhook } from '@/lib/user-entitlement';
+import { WebhookEventType } from '@freemius/sdk';
 
 const listener = freemius.webhook.createListener();
 
-listener.on(
-    [
-        'license.created',
-        'license.extended',
-        'license.shortened',
-        'license.updated',
-        'license.cancelled',
-        'license.expired',
-        'license.plan.changed',
-    ],
-    async ({ objects: { license } }) => {
-        if (license && license.id) {
-            await syncEntitlementFromWebhook(license.id);
-        }
+const licenseEvents: WebhookEventType[] = [
+    'license.created',
+    'license.extended',
+    'license.shortened',
+    'license.updated',
+    'license.cancelled',
+    'license.expired',
+    'license.plan.changed',
+];
+
+listener.on(licenseEvents, async ({ objects: { license } }) => {
+    if (license && license.id) {
+        await syncEntitlementFromWebhook(license.id);
     }
-);
+});
 
 listener.on('license.deleted', async ({ data }) => {
     await deleteEntitlement(data.license_id);

src/components/fs-checkout.tsx src/components/app-checkout-provider.tsxsrc/components/fs-checkout.tsx renamed to src/components/app-checkout-provider.tsx

@@ -2,23 +2,15 @@
 
 import { CheckoutProvider } from '@/react-starter/components/checkout-provider';
 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 }) {
+export default function AppCheckoutProvider(props: { children: React.ReactNode; checkout: CheckoutSerialized }) {
     const router = useRouter();
 
     const onAfterSync = React.useCallback(() => {
-        handlePurchase();
+        toast.success(`Successfully updated your subscription! Now you can continue using the app.`);
         router.refresh();
     }, [router]);