feat: revive overusage banner/upsell

studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx

@@ -14,7 +14,7 @@ import {
   IconBookOpen,
 } from 'ui'
 
-import { checkPermissions, useStore } from 'hooks'
+import { checkPermissions, useFlag, useStore } from 'hooks'
 import { formatBytes } from 'lib/helpers'
 import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import SparkBar from 'components/ui/SparkBar'
@@ -24,6 +24,7 @@ import { USAGE_BASED_PRODUCTS } from 'components/interfaces/Billing/Billing.cons
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useProjectReadOnlyQuery } from 'data/config/project-read-only-query'
 import { ProjectUsageResponseUsageKeys, useProjectUsageQuery } from 'data/usage/project-usage-query'
+import { getResourcesExceededLimits } from 'components/ui/OveragesBanner/OveragesBanner.utils'
 
 interface Props {
   projectRef?: string
@@ -40,6 +41,8 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
     connectionString: project?.connectionString,
   })
 
+  const overusageBadgeEnabled = useFlag('overusageBadge')
+
   const canUpdateSubscription = checkPermissions(
     PermissionAction.BILLING_WRITE,
     'stripe.subscriptions'
@@ -51,6 +54,8 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
     subscriptionTier === PRICING_TIER_PRODUCT_IDS.TEAM ||
     subscriptionTier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
 
+  const resourcesExceededLimits = getResourcesExceededLimits(usage)
+
   const showUsageExceedMessage = subscriptionTier !== undefined && !projectHasNoLimits
 
   const planNames = {
@@ -106,16 +111,54 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
     <Loading active={isLoading}>
       {usage && (
         <div>
-          {USAGE_BASED_PRODUCTS.map((product) => {
-            const isExceededUsage =
-              showUsageExceedMessage &&
-              product.features
-                .map((feature) => {
-                  const featureUsage = usage[feature.key as ProjectUsageResponseUsageKeys]
-                  return (featureUsage.usage ?? 0) / featureUsage.limit > 1
-                })
-                .some((x) => x === true)
+          {resourcesExceededLimits.length > 0 &&
+            showUsageExceedMessage &&
+            overusageBadgeEnabled && (
+              <div className="mb-10">
+                <InformationBox
+                  hideCollapse
+                  defaultVisibility
+                  icon={<IconAlertCircle strokeWidth={2} />}
+                  title="You are exceeding your plans quota"
+                  description={
+                    <div className="p-1">
+                      {subscriptionTier === PRICING_TIER_PRODUCT_IDS.FREE ? (
+                        <div>
+                          <p>
+                            Your project is currently on the Free tier - upgrade to the Pro tier for
+                            a greatly increased quota and continue to scale.
+                          </p>
+                          <p className="mb-4">
+                            See{' '}
+                            <Link href="https://supabase.com/pricing" passHref>
+                              <a className="text-brand-900">pricing page</a>
+                            </Link>{' '}
+                            for a full breakdown of available plans.
+                          </p>
+                          <Link href={`/project/${projectRef}/settings/billing/update`}>
+                            <Button>Upgrade to Pro</Button>
+                          </Link>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          <p>
+                            By default, Pro projects have spend caps to control costs. When enabled,
+                            usage is limited to the plan's quota, with restrictions when limits are
+                            exceeded. To scale beyond Pro limits without restrictions, disable the
+                            spend cap and pay for over-usage beyond the quota.
+                          </p>
+                          <Link href={`/project/${projectRef}/settings/billing/update/pro`}>
+                            <Button>Configure Spend Cap</Button>
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  }
+                />
+              </div>
+            )}
 
+          {USAGE_BASED_PRODUCTS.map((product) => {
             return (
               <div
                 key={product.title}
@@ -141,12 +184,6 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                           <h5 className="mb-0">{product.title}</h5>
                         </div>
                       </th>
-                      {/* Plan Limits */}
-                      <th className="hidden p-3 text-xs font-medium leading-4 text-left text-gray-400 lg:table-cell">
-                        {isExceededUsage && <Badge color="red">Exceeded usage</Badge>}
-                      </th>
-                      {/* Usage */}
-                      <th className="p-3 text-xs font-medium leading-4 text-left text-gray-400" />
                     </tr>
                   </thead>
                   {/* Line items */}

studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
 
 import { IS_PLATFORM, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
-import { useParams, useStore } from 'hooks'
+import { useFlag, useParams, useStore } from 'hooks'
 import BreadcrumbsView from './BreadcrumbsView'
 import OrgDropdown from './OrgDropdown'
 import ProjectDropdown from './ProjectDropdown'
@@ -38,7 +38,8 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
   const showOverUsageBadge =
     selectedProject?.subscription_tier !== undefined &&
     !projectHasNoLimits &&
-    resourcesExceededLimits.length > 0
+    resourcesExceededLimits.length > 0 &&
+    useFlag('overusageBadge')
 
   return (
     <div
@@ -86,16 +87,15 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
                   </div>
                 )}
 
-                {/* [Joshen TODO] Temporarily hidden until usage endpoint is sorted out */}
-                {/* {showOverUsageBadge && (
+                {showOverUsageBadge && (
                   <div className="ml-2">
-                    <Link href={`/project/${projectRef}/settings/billing/subscription`}>
+                    <Link href={`/project/${projectRef}/settings/billing/usage`}>
                       <a>
                         <Badge color="red">Project has exceeded usage limits </Badge>
                       </a>
                     </Link>
                   </div>
-                )} */}
+                )}
               </>
             )}
           </>