Properly paywall ui for labels

src/components/CreateOrgLabelDialog.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
 import type { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
@@ -18,6 +20,7 @@ import {
     CredenzaTitle
 } from "./Credenza";
 import { OrgLabelForm } from "./OrgLabelForm";
+import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
 import { Button } from "./ui/button";
 
 export type CreateOrgLabelDialogProps = {
@@ -35,6 +38,8 @@ export function CreateOrgLabelDialog({
 }: CreateOrgLabelDialogProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
+    const { isPaidUser } = usePaidStatus();
+    const canManageLabels = isPaidUser(tierMatrix.labels);
     const [isSubmitting, startTransition] = useTransition();
 
     async function createOrgLabel(data: { name: string; color: string }) {
@@ -79,8 +84,11 @@ export function CreateOrgLabelDialog({
                     </CredenzaDescription>
                 </CredenzaHeader>
                 <CredenzaBody>
+                    <PaidFeaturesAlert tiers={tierMatrix.labels} />
                     <OrgLabelForm
+                        disabled={!canManageLabels}
                         onSubmit={(data) => {
+                            if (!canManageLabels) return;
                             startTransition(async () => createOrgLabel(data));
                         }}
                     />
@@ -98,7 +106,7 @@ export function CreateOrgLabelDialog({
                     <Button
                         type="submit"
                         form="org-label-form"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !canManageLabels}
                         loading={isSubmitting}
                     >
                         {t("labelCreate")}