diff --git a/src/components/UptimeAlertSection.tsx b/src/components/UptimeAlertSection.tsx index f7647c977..038e740b2 100644 --- a/src/components/UptimeAlertSection.tsx +++ b/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`); @@ -207,82 +212,90 @@ export default function UptimeAlertSection({
-
- - setName(e.target.value)} - placeholder="Alert name" - /> -
-
- - { - const next = - typeof newTags === "function" - ? newTags(userTags) - : newTags; - setUserTags(next as Tag[]); - }} - enableAutocomplete - autocompleteOptions={allUsers} - restrictTagsToAutocompleteOptions - allowDuplicates={false} - sortTags - /> -
-
- - { - const next = - typeof newTags === "function" - ? newTags(roleTags) - : newTags; - setRoleTags(next as Tag[]); - }} - enableAutocomplete - autocompleteOptions={allRoles} - restrictTagsToAutocompleteOptions - allowDuplicates={false} - sortTags - /> -
-
- - { - const next = - typeof newTags === "function" - ? newTags(emailTags) - : newTags; - setEmailTags(next as Tag[]); - }} - allowDuplicates={false} - sortTags - validateTag={(tag) => - /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(tag) - } - delimiterList={[",", "Enter"]} - /> -
+ +
+
+
+ + setName(e.target.value)} + placeholder="Alert name" + /> +
+
+ + { + const next = + typeof newTags === "function" + ? newTags(userTags) + : newTags; + setUserTags(next as Tag[]); + }} + enableAutocomplete + autocompleteOptions={allUsers} + restrictTagsToAutocompleteOptions + allowDuplicates={false} + sortTags + /> +
+
+ + { + const next = + typeof newTags === "function" + ? newTags(roleTags) + : newTags; + setRoleTags(next as Tag[]); + }} + enableAutocomplete + autocompleteOptions={allRoles} + restrictTagsToAutocompleteOptions + allowDuplicates={false} + sortTags + /> +
+
+ + { + const next = + typeof newTags === "function" + ? newTags(emailTags) + : newTags; + setEmailTags(next as Tag[]); + }} + allowDuplicates={false} + sortTags + validateTag={(tag) => + /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(tag) + } + delimiterList={[",", "Enter"]} + /> +
+
+
@@ -292,7 +305,7 @@ export default function UptimeAlertSection({