diff --git a/src/components/AuthPageBrandingForm.tsx b/src/components/AuthPageBrandingForm.tsx index 04a6cbcb..136e97f1 100644 --- a/src/components/AuthPageBrandingForm.tsx +++ b/src/components/AuthPageBrandingForm.tsx @@ -43,6 +43,7 @@ import { } from "./Credenza"; import { usePaidStatus } from "@app/hooks/usePaidStatus"; import { build } from "@server/build"; +import { PaidFeaturesAlert } from "./PaidFeaturesAlert"; export type AuthPageCustomizationProps = { orgId: string; @@ -86,7 +87,7 @@ export default function AuthPageBrandingForm({ }: AuthPageCustomizationProps) { const env = useEnvContext(); const api = createApiClient(env); - const { hasSaasSubscription } = usePaidStatus(); + const { isPaidUser } = usePaidStatus(); const router = useRouter(); @@ -117,14 +118,15 @@ export default function AuthPageBrandingForm({ branding?.resourceSubtitle ?? `Choose your preferred authentication method for {{resourceName}}`, primaryColor: branding?.primaryColor ?? `#f36117` // default pangolin primary color - } + }, + disabled: !isPaidUser }); async function updateBranding() { const isValid = await form.trigger(); const brandingData = form.getValues(); - if (!isValid) return; + if (!isValid || !isPaidUser) return; try { const updateRes = await api.put( `/org/${orgId}/login-page-branding`, @@ -154,6 +156,8 @@ export default function AuthPageBrandingForm({ } async function deleteBranding() { + if (!isPaidUser) return; + try { const updateRes = await api.delete( `/org/${orgId}/login-page-branding` @@ -194,6 +198,8 @@ export default function AuthPageBrandingForm({ + +
@@ -293,7 +299,7 @@ export default function AuthPageBrandingForm({ - {hasSaasSubscription && ( + {build === "saas" && ( <> @@ -446,7 +452,7 @@ export default function AuthPageBrandingForm({ type="submit" form="confirm-delete-branding-form" loading={isDeletingBranding} - disabled={isDeletingBranding} + disabled={isDeletingBranding || !isPaidUser} > {t("authPageBrandingDeleteConfirm")} @@ -460,7 +466,11 @@ export default function AuthPageBrandingForm({ variant="destructive" type="button" loading={isUpdatingBranding || isDeletingBranding} - disabled={isUpdatingBranding || isDeletingBranding} + disabled={ + isUpdatingBranding || + isDeletingBranding || + !isPaidUser + } onClick={() => { setIsDeleteModalOpen(true); }} @@ -474,7 +484,11 @@ export default function AuthPageBrandingForm({ type="submit" form="auth-page-branding-form" loading={isUpdatingBranding || isDeletingBranding} - disabled={isUpdatingBranding || isDeletingBranding} + disabled={ + isUpdatingBranding || + isDeletingBranding || + !isPaidUser + } > {t("saveAuthPageBranding")} diff --git a/src/components/private/AuthPageSettings.tsx b/src/components/private/AuthPageSettings.tsx index 4235368b..aff6662a 100644 --- a/src/components/private/AuthPageSettings.tsx +++ b/src/components/private/AuthPageSettings.tsx @@ -43,8 +43,8 @@ import DomainPicker from "@app/components/DomainPicker"; import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils"; import { InfoPopup } from "@app/components/ui/info-popup"; import { Alert, AlertDescription } from "@app/components/ui/alert"; -import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext"; import { build } from "@server/build"; +import { usePaidStatus } from "@app/hooks/usePaidStatus"; // Auth page form schema const AuthPageFormSchema = z.object({ @@ -74,7 +74,7 @@ function AuthPageSettings({ const t = useTranslations(); const { env } = useEnvContext(); - const subscription = useSubscriptionStatusContext(); + const { hasSaasSubscription } = usePaidStatus(); // Auth page domain state const [loginPage, setLoginPage] = useState(defaultLoginPage); @@ -176,10 +176,7 @@ function AuthPageSettings({ try { // Handle auth page domain if (data.authPageDomainId) { - if ( - build === "enterprise" || - (build === "saas" && subscription?.subscribed) - ) { + if (build === "enterprise" || hasSaasSubscription) { const sanitizedSubdomain = data.authPageSubdomain ? finalizeSubdomainSanitize(data.authPageSubdomain) : ""; @@ -284,7 +281,7 @@ function AuthPageSettings({ - {build === "saas" && !subscription?.subscribed ? ( + {!hasSaasSubscription ? ( {t("orgAuthPageDisabled")}{" "} @@ -368,6 +365,7 @@ function AuthPageSettings({ onClick={() => setEditDomainOpen(true) } + disabled={!hasSaasSubscription} > {form.watch("authPageDomainId") ? t("changeDomain") @@ -381,6 +379,9 @@ function AuthPageSettings({ onClick={ clearAuthPageDomain } + disabled={ + !hasSaasSubscription + } > @@ -398,8 +399,7 @@ function AuthPageSettings({ {env.flags.usePangolinDns && (build === "enterprise" || - (build === "saas" && - subscription?.subscribed)) && + !hasSaasSubscription) && loginPage?.domainId && loginPage?.fullDomain && !hasUnsavedChanges && ( @@ -425,7 +425,11 @@ function AuthPageSettings({ type="submit" form="auth-page-settings-form" loading={isSubmitting} - disabled={isSubmitting || !hasUnsavedChanges} + disabled={ + isSubmitting || + !hasUnsavedChanges || + !hasSaasSubscription + } > {t("saveAuthPageDomain")} @@ -474,7 +478,7 @@ function AuthPageSettings({ handleDomainSelection(selectedDomain); } }} - disabled={!selectedDomain} + disabled={!selectedDomain || !hasSaasSubscription} > {t("selectDomain")}