🛂 check for subscription status

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({
                     </SettingsSectionDescription>
                 </SettingsSectionHeader>
 
+                <PaidFeaturesAlert />
+
                 <SettingsSectionBody>
                     <SettingsSectionForm>
                         <Form {...form}>
@@ -293,7 +299,7 @@ export default function AuthPageBrandingForm({
                                     </div>
                                 </div>
 
-                                {hasSaasSubscription && (
+                                {build === "saas" && (
                                     <>
                                         <Separator />
 
@@ -446,7 +452,7 @@ export default function AuthPageBrandingForm({
                                 type="submit"
                                 form="confirm-delete-branding-form"
                                 loading={isDeletingBranding}
-                                disabled={isDeletingBranding}
+                                disabled={isDeletingBranding || !isPaidUser}
                             >
                                 {t("authPageBrandingDeleteConfirm")}
                             </Button>
@@ -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")}
                     </Button>

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({
                     </SettingsSectionDescription>
                 </SettingsSectionHeader>
                 <SettingsSectionBody>
-                    {build === "saas" && !subscription?.subscribed ? (
+                    {!hasSaasSubscription ? (
                         <Alert variant="info" className="mb-6">
                             <AlertDescription>
                                 {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
+                                                    }
                                                 >
                                                     <Trash2 size="14" />
                                                 </Button>
@@ -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")}
                     </Button>
@@ -474,7 +478,7 @@ function AuthPageSettings({
                                     handleDomainSelection(selectedDomain);
                                 }
                             }}
-                            disabled={!selectedDomain}
+                            disabled={!selectedDomain || !hasSaasSubscription}
                         >
                             {t("selectDomain")}
                         </Button>