Merge branch 'stage' into landing-page

app/components/Sidebar/Sidebar.tsx

@@ -40,7 +40,7 @@ const getStaticRoutes = (
     ...(isStarterAccount && userRole !== RoleName.Member
       ? [
           {
-            to: `/api/stripe/checkout-session?account-id=${activeAccount.id}`,
+            to: `/account/${activeAccount?.id}/upgrade`,
             label: "Upgrade to Auto-Scale",
             icon: LuArrowUpCircle,
             end: true,

app/hooks/useModals.tsx

@@ -18,7 +18,6 @@ const useModals = () => {
     overlayOpacity: 0.8,
     overlayBlur: 3,
     padding: "md",
-    styles: { body: { marginTop: "90px" } },
   }
 
   const openConfirmationModal = (modalProps: OpenConfirmModal) =>
@@ -39,6 +38,7 @@ const useModals = () => {
     openModal({
       fullScreen: true,
       withCloseButton: false,
+      styles: { body: { marginTop: "90px" } },
       ...commonModalProps,
       ...modalProps,
     })

app/routes/account.$accountId.settings.plan/components/AutoScalePlanLatestInvoiceCard/AutoScalePlanLatestInvoiceCard.tsx

@@ -92,9 +92,7 @@ export default function AutoScalePlanLatestInvoiceCard({
         <Divider />
         <Group position="apart">
           <Text>End period</Text>
-          <Text>
-            <Text>{formatTimestampShort(invoice.period_end)}</Text>
-          </Text>
+          <Text>{formatTimestampShort(invoice.period_end)}</Text>
         </Group>
         <Divider />
 

app/routes/account.$accountId.settings.plan/components/AutoScalePlanOverviewCard/AutoScalePlanOverviewCard.tsx

@@ -36,8 +36,7 @@ export default function AutoScalePlanOverviewCard({
   const location = useLocation()
   const { classes: commonClasses } = useCommonStyles()
 
-  const { openStopSubscriptionModal, openRenewSubscriptionModal } =
-    useSubscriptionModals()
+  const { openStopSubscriptionModal } = useSubscriptionModals()
 
   const accountPlanType = account.planType
 
@@ -84,29 +83,17 @@ export default function AutoScalePlanOverviewCard({
               <input hidden defaultValue={location.pathname} name="return-path" />
               <Grid gutter="sm" justify="flex-end">
                 <Grid.Col lg={4} md={4} sm={6}>
-                  {accountPlanType === "PAY_AS_YOU_GO_V0" ? (
-                    <Button
-                      fullWidth
-                      className={commonClasses.grayOutlinedButton}
-                      color="gray"
-                      rightIcon={<LuStopCircle size={18} />}
-                      type="button"
-                      variant="outline"
-                      onClick={() => openStopSubscriptionModal(account)}
-                    >
-                      Stop subscription
-                    </Button>
-                  ) : (
-                    <Button
-                      fullWidth
-                      rightIcon={<LuRepeat size={18} />}
-                      type="button"
-                      variant="outline"
-                      onClick={() => openRenewSubscriptionModal(account)}
-                    >
-                      Renew subscription
-                    </Button>
-                  )}
+                  <Button
+                    fullWidth
+                    className={commonClasses.grayOutlinedButton}
+                    color="gray"
+                    rightIcon={<LuStopCircle size={18} />}
+                    type="button"
+                    variant="outline"
+                    onClick={() => openStopSubscriptionModal(account)}
+                  >
+                    Stop subscription
+                  </Button>
                 </Grid.Col>
                 <Grid.Col lg={4} md={4} sm={6}>
                   <Button

app/routes/account.$accountId.settings.plan/hooks/useSubscriptionModals.tsx

@@ -15,20 +15,7 @@ const useSubscriptionModals = () => {
       },
       {
         method: "POST",
-        action: "/api/stripe/subscription",
-      },
-    )
-  }
-
-  const renewSubscription = (account: Account) => {
-    fetcher.submit(
-      {
-        "account-id": account.id,
-        "subscription-renew": "true",
-      },
-      {
-        method: "POST",
-        action: "/api/stripe/subscription",
+        action: "/api/stripe/subscription-delete",
       },
     )
   }
@@ -55,28 +42,7 @@ const useSubscriptionModals = () => {
       },
     })
 
-  const openRenewSubscriptionModal = (account: Account) =>
-    openConfirmationModal({
-      title: <Text fw={600}>Renew Subscription</Text>,
-      children: (
-        <Text>
-          Your plan will be renewed to 'Auto-Scale' effective immediately. You will be
-          invoiced at the end of your billing period. If you change your mind, you can
-          stop your subscription anytime.
-        </Text>
-      ),
-      labels: { cancel: "Cancel", confirm: "Renew subscription" },
-      onConfirm: () => {
-        renewSubscription(account)
-        trackEvent({
-          category: AnalyticCategories.account,
-          action: AnalyticActions.account_subscription_renew,
-          label: account.id,
-        })
-      },
-    })
-
-  return { openStopSubscriptionModal, openRenewSubscriptionModal }
+  return { openStopSubscriptionModal }
 }
 
 export default useSubscriptionModals

app/routes/account.$accountId.settings.plan/view.tsx

@@ -1,12 +1,10 @@
-import { Alert, Box, Button, MantineTheme, Stack } from "@pokt-foundation/pocket-blocks"
-import { LuAlertCircle, LuRepeat } from "react-icons/lu"
+import { Box, Stack } from "@pokt-foundation/pocket-blocks"
 import AutoScalePlanLatestInvoiceCard from "./components/AutoScalePlanLatestInvoiceCard"
 import AutoScalePlanOverviewCard from "./components/AutoScalePlanOverviewCard"
 import EnterpriseAccountOverviewCard from "./components/EnterpriseAccountOverviewCard"
 import StarterAccountPlan from "./components/StarterAccountPlan"
 import { AccountPlanLoaderData } from "./route"
 import { PayPlanType, RoleName } from "~/models/portal/sdk"
-import useSubscriptionModals from "~/routes/account.$accountId.settings.plan/hooks/useSubscriptionModals"
 
 export type AccountPlanViewProps = AccountPlanLoaderData & { userRole: RoleName }
 
@@ -18,42 +16,10 @@ export const AccountPlanView = ({
   usageRecords,
   userRole,
 }: AccountPlanViewProps) => {
-  const { openRenewSubscriptionModal } = useSubscriptionModals()
-
   return (
     <Box py={20}>
       {account.planType === PayPlanType.FreetierV0 && (
-        <>
-          {account.integrations?.stripeSubscriptionID && (
-            <Alert
-              color="yellow"
-              icon={<LuAlertCircle size={18} />}
-              mb="xl"
-              radius={8}
-              sx={(theme: MantineTheme) => ({
-                backgroundColor: theme.colors.dark,
-                borderColor: theme.colors.dark[4],
-              })}
-              title="Renew subscription"
-              variant="outline"
-            >
-              Your current plan is free. We are no longer charging you for relays. Access
-              to your subscription will close after the end of your current billing
-              period.
-              <Button
-                color="yellow"
-                mt="md"
-                rightIcon={<LuRepeat size={18} />}
-                size="xs"
-                variant="outline"
-                onClick={() => openRenewSubscriptionModal(account)}
-              >
-                Renew subscription
-              </Button>
-            </Alert>
-          )}
-          <StarterAccountPlan account={account} userRole={userRole} />
-        </>
+        <StarterAccountPlan account={account} userRole={userRole} />
       )}
 
       {account.planType === PayPlanType.PayAsYouGoV0 && (

app/routes/account_.$accountId.$appId.update/route.tsx

@@ -49,21 +49,22 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       return redirect(`/account/${accountId}`)
     }
 
-    const getUserAccountsResponse = await portal.getUserAccounts({ accepted: true })
-    if (!getUserAccountsResponse.getUserAccounts) {
+    const getUserAccountResponse = await portal
+      .getUserAccount({ accountID: accountId, accepted: true })
+      .catch((e) => {
+        console.log(e)
+      })
+
+    if (!getUserAccountResponse) {
       return redirect(`/account/${params.accountId}`)
     }
 
-    const currentAccount = getUserAccountsResponse?.getUserAccounts?.find(
-      (acc) => acc?.id === accountId,
+    const userRole = getUserAccountRole(
+      getUserAccountResponse.getUserAccount.users,
+      user.user.portalUserID,
     )
 
-    const canUserUpdate = currentAccount
-      ? getUserAccountRole(currentAccount.users, user.user.portalUserID) !==
-        RoleName.Member
-      : false
-
-    if (!canUserUpdate) {
+    if (!userRole || userRole === RoleName.Member) {
       return redirect(`/account/${params.accountId}/${appId}`)
     }
 

app/routes/account_.$accountId.create/route.tsx

@@ -15,12 +15,12 @@ import { DEFAULT_APPMOJI } from "./components/AppmojiPicker"
 import PortalLoader from "~/components/PortalLoader"
 import useActionNotification from "~/hooks/useActionNotification"
 import { initPortalClient } from "~/models/portal/portal.server"
-import { Account, PayPlanType } from "~/models/portal/sdk"
+import { PayPlanType, RoleName } from "~/models/portal/sdk"
+import { getUserAccountRole } from "~/utils/accountUtils"
 import { getErrorMessage } from "~/utils/catchError"
 import { getRequiredClientEnvVar } from "~/utils/environment"
 import { MAX_USER_APPS } from "~/utils/planUtils"
 import { seo_title_append } from "~/utils/seo"
-import isUserMember from "~/utils/user"
 import { getUserPermissions, requireUser, Permissions } from "~/utils/user.server"
 
 export const meta: MetaFunction = () => {
@@ -46,18 +46,12 @@ export const loader: LoaderFunction = async ({ request, params }) => {
     return redirect(`/account/${params.accountId}`)
   }
 
-  const getUserAccountsResponse = await portal.getUserAccounts({ accepted: true })
-  if (!getUserAccountsResponse.getUserAccounts) {
-    return redirect(`/account/${params.accountId}`)
-  }
-
-  const isMember = isUserMember({
-    accounts: getUserAccountsResponse.getUserAccounts as Account[],
-    accountId: accountId as string,
-    user: user.user,
-  })
+  const userRole = getUserAccountRole(
+    getUserAccountResponse.getUserAccount.users,
+    user.user.portalUserID,
+  )
 
-  if (isMember) {
+  if (!userRole || userRole === RoleName.Member) {
     return redirect(`/account/${params.accountId}`)
   }
   const portalApps = getUserAccountResponse.getUserAccount.portalApps

app/routes/account_.$accountId.update/route.tsx

@@ -21,11 +21,11 @@ import ErrorView from "~/components/ErrorView"
 import PortalLoader from "~/components/PortalLoader"
 import useActionNotification from "~/hooks/useActionNotification"
 import { initPortalClient } from "~/models/portal/portal.server"
-import { Account } from "~/models/portal/sdk"
+import { Account, RoleName } from "~/models/portal/sdk"
 import { DataStruct } from "~/types/global"
+import { getUserAccountRole } from "~/utils/accountUtils"
 import { getErrorMessage } from "~/utils/catchError"
 import { seo_title_append } from "~/utils/seo"
-import isUserMember from "~/utils/user"
 import { requireUser } from "~/utils/user.server"
 
 export const meta: MetaFunction = () => {
@@ -59,18 +59,12 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       return redirect(`/account/${params.accountId}`)
     }
 
-    const getUserAccountsResponse = await portal.getUserAccounts({ accepted: true })
-    if (!getUserAccountsResponse.getUserAccounts) {
-      return redirect(`/account/${params.accountId}`)
-    }
-
-    const isMember = isUserMember({
-      accounts: getUserAccountsResponse.getUserAccounts as Account[],
-      accountId: accountId as string,
-      user: user.user,
-    })
+    const userRole = getUserAccountRole(
+      getUserAccountResponse.getUserAccount.users,
+      user.user.portalUserID,
+    )
 
-    if (isMember) {
+    if (!userRole || userRole === RoleName.Member) {
       return redirect(`/account/${params.accountId}`)
     }