add subscription violation banner

messages/en-US.json

@@ -18,6 +18,8 @@
     "componentsMember": "You're a member of {count, plural, =0 {no organization} one {one organization} other {# organizations}}.",
     "componentsInvalidKey": "Invalid or expired license keys detected. Follow license terms to continue using all features.",
     "dismiss": "Dismiss",
+    "subscriptionViolationMessage": "You're beyond your limits for your current plan. Correct the problem by removing sites, users, or other resources to stay within your plan.",
+    "subscriptionViolationViewBilling": "View billing",
     "componentsLicenseViolation": "License Violation: This server is using {usedSites} sites which exceeds its licensed limit of {maxSites} sites. Follow license terms to continue using all features.",
     "componentsSupporterMessage": "Thank you for supporting Pangolin as a {tier}!",
     "inviteErrorNotValid": "We're sorry, but it looks like the invite you're trying to access has not been accepted or is no longer valid.",

server/private/routers/billing/getOrgSubscriptions.ts

@@ -23,6 +23,8 @@ import logger from "@server/logger";
 import { fromZodError } from "zod-validation-error";
 import { OpenAPITags, registry } from "@server/openApi";
 import { GetOrgSubscriptionResponse } from "@server/routers/billing/types";
+import { usageService } from "@server/lib/billing/usageService";
+import { build } from "@server/build";
 
 // Import tables for billing
 import {
@@ -70,9 +72,19 @@ export async function getOrgSubscriptions(
             throw err;
         }
 
+        let limitsExceeded = false;
+        if (build === "saas") {
+            try {
+                limitsExceeded = await usageService.checkLimitSet(orgId);
+            } catch (err) {
+                logger.error("Error checking limits for org %s: %s", orgId, err);
+            }
+        }
+
         return response<GetOrgSubscriptionResponse>(res, {
             data: {
-                subscriptions
+                subscriptions,
+                ...(build === "saas" ? { limitsExceeded } : {})
             },
             success: true,
             error: false,

server/routers/billing/types.ts

@@ -2,6 +2,8 @@ import { Limit, Subscription, SubscriptionItem, Usage } from "@server/db";
 
 export type GetOrgSubscriptionResponse = {
     subscriptions: Array<{ subscription: Subscription; items: SubscriptionItem[] }>;
+    /** When build === saas, true if org has exceeded plan limits (sites, users, etc.) */
+    limitsExceeded?: boolean;
 };
 
 export type GetOrgUsageResponse = {

src/app/[orgId]/layout.tsx

@@ -19,6 +19,7 @@ import OrgPolicyResult from "@app/components/OrgPolicyResult";
 import UserProvider from "@app/providers/UserProvider";
 import { Layout } from "@app/components/Layout";
 import ApplyInternalRedirect from "@app/components/ApplyInternalRedirect";
+import SubscriptionViolation from "@app/components/SubscriptionViolation";
 
 export default async function OrgLayout(props: {
     children: React.ReactNode;
@@ -108,6 +109,7 @@ export default async function OrgLayout(props: {
         >
             <ApplyInternalRedirect orgId={orgId} />
             {props.children}
+            {build === "saas" && <SubscriptionViolation />}
             <SetLastOrgCookie orgId={orgId} />
         </SubscriptionStatusProvider>
     );

src/components/SubscriptionViolation.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+
+export default function SubscriptionViolation() {
+    const context = useSubscriptionStatusContext();
+    const [isDismissed, setIsDismissed] = useState(false);
+    const params = useParams();
+    const orgId = params?.orgId as string | undefined;
+    const t = useTranslations();
+
+    if (!context?.limitsExceeded || isDismissed) return null;
+
+    const billingHref = orgId ? `/${orgId}/settings/billing` : "/";
+
+    return (
+        <div className="fixed bottom-0 left-0 right-0 w-full bg-amber-600 text-white p-4 text-center z-50">
+            <div className="flex flex-wrap justify-center items-center gap-2 sm:gap-4">
+                <p className="text-sm sm:text-base">
+                    {t("subscriptionViolationMessage")}
+                </p>
+                <div className="flex items-center gap-2">
+                    <Button
+                        variant="secondary"
+                        size="sm"
+                        className="bg-white/20 hover:bg-white/30 text-white border-0"
+                        asChild
+                    >
+                        <Link href={billingHref}>
+                            {t("subscriptionViolationViewBilling")}
+                        </Link>
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="hover:bg-white/20 text-white"
+                        onClick={() => setIsDismissed(true)}
+                    >
+                        {t("dismiss")}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

src/contexts/subscriptionStatusContext.ts

@@ -8,6 +8,8 @@ type SubscriptionStatusContextType = {
     getTier: () => { tier: Tier | null; active: boolean };
     isSubscribed: () => boolean;
     subscribed: boolean;
+    /** True when org has exceeded plan limits (sites, users, etc.). Only set when build === saas. */
+    limitsExceeded: boolean;
 };
 
 const SubscriptionStatusContext = createContext<

src/providers/SubscriptionStatusProvider.tsx

@@ -68,6 +68,8 @@ export function SubscriptionStatusProvider({
 
     const [subscribed, setSubscribed] = useState<boolean>(isSubscribed());
 
+    const limitsExceeded = subscriptionStatusState?.limitsExceeded ?? false;
+
     return (
         <SubscriptionStatusContext.Provider
             value={{
@@ -75,7 +77,8 @@ export function SubscriptionStatusProvider({
                 updateSubscriptionStatus,
                 getTier,
                 isSubscribed,
-                subscribed
+                subscribed,
+                limitsExceeded
             }}
         >
             {children}