From 6e76819c2ccee73eb4f687f326a790b44f79beb3 Mon Sep 17 00:00:00 2001
From: Pascal van Leeuwen <pascal@grove.city>
Date: Tue, 3 Sep 2024 17:06:01 +0100
Subject: [PATCH 1/5] feat: add update for monthly user limit to UI

---
 app/models/portal/queries.graphqls            |  1 +
 .../view.tsx                                  | 25 +++++++-
 .../components/AccountForm/AccountForm.tsx    | 60 +++++++++++++++----
 .../account_.$accountId.update/route.tsx      | 25 +++++---
 4 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/app/models/portal/queries.graphqls b/app/models/portal/queries.graphqls
index 2c97f87cb..216f8e52a 100644
--- a/app/models/portal/queries.graphqls
+++ b/app/models/portal/queries.graphqls
@@ -50,6 +50,7 @@ query getUserAccount(
     name
     planType
     enterpriseLimit
+    monthlyUserLimit
     notifications {
       notificationType
       notificationSettings {
diff --git a/app/routes/account.$accountId.settings._index/view.tsx b/app/routes/account.$accountId.settings._index/view.tsx
index cb4c58c96..439b3169d 100644
--- a/app/routes/account.$accountId.settings._index/view.tsx
+++ b/app/routes/account.$accountId.settings._index/view.tsx
@@ -12,6 +12,8 @@ import { Link } from "@remix-run/react"
 import { Identicon } from "~/components/Identicon"
 import { Account, RoleName } from "~/models/portal/sdk"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
+import { commify } from "~/utils/formattingUtils"
+import { isUnlimitedPlan } from "~/utils/planUtils"
 
 type AccountSettingsViewProps = {
   account: Account
@@ -34,12 +36,29 @@ export const AccountSettingsView = ({ account, userRole }: AccountSettingsViewPr
         <Text pt={5}>A unique image representing your account. </Text>
       </Box>
       <Divider />
+      {isUnlimitedPlan(account.planType) && (
+        <>
+          <Stack align="flex-start" py={20}>
+            <Box>
+              <Text fw={600}>Monthly Relay Limit</Text>
+              <Text pt={5}>
+                {account.monthlyUserLimit === 0
+                  ? "You have no monthly relay limit. You may set a monthly relay limit in Account Settings."
+                  : `You have a monthly relay limit of ${commify(
+                      account.monthlyUserLimit,
+                    )} relays. Once you hit this limit, your account will stop working until the start of the next calendar month. You may increase this limit in Account Settings.`}
+              </Text>
+            </Box>
+          </Stack>
+          <Divider />
+        </>
+      )}
       {userRole !== RoleName.Member && (
         <>
           <Stack align="flex-start" py={20}>
             <Box>
-              <Text fw={600}>Account Name</Text>
-              <Text pt={5}>Modify your account name here. </Text>
+              <Text fw={600}>Account Settings</Text>
+              <Text pt={5}>Modify your account settings here. </Text>
             </Box>
             <Button
               color="gray"
@@ -53,7 +72,7 @@ export const AccountSettingsView = ({ account, userRole }: AccountSettingsViewPr
                 })
               }}
             >
-              Change name
+              Change settings
             </Button>
           </Stack>
           <Divider />
diff --git a/app/routes/account_.$accountId.update/components/AccountForm/AccountForm.tsx b/app/routes/account_.$accountId.update/components/AccountForm/AccountForm.tsx
index e05cf6b06..2452fb40b 100644
--- a/app/routes/account_.$accountId.update/components/AccountForm/AccountForm.tsx
+++ b/app/routes/account_.$accountId.update/components/AccountForm/AccountForm.tsx
@@ -1,9 +1,11 @@
-import { Button, Divider, Group, Stack, TextInput } from "@mantine/core"
+import { Button, Divider, Group, Stack, NumberInput, TextInput } from "@mantine/core"
 import { Form, NavLink, useParams } from "@remix-run/react"
 import { useState } from "react"
 import RouteModal from "~/components/RouteModal"
 import { Account } from "~/models/portal/sdk"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
+import { commify } from "~/utils/formattingUtils"
+import { isUnlimitedPlan } from "~/utils/planUtils"
 
 type AccountFormProps = {
   account: Account
@@ -11,10 +13,20 @@ type AccountFormProps = {
   onSubmit: (formData: FormData) => void
 }
 
+function EnableUpdate(name: string, monthlyRelayLimit: number, account: Account) {
+  return (
+    (name !== "" && name !== account.name) ||
+    monthlyRelayLimit !== account.monthlyUserLimit
+  )
+}
+
 const AccountForm = ({ account, redirectTo, onSubmit }: AccountFormProps) => {
   const { accountId } = useParams()
   const closeButtonRedirect = redirectTo ?? `/account/${accountId}/settings`
   const [name, setName] = useState(account?.name ?? "")
+  const [monthlyRelayLimit, setMonthlyRelayLimit] = useState(
+    account?.monthlyUserLimit ?? 0,
+  )
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault()
@@ -24,15 +36,14 @@ const AccountForm = ({ account, redirectTo, onSubmit }: AccountFormProps) => {
 
   return (
     <Stack>
-      <RouteModal.Header
-        closeButtonLink={closeButtonRedirect}
-        description="An accurate account name helps team members identify their workspace. Ensure
-          it's current and relevant by updating it here."
-        title="Account Name"
-      />
-      <Divider mb="md" mt="xl" />
       <Form method="post" onSubmit={handleSubmit}>
-        <Stack gap="md">
+        <RouteModal.Header
+          closeButtonLink={closeButtonRedirect}
+          description="An accurate account name helps team members identify their workspace. Ensure
+          it's current and relevant by updating it here."
+          title="Account Name"
+        />
+        <Stack gap="md" mt="sm">
           <TextInput
             required
             defaultValue={name}
@@ -45,7 +56,34 @@ const AccountForm = ({ account, redirectTo, onSubmit }: AccountFormProps) => {
             onChange={(e) => setName(e.target.value)}
           />
         </Stack>
-        <Divider my={32} />
+        <Divider mb="md" mt="xl" />
+        {isUnlimitedPlan(account.planType) && (
+          <>
+            <RouteModal.Header
+              closeButtonLink={closeButtonRedirect}
+              description={`Set a monthly relay limit to avoid extra charges. Your account will stop working once you hit this limit and will resume at the start of the next calendar month. The limit must be set in multiples of 1,000,000. Your current limit is ${commify(
+                account.monthlyUserLimit,
+              )} relays per month.`}
+              title="Monthly Relay Limit"
+            />
+            <Stack gap="md" mt="sm">
+              <NumberInput
+                allowDecimal={false}
+                allowNegative={false}
+                defaultValue={monthlyRelayLimit}
+                description="Optional"
+                fw={600}
+                label="Monthly Relay Limit"
+                name="monthly_relay_limit"
+                step={1000000}
+                thousandSeparator=","
+                w="200px"
+                onChange={(value) => setMonthlyRelayLimit(Number(value))}
+              />
+            </Stack>
+            <Divider my={32} />
+          </>
+        )}
         <Group justify="right">
           <Button
             color="gray"
@@ -60,7 +98,7 @@ const AccountForm = ({ account, redirectTo, onSubmit }: AccountFormProps) => {
             Discard
           </Button>
           <Button
-            disabled={name === ""}
+            disabled={!EnableUpdate(name, monthlyRelayLimit, account)}
             fw={400}
             fz="sm"
             px="xs"
diff --git a/app/routes/account_.$accountId.update/route.tsx b/app/routes/account_.$accountId.update/route.tsx
index bca0a9df8..f880b7c12 100644
--- a/app/routes/account_.$accountId.update/route.tsx
+++ b/app/routes/account_.$accountId.update/route.tsx
@@ -18,7 +18,11 @@ import { ErrorBoundaryView } from "~/components/ErrorBoundaryView"
 import RouteModal from "~/components/RouteModal"
 import useActionNotification from "~/hooks/useActionNotification"
 import { initPortalClient } from "~/models/portal/portal.server"
-import { Account, RoleName } from "~/models/portal/sdk"
+import {
+  Account,
+  UpdateAccount as UpdateAccountParams,
+  RoleName,
+} from "~/models/portal/sdk"
 import { ActionDataStruct } from "~/types/global"
 import { getUserAccountRole } from "~/utils/accountUtils"
 import { getErrorMessage } from "~/utils/catchError"
@@ -82,20 +86,27 @@ export const action: ActionFunction = async ({ request, params }) => {
   const portal = initPortalClient({ token: user.accessToken })
   const formData = await request.formData()
   const name = formData.get("account_name")
+  const monthlyRelayLimit = formData.get("monthly_relay_limit")
   const { accountId } = params
   const redirectTo = url.searchParams.get("redirectTo")
 
   invariant(name && typeof name === "string", "account name not found")
   invariant(accountId && typeof accountId === "string", "accountId not found")
 
+  const accountInput: UpdateAccountParams = {
+    accountID: accountId,
+  }
+  if (name) {
+    accountInput.name = name
+  }
+  if (monthlyRelayLimit && typeof monthlyRelayLimit === "string") {
+    const sanitizedLimit = monthlyRelayLimit.replace(/,/g, "")
+    accountInput.monthlyUserLimit = Number(sanitizedLimit)
+  }
+
   try {
     const updateUserAccountResponse = await portal
-      .updateUserAccount({
-        input: {
-          accountID: accountId,
-          name,
-        },
-      })
+      .updateUserAccount({ input: accountInput })
       .catch(() => {
         throw new Error("Unable to update account")
       })

From f4280d75bcecb2bdedb0f6dbe911273e52a4f317 Mon Sep 17 00:00:00 2001
From: Pascal van Leeuwen <pascal@grove.city>
Date: Tue, 3 Sep 2024 21:54:00 +0100
Subject: [PATCH 2/5] chore: update readme with stripe webhook forwarding
 instructions

---
 README.md                        | 24 ++++++++++++++++++++++++
 app/models/stripe/stripe.data.ts |  4 ++++
 2 files changed, 28 insertions(+)

diff --git a/README.md b/README.md
index 6bbdb85f2..e7ad97bcf 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,30 @@ Open up [http://localhost:3000](http://localhost:3000) and you should be ready t
 
 If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.
 
+### Stripe Webhook Forwarding
+
+If you wish to test the Stripe webhook flow, you must use the Stripe CLI to forward the webhook to your local environment.
+
+[Full instructions can be found on the Stripe documentation page.](https://docs.stripe.com/stripe-cli/overview#forward-events-to-your-local-webhook-endpoint)
+
+You must initialize the Stripe CLI with your Stripe account:
+
+```sh
+stripe login
+```
+
+Then run the following to start forwarding webhooks:
+
+```sh
+stripe --api-key <STRIPE API KEY> listen --forward-to http://localhost:3000/api/stripe/webhook
+```
+
+It is generally recommended to use the test mode Stripe API key for forwarding webhooks, as this will not create any real subscriptions or charge any real money.
+
+You will be given a webhook signing secret, set it in your `.env` file as `STRIPE_WEBHOOK_SECRET`.
+
+[The webhook handling code in this repo can be found here.](app/routes/api.stripe.webhook/route.tsx).
+
 ### Backend
 
 This currently requires you to also run the current portal backend on localhost:4200 in order to run. I am working with the backend team to whitelist localhost and enable us to hit the backend.staging.portal.pokt.network endpoints.
diff --git a/app/models/stripe/stripe.data.ts b/app/models/stripe/stripe.data.ts
index b1404d0db..6941c775f 100644
--- a/app/models/stripe/stripe.data.ts
+++ b/app/models/stripe/stripe.data.ts
@@ -213,6 +213,10 @@ export const subscription: Stripe.Subscription = {
   description: null,
   discount: null,
   ended_at: null,
+  invoice_settings: {
+    account_tax_ids: null,
+    issuer: { type: "self" },
+  },
   items: {
     object: "list",
     data: [

From 09f9684365beb3854631aa69d0f2872cce61529b Mon Sep 17 00:00:00 2001
From: Pascal van Leeuwen <pascal@grove.city>
Date: Wed, 4 Sep 2024 07:48:43 +0100
Subject: [PATCH 3/5] fix: address review comments

---
 README.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e7ad97bcf..285c08631 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ stripe login
 Then run the following to start forwarding webhooks:
 
 ```sh
-stripe --api-key <STRIPE API KEY> listen --forward-to http://localhost:3000/api/stripe/webhook
+stripe --api-key {STRIPE_API_KEY} listen --forward-to http://localhost:3000/api/stripe/webhook
 ```
 
 It is generally recommended to use the test mode Stripe API key for forwarding webhooks, as this will not create any real subscriptions or charge any real money.
@@ -62,6 +62,10 @@ You will be given a webhook signing secret, set it in your `.env` file as `STRIP
 
 [The webhook handling code in this repo can be found here.](app/routes/api.stripe.webhook/route.tsx).
 
+### Environment Variables
+
+[You can find the environment variables - including for Stripe- here.](https://start.1password.com/open/i?a=4PU7ZENUCRCRTNSQWQ7PWCV2RM&v=kudw25ob4zcynmzmv2gv4qpkuq&i=picsbxs4vwfewipk5zg3rdou2u&h=buildwithgrove.1password.com)
+
 ### Backend
 
 This currently requires you to also run the current portal backend on localhost:4200 in order to run. I am working with the backend team to whitelist localhost and enable us to hit the backend.staging.portal.pokt.network endpoints.

From 1d4431af8f82fc5468fb6730c57f7a2b4987c244 Mon Sep 17 00:00:00 2001
From: Pascal van Leeuwen <pascal@grove.city>
Date: Wed, 4 Sep 2024 15:42:38 +0100
Subject: [PATCH 4/5] fix: update to plan free ob wenhook cancellations

---
 app/routes/account.$accountId.billing/route.tsx | 2 +-
 app/routes/account_.$accountId.create/route.tsx | 2 +-
 app/routes/api.stripe.webhook/route.tsx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/routes/account.$accountId.billing/route.tsx b/app/routes/account.$accountId.billing/route.tsx
index 5bb031aaf..cf15d6f02 100644
--- a/app/routes/account.$accountId.billing/route.tsx
+++ b/app/routes/account.$accountId.billing/route.tsx
@@ -52,7 +52,7 @@ export const loader: LoaderFunction = async ({ request, params }) => {
     const userRole = getUserAccountRole(account.users, user.user.portalUserID) as RoleName
 
     // Redirect to account page if user is a member or account is on Starter
-    if (userRole === RoleName.Member || account.plan.type === PayPlanType.FreetierV0) {
+    if (userRole === RoleName.Member || account.plan.type === PayPlanType.PlanFree) {
       return redirect(`/account/${accountId}`)
     }
 
diff --git a/app/routes/account_.$accountId.create/route.tsx b/app/routes/account_.$accountId.create/route.tsx
index a943bd926..ed651f630 100644
--- a/app/routes/account_.$accountId.create/route.tsx
+++ b/app/routes/account_.$accountId.create/route.tsx
@@ -172,7 +172,7 @@ export default function CreateApp() {
   useActionNotification(fetcherData)
 
   const handleFormSubmit = (formData: FormData) => {
-    if (account.planType === PayPlanType.FreetierV0) {
+    if (account.planType === PayPlanType.PlanFree) {
       setAppFromData(formData)
     } else {
       fetcher.submit(formData, {
diff --git a/app/routes/api.stripe.webhook/route.tsx b/app/routes/api.stripe.webhook/route.tsx
index 0dd0e5ee2..3a52c3506 100644
--- a/app/routes/api.stripe.webhook/route.tsx
+++ b/app/routes/api.stripe.webhook/route.tsx
@@ -85,7 +85,7 @@ export const action: ActionFunction = async ({ request }) => {
 
         const formData = new FormData()
         formData.set("id", accountIdDeleted)
-        formData.set("type", PayPlanType.FreetierV0)
+        formData.set("type", PayPlanType.PlanFree)
 
         await fetch(`${url.origin}/api/admin/update-plan`, {
           method: "post",

From 8f0e9500ffaeb8df25e1642fdfec557cda5790ca Mon Sep 17 00:00:00 2001
From: Pascal van Leeuwen <pascal@grove.city>
Date: Wed, 4 Sep 2024 16:26:55 +0100
Subject: [PATCH 5/5] fix: account plan page

---
 app/models/portal/portal.data.ts              |  4 +-
 .../view.tsx                                  | 14 ++++-
 .../FreeAccountPlan/FreeAccountPlan.tsx       | 12 +---
 .../FreePlanLimitCard/FreePlanLimitCard.tsx   | 39 ------------
 .../components/FreePlanLimitCard/index.ts     |  3 -
 .../StarterAccountPlan/StarterAccountPlan.tsx | 60 -------------------
 .../components/StarterAccountPlan/index.ts    |  3 -
 .../StarterPlanLimitCard.tsx                  | 39 ------------
 .../components/StarterPlanLimitCard/index.ts  |  3 -
 .../UnlimitedPlanOverviewCard.tsx             |  2 +-
 .../route.test.tsx                            |  4 +-
 .../view.test.tsx                             |  6 +-
 .../account.$accountId.settings.plan/view.tsx | 12 ++--
 .../api.stripe.subscription-delete/route.tsx  |  2 +-
 14 files changed, 28 insertions(+), 175 deletions(-)
 delete mode 100644 app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/FreePlanLimitCard.tsx
 delete mode 100644 app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/index.ts
 delete mode 100644 app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/StarterAccountPlan.tsx
 delete mode 100644 app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/index.ts
 delete mode 100644 app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/StarterPlanLimitCard.tsx
 delete mode 100644 app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/index.ts

diff --git a/app/models/portal/portal.data.ts b/app/models/portal/portal.data.ts
index 58b14e9fa..d72dc83d6 100644
--- a/app/models/portal/portal.data.ts
+++ b/app/models/portal/portal.data.ts
@@ -534,7 +534,7 @@ export const profileMockData: User & { auth0ID: string } = {
 export const accountMockData: Account = {
   id: "08cbd8b8",
   name: "Staging",
-  planType: PayPlanType.FreetierV0,
+  planType: PayPlanType.PlanFree,
   enterpriseLimit: 0,
   monthlyUserLimit: 0,
   notifications: [
@@ -671,7 +671,7 @@ export const accountMockData: Account = {
   ],
   plan: {
     id: "",
-    type: PayPlanType.FreetierV0,
+    type: PayPlanType.PlanFree,
     monthlyRelayLimit: 0,
     chainIDs: [],
     throughputLimit: 30,
diff --git a/app/routes/account.$accountId.settings._index/view.tsx b/app/routes/account.$accountId.settings._index/view.tsx
index 439b3169d..4de522998 100644
--- a/app/routes/account.$accountId.settings._index/view.tsx
+++ b/app/routes/account.$accountId.settings._index/view.tsx
@@ -43,10 +43,18 @@ export const AccountSettingsView = ({ account, userRole }: AccountSettingsViewPr
               <Text fw={600}>Monthly Relay Limit</Text>
               <Text pt={5}>
                 {account.monthlyUserLimit === 0
-                  ? "You have no monthly relay limit. You may set a monthly relay limit in Account Settings."
-                  : `You have a monthly relay limit of ${commify(
+                  ? `This account has no monthly relay limit. ${
+                      userRole === RoleName.Member
+                        ? "You may set a monthly relay limit in Account Settings."
+                        : "An admin of this account may set a monthly relay limit in Account Settings."
+                    }`
+                  : `This account has a monthly relay limit of ${commify(
                       account.monthlyUserLimit,
-                    )} relays. Once you hit this limit, your account will stop working until the start of the next calendar month. You may increase this limit in Account Settings.`}
+                    )} relays. Once you hit this limit, your account will stop working until the start of the next calendar month. ${
+                      userRole === RoleName.Member
+                        ? "An admin of this account may increase this limit in Account Settings."
+                        : "You may increase this limit in Account Settings."
+                    }`}
               </Text>
             </Box>
           </Stack>
diff --git a/app/routes/account.$accountId.settings.plan/components/FreeAccountPlan/FreeAccountPlan.tsx b/app/routes/account.$accountId.settings.plan/components/FreeAccountPlan/FreeAccountPlan.tsx
index d55422414..96c55ea83 100644
--- a/app/routes/account.$accountId.settings.plan/components/FreeAccountPlan/FreeAccountPlan.tsx
+++ b/app/routes/account.$accountId.settings.plan/components/FreeAccountPlan/FreeAccountPlan.tsx
@@ -2,24 +2,18 @@ import { SimpleGrid, Stack, Text, Title } from "@mantine/core"
 import { useNavigate } from "@remix-run/react"
 import React from "react"
 import { AccountPlan } from "~/components/AccountPlan"
-import { Account, PayPlanType, RoleName } from "~/models/portal/sdk"
-import FreePlanLimitCard from "~/routes/account.$accountId.settings.plan/components/FreePlanLimitCard"
+import { Account, PayPlanType } from "~/models/portal/sdk"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
 import { getPlanName } from "~/utils/planUtils"
 
 type FreeAccountPlanProps = {
   account: Account
-  userRole: RoleName
 }
 
-const FreeAccountPlan = ({ account, userRole }: FreeAccountPlanProps) => {
+const FreeAccountPlan = ({ account }: FreeAccountPlanProps) => {
   const navigate = useNavigate()
 
-  return userRole === "MEMBER" ? (
-    <Stack mt={"xl"}>
-      <FreePlanLimitCard account={account} />
-    </Stack>
-  ) : (
+  return (
     <Stack align="center" mt={"xl"}>
       <Stack gap="xs" ta="center">
         <Title order={3}>Upgrade your plan</Title>
diff --git a/app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/FreePlanLimitCard.tsx b/app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/FreePlanLimitCard.tsx
deleted file mode 100644
index 72f4ba051..000000000
--- a/app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/FreePlanLimitCard.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Divider, Group, Text, Stack } from "@mantine/core"
-import React from "react"
-import { TitledCard } from "~/components/TitledCard"
-import { Account } from "~/models/portal/sdk"
-import { getPlanName } from "~/utils/planUtils"
-
-type FreePlanLimitCardProps = {
-  account: Account
-}
-
-export const FreePlanLimitCard = ({ account }: FreePlanLimitCardProps) => {
-  const cardItems = [
-    {
-      label: "Plan Type",
-      value: getPlanName(account.planType),
-    },
-    // {
-    //   label: "Daily Limit",
-    //   value: account.integrations.dailyLimit,
-    // },
-  ]
-
-  return (
-    <TitledCard header={() => <Text fw={600}>Current plan</Text>}>
-      <Stack px={20} py={10}>
-        {cardItems.map(({ label, value }, index) => (
-          <React.Fragment key={`${label}-${index}`}>
-            <Group justify="space-between" p={12}>
-              <Text>{label}</Text> <Text>{value}</Text>
-            </Group>
-            {index !== cardItems.length - 1 && <Divider />}
-          </React.Fragment>
-        ))}
-      </Stack>
-    </TitledCard>
-  )
-}
-
-export default FreePlanLimitCard
diff --git a/app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/index.ts b/app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/index.ts
deleted file mode 100644
index 16489a01a..000000000
--- a/app/routes/account.$accountId.settings.plan/components/FreePlanLimitCard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import FreePlanLimitCard from "./FreePlanLimitCard"
-export * from "./FreePlanLimitCard"
-export default FreePlanLimitCard
diff --git a/app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/StarterAccountPlan.tsx b/app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/StarterAccountPlan.tsx
deleted file mode 100644
index 0bf613cd1..000000000
--- a/app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/StarterAccountPlan.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { SimpleGrid, Stack, Text, Title } from "@mantine/core"
-import { useNavigate } from "@remix-run/react"
-import React from "react"
-import { AccountPlan } from "~/components/AccountPlan"
-import { Account, PayPlanType, RoleName } from "~/models/portal/sdk"
-import StarterPlanLimitCard from "~/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard"
-import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
-import { getPlanName } from "~/utils/planUtils"
-
-type StarterAccountPlanProps = {
-  account: Account
-  userRole: RoleName
-}
-
-const StarterAccountPlan = ({ account, userRole }: StarterAccountPlanProps) => {
-  const navigate = useNavigate()
-
-  return userRole === "MEMBER" ? (
-    <Stack mt={"xl"}>
-      <StarterPlanLimitCard account={account} />
-    </Stack>
-  ) : (
-    <Stack align="center" mt={"xl"}>
-      <Stack gap="xs" ta="center">
-        <Title order={3}>Upgrade your plan</Title>
-        <Text>
-          Your current plan is {getPlanName(account.planType)}. <br /> Upgrade now to
-          Auto-Scale and pay as you go.
-        </Text>
-      </Stack>
-      <SimpleGrid cols={{ base: 1, lg: 3 }}>
-        <AccountPlan disableFree type={PayPlanType.FreetierV0} />
-        <AccountPlan
-          type={PayPlanType.PayAsYouGoV0}
-          onContinue={() => {
-            trackEvent({
-              category: AnalyticCategories.account,
-              action: AnalyticActions.account_plan_upgrade,
-              label: account.id,
-            })
-            navigate(`/api/stripe/checkout-session?account-id=${account.id}`)
-          }}
-        />
-        <AccountPlan
-          type={PayPlanType.Enterprise}
-          onContinue={() => {
-            trackEvent({
-              category: AnalyticCategories.account,
-              action: AnalyticActions.account_plan_enterprise,
-              label: account.id,
-            })
-            window.open("https://www.grove.city/enterprise", "_blank", "noreferrer")
-          }}
-        />
-      </SimpleGrid>
-    </Stack>
-  )
-}
-
-export default StarterAccountPlan
diff --git a/app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/index.ts b/app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/index.ts
deleted file mode 100644
index 0e07551e3..000000000
--- a/app/routes/account.$accountId.settings.plan/components/StarterAccountPlan/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import StarterAccountPlan from "./StarterAccountPlan"
-export * from "./StarterAccountPlan"
-export default StarterAccountPlan
diff --git a/app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/StarterPlanLimitCard.tsx b/app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/StarterPlanLimitCard.tsx
deleted file mode 100644
index 76841b394..000000000
--- a/app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/StarterPlanLimitCard.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Divider, Group, Text, Stack } from "@mantine/core"
-import React from "react"
-import { TitledCard } from "~/components/TitledCard"
-import { Account } from "~/models/portal/sdk"
-import { getPlanName } from "~/utils/planUtils"
-
-type StarterPlanLimitCardProps = {
-  account: Account
-}
-
-export const StarterPlanLimitCard = ({ account }: StarterPlanLimitCardProps) => {
-  const cardItems = [
-    {
-      label: "Plan Type",
-      value: getPlanName(account.planType),
-    },
-    // {
-    //   label: "Daily Limit",
-    //   value: account.integrations.dailyLimit,
-    // },
-  ]
-
-  return (
-    <TitledCard header={() => <Text fw={600}>Current plan</Text>}>
-      <Stack px={20} py={10}>
-        {cardItems.map(({ label, value }, index) => (
-          <React.Fragment key={`${label}-${index}`}>
-            <Group justify="space-between" p={12}>
-              <Text>{label}</Text> <Text>{value}</Text>
-            </Group>
-            {index !== cardItems.length - 1 && <Divider />}
-          </React.Fragment>
-        ))}
-      </Stack>
-    </TitledCard>
-  )
-}
-
-export default StarterPlanLimitCard
diff --git a/app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/index.ts b/app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/index.ts
deleted file mode 100644
index dabfdf2e0..000000000
--- a/app/routes/account.$accountId.settings.plan/components/StarterPlanLimitCard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import StarterPlanLimitCard from "./StarterPlanLimitCard"
-export * from "./StarterPlanLimitCard"
-export default StarterPlanLimitCard
diff --git a/app/routes/account.$accountId.settings.plan/components/UnlimitedAccountOverviewCard/UnlimitedPlanOverviewCard.tsx b/app/routes/account.$accountId.settings.plan/components/UnlimitedAccountOverviewCard/UnlimitedPlanOverviewCard.tsx
index 62f500bd3..0e2c4a100 100644
--- a/app/routes/account.$accountId.settings.plan/components/UnlimitedAccountOverviewCard/UnlimitedPlanOverviewCard.tsx
+++ b/app/routes/account.$accountId.settings.plan/components/UnlimitedAccountOverviewCard/UnlimitedPlanOverviewCard.tsx
@@ -63,7 +63,7 @@ export default function UnlimitedPlanOverviewCard({
           </Stack>
         </SimpleGrid>
 
-        {userRole !== "MEMBER" && (
+        {userRole !== RoleName.Member && (
           <Box mt="auto">
             <Form action="/api/stripe/portal-session" method="post">
               <input hidden defaultValue={location.pathname} name="return-path" />
diff --git a/app/routes/account.$accountId.settings.plan/route.test.tsx b/app/routes/account.$accountId.settings.plan/route.test.tsx
index c880ff8ff..622a73795 100644
--- a/app/routes/account.$accountId.settings.plan/route.test.tsx
+++ b/app/routes/account.$accountId.settings.plan/route.test.tsx
@@ -55,7 +55,7 @@ describe("account/$accountId/settings/plan", () => {
       ).toBeInTheDocument()
     })
   })
-  it("renders plan for payg", async () => {
+  it("renders plan for unlimited", async () => {
     function SettingsOutLetContext() {
       return (
         <RootProviders>
@@ -74,7 +74,7 @@ describe("account/$accountId/settings/plan", () => {
             Component: AccountPlanDetails,
             loader: () => {
               return json<AccountPlanLoaderData>({
-                account: { ...accountMockData, planType: PayPlanType.PayAsYouGoV0 },
+                account: { ...accountMockData, planType: PayPlanType.PlanUnlimited },
                 accountAppsRelays: [accountAppsRelaysData],
                 subscription: subscription,
                 user: profileMockData,
diff --git a/app/routes/account.$accountId.settings.plan/view.test.tsx b/app/routes/account.$accountId.settings.plan/view.test.tsx
index 04520f557..ca2715e97 100644
--- a/app/routes/account.$accountId.settings.plan/view.test.tsx
+++ b/app/routes/account.$accountId.settings.plan/view.test.tsx
@@ -14,7 +14,7 @@ const accountAppsRelaysData: AccountAppRelays = {
 }
 
 describe("<PlanView />", () => {
-  it("renders upgrade screen for freetier plan", async () => {
+  it("renders upgrade screen for free plan", async () => {
     const RemixStub = createRemixStub([
       {
         path: "/",
@@ -39,14 +39,14 @@ describe("<PlanView />", () => {
       ).toBeInTheDocument()
     })
   })
-  it("renders plan for payg", async () => {
+  it("renders plan for unlimited", async () => {
     const RemixStub = createRemixStub([
       {
         path: "/",
         Component: () => (
           <RootProviders>
             <PlanView
-              account={{ ...accountMockData, planType: PayPlanType.PayAsYouGoV0 }}
+              account={{ ...accountMockData, planType: PayPlanType.PlanUnlimited }}
               accountAppsRelays={[accountAppsRelaysData]}
               subscription={subscription}
               user={profileMockData}
diff --git a/app/routes/account.$accountId.settings.plan/view.tsx b/app/routes/account.$accountId.settings.plan/view.tsx
index a0e4d2e22..cd452b707 100644
--- a/app/routes/account.$accountId.settings.plan/view.tsx
+++ b/app/routes/account.$accountId.settings.plan/view.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@mantine/core"
-import AutoScalePlanOverviewCard from "./components/AutoScalePlanOverviewCard"
 import EnterpriseAccountOverviewCard from "./components/EnterpriseAccountOverviewCard"
-import StarterAccountPlan from "./components/StarterAccountPlan"
+import FreeAccountPlan from "./components/FreeAccountPlan"
+import UnlimitedPlanOverviewCard from "./components/UnlimitedAccountOverviewCard"
 import { AccountPlanLoaderData } from "./route"
 import { PayPlanType, RoleName } from "~/models/portal/sdk"
 
@@ -14,12 +14,10 @@ export const AccountPlanView = ({
 }: AccountPlanViewProps) => {
   return (
     <Box py={20}>
-      {account.planType === PayPlanType.FreetierV0 && (
-        <StarterAccountPlan account={account} userRole={userRole} />
-      )}
+      {account.planType === PayPlanType.PlanFree && <FreeAccountPlan account={account} />}
 
-      {account.planType === PayPlanType.PayAsYouGoV0 && (
-        <AutoScalePlanOverviewCard
+      {account.planType === PayPlanType.PlanUnlimited && (
+        <UnlimitedPlanOverviewCard
           account={account}
           subscription={subscription}
           userRole={userRole}
diff --git a/app/routes/api.stripe.subscription-delete/route.tsx b/app/routes/api.stripe.subscription-delete/route.tsx
index 6170d657d..68c0d2ebf 100644
--- a/app/routes/api.stripe.subscription-delete/route.tsx
+++ b/app/routes/api.stripe.subscription-delete/route.tsx
@@ -23,7 +23,7 @@ export const action: ActionFunction = async ({ request }) => {
       if (updatedSubscription) {
         await updatePlan({
           id: accountId as string,
-          type: PayPlanType.FreetierV0,
+          type: PayPlanType.PlanFree,
         })
 
         await triggerSubscriptionActionNotification({