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")}

src/components/EditOrgLabelDialog.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 EditOrgLabelDialogProps = {
@@ -41,6 +44,8 @@ export function EditOrgLabelDialog({
 }: EditOrgLabelDialogProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
+    const { isPaidUser } = usePaidStatus();
+    const canManageLabels = isPaidUser(tierMatrix.labels);
     const [isSubmitting, startTransition] = useTransition();
 
     async function editOrgLabel(data: { name: string; color: string }) {
@@ -85,9 +90,12 @@ export function EditOrgLabelDialog({
                     </CredenzaDescription>
                 </CredenzaHeader>
                 <CredenzaBody>
+                    <PaidFeaturesAlert tiers={tierMatrix.labels} />
                     <OrgLabelForm
+                        disabled={!canManageLabels}
                         defaultValue={label}
                         onSubmit={(data) => {
+                            if (!canManageLabels) return;
                             startTransition(async () => editOrgLabel(data));
                         }}
                     />
@@ -105,7 +113,7 @@ export function EditOrgLabelDialog({
                     <Button
                         type="submit"
                         form="org-label-form"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !canManageLabels}
                         loading={isSubmitting}
                     >
                         {t("labelEdit")}

src/components/OrgLabelForm.tsx

@@ -35,9 +35,14 @@ export type LabelFormData = z.infer<typeof labelFormSchema>;
 export type OrgLabelFormProps = {
     onSubmit: (data: LabelFormData) => void;
     defaultValue?: LabelFormData;
+    disabled?: boolean;
 };
 
-export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
+export function OrgLabelForm({
+    onSubmit,
+    defaultValue,
+    disabled = false
+}: OrgLabelFormProps) {
     const t = useTranslations();
 
     const colorValues = Object.values(LABEL_COLORS);
@@ -70,9 +75,7 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                         <FormItem>
                             <FormLabel>{t("labelNameField")}</FormLabel>
                             <FormControl>
-                                <Input
-                                    {...field}
-                                />
+                                <Input {...field} disabled={disabled} />
                             </FormControl>
                             <FormMessage />
                         </FormItem>
@@ -88,6 +91,7 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                             <Select
                                 onValueChange={field.onChange}
                                 value={field.value}
+                                disabled={disabled}
                             >
                                 <SelectTrigger className="w-full">
                                     <SelectValue
@@ -110,7 +114,9 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                                                     }}
                                                 />
                                                 <span data-name>
-                                                    {color.charAt(0).toUpperCase() +
+                                                    {color
+                                                        .charAt(0)
+                                                        .toUpperCase() +
                                                         color.slice(1)}
                                                 </span>
                                             </SelectItem>