Merge pull request #668 from pokt-foundation/stage

feat: enable monthly relay limit and bug fixes

README.md

@@ -38,6 +38,34 @@ 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).
+
+### 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.

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,

app/models/portal/queries.graphqls

@@ -50,6 +50,7 @@ query getUserAccount(
     name
     planType
     enterpriseLimit
+    monthlyUserLimit
     notifications {
       notificationType
       notificationSettings {

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}`)
     }
 

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,37 @@ 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
+                  ? `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. ${
+                      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>
+          <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 +80,7 @@ export const AccountSettingsView = ({ account, userRole }: AccountSettingsViewPr
                 })
               }}
             >
-              Change name
+              Change settings
             </Button>
           </Stack>
           <Divider />

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>

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" />

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,

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}

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}

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, {