Show upgrade message for free users to get static IPs

Author: matt-aitken

apps/webapp/app/presenters/v3/RegionsPresenter.server.ts

@@ -1,17 +1,16 @@
-import { type z } from "zod";
-import { type PrismaClient, prisma } from "~/db.server";
 import { type Project } from "~/models/project.server";
 import { type User } from "~/models/user.server";
-import { FEATURE_FLAG, flags, makeFlags } from "~/v3/featureFlags.server";
+import { FEATURE_FLAG, makeFlags } from "~/v3/featureFlags.server";
 import { BasePresenter } from "./basePresenter.server";
+import { getCurrentPlan } from "~/services/platform.v3.server";
 
 export type Region = {
   id: string;
   name: string;
   description?: string;
   cloudProvider?: string;
   location?: string;
-  staticIPs?: string;
+  staticIPs?: string | null;
   isDefault: boolean;
 };
 
@@ -122,13 +121,25 @@ export class RegionsPresenter extends BasePresenter {
     });
 
     // Remove later duplicates
-    const unique = sorted.filter((region, index, self) => {
+    let unique = sorted.filter((region, index, self) => {
       const firstIndex = self.findIndex((t) => t.id === region.id);
       return index === firstIndex;
     });
 
+    // Don't show static IPs for free users
+    // Even if they had the IPs they wouldn't work, but this makes it less confusing
+    const currentPlan = await getCurrentPlan(project.organizationId);
+    const isPaying = currentPlan?.v3Subscription.isPaying === true;
+    if (!isPaying) {
+      unique = unique.map((region) => ({
+        ...region,
+        staticIPs: region.staticIPs ? null : undefined,
+      }));
+    }
+
     return {
       regions: unique.sort((a, b) => a.name.localeCompare(b.name)),
+      isPaying,
     };
   }
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -1,5 +1,6 @@
 import {
   ArrowRightIcon,
+  ArrowUpCircleIcon,
   BookOpenIcon,
   ChatBubbleLeftEllipsisIcon,
   MapPinIcon,
@@ -44,6 +45,7 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import { TextLink } from "~/components/primitives/TextLink";
+import { useOrganization } from "~/hooks/useOrganizations";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { type Region, RegionsPresenter } from "~/presenters/v3/RegionsPresenter.server";
@@ -53,6 +55,7 @@ import {
   EnvironmentParamSchema,
   ProjectParamSchema,
   regionsPath,
+  v3BillingPath,
 } from "~/utils/pathBuilder";
 import { SetDefaultRegionService } from "~/v3/services/setDefaultRegion.server";
 
@@ -121,7 +124,8 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 };
 
 export default function Page() {
-  const { regions } = useTypedLoaderData<typeof loader>();
+  const { regions, isPaying } = useTypedLoaderData<typeof loader>();
+  const organization = useOrganization();
 
   return (
     <PageContainer>
@@ -215,7 +219,19 @@ export default function Page() {
                               </span>
                             </TableCell>
                             <TableCell>
-                              {region.staticIPs ? (
+                              {region.staticIPs === null ? (
+                                <LinkButton
+                                  variant="secondary/small"
+                                  to={v3BillingPath(
+                                    organization,
+                                    "Upgrade your plan to unlock static IPs"
+                                  )}
+                                  LeadingIcon={ArrowUpCircleIcon}
+                                  leadingIconClassName="text-indigo-500"
+                                >
+                                  Unlock static IPs
+                                </LinkButton>
+                              ) : region.staticIPs !== undefined ? (
                                 <ClipboardField
                                   value={region.staticIPs}
                                   variant={"secondary/small"}