server/src/analytics-script/sessionReplay.ts (2)

123-126: Don’t swallow recorder initialization errors silently.

At least log a warning so we can diagnose missing session replays in prod.

-    } catch (error) {
-      // Recording failed silently
-    }
+    } catch (error) {
+      // Recording failed
+      console.warn("[session-replay] startRecording failed:", error);
+    }

---

159-166: Guard against overlapping flushes (race/ordering risk).

flushEvents() can overlap if the timer fires while a prior flush is in-flight, causing out-of-order batches and confusing retries.

 export class SessionReplayRecorder {
   private config: ScriptConfig;
   private isRecording: boolean = false;
   private stopRecordingFn?: () => void;
   private userId: string;
   private eventBuffer: SessionReplayEvent[] = [];
   private batchTimer?: number;
   private sendBatch: (batch: SessionReplayBatch) => Promise<void>;
+  private isFlushing = false;

@@
   private async flushEvents(): Promise<void> {
-    if (this.eventBuffer.length === 0) {
+    if (this.eventBuffer.length === 0 || this.isFlushing) {
       return;
     }
 
+    this.isFlushing = true;
     const events = [...this.eventBuffer];
     this.eventBuffer = [];
@@
     try {
       await this.sendBatch(batch);
     } catch (error) {
       // Re-queue the events for retry since this batch failed
       this.eventBuffer.unshift(...events);
     }
+    this.isFlushing = false;
   }

Also applies to: 175-200

client/src/lib/stripe.ts (1)

289-297: Brittle env check for live vs. test mapping (risk of wrong price IDs).

Client gates on NEXT_PUBLIC_BACKEND_URL.includes("app.rybbit.io") while server uses sk_live. These can diverge and send wrong IDs. Prefer a single, reliable signal (e.g., pk_live on the public key) or fetch prices from the server.

-export const getStripePrices = () => {
-  if (process.env.NEXT_PUBLIC_BACKEND_URL?.includes("app.rybbit.io")) {
-    return STRIPE_PRICES;
-  }
+export const getStripePrices = () => {
+  const isLive = process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY?.startsWith("pk_live");
+  if (isLive) {
+    return STRIPE_PRICES;
+  }
   return STRIPE_PRICES.map(price => ({
     ...price,
     priceId: TEST_TO_PRICE_ID[price.name as keyof typeof TEST_TO_PRICE_ID],
   }));
 };

If possible, eliminate client-side mappings entirely and serve the price list from the backend to avoid duplication and drift.

server/src/lib/const.ts (2)

28-156: Server/client price data duplication invites drift.

The server is canonical; prefer exposing these plans via an API and having the client consume it instead of duplicating arrays and mappings.

---

316-324: Return type and strict typing for getStripePrices.

Annotate return type for clarity and stricter contracts.

-export const getStripePrices = () => {
+export const getStripePrices = (): StripePlan[] => {

client/src/components/subscription/ProPlan.tsx (3)

38-59: Avoid duplicating feature lists; reuse shared constants.

Import the shared STANDARD_FEATURES / PRO_FEATURES to keep features consistent with the pricing UI.

+import { STANDARD_FEATURES, PRO_FEATURES } from "@/app/subscribe/components/utils";
@@
-        features: isPro
-          ? [
-              "Unlimited data retention",
-              "Priority support",
-              "Advanced integrations",
-              "Custom dashboards",
-              "Team collaboration",
-            ]
-          : ["1 year data retention", "Standard support", "Core analytics features"],
+        features: isPro ? PRO_FEATURES : STANDARD_FEATURES,

---

44-46: Guard against missing price to avoid “$undefined”.

Graceful fallback if plan lookup fails.

-        price: `$${stripePlan?.price}`,
-        interval: stripePlan?.interval,
+        price: stripePlan ? `$${stripePlan.price}` : "—",
+        interval: stripePlan?.interval ?? "month",

---

140-141: Remove stray “text” class (Tailwind no-op).

Minor cleanup.

-                <p className="text text-gray-300">{getFormattedPrice()}</p>
+                <p className="text-gray-300">{getFormattedPrice()}</p>

client/src/app/subscribe/page.tsx (1)

21-24: Confirm intent: redirect on active subscription disabled.

If this was temporary for testing, consider gating behind an env flag so prod users don’t see the subscribe page when already subscribed.

client/src/app/subscribe/components/PricingCard.tsx (7)

8-9: Use path alias and sort internal imports.

Replace the long relative import and keep internal imports alphabetized per guidelines.

-import { getStripePrices } from "../../../lib/stripe";
+import { getStripePrices } from "@/lib/stripe";

Optionally reorder the internal group:

-import { Slider } from "@/components/ui/slider";
-import { cn } from "@/lib/utils";
-import { BACKEND_URL } from "@/lib/const";
-import { authClient } from "@/lib/auth";
-import { EVENT_TIERS, STANDARD_FEATURES, PRO_FEATURES, findPriceForTier, formatEventTier } from "./utils";
+import { Slider } from "@/components/ui/slider";
+import { authClient } from "@/lib/auth";
+import { BACKEND_URL } from "@/lib/const";
+import { getStripePrices } from "@/lib/stripe";
+import { cn } from "@/lib/utils";
+import { EVENT_TIERS, STANDARD_FEATURES, PRO_FEATURES, findPriceForTier, formatEventTier } from "./utils";

---

68-75: Harden fetch response handling (don’t assume JSON; include status in errors).

Avoid failing on non‑JSON error bodies; surface HTTP status for debugging.

-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "Failed to create checkout session.");
-      }
-
-      if (data.checkoutUrl) {
+      let data: { checkoutUrl?: string; error?: string } | null = null;
+      try {
+        data = await response.json();
+      } catch {
+        // ignore parse errors (e.g., empty body on non-2xx)
+      }
+
+      if (!response.ok) {
+        throw new Error(data?.error || `Failed to create checkout session (${response.status}).`);
+      }
+
+      if (data?.checkoutUrl) {
         window.location.href = data.checkoutUrl; // Redirect to Stripe checkout
       } else {
         throw new Error("Checkout URL not received.");
       }

---

79-82: Type the caught error as unknown and narrow.

Avoid any; narrow to Error for message extraction.

-    } catch (error: any) {
-      toast.error(`Subscription failed: ${error.message}`);
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      toast.error(`Subscription failed: ${message}`);
       setIsLoading(false); // Stop loading on error
     }

---

90-95: Avoid 4 redundant price lookups; memoize once.

Cuts repeated filtering and keeps render cheap.

-  const standardMonthlyPrice = findPriceForTier(eventLimit, "month", stripePrices, "standard")?.price || 0;
-  const standardAnnualPrice = findPriceForTier(eventLimit, "year", stripePrices, "standard")?.price || 0;
-  const proMonthlyPrice = findPriceForTier(eventLimit, "month", stripePrices, "pro")?.price || 0;
-  const proAnnualPrice = findPriceForTier(eventLimit, "year", stripePrices, "pro")?.price || 0;
+  const {
+    standardMonthlyPrice,
+    standardAnnualPrice,
+    proMonthlyPrice,
+    proAnnualPrice,
+  } = React.useMemo(() => {
+    const sm = findPriceForTier(eventLimit, "month", stripePrices, "standard")?.price;
+    const sa = findPriceForTier(eventLimit, "year", stripePrices, "standard")?.price;
+    const pm = findPriceForTier(eventLimit, "month", stripePrices, "pro")?.price;
+    const pa = findPriceForTier(eventLimit, "year", stripePrices, "pro")?.price;
+    return {
+      standardMonthlyPrice: sm,
+      standardAnnualPrice: sa,
+      proMonthlyPrice: pm,
+      proAnnualPrice: pa,
+    };
+  }, [eventLimit, stripePrices]);

Also add useMemo to the React import:

-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";

---

112-135: Make the “Annual -17%” badge dynamic (or remove if inaccurate).

Compute discount from monthly vs annual to avoid misleading users.

---

140-147: Control the Slider value and add an accessible label.

Improves a11y and keeps UI in sync with state.

-        <Slider
-          defaultValue={[0]}
+        <Slider
+          value={[eventLimitIndex]}
           max={EVENT_TIERS.length - 1}
           min={0}
           step={1}
           onValueChange={handleSliderChange}
           className="mb-3"
+          aria-label="Events per month"
         />

---

168-180: Price formatting: avoid Math.round and $0 fallbacks.

• Rounding annual/12 loses cents; prefer formatting with Intl.NumberFormat.
• Showing $0 when a price can’t be resolved is misleading; display “—”.

Example:

const fmt = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
const stdPerMonth = isAnnual && standardAnnualPrice != null
  ? (standardAnnualPrice / 12)
  : standardMonthlyPrice;

{/* render */}
{stdPerMonth != null ? `$${fmt.format(stdPerMonth)}` : "—"}

Also applies to: 211-223

client/src/app/subscribe/components/utils.ts (3)

3-11: Tighten StripePrice types for strict TS.

Model interval precisely.

 export interface StripePrice {
   priceId: string;
   price: number;
   name: string;
-  interval: string;
+  interval: "month" | "year";
   limits: {
     events: number;
   };
 }

---

59-65: Make plan matching robust: case-insensitive name match and deterministic fallback.

Sort by events and compare names case‑insensitively to avoid order‑dependent picks.

-  const plans = stripePrices.filter(
-    plan =>
-      (isAnnual
-        ? plan.name.startsWith(planType) && plan.name.includes("-annual")
-        : plan.name.startsWith(planType) && !plan.name.includes("-annual")) && plan.interval === interval
-  );
+  const type = planType.toLowerCase();
+  const plans = stripePrices
+    .filter(plan => {
+      const name = plan.name.toLowerCase();
+      const matchesType = name.startsWith(type);
+      const matchesAnnual = isAnnual ? name.includes("-annual") : !name.includes("-annual");
+      return matchesType && matchesAnnual && plan.interval === interval;
+    })
+    .sort((a, b) => a.limits.events - b.limits.events);
 
   // Find a plan that matches or exceeds the event limit
-  const matchingPlan = plans.find(plan => plan.limits.events >= eventLimitValue);
-  const selectedPlan = matchingPlan || plans[plans.length - 1] || null;
+  const matchingPlan = plans.find(plan => plan.limits.events >= eventLimitValue);
+  const selectedPlan = matchingPlan ?? plans.at(-1) ?? null;

Also applies to: 67-72

---

31-39: Feature text conflict: “Unlimited data retention” vs “5+ year data retention”.

These contradict. Pick one or rephrase (e.g., “Extended data retention (5+ years)”).

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

client/src/components/subscription/ProPlan.tsx (1)

47-55: Feature lists differ from the centralized constants.

The Pro features shown here don't match the exact order and content from PRO_FEATURES in utils.ts. The Standard features list shows "1 year data retention" while STANDARD_FEATURES defines "2 year data retention".

Apply this diff to align with the centralized feature constants:

-          ? [
-              "5+ year data retention",
-              "Session replays",
-              "Unlimited team members",
-              "Unlimited websites",
-              "Priority support",
-            ]
-          : ["1 year data retention", "Standard support", "Core analytics features"],
+          ? [
+              "Unlimited websites",
+              "Unlimited team members",
+              "Session replays",
+              "5+ year data retention",
+              "Priority support",
+            ]
+          : ["2 year data retention", "Standard support", "Core analytics features"],

docs-v2/src/components/PricingSection.tsx (1)

13-35: Feature lists are duplicated and inconsistent with the client constants.

The STANDARD_FEATURES and PRO_FEATURES defined here duplicate and differ from those in client/src/app/subscribe/components/utils.ts. This creates a maintenance burden and potential confusion.

Consider importing the feature constants from a shared location or ensuring they match exactly. Current discrepancies:

• Standard: Client has "Up to 10 websites" and "Up to 3 team members" while docs has "Up to 10 websites" and "Up to 3 team members" (matching)
• Pro: Client starts with "Everything in Standard" while docs doesn't include this
• Both have different feature ordering

Create a shared constants file or ensure exact synchronization between both definitions.

client/src/components/subscription/ProPlan.tsx (1)

38-58: Consider simplifying the feature list logic using configuration constants.

The conditional feature arrays are hardcoded inline. Consider extracting these to the constants already defined in utils.ts or creating a feature configuration object to reduce duplication and improve maintainability.

+import { STANDARD_FEATURES, PRO_FEATURES } from "../../app/subscribe/components/utils";
+
+const PLAN_CONFIGS = {
+  pro: {
+    id: "pro",
+    name: "Pro",
+    description: "Premium features for professional teams",
+    features: PRO_FEATURES.filter(f => f !== "Everything in Standard"),
+    colorClass: "bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-purple-800 dark:to-indigo-800"
+  },
+  standard: {
+    id: "standard", 
+    name: "Standard",
+    description: "Advanced analytics for growing projects",
+    features: STANDARD_FEATURES.slice(0, 3), // First 3 most important features
+    colorClass: "bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-800 dark:to-emerald-800"
+  }
+};

 const isPro = activeSubscription?.planName?.startsWith("pro");
+const planConfig = isPro ? PLAN_CONFIGS.pro : PLAN_CONFIGS.standard;

 const currentPlanDetails = activeSubscription
   ? {
-        id: isPro ? "pro" : "standard",
-        name: isPro ? "Pro" : "Standard",
+        ...planConfig,
         price: `$${stripePlan?.price}`,
         interval: stripePlan?.interval,
-        description: isPro ? "Premium features for professional teams" : "Advanced analytics for growing projects",
-        features: isPro
-          ? [
-              "5+ year data retention",
-              "Session replays",
-              "Unlimited team members",
-              "Unlimited websites",
-              "Priority support",
-            ]
-          : ["1 year data retention", "Standard support", "Core analytics features"],
-        color: isPro
-          ? "bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-purple-800 dark:to-indigo-800"
-          : "bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-800 dark:to-emerald-800",
+        color: planConfig.colorClass,
         icon: <Shield className="h-5 w-5" />,
       }
   : null;

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

server/src/lib/const.ts (1)

27-154: Plan catalog + test ID map look consistent. Nice cleanup.

Also applies to: 155-282, 284-313

docs/src/app/pricing/components/PricingSection.jsx (1)

12-26: Docs feature lists are out of sync with app constants

Align PRO_FEATURES/FREE_FEATURES here with client/src/app/subscribe/components/utils.ts to avoid drift in messaging.

Also applies to: 28-36

client/src/app/subscribe/components/PricingCard.tsx (1)

1-1: Add "use client" directive (required for hooks/window).

This component uses React hooks and window; it must be a Client Component. Place the directive as the very first line.

+"use client";

client/src/app/components/AddSite.tsx (4)

2-5: Sort and group imports per repo guidelines.

External first (react, next, lucide-react), then internal (aliases and relatives), alphabetically within groups. Also keep alias usage consistent (prefer "@/components" over "../../components" if that’s the convention).

---

50-50: finalDisabled is fine; optional simplification.

Given the early return on isOverSiteLimit, finalDisabled impacts only the default trigger path. You could drop finalDisabled and feed disabled directly into Button to reduce duplication, but not required.

---

72-85: Surface useful error messages to users.

String(error) can yield “[object Object]”. Prefer Error.message when available.

Apply:

-    } catch (error) {
-      setError(String(error));
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      setError(msg);
       return;
     }

---

195-197: Button type is “submit” without a form.

Either wrap inputs in a form with onSubmit or make this a plain button.

Apply:

-            <Button type="submit" variant={"success"} onClick={handleSubmit} disabled={!domain}>
+            <Button type="button" variant={"success"} onClick={handleSubmit} disabled={!domain}>

client/src/components/DisabledOverlay.tsx (2)

17-18: Add a shared PlanTier type to avoid string literal drift.

The union is fine. Prefer importing a central PlanTier = "standard" | "pro" type from a shared module to keep client/server consistent.

---

20-30: Optional: Deep‑link Upgrade button to the required plan.

If /subscribe supports preselecting a plan, pass it through when requiredPlan="pro".

Example (outside selected lines; update the Link in ownerMessage):

<Link href={requiredPlan === "pro" ? "/subscribe?plan=pro" : "/subscribe?plan=standard"}>
  Upgrade <ArrowRight className="h-3 w-3" />
</Link>

server/src/api/stripe/getSubscription.ts (3)

79-79: Make isPro detection precise.

includes("pro") will mislabel names like "enterprise". Use startsWith("pro") to match your naming scheme.

-        isPro: planDetails.name.includes("pro"),
+        isPro: planDetails.name.startsWith("pro"),

---

10-16: Prefer UTC for month boundaries on the server.

Use UTC to avoid TZ drift in period start/end.

-function getStartOfMonth() {
-  return DateTime.now().startOf("month").toJSDate();
-}
+function getStartOfMonth() {
+  return DateTime.utc().startOf("month").toJSDate();
+}
 
-function getStartOfNextMonth() {
-  return DateTime.now().startOf("month").plus({ months: 1 }).toJSDate();
-}
+function getStartOfNextMonth() {
+  return DateTime.utc().startOf("month").plus({ months: 1 }).toJSDate();
+}

---

125-139: Avoid catch(any); narrow unknown safely.

Use unknown and narrow to Stripe errors; don’t rely on error.message on any.

-  } catch (error: any) {
-    console.error("Get Subscription Error:", error);
+  } catch (err: unknown) {
+    console.error("Get Subscription Error:", err);
     // Handle specific Stripe errors if necessary
-    if (error instanceof Stripe.errors.StripeError) {
-      return reply.status(error.statusCode || 500).send({ error: error.message });
+    if (err instanceof Stripe.errors.StripeError) {
+      return reply.status(err.statusCode || 500).send({ error: err.message });
     } else {
       return reply.status(500).send({
         error: "Failed to fetch subscription details",
-        details: error.message,
+        details: err instanceof Error ? err.message : String(err),
       });
     }
   }

client/src/app/settings/organization/members/components/InviteMemberDialog.tsx (2)

94-95: Fix tooltip limit for free plan (should be 1, not 3).

-          You have reached the limit of {subscription?.isPro ? 10 : 3} members. Upgrade to add more members
+          You have reached the limit of {subscription?.status !== "active" ? 1 : subscription?.isPro ? 10 : 3} members. Upgrade to add more members

---

3-24: Import hygiene: group and sort per guidelines.

External (react, sonner, lucide-react) first, then aliased/internal; keep alphabetical within groups.

client/src/components/subscription/PaidPlan.tsx (2)

38-39: Use server-provided isPro instead of deriving from name.

Avoid drift with naming; server now returns isPro.

-  const isPro = activeSubscription?.planName?.startsWith("pro");
+  const isPro = activeSubscription?.isPro === true;

---

203-213: Hide “Cancel Subscription” when not active.

Avoid showing cancel for free or inactive states.

-            <div className="flex justify-end pt-2 border-t border-neutral-200 dark:border-neutral-800">
-              <Button
-                variant="ghost"
-                onClick={handleCancelSubscription}
-                disabled={isProcessing}
-                size="sm"
-                className="dark:hover:bg-red-700/60"
-              >
-                Cancel Subscription
-              </Button>
-            </div>
+            {activeSubscription.status === "active" && (
+              <div className="flex justify-end pt-2 border-t border-neutral-200 dark:border-neutral-800">
+                <Button
+                  variant="ghost"
+                  onClick={handleCancelSubscription}
+                  disabled={isProcessing}
+                  size="sm"
+                  className="dark:hover:bg-red-700/60"
+                >
+                  Cancel Subscription
+                </Button>
+              </div>
+            )}

docs-v2/src/components/PricingSection.tsx (1)

154-161: Add an accessible label to the slider.

Improves a11y without behavior change.

           <Slider
             defaultValue={[0]}
             max={EVENT_TIERS.length - 1}
             min={0}
             step={1}
             onValueChange={handleSliderChange}
+            aria-label="Events per month tier"
             className="mb-3"
           />

docs/src/app/pricing/components/PricingSection.jsx (2)

42-61: Remove unused parameter and simplify pricing helper

getFormattedPrice doesn’t use isAnnual. Drop the param and fix the call site to prevent confusion.

-function getFormattedPrice(eventLimit, isAnnual) {
+function getFormattedPrice(eventLimit) {
@@
-  const annualPrice = monthlyPrice * 10;
+  const annualPrice = monthlyPrice * 10;
   return {
     monthly: monthlyPrice,
     annual: annualPrice,
   };
 }
@@
-const prices = getFormattedPrice(eventLimit, isAnnual);
+const prices = getFormattedPrice(eventLimit);

Also applies to: 68-69

---

158-164: Custom tier label inconsistent on md+ screens

For “Custom” tier the md+ label shows “Custom” instead of “10M+”. Render the same label across breakpoints.

-  <div className="text-3xl font-bold text-emerald-400 hidden md:block">
-    {eventLimit.toLocaleString()}
-  </div>
-  <div className="text-3xl font-bold text-emerald-400 md:hidden">
-    {isNaN(eventLimit) ? "10M+" : formatter(eventLimit)}
-  </div>
+  <div className="text-3xl font-bold text-emerald-400">
+    {isNaN(Number(eventLimit)) ? "10M+" : formatter(eventLimit)}
+  </div>

docs-v2/src/app/pricing/components/ComparisonSection.tsx (2)

167-172: Drop unused prop from FeatureCell

isPro isn’t used. Remove it and the call-site prop to tighten types.

-interface FeatureCellProps {
-  value: boolean | string;
-  isPro?: boolean;
-}
+interface FeatureCellProps {
+  value: boolean | string;
+}
@@
-function FeatureCell({ value, isPro = false }: FeatureCellProps) {
+function FeatureCell({ value }: FeatureCellProps) {
@@
-  <FeatureCell value={feature.pro} isPro={true} />
+  <FeatureCell value={feature.pro} />

Also applies to: 256-261

---

6-29: Type the COMPARISON_FEATURES structure

Add explicit types to prevent accidental shape drift across tiers.

-const COMPARISON_FEATURES = [
+type TierValue = boolean | string;
+interface Feature { name: string; free: TierValue; standard: TierValue; pro: TierValue }
+interface FeatureCategory { category: string; features: Feature[] }
+const COMPARISON_FEATURES: FeatureCategory[] = [

Also applies to: 31-165

client/src/app/subscribe/components/utils.ts (3)

3-11: Narrow StripePrice.interval type

Use a string literal union to catch typos at compile time.

 export interface StripePrice {
   priceId: string;
   price: number;
   name: string;
-  interval: string;
+  interval: "month" | "year";
   limits: {
     events: number;
   };
 }

---

47-53: Harden plan filtering and selection

• Filtering depends on name conventions (-annual). Rely on interval and planType only; name parsing is brittle.
• When no exact match, pick the smallest plan >= limit; otherwise the highest by events. Sort to guarantee order.

-  const plans = stripePrices.filter(
-    plan =>
-      (isAnnual
-        ? plan.name.startsWith(planType) && plan.name.includes("-annual")
-        : plan.name.startsWith(planType) && !plan.name.includes("-annual")) && plan.interval === interval
-  );
+  const plans = stripePrices
+    .filter(plan => plan.name.startsWith(planType) && plan.interval === interval)
+    .sort((a, b) => a.limits.events - b.limits.events);
@@
-  const matchingPlan = plans.find(plan => plan.limits.events >= eventLimitValue);
-  const selectedPlan = matchingPlan || plans[plans.length - 1] || null;
+  const matchingPlan = plans.find(p => p.limits.events >= eventLimitValue);
+  const selectedPlan = matchingPlan ?? plans.at(-1) ?? null;

Also applies to: 65-76

---

13-13: Type EVENT_TIERS for clarity

Optional, but helps consumers.

-export const EVENT_TIERS = [100_000, 250_000, 500_000, 1_000_000, 2_000_000, 5_000_000, 10_000_000, "Custom"];
+export const EVENT_TIERS: (number | "Custom")[] = [100_000, 250_000, 500_000, 1_000_000, 2_000_000, 5_000_000, 10_000_000, "Custom"];

client/src/lib/subscription/useStripeSubscription.ts (1)

24-47: Tighten types and add network error handling

• query type should allow null (401/no org).
• Wrap fetch in try/catch to surface network failures to React Query.

-  const fetchSubscription = async () => {
+  const fetchSubscription = async (): Promise<SubscriptionData | null> => {
     if (!activeOrg) {
       return null;
     }
-
-    const response = await fetch(`${BACKEND_URL}/stripe/subscription?organizationId=${activeOrg.id}`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        return null;
-      } else {
-        const errorData = await response.json();
-        throw new Error(errorData.error || `Error: ${response.status}`);
-      }
-    }
-
-    return await response.json();
+    try {
+      const response = await fetch(`${BACKEND_URL}/stripe/subscription?organizationId=${activeOrg.id}`, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+      });
+      if (!response.ok) {
+        if (response.status === 401) return null;
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `Error: ${response.status}`);
+      }
+      return (await response.json()) as SubscriptionData;
+    } catch (err) {
+      throw err;
+    }
   };
@@
-  const { data, isLoading, error, refetch } = useQuery<SubscriptionData>({
+  const { data, isLoading, error, refetch } = useQuery<SubscriptionData | null>({

Also applies to: 49-55

client/src/app/settings/organization/subscription/page.tsx (2)

3-14: Import grouping/order per guidelines

Place external imports before internal and sort within groups.

 "use client";
 
-import { Card, CardContent, CardDescription, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { PaidPlan } from "../../../../components/subscription/PaidPlan";
-import { useStripeSubscription } from "../../../../lib/subscription/useStripeSubscription";
-import { NoOrganization } from "../../../../components/NoOrganization";
-import { TrialPlan } from "../../../../components/subscription/TrialPlan";
-import { ExpiredTrialPlan } from "../../../../components/subscription/ExpiredTrialPlan";
-import { useSetPageTitle } from "../../../../hooks/useSetPageTitle";
-import { FreePlan } from "../../../../components/subscription/FreePlan";
 import { Building } from "lucide-react";
+import { Card, CardContent, CardDescription, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { NoOrganization } from "../../../../components/NoOrganization";
+import { ExpiredTrialPlan } from "../../../../components/subscription/ExpiredTrialPlan";
+import { FreePlan } from "../../../../components/subscription/FreePlan";
+import { PaidPlan } from "../../../../components/subscription/PaidPlan";
+import { TrialPlan } from "../../../../components/subscription/TrialPlan";
+import { useSetPageTitle } from "../../../../hooks/useSetPageTitle";
 import { authClient } from "@/lib/auth";

---

48-52: Null subscription treated as expired

If the backend returns null on 401/no subscription, showing ExpiredTrialPlan is misleading. Prefer FreePlan or a neutral empty state.

-    if (!activeSubscription) {
-      return <ExpiredTrialPlan />;
-    }
+    if (!activeSubscription) {
+      return <FreePlan />;
+    }

server/src/services/admin/subscriptionService.ts (1)

116-125: Avoid zero eventLimit for paid subs when includeFullDetails=false

Fallback to DEFAULT_EVENT_LIMIT preserves sane limits if details weren’t expanded.

-        eventLimit: subscriptionData.eventLimit ?? 0,
+        eventLimit: subscriptionData.eventLimit ?? DEFAULT_EVENT_LIMIT,

client/src/app/subscribe/components/PricingCard.tsx (7)

1-9: Regroup/sort imports; prefer alias over deep relative.

Follow guidelines: external first (alphabetical), then internal (alphabetical). Also switch ../../../lib/stripe to @/lib/stripe for consistency.

-import React, { useState } from "react";
-import { Check } from "lucide-react";
-import { Slider } from "@/components/ui/slider";
-import { cn } from "@/lib/utils";
-import { toast } from "sonner";
-import { BACKEND_URL } from "@/lib/const";
-import { authClient } from "@/lib/auth";
-import { EVENT_TIERS, STANDARD_FEATURES, PRO_FEATURES, FREE_FEATURES, findPriceForTier, formatEventTier } from "./utils";
-import { getStripePrices } from "../../../lib/stripe";
+import React, { useState } from "react";
+import { Check } from "lucide-react";
+import { toast } from "sonner";
+
+import { Slider } from "@/components/ui/slider";
+import { authClient } from "@/lib/auth";
+import { BACKEND_URL } from "@/lib/const";
+import { cn } from "@/lib/utils";
+import { getStripePrices } from "@/lib/stripe";
+import { EVENT_TIERS, STANDARD_FEATURES, PRO_FEATURES, FREE_FEATURES, findPriceForTier, formatEventTier } from "./utils";

---

68-76: Check response.ok before JSON parse to avoid parse errors on non‑JSON failures.

Currently parsing JSON first can throw on HTML/error bodies.

-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || "Failed to create checkout session.");
-      }
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(text || "Failed to create checkout session.");
+      }
+      const data = (await response.json()) as { checkoutUrl?: string; error?: string };

---

79-82: Type‑safe error handling and always clear loading state.

Avoid any; use unknown + narrowing, and use finally to ensure loading resets.

-    } catch (error: any) {
-      toast.error(`Subscription failed: ${error.message}`);
-      setIsLoading(false); // Stop loading on error
-    }
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Unexpected error";
+      toast.error(`Subscription failed: ${message}`);
+    } finally {
+      setIsLoading(false);
+    }

---

132-134: Replace hardcoded “-17%” with computed discount from actual prices.

Avoid drift if catalog changes.

-                <span className="ml-1 text-xs text-emerald-500">-17%</span>
+                {(() => {
+                  const pct =
+                    standardMonthlyPrice && standardAnnualPrice
+                      ? Math.round(100 * (1 - standardAnnualPrice / 12 / standardMonthlyPrice))
+                      : 0;
+                  return pct > 0 ? <span className="ml-1 text-xs text-emerald-500">-{pct}%</span> : null;
+                })()}

---

111-135: Small a11y boosts: add ARIA for toggle buttons and slider.

Improves keyboard/screen‑reader experience.

-              <button
+              <button
+                aria-pressed={!isAnnual}
                 onClick={() => setIsAnnual(false)}
...
-              <button
+              <button
+                aria-pressed={isAnnual}
                 onClick={() => setIsAnnual(true)}
...
-        <Slider
+        <Slider
+          aria-label="Events per month"

Also applies to: 140-147

---

49-53: Fix stale comment to match behavior.

Comment references NEXT_PUBLIC_BACKEND_URL logic that isn’t present here.

-      // Use NEXT_PUBLIC_BACKEND_URL if available, otherwise use relative path for same-origin requests
+      // Build return URLs based on current origin

---

90-95: Prices are USD (dollars) — format with Intl.NumberFormat (do NOT divide by 100).

Verified: StripePrice.price is stored as dollar amounts (see client/src/lib/stripe.ts entries like price: 19 and the StripePrice interface in client/src/app/subscribe/components/utils.ts). Replace ad-hoc $${price} interpolation with a formatter.

Add:
const formatUsd = (amount: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(amount);

Replace usages, e.g.:
{formatUsd(isAnnual ? standardAnnualPrice / 12 : standardMonthlyPrice)}
{formatUsd(isAnnual ? proAnnualPrice / 12 : proMonthlyPrice)}

Update locations: client/src/app/subscribe/components/PricingCard.tsx (lines 90–95; also occurrences at 210–214, 254–257) and client/src/components/subscription/PaidPlan.tsx (lines 44–46, 109–112).

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-03T17:30:25.559Z
Learning: Applies to client/**/*.{tsx} : Client: Use React functional components with minimal useEffect and inline functions

Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-03T17:30:25.559Z
Learning: Applies to client/**/* : Frontend: Use Next.js, Tailwind CSS, Shadcn UI, Tanstack Query, Zustand, Luxon, Nivo, and react-hook-form

Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-03T17:30:25.559Z
Learning: Applies to server/**/* : Backend: Use Fastify, Drizzle ORM (Postgres), ClickHouse, and Zod

client/src/api/admin/sites.ts (1)

1-6: Reorder imports per guidelines (external first, then internal; alpha within groups)

Keeps consistency across client files.

Apply this diff:

-import { useQuery } from "@tanstack/react-query";
-import { useStore } from "../../lib/store";
-import { authedFetch } from "../utils";
-import { usePathname } from "next/navigation";
-import { authClient } from "../../lib/auth";
+import { useQuery } from "@tanstack/react-query";
+import { usePathname } from "next/navigation";
+import { authClient } from "../../lib/auth";
+import { useStore } from "../../lib/store";
+import { authedFetch } from "../utils";

server/src/api/sites/getSitesFromOrg.ts (2)

101-109: Use subscription.isPro when available; fall back case-insensitively

Avoid deriving from planName and risking casing mismatches. Prefer the field from getSubscriptionInner.

Apply this diff:

       subscription: {
         monthlyEventCount,
         eventLimit,
         overMonthlyLimit: monthlyEventCount > eventLimit,
         planName: subscription?.planName || "free",
         status: subscription?.status || "free",
-        isPro: subscription?.planName.includes("pro") || false,
+        isPro:
+          typeof subscription?.isPro === "boolean"
+            ? subscription.isPro
+            : (subscription?.planName?.toLowerCase().includes("pro") ?? false),
       },

---

65-71: Type the ClickHouse row instead of any

Improves strictness and guards against shape drift.

Apply this diff:

-      if (Array.isArray(sessionCounts)) {
-        sessionCounts.forEach((row: any) => {
+      if (Array.isArray(sessionCounts)) {
+        type Row = { site_id: number; total_sessions: number };
+        (sessionCounts as Row[]).forEach(row => {
           if (row && typeof row.site_id === "number" && typeof row.total_sessions === "number") {
             sessionCountMap.set(Number(row.site_id), row.total_sessions);
           }
         });
       }

server/src/api/stripe/getSubscription.ts (3)

78-83: Make isPro detection robust (avoid casing bugs)

Rely on normalized comparison.

Apply this diff:

-        isPro: planDetails.name.includes("pro"),
+        isPro: planDetails.name.toLowerCase().includes("pro"),

If StripePlan exposes a tier or isPro field, prefer that instead.

---

86-89: Defensive default for eventLimit

Guard against missing limits on the plan.

Apply this diff:

-        eventLimit: planDetails.limits.events,
+        eventLimit: planDetails.limits?.events ?? DEFAULT_EVENT_LIMIT,

---

95-105: Unify response shape: include createdAt and interval for free tier

Keeps API consistent across branches.

Apply this diff:

   return {
     id: null,
     planName: "free",
     status: "free",
+    createdAt: org.createdAt,
     currentPeriodEnd: getStartOfNextMonth(),
     currentPeriodStart: getStartOfMonth(),
     eventLimit: DEFAULT_EVENT_LIMIT,
     monthlyEventCount: org.monthlyEventCount || 0,
     trialDaysRemaining: 0,
+    interval: "month",
   };

client/src/components/SiteSettings/SiteConfiguration.tsx (2)

27-29: Use path aliases consistently for internal imports.

Mixed relative and alias paths make maintenance brittle and violate our import guidelines. Switch these to "@/…" to match nearby imports.

-import { useStripeSubscription } from "../../lib/subscription/useStripeSubscription";
-import { Badge } from "../ui/badge";
-import { IS_CLOUD } from "../../lib/const";
+import { useStripeSubscription } from "@/lib/subscription/useStripeSubscription";
+import { Badge } from "@/components/ui/badge";
+import { IS_CLOUD } from "@/lib/const";

---

255-257: Minor a11y polish for inline badges.

Badges inside the label are decorative; consider aria-hidden="true" or a title (e.g., “Requires Pro”) to help SR users. You can add the attribute where badges are defined in the toggle configs.

client/src/components/DisabledOverlay.tsx (4)

1-8: Import order nit: group and sort per guidelines.

External first, then internal, alpha within groups.

 import { ArrowRight, Crown, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import React, { ReactNode } from "react";
-import { useCurrentSite } from "../api/admin/sites";
-import { DEFAULT_EVENT_LIMIT } from "../lib/subscription/constants";
-import { Button } from "./ui/button";
-import { authClient } from "../lib/auth";
+import { authClient } from "../lib/auth";
+import { useCurrentSite } from "../api/admin/sites";
+import { DEFAULT_EVENT_LIMIT } from "../lib/subscription/constants";
+import { Button } from "./ui/button";

---

20-40: Owner copy OK; add rel to external link opened with target="_blank".

Prevents reverse‑tabnabbing. Consider encoding featurePath if it can contain spaces.

           {featurePath && (
             <Link
               href={`https://demo.rybbit.io/21/${featurePath}`}
               target="_blank"
+              rel="noopener noreferrer"
               className="text-sm text-neutral-100 hover:underline flex items-center gap-1"
             >

---

52-61: Fix hard‑coded “Pro” in userMessage; respect requiredPlan. Also add rel on external link below.

Currently shows “Pro” even when requiredPlan="standard".

-function userMessage(message: string, featurePath?: string, requiredPlan?: "pro" | "standard") {
+function userMessage(message: string, featurePath?: string, requiredPlan?: "pro" | "standard") {
   return (
     <div className="bg-neutral-900 rounded-lg  border border-neutral-700 shadow-xl flex flex-col gap-3 p-4">
       <div className="flex gap-3">
         <Crown className="h-5 w-5 text-amber-500 flex-shrink-0" />
         <div className="flex-1 space-y-1">
           <p className="text-sm text-muted-foreground">
-            Ask your organization owner to upgrade to <span className="font-medium text-foreground">Pro</span> to unlock{" "}
+            Ask your organization owner to upgrade to{" "}
+            <span className="font-medium text-foreground">
+              {requiredPlan === "pro" ? "Pro" : "Standard"}
+            </span>{" "}
+            to unlock{" "}
             {message}
           </p>

And for the external link:

             <Link
               href={`https://demo.rybbit.io/21/${featurePath}`}
               target="_blank"
+              rel="noopener noreferrer"
               className="text-sm text-neutral-100 hover:underline flex items-center gap-1"
             >

---

100-107: Block interaction and improve a11y for blurred content.

Prevent keyboard interaction with underlying UI and hide it from SRs when disabled.

-      <div className={disabled ? "filter" : ""} style={disabled ? { filter: `blur(${blur}px)` } : {}}>
+      <div
+        className={disabled ? "filter pointer-events-none" : ""}
+        style={disabled ? { filter: `blur(${blur}px)` } : {}}
+        aria-hidden={disabled}
+      >

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-03T17:30:25.559Z
Learning: Applies to server/**/* : Backend: Use Fastify, Drizzle ORM (Postgres), ClickHouse, and Zod

client/src/components/subscription/PaidPlain/PaidPlan.tsx (5)

40-41: Make Pro/Standard detection case-insensitive.

Safer against unexpected planName casing.

-  const isPro = activeSubscription?.planName?.startsWith("pro");
+  const isPro = activeSubscription?.planName?.toLowerCase().startsWith("pro");

---

178-189: Gate “Usage limit reached” on a real limit.

With eventLimit defaulting to 0, the banner would always show. Require a positive limit.

-                {currentUsage >= eventLimit && (
+                {eventLimit > 0 && 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">

---

200-208: Check currentPeriodEnd before rendering annual note.

Avoid calling formatDate on undefined.

-            {isAnnualPlan && (
+            {isAnnualPlan && activeSubscription.currentPeriodEnd && (
               <div className="pt-2 pb-0 px-3 bg-emerald-50 dark:bg-emerald-900/20 rounded-md border border-emerald-100 dark:border-emerald-800">

---

74-85: Consider timeout and stricter error typing for portal session fetch.

Prevents hangs and aligns with strict typing.

-      const response = await fetch(`${BACKEND_URL}/stripe/create-portal-session`, {
+      const ac = new AbortController();
+      const t = setTimeout(() => ac.abort(), 15000);
+      const response = await fetch(`${BACKEND_URL}/stripe/create-portal-session`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         credentials: "include",
+        signal: ac.signal,
         body: JSON.stringify({
           returnUrl: window.location.href,
           organizationId,
           flowType,
         }),
       });
+      clearTimeout(t);

---

5-14: Minor: Reorder imports per guidelines.

Group external (lucide-react, luxon, react, sonner) first, then internal/aliased, sort alphabetically within groups.

client/src/app/settings/organization/subscription/page.tsx (1)

5-5: Minor: Import ordering.

Move lucide-react before internal imports and sort within groups as per repo guidelines.

client/src/components/ui/badge.tsx (1)

36-38: Optional: forwardRef for consistency with shadcn UI patterns.

Improves composability and ref support without changing behavior.

-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  { className, variant, ...props },
+  ref
+) {
+  return <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+});

client/src/components/subscription/PaidPlain/PlanDialog.tsx (3)

28-28: Initialize billing toggle from current plan.

Open the dialog reflecting the user’s actual plan interval.

-  const [isAnnual, setIsAnnual] = useState(false);
+  const [isAnnual, setIsAnnual] = useState(() => Boolean(currentPlanName?.endsWith("-annual")));

---

137-149: Disable selection for current/loading plans and add basic a11y.

Prevents duplicate checkouts and improves keyboard access.

-                  return (
-                    <div
+                  return (
+                    <div
                       key={plan.name}
                       className={cn(
                         "flex flex-col gap-2 justify-between p-3 rounded-lg border cursor-pointer",
                         isCurrent
-                          ? "bg-emerald-500/10 border-emerald-500"
+                          ? "bg-emerald-500/10 border-emerald-500 cursor-not-allowed"
                           : "bg-neutral-800/20 border-neutral-700/50 hover:bg-neutral-800/30",
-                        isLoading && "opacity-50"
+                        isLoading && "opacity-50 cursor-wait"
                       )}
-                      onClick={() => handleCheckout(plan.priceId, plan.name)}
+                      role="button"
+                      tabIndex={0}
+                      aria-disabled={isCurrent || isLoading}
+                      onKeyDown={e => {
+                        if ((e.key === "Enter" || e.key === " ") && !(isCurrent || isLoading)) {
+                          handleCheckout(plan.priceId, plan.name);
+                        }
+                      }}
+                      onClick={() => {
+                        if (isCurrent || isLoading) return;
+                        handleCheckout(plan.priceId, plan.name);
+                      }}
                     >

---

70-74: Type the error as unknown and narrow.

Avoids any and keeps strict TS.

-    } catch (error: any) {
-      toast.error(`Checkout failed: ${error.message}`);
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      toast.error(`Checkout failed: ${message}`);
       setLoadingPriceId(null);
     }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

client/src/app/settings/organization/members/components/InviteMemberDialog.tsx (1)

117-127: Update Select cast to include "owner".

The cast currently excludes "owner", causing a type mismatch when selecting it.

-            <Select value={role} onValueChange={value => setRole(value as "admin" | "member")}>
+            <Select value={role} onValueChange={value => setRole(value as "owner" | "admin" | "member")}>

client/src/app/settings/organization/members/components/InviteMemberDialog.tsx (3)

19-19: Use alias import for Alert to match internal import conventions.

Prefer "@/components/ui/alert" over deep relative path for consistency.

-import { Alert } from "../../../../../components/ui/alert";
+import { Alert } from "@/components/ui/alert";

---

53-71: Harden error handling and reset error before retry.

Avoid any in catch and ensure a clean state on new attempts.

   setIsLoading(true);
+  setError("");
   try {
@@
-    } catch (error: any) {
-      setError(error.message || "Failed to send invitation");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Failed to send invitation";
+      setError(message);
     } finally {
       setIsLoading(false);
     }

---

3-24: Import hygiene nit: group external first, then internal; sort alphabetically within groups.

Optional tidy-up to match repo guidelines (e.g., lucide-react/react/sonner first; then "@/components/", then "@/lib/"). No functional change.

client/src/app/settings/organization/members/components/Invitations.tsx (6)

41-57: Avoid any for invitation; type the param and tighten getBadgeVariant input.

Use a typed Invitation to keep strictness and prevent regressions in status/role usage.

Apply within this block:

-  const handleResendInvitation = async (invitation: any) => {
+  const handleResendInvitation = async (invitation: Invitation) => {

Add near the props interface (outside this range):

// Place below InvitationsProps
type InvitationStatus = "pending" | "accepted" | "rejected" | "canceled";
type Invitation = {
  id: string;
  email: string;
  role: string;
  status: InvitationStatus;
  expiresAt: string | Date;
};

Optionally, tighten the helper:

-  const getBadgeVariant = (status: string) => {
+  const getBadgeVariant = (status: InvitationStatus) => {

---

34-36: Catch unknown instead of any and safely derive error messages.

Prevents unsafe property access under strict TS and avoids swallowing non-Error throws.

-    } catch (error: any) {
-      toast.error(error.message || "Failed to cancel invitation");
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === "object" && "message" in err
+          ? String((err as { message?: unknown }).message)
+          : "Failed to cancel invitation";
+      toast.error(message);
     }

-    } catch (error: any) {
-      toast.error(error.message || "Failed to resend invitation");
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === "object" && "message" in err
+          ? String((err as { message?: unknown }).message)
+          : "Failed to resend invitation";
+      toast.error(message);
     }

Also applies to: 52-54

---

117-118: Simplify/clarify non-empty check.

Use a single expression to avoid double evaluation and truthy pitfalls.

-                {invitations?.length && invitations.length > 0 ? (
+                {(invitations?.length ?? 0) > 0 ? (

---

32-32: Spelling consistency: “canceled” vs “cancelled”.

Status keys use “canceled”; align the toast message.

-      toast.success("Invitation cancelled");
+      toast.success("Invitation canceled");

---

130-149: Add accessible labels to action buttons.

Improves screen reader clarity when multiple actions exist in a row.

-                            <Button
+                            <Button
                               variant="default"
                               size="sm"
                               disabled={loadingInvitationId === invitation.id}
-                              onClick={() => handleCancelInvitation(invitation.id)}
+                              onClick={() => handleCancelInvitation(invitation.id)}
+                              aria-label={`Cancel invitation for ${invitation.email}`}
                             >

-                            <Button
+                            <Button
                               variant="default"
                               size="sm"
                               disabled={loadingInvitationId === invitation.id}
-                              onClick={() => handleResendInvitation(invitation)}
+                              onClick={() => handleResendInvitation(invitation)}
+                              aria-label={`Resend invitation to ${invitation.email}`}
                             >

---

125-127: Prefer DateTime.fromISO for invitation.expiresAt (server emits string timestamps)

server/src/db/postgres/schema.ts defines invitation.expiresAt as timestamp({ mode: "string" }); parse the ISO string directly with DateTime.fromISO.

-                        {DateTime.fromJSDate(new Date(invitation.expiresAt)).toLocaleString(DateTime.DATE_SHORT)}
+                        {DateTime.fromISO(invitation.expiresAt).toLocaleString(DateTime.DATE_SHORT)}

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

client/src/components/subscription/PaidPlain/PlanDialog.tsx (1)

1-1: Add "use client" directive at the top of the file.

This component uses React hooks (useState) and browser APIs (window.location), requiring the "use client" directive to mark it as a Client Component. Components using hooks must be marked as Client Components.

Apply this diff to fix the issue:

+"use client";
+
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

client/src/components/subscription/PaidPlain/PlanDialog.tsx (1)

113-118: Plan name generation logic could be more robust.

The current string concatenation approach for generating plan names might be brittle and could lead to unexpected results if the naming convention changes.

Consider extracting this into a more explicit mapping or configuration:

-  const getPriceForTier = (events: number, planType: "standard" | "pro") => {
-    const suffix = isAnnual ? "-annual" : "";
-    const planName = `${planType}${events >= 1_000_000 ? events / 1_000_000 + "m" : events / 1_000 + "k"}${suffix}`;
-    const plan = stripePrices.find(p => p.name === planName);
-    return plan;
-  };
+  const getPriceForTier = (events: number, planType: "standard" | "pro") => {
+    const suffix = isAnnual ? "-annual" : "";
+    const eventLabel = events >= 1_000_000 
+      ? `${events / 1_000_000}m` 
+      : `${events / 1_000}k`;
+    const planName = `${planType}${eventLabel}${suffix}`;
+    const plan = stripePrices.find(p => p.name === planName);
+    return plan;
+  };

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-03T17:30:25.559Z
Learning: Applies to client/**/*.{tsx} : Client: Use React functional components with minimal useEffect and inline functions

client/src/app/[site]/components/Header/DemoSignupBanner.tsx (1)

10-10: Use hostname (not host) to avoid port-mismatch false negatives.

Comparing against a bare hostname with window.location.host will fail if a port is present.

-  if (typeof window === "undefined" || window.location.host !== DEMO_HOSTNAME) {
+  if (typeof window === "undefined" || window.location.hostname !== DEMO_HOSTNAME) {

Optional: replace the whole condition with !isDemoHost() if you add the helper in lib/const.ts.

client/src/components/TopBar.tsx (1)

12-12: Deduplicate demo-host checks via a shared helper.

Keeps logic consistent and SSR-safe across components.

-import { DEMO_HOSTNAME, IS_CLOUD } from "../lib/const";
+import { DEMO_HOSTNAME, IS_CLOUD, isDemoHost } from "../lib/const";
@@
-              typeof window !== "undefined" && globalThis.location.hostname === DEMO_HOSTNAME
+              isDemoHost()

Also applies to: 66-66

client/src/app/[site]/components/Sidebar/SiteSelector.tsx (1)

14-14: Unify demo gating and remove direct window/globalThis access.

Prefer a shared helper for consistent, SSR-safe checks.

-import { DEMO_HOSTNAME } from "../../../../lib/const";
+import { DEMO_HOSTNAME, isDemoHost } from "../../../../lib/const";
@@
-  if (typeof window !== "undefined" && globalThis.location.hostname === DEMO_HOSTNAME) {
+  if (isDemoHost()) {

Also applies to: 32-32

client/src/components/DisabledOverlay.tsx (1)

59-62: Align copy with requiredPlan.

User-facing text always says “Pro” even when requiredPlan="standard".

-          <p className="text-sm text-muted-foreground">
-            Ask your organization owner to upgrade to <span className="font-medium text-foreground">Pro</span> to unlock{" "}
-            {message}
-          </p>
+          <p className="text-sm text-muted-foreground">
+            Ask your organization owner to upgrade to{" "}
+            <span className="font-medium text-foreground">
+              {requiredPlan === "pro" ? "Pro" : "Standard"}
+            </span>{" "}
+            to unlock {message}
+          </p>

server/src/api/stripe/previewSubscriptionUpdate.ts (5)

1-6: Consider adding JSDoc documentation for the new API handler.

Since this is a new public API endpoint handling sensitive billing operations, consider adding comprehensive JSDoc documentation describing the purpose, parameters, return values, and possible error responses.

Add documentation above the function:

+/**
+ * Previews subscription plan changes and calculates proration amounts.
+ * 
+ * @param request - FastifyRequest containing organizationId and newPriceId
+ * @param reply - FastifyReply
+ * @returns Preview of subscription update including proration details
+ * 
+ * @throws {401} Unauthorized - User not authenticated
+ * @throws {400} Bad Request - Missing required parameters
+ * @throws {403} Forbidden - User lacks billing management permissions
+ * @throws {404} Not Found - Organization, customer, or subscription not found
+ * @throws {500} Internal Server Error - Stripe API or database error
+ */
export async function previewSubscriptionUpdate(

---

8-11: Add input validation for the request body interface.

The interface should validate that newPriceId follows Stripe's price ID format to prevent invalid API calls.

Consider adding Zod validation for stricter type safety:

import { z } from "zod";

const PreviewSubscriptionBodySchema = z.object({
  organizationId: z.string().min(1),
  newPriceId: z.string().startsWith("price_"),
});

type PreviewSubscriptionBody = z.infer<typeof PreviewSubscriptionBodySchema>;

Then validate the body:

-  const { organizationId, newPriceId } = request.body;
+  const bodyValidation = PreviewSubscriptionBodySchema.safeParse(request.body);
+  if (!bodyValidation.success) {
+    return reply.status(400).send({ 
+      error: "Invalid request body",
+      details: bodyValidation.error.flatten()
+    });
+  }
+  const { organizationId, newPriceId } = bodyValidation.data;

---

128-131: Handle potential division edge cases and improve null safety.

The division operations assume the amounts are valid numbers. Also, the date conversion could be more safely handled.

         proration: {
-          credit: proratedCredit / 100, // Convert from cents to dollars
-          charge: proratedCharge / 100,
-          immediatePayment: immediateCharge / 100,
-          nextBillingDate: currentPeriodEnd ? new Date(currentPeriodEnd * 1000).toISOString() : null,
+          credit: Number.isFinite(proratedCredit) ? proratedCredit / 100 : 0,
+          charge: Number.isFinite(proratedCharge) ? proratedCharge / 100 : 0,
+          immediatePayment: Number.isFinite(immediateCharge) ? immediateCharge / 100 : 0,
+          nextBillingDate: currentPeriodEnd 
+            ? new Date(currentPeriodEnd * 1000).toISOString() 
+            : new Date(subscription.current_period_end * 1000).toISOString(),
         },

---

140-146: Improve error handling specificity.

The generic catch block with any type should be more specific about error types to provide better error messages.

-  } catch (error: any) {
+  } catch (error) {
     console.error("Subscription Preview Error:", error);
+    
+    // Handle Stripe-specific errors
+    if (error instanceof Stripe.errors.StripeError) {
+      const statusCode = error.statusCode || 500;
+      return reply.status(statusCode).send({
+        error: "Stripe error occurred",
+        details: error.message,
+        code: error.code,
+      });
+    }
+    
+    // Handle other errors
+    const message = error instanceof Error ? error.message : "Unknown error occurred";
     return reply.status(500).send({
       error: "Failed to preview subscription update",
-      details: error.message,
+      details: message,
     });
   }

---

30-147: Consider adding database transaction handling.

Since this endpoint reads from the database and interacts with Stripe, consider wrapping database operations in a transaction for consistency, especially if this pattern is extended in the future.

While the current implementation only reads data, consider using a read transaction for consistency:

await db.transaction(async (tx) => {
  // Perform member and organization queries within transaction
  const memberResult = await tx.select({...}).from(member)...
  const orgResult = await tx.select({...}).from(organization)...
  // Continue with Stripe operations outside transaction
});

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro