refactor and add tiers

src/app/[orgId]/settings/(private)/access/approvals/page.tsx

@@ -11,6 +11,7 @@ import type { GetOrgResponse } from "@server/routers/org";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 export interface ApprovalFeedPageProps {
     params: Promise<{ orgId: string }>;
@@ -29,10 +30,9 @@ export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
     // Fetch roles to check if approvals are enabled
     let hasApprovalsEnabled = false;
     const rolesRes = await internal
-        .get<AxiosResponse<ListRolesResponse>>(
-            `/org/${params.orgId}/roles`,
-            await authCookieHeader()
-        )
+        .get<
+            AxiosResponse<ListRolesResponse>
+        >(`/org/${params.orgId}/roles`, await authCookieHeader())
         .catch((e) => {});
 
     if (rolesRes && rolesRes.status === 200) {
@@ -52,7 +52,7 @@ export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
 
             <ApprovalsBanner />
 
-            <PaidFeaturesAlert />
+            <PaidFeaturesAlert tiers={tierMatrix.deviceApprovals} />
 
             <OrgProvider org={org}>
                 <div className="container mx-auto max-w-12xl">

src/app/[orgId]/settings/(private)/idp/[idpId]/general/page.tsx

@@ -31,7 +31,6 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useState, useEffect } from "react";
-import { SwitchInput } from "@app/components/SwitchInput";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon, ExternalLink } from "lucide-react";
 import {
@@ -41,12 +40,13 @@ import {
     InfoSectionTitle
 } from "@app/components/InfoSection";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import IdpTypeBadge from "@app/components/IdpTypeBadge";
 import { useTranslations } from "next-intl";
 import { AxiosResponse } from "axios";
 import { ListRolesResponse } from "@server/routers/role";
 import AutoProvisionConfigWidget from "@app/components/AutoProvisionConfigWidget";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 export default function GeneralPage() {
     const { env } = useEnvContext();
@@ -60,7 +60,6 @@ export default function GeneralPage() {
         "role" | "expression"
     >("role");
     const [variant, setVariant] = useState<"oidc" | "google" | "azure">("oidc");
-    const { isUnlocked } = useLicenseStatusContext();
 
     const dashboardRedirectUrl = `${env.app.dashboardUrl}/auth/idp/${idpId}/oidc/callback`;
     const [redirectUrl, setRedirectUrl] = useState(
@@ -499,6 +498,10 @@ export default function GeneralPage() {
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
                         <SettingsSectionForm>
+                            <PaidFeaturesAlert
+                                tiers={tierMatrix.autoProvisioning}
+                            />
+
                             <Form {...form}>
                                 <form
                                     onSubmit={form.handleSubmit(onSubmit)}

src/app/[orgId]/settings/(private)/idp/create/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import AutoProvisionConfigWidget from "@app/components/AutoProvisionConfigWidget";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import {
     SettingsContainer,
     SettingsSection,
@@ -31,6 +32,7 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { ListRolesResponse } from "@server/routers/role";
 import { AxiosResponse } from "axios";
 import { InfoIcon } from "lucide-react";
@@ -50,7 +52,6 @@ export default function Page() {
     const [roleMappingMode, setRoleMappingMode] = useState<
         "role" | "expression"
     >("role");
-    const { isUnlocked } = useLicenseStatusContext();
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
 
@@ -363,6 +364,9 @@ export default function Page() {
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
                         <SettingsSectionForm>
+                            <PaidFeaturesAlert
+                                tiers={tierMatrix.autoProvisioning}
+                            />
                             <Form {...form}>
                                 <form
                                     className="space-y-4"
@@ -808,7 +812,7 @@ export default function Page() {
                 </Button>
                 <Button
                     type="submit"
-                    disabled={createLoading || !isPaidUser}
+                    disabled={createLoading || !isPaidUser(tierMatrix.orgOidc)}
                     loading={createLoading}
                     onClick={() => {
                         // log any issues with the form

src/app/[orgId]/settings/(private)/idp/page.tsx

@@ -5,6 +5,7 @@ import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import IdpTable, { IdpRow } from "@app/components/OrgIdpTable";
 import { getTranslations } from "next-intl/server";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 
 type OrgIdpPageProps = {
     params: Promise<{ orgId: string }>;
@@ -35,7 +36,7 @@ export default async function OrgIdpPage(props: OrgIdpPageProps) {
                 description={t("idpManageDescription")}
             />
 
-            <PaidFeaturesAlert />
+            <PaidFeaturesAlert tiers={tierMatrix.orgOidc} />
 
             <IdpTable idps={idps} orgId={params.orgId} />
         </>

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx

@@ -129,7 +129,9 @@ export default function CredentialsPage() {
                         </SettingsSectionDescription>
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
-                        <PaidFeaturesAlert />
+                        <PaidFeaturesAlert
+                            tiers={tierMatrix.rotateCredentials}
+                        />
 
                         <InfoSections cols={3}>
                             <InfoSection>
@@ -194,7 +196,9 @@ export default function CredentialsPage() {
                                     setShouldDisconnect(false);
                                     setModalOpen(true);
                                 }}
-                                disabled={isPaidUser(tierMatrix.rotateCredentials)}
+                                disabled={
+                                    !isPaidUser(tierMatrix.rotateCredentials)
+                                }
                             >
                                 {t("regenerateCredentialsButton")}
                             </Button>
@@ -203,7 +207,9 @@ export default function CredentialsPage() {
                                     setShouldDisconnect(true);
                                     setModalOpen(true);
                                 }}
-                                disabled={isPaidUser(tierMatrix.rotateCredentials)}
+                                disabled={
+                                    !isPaidUser(tierMatrix.rotateCredentials)
+                                }
                             >
                                 {t("remoteExitNodeRegenerateAndDisconnect")}
                             </Button>