add subscription violation banner

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}