Make paid feature

src/components/UptimeAlertSection.tsx

@@ -31,6 +31,9 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { orgQueries } from "@app/lib/queries";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 interface UptimeAlertSectionProps {
     orgId: string;
@@ -49,6 +52,8 @@ export default function UptimeAlertSection({
 }: UptimeAlertSectionProps) {
     const api = createApiClient(useEnvContext());
     const queryClient = useQueryClient();
+    const { isPaidUser } = usePaidStatus();
+    const isPaid = isPaidUser(tierMatrix.alertingRules);
 
     const [open, setOpen] = useState(false);
     const [name, setName] = useState(`${siteId ? "Site" : "Resource"} ${startingName} Alert`);
@@ -206,6 +211,12 @@ export default function UptimeAlertSection({
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
+                        <div className="space-y-4">
+                            <PaidFeaturesAlert tiers={tierMatrix.alertingRules} />
+                            <fieldset
+                                disabled={!isPaid}
+                                className={!isPaid ? "opacity-50 pointer-events-none" : ""}
+                            >
                                 <div className="space-y-4">
                                     <div className="space-y-2">
                                         <Label htmlFor="alert-name">Name</Label>
@@ -284,6 +295,8 @@ export default function UptimeAlertSection({
                                         />
                                     </div>
                                 </div>
+                            </fieldset>
+                        </div>
                     </CredenzaBody>
                     <CredenzaFooter>
                         <CredenzaClose asChild>
@@ -292,7 +305,7 @@ export default function UptimeAlertSection({
                         <Button
                             onClick={handleSubmit}
                             loading={loading}
-                            disabled={loading}
+                            disabled={loading || !isPaid}
                         >
                             Create Alert
                         </Button>