Impvove communication

src/app/[orgId]/settings/provisioning/pending/page.tsx

@@ -9,6 +9,8 @@ import DismissableBanner from "@app/components/DismissableBanner";
 import Link from "next/link";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, Plug } from "lucide-react";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
 
 type PendingSitesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -96,6 +98,10 @@ export default async function PendingSitesPage(props: PendingSitesPageProps) {
                     </Button>
                 </Link>
             </DismissableBanner>
+            <PaidFeaturesAlert
+                tiers={tierMatrix[TierFeature.SiteProvisioningKeys]}
+            />
+
             <PendingSitesTable
                 sites={siteRows}
                 orgId={params.orgId}

src/components/PendingSitesTable.tsx

@@ -15,6 +15,8 @@ import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { build } from "@server/build";
+import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { type PaginationState } from "@tanstack/react-table";
 import {
     ArrowDown01Icon,
@@ -63,6 +65,10 @@ export default function PendingSitesTable({
 
     const api = createApiClient(useEnvContext());
     const t = useTranslations();
+    const { isPaidUser } = usePaidStatus();
+    const canUseSiteProvisioning =
+        isPaidUser(tierMatrix[TierFeature.SiteProvisioningKeys]) &&
+        build !== "oss";
 
     const booleanSearchFilterSchema = z
         .enum(["true", "false"])
@@ -450,6 +456,7 @@ export default function PendingSitesTable({
             onSearch={handleSearchChange}
             onRefresh={refreshData}
             isRefreshing={isRefreshing || isFiltering}
+            refreshButtonDisabled={!canUseSiteProvisioning}
             rowCount={rowCount}
             columnVisibility={{
                 niceId: false,

src/components/SiteProvisioningKeysTable.tsx

@@ -311,6 +311,7 @@ export default function SiteProvisioningKeysTable({
                 addButtonDisabled={!canUseSiteProvisioning}
                 onRefresh={refreshData}
                 isRefreshing={isRefreshing}
+                refreshButtonDisabled={!canUseSiteProvisioning}
                 addButtonText={t("provisioningKeysAdd")}
                 enableColumnVisibility={true}
                 stickyLeftColumn="name"

src/components/ui/controlled-data-table.tsx

@@ -69,6 +69,7 @@ type ControlledDataTableProps<TData, TValue> = {
     onAdd?: () => void;
     onRefresh?: () => void;
     isRefreshing?: boolean;
+    refreshButtonDisabled?: boolean;
     isNavigatingToAddPage?: boolean;
     searchPlaceholder?: string;
     filters?: DataTableFilter[];
@@ -91,6 +92,7 @@ export function ControlledDataTable<TData, TValue>({
     onAdd,
     onRefresh,
     isRefreshing,
+    refreshButtonDisabled = false,
     searchPlaceholder = "Search...",
     filters,
     filterDisplayMode = "label",
@@ -335,7 +337,7 @@ export function ControlledDataTable<TData, TValue>({
                                 <Button
                                     variant="outline"
                                     onClick={onRefresh}
-                                    disabled={isRefreshing}
+                                    disabled={isRefreshing || refreshButtonDisabled}
                                 >
                                     <RefreshCw
                                         className={`mr-0 sm:mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}

src/components/ui/data-table.tsx

@@ -174,6 +174,7 @@ type DataTableProps<TData, TValue> = {
     addButtonDisabled?: boolean;
     onRefresh?: () => void;
     isRefreshing?: boolean;
+    refreshButtonDisabled?: boolean;
     searchPlaceholder?: string;
     searchColumn?: string;
     defaultSort?: {
@@ -207,6 +208,7 @@ export function DataTable<TData, TValue>({
     addButtonDisabled = false,
     onRefresh,
     isRefreshing,
+    refreshButtonDisabled = false,
     searchPlaceholder = "Search...",
     searchColumn = "name",
     defaultSort,
@@ -624,7 +626,7 @@ export function DataTable<TData, TValue>({
                                 <Button
                                     variant="outline"
                                     onClick={onRefresh}
-                                    disabled={isRefreshing}
+                                    disabled={isRefreshing || refreshButtonDisabled}
                                 >
                                     <RefreshCw
                                         className={`mr-0 sm:mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}