From ba529ad14ed582b1e23f01656e70168b9b54b7e1 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Sat, 28 Mar 2026 18:20:56 -0700
Subject: [PATCH] hide google and azure idp properly

---
 .../settings/(private)/idp/create/page.tsx    |   2 -
 src/app/admin/idp/create/page.tsx             | 135 ++++++++++--------
 .../idp/OidcIdpProviderTypeSelect.tsx         |  96 +++++++------
 3 files changed, 128 insertions(+), 105 deletions(-)

diff --git a/src/app/[orgId]/settings/(private)/idp/create/page.tsx b/src/app/[orgId]/settings/(private)/idp/create/page.tsx
index 17adcb6b6..c0fc30a8f 100644
--- a/src/app/[orgId]/settings/(private)/idp/create/page.tsx
+++ b/src/app/[orgId]/settings/(private)/idp/create/page.tsx
@@ -219,7 +219,6 @@ export default function Page() {
     }
 
     const disabled = !isPaidUser(tierMatrix.orgOidc);
-    const templatesPaid = isPaidUser(tierMatrix.orgOidc);
 
     return (
         <>
@@ -254,7 +253,6 @@ export default function Page() {
                     <SettingsSectionBody>
                         <OidcIdpProviderTypeSelect
                             value={form.watch("type")}
-                            templatesPaid={templatesPaid}
                             onTypeChange={(next) => {
                                 applyOidcIdpProviderType(form.setValue, next);
                             }}
diff --git a/src/app/admin/idp/create/page.tsx b/src/app/admin/idp/create/page.tsx
index 40d4a3b32..5039d255c 100644
--- a/src/app/admin/idp/create/page.tsx
+++ b/src/app/admin/idp/create/page.tsx
@@ -36,7 +36,7 @@ import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { InfoIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -93,17 +93,18 @@ export default function Page() {
     });
 
     const watchedType = form.watch("type");
-
-    useEffect(() => {
-        if (
-            !templatesPaid &&
-            (watchedType === "google" || watchedType === "azure")
-        ) {
-            applyOidcIdpProviderType(form.setValue, "oidc");
-        }
-    }, [templatesPaid, watchedType, form.setValue]);
+    const templatesLocked =
+        !templatesPaid &&
+        (watchedType === "google" || watchedType === "azure");
 
     async function onSubmit(data: CreateIdpFormValues) {
+        if (
+            !templatesPaid &&
+            (data.type === "google" || data.type === "azure")
+        ) {
+            return;
+        }
+
         setCreateLoading(true);
 
         try {
@@ -166,10 +167,6 @@ export default function Page() {
                 </Button>
             </div>
 
-            {!templatesPaid ? (
-                <PaidFeaturesAlert tiers={tierMatrix.orgOidc} />
-            ) : null}
-
             <SettingsContainer>
                 <SettingsSection>
                     <SettingsSectionHeader>
@@ -181,64 +178,79 @@ export default function Page() {
                         </SettingsSectionDescription>
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
+                        {templatesLocked ? (
+                            <div className="mb-4">
+                                <PaidFeaturesAlert tiers={tierMatrix.orgOidc} />
+                            </div>
+                        ) : null}
                         <OidcIdpProviderTypeSelect
                             value={watchedType}
-                            templatesPaid={templatesPaid}
                             onTypeChange={(next) => {
                                 applyOidcIdpProviderType(form.setValue, next);
                             }}
                         />
 
-                        <SettingsSectionForm>
-                            <Form {...form}>
-                                <form
-                                    className="space-y-4"
-                                    id="create-idp-form"
-                                    onSubmit={form.handleSubmit(onSubmit)}
-                                >
-                                    <FormField
-                                        control={form.control}
-                                        name="name"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {t("name")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Input {...field} />
-                                                </FormControl>
-                                                <FormDescription>
-                                                    {t("idpDisplayName")}
-                                                </FormDescription>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    <div className="flex items-start mb-0">
-                                        <SwitchInput
-                                            id="auto-provision-toggle"
-                                            label={t("idpAutoProvisionUsers")}
-                                            defaultChecked={form.getValues(
-                                                "autoProvision"
+                        <fieldset
+                            disabled={templatesLocked}
+                            className="min-w-0 border-0 p-0 m-0 disabled:pointer-events-none disabled:opacity-60"
+                        >
+                            <SettingsSectionForm>
+                                <Form {...form}>
+                                    <form
+                                        className="space-y-4"
+                                        id="create-idp-form"
+                                        onSubmit={form.handleSubmit(onSubmit)}
+                                    >
+                                        <FormField
+                                            control={form.control}
+                                            name="name"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("name")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormDescription>
+                                                        {t("idpDisplayName")}
+                                                    </FormDescription>
+                                                    <FormMessage />
+                                                </FormItem>
                                             )}
-                                            onCheckedChange={(checked) => {
-                                                form.setValue(
-                                                    "autoProvision",
-                                                    checked
-                                                );
-                                            }}
                                         />
-                                    </div>
-                                    <span className="text-sm text-muted-foreground">
-                                        {t("idpAutoProvisionUsersDescription")}
-                                    </span>
-                                </form>
-                            </Form>
-                        </SettingsSectionForm>
+
+                                        <div className="flex items-start mb-0">
+                                            <SwitchInput
+                                                id="auto-provision-toggle"
+                                                label={t("idpAutoProvisionUsers")}
+                                                defaultChecked={form.getValues(
+                                                    "autoProvision"
+                                                )}
+                                                onCheckedChange={(checked) => {
+                                                    form.setValue(
+                                                        "autoProvision",
+                                                        checked
+                                                    );
+                                                }}
+                                            />
+                                        </div>
+                                        <span className="text-sm text-muted-foreground">
+                                            {t(
+                                                "idpAutoProvisionUsersDescription"
+                                            )}
+                                        </span>
+                                    </form>
+                                </Form>
+                            </SettingsSectionForm>
+                        </fieldset>
                     </SettingsSectionBody>
                 </SettingsSection>
 
+                <fieldset
+                    disabled={templatesLocked}
+                    className="min-w-0 border-0 p-0 m-0 disabled:pointer-events-none disabled:opacity-60"
+                >
                 {watchedType === "google" && (
                     <SettingsSection>
                         <SettingsSectionHeader>
@@ -624,6 +636,7 @@ export default function Page() {
                         </SettingsSection>
                     </SettingsSectionGrid>
                 )}
+                </fieldset>
             </SettingsContainer>
 
             <div className="flex justify-end space-x-2 mt-8">
@@ -638,7 +651,7 @@ export default function Page() {
                 </Button>
                 <Button
                     type="submit"
-                    disabled={createLoading}
+                    disabled={createLoading || templatesLocked}
                     loading={createLoading}
                     onClick={form.handleSubmit(onSubmit)}
                 >
diff --git a/src/components/idp/OidcIdpProviderTypeSelect.tsx b/src/components/idp/OidcIdpProviderTypeSelect.tsx
index f69c005ad..4665d9c0d 100644
--- a/src/components/idp/OidcIdpProviderTypeSelect.tsx
+++ b/src/components/idp/OidcIdpProviderTypeSelect.tsx
@@ -4,60 +4,72 @@ import {
     StrategySelect,
     type StrategyOption
 } from "@app/components/StrategySelect";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 import type { IdpOidcProviderType } from "@app/lib/idp/oidcIdpProviderDefaults";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useEffect, useMemo } from "react";
 
 type Props = {
     value: IdpOidcProviderType;
     onTypeChange: (type: IdpOidcProviderType) => void;
-    templatesPaid: boolean;
 };
 
-export function OidcIdpProviderTypeSelect({
-    value,
-    onTypeChange,
-    templatesPaid
-}: Props) {
+export function OidcIdpProviderTypeSelect({ value, onTypeChange }: Props) {
     const t = useTranslations();
+    const { env } = useEnvContext();
+    const hideTemplates = env.flags.disableEnterpriseFeatures;
 
-    const options: ReadonlyArray<StrategyOption<IdpOidcProviderType>> = [
-        {
-            id: "oidc",
-            title: "OAuth2/OIDC",
-            description: t("idpOidcDescription")
-        },
-        {
-            id: "google",
-            title: t("idpGoogleTitle"),
-            description: t("idpGoogleDescription"),
-            disabled: !templatesPaid,
-            icon: (
-                <Image
-                    src="/idp/google.png"
-                    alt={t("idpGoogleAlt")}
-                    width={24}
-                    height={24}
-                    className="rounded"
-                />
-            )
-        },
-        {
-            id: "azure",
-            title: t("idpAzureTitle"),
-            description: t("idpAzureDescription"),
-            disabled: !templatesPaid,
-            icon: (
-                <Image
-                    src="/idp/azure.png"
-                    alt={t("idpAzureAlt")}
-                    width={24}
-                    height={24}
-                    className="rounded"
-                />
-            )
+    useEffect(() => {
+        if (hideTemplates && (value === "google" || value === "azure")) {
+            onTypeChange("oidc");
         }
-    ];
+    }, [hideTemplates, value, onTypeChange]);
+
+    const options: ReadonlyArray<StrategyOption<IdpOidcProviderType>> =
+        useMemo(() => {
+            const base: StrategyOption<IdpOidcProviderType>[] = [
+                {
+                    id: "oidc",
+                    title: "OAuth2/OIDC",
+                    description: t("idpOidcDescription")
+                }
+            ];
+            if (hideTemplates) {
+                return base;
+            }
+            return [
+                ...base,
+                {
+                    id: "google",
+                    title: t("idpGoogleTitle"),
+                    description: t("idpGoogleDescription"),
+                    icon: (
+                        <Image
+                            src="/idp/google.png"
+                            alt={t("idpGoogleAlt")}
+                            width={24}
+                            height={24}
+                            className="rounded"
+                        />
+                    )
+                },
+                {
+                    id: "azure",
+                    title: t("idpAzureTitle"),
+                    description: t("idpAzureDescription"),
+                    icon: (
+                        <Image
+                            src="/idp/azure.png"
+                            alt={t("idpAzureAlt")}
+                            width={24}
+                            height={24}
+                            className="rounded"
+                        />
+                    )
+                }
+            ];
+        }, [hideTemplates, t]);
 
     return (
         <div>