diff --git a/src/components/SitesTable.tsx b/src/components/SitesTable.tsx index f75184a00..2dd793841 100644 --- a/src/components/SitesTable.tsx +++ b/src/components/SitesTable.tsx @@ -37,8 +37,7 @@ import { ChevronDown, ChevronsUpDownIcon, MoreHorizontal, - PlusIcon, - XIcon + PlusIcon } from "lucide-react"; import { useTranslations } from "next-intl"; import Link from "next/link"; @@ -58,9 +57,11 @@ import { type ExtendedColumnDef } from "./ui/controlled-data-table"; +import { cn } from "@app/lib/cn"; import { LabelsSelector, type SelectedLabel } from "./labels-selector"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; -import { cn } from "@app/lib/cn"; +import { usePaidStatus } from "@app/hooks/usePaidStatus"; +import { tierMatrix } from "@server/lib/billing/tierMatrix"; export type SiteRow = { id: number; @@ -110,10 +111,12 @@ export default function SitesTable({ const [selectedSite, setSelectedSite] = useState(null); const [resourcesDialogSite, setResourcesDialogSite] = useState(null); - const [isLabelsDialogOpen, setIsLabelsDialogOpen] = useState(false); const [isRefreshing, startTransition] = useTransition(); const [isNavigatingToAddPage, startNavigation] = useTransition(); + const { isPaidUser } = usePaidStatus(); + const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels); + const api = createApiClient(useEnvContext()); const t = useTranslations(); @@ -466,18 +469,26 @@ export default function SitesTable({ ); } }, - // The label feature should be added to the tiers - { - accessorKey: "labels", - header: () => ( - - {t("labels")} - - ), - cell: ({ row }) => { - return ; - } - }, + ...(isLabelFeatureEnabled + ? [ + { + accessorKey: "labels", + header: () => ( + + {t("labels")} + + ), + cell: ({ row }: { row: { original: SiteRow } }) => { + return ( + + ); + } + } + ] + : []), { id: "actions", enableHiding: false, @@ -518,24 +529,6 @@ export default function SitesTable({ {t("sitesTableViewPrivateResources")} - { - setSelectedSite(siteRow); - setIsLabelsDialogOpen(true); - }} - > - {t("addLabels")} - - { - setSelectedSite(siteRow); - setIsDeleteModalOpen(true); - }} - > - - {t("delete")} - - {selectedSite && ( - <> - { - setIsDeleteModalOpen(val); - setSelectedSite(null); - }} - dialog={ -
-

{t("siteQuestionRemove")}

-

{t("siteMessageRemove")}

-
- } - buttonText={t("siteConfirmDelete")} - onConfirm={async () => - startTransition(() => deleteSite(selectedSite!.id)) - } - string={selectedSite.name} - title={t("siteDelete")} - /> - + { + setIsDeleteModalOpen(val); + setSelectedSite(null); + }} + dialog={ +
+

{t("siteQuestionRemove")}

+

{t("siteMessageRemove")}

+
+ } + buttonText={t("siteConfirmDelete")} + onConfirm={async () => + startTransition(() => deleteSite(selectedSite!.id)) + } + string={selectedSite.name} + title={t("siteDelete")} + /> )} toggleSiteLabel(label, "detach")} + onClick={() => setIsPopoverOpen(true)} className={cn( "inline-flex gap-1 items-center", "rounded-full text-sm cursor-pointer", - "px-1.5 py-0 h-auto" + "pl-1.5 pr-2 py-0 h-auto" )} >
- + {label.name} - - ))} {optimisticLabels.length > 3 && (