feat(webapp): move no-limit notice into the billing limit section

Author: kathiekiwi

apps/webapp/app/components/billing/BillingLimitConfigSection.tsx

@@ -7,6 +7,7 @@ import { z } from "zod";
 import { getBillingLimitMode } from "~/components/billing/billingAlertsFormat";
 import { formatGracePeriodMs } from "~/components/billing/billingLimitFormat";
 import { AnimatedCallout } from "~/components/primitives/AnimatedCallout";
+import { Callout } from "~/components/primitives/Callout";
 import { Button } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -190,6 +191,13 @@ export function BillingLimitConfigSection({
         </Paragraph>
       </div>
 
+      {!billingLimit.isConfigured && (
+        <Callout variant="warning" className="mb-3">
+          Configure a monthly billing limit below to cap your spend, or set no limit to let runs
+          keep going.
+        </Callout>
+      )}
+
       <Form method="post" {...getFormProps(form)} ref={formRef}>
         <input type="hidden" name="intent" value="billing-limit" />
         <Fieldset>

apps/webapp/app/components/billing/OrgBanner.tsx

@@ -63,7 +63,7 @@ export function OrgBanner() {
     case OrgBannerKind.LimitGrace:
       return hideBillingLimitBanner ? null : <LimitGraceBanner />;
     case OrgBannerKind.NoLimitConfigured:
-      return <NoLimitConfiguredBanner onBillingLimitsPage={hideBillingLimitBanner} />;
+      return hideBillingLimitBanner ? null : <NoLimitConfiguredBanner />;
     case OrgBannerKind.Upgrade:
       return organization ? <UpgradeBanner /> : null;
     case OrgBannerKind.EnvironmentWarning:
@@ -141,29 +141,25 @@ function LimitGraceBanner() {
   );
 }
 
-function NoLimitConfiguredBanner({ onBillingLimitsPage }: { onBillingLimitsPage: boolean }) {
+function NoLimitConfiguredBanner() {
   const organization = useOrganization();
   const canManageBillingLimits = useCanManageBillingLimits();
 
-  if (!canManageBillingLimits) {
-    return null;
-  }
-
   return (
     <AnimatedOrgBannerBar
       show
       variant="warning"
       action={
-        onBillingLimitsPage ? undefined : (
+        canManageBillingLimits ? (
           <LinkButton variant="tertiary/small" to={v3BillingLimitsPath(organization)}>
             Configure billing limit
           </LinkButton>
-        )
+        ) : undefined
       }
     >
-      {onBillingLimitsPage
-        ? "Please configure a billing limit to protect your organization from unexpected usage spikes."
-        : "Protect your organization from unexpected usage spikes."}
+      {canManageBillingLimits
+        ? "Protect your organization from unexpected usage spikes."
+        : "Billing limits are not configured for this organization. Contact an organization administrator to configure them."}
     </AnimatedOrgBannerBar>
   );
 }