handle no player limit

src/api/usePricingPlanUsage.ts

@@ -2,7 +2,7 @@ import useSWR from 'swr'
 import buildError from '../utils/buildError'
 import makeValidatedGetRequest from './makeValidatedGetRequest'
 import { z } from 'zod'
-import { pricingPlanUsageSchema } from '../entities/pricingPlan'
+import { PricingPlanUsage, pricingPlanUsageSchema } from '../entities/pricingPlan'
 
 export default function usePricingPlanUsage() {
   const fetcher = async ([url]: [string]) => {
@@ -18,8 +18,11 @@ export default function usePricingPlanUsage() {
     fetcher
   )
 
+  const limit = data?.usage.limit ?? (typeof data === 'undefined' ? 0 : Infinity)
+  const used = data?.usage.used ?? 0
+
   return {
-    usage: data?.usage ?? { limit: 0, used: 0 },
+    usage: { limit, used } satisfies PricingPlanUsage,
     loading: !data && !error,
     error: error && buildError(error)
   }

src/components/UsageWarningBanner.tsx

@@ -12,7 +12,7 @@ export default function UsageWarningBanner({ usage }: UsageWarningBannerProps) {
     <AlertBanner
       className='w-full lg:2/3 xl:w-1/2'
       icon={IconInfoCircle}
-      text={<p>You&apos;ve used {Math.round(usage.used / usage.limit * 100)}% of your current plan&apos;s limit. <Link to='/billing' className='font-bold underline'>Upgrade your plan</Link> to avoid any disruption to your game.</p>}
+      text={<p>You&apos;ve used {Math.round(usage.used / usage.limit ?? Infinity * 100)}% of your current plan&apos;s limit. <Link to='/billing' className='font-bold underline'>Upgrade your plan</Link> to avoid any disruption to your game.</p>}
     />
   )
 }

src/components/billing/PricingPlanTile.tsx

@@ -85,7 +85,7 @@ export default function PricingPlanTile({
             <ul>
               {!custom &&
                 <li>
-                  Up to <span className='font-semibold'>{plan?.playerLimit.toLocaleString()}</span> players
+                  Up to <span className='font-semibold'>{(plan?.playerLimit ?? Infinity).toLocaleString()}</span> players
                 </li>
               }
 

src/entities/pricingPlan.ts

@@ -5,7 +5,7 @@ export const pricingPlanSchema = z.object({
   stripeId: z.string(),
   hidden: z.boolean(),
   default: z.boolean(),
-  playerLimit: z.number()
+  playerLimit: z.number().nullable()
 })
 
 export const pricingPlanUsageSchema = z.object({