Update layout script source and enhance ProPlan component with usage limit notification

Author: goldflag

client/src/app/layout.tsx

@@ -94,8 +94,8 @@ export default function RootLayout({
       </TooltipProvider>
       {globalThis?.location?.hostname === "app.rybbit.io" && (
         <Script
-          src="https://app.rybbit.io/api/script.js"
-          data-site-id="349"
+          src="https://demo.rybbit.io/api/script.js"
+          data-site-id="22"
           strategy="afterInteractive"
         />
       )}

client/src/app/settings/subscription/components/ProPlan.tsx

@@ -167,6 +167,25 @@ export function ProPlan() {
                   </div>
                   <Progress value={usagePercentage} />
                 </div>
+
+                {currentUsage >= eventLimit && (
+                  <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-md border border-amber-200 dark:border-amber-800">
+                    <div className="flex items-center justify-between">
+                      <p className="text-sm text-amber-700 dark:text-amber-300">
+                        <strong>Usage limit reached!</strong> You've exceeded
+                        your plan's event limit.
+                      </p>
+                      <Button
+                        variant="success"
+                        size="sm"
+                        onClick={handleChangePlan}
+                        disabled={isProcessing}
+                      >
+                        Upgrade Plan
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
 

server/src/api/sites/addSite.ts

@@ -2,7 +2,7 @@ import { FastifyReply, FastifyRequest } from "fastify";
 import { db } from "../../db/postgres/postgres.js";
 import { sites } from "../../db/postgres/schema.js";
 import { loadAllowedDomains } from "../../lib/allowedDomains.js";
-import { auth } from "../../lib/auth.js";
+import { getSessionFromReq } from "../../lib/auth-utils.js";
 import { siteConfig } from "../../lib/siteConfig.js";
 
 export async function addSite(
@@ -36,9 +36,7 @@ export async function addSite(
   }
 
   try {
-    // Get the current user's session
-    const headers = new Headers(request.headers as any);
-    const session = await auth!.api.getSession({ headers });
+    const session = await getSessionFromReq(request);
 
     if (!session?.user?.id) {
       return reply.status(401).send({

server/src/api/sites/getSites.ts

@@ -59,7 +59,7 @@ export async function getSites(req: FastifyRequest, reply: FastifyReply) {
         let isOwner = false;
         let ownerId = "";
 
-        if (!IS_CLOUD || godMode) {
+        if (!IS_CLOUD) {
           return {
             ...site,
             monthlyEventCount: 0,

server/src/api/stripe/getSubscription.ts

@@ -65,28 +65,30 @@ export async function getSubscriptionInner(userId: string) {
         console.error("Plan details not found for price ID:", priceId);
         // Still return the basic subscription info even if local plan details missing
         return {
-					id: subscription.id,
-					planName: "Unknown Plan", // Indicate missing details
-					status: subscription.status,
-					currentPeriodEnd: new Date(subscriptionItem.current_period_end * 1000),
-					cancelAtPeriodEnd: subscription.cancel_at_period_end,
-					eventLimit: 0, // Unknown limit
-					monthlyEventCount: user.monthlyEventCount,
-					interval: subscriptionItem.price.recurring?.interval ?? "unknown",
-				};
+          id: subscription.id,
+          planName: "Unknown Plan", // Indicate missing details
+          status: subscription.status,
+          currentPeriodEnd: new Date(
+            subscriptionItem.current_period_end * 1000
+          ),
+          cancelAtPeriodEnd: subscription.cancel_at_period_end,
+          eventLimit: 0, // Unknown limit
+          monthlyEventCount: user.monthlyEventCount,
+          interval: subscriptionItem.price.recurring?.interval ?? "unknown",
+        };
       }
 
       // 4. Format and return the subscription data
       const responseData = {
-				id: subscription.id,
-				planName: planDetails.name,
-				status: subscription.status,
-				currentPeriodEnd: new Date(subscriptionItem.current_period_end * 1000),
-				cancelAtPeriodEnd: subscription.cancel_at_period_end,
-				eventLimit: planDetails.limits.events,
-				monthlyEventCount: user.monthlyEventCount,
-				interval: subscriptionItem.price.recurring?.interval ?? "unknown",
-			};
+        id: subscription.id,
+        planName: planDetails.name,
+        status: subscription.status,
+        currentPeriodEnd: new Date(subscriptionItem.current_period_end * 1000),
+        cancelAtPeriodEnd: subscription.cancel_at_period_end,
+        eventLimit: planDetails.limits.events,
+        monthlyEventCount: user.monthlyEventCount,
+        interval: subscriptionItem.price.recurring?.interval ?? "unknown",
+      };
 
       return responseData;
     }

server/src/api/user/getUserOrganizations.ts

@@ -2,14 +2,14 @@ import { FastifyRequest, FastifyReply } from "fastify";
 import { db } from "../../db/postgres/postgres.js";
 import { eq } from "drizzle-orm";
 import { member, organization } from "../../db/postgres/schema.js";
-import { getSession } from "../../lib/auth-utils.js";
+import { getSessionFromReq } from "../../lib/auth-utils.js";
 
 export const getUserOrganizations = async (
   request: FastifyRequest,
   reply: FastifyReply
 ) => {
   try {
-    const session = await getSession(request);
+    const session = await getSessionFromReq(request);
 
     if (!session?.user.id) {
       return reply.status(401).send({ error: "Unauthorized" });

server/src/api/user/listOrganizationMembers.ts

@@ -3,6 +3,7 @@ import { db } from "../../db/postgres/postgres.js";
 import { member, user } from "../../db/postgres/schema.js";
 import { eq, and } from "drizzle-orm";
 import { auth } from "../../lib/auth.js";
+import { getSessionFromReq } from "../../lib/auth-utils.js";
 
 interface ListOrganizationMembersRequest {
   Params: {
@@ -25,9 +26,7 @@ export async function listOrganizationMembers(
   try {
     const { organizationId } = request.params;
 
-    // Get current user's session
-    const headers = new Headers(request.headers as any);
-    const session = await auth!.api.getSession({ headers });
+    const session = await getSessionFromReq(request);
 
     if (!session?.user?.id) {
       return reply.status(401).send({

server/src/cron/index.ts

@@ -6,7 +6,7 @@ import { updateUsersMonthlyUsage } from "./monthly-usage-checker.js";
 export async function initializeCronJobs() {
   console.log("Initializing cron jobs...");
 
-  if (IS_CLOUD) {
+  if (IS_CLOUD && process.env.NODE_ENV !== "development") {
     // Schedule the monthly usage checker to run every 5 minutes
     cron.schedule("*/5 * * * *", updateUsersMonthlyUsage);
     updateUsersMonthlyUsage();

server/src/index.ts

@@ -45,13 +45,11 @@ import { listOrganizationMembers } from "./api/user/listOrganizationMembers.js";
 import { initializeCronJobs } from "./cron/index.js";
 import { initializeClickhouse } from "./db/clickhouse/clickhouse.js";
 import { allowList, loadAllowedDomains } from "./lib/allowedDomains.js";
-import { mapHeaders } from "./lib/auth-utils.js";
+import { getSessionFromReq, mapHeaders } from "./lib/auth-utils.js";
 import { auth } from "./lib/auth.js";
 import { siteConfig } from "./lib/siteConfig.js";
 import { trackEvent } from "./tracker/trackEvent.js";
 import { extractSiteId, isSitePublic, normalizeOrigin } from "./utils.js";
-
-// Import Stripe handlers
 import { createCheckoutSession } from "./api/stripe/createCheckoutSession.js";
 import { createPortalSession } from "./api/stripe/createPortalSession.js";
 import { getSubscription } from "./api/stripe/getSubscription.js";
@@ -182,11 +180,7 @@ server.addHook("onRequest", async (request, reply) => {
   }
 
   try {
-    // Convert Fastify headers object into Fetch-compatible Headers
-    const headers = new Headers(request.headers as HeadersInit);
-
-    // Get session from BetterAuth
-    const session = await auth!.api.getSession({ headers });
+    const session = await getSessionFromReq(request);
 
     if (!session) {
       return reply.status(401).send({ error: "Unauthorized" });

server/src/lib/auth-utils.ts

@@ -16,15 +16,14 @@ export function mapHeaders(headers: any) {
   return map;
 }
 
-export async function getSession(req: FastifyRequest) {
+export async function getSessionFromReq(req: FastifyRequest) {
   const headers = new Headers(req.headers as any);
   const session = await auth!.api.getSession({ headers });
   return session;
 }
 
 export async function getUserGodMode(req: FastifyRequest) {
-  const headers = new Headers(req.headers as any);
-  const session = await auth!.api.getSession({ headers });
+  const session = await getSessionFromReq(req);
   const userId = session?.user.id;
 
   if (!userId) {
@@ -43,8 +42,7 @@ export async function getSitesUserHasAccessTo(
   req: FastifyRequest,
   adminOnly = false
 ) {
-  const headers = new Headers(req.headers as any);
-  const session = await auth!.api.getSession({ headers });
+  const session = await getSessionFromReq(req);
 
   const userId = session?.user.id;